Skip to content

Introduce global contexts#2159

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
dy merged 13 commits into from
Nov 28, 2017
Merged

Introduce global contexts #2159

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
e6fcbf5
Introduce global contexts
dy Nov 14, 2017
f711cf1
Fix canvas counts
dy Nov 14, 2017
0838c31
Scope regl creation by trace
dy Nov 15, 2017
348e170
Fix interaction/image tests
dy Nov 15, 2017
07ea384
Lintify
dy Nov 15, 2017
1517ece
Remove data obj
dy Nov 16, 2017
f7fc8cb
Merge branch 'master' into global-context
dy Nov 22, 2017
384b577
Recycle global canvases properly
dy Nov 23, 2017
8346ce4
Fix container test
dy Nov 23, 2017
b8b8951
Simplify canvas removal
dy Nov 24, 2017
4efe21e
Minor fixes
dy Nov 24, 2017
83b7589
Fix parcoords tests
dy Nov 24, 2017
de9b1aa
Fix noCI tests
dy Nov 27, 2017
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
1 change: 1 addition & 0 deletions src/plot_api/helpers.js
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -154,6 +154,7 @@ exports.cleanLayout = function(layout) {

// clean old Camera coords
var cameraposition = scene.cameraposition;

if(Array.isArray(cameraposition) && cameraposition[0].length === 4) {
var rotation = cameraposition[0],
center = cameraposition[1],
Expand Down
45 changes: 43 additions & 2 deletions src/plot_api/plot_api.js
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -195,6 +195,43 @@ Plotly.plot = function(gd, data, layout, config) {
}
}

if(!fullLayout._glcanvas && fullLayout._has('gl')) {
fullLayout._glcanvas = fullLayout._glcontainer.selectAll('.gl-canvas').data([{
key: 'contextLayer',
context: true,
pick: false
}, {
key: 'focusLayer',
context: false,
pick: false
}, {
key: 'pickLayer',
context: false,
pick: true
}], function(d) { return d.key; });

fullLayout._glcanvas.enter().append('canvas')
.attr('class', function(d) {
return 'gl-canvas gl-canvas-' + d.key.replace('Layer', '');
})
.style({
'position': 'absolute',
'top': 0,
'left': 0,
'width': '100%',
'height': '100%',
'overflow': 'visible'
})
.attr('width', fullLayout.width)
.attr('height', fullLayout.height);

fullLayout._glcanvas.filter(function(d) {
return !d.pick;
}).style({
'pointer-events': 'none'
});
}

return Lib.syncOrAsync([
subroutines.layoutStyles
], gd);
Expand DownExpand Up@@ -1993,7 +2030,7 @@ function _relayout(gd, aobj) {
else flags.plot = true;
}
else {
if(fullLayout._has('gl2d') &&
if((fullLayout._has('gl2d') || fullLayout._has('regl')) &&
(ai === 'dragmode' &&
(vi === 'lasso' || vi === 'select') &&
!(vOld === 'lasso' || vOld === 'select'))
Expand DownExpand Up@@ -2764,11 +2801,15 @@ function makePlotFramework(gd) {
// right, rather than enter/exit which can muck up the order
// TODO: sort out all the ordering so we don't have to
// explicitly delete anything
// FIXME: parcoords reuses this object, not the best pattern
fullLayout._glcontainer = fullLayout._paperdiv.selectAll('.gl-container')
.data([0]);
.data([{}]);
fullLayout._glcontainer.enter().append('div')
.classed('gl-container', true);

// That is initialized in drawFramework if there are `gl` traces
fullLayout._glcanvas = null;

fullLayout._paperdiv.selectAll('.main-svg').remove();

fullLayout._paper = fullLayout._paperdiv.insert('svg', ':first-child')
Expand Down
23 changes: 22 additions & 1 deletion src/plots/cartesian/dragbox.js
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -711,14 +711,35 @@ module.exports = function dragBox(gd, plotinfo, x, y, w, h, ns, ew) {
return ax._length * (1 - scaleFactor) * FROM_TL[ax.constraintoward || 'middle'];
}

for(i = 0; i < subplots.length; i++) {
// clear gl frame, if any, since we preserve drawing buffer
// FIXME: code duplication with cartesian.plot
if(fullLayout._glcanvas && fullLayout._glcanvas.size()) {
fullLayout._glcanvas.each(function(d) {
if(d.regl) {
d.regl.clear({
color: true
});
}
});
}

for(i = 0; i < subplots.length; i++) {
var subplot = plotinfos[subplots[i]],
xa2 = subplot.xaxis,
ya2 = subplot.yaxis,
editX2 = editX && !xa2.fixedrange && (xa.indexOf(xa2) !== -1),
editY2 = editY && !ya2.fixedrange && (ya.indexOf(ya2) !== -1);

// scattergl translate
if(subplot._scene && subplot._scene.update) {
// FIXME: possibly we could update axis internal _r and _rl here
var xaRange = Lib.simpleMap(xa2.range, xa2.r2l),
yaRange = Lib.simpleMap(ya2.range, ya2.r2l);
subplot._scene.update(
{range: [xaRange[0], yaRange[0], xaRange[1], yaRange[1]]}
);
}

if(editX2) {
xScaleFactor2 = xScaleFactor;
clipDx = ew ? viewBox[0] : getShift(xa2, xScaleFactor2);
Expand Down
11 changes: 11 additions & 0 deletions src/plots/cartesian/index.js
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -48,6 +48,17 @@ exports.plot = function(gd, traces, transitionOpts, makeOnCompleteCallback) {
}
}

// clear gl frame, if any, since we preserve drawing buffer
if(fullLayout._glcanvas && fullLayout._glcanvas.size()) {
fullLayout._glcanvas.each(function(d) {
if(d.regl) {
d.regl.clear({
color: true
});
}
});
}

for(i = 0; i < subplots.length; i++) {
var subplot = subplots[i],
subplotInfo = fullLayout._plots[subplot];
Expand Down
1 change: 0 additions & 1 deletion src/plots/cartesian/select.js
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -262,7 +262,6 @@ module.exports = function prepSelect(e, startX, startY, dragOptions, mode) {

throttle.done(throttleID).then(function() {
throttle.clear(throttleID);

if(!dragged && numclicks === 2) {
// clear selection on doubleclick
outlines.remove();
Expand Down
11 changes: 7 additions & 4 deletions src/plots/gl2d/scene2d.js
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -112,7 +112,7 @@ proto.makeFramework = function() {
this.gl = STATIC_CONTEXT;
}
else {
var liveCanvas = document.createElement('canvas');
var liveCanvas = this.container.querySelector('.gl-canvas-focus');

var gl = getContext({
canvas: liveCanvas,
Expand DownExpand Up@@ -140,7 +140,7 @@ proto.makeFramework = function() {
// disabling user select on the canvas
// sanitizes double-clicks interactions
// ref: https://github.com/plotly/plotly.js/issues/744
canvas.className += 'user-select-none';
canvas.className += 'user-select-none';

// create SVG container for hover text
var svgContainer = this.svgContainer = document.createElementNS(
Expand All@@ -157,9 +157,11 @@ proto.makeFramework = function() {
mouseContainer.style.position = 'absolute';
mouseContainer.style['pointer-events'] = 'auto';

this.pickCanvas = this.container.querySelector('.gl-canvas-pick');


// append canvas, hover svg and mouse div to container
var container = this.container;
container.appendChild(canvas);
container.appendChild(svgContainer);
container.appendChild(mouseContainer);

Expand DownExpand Up@@ -370,7 +372,6 @@ proto.destroy = function() {

this.glplot.dispose();

if(!this.staticPlot) this.container.removeChild(this.canvas);
this.container.removeChild(this.svgContainer);
this.container.removeChild(this.mouseContainer);

Expand DownExpand Up@@ -533,8 +534,10 @@ proto.updateTraces = function(fullData, calcData) {
proto.updateFx = function(dragmode) {
// switch to svg interactions in lasso/select mode
if(dragmode === 'lasso' || dragmode === 'select') {
this.pickCanvas.style['pointer-events'] = 'none';
this.mouseContainer.style['pointer-events'] = 'none';
} else {
this.pickCanvas.style['pointer-events'] = 'auto';
this.mouseContainer.style['pointer-events'] = 'auto';
}

Expand Down
34 changes: 32 additions & 2 deletions src/plots/plots.js
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -569,15 +569,29 @@ plots.createTransitionData = function(gd) {

// helper function to be bound to fullLayout to check
// whether a certain plot type is present on plot
// or trace has a category
plots._hasPlotType = function(category) {
// check plot

var basePlotModules = this._basePlotModules || [];
var i;

for(var i = 0; i < basePlotModules.length; i++) {
for(i = 0; i < basePlotModules.length; i++) {
var _module = basePlotModules[i];

if(_module.name === category) return true;
}

// check trace
var modules = this._modules || [];

@etpinardetpinardNov 16, 2017

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

brilliant ✨


for(i = 0; i < modules.length; i++) {
var _ = modules[i];
if(_.categories && _.categories.indexOf(category) >= 0) {
return true;
}
}

return false;
};

Expand All@@ -595,6 +609,15 @@ plots.cleanPlot = function(newFullData, newFullLayout, oldFullData, oldFullLayou

var hasPaper = !!oldFullLayout._paper;
var hasInfoLayer = !!oldFullLayout._infolayer;
var hadGl = oldFullLayout._has && oldFullLayout._has('gl');
var hasGl = newFullLayout._has && newFullLayout._has('gl');

if(hadGl && !hasGl) {
if(oldFullLayout._glcontainer !== undefined) {
oldFullLayout._glcontainer.selectAll('.gl-canvas').remove();
oldFullLayout._glcanvas = null;
}
}

oldLoop:
for(i = 0; i < oldFullData.length; i++) {
Expand DownExpand Up@@ -1308,7 +1331,11 @@ plots.purge = function(gd) {
// a new plot, and may have been set outside of our scope.

var fullLayout = gd._fullLayout || {};
if(fullLayout._glcontainer !== undefined) fullLayout._glcontainer.remove();
if(fullLayout._glcontainer !== undefined) {
fullLayout._glcontainer.selectAll('.gl-canvas').remove();
fullLayout._glcontainer.remove();
fullLayout._glcanvas = null;
}
if(fullLayout._geocontainer !== undefined) fullLayout._geocontainer.remove();

// remove modebar
Expand All@@ -1326,6 +1353,9 @@ plots.purge = function(gd) {
}
}

// remove any planned throttles
Lib.clearThrottle();

// data and layout
delete gd.data;
delete gd.layout;
Expand Down
2 changes: 1 addition & 1 deletion src/traces/contourgl/index.js
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -23,7 +23,7 @@ ContourGl.plot = require('./convert');
ContourGl.moduleType = 'trace';
ContourGl.name = 'contourgl';
ContourGl.basePlotModule = require('../../plots/gl2d');
ContourGl.categories = ['gl2d', '2dMap'];
ContourGl.categories = ['gl', 'gl2d', '2dMap'];
ContourGl.meta = {
description: [
'WebGL contour (beta)'
Expand Down
2 changes: 1 addition & 1 deletion src/traces/heatmapgl/index.js
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -21,7 +21,7 @@ HeatmapGl.plot = require('./convert');
HeatmapGl.moduleType = 'trace';
HeatmapGl.name = 'heatmapgl';
HeatmapGl.basePlotModule = require('../../plots/gl2d');
HeatmapGl.categories = ['gl2d', '2dMap'];
HeatmapGl.categories = ['gl', 'gl2d', '2dMap'];
HeatmapGl.meta = {
description: [
'WebGL version of the heatmap trace type.'
Expand Down
18 changes: 6 additions & 12 deletions src/traces/parcoords/base_plot.js
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -12,7 +12,6 @@ var d3 = require('d3');
var Plots = require('../../plots/plots');
var parcoordsPlot = require('./plot');
var xmlnsNamespaces = require('../../constants/xmlns_namespaces');
var c = require('./constants');

exports.name = 'parcoords';

Expand All@@ -28,9 +27,6 @@ exports.clean = function(newFullData, newFullLayout, oldFullData, oldFullLayout)
var hasParcoords = (newFullLayout._has && newFullLayout._has('parcoords'));

if(hadParcoords && !hasParcoords) {
oldFullLayout._paperdiv.selectAll('.parcoords-line-layers').remove();
oldFullLayout._paperdiv.selectAll('.parcoords-line-layers').remove();
oldFullLayout._paperdiv.selectAll('.parcoords').remove();
oldFullLayout._paperdiv.selectAll('.parcoords').remove();
oldFullLayout._glimages.selectAll('*').remove();
}
Expand All@@ -41,22 +37,20 @@ exports.toSVG = function(gd) {
var imageRoot = gd._fullLayout._glimages;
var root = d3.select(gd).selectAll('.svg-container');
var canvases = root.filter(function(d, i) {return i === root.size() - 1;})
.selectAll('.parcoords-lines.context, .parcoords-lines.focus');
.selectAll('.gl-canvas-context, .gl-canvas-focus');

function canvasToImage(d) {
function canvasToImage() {
var canvas = this;
var imageData = canvas.toDataURL('image/png');
var image = imageRoot.append('svg:image');
var size = gd._fullLayout._size;
var domain = gd._fullData[d.model.key].domain;

image.attr({
xmlns: xmlnsNamespaces.svg,
'xlink:href': imageData,
x: size.l + size.w * domain.x[0] - c.overdrag,
y: size.t + size.h * (1 - domain.y[1]),
width: (domain.x[1] - domain.x[0]) * size.w + 2 * c.overdrag,
height: (domain.y[1] - domain.y[0]) * size.h,
x: 0,
y: 0,
width: canvas.width,
height: canvas.height,

@etpinardetpinardNov 16, 2017

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Lovely cleanup ❤️

preserveAspectRatio: 'none'
});
}
Expand Down
2 changes: 1 addition & 1 deletion src/traces/parcoords/index.js
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -19,7 +19,7 @@ Parcoords.colorbar = require('./colorbar');
Parcoords.moduleType = 'trace';
Parcoords.name = 'parcoords';
Parcoords.basePlotModule = require('./base_plot');
Parcoords.categories = ['gl', 'noOpacity'];
Parcoords.categories = ['gl', 'regl', 'noOpacity'];
Parcoords.meta = {
description: [
'Parallel coordinates for multidimensional exploratory data analysis.',
Expand Down
Loading
, 'i'); if (__m === '*' || __re.test(location.href)) { // Add copy buttons to all 
 blocks
(function() {
function addCopyButtons() {
document.querySelectorAll('pre code').forEach(function(codeBlock) {
if (codeBlock.parentElement.hasAttribute('data-copy-added')) return;
codeBlock.parentElement.setAttribute('data-copy-added', 'true');
var btn = document.createElement('button');
btn.textContent = 'Copy';
btn.style.cssText = 'position:absolute;top:4px;right:4px;padding:2px 8px;font-size:11px;background:#4ecdc4;border:none;border-radius:4px;color:#1a1a2e;cursor:pointer;opacity:0.7;transition:opacity 0.2s;';
btn.onmouseover = function() { this.style.opacity = '1'; };
btn.onmouseout = function() { this.style.opacity = '0.7'; };
btn.onclick = function() {
navigator.clipboard.writeText(codeBlock.textContent).then(function() {
btn.textContent = 'Copied!';
setTimeout(function() { btn.textContent = 'Copy'; }, 1500);
});
};
codeBlock.parentElement.style.position = 'relative';
codeBlock.parentElement.appendChild(btn);
});
}
addCopyButtons();
// Re-run on dynamic content
var observer = new MutationObserver(addCopyButtons);
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:Add Copy Buttons to Code Blocks]', __e); }
})();
(function(){
try {
var __m = "github.com";
var __re = new RegExp('^' + "github\\.com" + '
Introduce global contexts by dy · Pull Request #2159 · plotly/plotly.js · GitHub
Skip to content
Introduce global contexts#2159

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

dy
merged 13 commits into

from

Nov 28, 2017
 Merged


Introduce global contexts
#2159
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


13 commits


Select commit
Hold shift + click to select a range
e6fcbf5

Introduce global contexts


dy Nov 14, 2017
f711cf1

Fix canvas counts


dy Nov 14, 2017
0838c31

Scope regl creation by trace


dy Nov 15, 2017
348e170

Fix interaction/image tests


dy Nov 15, 2017
07ea384

Lintify


dy Nov 15, 2017
1517ece

Remove data obj


dy Nov 16, 2017
f7fc8cb

Merge branch 'master' into global-context


dy Nov 22, 2017
384b577

Recycle global canvases properly


dy Nov 23, 2017
8346ce4

Fix container test


dy Nov 23, 2017
b8b8951

Simplify canvas removal


dy Nov 24, 2017
4efe21e

Minor fixes


dy Nov 24, 2017
83b7589

Fix parcoords tests


dy Nov 24, 2017
de9b1aa

Fix noCI tests


dy Nov 27, 2017

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


1 change: 1 addition & 0 deletions
src/plot_api/helpers.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -154,6 +154,7 @@ exports.cleanLayout = function(layout) {

 // clean old Camera coords
 var cameraposition = scene.cameraposition;

 if(Array.isArray(cameraposition) && cameraposition[0].length === 4) {
 var rotation = cameraposition[0],
 center = cameraposition[1],
Expand Down

45 changes: 43 additions & 2 deletions
src/plot_api/plot_api.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -195,6 +195,43 @@ Plotly.plot = function(gd, data, layout, config) {
 }
 }

 if(!fullLayout._glcanvas && fullLayout._has('gl')) {
 fullLayout._glcanvas = fullLayout._glcontainer.selectAll('.gl-canvas').data([{
 key: 'contextLayer',
 context: true,
 pick: false
 }, {
 key: 'focusLayer',
 context: false,
 pick: false
 }, {
 key: 'pickLayer',
 context: false,
 pick: true
 }], function(d) { return d.key; });

 fullLayout._glcanvas.enter().append('canvas')
 .attr('class', function(d) {
 return 'gl-canvas gl-canvas-' + d.key.replace('Layer', '');
 })
 .style({
 'position': 'absolute',
 'top': 0,
 'left': 0,
 'width': '100%',
 'height': '100%',
 'overflow': 'visible'
 })
 .attr('width', fullLayout.width)
 .attr('height', fullLayout.height);

 fullLayout._glcanvas.filter(function(d) {
 return !d.pick;
 }).style({
 'pointer-events': 'none'
 });
 }

 return Lib.syncOrAsync([
 subroutines.layoutStyles
 ], gd);
Expand DownExpand Up@@ -1993,7 +2030,7 @@ function _relayout(gd, aobj) {
 else flags.plot = true;
 }
 else {
 if(fullLayout._has('gl2d') &&
 if((fullLayout._has('gl2d') || fullLayout._has('regl')) &&
 (ai === 'dragmode' &&
 (vi === 'lasso' || vi === 'select') &&
 !(vOld === 'lasso' || vOld === 'select'))
Expand DownExpand Up@@ -2764,11 +2801,15 @@ function makePlotFramework(gd) {
 // right, rather than enter/exit which can muck up the order
 // TODO: sort out all the ordering so we don't have to
 // explicitly delete anything
 // FIXME: parcoords reuses this object, not the best pattern
 fullLayout._glcontainer = fullLayout._paperdiv.selectAll('.gl-container')
 .data([0]);
 .data([{}]);
 fullLayout._glcontainer.enter().append('div')
 .classed('gl-container', true);

 // That is initialized in drawFramework if there are `gl` traces
 fullLayout._glcanvas = null;

 fullLayout._paperdiv.selectAll('.main-svg').remove();

 fullLayout._paper = fullLayout._paperdiv.insert('svg', ':first-child')
Expand Down

23 changes: 22 additions & 1 deletion
src/plots/cartesian/dragbox.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -711,14 +711,35 @@ module.exports = function dragBox(gd, plotinfo, x, y, w, h, ns, ew) {
 return ax._length * (1 - scaleFactor) * FROM_TL[ax.constraintoward || 'middle'];
 }

 for(i = 0; i < subplots.length; i++) {
 // clear gl frame, if any, since we preserve drawing buffer
 // FIXME: code duplication with cartesian.plot
 if(fullLayout._glcanvas && fullLayout._glcanvas.size()) {
 fullLayout._glcanvas.each(function(d) {
 if(d.regl) {
 d.regl.clear({
 color: true
 });
 }
 });
 }

 for(i = 0; i < subplots.length; i++) {
 var subplot = plotinfos[subplots[i]],
 xa2 = subplot.xaxis,
 ya2 = subplot.yaxis,
 editX2 = editX && !xa2.fixedrange && (xa.indexOf(xa2) !== -1),
 editY2 = editY && !ya2.fixedrange && (ya.indexOf(ya2) !== -1);

 // scattergl translate
 if(subplot._scene && subplot._scene.update) {
 // FIXME: possibly we could update axis internal _r and _rl here
 var xaRange = Lib.simpleMap(xa2.range, xa2.r2l),
 yaRange = Lib.simpleMap(ya2.range, ya2.r2l);
 subplot._scene.update(
 {range: [xaRange[0], yaRange[0], xaRange[1], yaRange[1]]}
 );
 }

 if(editX2) {
 xScaleFactor2 = xScaleFactor;
 clipDx = ew ? viewBox[0] : getShift(xa2, xScaleFactor2);
Expand Down

11 changes: 11 additions & 0 deletions
src/plots/cartesian/index.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -48,6 +48,17 @@ exports.plot = function(gd, traces, transitionOpts, makeOnCompleteCallback) {
 }
 }

 // clear gl frame, if any, since we preserve drawing buffer
 if(fullLayout._glcanvas && fullLayout._glcanvas.size()) {
 fullLayout._glcanvas.each(function(d) {
 if(d.regl) {
 d.regl.clear({
 color: true
 });
 }
 });
 }

 for(i = 0; i < subplots.length; i++) {
 var subplot = subplots[i],
 subplotInfo = fullLayout._plots[subplot];
Expand Down

1 change: 0 additions & 1 deletion
src/plots/cartesian/select.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -262,7 +262,6 @@ module.exports = function prepSelect(e, startX, startY, dragOptions, mode) {

 throttle.done(throttleID).then(function() {
 throttle.clear(throttleID);

 if(!dragged && numclicks === 2) {
 // clear selection on doubleclick
 outlines.remove();
Expand Down

11 changes: 7 additions & 4 deletions
src/plots/gl2d/scene2d.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -112,7 +112,7 @@ proto.makeFramework = function() {
 this.gl = STATIC_CONTEXT;
 }
 else {
 var liveCanvas = document.createElement('canvas');
 var liveCanvas = this.container.querySelector('.gl-canvas-focus');

 var gl = getContext({
 canvas: liveCanvas,
Expand DownExpand Up@@ -140,7 +140,7 @@ proto.makeFramework = function() {
 // disabling user select on the canvas
 // sanitizes double-clicks interactions
 // ref: https://github.com/plotly/plotly.js/issues/744
 canvas.className += 'user-select-none';
 canvas.className += 'user-select-none';

 // create SVG container for hover text
 var svgContainer = this.svgContainer = document.createElementNS(
Expand All@@ -157,9 +157,11 @@ proto.makeFramework = function() {
 mouseContainer.style.position = 'absolute';
 mouseContainer.style['pointer-events'] = 'auto';

 this.pickCanvas = this.container.querySelector('.gl-canvas-pick');


 // append canvas, hover svg and mouse div to container
 var container = this.container;
 container.appendChild(canvas);
 container.appendChild(svgContainer);
 container.appendChild(mouseContainer);

Expand DownExpand Up@@ -370,7 +372,6 @@ proto.destroy = function() {

 this.glplot.dispose();

 if(!this.staticPlot) this.container.removeChild(this.canvas);
 this.container.removeChild(this.svgContainer);
 this.container.removeChild(this.mouseContainer);

Expand DownExpand Up@@ -533,8 +534,10 @@ proto.updateTraces = function(fullData, calcData) {
proto.updateFx = function(dragmode) {
 // switch to svg interactions in lasso/select mode
 if(dragmode === 'lasso' || dragmode === 'select') {
 this.pickCanvas.style['pointer-events'] = 'none';
 this.mouseContainer.style['pointer-events'] = 'none';
 } else {
 this.pickCanvas.style['pointer-events'] = 'auto';
 this.mouseContainer.style['pointer-events'] = 'auto';
 }

Expand Down

34 changes: 32 additions & 2 deletions
src/plots/plots.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -569,15 +569,29 @@ plots.createTransitionData = function(gd) {

// helper function to be bound to fullLayout to check
// whether a certain plot type is present on plot
// or trace has a category
plots._hasPlotType = function(category) {
 // check plot

 var basePlotModules = this._basePlotModules || [];
 var i;

 for(var i = 0; i < basePlotModules.length; i++) {
 for(i = 0; i < basePlotModules.length; i++) {
 var _module = basePlotModules[i];

 if(_module.name === category) return true;
 }

 // check trace
 var modules = this._modules || [];
@etpinardetpinardNov 16, 2017

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

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

brilliant ✨

 for(i = 0; i < modules.length; i++) {
 var _ = modules[i];
 if(_.categories && _.categories.indexOf(category) >= 0) {
 return true;
 }
 }

 return false;
};

Expand All@@ -595,6 +609,15 @@ plots.cleanPlot = function(newFullData, newFullLayout, oldFullData, oldFullLayou

 var hasPaper = !!oldFullLayout._paper;
 var hasInfoLayer = !!oldFullLayout._infolayer;
 var hadGl = oldFullLayout._has && oldFullLayout._has('gl');
 var hasGl = newFullLayout._has && newFullLayout._has('gl');

 if(hadGl && !hasGl) {
 if(oldFullLayout._glcontainer !== undefined) {
 oldFullLayout._glcontainer.selectAll('.gl-canvas').remove();
 oldFullLayout._glcanvas = null;
 }
 }

 oldLoop:
 for(i = 0; i < oldFullData.length; i++) {
Expand DownExpand Up@@ -1308,7 +1331,11 @@ plots.purge = function(gd) {
 // a new plot, and may have been set outside of our scope.

 var fullLayout = gd._fullLayout || {};
 if(fullLayout._glcontainer !== undefined) fullLayout._glcontainer.remove();
 if(fullLayout._glcontainer !== undefined) {
 fullLayout._glcontainer.selectAll('.gl-canvas').remove();
 fullLayout._glcontainer.remove();
 fullLayout._glcanvas = null;
 }
 if(fullLayout._geocontainer !== undefined) fullLayout._geocontainer.remove();

 // remove modebar
Expand All@@ -1326,6 +1353,9 @@ plots.purge = function(gd) {
 }
 }

 // remove any planned throttles
 Lib.clearThrottle();

 // data and layout
 delete gd.data;
 delete gd.layout;
Expand Down

2 changes: 1 addition & 1 deletion
src/traces/contourgl/index.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -23,7 +23,7 @@ ContourGl.plot = require('./convert');
ContourGl.moduleType = 'trace';
ContourGl.name = 'contourgl';
ContourGl.basePlotModule = require('../../plots/gl2d');
ContourGl.categories = ['gl2d', '2dMap'];
ContourGl.categories = ['gl', 'gl2d', '2dMap'];
ContourGl.meta = {
 description: [
 'WebGL contour (beta)'
Expand Down

2 changes: 1 addition & 1 deletion
src/traces/heatmapgl/index.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -21,7 +21,7 @@ HeatmapGl.plot = require('./convert');
HeatmapGl.moduleType = 'trace';
HeatmapGl.name = 'heatmapgl';
HeatmapGl.basePlotModule = require('../../plots/gl2d');
HeatmapGl.categories = ['gl2d', '2dMap'];
HeatmapGl.categories = ['gl', 'gl2d', '2dMap'];
HeatmapGl.meta = {
 description: [
 'WebGL version of the heatmap trace type.'
Expand Down

18 changes: 6 additions & 12 deletions
src/traces/parcoords/base_plot.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -12,7 +12,6 @@ var d3 = require('d3');
var Plots = require('../../plots/plots');
var parcoordsPlot = require('./plot');
var xmlnsNamespaces = require('../../constants/xmlns_namespaces');
var c = require('./constants');

exports.name = 'parcoords';

Expand All@@ -28,9 +27,6 @@ exports.clean = function(newFullData, newFullLayout, oldFullData, oldFullLayout)
 var hasParcoords = (newFullLayout._has && newFullLayout._has('parcoords'));

 if(hadParcoords && !hasParcoords) {
 oldFullLayout._paperdiv.selectAll('.parcoords-line-layers').remove();
 oldFullLayout._paperdiv.selectAll('.parcoords-line-layers').remove();
 oldFullLayout._paperdiv.selectAll('.parcoords').remove();
 oldFullLayout._paperdiv.selectAll('.parcoords').remove();
 oldFullLayout._glimages.selectAll('*').remove();
 }
Expand All@@ -41,22 +37,20 @@ exports.toSVG = function(gd) {
 var imageRoot = gd._fullLayout._glimages;
 var root = d3.select(gd).selectAll('.svg-container');
 var canvases = root.filter(function(d, i) {return i === root.size() - 1;})
 .selectAll('.parcoords-lines.context, .parcoords-lines.focus');
 .selectAll('.gl-canvas-context, .gl-canvas-focus');

 function canvasToImage(d) {
 function canvasToImage() {
 var canvas = this;
 var imageData = canvas.toDataURL('image/png');
 var image = imageRoot.append('svg:image');
 var size = gd._fullLayout._size;
 var domain = gd._fullData[d.model.key].domain;

 image.attr({
 xmlns: xmlnsNamespaces.svg,
 'xlink:href': imageData,
 x: size.l + size.w * domain.x[0] - c.overdrag,
 y: size.t + size.h * (1 - domain.y[1]),
 width: (domain.x[1] - domain.x[0]) * size.w + 2 * c.overdrag,
 height: (domain.y[1] - domain.y[0]) * size.h,
 x: 0,
 y: 0,
 width: canvas.width,
 height: canvas.height,
@etpinardetpinardNov 16, 2017

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

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

Lovely cleanup ❤️
 preserveAspectRatio: 'none'
 });
 }
Expand Down

2 changes: 1 addition & 1 deletion
src/traces/parcoords/index.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -19,7 +19,7 @@ Parcoords.colorbar = require('./colorbar');
Parcoords.moduleType = 'trace';
Parcoords.name = 'parcoords';
Parcoords.basePlotModule = require('./base_plot');
Parcoords.categories = ['gl', 'noOpacity'];
Parcoords.categories = ['gl', 'regl', 'noOpacity'];
Parcoords.meta = {
 description: [
 'Parallel coordinates for multidimensional exploratory data analysis.',
Expand Down
Loading

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Force GitHub README to respect dark mode
(function() {
var style = document.createElement('style');
style.textContent = '
.markdown-body {
color-scheme: dark light;
}
.markdown-body pre { background: #161b22 !important; }
.markdown-body code { background: rgba(110, 118, 129, 0.4) !important; }
.markdown-body table th, .markdown-body table td { border-color: #30363d !important; }
.markdown-body img { background: #0d1117; }
.markdown-body blockquote { border-left-color: #8b949e; }
.markdown-body hr { border-color: #30363d; }
';
document.head.appendChild(style);
})();
}
} catch(__e) { console.warn('[Userscript:GitHub Dark Mode README Fix]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '
Introduce global contexts by dy · Pull Request #2159 · plotly/plotly.js · GitHub
Skip to content
Introduce global contexts#2159

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

dy
merged 13 commits into

from

Nov 28, 2017
 Merged


Introduce global contexts
#2159
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


13 commits


Select commit
Hold shift + click to select a range
e6fcbf5

Introduce global contexts


dy Nov 14, 2017
f711cf1

Fix canvas counts


dy Nov 14, 2017
0838c31

Scope regl creation by trace


dy Nov 15, 2017
348e170

Fix interaction/image tests


dy Nov 15, 2017
07ea384

Lintify


dy Nov 15, 2017
1517ece

Remove data obj


dy Nov 16, 2017
f7fc8cb

Merge branch 'master' into global-context


dy Nov 22, 2017
384b577

Recycle global canvases properly


dy Nov 23, 2017
8346ce4

Fix container test


dy Nov 23, 2017
b8b8951

Simplify canvas removal


dy Nov 24, 2017
4efe21e

Minor fixes


dy Nov 24, 2017
83b7589

Fix parcoords tests


dy Nov 24, 2017
de9b1aa

Fix noCI tests


dy Nov 27, 2017

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


1 change: 1 addition & 0 deletions
src/plot_api/helpers.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -154,6 +154,7 @@ exports.cleanLayout = function(layout) {

 // clean old Camera coords
 var cameraposition = scene.cameraposition;

 if(Array.isArray(cameraposition) && cameraposition[0].length === 4) {
 var rotation = cameraposition[0],
 center = cameraposition[1],
Expand Down

45 changes: 43 additions & 2 deletions
src/plot_api/plot_api.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -195,6 +195,43 @@ Plotly.plot = function(gd, data, layout, config) {
 }
 }

 if(!fullLayout._glcanvas && fullLayout._has('gl')) {
 fullLayout._glcanvas = fullLayout._glcontainer.selectAll('.gl-canvas').data([{
 key: 'contextLayer',
 context: true,
 pick: false
 }, {
 key: 'focusLayer',
 context: false,
 pick: false
 }, {
 key: 'pickLayer',
 context: false,
 pick: true
 }], function(d) { return d.key; });

 fullLayout._glcanvas.enter().append('canvas')
 .attr('class', function(d) {
 return 'gl-canvas gl-canvas-' + d.key.replace('Layer', '');
 })
 .style({
 'position': 'absolute',
 'top': 0,
 'left': 0,
 'width': '100%',
 'height': '100%',
 'overflow': 'visible'
 })
 .attr('width', fullLayout.width)
 .attr('height', fullLayout.height);

 fullLayout._glcanvas.filter(function(d) {
 return !d.pick;
 }).style({
 'pointer-events': 'none'
 });
 }

 return Lib.syncOrAsync([
 subroutines.layoutStyles
 ], gd);
Expand DownExpand Up@@ -1993,7 +2030,7 @@ function _relayout(gd, aobj) {
 else flags.plot = true;
 }
 else {
 if(fullLayout._has('gl2d') &&
 if((fullLayout._has('gl2d') || fullLayout._has('regl')) &&
 (ai === 'dragmode' &&
 (vi === 'lasso' || vi === 'select') &&
 !(vOld === 'lasso' || vOld === 'select'))
Expand DownExpand Up@@ -2764,11 +2801,15 @@ function makePlotFramework(gd) {
 // right, rather than enter/exit which can muck up the order
 // TODO: sort out all the ordering so we don't have to
 // explicitly delete anything
 // FIXME: parcoords reuses this object, not the best pattern
 fullLayout._glcontainer = fullLayout._paperdiv.selectAll('.gl-container')
 .data([0]);
 .data([{}]);
 fullLayout._glcontainer.enter().append('div')
 .classed('gl-container', true);

 // That is initialized in drawFramework if there are `gl` traces
 fullLayout._glcanvas = null;

 fullLayout._paperdiv.selectAll('.main-svg').remove();

 fullLayout._paper = fullLayout._paperdiv.insert('svg', ':first-child')
Expand Down

23 changes: 22 additions & 1 deletion
src/plots/cartesian/dragbox.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -711,14 +711,35 @@ module.exports = function dragBox(gd, plotinfo, x, y, w, h, ns, ew) {
 return ax._length * (1 - scaleFactor) * FROM_TL[ax.constraintoward || 'middle'];
 }

 for(i = 0; i < subplots.length; i++) {
 // clear gl frame, if any, since we preserve drawing buffer
 // FIXME: code duplication with cartesian.plot
 if(fullLayout._glcanvas && fullLayout._glcanvas.size()) {
 fullLayout._glcanvas.each(function(d) {
 if(d.regl) {
 d.regl.clear({
 color: true
 });
 }
 });
 }

 for(i = 0; i < subplots.length; i++) {
 var subplot = plotinfos[subplots[i]],
 xa2 = subplot.xaxis,
 ya2 = subplot.yaxis,
 editX2 = editX && !xa2.fixedrange && (xa.indexOf(xa2) !== -1),
 editY2 = editY && !ya2.fixedrange && (ya.indexOf(ya2) !== -1);

 // scattergl translate
 if(subplot._scene && subplot._scene.update) {
 // FIXME: possibly we could update axis internal _r and _rl here
 var xaRange = Lib.simpleMap(xa2.range, xa2.r2l),
 yaRange = Lib.simpleMap(ya2.range, ya2.r2l);
 subplot._scene.update(
 {range: [xaRange[0], yaRange[0], xaRange[1], yaRange[1]]}
 );
 }

 if(editX2) {
 xScaleFactor2 = xScaleFactor;
 clipDx = ew ? viewBox[0] : getShift(xa2, xScaleFactor2);
Expand Down

11 changes: 11 additions & 0 deletions
src/plots/cartesian/index.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -48,6 +48,17 @@ exports.plot = function(gd, traces, transitionOpts, makeOnCompleteCallback) {
 }
 }

 // clear gl frame, if any, since we preserve drawing buffer
 if(fullLayout._glcanvas && fullLayout._glcanvas.size()) {
 fullLayout._glcanvas.each(function(d) {
 if(d.regl) {
 d.regl.clear({
 color: true
 });
 }
 });
 }

 for(i = 0; i < subplots.length; i++) {
 var subplot = subplots[i],
 subplotInfo = fullLayout._plots[subplot];
Expand Down

1 change: 0 additions & 1 deletion
src/plots/cartesian/select.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -262,7 +262,6 @@ module.exports = function prepSelect(e, startX, startY, dragOptions, mode) {

 throttle.done(throttleID).then(function() {
 throttle.clear(throttleID);

 if(!dragged && numclicks === 2) {
 // clear selection on doubleclick
 outlines.remove();
Expand Down

11 changes: 7 additions & 4 deletions
src/plots/gl2d/scene2d.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -112,7 +112,7 @@ proto.makeFramework = function() {
 this.gl = STATIC_CONTEXT;
 }
 else {
 var liveCanvas = document.createElement('canvas');
 var liveCanvas = this.container.querySelector('.gl-canvas-focus');

 var gl = getContext({
 canvas: liveCanvas,
Expand DownExpand Up@@ -140,7 +140,7 @@ proto.makeFramework = function() {
 // disabling user select on the canvas
 // sanitizes double-clicks interactions
 // ref: https://github.com/plotly/plotly.js/issues/744
 canvas.className += 'user-select-none';
 canvas.className += 'user-select-none';

 // create SVG container for hover text
 var svgContainer = this.svgContainer = document.createElementNS(
Expand All@@ -157,9 +157,11 @@ proto.makeFramework = function() {
 mouseContainer.style.position = 'absolute';
 mouseContainer.style['pointer-events'] = 'auto';

 this.pickCanvas = this.container.querySelector('.gl-canvas-pick');


 // append canvas, hover svg and mouse div to container
 var container = this.container;
 container.appendChild(canvas);
 container.appendChild(svgContainer);
 container.appendChild(mouseContainer);

Expand DownExpand Up@@ -370,7 +372,6 @@ proto.destroy = function() {

 this.glplot.dispose();

 if(!this.staticPlot) this.container.removeChild(this.canvas);
 this.container.removeChild(this.svgContainer);
 this.container.removeChild(this.mouseContainer);

Expand DownExpand Up@@ -533,8 +534,10 @@ proto.updateTraces = function(fullData, calcData) {
proto.updateFx = function(dragmode) {
 // switch to svg interactions in lasso/select mode
 if(dragmode === 'lasso' || dragmode === 'select') {
 this.pickCanvas.style['pointer-events'] = 'none';
 this.mouseContainer.style['pointer-events'] = 'none';
 } else {
 this.pickCanvas.style['pointer-events'] = 'auto';
 this.mouseContainer.style['pointer-events'] = 'auto';
 }

Expand Down

34 changes: 32 additions & 2 deletions
src/plots/plots.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -569,15 +569,29 @@ plots.createTransitionData = function(gd) {

// helper function to be bound to fullLayout to check
// whether a certain plot type is present on plot
// or trace has a category
plots._hasPlotType = function(category) {
 // check plot

 var basePlotModules = this._basePlotModules || [];
 var i;

 for(var i = 0; i < basePlotModules.length; i++) {
 for(i = 0; i < basePlotModules.length; i++) {
 var _module = basePlotModules[i];

 if(_module.name === category) return true;
 }

 // check trace
 var modules = this._modules || [];
@etpinardetpinardNov 16, 2017

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

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

brilliant ✨

 for(i = 0; i < modules.length; i++) {
 var _ = modules[i];
 if(_.categories && _.categories.indexOf(category) >= 0) {
 return true;
 }
 }

 return false;
};

Expand All@@ -595,6 +609,15 @@ plots.cleanPlot = function(newFullData, newFullLayout, oldFullData, oldFullLayou

 var hasPaper = !!oldFullLayout._paper;
 var hasInfoLayer = !!oldFullLayout._infolayer;
 var hadGl = oldFullLayout._has && oldFullLayout._has('gl');
 var hasGl = newFullLayout._has && newFullLayout._has('gl');

 if(hadGl && !hasGl) {
 if(oldFullLayout._glcontainer !== undefined) {
 oldFullLayout._glcontainer.selectAll('.gl-canvas').remove();
 oldFullLayout._glcanvas = null;
 }
 }

 oldLoop:
 for(i = 0; i < oldFullData.length; i++) {
Expand DownExpand Up@@ -1308,7 +1331,11 @@ plots.purge = function(gd) {
 // a new plot, and may have been set outside of our scope.

 var fullLayout = gd._fullLayout || {};
 if(fullLayout._glcontainer !== undefined) fullLayout._glcontainer.remove();
 if(fullLayout._glcontainer !== undefined) {
 fullLayout._glcontainer.selectAll('.gl-canvas').remove();
 fullLayout._glcontainer.remove();
 fullLayout._glcanvas = null;
 }
 if(fullLayout._geocontainer !== undefined) fullLayout._geocontainer.remove();

 // remove modebar
Expand All@@ -1326,6 +1353,9 @@ plots.purge = function(gd) {
 }
 }

 // remove any planned throttles
 Lib.clearThrottle();

 // data and layout
 delete gd.data;
 delete gd.layout;
Expand Down

2 changes: 1 addition & 1 deletion
src/traces/contourgl/index.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -23,7 +23,7 @@ ContourGl.plot = require('./convert');
ContourGl.moduleType = 'trace';
ContourGl.name = 'contourgl';
ContourGl.basePlotModule = require('../../plots/gl2d');
ContourGl.categories = ['gl2d', '2dMap'];
ContourGl.categories = ['gl', 'gl2d', '2dMap'];
ContourGl.meta = {
 description: [
 'WebGL contour (beta)'
Expand Down

2 changes: 1 addition & 1 deletion
src/traces/heatmapgl/index.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -21,7 +21,7 @@ HeatmapGl.plot = require('./convert');
HeatmapGl.moduleType = 'trace';
HeatmapGl.name = 'heatmapgl';
HeatmapGl.basePlotModule = require('../../plots/gl2d');
HeatmapGl.categories = ['gl2d', '2dMap'];
HeatmapGl.categories = ['gl', 'gl2d', '2dMap'];
HeatmapGl.meta = {
 description: [
 'WebGL version of the heatmap trace type.'
Expand Down

18 changes: 6 additions & 12 deletions
src/traces/parcoords/base_plot.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -12,7 +12,6 @@ var d3 = require('d3');
var Plots = require('../../plots/plots');
var parcoordsPlot = require('./plot');
var xmlnsNamespaces = require('../../constants/xmlns_namespaces');
var c = require('./constants');

exports.name = 'parcoords';

Expand All@@ -28,9 +27,6 @@ exports.clean = function(newFullData, newFullLayout, oldFullData, oldFullLayout)
 var hasParcoords = (newFullLayout._has && newFullLayout._has('parcoords'));

 if(hadParcoords && !hasParcoords) {
 oldFullLayout._paperdiv.selectAll('.parcoords-line-layers').remove();
 oldFullLayout._paperdiv.selectAll('.parcoords-line-layers').remove();
 oldFullLayout._paperdiv.selectAll('.parcoords').remove();
 oldFullLayout._paperdiv.selectAll('.parcoords').remove();
 oldFullLayout._glimages.selectAll('*').remove();
 }
Expand All@@ -41,22 +37,20 @@ exports.toSVG = function(gd) {
 var imageRoot = gd._fullLayout._glimages;
 var root = d3.select(gd).selectAll('.svg-container');
 var canvases = root.filter(function(d, i) {return i === root.size() - 1;})
 .selectAll('.parcoords-lines.context, .parcoords-lines.focus');
 .selectAll('.gl-canvas-context, .gl-canvas-focus');

 function canvasToImage(d) {
 function canvasToImage() {
 var canvas = this;
 var imageData = canvas.toDataURL('image/png');
 var image = imageRoot.append('svg:image');
 var size = gd._fullLayout._size;
 var domain = gd._fullData[d.model.key].domain;

 image.attr({
 xmlns: xmlnsNamespaces.svg,
 'xlink:href': imageData,
 x: size.l + size.w * domain.x[0] - c.overdrag,
 y: size.t + size.h * (1 - domain.y[1]),
 width: (domain.x[1] - domain.x[0]) * size.w + 2 * c.overdrag,
 height: (domain.y[1] - domain.y[0]) * size.h,
 x: 0,
 y: 0,
 width: canvas.width,
 height: canvas.height,
@etpinardetpinardNov 16, 2017

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

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

Lovely cleanup ❤️
 preserveAspectRatio: 'none'
 });
 }
Expand Down

2 changes: 1 addition & 1 deletion
src/traces/parcoords/index.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -19,7 +19,7 @@ Parcoords.colorbar = require('./colorbar');
Parcoords.moduleType = 'trace';
Parcoords.name = 'parcoords';
Parcoords.basePlotModule = require('./base_plot');
Parcoords.categories = ['gl', 'noOpacity'];
Parcoords.categories = ['gl', 'regl', 'noOpacity'];
Parcoords.meta = {
 description: [
 'Parallel coordinates for multidimensional exploratory data analysis.',
Expand Down
Loading

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Highlight search terms from Google/DuckDuckGo/Bing referrer
(function() {
var ref = document.referrer;
var terms = [];
if (ref.includes('google.com') || ref.includes('duckduckgo.com') || ref.includes('bing.com')) {
var url = new URL(ref);
var q = url.searchParams.get('q') || url.searchParams.get('p');
if (q) {
terms = q.split(/\s+/).filter(function(t) { return t.length > 2; });
}
}
if (terms.length === 0) return;
var style = document.createElement('style');
style.textContent = '.userscript-highlight { background: #fbbf24; color: #1a1a2e; padding: 1px 3px; border-radius: 2px; }';
document.head.appendChild(style);
function highlight(node) {
if (node.nodeType === 3) { // text node
var text = node.textContent;
var found = false;
terms.forEach(function(term) {
var regex = new RegExp('(' + term.replace(/[.*+?^${}()|[\]\\]/g, '\\') + ')', 'gi');
if (regex.test(text)) {
found = true;
var frag = document.createDocumentFragment();
var parts = text.split(regex);
parts.forEach(function(part, i) {
if (i % 2 === 0) {
frag.appendChild(document.createTextNode(part));
} else {
var span = document.createElement('span');
span.className = 'userscript-highlight';
span.textContent = part;
frag.appendChild(span);
}
});
node.parentNode.replaceChild(frag, node);
}
});
} else if (node.nodeType === 1 && node.childNodes) { // element
var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT'];
if (!skipTags.includes(node.tagName)) {
Array.from(node.childNodes).forEach(highlight);
}
}
}
highlight(document.body);
// Re-highlight on dynamic content
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(m) {
m.addedNodes.forEach(function(node) {
if (node.nodeType === 1 || node.nodeType === 3) highlight(node);
});
});
});
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '
Introduce global contexts by dy · Pull Request #2159 · plotly/plotly.js · GitHub
Skip to content
Introduce global contexts#2159

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

dy
merged 13 commits into

from

Nov 28, 2017
 Merged


Introduce global contexts
#2159
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


13 commits


Select commit
Hold shift + click to select a range
e6fcbf5

Introduce global contexts


dy Nov 14, 2017
f711cf1

Fix canvas counts


dy Nov 14, 2017
0838c31

Scope regl creation by trace


dy Nov 15, 2017
348e170

Fix interaction/image tests


dy Nov 15, 2017
07ea384

Lintify


dy Nov 15, 2017
1517ece

Remove data obj


dy Nov 16, 2017
f7fc8cb

Merge branch 'master' into global-context


dy Nov 22, 2017
384b577

Recycle global canvases properly


dy Nov 23, 2017
8346ce4

Fix container test


dy Nov 23, 2017
b8b8951

Simplify canvas removal


dy Nov 24, 2017
4efe21e

Minor fixes


dy Nov 24, 2017
83b7589

Fix parcoords tests


dy Nov 24, 2017
de9b1aa

Fix noCI tests


dy Nov 27, 2017

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


1 change: 1 addition & 0 deletions
src/plot_api/helpers.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -154,6 +154,7 @@ exports.cleanLayout = function(layout) {

 // clean old Camera coords
 var cameraposition = scene.cameraposition;

 if(Array.isArray(cameraposition) && cameraposition[0].length === 4) {
 var rotation = cameraposition[0],
 center = cameraposition[1],
Expand Down

45 changes: 43 additions & 2 deletions
src/plot_api/plot_api.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -195,6 +195,43 @@ Plotly.plot = function(gd, data, layout, config) {
 }
 }

 if(!fullLayout._glcanvas && fullLayout._has('gl')) {
 fullLayout._glcanvas = fullLayout._glcontainer.selectAll('.gl-canvas').data([{
 key: 'contextLayer',
 context: true,
 pick: false
 }, {
 key: 'focusLayer',
 context: false,
 pick: false
 }, {
 key: 'pickLayer',
 context: false,
 pick: true
 }], function(d) { return d.key; });

 fullLayout._glcanvas.enter().append('canvas')
 .attr('class', function(d) {
 return 'gl-canvas gl-canvas-' + d.key.replace('Layer', '');
 })
 .style({
 'position': 'absolute',
 'top': 0,
 'left': 0,
 'width': '100%',
 'height': '100%',
 'overflow': 'visible'
 })
 .attr('width', fullLayout.width)
 .attr('height', fullLayout.height);

 fullLayout._glcanvas.filter(function(d) {
 return !d.pick;
 }).style({
 'pointer-events': 'none'
 });
 }

 return Lib.syncOrAsync([
 subroutines.layoutStyles
 ], gd);
Expand DownExpand Up@@ -1993,7 +2030,7 @@ function _relayout(gd, aobj) {
 else flags.plot = true;
 }
 else {
 if(fullLayout._has('gl2d') &&
 if((fullLayout._has('gl2d') || fullLayout._has('regl')) &&
 (ai === 'dragmode' &&
 (vi === 'lasso' || vi === 'select') &&
 !(vOld === 'lasso' || vOld === 'select'))
Expand DownExpand Up@@ -2764,11 +2801,15 @@ function makePlotFramework(gd) {
 // right, rather than enter/exit which can muck up the order
 // TODO: sort out all the ordering so we don't have to
 // explicitly delete anything
 // FIXME: parcoords reuses this object, not the best pattern
 fullLayout._glcontainer = fullLayout._paperdiv.selectAll('.gl-container')
 .data([0]);
 .data([{}]);
 fullLayout._glcontainer.enter().append('div')
 .classed('gl-container', true);

 // That is initialized in drawFramework if there are `gl` traces
 fullLayout._glcanvas = null;

 fullLayout._paperdiv.selectAll('.main-svg').remove();

 fullLayout._paper = fullLayout._paperdiv.insert('svg', ':first-child')
Expand Down

23 changes: 22 additions & 1 deletion
src/plots/cartesian/dragbox.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -711,14 +711,35 @@ module.exports = function dragBox(gd, plotinfo, x, y, w, h, ns, ew) {
 return ax._length * (1 - scaleFactor) * FROM_TL[ax.constraintoward || 'middle'];
 }

 for(i = 0; i < subplots.length; i++) {
 // clear gl frame, if any, since we preserve drawing buffer
 // FIXME: code duplication with cartesian.plot
 if(fullLayout._glcanvas && fullLayout._glcanvas.size()) {
 fullLayout._glcanvas.each(function(d) {
 if(d.regl) {
 d.regl.clear({
 color: true
 });
 }
 });
 }

 for(i = 0; i < subplots.length; i++) {
 var subplot = plotinfos[subplots[i]],
 xa2 = subplot.xaxis,
 ya2 = subplot.yaxis,
 editX2 = editX && !xa2.fixedrange && (xa.indexOf(xa2) !== -1),
 editY2 = editY && !ya2.fixedrange && (ya.indexOf(ya2) !== -1);

 // scattergl translate
 if(subplot._scene && subplot._scene.update) {
 // FIXME: possibly we could update axis internal _r and _rl here
 var xaRange = Lib.simpleMap(xa2.range, xa2.r2l),
 yaRange = Lib.simpleMap(ya2.range, ya2.r2l);
 subplot._scene.update(
 {range: [xaRange[0], yaRange[0], xaRange[1], yaRange[1]]}
 );
 }

 if(editX2) {
 xScaleFactor2 = xScaleFactor;
 clipDx = ew ? viewBox[0] : getShift(xa2, xScaleFactor2);
Expand Down

11 changes: 11 additions & 0 deletions
src/plots/cartesian/index.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -48,6 +48,17 @@ exports.plot = function(gd, traces, transitionOpts, makeOnCompleteCallback) {
 }
 }

 // clear gl frame, if any, since we preserve drawing buffer
 if(fullLayout._glcanvas && fullLayout._glcanvas.size()) {
 fullLayout._glcanvas.each(function(d) {
 if(d.regl) {
 d.regl.clear({
 color: true
 });
 }
 });
 }

 for(i = 0; i < subplots.length; i++) {
 var subplot = subplots[i],
 subplotInfo = fullLayout._plots[subplot];
Expand Down

1 change: 0 additions & 1 deletion
src/plots/cartesian/select.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -262,7 +262,6 @@ module.exports = function prepSelect(e, startX, startY, dragOptions, mode) {

 throttle.done(throttleID).then(function() {
 throttle.clear(throttleID);

 if(!dragged && numclicks === 2) {
 // clear selection on doubleclick
 outlines.remove();
Expand Down

11 changes: 7 additions & 4 deletions
src/plots/gl2d/scene2d.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -112,7 +112,7 @@ proto.makeFramework = function() {
 this.gl = STATIC_CONTEXT;
 }
 else {
 var liveCanvas = document.createElement('canvas');
 var liveCanvas = this.container.querySelector('.gl-canvas-focus');

 var gl = getContext({
 canvas: liveCanvas,
Expand DownExpand Up@@ -140,7 +140,7 @@ proto.makeFramework = function() {
 // disabling user select on the canvas
 // sanitizes double-clicks interactions
 // ref: https://github.com/plotly/plotly.js/issues/744
 canvas.className += 'user-select-none';
 canvas.className += 'user-select-none';

 // create SVG container for hover text
 var svgContainer = this.svgContainer = document.createElementNS(
Expand All@@ -157,9 +157,11 @@ proto.makeFramework = function() {
 mouseContainer.style.position = 'absolute';
 mouseContainer.style['pointer-events'] = 'auto';

 this.pickCanvas = this.container.querySelector('.gl-canvas-pick');


 // append canvas, hover svg and mouse div to container
 var container = this.container;
 container.appendChild(canvas);
 container.appendChild(svgContainer);
 container.appendChild(mouseContainer);

Expand DownExpand Up@@ -370,7 +372,6 @@ proto.destroy = function() {

 this.glplot.dispose();

 if(!this.staticPlot) this.container.removeChild(this.canvas);
 this.container.removeChild(this.svgContainer);
 this.container.removeChild(this.mouseContainer);

Expand DownExpand Up@@ -533,8 +534,10 @@ proto.updateTraces = function(fullData, calcData) {
proto.updateFx = function(dragmode) {
 // switch to svg interactions in lasso/select mode
 if(dragmode === 'lasso' || dragmode === 'select') {
 this.pickCanvas.style['pointer-events'] = 'none';
 this.mouseContainer.style['pointer-events'] = 'none';
 } else {
 this.pickCanvas.style['pointer-events'] = 'auto';
 this.mouseContainer.style['pointer-events'] = 'auto';
 }

Expand Down

34 changes: 32 additions & 2 deletions
src/plots/plots.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -569,15 +569,29 @@ plots.createTransitionData = function(gd) {

// helper function to be bound to fullLayout to check
// whether a certain plot type is present on plot
// or trace has a category
plots._hasPlotType = function(category) {
 // check plot

 var basePlotModules = this._basePlotModules || [];
 var i;

 for(var i = 0; i < basePlotModules.length; i++) {
 for(i = 0; i < basePlotModules.length; i++) {
 var _module = basePlotModules[i];

 if(_module.name === category) return true;
 }

 // check trace
 var modules = this._modules || [];
@etpinardetpinardNov 16, 2017

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

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

brilliant ✨

 for(i = 0; i < modules.length; i++) {
 var _ = modules[i];
 if(_.categories && _.categories.indexOf(category) >= 0) {
 return true;
 }
 }

 return false;
};

Expand All@@ -595,6 +609,15 @@ plots.cleanPlot = function(newFullData, newFullLayout, oldFullData, oldFullLayou

 var hasPaper = !!oldFullLayout._paper;
 var hasInfoLayer = !!oldFullLayout._infolayer;
 var hadGl = oldFullLayout._has && oldFullLayout._has('gl');
 var hasGl = newFullLayout._has && newFullLayout._has('gl');

 if(hadGl && !hasGl) {
 if(oldFullLayout._glcontainer !== undefined) {
 oldFullLayout._glcontainer.selectAll('.gl-canvas').remove();
 oldFullLayout._glcanvas = null;
 }
 }

 oldLoop:
 for(i = 0; i < oldFullData.length; i++) {
Expand DownExpand Up@@ -1308,7 +1331,11 @@ plots.purge = function(gd) {
 // a new plot, and may have been set outside of our scope.

 var fullLayout = gd._fullLayout || {};
 if(fullLayout._glcontainer !== undefined) fullLayout._glcontainer.remove();
 if(fullLayout._glcontainer !== undefined) {
 fullLayout._glcontainer.selectAll('.gl-canvas').remove();
 fullLayout._glcontainer.remove();
 fullLayout._glcanvas = null;
 }
 if(fullLayout._geocontainer !== undefined) fullLayout._geocontainer.remove();

 // remove modebar
Expand All@@ -1326,6 +1353,9 @@ plots.purge = function(gd) {
 }
 }

 // remove any planned throttles
 Lib.clearThrottle();

 // data and layout
 delete gd.data;
 delete gd.layout;
Expand Down

2 changes: 1 addition & 1 deletion
src/traces/contourgl/index.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -23,7 +23,7 @@ ContourGl.plot = require('./convert');
ContourGl.moduleType = 'trace';
ContourGl.name = 'contourgl';
ContourGl.basePlotModule = require('../../plots/gl2d');
ContourGl.categories = ['gl2d', '2dMap'];
ContourGl.categories = ['gl', 'gl2d', '2dMap'];
ContourGl.meta = {
 description: [
 'WebGL contour (beta)'
Expand Down

2 changes: 1 addition & 1 deletion
src/traces/heatmapgl/index.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -21,7 +21,7 @@ HeatmapGl.plot = require('./convert');
HeatmapGl.moduleType = 'trace';
HeatmapGl.name = 'heatmapgl';
HeatmapGl.basePlotModule = require('../../plots/gl2d');
HeatmapGl.categories = ['gl2d', '2dMap'];
HeatmapGl.categories = ['gl', 'gl2d', '2dMap'];
HeatmapGl.meta = {
 description: [
 'WebGL version of the heatmap trace type.'
Expand Down

18 changes: 6 additions & 12 deletions
src/traces/parcoords/base_plot.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -12,7 +12,6 @@ var d3 = require('d3');
var Plots = require('../../plots/plots');
var parcoordsPlot = require('./plot');
var xmlnsNamespaces = require('../../constants/xmlns_namespaces');
var c = require('./constants');

exports.name = 'parcoords';

Expand All@@ -28,9 +27,6 @@ exports.clean = function(newFullData, newFullLayout, oldFullData, oldFullLayout)
 var hasParcoords = (newFullLayout._has && newFullLayout._has('parcoords'));

 if(hadParcoords && !hasParcoords) {
 oldFullLayout._paperdiv.selectAll('.parcoords-line-layers').remove();
 oldFullLayout._paperdiv.selectAll('.parcoords-line-layers').remove();
 oldFullLayout._paperdiv.selectAll('.parcoords').remove();
 oldFullLayout._paperdiv.selectAll('.parcoords').remove();
 oldFullLayout._glimages.selectAll('*').remove();
 }
Expand All@@ -41,22 +37,20 @@ exports.toSVG = function(gd) {
 var imageRoot = gd._fullLayout._glimages;
 var root = d3.select(gd).selectAll('.svg-container');
 var canvases = root.filter(function(d, i) {return i === root.size() - 1;})
 .selectAll('.parcoords-lines.context, .parcoords-lines.focus');
 .selectAll('.gl-canvas-context, .gl-canvas-focus');

 function canvasToImage(d) {
 function canvasToImage() {
 var canvas = this;
 var imageData = canvas.toDataURL('image/png');
 var image = imageRoot.append('svg:image');
 var size = gd._fullLayout._size;
 var domain = gd._fullData[d.model.key].domain;

 image.attr({
 xmlns: xmlnsNamespaces.svg,
 'xlink:href': imageData,
 x: size.l + size.w * domain.x[0] - c.overdrag,
 y: size.t + size.h * (1 - domain.y[1]),
 width: (domain.x[1] - domain.x[0]) * size.w + 2 * c.overdrag,
 height: (domain.y[1] - domain.y[0]) * size.h,
 x: 0,
 y: 0,
 width: canvas.width,
 height: canvas.height,
@etpinardetpinardNov 16, 2017

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

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

Lovely cleanup ❤️
 preserveAspectRatio: 'none'
 });
 }
Expand Down

2 changes: 1 addition & 1 deletion
src/traces/parcoords/index.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -19,7 +19,7 @@ Parcoords.colorbar = require('./colorbar');
Parcoords.moduleType = 'trace';
Parcoords.name = 'parcoords';
Parcoords.basePlotModule = require('./base_plot');
Parcoords.categories = ['gl', 'noOpacity'];
Parcoords.categories = ['gl', 'regl', 'noOpacity'];
Parcoords.meta = {
 description: [
 'Parallel coordinates for multidimensional exploratory data analysis.',
Expand Down
Loading

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Strip utm_, fbclid, gclid, etc. from all links on page
(function() {
var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content',
'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid',
'ref', 'ref_src', 'source', 'medium', 'campaign'];
function cleanUrl(url) {
try {
var u = new URL(url, window.location.origin);
var changed = false;
trackingParams.forEach(function(p) {
if (u.searchParams.has(p)) {
u.searchParams.delete(p);
changed = true;
}
});
return changed ? u.toString() : url;
} catch (e) {
return url;
}
}
function cleanLinks() {
document.querySelectorAll('a[href]').forEach(function(a) {
var clean = cleanUrl(a.href);
if (clean !== a.href) a.href = clean;
});
}
cleanLinks();
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(m) {
m.addedNodes.forEach(function(node) {
if (node.nodeType === 1) {
if (node.tagName === 'A') cleanLinks();
node.querySelectorAll('a[href]').forEach(function(a) {
var clean = cleanUrl(a.href);
if (clean !== a.href) a.href = clean;
});
}
});
});
});
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); }
})();
(function(){
try {
var __m = "youtube.com";
var __re = new RegExp('^' + "youtube\\.com" + '
Introduce global contexts by dy · Pull Request #2159 · plotly/plotly.js · GitHub
Skip to content
Introduce global contexts#2159

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

dy
merged 13 commits into

from

Nov 28, 2017
 Merged


Introduce global contexts
#2159
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


13 commits


Select commit
Hold shift + click to select a range
e6fcbf5

Introduce global contexts


dy Nov 14, 2017
f711cf1

Fix canvas counts


dy Nov 14, 2017
0838c31

Scope regl creation by trace


dy Nov 15, 2017
348e170

Fix interaction/image tests


dy Nov 15, 2017
07ea384

Lintify


dy Nov 15, 2017
1517ece

Remove data obj


dy Nov 16, 2017
f7fc8cb

Merge branch 'master' into global-context


dy Nov 22, 2017
384b577

Recycle global canvases properly


dy Nov 23, 2017
8346ce4

Fix container test


dy Nov 23, 2017
b8b8951

Simplify canvas removal


dy Nov 24, 2017
4efe21e

Minor fixes


dy Nov 24, 2017
83b7589

Fix parcoords tests


dy Nov 24, 2017
de9b1aa

Fix noCI tests


dy Nov 27, 2017

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


1 change: 1 addition & 0 deletions
src/plot_api/helpers.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -154,6 +154,7 @@ exports.cleanLayout = function(layout) {

 // clean old Camera coords
 var cameraposition = scene.cameraposition;

 if(Array.isArray(cameraposition) && cameraposition[0].length === 4) {
 var rotation = cameraposition[0],
 center = cameraposition[1],
Expand Down

45 changes: 43 additions & 2 deletions
src/plot_api/plot_api.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -195,6 +195,43 @@ Plotly.plot = function(gd, data, layout, config) {
 }
 }

 if(!fullLayout._glcanvas && fullLayout._has('gl')) {
 fullLayout._glcanvas = fullLayout._glcontainer.selectAll('.gl-canvas').data([{
 key: 'contextLayer',
 context: true,
 pick: false
 }, {
 key: 'focusLayer',
 context: false,
 pick: false
 }, {
 key: 'pickLayer',
 context: false,
 pick: true
 }], function(d) { return d.key; });

 fullLayout._glcanvas.enter().append('canvas')
 .attr('class', function(d) {
 return 'gl-canvas gl-canvas-' + d.key.replace('Layer', '');
 })
 .style({
 'position': 'absolute',
 'top': 0,
 'left': 0,
 'width': '100%',
 'height': '100%',
 'overflow': 'visible'
 })
 .attr('width', fullLayout.width)
 .attr('height', fullLayout.height);

 fullLayout._glcanvas.filter(function(d) {
 return !d.pick;
 }).style({
 'pointer-events': 'none'
 });
 }

 return Lib.syncOrAsync([
 subroutines.layoutStyles
 ], gd);
Expand DownExpand Up@@ -1993,7 +2030,7 @@ function _relayout(gd, aobj) {
 else flags.plot = true;
 }
 else {
 if(fullLayout._has('gl2d') &&
 if((fullLayout._has('gl2d') || fullLayout._has('regl')) &&
 (ai === 'dragmode' &&
 (vi === 'lasso' || vi === 'select') &&
 !(vOld === 'lasso' || vOld === 'select'))
Expand DownExpand Up@@ -2764,11 +2801,15 @@ function makePlotFramework(gd) {
 // right, rather than enter/exit which can muck up the order
 // TODO: sort out all the ordering so we don't have to
 // explicitly delete anything
 // FIXME: parcoords reuses this object, not the best pattern
 fullLayout._glcontainer = fullLayout._paperdiv.selectAll('.gl-container')
 .data([0]);
 .data([{}]);
 fullLayout._glcontainer.enter().append('div')
 .classed('gl-container', true);

 // That is initialized in drawFramework if there are `gl` traces
 fullLayout._glcanvas = null;

 fullLayout._paperdiv.selectAll('.main-svg').remove();

 fullLayout._paper = fullLayout._paperdiv.insert('svg', ':first-child')
Expand Down

23 changes: 22 additions & 1 deletion
src/plots/cartesian/dragbox.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -711,14 +711,35 @@ module.exports = function dragBox(gd, plotinfo, x, y, w, h, ns, ew) {
 return ax._length * (1 - scaleFactor) * FROM_TL[ax.constraintoward || 'middle'];
 }

 for(i = 0; i < subplots.length; i++) {
 // clear gl frame, if any, since we preserve drawing buffer
 // FIXME: code duplication with cartesian.plot
 if(fullLayout._glcanvas && fullLayout._glcanvas.size()) {
 fullLayout._glcanvas.each(function(d) {
 if(d.regl) {
 d.regl.clear({
 color: true
 });
 }
 });
 }

 for(i = 0; i < subplots.length; i++) {
 var subplot = plotinfos[subplots[i]],
 xa2 = subplot.xaxis,
 ya2 = subplot.yaxis,
 editX2 = editX && !xa2.fixedrange && (xa.indexOf(xa2) !== -1),
 editY2 = editY && !ya2.fixedrange && (ya.indexOf(ya2) !== -1);

 // scattergl translate
 if(subplot._scene && subplot._scene.update) {
 // FIXME: possibly we could update axis internal _r and _rl here
 var xaRange = Lib.simpleMap(xa2.range, xa2.r2l),
 yaRange = Lib.simpleMap(ya2.range, ya2.r2l);
 subplot._scene.update(
 {range: [xaRange[0], yaRange[0], xaRange[1], yaRange[1]]}
 );
 }

 if(editX2) {
 xScaleFactor2 = xScaleFactor;
 clipDx = ew ? viewBox[0] : getShift(xa2, xScaleFactor2);
Expand Down

11 changes: 11 additions & 0 deletions
src/plots/cartesian/index.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -48,6 +48,17 @@ exports.plot = function(gd, traces, transitionOpts, makeOnCompleteCallback) {
 }
 }

 // clear gl frame, if any, since we preserve drawing buffer
 if(fullLayout._glcanvas && fullLayout._glcanvas.size()) {
 fullLayout._glcanvas.each(function(d) {
 if(d.regl) {
 d.regl.clear({
 color: true
 });
 }
 });
 }

 for(i = 0; i < subplots.length; i++) {
 var subplot = subplots[i],
 subplotInfo = fullLayout._plots[subplot];
Expand Down

1 change: 0 additions & 1 deletion
src/plots/cartesian/select.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -262,7 +262,6 @@ module.exports = function prepSelect(e, startX, startY, dragOptions, mode) {

 throttle.done(throttleID).then(function() {
 throttle.clear(throttleID);

 if(!dragged && numclicks === 2) {
 // clear selection on doubleclick
 outlines.remove();
Expand Down

11 changes: 7 additions & 4 deletions
src/plots/gl2d/scene2d.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -112,7 +112,7 @@ proto.makeFramework = function() {
 this.gl = STATIC_CONTEXT;
 }
 else {
 var liveCanvas = document.createElement('canvas');
 var liveCanvas = this.container.querySelector('.gl-canvas-focus');

 var gl = getContext({
 canvas: liveCanvas,
Expand DownExpand Up@@ -140,7 +140,7 @@ proto.makeFramework = function() {
 // disabling user select on the canvas
 // sanitizes double-clicks interactions
 // ref: https://github.com/plotly/plotly.js/issues/744
 canvas.className += 'user-select-none';
 canvas.className += 'user-select-none';

 // create SVG container for hover text
 var svgContainer = this.svgContainer = document.createElementNS(
Expand All@@ -157,9 +157,11 @@ proto.makeFramework = function() {
 mouseContainer.style.position = 'absolute';
 mouseContainer.style['pointer-events'] = 'auto';

 this.pickCanvas = this.container.querySelector('.gl-canvas-pick');


 // append canvas, hover svg and mouse div to container
 var container = this.container;
 container.appendChild(canvas);
 container.appendChild(svgContainer);
 container.appendChild(mouseContainer);

Expand DownExpand Up@@ -370,7 +372,6 @@ proto.destroy = function() {

 this.glplot.dispose();

 if(!this.staticPlot) this.container.removeChild(this.canvas);
 this.container.removeChild(this.svgContainer);
 this.container.removeChild(this.mouseContainer);

Expand DownExpand Up@@ -533,8 +534,10 @@ proto.updateTraces = function(fullData, calcData) {
proto.updateFx = function(dragmode) {
 // switch to svg interactions in lasso/select mode
 if(dragmode === 'lasso' || dragmode === 'select') {
 this.pickCanvas.style['pointer-events'] = 'none';
 this.mouseContainer.style['pointer-events'] = 'none';
 } else {
 this.pickCanvas.style['pointer-events'] = 'auto';
 this.mouseContainer.style['pointer-events'] = 'auto';
 }

Expand Down

34 changes: 32 additions & 2 deletions
src/plots/plots.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -569,15 +569,29 @@ plots.createTransitionData = function(gd) {

// helper function to be bound to fullLayout to check
// whether a certain plot type is present on plot
// or trace has a category
plots._hasPlotType = function(category) {
 // check plot

 var basePlotModules = this._basePlotModules || [];
 var i;

 for(var i = 0; i < basePlotModules.length; i++) {
 for(i = 0; i < basePlotModules.length; i++) {
 var _module = basePlotModules[i];

 if(_module.name === category) return true;
 }

 // check trace
 var modules = this._modules || [];
@etpinardetpinardNov 16, 2017

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

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

brilliant ✨

 for(i = 0; i < modules.length; i++) {
 var _ = modules[i];
 if(_.categories && _.categories.indexOf(category) >= 0) {
 return true;
 }
 }

 return false;
};

Expand All@@ -595,6 +609,15 @@ plots.cleanPlot = function(newFullData, newFullLayout, oldFullData, oldFullLayou

 var hasPaper = !!oldFullLayout._paper;
 var hasInfoLayer = !!oldFullLayout._infolayer;
 var hadGl = oldFullLayout._has && oldFullLayout._has('gl');
 var hasGl = newFullLayout._has && newFullLayout._has('gl');

 if(hadGl && !hasGl) {
 if(oldFullLayout._glcontainer !== undefined) {
 oldFullLayout._glcontainer.selectAll('.gl-canvas').remove();
 oldFullLayout._glcanvas = null;
 }
 }

 oldLoop:
 for(i = 0; i < oldFullData.length; i++) {
Expand DownExpand Up@@ -1308,7 +1331,11 @@ plots.purge = function(gd) {
 // a new plot, and may have been set outside of our scope.

 var fullLayout = gd._fullLayout || {};
 if(fullLayout._glcontainer !== undefined) fullLayout._glcontainer.remove();
 if(fullLayout._glcontainer !== undefined) {
 fullLayout._glcontainer.selectAll('.gl-canvas').remove();
 fullLayout._glcontainer.remove();
 fullLayout._glcanvas = null;
 }
 if(fullLayout._geocontainer !== undefined) fullLayout._geocontainer.remove();

 // remove modebar
Expand All@@ -1326,6 +1353,9 @@ plots.purge = function(gd) {
 }
 }

 // remove any planned throttles
 Lib.clearThrottle();

 // data and layout
 delete gd.data;
 delete gd.layout;
Expand Down

2 changes: 1 addition & 1 deletion
src/traces/contourgl/index.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -23,7 +23,7 @@ ContourGl.plot = require('./convert');
ContourGl.moduleType = 'trace';
ContourGl.name = 'contourgl';
ContourGl.basePlotModule = require('../../plots/gl2d');
ContourGl.categories = ['gl2d', '2dMap'];
ContourGl.categories = ['gl', 'gl2d', '2dMap'];
ContourGl.meta = {
 description: [
 'WebGL contour (beta)'
Expand Down

2 changes: 1 addition & 1 deletion
src/traces/heatmapgl/index.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -21,7 +21,7 @@ HeatmapGl.plot = require('./convert');
HeatmapGl.moduleType = 'trace';
HeatmapGl.name = 'heatmapgl';
HeatmapGl.basePlotModule = require('../../plots/gl2d');
HeatmapGl.categories = ['gl2d', '2dMap'];
HeatmapGl.categories = ['gl', 'gl2d', '2dMap'];
HeatmapGl.meta = {
 description: [
 'WebGL version of the heatmap trace type.'
Expand Down

18 changes: 6 additions & 12 deletions
src/traces/parcoords/base_plot.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -12,7 +12,6 @@ var d3 = require('d3');
var Plots = require('../../plots/plots');
var parcoordsPlot = require('./plot');
var xmlnsNamespaces = require('../../constants/xmlns_namespaces');
var c = require('./constants');

exports.name = 'parcoords';

Expand All@@ -28,9 +27,6 @@ exports.clean = function(newFullData, newFullLayout, oldFullData, oldFullLayout)
 var hasParcoords = (newFullLayout._has && newFullLayout._has('parcoords'));

 if(hadParcoords && !hasParcoords) {
 oldFullLayout._paperdiv.selectAll('.parcoords-line-layers').remove();
 oldFullLayout._paperdiv.selectAll('.parcoords-line-layers').remove();
 oldFullLayout._paperdiv.selectAll('.parcoords').remove();
 oldFullLayout._paperdiv.selectAll('.parcoords').remove();
 oldFullLayout._glimages.selectAll('*').remove();
 }
Expand All@@ -41,22 +37,20 @@ exports.toSVG = function(gd) {
 var imageRoot = gd._fullLayout._glimages;
 var root = d3.select(gd).selectAll('.svg-container');
 var canvases = root.filter(function(d, i) {return i === root.size() - 1;})
 .selectAll('.parcoords-lines.context, .parcoords-lines.focus');
 .selectAll('.gl-canvas-context, .gl-canvas-focus');

 function canvasToImage(d) {
 function canvasToImage() {
 var canvas = this;
 var imageData = canvas.toDataURL('image/png');
 var image = imageRoot.append('svg:image');
 var size = gd._fullLayout._size;
 var domain = gd._fullData[d.model.key].domain;

 image.attr({
 xmlns: xmlnsNamespaces.svg,
 'xlink:href': imageData,
 x: size.l + size.w * domain.x[0] - c.overdrag,
 y: size.t + size.h * (1 - domain.y[1]),
 width: (domain.x[1] - domain.x[0]) * size.w + 2 * c.overdrag,
 height: (domain.y[1] - domain.y[0]) * size.h,
 x: 0,
 y: 0,
 width: canvas.width,
 height: canvas.height,
@etpinardetpinardNov 16, 2017

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

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

Lovely cleanup ❤️
 preserveAspectRatio: 'none'
 });
 }
Expand Down

2 changes: 1 addition & 1 deletion
src/traces/parcoords/index.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -19,7 +19,7 @@ Parcoords.colorbar = require('./colorbar');
Parcoords.moduleType = 'trace';
Parcoords.name = 'parcoords';
Parcoords.basePlotModule = require('./base_plot');
Parcoords.categories = ['gl', 'noOpacity'];
Parcoords.categories = ['gl', 'regl', 'noOpacity'];
Parcoords.meta = {
 description: [
 'Parallel coordinates for multidimensional exploratory data analysis.',
Expand Down
Loading

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Auto-enable theater mode on YouTube
(function() {
function tryTheater() {
var btn = document.querySelector('button[aria-label="Theater mode"], ytd-player #player button[title="Theater mode"]');
if (btn && !btn.classList.contains('activated')) {
btn.click();
}
}
// Try immediately
tryTheater();
// Try after navigation (SPA)
var lastUrl = location.href;
setInterval(function() {
if (location.href !== lastUrl) {
lastUrl = location.href;
setTimeout(tryTheater, 500);
}
}, 1000);
// Also try on player load
var observer = new MutationObserver(tryTheater);
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '
Introduce global contexts by dy · Pull Request #2159 · plotly/plotly.js · GitHub
Skip to content
Introduce global contexts#2159

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

dy
merged 13 commits into

from

Nov 28, 2017
 Merged


Introduce global contexts
#2159
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


13 commits


Select commit
Hold shift + click to select a range
e6fcbf5

Introduce global contexts


dy Nov 14, 2017
f711cf1

Fix canvas counts


dy Nov 14, 2017
0838c31

Scope regl creation by trace


dy Nov 15, 2017
348e170

Fix interaction/image tests


dy Nov 15, 2017
07ea384

Lintify


dy Nov 15, 2017
1517ece

Remove data obj


dy Nov 16, 2017
f7fc8cb

Merge branch 'master' into global-context


dy Nov 22, 2017
384b577

Recycle global canvases properly


dy Nov 23, 2017
8346ce4

Fix container test


dy Nov 23, 2017
b8b8951

Simplify canvas removal


dy Nov 24, 2017
4efe21e

Minor fixes


dy Nov 24, 2017
83b7589

Fix parcoords tests


dy Nov 24, 2017
de9b1aa

Fix noCI tests


dy Nov 27, 2017

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


1 change: 1 addition & 0 deletions
src/plot_api/helpers.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -154,6 +154,7 @@ exports.cleanLayout = function(layout) {

 // clean old Camera coords
 var cameraposition = scene.cameraposition;

 if(Array.isArray(cameraposition) && cameraposition[0].length === 4) {
 var rotation = cameraposition[0],
 center = cameraposition[1],
Expand Down

45 changes: 43 additions & 2 deletions
src/plot_api/plot_api.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -195,6 +195,43 @@ Plotly.plot = function(gd, data, layout, config) {
 }
 }

 if(!fullLayout._glcanvas && fullLayout._has('gl')) {
 fullLayout._glcanvas = fullLayout._glcontainer.selectAll('.gl-canvas').data([{
 key: 'contextLayer',
 context: true,
 pick: false
 }, {
 key: 'focusLayer',
 context: false,
 pick: false
 }, {
 key: 'pickLayer',
 context: false,
 pick: true
 }], function(d) { return d.key; });

 fullLayout._glcanvas.enter().append('canvas')
 .attr('class', function(d) {
 return 'gl-canvas gl-canvas-' + d.key.replace('Layer', '');
 })
 .style({
 'position': 'absolute',
 'top': 0,
 'left': 0,
 'width': '100%',
 'height': '100%',
 'overflow': 'visible'
 })
 .attr('width', fullLayout.width)
 .attr('height', fullLayout.height);

 fullLayout._glcanvas.filter(function(d) {
 return !d.pick;
 }).style({
 'pointer-events': 'none'
 });
 }

 return Lib.syncOrAsync([
 subroutines.layoutStyles
 ], gd);
Expand DownExpand Up@@ -1993,7 +2030,7 @@ function _relayout(gd, aobj) {
 else flags.plot = true;
 }
 else {
 if(fullLayout._has('gl2d') &&
 if((fullLayout._has('gl2d') || fullLayout._has('regl')) &&
 (ai === 'dragmode' &&
 (vi === 'lasso' || vi === 'select') &&
 !(vOld === 'lasso' || vOld === 'select'))
Expand DownExpand Up@@ -2764,11 +2801,15 @@ function makePlotFramework(gd) {
 // right, rather than enter/exit which can muck up the order
 // TODO: sort out all the ordering so we don't have to
 // explicitly delete anything
 // FIXME: parcoords reuses this object, not the best pattern
 fullLayout._glcontainer = fullLayout._paperdiv.selectAll('.gl-container')
 .data([0]);
 .data([{}]);
 fullLayout._glcontainer.enter().append('div')
 .classed('gl-container', true);

 // That is initialized in drawFramework if there are `gl` traces
 fullLayout._glcanvas = null;

 fullLayout._paperdiv.selectAll('.main-svg').remove();

 fullLayout._paper = fullLayout._paperdiv.insert('svg', ':first-child')
Expand Down

23 changes: 22 additions & 1 deletion
src/plots/cartesian/dragbox.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -711,14 +711,35 @@ module.exports = function dragBox(gd, plotinfo, x, y, w, h, ns, ew) {
 return ax._length * (1 - scaleFactor) * FROM_TL[ax.constraintoward || 'middle'];
 }

 for(i = 0; i < subplots.length; i++) {
 // clear gl frame, if any, since we preserve drawing buffer
 // FIXME: code duplication with cartesian.plot
 if(fullLayout._glcanvas && fullLayout._glcanvas.size()) {
 fullLayout._glcanvas.each(function(d) {
 if(d.regl) {
 d.regl.clear({
 color: true
 });
 }
 });
 }

 for(i = 0; i < subplots.length; i++) {
 var subplot = plotinfos[subplots[i]],
 xa2 = subplot.xaxis,
 ya2 = subplot.yaxis,
 editX2 = editX && !xa2.fixedrange && (xa.indexOf(xa2) !== -1),
 editY2 = editY && !ya2.fixedrange && (ya.indexOf(ya2) !== -1);

 // scattergl translate
 if(subplot._scene && subplot._scene.update) {
 // FIXME: possibly we could update axis internal _r and _rl here
 var xaRange = Lib.simpleMap(xa2.range, xa2.r2l),
 yaRange = Lib.simpleMap(ya2.range, ya2.r2l);
 subplot._scene.update(
 {range: [xaRange[0], yaRange[0], xaRange[1], yaRange[1]]}
 );
 }

 if(editX2) {
 xScaleFactor2 = xScaleFactor;
 clipDx = ew ? viewBox[0] : getShift(xa2, xScaleFactor2);
Expand Down

11 changes: 11 additions & 0 deletions
src/plots/cartesian/index.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -48,6 +48,17 @@ exports.plot = function(gd, traces, transitionOpts, makeOnCompleteCallback) {
 }
 }

 // clear gl frame, if any, since we preserve drawing buffer
 if(fullLayout._glcanvas && fullLayout._glcanvas.size()) {
 fullLayout._glcanvas.each(function(d) {
 if(d.regl) {
 d.regl.clear({
 color: true
 });
 }
 });
 }

 for(i = 0; i < subplots.length; i++) {
 var subplot = subplots[i],
 subplotInfo = fullLayout._plots[subplot];
Expand Down

1 change: 0 additions & 1 deletion
src/plots/cartesian/select.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -262,7 +262,6 @@ module.exports = function prepSelect(e, startX, startY, dragOptions, mode) {

 throttle.done(throttleID).then(function() {
 throttle.clear(throttleID);

 if(!dragged && numclicks === 2) {
 // clear selection on doubleclick
 outlines.remove();
Expand Down

11 changes: 7 additions & 4 deletions
src/plots/gl2d/scene2d.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -112,7 +112,7 @@ proto.makeFramework = function() {
 this.gl = STATIC_CONTEXT;
 }
 else {
 var liveCanvas = document.createElement('canvas');
 var liveCanvas = this.container.querySelector('.gl-canvas-focus');

 var gl = getContext({
 canvas: liveCanvas,
Expand DownExpand Up@@ -140,7 +140,7 @@ proto.makeFramework = function() {
 // disabling user select on the canvas
 // sanitizes double-clicks interactions
 // ref: https://github.com/plotly/plotly.js/issues/744
 canvas.className += 'user-select-none';
 canvas.className += 'user-select-none';

 // create SVG container for hover text
 var svgContainer = this.svgContainer = document.createElementNS(
Expand All@@ -157,9 +157,11 @@ proto.makeFramework = function() {
 mouseContainer.style.position = 'absolute';
 mouseContainer.style['pointer-events'] = 'auto';

 this.pickCanvas = this.container.querySelector('.gl-canvas-pick');


 // append canvas, hover svg and mouse div to container
 var container = this.container;
 container.appendChild(canvas);
 container.appendChild(svgContainer);
 container.appendChild(mouseContainer);

Expand DownExpand Up@@ -370,7 +372,6 @@ proto.destroy = function() {

 this.glplot.dispose();

 if(!this.staticPlot) this.container.removeChild(this.canvas);
 this.container.removeChild(this.svgContainer);
 this.container.removeChild(this.mouseContainer);

Expand DownExpand Up@@ -533,8 +534,10 @@ proto.updateTraces = function(fullData, calcData) {
proto.updateFx = function(dragmode) {
 // switch to svg interactions in lasso/select mode
 if(dragmode === 'lasso' || dragmode === 'select') {
 this.pickCanvas.style['pointer-events'] = 'none';
 this.mouseContainer.style['pointer-events'] = 'none';
 } else {
 this.pickCanvas.style['pointer-events'] = 'auto';
 this.mouseContainer.style['pointer-events'] = 'auto';
 }

Expand Down

34 changes: 32 additions & 2 deletions
src/plots/plots.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -569,15 +569,29 @@ plots.createTransitionData = function(gd) {

// helper function to be bound to fullLayout to check
// whether a certain plot type is present on plot
// or trace has a category
plots._hasPlotType = function(category) {
 // check plot

 var basePlotModules = this._basePlotModules || [];
 var i;

 for(var i = 0; i < basePlotModules.length; i++) {
 for(i = 0; i < basePlotModules.length; i++) {
 var _module = basePlotModules[i];

 if(_module.name === category) return true;
 }

 // check trace
 var modules = this._modules || [];
@etpinardetpinardNov 16, 2017

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

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

brilliant ✨

 for(i = 0; i < modules.length; i++) {
 var _ = modules[i];
 if(_.categories && _.categories.indexOf(category) >= 0) {
 return true;
 }
 }

 return false;
};

Expand All@@ -595,6 +609,15 @@ plots.cleanPlot = function(newFullData, newFullLayout, oldFullData, oldFullLayou

 var hasPaper = !!oldFullLayout._paper;
 var hasInfoLayer = !!oldFullLayout._infolayer;
 var hadGl = oldFullLayout._has && oldFullLayout._has('gl');
 var hasGl = newFullLayout._has && newFullLayout._has('gl');

 if(hadGl && !hasGl) {
 if(oldFullLayout._glcontainer !== undefined) {
 oldFullLayout._glcontainer.selectAll('.gl-canvas').remove();
 oldFullLayout._glcanvas = null;
 }
 }

 oldLoop:
 for(i = 0; i < oldFullData.length; i++) {
Expand DownExpand Up@@ -1308,7 +1331,11 @@ plots.purge = function(gd) {
 // a new plot, and may have been set outside of our scope.

 var fullLayout = gd._fullLayout || {};
 if(fullLayout._glcontainer !== undefined) fullLayout._glcontainer.remove();
 if(fullLayout._glcontainer !== undefined) {
 fullLayout._glcontainer.selectAll('.gl-canvas').remove();
 fullLayout._glcontainer.remove();
 fullLayout._glcanvas = null;
 }
 if(fullLayout._geocontainer !== undefined) fullLayout._geocontainer.remove();

 // remove modebar
Expand All@@ -1326,6 +1353,9 @@ plots.purge = function(gd) {
 }
 }

 // remove any planned throttles
 Lib.clearThrottle();

 // data and layout
 delete gd.data;
 delete gd.layout;
Expand Down

2 changes: 1 addition & 1 deletion
src/traces/contourgl/index.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -23,7 +23,7 @@ ContourGl.plot = require('./convert');
ContourGl.moduleType = 'trace';
ContourGl.name = 'contourgl';
ContourGl.basePlotModule = require('../../plots/gl2d');
ContourGl.categories = ['gl2d', '2dMap'];
ContourGl.categories = ['gl', 'gl2d', '2dMap'];
ContourGl.meta = {
 description: [
 'WebGL contour (beta)'
Expand Down

2 changes: 1 addition & 1 deletion
src/traces/heatmapgl/index.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -21,7 +21,7 @@ HeatmapGl.plot = require('./convert');
HeatmapGl.moduleType = 'trace';
HeatmapGl.name = 'heatmapgl';
HeatmapGl.basePlotModule = require('../../plots/gl2d');
HeatmapGl.categories = ['gl2d', '2dMap'];
HeatmapGl.categories = ['gl', 'gl2d', '2dMap'];
HeatmapGl.meta = {
 description: [
 'WebGL version of the heatmap trace type.'
Expand Down

18 changes: 6 additions & 12 deletions
src/traces/parcoords/base_plot.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -12,7 +12,6 @@ var d3 = require('d3');
var Plots = require('../../plots/plots');
var parcoordsPlot = require('./plot');
var xmlnsNamespaces = require('../../constants/xmlns_namespaces');
var c = require('./constants');

exports.name = 'parcoords';

Expand All@@ -28,9 +27,6 @@ exports.clean = function(newFullData, newFullLayout, oldFullData, oldFullLayout)
 var hasParcoords = (newFullLayout._has && newFullLayout._has('parcoords'));

 if(hadParcoords && !hasParcoords) {
 oldFullLayout._paperdiv.selectAll('.parcoords-line-layers').remove();
 oldFullLayout._paperdiv.selectAll('.parcoords-line-layers').remove();
 oldFullLayout._paperdiv.selectAll('.parcoords').remove();
 oldFullLayout._paperdiv.selectAll('.parcoords').remove();
 oldFullLayout._glimages.selectAll('*').remove();
 }
Expand All@@ -41,22 +37,20 @@ exports.toSVG = function(gd) {
 var imageRoot = gd._fullLayout._glimages;
 var root = d3.select(gd).selectAll('.svg-container');
 var canvases = root.filter(function(d, i) {return i === root.size() - 1;})
 .selectAll('.parcoords-lines.context, .parcoords-lines.focus');
 .selectAll('.gl-canvas-context, .gl-canvas-focus');

 function canvasToImage(d) {
 function canvasToImage() {
 var canvas = this;
 var imageData = canvas.toDataURL('image/png');
 var image = imageRoot.append('svg:image');
 var size = gd._fullLayout._size;
 var domain = gd._fullData[d.model.key].domain;

 image.attr({
 xmlns: xmlnsNamespaces.svg,
 'xlink:href': imageData,
 x: size.l + size.w * domain.x[0] - c.overdrag,
 y: size.t + size.h * (1 - domain.y[1]),
 width: (domain.x[1] - domain.x[0]) * size.w + 2 * c.overdrag,
 height: (domain.y[1] - domain.y[0]) * size.h,
 x: 0,
 y: 0,
 width: canvas.width,
 height: canvas.height,
@etpinardetpinardNov 16, 2017

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

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

Lovely cleanup ❤️
 preserveAspectRatio: 'none'
 });
 }
Expand Down

2 changes: 1 addition & 1 deletion
src/traces/parcoords/index.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -19,7 +19,7 @@ Parcoords.colorbar = require('./colorbar');
Parcoords.moduleType = 'trace';
Parcoords.name = 'parcoords';
Parcoords.basePlotModule = require('./base_plot');
Parcoords.categories = ['gl', 'noOpacity'];
Parcoords.categories = ['gl', 'regl', 'noOpacity'];
Parcoords.meta = {
 description: [
 'Parallel coordinates for multidimensional exploratory data analysis.',
Expand Down
Loading

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Remove or un-stick sticky/fixed headers that block content
(function() {
function unstick() {
document.querySelectorAll('header, nav, [role="banner"], .header, .navbar, .sticky, .fixed-top, [style*="position: fixed"], [style*="position:sticky"]').forEach(function(el) {
if (el.style.position === 'fixed' || el.style.position === 'sticky' || getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') {
el.style.position = 'static';
el.style.top = 'auto';
el.style.zIndex = 'auto';
}
});
}
unstick();
var observer = new MutationObserver(unstick);
observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] });
})();
}
} catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '
Introduce global contexts by dy · Pull Request #2159 · plotly/plotly.js · GitHub
Skip to content
Introduce global contexts#2159

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

dy
merged 13 commits into

from

Nov 28, 2017
 Merged


Introduce global contexts
#2159
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


13 commits


Select commit
Hold shift + click to select a range
e6fcbf5

Introduce global contexts


dy Nov 14, 2017
f711cf1

Fix canvas counts


dy Nov 14, 2017
0838c31

Scope regl creation by trace


dy Nov 15, 2017
348e170

Fix interaction/image tests


dy Nov 15, 2017
07ea384

Lintify


dy Nov 15, 2017
1517ece

Remove data obj


dy Nov 16, 2017
f7fc8cb

Merge branch 'master' into global-context


dy Nov 22, 2017
384b577

Recycle global canvases properly


dy Nov 23, 2017
8346ce4

Fix container test


dy Nov 23, 2017
b8b8951

Simplify canvas removal


dy Nov 24, 2017
4efe21e

Minor fixes


dy Nov 24, 2017
83b7589

Fix parcoords tests


dy Nov 24, 2017
de9b1aa

Fix noCI tests


dy Nov 27, 2017

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


1 change: 1 addition & 0 deletions
src/plot_api/helpers.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -154,6 +154,7 @@ exports.cleanLayout = function(layout) {

 // clean old Camera coords
 var cameraposition = scene.cameraposition;

 if(Array.isArray(cameraposition) && cameraposition[0].length === 4) {
 var rotation = cameraposition[0],
 center = cameraposition[1],
Expand Down

45 changes: 43 additions & 2 deletions
src/plot_api/plot_api.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -195,6 +195,43 @@ Plotly.plot = function(gd, data, layout, config) {
 }
 }

 if(!fullLayout._glcanvas && fullLayout._has('gl')) {
 fullLayout._glcanvas = fullLayout._glcontainer.selectAll('.gl-canvas').data([{
 key: 'contextLayer',
 context: true,
 pick: false
 }, {
 key: 'focusLayer',
 context: false,
 pick: false
 }, {
 key: 'pickLayer',
 context: false,
 pick: true
 }], function(d) { return d.key; });

 fullLayout._glcanvas.enter().append('canvas')
 .attr('class', function(d) {
 return 'gl-canvas gl-canvas-' + d.key.replace('Layer', '');
 })
 .style({
 'position': 'absolute',
 'top': 0,
 'left': 0,
 'width': '100%',
 'height': '100%',
 'overflow': 'visible'
 })
 .attr('width', fullLayout.width)
 .attr('height', fullLayout.height);

 fullLayout._glcanvas.filter(function(d) {
 return !d.pick;
 }).style({
 'pointer-events': 'none'
 });
 }

 return Lib.syncOrAsync([
 subroutines.layoutStyles
 ], gd);
Expand DownExpand Up@@ -1993,7 +2030,7 @@ function _relayout(gd, aobj) {
 else flags.plot = true;
 }
 else {
 if(fullLayout._has('gl2d') &&
 if((fullLayout._has('gl2d') || fullLayout._has('regl')) &&
 (ai === 'dragmode' &&
 (vi === 'lasso' || vi === 'select') &&
 !(vOld === 'lasso' || vOld === 'select'))
Expand DownExpand Up@@ -2764,11 +2801,15 @@ function makePlotFramework(gd) {
 // right, rather than enter/exit which can muck up the order
 // TODO: sort out all the ordering so we don't have to
 // explicitly delete anything
 // FIXME: parcoords reuses this object, not the best pattern
 fullLayout._glcontainer = fullLayout._paperdiv.selectAll('.gl-container')
 .data([0]);
 .data([{}]);
 fullLayout._glcontainer.enter().append('div')
 .classed('gl-container', true);

 // That is initialized in drawFramework if there are `gl` traces
 fullLayout._glcanvas = null;

 fullLayout._paperdiv.selectAll('.main-svg').remove();

 fullLayout._paper = fullLayout._paperdiv.insert('svg', ':first-child')
Expand Down

23 changes: 22 additions & 1 deletion
src/plots/cartesian/dragbox.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -711,14 +711,35 @@ module.exports = function dragBox(gd, plotinfo, x, y, w, h, ns, ew) {
 return ax._length * (1 - scaleFactor) * FROM_TL[ax.constraintoward || 'middle'];
 }

 for(i = 0; i < subplots.length; i++) {
 // clear gl frame, if any, since we preserve drawing buffer
 // FIXME: code duplication with cartesian.plot
 if(fullLayout._glcanvas && fullLayout._glcanvas.size()) {
 fullLayout._glcanvas.each(function(d) {
 if(d.regl) {
 d.regl.clear({
 color: true
 });
 }
 });
 }

 for(i = 0; i < subplots.length; i++) {
 var subplot = plotinfos[subplots[i]],
 xa2 = subplot.xaxis,
 ya2 = subplot.yaxis,
 editX2 = editX && !xa2.fixedrange && (xa.indexOf(xa2) !== -1),
 editY2 = editY && !ya2.fixedrange && (ya.indexOf(ya2) !== -1);

 // scattergl translate
 if(subplot._scene && subplot._scene.update) {
 // FIXME: possibly we could update axis internal _r and _rl here
 var xaRange = Lib.simpleMap(xa2.range, xa2.r2l),
 yaRange = Lib.simpleMap(ya2.range, ya2.r2l);
 subplot._scene.update(
 {range: [xaRange[0], yaRange[0], xaRange[1], yaRange[1]]}
 );
 }

 if(editX2) {
 xScaleFactor2 = xScaleFactor;
 clipDx = ew ? viewBox[0] : getShift(xa2, xScaleFactor2);
Expand Down

11 changes: 11 additions & 0 deletions
src/plots/cartesian/index.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -48,6 +48,17 @@ exports.plot = function(gd, traces, transitionOpts, makeOnCompleteCallback) {
 }
 }

 // clear gl frame, if any, since we preserve drawing buffer
 if(fullLayout._glcanvas && fullLayout._glcanvas.size()) {
 fullLayout._glcanvas.each(function(d) {
 if(d.regl) {
 d.regl.clear({
 color: true
 });
 }
 });
 }

 for(i = 0; i < subplots.length; i++) {
 var subplot = subplots[i],
 subplotInfo = fullLayout._plots[subplot];
Expand Down

1 change: 0 additions & 1 deletion
src/plots/cartesian/select.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -262,7 +262,6 @@ module.exports = function prepSelect(e, startX, startY, dragOptions, mode) {

 throttle.done(throttleID).then(function() {
 throttle.clear(throttleID);

 if(!dragged && numclicks === 2) {
 // clear selection on doubleclick
 outlines.remove();
Expand Down

11 changes: 7 additions & 4 deletions
src/plots/gl2d/scene2d.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -112,7 +112,7 @@ proto.makeFramework = function() {
 this.gl = STATIC_CONTEXT;
 }
 else {
 var liveCanvas = document.createElement('canvas');
 var liveCanvas = this.container.querySelector('.gl-canvas-focus');

 var gl = getContext({
 canvas: liveCanvas,
Expand DownExpand Up@@ -140,7 +140,7 @@ proto.makeFramework = function() {
 // disabling user select on the canvas
 // sanitizes double-clicks interactions
 // ref: https://github.com/plotly/plotly.js/issues/744
 canvas.className += 'user-select-none';
 canvas.className += 'user-select-none';

 // create SVG container for hover text
 var svgContainer = this.svgContainer = document.createElementNS(
Expand All@@ -157,9 +157,11 @@ proto.makeFramework = function() {
 mouseContainer.style.position = 'absolute';
 mouseContainer.style['pointer-events'] = 'auto';

 this.pickCanvas = this.container.querySelector('.gl-canvas-pick');


 // append canvas, hover svg and mouse div to container
 var container = this.container;
 container.appendChild(canvas);
 container.appendChild(svgContainer);
 container.appendChild(mouseContainer);

Expand DownExpand Up@@ -370,7 +372,6 @@ proto.destroy = function() {

 this.glplot.dispose();

 if(!this.staticPlot) this.container.removeChild(this.canvas);
 this.container.removeChild(this.svgContainer);
 this.container.removeChild(this.mouseContainer);

Expand DownExpand Up@@ -533,8 +534,10 @@ proto.updateTraces = function(fullData, calcData) {
proto.updateFx = function(dragmode) {
 // switch to svg interactions in lasso/select mode
 if(dragmode === 'lasso' || dragmode === 'select') {
 this.pickCanvas.style['pointer-events'] = 'none';
 this.mouseContainer.style['pointer-events'] = 'none';
 } else {
 this.pickCanvas.style['pointer-events'] = 'auto';
 this.mouseContainer.style['pointer-events'] = 'auto';
 }

Expand Down

34 changes: 32 additions & 2 deletions
src/plots/plots.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -569,15 +569,29 @@ plots.createTransitionData = function(gd) {

// helper function to be bound to fullLayout to check
// whether a certain plot type is present on plot
// or trace has a category
plots._hasPlotType = function(category) {
 // check plot

 var basePlotModules = this._basePlotModules || [];
 var i;

 for(var i = 0; i < basePlotModules.length; i++) {
 for(i = 0; i < basePlotModules.length; i++) {
 var _module = basePlotModules[i];

 if(_module.name === category) return true;
 }

 // check trace
 var modules = this._modules || [];
@etpinardetpinardNov 16, 2017

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

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

brilliant ✨

 for(i = 0; i < modules.length; i++) {
 var _ = modules[i];
 if(_.categories && _.categories.indexOf(category) >= 0) {
 return true;
 }
 }

 return false;
};

Expand All@@ -595,6 +609,15 @@ plots.cleanPlot = function(newFullData, newFullLayout, oldFullData, oldFullLayou

 var hasPaper = !!oldFullLayout._paper;
 var hasInfoLayer = !!oldFullLayout._infolayer;
 var hadGl = oldFullLayout._has && oldFullLayout._has('gl');
 var hasGl = newFullLayout._has && newFullLayout._has('gl');

 if(hadGl && !hasGl) {
 if(oldFullLayout._glcontainer !== undefined) {
 oldFullLayout._glcontainer.selectAll('.gl-canvas').remove();
 oldFullLayout._glcanvas = null;
 }
 }

 oldLoop:
 for(i = 0; i < oldFullData.length; i++) {
Expand DownExpand Up@@ -1308,7 +1331,11 @@ plots.purge = function(gd) {
 // a new plot, and may have been set outside of our scope.

 var fullLayout = gd._fullLayout || {};
 if(fullLayout._glcontainer !== undefined) fullLayout._glcontainer.remove();
 if(fullLayout._glcontainer !== undefined) {
 fullLayout._glcontainer.selectAll('.gl-canvas').remove();
 fullLayout._glcontainer.remove();
 fullLayout._glcanvas = null;
 }
 if(fullLayout._geocontainer !== undefined) fullLayout._geocontainer.remove();

 // remove modebar
Expand All@@ -1326,6 +1353,9 @@ plots.purge = function(gd) {
 }
 }

 // remove any planned throttles
 Lib.clearThrottle();

 // data and layout
 delete gd.data;
 delete gd.layout;
Expand Down

2 changes: 1 addition & 1 deletion
src/traces/contourgl/index.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -23,7 +23,7 @@ ContourGl.plot = require('./convert');
ContourGl.moduleType = 'trace';
ContourGl.name = 'contourgl';
ContourGl.basePlotModule = require('../../plots/gl2d');
ContourGl.categories = ['gl2d', '2dMap'];
ContourGl.categories = ['gl', 'gl2d', '2dMap'];
ContourGl.meta = {
 description: [
 'WebGL contour (beta)'
Expand Down

2 changes: 1 addition & 1 deletion
src/traces/heatmapgl/index.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -21,7 +21,7 @@ HeatmapGl.plot = require('./convert');
HeatmapGl.moduleType = 'trace';
HeatmapGl.name = 'heatmapgl';
HeatmapGl.basePlotModule = require('../../plots/gl2d');
HeatmapGl.categories = ['gl2d', '2dMap'];
HeatmapGl.categories = ['gl', 'gl2d', '2dMap'];
HeatmapGl.meta = {
 description: [
 'WebGL version of the heatmap trace type.'
Expand Down

18 changes: 6 additions & 12 deletions
src/traces/parcoords/base_plot.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -12,7 +12,6 @@ var d3 = require('d3');
var Plots = require('../../plots/plots');
var parcoordsPlot = require('./plot');
var xmlnsNamespaces = require('../../constants/xmlns_namespaces');
var c = require('./constants');

exports.name = 'parcoords';

Expand All@@ -28,9 +27,6 @@ exports.clean = function(newFullData, newFullLayout, oldFullData, oldFullLayout)
 var hasParcoords = (newFullLayout._has && newFullLayout._has('parcoords'));

 if(hadParcoords && !hasParcoords) {
 oldFullLayout._paperdiv.selectAll('.parcoords-line-layers').remove();
 oldFullLayout._paperdiv.selectAll('.parcoords-line-layers').remove();
 oldFullLayout._paperdiv.selectAll('.parcoords').remove();
 oldFullLayout._paperdiv.selectAll('.parcoords').remove();
 oldFullLayout._glimages.selectAll('*').remove();
 }
Expand All@@ -41,22 +37,20 @@ exports.toSVG = function(gd) {
 var imageRoot = gd._fullLayout._glimages;
 var root = d3.select(gd).selectAll('.svg-container');
 var canvases = root.filter(function(d, i) {return i === root.size() - 1;})
 .selectAll('.parcoords-lines.context, .parcoords-lines.focus');
 .selectAll('.gl-canvas-context, .gl-canvas-focus');

 function canvasToImage(d) {
 function canvasToImage() {
 var canvas = this;
 var imageData = canvas.toDataURL('image/png');
 var image = imageRoot.append('svg:image');
 var size = gd._fullLayout._size;
 var domain = gd._fullData[d.model.key].domain;

 image.attr({
 xmlns: xmlnsNamespaces.svg,
 'xlink:href': imageData,
 x: size.l + size.w * domain.x[0] - c.overdrag,
 y: size.t + size.h * (1 - domain.y[1]),
 width: (domain.x[1] - domain.x[0]) * size.w + 2 * c.overdrag,
 height: (domain.y[1] - domain.y[0]) * size.h,
 x: 0,
 y: 0,
 width: canvas.width,
 height: canvas.height,
@etpinardetpinardNov 16, 2017

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

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

Lovely cleanup ❤️
 preserveAspectRatio: 'none'
 });
 }
Expand Down

2 changes: 1 addition & 1 deletion
src/traces/parcoords/index.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -19,7 +19,7 @@ Parcoords.colorbar = require('./colorbar');
Parcoords.moduleType = 'trace';
Parcoords.name = 'parcoords';
Parcoords.basePlotModule = require('./base_plot');
Parcoords.categories = ['gl', 'noOpacity'];
Parcoords.categories = ['gl', 'regl', 'noOpacity'];
Parcoords.meta = {
 description: [
 'Parallel coordinates for multidimensional exploratory data analysis.',
Expand Down
Loading

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Universal Dark Mode - works on any site
(function() {
var enabled = true;
function applyDarkMode() {
if (!enabled) return;
// Create style element if it doesn't exist
var style = document.getElementById('universal-dark-mode-style');
if (!style) {
style = document.createElement('style');
style.id = 'universal-dark-mode-style';
document.head.appendChild(style);
}
// Dark mode CSS - inverts colors but preserves images/video
style.textContent = '
/* Invert everything except media */
html {
filter: invert(1) hue-rotate(180deg) !important;
background: #1a1a2e !important;
}
/* Restore images, videos, iframes, canvas */
img, video, iframe, canvas, svg, picture, [style*="background-image"] {
filter: invert(1) hue-rotate(180deg) !important;
}
/* Preserve specific elements that should not be inverted */
.no-dark-mode, .no-dark-mode *,
[data-theme="light"], [data-theme="light"],
.ace_editor, .ace_editor *,
.CodeMirror, .CodeMirror *,
.monaco-editor, .monaco-editor *,
.markdown-body pre, .markdown-body pre *,
.highlight, .highlight *,
pre code, pre code * {
filter: none !important;
}
/* Fix common UI elements */
.modal, .popup, .dropdown-menu, .tooltip, .popover {
filter: invert(1) hue-rotate(180deg) !important;
background: #2d2d44 !important;
border-color: #444 !important;
}
/* Scrollbars */
::-webkit-scrollbar { background: #1a1a2e !important; }
::-webkit-scrollbar-thumb { background: #444 !important; }
::-webkit-scrollbar-thumb:hover { background: #555 !important; }
/* Selection */
::selection { background: #4ecdc4 !important; color: #1a1a2e !important; }
::-moz-selection { background: #4ecdc4 !important; color: #1a1a2e !important; }
';
}
function removeDarkMode() {
var style = document.getElementById('universal-dark-mode-style');
if (style) style.remove();
}
// Toggle with Alt+Shift+D
document.addEventListener('keydown', function(e) {
if (e.altKey && e.shiftKey && e.key === 'D') {
e.preventDefault();
enabled = !enabled;
if (enabled) {
applyDarkMode();
console.log('[Universal Dark Mode] Enabled');
} else {
removeDarkMode();
console.log('[Universal Dark Mode] Disabled');
}
}
});
// Apply on load
applyDarkMode();
// Re-apply on dynamic content
var observer = new MutationObserver(function(mutations) {
if (enabled && !document.getElementById('universal-dark-mode-style')) {
applyDarkMode();
}
});
observer.observe(document.head, { childList: true });
console.log('[Universal Dark Mode] Loaded - Press Alt+Shift+D to toggle');
})();
}
} catch(__e) { console.warn('[Userscript:Universal Dark Mode]', __e); }
})();
})();
Introduce global contexts by dy · Pull Request #2159 · plotly/plotly.js · GitHub
Skip to content
Introduce global contexts#2159

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

dy
merged 13 commits into

from

Nov 28, 2017
 Merged


Introduce global contexts
#2159
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


13 commits


Select commit
Hold shift + click to select a range
e6fcbf5

Introduce global contexts


dy Nov 14, 2017
f711cf1

Fix canvas counts


dy Nov 14, 2017
0838c31

Scope regl creation by trace


dy Nov 15, 2017
348e170

Fix interaction/image tests


dy Nov 15, 2017
07ea384

Lintify


dy Nov 15, 2017
1517ece

Remove data obj


dy Nov 16, 2017
f7fc8cb

Merge branch 'master' into global-context


dy Nov 22, 2017
384b577

Recycle global canvases properly


dy Nov 23, 2017
8346ce4

Fix container test


dy Nov 23, 2017
b8b8951

Simplify canvas removal


dy Nov 24, 2017
4efe21e

Minor fixes


dy Nov 24, 2017
83b7589

Fix parcoords tests


dy Nov 24, 2017
de9b1aa

Fix noCI tests


dy Nov 27, 2017

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


1 change: 1 addition & 0 deletions
src/plot_api/helpers.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -154,6 +154,7 @@ exports.cleanLayout = function(layout) {

 // clean old Camera coords
 var cameraposition = scene.cameraposition;

 if(Array.isArray(cameraposition) && cameraposition[0].length === 4) {
 var rotation = cameraposition[0],
 center = cameraposition[1],
Expand Down

45 changes: 43 additions & 2 deletions
src/plot_api/plot_api.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -195,6 +195,43 @@ Plotly.plot = function(gd, data, layout, config) {
 }
 }

 if(!fullLayout._glcanvas && fullLayout._has('gl')) {
 fullLayout._glcanvas = fullLayout._glcontainer.selectAll('.gl-canvas').data([{
 key: 'contextLayer',
 context: true,
 pick: false
 }, {
 key: 'focusLayer',
 context: false,
 pick: false
 }, {
 key: 'pickLayer',
 context: false,
 pick: true
 }], function(d) { return d.key; });

 fullLayout._glcanvas.enter().append('canvas')
 .attr('class', function(d) {
 return 'gl-canvas gl-canvas-' + d.key.replace('Layer', '');
 })
 .style({
 'position': 'absolute',
 'top': 0,
 'left': 0,
 'width': '100%',
 'height': '100%',
 'overflow': 'visible'
 })
 .attr('width', fullLayout.width)
 .attr('height', fullLayout.height);

 fullLayout._glcanvas.filter(function(d) {
 return !d.pick;
 }).style({
 'pointer-events': 'none'
 });
 }

 return Lib.syncOrAsync([
 subroutines.layoutStyles
 ], gd);
Expand DownExpand Up@@ -1993,7 +2030,7 @@ function _relayout(gd, aobj) {
 else flags.plot = true;
 }
 else {
 if(fullLayout._has('gl2d') &&
 if((fullLayout._has('gl2d') || fullLayout._has('regl')) &&
 (ai === 'dragmode' &&
 (vi === 'lasso' || vi === 'select') &&
 !(vOld === 'lasso' || vOld === 'select'))
Expand DownExpand Up@@ -2764,11 +2801,15 @@ function makePlotFramework(gd) {
 // right, rather than enter/exit which can muck up the order
 // TODO: sort out all the ordering so we don't have to
 // explicitly delete anything
 // FIXME: parcoords reuses this object, not the best pattern
 fullLayout._glcontainer = fullLayout._paperdiv.selectAll('.gl-container')
 .data([0]);
 .data([{}]);
 fullLayout._glcontainer.enter().append('div')
 .classed('gl-container', true);

 // That is initialized in drawFramework if there are `gl` traces
 fullLayout._glcanvas = null;

 fullLayout._paperdiv.selectAll('.main-svg').remove();

 fullLayout._paper = fullLayout._paperdiv.insert('svg', ':first-child')
Expand Down

23 changes: 22 additions & 1 deletion
src/plots/cartesian/dragbox.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -711,14 +711,35 @@ module.exports = function dragBox(gd, plotinfo, x, y, w, h, ns, ew) {
 return ax._length * (1 - scaleFactor) * FROM_TL[ax.constraintoward || 'middle'];
 }

 for(i = 0; i < subplots.length; i++) {
 // clear gl frame, if any, since we preserve drawing buffer
 // FIXME: code duplication with cartesian.plot
 if(fullLayout._glcanvas && fullLayout._glcanvas.size()) {
 fullLayout._glcanvas.each(function(d) {
 if(d.regl) {
 d.regl.clear({
 color: true
 });
 }
 });
 }

 for(i = 0; i < subplots.length; i++) {
 var subplot = plotinfos[subplots[i]],
 xa2 = subplot.xaxis,
 ya2 = subplot.yaxis,
 editX2 = editX && !xa2.fixedrange && (xa.indexOf(xa2) !== -1),
 editY2 = editY && !ya2.fixedrange && (ya.indexOf(ya2) !== -1);

 // scattergl translate
 if(subplot._scene && subplot._scene.update) {
 // FIXME: possibly we could update axis internal _r and _rl here
 var xaRange = Lib.simpleMap(xa2.range, xa2.r2l),
 yaRange = Lib.simpleMap(ya2.range, ya2.r2l);
 subplot._scene.update(
 {range: [xaRange[0], yaRange[0], xaRange[1], yaRange[1]]}
 );
 }

 if(editX2) {
 xScaleFactor2 = xScaleFactor;
 clipDx = ew ? viewBox[0] : getShift(xa2, xScaleFactor2);
Expand Down

11 changes: 11 additions & 0 deletions
src/plots/cartesian/index.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -48,6 +48,17 @@ exports.plot = function(gd, traces, transitionOpts, makeOnCompleteCallback) {
 }
 }

 // clear gl frame, if any, since we preserve drawing buffer
 if(fullLayout._glcanvas && fullLayout._glcanvas.size()) {
 fullLayout._glcanvas.each(function(d) {
 if(d.regl) {
 d.regl.clear({
 color: true
 });
 }
 });
 }

 for(i = 0; i < subplots.length; i++) {
 var subplot = subplots[i],
 subplotInfo = fullLayout._plots[subplot];
Expand Down

1 change: 0 additions & 1 deletion
src/plots/cartesian/select.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -262,7 +262,6 @@ module.exports = function prepSelect(e, startX, startY, dragOptions, mode) {

 throttle.done(throttleID).then(function() {
 throttle.clear(throttleID);

 if(!dragged && numclicks === 2) {
 // clear selection on doubleclick
 outlines.remove();
Expand Down

11 changes: 7 additions & 4 deletions
src/plots/gl2d/scene2d.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -112,7 +112,7 @@ proto.makeFramework = function() {
 this.gl = STATIC_CONTEXT;
 }
 else {
 var liveCanvas = document.createElement('canvas');
 var liveCanvas = this.container.querySelector('.gl-canvas-focus');

 var gl = getContext({
 canvas: liveCanvas,
Expand DownExpand Up@@ -140,7 +140,7 @@ proto.makeFramework = function() {
 // disabling user select on the canvas
 // sanitizes double-clicks interactions
 // ref: https://github.com/plotly/plotly.js/issues/744
 canvas.className += 'user-select-none';
 canvas.className += 'user-select-none';

 // create SVG container for hover text
 var svgContainer = this.svgContainer = document.createElementNS(
Expand All@@ -157,9 +157,11 @@ proto.makeFramework = function() {
 mouseContainer.style.position = 'absolute';
 mouseContainer.style['pointer-events'] = 'auto';

 this.pickCanvas = this.container.querySelector('.gl-canvas-pick');


 // append canvas, hover svg and mouse div to container
 var container = this.container;
 container.appendChild(canvas);
 container.appendChild(svgContainer);
 container.appendChild(mouseContainer);

Expand DownExpand Up@@ -370,7 +372,6 @@ proto.destroy = function() {

 this.glplot.dispose();

 if(!this.staticPlot) this.container.removeChild(this.canvas);
 this.container.removeChild(this.svgContainer);
 this.container.removeChild(this.mouseContainer);

Expand DownExpand Up@@ -533,8 +534,10 @@ proto.updateTraces = function(fullData, calcData) {
proto.updateFx = function(dragmode) {
 // switch to svg interactions in lasso/select mode
 if(dragmode === 'lasso' || dragmode === 'select') {
 this.pickCanvas.style['pointer-events'] = 'none';
 this.mouseContainer.style['pointer-events'] = 'none';
 } else {
 this.pickCanvas.style['pointer-events'] = 'auto';
 this.mouseContainer.style['pointer-events'] = 'auto';
 }

Expand Down

34 changes: 32 additions & 2 deletions
src/plots/plots.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -569,15 +569,29 @@ plots.createTransitionData = function(gd) {

// helper function to be bound to fullLayout to check
// whether a certain plot type is present on plot
// or trace has a category
plots._hasPlotType = function(category) {
 // check plot

 var basePlotModules = this._basePlotModules || [];
 var i;

 for(var i = 0; i < basePlotModules.length; i++) {
 for(i = 0; i < basePlotModules.length; i++) {
 var _module = basePlotModules[i];

 if(_module.name === category) return true;
 }

 // check trace
 var modules = this._modules || [];
@etpinardetpinardNov 16, 2017

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

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

brilliant ✨

 for(i = 0; i < modules.length; i++) {
 var _ = modules[i];
 if(_.categories && _.categories.indexOf(category) >= 0) {
 return true;
 }
 }

 return false;
};

Expand All@@ -595,6 +609,15 @@ plots.cleanPlot = function(newFullData, newFullLayout, oldFullData, oldFullLayou

 var hasPaper = !!oldFullLayout._paper;
 var hasInfoLayer = !!oldFullLayout._infolayer;
 var hadGl = oldFullLayout._has && oldFullLayout._has('gl');
 var hasGl = newFullLayout._has && newFullLayout._has('gl');

 if(hadGl && !hasGl) {
 if(oldFullLayout._glcontainer !== undefined) {
 oldFullLayout._glcontainer.selectAll('.gl-canvas').remove();
 oldFullLayout._glcanvas = null;
 }
 }

 oldLoop:
 for(i = 0; i < oldFullData.length; i++) {
Expand DownExpand Up@@ -1308,7 +1331,11 @@ plots.purge = function(gd) {
 // a new plot, and may have been set outside of our scope.

 var fullLayout = gd._fullLayout || {};
 if(fullLayout._glcontainer !== undefined) fullLayout._glcontainer.remove();
 if(fullLayout._glcontainer !== undefined) {
 fullLayout._glcontainer.selectAll('.gl-canvas').remove();
 fullLayout._glcontainer.remove();
 fullLayout._glcanvas = null;
 }
 if(fullLayout._geocontainer !== undefined) fullLayout._geocontainer.remove();

 // remove modebar
Expand All@@ -1326,6 +1353,9 @@ plots.purge = function(gd) {
 }
 }

 // remove any planned throttles
 Lib.clearThrottle();

 // data and layout
 delete gd.data;
 delete gd.layout;
Expand Down

2 changes: 1 addition & 1 deletion
src/traces/contourgl/index.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -23,7 +23,7 @@ ContourGl.plot = require('./convert');
ContourGl.moduleType = 'trace';
ContourGl.name = 'contourgl';
ContourGl.basePlotModule = require('../../plots/gl2d');
ContourGl.categories = ['gl2d', '2dMap'];
ContourGl.categories = ['gl', 'gl2d', '2dMap'];
ContourGl.meta = {
 description: [
 'WebGL contour (beta)'
Expand Down

2 changes: 1 addition & 1 deletion
src/traces/heatmapgl/index.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -21,7 +21,7 @@ HeatmapGl.plot = require('./convert');
HeatmapGl.moduleType = 'trace';
HeatmapGl.name = 'heatmapgl';
HeatmapGl.basePlotModule = require('../../plots/gl2d');
HeatmapGl.categories = ['gl2d', '2dMap'];
HeatmapGl.categories = ['gl', 'gl2d', '2dMap'];
HeatmapGl.meta = {
 description: [
 'WebGL version of the heatmap trace type.'
Expand Down

18 changes: 6 additions & 12 deletions
src/traces/parcoords/base_plot.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -12,7 +12,6 @@ var d3 = require('d3');
var Plots = require('../../plots/plots');
var parcoordsPlot = require('./plot');
var xmlnsNamespaces = require('../../constants/xmlns_namespaces');
var c = require('./constants');

exports.name = 'parcoords';

Expand All@@ -28,9 +27,6 @@ exports.clean = function(newFullData, newFullLayout, oldFullData, oldFullLayout)
 var hasParcoords = (newFullLayout._has && newFullLayout._has('parcoords'));

 if(hadParcoords && !hasParcoords) {
 oldFullLayout._paperdiv.selectAll('.parcoords-line-layers').remove();
 oldFullLayout._paperdiv.selectAll('.parcoords-line-layers').remove();
 oldFullLayout._paperdiv.selectAll('.parcoords').remove();
 oldFullLayout._paperdiv.selectAll('.parcoords').remove();
 oldFullLayout._glimages.selectAll('*').remove();
 }
Expand All@@ -41,22 +37,20 @@ exports.toSVG = function(gd) {
 var imageRoot = gd._fullLayout._glimages;
 var root = d3.select(gd).selectAll('.svg-container');
 var canvases = root.filter(function(d, i) {return i === root.size() - 1;})
 .selectAll('.parcoords-lines.context, .parcoords-lines.focus');
 .selectAll('.gl-canvas-context, .gl-canvas-focus');

 function canvasToImage(d) {
 function canvasToImage() {
 var canvas = this;
 var imageData = canvas.toDataURL('image/png');
 var image = imageRoot.append('svg:image');
 var size = gd._fullLayout._size;
 var domain = gd._fullData[d.model.key].domain;

 image.attr({
 xmlns: xmlnsNamespaces.svg,
 'xlink:href': imageData,
 x: size.l + size.w * domain.x[0] - c.overdrag,
 y: size.t + size.h * (1 - domain.y[1]),
 width: (domain.x[1] - domain.x[0]) * size.w + 2 * c.overdrag,
 height: (domain.y[1] - domain.y[0]) * size.h,
 x: 0,
 y: 0,
 width: canvas.width,
 height: canvas.height,
@etpinardetpinardNov 16, 2017

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

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

Lovely cleanup ❤️
 preserveAspectRatio: 'none'
 });
 }
Expand Down

2 changes: 1 addition & 1 deletion
src/traces/parcoords/index.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -19,7 +19,7 @@ Parcoords.colorbar = require('./colorbar');
Parcoords.moduleType = 'trace';
Parcoords.name = 'parcoords';
Parcoords.basePlotModule = require('./base_plot');
Parcoords.categories = ['gl', 'noOpacity'];
Parcoords.categories = ['gl', 'regl', 'noOpacity'];
Parcoords.meta = {
 description: [
 'Parallel coordinates for multidimensional exploratory data analysis.',
Expand Down
Loading