Skip to content

Commit 062d4a3

Browse files
etpinardetpinard
committed
fixup splom + scattergl select
- sort trace module (splom before scattergl) in select before style() redraw call - 🐎 call style() redraw once per trace module as opposed to once per trace - redraw splomGrid if needed during style()
1 parent 74abb7f commit 062d4a3

File tree

4 files changed

+116
-31
lines changed

4 files changed

+116
-31
lines changed

‎src/plots/cartesian/select.js

+55-22
Original file line numberDiff line numberDiff line change
@@ -10,19 +10,23 @@
1010
'use strict';
1111

1212
var polybool = require('polybooljs');
13+
14+
var Registry = require('../../registry');
15+
var Color = require('../../components/color');
16+
var Fx = require('../../components/fx');
17+
1318
var polygon = require('../../lib/polygon');
1419
var throttle = require('../../lib/throttle');
15-
var color = require('../../components/color');
1620
var makeEventData = require('../../components/fx/helpers').makeEventData;
17-
var Fx = require('../../components/fx');
21+
var getFromId = require('./axis_ids').getFromId;
22+
var sortModules = require('../sort_modules').sortModules;
1823

19-
var axes = require('./axes');
2024
var constants = require('./constants');
25+
var MINSELECT = constants.MINSELECT;
2126

2227
var filteredPolygon = polygon.filter;
2328
var polygonTester = polygon.tester;
2429
var multipolygonTester = polygon.multitester;
25-
var MINSELECT = constants.MINSELECT;
2630

2731
function getAxId(ax) { return ax._id; }
2832

