shape interaction with drag and click

Description

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.

Par où commencer

Lisez l'issue en entier, puis le guide de contribution du projet.

Signalez en commentaire que vous la prenez — cela évite que deux personnes fassent le même travail.

Forkez le dépôt et travaillez sur une branche.

Ouvrez une pull request qui référence le numéro de l'issue.

Piste de recherche

Commencez par examiner l’issue liée #4512 et reproduire l’exemple avec Plotly.newPlot, le tableau shapes, le paramètre editable de chaque shape et config.edits.shapePosition. Le travail est terminé lorsque les shapes individuelles peuvent être rendues cliquables et déplaçables de manière sélective, y compris avec les contraintes d’interaction demandées, sans modifier le comportement des shapes non éditables.

Rédigé par le modèle d'indexation à partir du texte de l'issue.

Évaluation

Stack technique

javascript

Domaine

data-visualization

Type d'issue

Fonctionnalité

Difficulté

5/5

Temps estimé

Plus d'une semaine

Activité

À l'abandon

Clarté

Plutôt claire

Accessibilité débutants

35/100

Description

Guide de contribution

Par où commencer

Piste de recherche

Évaluation

Recevez les nouvelles issues par e-mail