shape interaction with drag and click

描述

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.

调研方向

首先查看链接的 issue #4512，并使用 Plotly.newPlot、shapes 数组、每个 shape 的 editable 设置以及 config.edits.shapePosition 重现示例。当各个 shape 可以根据选择进行点击和拖动，同时满足所请求的交互限制，并且不改变不可编辑 shape 的行为时，工作即完成。

由索引模型根据 Issue 内容生成。

评估

技术栈

javascript

领域

data-visualization

Issue 类型

功能

难度

5/5

预计耗时

一周以上

活跃度

停滞

描述清晰度

基本清楚

新手友好度

35/100

描述

贡献指南

从这里开始

调研方向

评估

shape interaction with drag and click

描述

贡献指南

从这里开始

调研方向

评估

把新 issue 发到你的邮箱