@@ -89,8 +93,8 @@ module.exports = function prepSelect(e, startX, startY, dragOptions, mode) {
8993
var corners = zoomLayer.append('path')
9094
.attr('class', 'zoombox-corners')
9195
.style({
92-
fill: color.background,
93-
stroke: color.defaultLine,
96+
fill: Color.background,
97+
stroke: Color.defaultLine,
9498
'stroke-width': 1
9599
})
96100
.attr('transform', 'translate(' + xs + ', ' + ys + ')')
@@ -114,21 +118,19 @@ module.exports = function prepSelect(e, startX, startY, dragOptions, mode) {
114118
trace.geo === dragOptions.subplot
115119
) {
116120
searchTraces.push({
117-
selectPoints: trace._module.selectPoints,
118-
style: trace._module.style,
121+
_module: trace._module,
119122
cd: cd,
120123
xaxis: dragOptions.xaxes[0],
121124
yaxis: dragOptions.yaxes[0]
122125
});
123126
}
124-
} else if(trace.type === 'splom') {
127+
} else if(
128+
trace.type === 'splom' &&
125129
// FIXME: make sure we don't have more than single axis for splom
126-
if(trace.xaxes.indexOf(xAxisIds[0]) === -1) continue;
127-
if(trace.yaxes.indexOf(yAxisIds[0]) === -1) continue;
128-
130+
trace._xaxes[xAxisIds[0]] && trace._yaxes[yAxisIds[0]]
131+
) {
129132
searchTraces.push({
130-
selectPoints: trace._module.selectPoints,
131-
style: trace._module.style,
133+
_module: trace._module,
132134
cd: cd,
133135
xaxis: dragOptions.xaxes[0],
134136
yaxis: dragOptions.yaxes[0]
@@ -138,11 +140,10 @@ module.exports = function prepSelect(e, startX, startY, dragOptions, mode) {
138140
if(yAxisIds.indexOf(trace.yaxis) === -1) continue;
139141

140142
searchTraces.push({
141-
selectPoints: trace._module.selectPoints,
142-
style: trace._module.style,
143+
_module: trace._module,
143144
cd: cd,
144-
xaxis: axes.getFromId(gd, trace.xaxis),
145-
yaxis: axes.getFromId(gd, trace.yaxis)
145+
xaxis: getFromId(gd, trace.xaxis),
146+
yaxis: getFromId(gd, trace.yaxis)
146147
});
147148
}
148149
}
@@ -265,7 +266,7 @@ module.exports = function prepSelect(e, startX, startY, dragOptions, mode) {
265266
for(i = 0; i < searchTraces.length; i++) {
266267
searchInfo = searchTraces[i];
267268

268-
traceSelection = searchInfo.selectPoints(searchInfo, testPoly);
269+
traceSelection = searchInfo._module.selectPoints(searchInfo, testPoly);
269270
traceSelections.push(traceSelection);
270271

271272
thisSelection = fillSelectionItem(traceSelection, searchInfo);
@@ -296,7 +297,7 @@ module.exports = function prepSelect(e, startX, startY, dragOptions, mode) {
296297
outlines.remove();
297298
for(i = 0; i < searchTraces.length; i++) {
298299
searchInfo = searchTraces[i];
299-
searchInfo.selectPoints(searchInfo, false);
300+
searchInfo._module.selectPoints(searchInfo, false);
300301
}
301302

302303
updateSelectedState(gd, searchTraces);
@@ -333,7 +334,7 @@ module.exports = function prepSelect(e, startX, startY, dragOptions, mode) {
333334
};
334335

335336
function updateSelectedState(gd, searchTraces, eventData) {
336-
var i, searchInfo, trace;
337+
var i, j, searchInfo, trace;
337338

338339
if(eventData) {
339340
var pts = eventData.points || [];
@@ -365,6 +366,7 @@ function updateSelectedState(gd, searchTraces, eventData) {
365366
delete trace._input.selectedpoints;
366367

367368
// delete scattergl selection
369+
// TODO commenting out, doesn't do anything
368370
if(searchTraces[i].cd[0].t && searchTraces[i].cd[0].t.scene) {
369371
searchTraces[i].cd[0].t.scene.clearSelect();
370372
}
@@ -374,9 +376,40 @@ function updateSelectedState(gd, searchTraces, eventData) {
374376
gd._fullLayout._zoomlayer.selectAll('.select-outline').remove();
375377
}
376378

379+
var lookup = {};
380+
377381
for(i = 0; i < searchTraces.length; i++) {
378382
searchInfo = searchTraces[i];
379-
if(searchInfo.style) searchInfo.style(gd, searchInfo.cd);
383+
384+
var name = searchInfo._module.name;
385+
if(lookup[name]) {
386+
lookup[name].push(searchInfo);
387+
} else {
388+
lookup[name] = [searchInfo];
389+
}
390+
}
391+
392+
var keys = Object.keys(lookup).sort(sortModules);
393+
394+
for(i = 0; i < keys.length; i++) {
395+
var items = lookup[keys[i]];
396+
var len = items.length;
397+
var item0 = items[0];
398+
var trace0 = item0.cd[0].trace;
399+
400+
if(Registry.traceIs(trace0, 'regl')) {
401+
// plot regl traces per module
402+
var cds = new Array(len);
403+
for(j = 0; j < len; j++) {
404+
cds[j] = items[j].cd;
405+
}
406+
item0._module.style(gd, cds);
407+
} else {
408+
// plot svg trace per trace
409+
for(j = 0; j < len; j++) {
410+
item0._module.style(gd, items[j].cd);
411+
}
412+
}
380413
}
381414
}
382415

‎src/plots/sort_modules.js

+33
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
/**
2+
* Copyright 2012-2018, Plotly, Inc.
3+
* All rights reserved.
4+
*
5+
* This source code is licensed under the MIT license found in the
6+
* LICENSE file in the root directory of this source tree.
7+
*/
8+
9+
'use strict';
10+
11+
function sortBasePlotModules(a, b) {
12+
var nameA = a.name;
13+
var nameB = b.name;
14+
15+
// always plot splom before cartesian (i.e. scattergl traces)
16+
if(nameB === 'splom' && nameA === 'cartesian') {
17+
return 1;
18+
}
19+
return 0;
20+
}
21+
22+
function sortModules(a, b) {
23+
// always plot splom before scattergl traces
24+
if(b === 'splom' && a === 'scattergl') {
25+
return 1;
26+
}
27+
return 0;
28+
}
29+
30+
module.exports = {
31+
sortBasePlotModules: sortBasePlotModules,
32+
sortModules: sortModules
33+
};

‎src/traces/scattergl/index.js

+14-4
Original file line numberDiff line numberDiff line change
@@ -816,9 +816,20 @@ function selectPoints(searchInfo, polygon) {
816816
return selection;
817817
}
818818

819-
function style(gd, cd) {
820-
if(cd) {
821-
var stash = cd[0].t;
819+
function style(gd, cds) {
820+
if(!cds) return;
821+
822+
var fullLayout = gd._fullLayout;
823+
824+
if(fullLayout._has('splom')) {
825+
// splom clear the whole canvas,
826+
// must redraw every subplot
827+
for(var k in fullLayout._plots) {
828+
var sp = fullLayout._plots[k];
829+
if(sp._scene) sp._scene.draw();
830+
}
831+
} else {
832+
var stash = cds[0][0].t;
822833
var scene = stash.scene;
823834
scene.clear();
824835
scene.draw();
@@ -843,7 +854,6 @@ module.exports = {
843854

844855
sceneOptions: sceneOptions,
845856
sceneUpdate: sceneUpdate,
846-
847857
calcHover: calcHover,
848858

849859
meta: {

‎src/traces/splom/index.js

+14-5
Original file line numberDiff line numberDiff line change
@@ -409,15 +409,24 @@ function selectPoints(searchInfo, polygon) {
409409
scene.selectBatch = els;
410410
scene.unselectBatch = unels;
411411

412-
scene.matrix.regl.clear({ color: true });
413412

414413
return selection;
415414
}
416415

417-
function style(gd, cd) {
418-
if(cd) {
419-
var stash = cd[0].t;
420-
var scene = stash._scene;
416+
function style(gd, cds) {
417+
if(!cds) return;
418+
419+
var fullLayout = gd._fullLayout;
420+
var cd0 = cds[0];
421+
var scene0 = cd0[0].t._scene;
422+
scene0.matrix.regl.clear({color: true});
423+
424+
if(fullLayout._splomGrid) {
425+
fullLayout._splomGrid.draw();
426+
}
427+
428+
for(var i = 0; i < cds.length; i++) {
429+
var scene = cds[i][0].t._scene;
421430
scene.draw();
422431
}
423432
}

0 commit comments

Comments
 (0)