shape interaction with drag and click
Open
Nobody has claimed this yet.
feature
P3
- Dominant language
- JavaScript
- Stars
- 18.3k
- Forks
- 2k
- Avg merge
- 2d 12h
- Merged PRs (30d)
- 28
Description
This is a follow-up on https://github.com/plotly/plotly.js/issues/4512
I was trying to figure out if I could make individual shapes clickable/interactable and draggable.
Use cases
- when I click on a shape I'd like its color to change
- when I drag a shape I'd like it to only drag horizontally
- when adding a shape I'd like to make certain shapes draggable/clickable and others not
As such I tried the following
<head>
<!-- Load plotly.js into the DOM -->
<script src='https://cdn.plot.ly/plotly-latest.min.js'></script>
</head>
<body>
<div id='myDiv'><!-- Plotly chart will be drawn inside this DIV --></div>
</body>
var trace1 = {
x: [0, 1, 2, 3, 4, 5, 6, 7, 8],
y: [0, 1, 3, 2, 4, 3, 4, 6, 5],
type: 'scatter'
};
var trace2 = {
x: [0, 1, 2, 3, 4, 5, 6, 7, 8],
y: [0, 4, 5, 1, 2, 2, 3, 4, 2],
type: 'scatter'
};
var data = [trace1, trace2];
var shapes = [
{
type: "line",
x0: 2,
y0: 0,
x1: 2,
y1: 1,
yref: "paper",
line: {color: "RoyalBlue", width:3},
editable: true
},
{
type: "line",
x0: 3,
y0: 0,
x1: 3,
y1: 1,
yref: "paper",
line: {color: "Red", width:3},
editable: false
}
];
var layout = {
shapes: shapes
};
var config = {
edits: {
shapePosition: true
}
};
Plotly.newPlot('myDiv', data, layout, config);
var myPlot = document.getElementById('myDiv');
- I can now drag both the red and blue line albeit I set
editable=truefor the first one andeditable=falsefor the second one. - When setting
edits>shapePosition=falsethen I cannot drag any shape even ifeditable=truefor the blue is set.
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start by reviewing the linked issue #4512 and reproducing the example with Plotly.newPlot, the shapes array, each shape's editable setting, and config.edits.shapePosition. The work is done when individual shapes can be selectively clickable and draggable, including the requested interaction constraints, without changing the behavior of non-editable shapes.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript
- Domain
- data-visualization
- Issue type
- Feature
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100