shape interaction with drag and click

Mô tả

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.

Bắt đầu từ đâu

Đọc hết issue, rồi đọc hướng dẫn đóng góp của dự án.

Bình luận trên issue rằng bạn sẽ nhận — tránh hai người làm cùng một việc.

Fork repository và làm thay đổi trên một nhánh.

Mở pull request có tham chiếu số hiệu của issue.

Hướng nghiên cứu

Bắt đầu bằng việc xem xét issue #4512 đã liên kết và tái hiện ví dụ với Plotly.newPlot, mảng shapes, thiết lập editable của từng shape và config.edits.shapePosition. Công việc hoàn tất khi có thể nhấp và kéo từng shape một cách có chọn lọc, bao gồm các ràng buộc tương tác được yêu cầu, mà không thay đổi hành vi của các shape không editable.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.

Đánh giá

Công nghệ

javascript

Lĩnh vực

data-visualization

Loại issue

Tính năng

Độ khó

5/5

Thời gian dự kiến

Hơn một tuần

Mức độ hoạt động

Đình trệ

Độ rõ ràng

Khá rõ ràng

Mức phù hợp với người mới

35/100

Mô tả

Hướng dẫn đóng góp

Bắt đầu từ đâu

Hướng nghiên cứu

Đánh giá

Nhận issue mới trong hộp thư của bạn