Thanks to visit codestin.com
Credit goes to github.com

Skip to content

add configuration property per shape to prevent user edits #4543

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Open
miqh opened this issue Feb 3, 2020 · 3 comments
Open

add configuration property per shape to prevent user edits #4543

miqh opened this issue Feb 3, 2020 · 3 comments
Labels
feature something new P3 backlog

Comments

@miqh
Copy link
Contributor

miqh commented Feb 3, 2020

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.
@etpinard
Copy link
Contributor

etpinard commented Feb 3, 2020

Thanks for writing in. This would be a fine addition to the library.

As discussed in #4364, we could reuse the captureevents boolean attribute currently used in annotations for this task.

@etpinard etpinard added the feature something new label Feb 3, 2020
@gvwilson gvwilson self-assigned this Jun 14, 2024
@gvwilson gvwilson removed their assignment Aug 2, 2024
@gvwilson gvwilson changed the title Configuration property per shape to prevent user edits add configuration property per shape to prevent user edits Aug 9, 2024
@gvwilson gvwilson added the P3 backlog label Aug 9, 2024
@mitja-p
Copy link

mitja-p commented Oct 28, 2024

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.

@mlg4035
Copy link

mlg4035 commented May 11, 2025 •
edited
Loading

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
feature something new P3 backlog
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
5 participants
@gvwilson @mlg4035 @etpinard @mitja-p @miqh