shape interaction with drag and click

Descripción

This is a follow-up on https://github.com/plotly/plotly.js/issues/4512

I was trying to figure out if I could make individual shapes clickable/interactable and draggable.

Use cases

when I click on a shape I'd like its color to change
when I drag a shape I'd like it to only drag horizontally
when adding a shape I'd like to make certain shapes draggable/clickable and others not

As such I tried the following

<head>
	<!-- Load plotly.js into the DOM -->
	<script src='https://cdn.plot.ly/plotly-latest.min.js'></script>
</head>

<body>
	<div id='myDiv'><!-- Plotly chart will be drawn inside this DIV --></div>
</body>

var trace1 = {
  x: [0, 1, 2, 3, 4, 5, 6, 7, 8],
  y: [0, 1, 3, 2, 4, 3, 4, 6, 5],
  type: 'scatter'
};
var trace2 = {
  x: [0, 1, 2, 3, 4, 5, 6, 7, 8],
  y: [0, 4, 5, 1, 2, 2, 3, 4, 2],
  type: 'scatter'
};
var data = [trace1, trace2];
var shapes = [
  {
    type: "line",
    x0: 2,
    y0: 0,
    x1: 2,
    y1: 1,
    yref: "paper",
    line: {color: "RoyalBlue", width:3},
    editable: true
  },
  {
    type: "line",
    x0: 3,
    y0: 0,
    x1: 3,
    y1: 1,
    yref: "paper",
    line: {color: "Red", width:3},
    editable: false
  }
];
var layout = {
  shapes: shapes
};
var config = {
  edits: {
    shapePosition: true
  }
};
Plotly.newPlot('myDiv', data, layout, config);
var myPlot = document.getElementById('myDiv');

I can now drag both the red and blue line albeit I set editable=true for the first one and editable=false for the second one.
When setting edits>shapePosition=false then I cannot drag any shape even if editable=true for the blue is set.

Línea de trabajo

Comienza revisando el issue vinculado #4512 y reproduciendo el ejemplo con Plotly.newPlot, el array shapes, la configuración editable de cada shape y config.edits.shapePosition. El trabajo estará terminado cuando se pueda hacer clic y arrastrar cada shape de forma selectiva, incluidas las restricciones de interacción solicitadas, sin cambiar el comportamiento de las shapes no editables.

Escrito por el modelo de indexación a partir del texto del issue.

Evaluación

Stack tecnológico

javascript

Área

data-visualization

Tipo de issue

Nueva funcionalidad

Dificultad

5/5

Tiempo estimado

Más de una semana

Estado de actividad

Estancado

Claridad

Bastante claro

Aptitud para principiantes

35/100

Descripción

Guía de contribución

Primeros pasos

Línea de trabajo

Evaluación

shape interaction with drag and click

Descripción

Guía de contribución

Primeros pasos

Línea de trabajo

Evaluación

Recibe los nuevos issues en tu correo