shape interaction with drag and click

Beschreibung

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.

Rechercherichtung

Beginnen Sie mit der Durchsicht des verknüpften Issues #4512 und reproduzieren Sie das Beispiel mit Plotly.newPlot, dem shapes-Array, der editable-Einstellung jeder Shape und config.edits.shapePosition. Die Arbeit ist abgeschlossen, wenn einzelne Shapes selektiv anklickbar und ziehbar sein können, einschließlich der angeforderten Interaktionsbeschränkungen, ohne das Verhalten nicht editierbarer Shapes zu ändern.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Bewertung

Tech-Stack

javascript

Bereich

data-visualization

Issue-Typ

Feature

Schwierigkeit

5/5

Geschätzter Aufwand

Über eine Woche

Aktivitätsstatus

Veraltet

Klarheit

Größtenteils klar

Anfängerfreundlichkeit

35/100

Beschreibung

Beitragsleitfaden

Erste Schritte

Rechercherichtung

Bewertung

shape interaction with drag and click

Beschreibung

Beitragsleitfaden

Erste Schritte

Rechercherichtung

Bewertung

Neue Issues direkt in Ihr Postfach