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 を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。

着手することを issue にコメントします — 二人が同じ作業をするのを防げます。

リポジトリをフォークし、ブランチを切って変更します。

issue 番号を参照したプルリクエストを送ります。

調査の方向性

まず、リンクされている issue #4512 を確認し、Plotly.newPlot、shapes 配列、各 shape の editable 設定、config.edits.shapePosition を使って例を再現してください。要求されたインタラクションの制約を含め、編集不可の shape の動作を変更せずに、個々の shape を選択的にクリックおよびドラッグできるようになれば作業は完了です。

索引モデルが issue の本文から書いたものです。

評価

技術スタック

javascript

領域

data-visualization

issue の種類

機能追加

難易度

5/5

見積もり時間

1週間以上

活発さ

停滞

明瞭さ

おおむね明確

初心者へのやさしさ

35/100

説明

コントリビューションガイド

はじめの一歩

調査の方向性

評価

新しい issue をメールで受け取る