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.

Comienza con la referencia de las shapes del layout y la configuración de Plotly.newPlot mostrada en el informe, incluidos config.editable y el workaround de CodeSandbox enlazado. Sigue cómo se gestionan las interacciones con las shapes y determina dónde debe ubicarse la editabilidad por shape. Se considera terminado cuando las shapes protegidas no pueden reposicionarse, mientras que las demás interacciones editables del plot siguen funcionando.