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;
});
Thanks for writing in. This would be a fine addition to the library.
As discussed in https://github.com/plotly/plotly.js/pull/4364, we could reuse the captureevents boolean attribute currently used in annotations for this task.
It would be nice to have annotation and shape options to prevent moving / clicking / editing per shape or annotation. I have an example where I want subplot title editable but not movable. System chart shapes that should not move or resize and user shapes that should just move or both.
It would be nice to have annotation and shape options to prevent moving / clicking / editing per shape or annotation. I have an example where I want subplot title editable but not movable. System chart shapes that should not move or resize and user shapes that should just move or both.
This is similar to what I want as well. Instead of all-or-nothing editable:true/false, I'd like to be able to set editable:false, and then override it for individual shapes.
Just my 2 cents.