add configuration property per shape to prevent user edits

Hello,

I've been looking for a means to easily configure shape definitions such that any user edits (e.g. repositioning the shape) to them are blocked.

At this time of writing, the figure reference for shapes doesn't appear to have a property where one can achieve the above (e.g. an editable property). In case I've missed something in the API that makes this effortless, I'd appreciate any pointers.

In the meanwhile, I guess there are workarounds, such as my following example below which makes use of mouse event handlers:

import Plotly from 'plotly.js';

const data = [
  {
    x: [1, 2, 3, 4],
    y: [2, 4, 8, 16],
    type: 'scatter',
    mode: 'lines'
  }
];

const layout = {
  shapes: [
    {
      type: 'rect',
      x0: 2,
      x1: 3,
      y0: 5,
      y1: 10
    }
  ]
};

const config = {
  editable: true
};

const plot = document.getElementById('plot');

Plotly.newPlot(plot, data, layout, config);

let blockMoveEvents = false;

plot.addEventListener('mousedown', e => {
  if (e.target.closest('.shapelayer') == null) {
    return;
  }
  blockMoveEvents = true;
});
document.addEventListener('mousemove', e => {
  if (blockMoveEvents) {
    e.stopImmediatePropagation();
  }
});
document.addEventListener('mouseup', e => {
  blockMoveEvents = false;
});

Here's a CodeSandbox setup with the above.

Bắt đầu với tài liệu tham chiếu về các shape của layout và cấu hình Plotly.newPlot được nêu trong báo cáo, bao gồm config.editable và workaround CodeSandbox được liên kết. Theo dõi cách các tương tác với shape được xử lý và xác định khả năng chỉnh sửa theo từng shape nên được đặt ở đâu. Được xem là hoàn thành khi các shape được bảo vệ không thể bị định vị lại, trong khi các tương tác có thể chỉnh sửa khác của plot vẫn tiếp tục hoạt động.