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.

Start with the layout shapes reference and the Plotly.newPlot configuration shown in the report, including config.editable and the linked CodeSandbox workaround. Trace how shape interactions are handled and determine where per-shape editability belongs. Done means protected shapes cannot be repositioned while other editable plot interactions continue to work.