Skip to content

Commit 0662ae7

Browse files
archmojarchmoj
committed
apply arrayEditor to produce the updates for shapes in layout
1 parent 4039257 commit 0662ae7

File tree

4 files changed

+39
-49
lines changed

4 files changed

+39
-49
lines changed

‎src/components/shapes/draw.js‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -141,6 +141,9 @@ function drawOne(gd, index) {
141141

142142
setClipPath(path, gd, options);
143143

144+
var editHelpers;
145+
if(isActiveShape || gd._context.edits.shapePosition) editHelpers = arrayEditor(gd.layout, 'shapes', options);
146+
144147
if(isActiveShape) {
145148
path.style({
146149
'cursor': 'move',
@@ -150,6 +153,7 @@ function drawOne(gd, index) {
150153
element: path.node(),
151154
plotinfo: plotinfo,
152155
gd: gd,
156+
editHelpers: editHelpers,
153157
isActiveShape: true // i.e. to enable controllers
154158
};
155159

@@ -158,7 +162,7 @@ function drawOne(gd, index) {
158162
displayOutlines(polygons, path, dragOptions);
159163
} else {
160164
if(gd._context.edits.shapePosition) {
161-
setupDragElement(gd, path, options, index, shapeLayer);
165+
setupDragElement(gd, path, options, index, shapeLayer, editHelpers);
162166
}
163167

164168
path.style('pointer-events',
@@ -187,7 +191,7 @@ function setClipPath(shapePath, gd, shapeOptions) {
187191
);
188192
}
189193

190-
function setupDragElement(gd, shapePath, shapeOptions, index, shapeLayer) {
194+
function setupDragElement(gd, shapePath, shapeOptions, index, shapeLayer, editHelpers) {
191195
var MINWIDTH = 10;
192196
var MINHEIGHT = 10;
193197

@@ -196,7 +200,6 @@ function setupDragElement(gd, shapePath, shapeOptions, index, shapeLayer) {
196200
var isLine = shapeOptions.type === 'line';
197201
var isPath = shapeOptions.type === 'path';
198202

199-
var editHelpers = arrayEditor(gd.layout, 'shapes', shapeOptions);
200203
var modifyItem = editHelpers.modifyItem;
201204

202205
var x0, y0, x1, y1, xAnchor, yAnchor;

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

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -49,11 +49,9 @@ module.exports = function displayOutlines(polygons, outlines, dragOptions, nCall
4949
function update(opts) {
5050
dragOptions.isActiveShape = false; // i.e. to disable controllers
5151

52-
var shapes = newShapes(outlines, dragOptions);
53-
if(shapes) {
54-
Registry.call(opts && opts.redrawing ? 'relayout' : '_guiRelayout', gd, {
55-
shapes: shapes // update active shape
56-
});
52+
var updateObject = newShapes(outlines, dragOptions);
53+
if(Object.keys(updateObject).length) {
54+
Registry.call(opts && opts.redrawing ? 'relayout' : '_guiRelayout', gd, updateObject);
5755
}
5856
}
5957

@@ -166,6 +164,7 @@ module.exports = function displayOutlines(polygons, outlines, dragOptions, nCall
166164

167165
polygons[indexI] = newPolygon;
168166

167+
redraw();
169168
update();
170169
}
171170
}

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

Lines changed: 11 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -200,9 +200,10 @@ module.exports = function newShapes(outlines, dragOptions) {
200200

201201
clearSelect(gd);
202202

203-
var allShapes;
204-
var updatedActiveShape = false;
205-
allShapes = [];
203+
var editHelpers = dragOptions.editHelpers;
204+
var modifyItem = (editHelpers || {}).modifyItem;
205+
206+
var allShapes = [];
206207
for(var q = 0; q < shapes.length; q++) {
207208
var beforeEdit = gd._fullLayout.shapes[q];
208209
allShapes[q] = beforeEdit._input;
@@ -217,42 +218,27 @@ module.exports = function newShapes(outlines, dragOptions) {
217218
case 'line':
218219
case 'rect':
219220
case 'circle':
220-
updatedActiveShape = hasChanged(beforeEdit, afterEdit, ['x0', 'x1', 'y0', 'y1']);
221-
if(updatedActiveShape) { // update active shape
222-
allShapes[q].x0 = afterEdit.x0;
223-
allShapes[q].x1 = afterEdit.x1;
224-
allShapes[q].y0 = afterEdit.y0;
225-
allShapes[q].y1 = afterEdit.y1;
226-
}
221+
modifyItem('x0', afterEdit.x0);
222+
modifyItem('x1', afterEdit.x1);
223+
modifyItem('y0', afterEdit.y0);
224+
modifyItem('y1', afterEdit.y1);
227225
break;
228226

229227
case 'path':
230-
updatedActiveShape = hasChanged(beforeEdit, afterEdit, ['path']);
231-
if(updatedActiveShape) { // update active shape
232-
allShapes[q].path = afterEdit.path;
233-
}
228+
modifyItem('path', afterEdit.path);
234229
break;
235230
}
236231
}
237232
}
238233

239234
if(isActiveShape === undefined) {
240235
allShapes.push(newShape); // add new shape
236+
return allShapes;
241237
}
242238

243-
return allShapes;
239+
return editHelpers ? editHelpers.getUpdateObj() : {};
244240
};
245241

246-
function hasChanged(beforeEdit, afterEdit, keys) {
247-
for(var i = 0; i < keys.length; i++) {
248-
var k = keys[i];
249-
if(beforeEdit[k] !== afterEdit[k]) {
250-
return true;
251-
}
252-
}
253-
return false;
254-
}
255-
256242
function fixDatesForPaths(polygons, xaxis, yaxis) {
257243
var xIsDate = xaxis.type === 'date';
258244
var yIsDate = yaxis.type === 'date';

‎test/jasmine/tests/draw_newshape_test.js‎

Lines changed: 18 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,9 @@ function print(obj) {
4242
return obj;
4343
}
4444

45-
function assertPos(actual, expected) {
45+
function assertPos(actual, expected, tolerance) {
46+
if(tolerance === undefined) tolerance = 2;
47+
4648
expect(typeof actual).toEqual(typeof expected);
4749

4850
if(typeof actual === 'string') {
@@ -61,7 +63,7 @@ function assertPos(actual, expected) {
6163
expect(A.length).toEqual(B.length); // svg letters should be identical
6264
expect(A[0]).toEqual(B[0]);
6365
for(var k = 1; k < A.length; k++) {
64-
expect(A[k]).toBeCloseTo(B[k], 2);
66+
expect(A[k]).toBeCloseTo(B[k], tolerance);
6567
}
6668
}
6769
} else {
@@ -79,7 +81,7 @@ function assertPos(actual, expected) {
7981
posB = fixDates(posB);
8082
}
8183

82-
expect(posA).toBeCloseTo(posB, 2);
84+
expect(posA).toBeCloseTo(posB, tolerance);
8385
}
8486
}
8587
}
@@ -1063,7 +1065,7 @@ describe('Activate and deactivate shapes to edit', function() {
10631065
afterEach(destroyGraphDiv);
10641066

10651067
['mouse'].forEach(function(device) {
1066-
it('@flaky activate editable shapes using' + device, function(done) {
1068+
it('@flaky activate and edit editable shapes using' + device, function(done) {
10671069
var i;
10681070

10691071
Plotly.newPlot(gd, {
@@ -1096,7 +1098,7 @@ describe('Activate and deactivate shapes to edit', function() {
10961098
'y1': 75
10971099
});
10981100
})
1099-
.then(function() { drag([[175, 160], [150, 100]]); }) // move vertex
1101+
.then(function() { drag([[255, 230], [300, 200]]); }) // move vertex
11001102
.then(function() {
11011103
var id = gd._fullLayout._activeShapeIndex;
11021104
expect(id).toEqual(i, 'keep shape active after drag corner');
@@ -1111,13 +1113,13 @@ describe('Activate and deactivate shapes to edit', function() {
11111113
'x1': obj.x1,
11121114
'y1': obj.y1
11131115
}, {
1114-
'x0': 9.494573643410854,
1115-
'y0': -17.732937685459945,
1116-
'x1': 75.0015503875969,
1117-
'y1': 74.99821958456974
1116+
'x0': 24.998449612403103,
1117+
'y0': 24.997032640949552,
1118+
'x1': 102.90852713178295,
1119+
'y1': 53.63323442136499
11181120
});
11191121
})
1120-
.then(function() { drag([[150, 100], [175, 160]]); }) // move vertex back
1122+
.then(function() { drag([[300, 200], [255, 230]]); }) // move vertex back
11211123
.then(function() {
11221124
var id = gd._fullLayout._activeShapeIndex;
11231125
expect(id).toEqual(i, 'keep shape active after drag corner');
@@ -1138,7 +1140,7 @@ describe('Activate and deactivate shapes to edit', function() {
11381140
'y1': 75
11391141
});
11401142
})
1141-
.then(function() { drag([[215, 195], [150, 100]]); }) // move shape
1143+
.then(function() { drag([[215, 195], [300, 200]]); }) // move shape
11421144
.then(function() {
11431145
var id = gd._fullLayout._activeShapeIndex;
11441146
expect(id).toEqual(i, 'keep shape active after drag corner');
@@ -1153,13 +1155,13 @@ describe('Activate and deactivate shapes to edit', function() {
11531155
'x1': obj.x1,
11541156
'y1': obj.y1
11551157
}, {
1156-
'y0': -42.65875370919882,
1157-
'y1': 7.342433234421367,
1158-
'x0': -15.311627906976742,
1159-
'x1': 34.691472868217055
1158+
'x0': 77.71162790697674,
1159+
'y0': 24.997032640949552,
1160+
'x1': 127.71472868217053,
1161+
'y1': 74.99821958456974
11601162
});
11611163
})
1162-
.then(function() { drag([[150, 100], [215, 195]]); }) // move shape back
1164+
.then(function() { drag([[300, 200], [215, 195]]); }) // move shape back
11631165
.then(function() {
11641166
var id = gd._fullLayout._activeShapeIndex;
11651167
expect(id).toEqual(i, 'keep shape active after drag corner');

0 commit comments

Comments
 (0)