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.

まず、レポートに示されている layout shapes のリファレンスと Plotly.newPlot の設定を確認します。これには config.editable と、リンクされている CodeSandbox の回避策も含まれます。shape の操作がどのように処理されているかを追跡し、shape ごとの編集可能性をどこに設定すべきかを判断します。保護された shape を再配置できない一方で、その他の編集可能な plot 操作が引き続き機能すれば完了です。