-
-
Notifications
You must be signed in to change notification settings - Fork 1.9k
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.
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
Changes from 2 commits
e6fcbf5
f711cf1
0838c31
348e170
07ea384
1517ece
f7fc8cb
384b577
8346ce4
b8b8951
4efe21e
83b7589
de9b1aa
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -42,6 +42,8 @@ var enforceAxisConstraints = axisConstraints.enforce; | |
var cleanAxisConstraints = axisConstraints.clean; | ||
var axisIds = require('../plots/cartesian/axis_ids'); | ||
|
||
var createRegl = require('regl'); | ||
|
||
|
||
/** | ||
* Main plot-creation function | ||
|
@@ -195,6 +197,51 @@ 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 | ||
}]); | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I think you need a key-function here to make sure to not create these canvas nodes on every hard redraw that go through Sometime like: fullLayout._glcanvas = fullLayout._glcontainer.selectAll('.gl-canvas').data([{
/* .. as currently ... */
}], function(d) { return d.key; }); There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. This makes me wonder: we probably don't have sufficient test coverage for Plotly.newPlot(gd, [{
type: 'scattergl',
// ...
}])
.then(function() {
d3.selectAll('canvas').size() // => 3
return Plotly.restyle(gd, 'type', 'scatter')
})
.then(function() {
d3.selectAll('canvas').size() // => 0
}) As restyling a Plotly.newPlot(gd, [{
type: 'parcoords',
// ...
}])
.then(function() {
d3.selectAll('canvas').size() // => 3
return Plotly.deleteTraces(gd, [0])
})
.then(function() {
d3.selectAll('canvas').size() // => 0
}) |
||
|
||
fullLayout._glcanvas.enter().append('canvas') | ||
.each(function(d) { | ||
d.regl = createRegl({ | ||
canvas: this, | ||
attributes: { | ||
antialias: !d.pick, | ||
preserveDrawingBuffer: true | ||
}, | ||
extensions: ['ANGLE_instanced_arrays', 'OES_element_index_uint'], | ||
pixelRatio: gd._context.plotGlPixelRatio || global.devicePixelRatio | ||
}); | ||
}) | ||
.attr('class', function(d) { | ||
return 'gl-canvas gl-canvas-' + d.key.replace('Layer', ''); | ||
}) | ||
.style({ | ||
'position': 'absolute', | ||
'top': 0, | ||
'left': 0, | ||
'width': '100%', | ||
'height': '100%', | ||
'pointer-events': 'none', | ||
'overflow': 'visible' | ||
}) | ||
.attr('width', fullLayout.width) | ||
.attr('height', fullLayout.height); | ||
|
||
fullLayout._glcanvas.exit().remove(); | ||
} | ||
|
||
return Lib.syncOrAsync([ | ||
subroutines.layoutStyles | ||
], gd); | ||
|
@@ -1993,7 +2040,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')) | ||
|
@@ -2754,7 +2801,7 @@ function makePlotFramework(gd) { | |
.classed('plotly', true); | ||
|
||
// Make the svg container | ||
fullLayout._paperdiv = fullLayout._container.selectAll('.svg-container').data([0]); | ||
fullLayout._paperdiv = fullLayout._container.selectAll('.svg-container').data([{}]); | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Why change |
||
fullLayout._paperdiv.enter().append('div') | ||
.classed('svg-container', true) | ||
.style('position', 'relative'); | ||
|
@@ -2765,10 +2812,13 @@ function makePlotFramework(gd) { | |
// TODO: sort out all the ordering so we don't have to | ||
// explicitly delete anything | ||
fullLayout._glcontainer = fullLayout._paperdiv.selectAll('.gl-container') | ||
.data([0]); | ||
.data([{}]); | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. what about this one here? There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. that is the way There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Does it work ok with There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. @etpinard that is the point that parcoords puts |
||
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') | ||
|
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -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 || []; | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe 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; | ||
}; | ||
|
||
|
@@ -1319,6 +1333,9 @@ plots.purge = function(gd) { | |
} | ||
} | ||
|
||
// remove any planned throttles | ||
Lib.clearThrottle(); | ||
|
||
// data and layout | ||
delete gd.data; | ||
delete gd.layout; | ||
|
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -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'; | ||
|
||
|
@@ -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(); | ||
} | ||
|
@@ -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, | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Lovely cleanup ❤️ |
||
preserveAspectRatio: 'none' | ||
}); | ||
} | ||
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Ha.
regl
must be invoking one or many globals that IE9 doesn't support at runtime.As this file here
plot_api.js
is required in all partial bundles (even that gl-less ones), this makes the IE9 test fail.So, I think the best to solve this would be use a
Registry.getComponentMethod
-style pattern so thatregl
is only required in bundles that exposeregl
traces.There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@etpinard do I get it right that we don't have this safe-require pattern yet? What if I just require regl directly when the
regl
trace type is detected?There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
You mean something like:
in
plot_api.js
? That could work, butregl
would still get bundled up in all partial bundles.