8000 adjustments in shapes for selections · Kosm0naut/plotly.js@49c2d28 · GitHub
[go: up one dir, main page]
Skip to content

Commit 49c2d28

Browse files
archmojarchmoj
committed
adjustments in shapes for selections
1 parent c09a693 commit 49c2d28

File tree

5 files changed

+219
-173
lines changed

5 files changed

+219
-173
lines changed

‎src/components/shapes/draw.js

Lines changed: 3 additions & 111 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@ var setCursor = require('../../lib/setcursor');
1818

1919
var constants = require('./constants');
2020
var helpers = require('./helpers');
21+
var getPathString = helpers.getPathString;
2122

2223

2324
// Shapes are stored in gd.layout.shapes, an array of objects
@@ -58,7 +59,7 @@ function draw(gd) {
5859
}
5960

6061
function shouldSkipEdits(gd) {
61-
return !!gd._fullLayout._drawing;
62+
return !!gd._fullLayout._outlining;
6263
}
6364

6465
function couldHaveActiveShape(gd) {
@@ -73,7 +74,7 @@ function drawOne(gd, index) {
7374
.selectAll('.shapelayer [data-index="' + index + '"]')
7475
.remove();
7576

76-
var o = helpers.makeOptionsAndPlotinfo(gd, index);
77+
var o = helpers.makeShapesOptionsAndPlotinfo(gd, index);
7778
var options = o.options;
7879
var plotinfo = o.plotinfo;
7980

@@ -578,115 +579,6 @@ function setupDragElement(gd, shapePath, shapeOptions, index, shapeLayer, editHe
578579
}
579580
}
580581

581-
function getPathString(gd, options) {
582-
var type = options.type;
583-
var xRefType = Axes.getRefType(options.xref);
584-
var yRefType = Axes.getRefType(options.yref);
585-
var xa = Axes.getFromId(gd, options.xref);
586-
var ya = Axes.getFromId(gd, options.yref);
587-
var gs = gd._fullLayout._size;
588-
var x2r, x2p, y2r, y2p;
589-
var x0, x1, y0, y1;
590-
591-
if(xa) {
592-
if(xRefType === 'domain') {
593-
x2p = function(v) { return xa._offset + xa._length * v; };
594-
} else {
595-
x2r = helpers.shapePositionToRange(xa);
596-
x2p = function(v) { return xa._offset + xa.r2p(x2r(v, true)); };
597-
}
598-
} else {
599-
x2p = function(v) { return gs.l + gs.w * v; };
600-
}
601-
602-
if(ya) {
603-
if(yRefType === 'domain') {
604-
y2p = function(v) { return ya._offset + ya._length * (1 - v); };
605-
} else {
606-
y2r = helpers.shapePositionToRange(ya);
607-
y2p = function(v) { return ya._offset + ya.r2p(y2r(v, true)); };
608-
}
609-
} else {
610-
y2p = function(v) { return gs.t + gs.h * (1 - v); };
611-
}
612-
613-
if(type === 'path') {
614-
if(xa && xa.type === 'date') x2p = helpers.decodeDate(x2p);
615-
if(ya && ya.type === 'date') y2p = helpers.decodeDate(y2p);
616-
return convertPath(options, x2p, y2p);
617-
}
618-
619-
if(options.xsizemode === 'pixel') {
620-
var xAnchorPos = x2p(options.xanchor);
621-
x0 = xAnchorPos + options.x0;
622-
x1 = xAnchorPos + options.x1;
623-
} else {
624-
x0 = x2p(options.x0);
625-
x1 = x2p(options.x1);
626-
}
627-
628-
if(options.ysizemode === 'pixel') {
629-
var yAnchorPos = y2p(options.yanchor);
630-
y0 = yAnchorPos - options.y0;
631-
y1 = yAnchorPos - options.y1;
632-
} else {
633-
y0 = y2p(options.y0);
634-
y1 = y2p(options.y1);
635-
}
636-
637-
if(type === 'line') return 'M' + x0 + ',' + y0 + 'L' + x1 + ',' + y1;
638-
if(type === 'rect') return 'M' + x0 + ',' + y0 + 'H' + x1 + 'V' + y1 + 'H' + x0 + 'Z';
639-
640-
// circle
641-
var cx = (x0 + x1) / 2;
642-
var cy = (y0 + y1) / 2;
643-
var rx = Math.abs(cx - x0);
644-
var ry = Math.abs(cy - y0);
645-
var rArc = 'A' + rx + ',' + ry;
646-
var rightPt = (cx + rx) + ',' + cy;
647-
var topPt = cx + ',' + (cy - ry);
648-
return 'M' + rightPt + rArc + ' 0 1,1 ' + topPt +
649-
rArc + ' 0 0,1 ' + rightPt + 'Z';
650-
}
651-
652-
653-
function convertPath(options, x2p, y2p) {
654-
var pathIn = options.path;
655-
var xSizemode = options.xsizemode;
656-
var ySizemode = options.ysizemode;
657-
var xAnchor = options.xanchor;
658-
var yAnchor = options.yanchor;
659-
660-
return pathIn.replace(constants.segmentRE, function(segment) {
661-
var paramNumber = 0;
662-
var segmentType = segment.charAt(0);
663-
var xParams = constants.paramIsX[segmentType];
664-
var yParams = constants.paramIsY[segmentType];
665-
var nParams = constants.numParams[segmentType];
666-
667-
var paramString = segment.substr(1).replace(constants.paramRE, function(param) {
668-
if(xParams[paramNumber]) {
669-
if(xSizemode === 'pixel') param = x2p(xAnchor) + Number(param);
670-
else param = x2p(param);
671-
} else if(yParams[paramNumber]) {
672-
if(ySizemode === 'pixel') param = y2p(yAnchor) - Number(param);
673-
else param = y2p(param);
674-
}
675-
paramNumber++;
676-
677-
if(paramNumber > nParams) param = 'X';
678-
return param;
679-
});
680-
681-
if(paramNumber > nParams) {
682-
paramString = paramString.replace(/[\s,]*X.*/, '');
683-
Lib.log('Ignoring extra params in segment ' + segment);
684-
}
685-
686-
return segmentType + paramString;
687-
});
688-
}
689-
690582
function movePath(pathIn, moveX, moveY) {
691583
return pathIn.replace(constants.segmentRE, function(segment) {
692584
var paramNumber = 0;

‎src/components/shapes/draw_newshape/display_outlines.js

Lines changed: 50 additions & 31 deletions
< 10000 td data-grid-cell-id="diff-8d2586fdf8fd49d26a8bdaeebadf8b2187331b0a06f1664bdf7802e3769dda36-70-89-0" data-selected="false" role="gridcell" style="background-color:var(--bgColor-default);text-align:center" tabindex="-1" valign="top" class="focusable-grid-cell diff-line-number position-relative diff-line-number-neutral left-side">70
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
var dragElement = require('../../dragelement');
44
var dragHelpers = require('../../dragelement/helpers');
55
var drawMode = dragHelpers.drawMode;
6+
var selectMode = dragHelpers.selectMode;
67

78
var Registry = require('../../../registry');
89

@@ -16,10 +17,11 @@ var handleOutline = require('../../selections/handle_outline');
1617
var clearOutlineControllers = handleOutline.clearOutlineControllers;
1718

1819
var helpers = require('./helpers');
19-
var pointsShapeRectangle = helpers.pointsShapeRectangle;
20-
var pointsShapeEllipse = helpers.pointsShapeEllipse;
20+
var pointsOnRectangle = helpers.pointsOnRectangle;
21+
var pointsOnEllipse = helpers.pointsOnEllipse;
2122< B41A code class="diff-text syntax-highlighted-line">
var writePaths = helpers.writePaths;
2223
var newShapes = require('./newshapes');
24+
var newSelections = require('../../selections/draw_newselection/newselections');
2325

2426
module.exports = function displayOutlines(polygons, outlines, dragOptions, nCalls) {
2527
if(!nCalls) nCalls = 0;
@@ -30,47 +32,64 @@ module.exports = function displayOutlines(polygons, outlines, dragOptions, nCall
3032
// recursive call
3133
displayOutlines(polygons, outlines, dragOptions, nCalls++);
3234

33-
if(pointsShapeEllipse(polygons[0])) {
35+
if(pointsOnEllipse(polygons[0])) {
3436
update({redrawing: true});
3537
}
3638
}
3739

3840
function update(opts) {
39-
dragOptions.isActiveShape = false; // i.e. to disable controllers
41+
var updateObject = {};
42+
43+
if(dragOptions.isActiveShape !== undefined) {
44+
dragOptions.isActiveShape = false; // i.e. to disable shape controllers
45+
updateObject = newShapes(outlines, dragOptions);
46+
}
47+
48+
if(dragOptions.isActiveSelection !== undefined) {
49+
dragOptions.isActiveSelection = false; // i.e. to disable selection controllers
50+
updateObject = newSelections(outlines, dragOptions);
51+
}
4052

41-
var updateObject = newShapes(outlines, dragOptions);
4253
if(Object.keys(updateObject).length) {
4354
Registry.call((opts || {}).redrawing ? 'relayout' : '_guiRelayout', gd, updateObject);
4455
}
4556
}
4657

47-
48-
var isActiveShape = dragOptions.isActiveShape;
4958
var fullLayout = gd._fullLayout;
5059
var zoomLayer = fullLayout._zoomlayer;
5160

5261
var dragmode = dragOptions.dragmode;
5362
var isDrawMode = drawMode(dragmode);
54-
55-
if(isDrawMode) gd._fullLayout._drawing = true;
56-
else if(gd._fullLayout._activeShapeIndex >= 0) clearOutlineControllers(gd);
63+
var isSelectMode = selectMode(dragmode);
64+
65+
if(isDrawMode || isSelectMode) {
66+
gd._fullLayout._outlining = true;
67+
} else if(
68+
gd._fullLayout._activeShapeIndex >= 0 ||
69+
gd._fullLayout._activeSelectionIndex >= 0
70+
) {
71+
clearOutlineControllers(gd);
72+
}
5773

5874
// make outline
5975
outlines.attr('d', writePaths(polygons));
6076

6177
// add controllers
6278
var vertexDragOptions;
63-
var shapeDragOptions;
79+
var regionDragOptions;
6480
var indexI; // cell index
6581
var indexJ; // vertex or cell-controller index
6682
var copyPolygons;
6783

68-
if(isActiveShape && !nCalls) {
84+
if(!nCalls && (
85+
dragOptions.isActiveShape ||
86+
dragOptions.isActiveSelection
87+
)) {
6988
copyPolygons = recordPositions([], polygons);
89

7190
var g = zoomLayer.append('g').attr('class', 'outline-controllers');
7291
addVertexControllers(g);
73-
addShapeControllers();
92+
addRegionControllers();
7493
}
7594

7695
function startDragVertex(evt) {
@@ -88,7 +107,7 @@ module.exports = function displayOutlines(polygons, outlines, dragOptions, nCall
88107

89108
var cell = polygons[indexI];
90109
var len = cell.length;
91-
if(pointsShapeRectangle(cell)) {
110+
if(pointsOnRectangle(cell)) {
92111
for(var q = 0; q < len; q++) {
93112
if(q === indexJ) continue;
94113

@@ -107,7 +126,7 @@ module.exports = function displayOutlines(polygons, outlines, dragOptions, nCall
107126
cell[indexJ][1] = x0 + dx;
108127
cell[indexJ][2] = y0 + dy;
109128

110-
if(!pointsShapeRectangle(cell)) {
129+
if(!pointsOnRectangle(cell)) {
111130
// reject result to rectangles with ensure areas
112131
for(var j = 0; j < len; j++) {
113132
for(var k = 0; k < cell[j].length; k++) {
@@ -162,8 +181,8 @@ module.exports = function displayOutlines(polygons, outlines, dragOptions, nCall
162181

163182
var cell = polygons[indexI];
164183
if(
165-
!pointsShapeRectangle(cell) &&
166-
!pointsShapeEllipse(cell)
184+
!pointsOnRectangle(cell) &&
185+
!pointsOnEllipse(cell)
167186
) {
168187
removeVertex();
169188
}
@@ -176,8 +195,8 @@ module.exports = function displayOutlines(polygons, outlines, dragOptions, nCall
176195
for(var i = 0; i < polygons.length; i++) {
177196
var cell = polygons[i];
178197

179-
var onRect = pointsShapeRectangle(cell);
180-
var onEllipse = !onRect && pointsShapeEllipse(cell);
198+
var onRect = pointsOnRectangle(cell);
199+
var onEllipse = !onRect && pointsOnEllipse(cell);
181200

182201
vertexDragOptions[i] = [];
183202
for(var j = 0; j < cell.length; j++) {
@@ -222,7 +241,7 @@ module.exports = function displayOutlines(polygons, outlines, dragOptions, nCall
222241
}
223242
}
224243

225-
function moveShape(dx, dy) {
244+
function moveRegion(dx, dy) {
226245
if(!polygons.length) return;
227246

228247
for(var i = 0; i < polygons.length; i++) {
@@ -235,37 +254,37 @@ module.exports = function displayOutlines(polygons, outlines, dragOptions, nCall
235254
}
236255
}
237256

238-
function moveShapeController(dx, dy) {
239-
moveShape(dx, dy);
257+
function moveRegionController(dx, dy) {
258+
moveRegion(dx, dy);
240259

241260
redraw();
242261
}
243262

244-
function startDragShapeController(evt) {
263+
function startDragRegionController(evt) {
245264
indexI = +evt.srcElement.getAttribute('data-i');
246265
if(!indexI) indexI = 0; // ensure non-existing move button get zero index
247266

248-
shapeDragOptions[indexI].moveFn = moveShapeController;
267+
regionDragOptions[indexI].moveFn = moveRegionController;
249268
}
250269

251-
function endDragShapeController() {
270+
function endDragRegionController() {
252271
update();
253272
}
254273

255-
function addShapeControllers() {
256-
shapeDragOptions = [];
274+
function addRegionControllers() {
275+
regionDragOptions = [];
257276

258277
if(!polygons.length) return;
259278

260279
var i = 0;
261-
shapeDragOptions[i] = {
280+
regionDragOptions[i] = {
262281
element: outlines[0][0],
263282
gd: gd,
264-
prepFn: startDragShapeController,
265-
doneFn: endDragShapeController
283+
prepFn: startDragRegionController,
284+
doneFn: endDragRegionController
266285
};
267286

268-
dragElement.init(shapeDragOptions[i]);
287+
dragElement.init(regionDragOptions[i]);
269288
}
270289
};
271290

‎src/components/shapes/draw_newshape/helpers.js

Lines changed: 19 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -221,7 +221,7 @@ function dist(a, b) {
221221
);
222222
}
223223

224-
exports.pointsShapeRectangle = function(cell) {
224+
exports.pointsOnRectangle = function(cell) {
225225
var len = cell.length;
226226
if(len !== 5) return false;
227227

@@ -249,7 +249,7 @@ exports.pointsShapeRectangle = function(cell) {
249249
);
250250
};
251251

252-
exports.pointsShapeEllipse = function(cell) {
252+
exports.pointsOnEllipse = function(cell) {
253253
var len = cell.length;
254254
if(len !== CIRCLE_SIDES + 1) return false;
255255

@@ -325,3 +325,20 @@ exports.ellipseOver = function(pos) {
325325
y1: cy + dy
326326
};
327327
};
328+
329+
exports.fixDatesForPaths = function(polygons, xaxis, yaxis) {
330+
var xIsDate = xaxis.type === 'date';
331+
var yIsDate = yaxis.type === 'date';
332+
if(!xIsDate && !yIsDate) return polygons;
333+
334+
for(var i = 0; i < polygons.length; i++) {
335+
for(var j = 0; j < polygons[i].length; j++) {
336+
for(var k = 0; k + 2 < polygons[i][j].length; k += 2) {
337+
if(xIsDate) polygons[i][j][k + 1] = polygons[i][j][k + 1].replace(' ', '_');
338+
if(yIsDate) polygons[i][j][k + 2] = polygons[i][j][k + 2].replace(' ', '_');
339+
}
340+
}
341+
}
342+
343+
return polygons;
344+
};

0 commit comments

Comments
 (0)
0