Skip to content

Implement draggable shapes #660

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

Merged
merged 18 commits into from
Jun 22, 2016
Merged

Implement draggable shapes #660

Changes from 1 commit
Commits
Show all changes
18 commits
Select commit Hold shift + click to select a range
aba25e3
Shapes: make shapes draggable
n-riesco Jun 16, 2016
2802e0a
test: draggable shapes
n-riesco Jun 17, 2016
5a62051
test: try smaller shape drags
n-riesco Jun 17, 2016
d923637
Revert "test: try smaller shape drags"
n-riesco Jun 17, 2016
2340a96
test: replace MouseEvent with window.MouseEvent
n-riesco Jun 17, 2016
74173b4
Revert "test: replace MouseEvent with window.MouseEvent"
n-riesco Jun 17, 2016
0e522a9
test: compatibility workaround for Firefox 38
n-riesco Jun 17, 2016
d027674
Shapes: rename shapePath to getPathString
n-riesco Jun 21, 2016
9905594
Shapes: add function setupDragElement(node)
n-riesco Jun 21, 2016
e9f8ac4
Shapes: add startDrag, moveShape and endDrag
n-riesco Jun 21, 2016
abd8e93
Shapes: add line, rect and circle resize
n-riesco Jun 21, 2016
01903bd
test: Update shape drag test
n-riesco Jun 21, 2016
2167261
test: shapes are resizeable
n-riesco Jun 22, 2016
82b4102
DragElement: add options.setCursor
n-riesco Jun 22, 2016
ac15570
Shapes: update cursor before drag/resize
n-riesco Jun 22, 2016
5c1ff68
Shapes: shiftKey forces move drag mode
n-riesco Jun 22, 2016
e8b587c
test: draggable shapes referenced to timestamps
n-riesco Jun 22, 2016
5b965ab
Shapes: fix drag of shapes linked to timestamps
n-riesco Jun 22, 2016
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
135 changes: 70 additions & 65 deletions src/components/shapes/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -346,74 +346,79 @@ function updateShape(gd, index, opt, value) {
'clip' + gd._fullLayout._uid + clipAxes);
}

if(!gd._context.editable) return;

var update;
var x0, y0, x1, y1, astrX0, astrY0, astrX1, astrY1;
var pathIn, astrPath;
var xa, ya, x2p, y2p, p2x, p2y;
dragElement.init({
element: path.node(),
prepFn: function() {
setCursor(path, 'move');

xa = Axes.getFromId(gd, options.xref);
ya = Axes.getFromId(gd, options.yref);

x2p = getDataToPixel(gd, xa);
y2p = getDataToPixel(gd, ya, true);
p2x = getPixelToData(gd, xa);
p2y = getPixelToData(gd, ya, true);

var astr = 'shapes[' + index + ']';
if(options.type === 'path') {
pathIn = options.path;
astrPath = astr + '.path';
}
else {
x0 = x2p(options.x0);
y0 = y2p(options.y0);
x1 = x2p(options.x1);
y1 = y2p(options.y1);

astrX0 = astr + '.x0';
astrY0 = astr + '.y0';
astrX1 = astr + '.x1';
astrY1 = astr + '.y1';
}

update = {};
},
moveFn: function(dx, dy) {
if(options.type === 'path') {
var moveX = function moveX(x) { return p2x(x2p(x) + dx); };
if(xa && xa.type === 'date') moveX = encodeDate(moveX);

var moveY = function moveY(y) { return p2y(y2p(y) + dy); };
if(ya && ya.type === 'date') moveY = encodeDate(moveY);

options.path = movePath(pathIn, moveX, moveY);
update[astrPath] = options.path;
}
else {
update[astrX0] = options.x0 = p2x(x0 + dx);
update[astrY0] = options.y0 = p2y(y0 + dy);
update[astrX1] = options.x1 = p2x(x1 + dx);
update[astrY1] = options.y1 = p2y(y1 + dy);
}

path.attr('d', getPathString(gd, options));
},
doneFn: function(dragged) {
setCursor(path);
if(dragged) {
Plotly.relayout(gd, update);
}
}
});
if(gd._context.editable) setupDragElement(gd, path, options, index);
}
}

function setupDragElement(gd, shapePath, shapeOptions, index) {
Copy link
Contributor

Choose a reason for hiding this comment

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

I love this. Way to flatten the code. Thanks!

var update;
var x0, y0, x1, y1, astrX0, astrY0, astrX1, astrY1;
var pathIn, astrPath;
var xa, ya, x2p, y2p, p2x, p2y;

var dragOptions = {
element: shapePath.node(),
prepFn: function() {
setCursor(shapePath, 'move');

xa = Axes.getFromId(gd, shapeOptions.xref);
ya = Axes.getFromId(gd, shapeOptions.yref);

x2p = getDataToPixel(gd, xa);
y2p = getDataToPixel(gd, ya, true);
p2x = getPixelToData(gd, xa);
p2y = getPixelToData(gd, ya, true);

var astr = 'shapes[' + index + ']';
if(shapeOptions.type === 'path') {
pathIn = shapeOptions.path;
astrPath = astr + '.path';
}
else {
x0 = x2p(shapeOptions.x0);
y0 = y2p(shapeOptions.y0);
x1 = x2p(shapeOptions.x1);
y1 = y2p(shapeOptions.y1);

astrX0 = astr + '.x0';
astrY0 = astr + '.y0';
astrX1 = astr + '.x1';
astrY1 = astr + '.y1';
}

update = {};
},
moveFn: function(dx, dy) {
if(shapeOptions.type === 'path') {
var moveX = function moveX(x) { return p2x(x2p(x) + dx); };
if(xa && xa.type === 'date') moveX = encodeDate(moveX);
Copy link

@yogat3ch yogat3ch May 11, 2022 •
edited
Loading

Choose a reason for hiding this comment

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

Hi @etpinard,
Is it possible to constrain the drag direction to the x or y plane based on an option value?


var moveY = function moveY(y) { return p2y(y2p(y) + dy); };
if(ya && ya.type === 'date') moveY = encodeDate(moveY);

shapeOptions.path = movePath(pathIn, moveX, moveY);
update[astrPath] = shapeOptions.path;
}
else {
update[astrX0] = shapeOptions.x0 = p2x(x0 + dx);
update[astrY0] = shapeOptions.y0 = p2y(y0 + dy);
update[astrX1] = shapeOptions.x1 = p2x(x1 + dx);
update[astrY1] = shapeOptions.y1 = p2y(y1 + dy);
}

shapePath.attr('d', getPathString(gd, shapeOptions));
},
doneFn: function(dragged) {
setCursor(shapePath);
if(dragged) {
Plotly.relayout(gd, update);
}
}
};

dragElement.init(dragOptions);
}

function getShapeLayer(gd, index) {
var shape = gd._fullLayout.shapes[index],
shapeLayer = gd._fullLayout._shapeUpperLayer;
Expand Down