Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Fix NaN positions for shapes when dragging them.#7470

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.

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

Already on GitHub?Sign in to your account

Merged
archmoj merged 9 commits intoplotly:masterfrommy-tien:fix-edit-shapes
Jul 21, 2025
Merged
Show file tree
Hide file tree
Changes fromall commits
Commits
Show all changes
9 commits
Select commitHold shift + click to select a range
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletionsdraftlogs/7470_fix.md
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
- Fix editable shapes (regression introduced in 2.34.0) [[#7470](https://github.com/plotly/plotly.js/pull/7470)],
with thanks to @my-tien for the contribution!
23 changes: 19 additions & 4 deletionssrc/components/shapes/draw_newshape/newshapes.js
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
'use strict';

var axis_ids = require('../../../plots/cartesian/axis_ids');

var dragHelpers = require('../../dragelement/helpers');
var drawMode = dragHelpers.drawMode;
var openMode = dragHelpers.openMode;
Expand DownExpand Up@@ -84,10 +86,23 @@ function newShapes(outlines, dragOptions) {
case 'line':
case 'rect':
case 'circle':
modifyItem('x0', afterEdit.x0 - (beforeEdit.x0shift || 0));
modifyItem('x1', afterEdit.x1 - (beforeEdit.x1shift || 0));
modifyItem('y0', afterEdit.y0 - (beforeEdit.y0shift || 0));
modifyItem('y1', afterEdit.y1 - (beforeEdit.y1shift || 0));

var xaxis = axis_ids.getFromId(gd, beforeEdit.xref);
if (beforeEdit.xref.charAt(0) === 'x' && xaxis.type.includes('category')) {
modifyItem('x0', afterEdit.x0 - (beforeEdit.x0shift || 0));
modifyItem('x1', afterEdit.x1 - (beforeEdit.x1shift || 0));
} else {
modifyItem('x0', afterEdit.x0);
modifyItem('x1', afterEdit.x1);
}
var yaxis = axis_ids.getFromId(gd, beforeEdit.yref);
if (beforeEdit.yref.charAt(0) === 'y' && yaxis.type.includes('category')) {
modifyItem('y0', afterEdit.y0 - (beforeEdit.y0shift || 0));
modifyItem('y1', afterEdit.y1 - (beforeEdit.y1shift || 0));
} else {
modifyItem('y0', afterEdit.y0);
modifyItem('y1', afterEdit.y1);
}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others.Learn more.

Thanks@my-tien for the fix.
Two questions:

  1. Is a similar fix needed for the case ofpath?
  2. Could you please add a test here:
    describe('Activate and edit editable shapes',function(){
    ?

Copy link
ContributorAuthor

@my-tienmy-tienJul 17, 2025•
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others.Learn more.

I'll have a look at path and adding a test. However, my fix is not yet correct. Among other things, afterEdit can be a shape with xref and yref paper apparently even if the ref was something different before. I'll have to see, how I can correctly translate the shift variables to paper as well. I will probably push some changes later today.

UPDATE: This is a separate bug. As mentioned further below, I'll open an issue for it later.

Copy link
ContributorAuthor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others.Learn more.

For the path case the change is not necessary, because the shift properties are ignored if path is used instead of x0, x1, y0, y1.

Regarding the test, I added one with a test case that previously failed and now works. However, I am not sure how to test this locally because for some reason on my machine several Jasmine tests always fail. Could you please look at it on your end and make the necessary adjustments?

break;

case 'path':
Expand Down
279 changes: 279 additions & 0 deletionstest/jasmine/tests/draw_newshape_test.js
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -1658,3 +1658,282 @@ describe('Activate and edit editable shapes', function() {
.then(done, done.fail);
});
});

describe('Activate and edit editable shapes - date axes', function() {
var fig = {
data: [
{
x: [
0,
50
],
y: [
0,
50
]
}
],
layout: {
width: 800,
height: 600,
margin: {
t: 100,
b: 50,
l: 100,
r: 50
},
xaxis: {
type: 'date',
range: ["1975-07-01", "2380-07-01"]
},
yaxis: {
range: [301.78041543026706, -18.694362017804156]
},
shapes: [
{
editable: true,
layer: 'below',
type: 'rect',
line: {
width: 5
},
fillcolor: 'red',
opacity: 0.5,
xref: 'xaxis',
yref: 'yaxis',
x0: '2025-01-01',
y0: 25,
x1: '2075-01-01',
y1: 75
},
{
editable: true,
layer: 'top',
type: 'circle',
line: {
width: 5
},
fillcolor: 'green',
opacity: 0.5,
xref: 'xaxis',
yref: 'yaxis',
x0: '2125-01-01',
y0: 25,
x1: '2175-01-01',
y1: 75
}
]
},
config: {
editable: false,
modeBarButtonsToAdd: [
'drawline',
'drawopenpath',
'drawclosedpath',
'drawcircle',
'drawrect',
'eraseshape'
]
}
};

var gd;

beforeEach(function() {
gd = createGraphDiv();
});

afterEach(destroyGraphDiv);

['mouse'].forEach(function(device) {
it('reactangle using ' + device, function(done) {
var i = 0; // shape index

Plotly.newPlot(gd, {
data: fig.data,
layout: fig.layout,
config: fig.config
})

// shape between 175, 160 and 255, 230
.then(function() { click(200, 160); }) // activate shape
.then(function() {
var id = gd._fullLayout._activeShapeIndex;
expect(id).toEqual(i, 'activate shape by clicking border');

var shapes = gd._fullLayout.shapes;
var obj = shapes[id]._input;
expect(obj.type).toEqual('rect');
print(obj);
assertPos({
x0: obj.x0,
y0: obj.y0,
x1: obj.x1,
y1: obj.y1
}, {
x0: '2025-01-01',
y0: 25,
x1: '2075-01-01',
y1: 75
});
})
.then(function() { drag([[255, 230], [300, 200]]); }) // move vertex
.then(function() {
var id = gd._fullLayout._activeShapeIndex;
expect(id).toEqual(i, 'keep shape active after drag corner');

var shapes = gd._fullLayout.shapes;
var obj = shapes[id]._input;
expect(obj.type).toEqual('rect');
print(obj);
assertPos({
x0: obj.x0,
y0: obj.y0,
x1: obj.x1,
y1: obj.y1
}, {
x0: '2024-12-30 20:44:36.1846',
y0: 24.997032640949552,
x1: '2103-01-15 16:20:58.3385',
y1: 53.63323442136499
});
})
.then(function() { drag([[300, 200], [255, 230]]); }) // move vertex back
.then(function() {
var id = gd._fullLayout._activeShapeIndex;
expect(id).toEqual(i, 'keep shape active after drag corner');

var shapes = gd._fullLayout.shapes;
var obj = shapes[id]._input;
expect(obj.type).toEqual('rect');
print(obj);
assertPos({
x0: obj.x0,
y0: obj.y0,
x1: obj.x1,
y1: obj.y1
}, {
x0: '2024-12-30 20:44:36.1846',
y0: 25,
x1: '2074-12-31 18:56:02.9538',
y1: 75
});
})
.then(function() { drag([[215, 195], [300, 200]]); }) // move shape
.then(function() {
var id = gd._fullLayout._activeShapeIndex;
expect(id).toEqual(i, 'keep shape active after drag corner');

var shapes = gd._fullLayout.shapes;
var obj = shapes[id]._input;
expect(obj.type).toEqual('rect');
print(obj);
assertPos({
x0: obj.x0,
y0: obj.y0,
x1: obj.x1,
y1: obj.y1
}, {
x0: '2077-12-16 18:31:40.8',
y0: 24.997032640949552,
x1: '2127-12-18 16:43:07.5692',
y1: 74.99821958456974
});
})
.then(function() { drag([[300, 200], [215, 195]]); }) // move shape back
.then(function() {
var id = gd._fullLayout._activeShapeIndex;
expect(id).toEqual(i, 'keep shape active after drag corner');

var shapes = gd._fullLayout.shapes;
var obj = shapes[id]._input;
expect(obj.type).toEqual('rect');
print(obj);
assertPos({
x0: obj.x0,
y0: obj.y0,
x1: obj.x1,
y1: obj.y1
}, {
x0: '2024-12-30 20:44:36.1846',
y0: 25,
x1: '2074-12-31 18:56:02.9538',
y1: 75
});
})
.then(function() { click(100, 100); })
.then(function() {
var id = gd._fullLayout._activeShapeIndex;
expect(id).toEqual(undefined, 'deactivate shape by clicking outside');
})
.then(function() { click(255, 230); })
.then(function() {
var id = gd._fullLayout._activeShapeIndex;
expect(id).toEqual(i, 'activate shape by clicking on corner');
})
.then(function() { click(215, 195); })
.then(function() {
var id = gd._fullLayout._activeShapeIndex;
expect(id).toEqual(undefined, 'deactivate shape by clicking inside');
})

.then(done, done.fail);
});

it('circle using ' + device, function(done) {
var i = 1; // shape index

Plotly.newPlot(gd, {
data: fig.data,
layout: fig.layout,
config: fig.config
})

// next shape
.then(function() { click(355, 225); }) // activate shape
.then(function() {
var id = gd._fullLayout._activeShapeIndex;
expect(id).toEqual(i, 'activate shape by clicking border');

var shapes = gd._fullLayout.shapes;
var obj = shapes[id]._input;
expect(obj.type).toEqual('circle');
print(obj);
assertPos({
x0: obj.x0,
y0: obj.y0,
x1: obj.x1,
y1: obj.y1
}, {
x0: '2125-01-01',
x1: '2175-01-01',
y0: 25,
y1: 75
});
})
.then(function() { drag([[338, 196], [300, 175]]); }) // move vertex
.then(function() {
var id = gd._fullLayout._activeShapeIndex;
expect(id).toEqual(i, 'keep shape active after drag corner');

var shapes = gd._fullLayout.shapes;
var obj = shapes[id]._input;
expect(obj.type).toEqual('circle');
print(obj);
assertPos({
x0: obj.x0,
y0: obj.y0,
x1: obj.x1,
y1: obj.y1
}, {
x0: '2186-11-02 07:04:22.7446',
y0: 74.99821958456971,
x1: '2113-03-01 18:44:58.3385',
y1: 10.04154302670623
});
})

.then(done, done.fail);
});
});
});
[8]ページ先頭
©2009-2025 Movatter.jp