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

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
Next Next commit
Shapes: make shapes draggable
  • Loading branch information
@n-riesco
n-riesco committed Jun 17, 2016
commit aba25e3db97c3ae38a3698e2e7b394f85a961a5c
154 changes: 145 additions & 9 deletions src/components/shapes/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,8 @@ var Axes = require('../../plots/cartesian/axes');
var Color = require('../color');
var Drawing = require('../drawing');

var dragElement = require('../dragelement');
var setCursor = require('../../lib/setcursor');

var shapes = module.exports = {};

Expand Down Expand Up @@ -299,15 +301,7 @@ function updateShape(gd, index, opt, value) {
var options = handleShapeDefaults(optionsIn, gd._fullLayout);
gd._fullLayout.shapes[index] = options;

var attrs = {
'data-index': index,
'fill-rule': 'evenodd',
d: shapePath(gd, options)
},
clipAxes;

var lineColor = options.line.width ? options.line.color : 'rgba(0,0,0,0)';

var clipAxes;
if(options.layer !== 'below') {
clipAxes = (options.xref + options.yref).replace(/paper/g, '');
drawShape(gd._fullLayout._shapeUpperLayer);
Expand All @@ -332,6 +326,14 @@ function updateShape(gd, index, opt, value) {
}

function drawShape(shapeLayer) {
var attrs = {
'data-index': index,
'fill-rule': 'evenodd',
d: shapePath(gd, options)
},
lineColor = options.line.width ?
options.line.color : 'rgba(0,0,0,0)';

var path = shapeLayer.append('path')
.attr(attrs)
.style('opacity', options.opacity)
Expand All @@ -343,6 +345,72 @@ function updateShape(gd, index, opt, value) {
path.call(Drawing.setClipUrl,
'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({
Copy link
Contributor

Choose a reason for hiding this comment

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

Nice ♻️ action !

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', shapePath(gd, options));
},
doneFn: function(dragged) {
setCursor(path);
if(dragged) {
Plotly.relayout(gd, update);
}
}
});
}
}

Expand Down Expand Up @@ -375,6 +443,51 @@ function decodeDate(convertToPx) {
return function(v) { return convertToPx(v.replace('_', ' ')); };
}

function encodeDate(convertToDate) {
return function(v) { return convertToDate(v).replace(' ', '_'); };
}

function getDataToPixel(gd, axis, isVertical) {
var gs = gd._fullLayout._size,
dataToPixel;

if(axis) {
var d2l = dataToLinear(axis);

dataToPixel = function(v) {
return axis._offset + axis.l2p(d2l(v, true));
};

if(axis.type === 'date') dataToPixel = decodeDate(dataToPixel);
}
else if(isVertical) {
dataToPixel = function(v) { return gs.t + gs.h * (1 - v); };
}
else {
dataToPixel = function(v) { return gs.l + gs.w * v; };
}

return dataToPixel;
}

function getPixelToData(gd, axis, isVertical) {
var gs = gd._fullLayout._size,
pixelToData;

if(axis) {
var l2d = linearToData(axis);
pixelToData = function(p) { return l2d(axis.p2l(p - axis._offset)); };
}
else if(isVertical) {
pixelToData = function(p) { return 1 - (p - gs.t) / gs.h; };
}
else {
pixelToData = function(p) { return (p - gs.l) / gs.w; };
}

return pixelToData;
}

function shapePath(gd, options) {
var type = options.type,
xa = Axes.getFromId(gd, options.xref),
Expand Down Expand Up @@ -501,6 +614,29 @@ shapes.convertPath = function(pathIn, x2p, y2p) {
});
};

function movePath(pathIn, moveX, moveY) {
return pathIn.replace(segmentRE, function(segment) {
var paramNumber = 0,
segmentType = segment.charAt(0),
xParams = paramIsX[segmentType],
yParams = paramIsY[segmentType],
nParams = numParams[segmentType];

var paramString = segment.substr(1).replace(paramRE, function(param) {
if(paramNumber >= nParams) return param;

if(xParams[paramNumber]) param = moveX(param);
else if(yParams[paramNumber]) param = moveY(param);

paramNumber++;

return param;
});

return segmentType + paramString;
});
}

shapes.calcAutorange = function(gd) {
var fullLayout = gd._fullLayout,
shapeList = fullLayout.shapes,
Expand Down