From 6290a838c6bf73de1ebc9650ca4abe86f5377334 Mon Sep 17 00:00:00 2001 From: Dmitry Date: Sun, 3 Sep 2017 11:27:04 -0400 Subject: [PATCH 1/5] Chill parcoord attribs out --- src/traces/parcoords/attributes.js | 41 +++++++++++------------------- src/traces/parcoords/parcoords.js | 1 - 2 files changed, 15 insertions(+), 27 deletions(-) diff --git a/src/traces/parcoords/attributes.js b/src/traces/parcoords/attributes.js index 83855a2da16..46729697a6e 100644 --- a/src/traces/parcoords/attributes.js +++ b/src/traces/parcoords/attributes.js @@ -18,7 +18,6 @@ var extendDeep = require('../../lib/extend').extendDeep; var extendFlat = require('../../lib/extend').extendFlat; module.exports = { - domain: { x: { valType: 'info_array', @@ -120,36 +119,26 @@ module.exports = { description: 'The dimensions (variables) of the parallel coordinates chart. 2..60 dimensions are supported.' }, - line: extendFlat({}, - + line: extendFlat( // the default autocolorscale isn't quite usable for parcoords due to context ambiguity around 0 (grey, off-white) - // autocolorscale therefore defaults to false too, to avoid being overridden by the blue-white-red autocolor palette + // autocolorscale therefore defaults to false too, to avoid being overridden by the blue-white-red autocolor palette extendDeep( - {}, colorAttributes('line'), { - colorscale: extendDeep( - {}, - colorAttributes('line').colorscale, - {dflt: colorscales.Viridis} - ), - autocolorscale: extendDeep( - {}, - colorAttributes('line').autocolorscale, - { - dflt: false, - description: [ - 'Has an effect only if line.color` is set to a numerical array.', - 'Determines whether the colorscale is a default palette (`autocolorscale: true`)', - 'or the palette determined by `line.colorscale`.', - 'In case `colorscale` is unspecified or `autocolorscale` is true, the default ', - 'palette will be chosen according to whether numbers in the `color` array are', - 'all positive, all negative or mixed.', - 'The default value is false, so that `parcoords` colorscale can default to `Viridis`.' - ].join(' ') - } - ) + colorscale: {dflt: colorscales.Viridis}, + autocolorscale: { + dflt: false, + description: [ + 'Has an effect only if line.color` is set to a numerical array.', + 'Determines whether the colorscale is a default palette (`autocolorscale: true`)', + 'or the palette determined by `line.colorscale`.', + 'In case `colorscale` is unspecified or `autocolorscale` is true, the default ', + 'palette will be chosen according to whether numbers in the `color` array are', + 'all positive, all negative or mixed.', + 'The default value is false, so that `parcoords` colorscale can default to `Viridis`.' + ].join(' ') + } } ), diff --git a/src/traces/parcoords/parcoords.js b/src/traces/parcoords/parcoords.js index 455e76f08f9..cfbc9459f1f 100644 --- a/src/traces/parcoords/parcoords.js +++ b/src/traces/parcoords/parcoords.js @@ -254,7 +254,6 @@ function styleExtentTexts(selection) { } module.exports = function(root, svg, styledData, layout, callbacks) { - var domainBrushing = false; var linePickActive = true; From 17eb2a30cdb9f693c12a929266f2c9bc4716c0d2 Mon Sep 17 00:00:00 2001 From: Dmitry Date: Mon, 4 Sep 2017 20:01:21 -0400 Subject: [PATCH 2/5] Create regl contexts in makeFramework --- src/plot_api/plot_api.js | 43 ++++++++++++++++++++++++++++++++++++++++ 1 file changed, 43 insertions(+) diff --git a/src/plot_api/plot_api.js b/src/plot_api/plot_api.js index a6a4a62f9f1..ae9eeadb666 100644 --- a/src/plot_api/plot_api.js +++ b/src/plot_api/plot_api.js @@ -13,6 +13,7 @@ var d3 = require('d3'); var isNumeric = require('fast-isnumeric'); var hasHover = require('has-hover'); +var createRegl = require('regl'); var Plotly = require('../plotly'); var Lib = require('../lib'); @@ -3031,6 +3032,48 @@ function makePlotFramework(gd) { fullLayout._glcontainer.enter().append('div') .classed('gl-container', true); + // If there are modules with `gl` category, we make sure + // main, secondary and pick regl canvases are created for them + // that is required by parcoords and regl- components + // TODO: make gl- components use that + fullLayout._reglFront; + fullLayout._reglBack; + fullLayout._reglPick; + for(var i = 0; i < fullLayout._modules.length; i++) { + var module = fullLayout._modules[i]; + if(module.categories && module.categories.indexOf('gl') >= 0) { + // FIXME: handpicked from various regl traces + // there might be a better way to handle extensions + var extensions = [ + 'ANGLE_instanced_arrays', + 'OES_element_index_uint' + ]; + fullLayout._reglBack = createRegl({ + container: fullLayout._glcontainer.node(), + attributes: { + preserveDrawingBuffer: true, + antialias: true + }, + extensions: extensions + }); + fullLayout._reglFront = createRegl({ + container: fullLayout._glcontainer.node(), + attributes: { + preserveDrawingBuffer: true, + antialias: true + }, + extensions: extensions + }); + fullLayout._reglPick = createRegl({ + attributes: { + preserveDrawingBuffer: true, + antialias: false + }, + extensions: extensions + }); + } + } + fullLayout._paperdiv.selectAll('.main-svg').remove(); fullLayout._paper = fullLayout._paperdiv.insert('svg', ':first-child') From 408baeebf4b1fe7a8a1908580a039b3b0af53245 Mon Sep 17 00:00:00 2001 From: Dmitry Date: Mon, 4 Sep 2017 20:05:10 -0400 Subject: [PATCH 3/5] Update regl category detection --- src/plot_api/plot_api.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/plot_api/plot_api.js b/src/plot_api/plot_api.js index ae9eeadb666..4a143ab7987 100644 --- a/src/plot_api/plot_api.js +++ b/src/plot_api/plot_api.js @@ -3033,8 +3033,7 @@ function makePlotFramework(gd) { .classed('gl-container', true); // If there are modules with `gl` category, we make sure - // main, secondary and pick regl canvases are created for them - // that is required by parcoords and regl- components + // main, secondary and pick regl-canvases created // TODO: make gl- components use that fullLayout._reglFront; fullLayout._reglBack; From 933a0609b2de4bec92d8bee03f517458e090dcdd Mon Sep 17 00:00:00 2001 From: Dmitry Date: Mon, 4 Sep 2017 21:16:36 -0400 Subject: [PATCH 4/5] Make canvases fit & init regl properly --- src/plot_api/plot_api.js | 119 +++++++++++++++++++++++++-------------- 1 file changed, 78 insertions(+), 41 deletions(-) diff --git a/src/plot_api/plot_api.js b/src/plot_api/plot_api.js index 4a143ab7987..1b625488a77 100644 --- a/src/plot_api/plot_api.js +++ b/src/plot_api/plot_api.js @@ -3022,6 +3022,14 @@ function makePlotFramework(gd) { .classed('svg-container', true) .style('position', 'relative'); + // regl traces stubs get initialized by condition + fullLayout._reglFront; + fullLayout._reglBack; + fullLayout._reglPick; + fullLayout._glFrontCanvas; + fullLayout._glBackCanvas; + fullLayout._glPickCanvas; + // Make the graph containers // start fresh each time we get here, so we know the order comes out // right, rather than enter/exit which can muck up the order @@ -3030,49 +3038,11 @@ function makePlotFramework(gd) { fullLayout._glcontainer = fullLayout._paperdiv.selectAll('.gl-container') .data([0]); fullLayout._glcontainer.enter().append('div') + .each(function() { + initRegl(gd, this); + }) .classed('gl-container', true); - // If there are modules with `gl` category, we make sure - // main, secondary and pick regl-canvases created - // TODO: make gl- components use that - fullLayout._reglFront; - fullLayout._reglBack; - fullLayout._reglPick; - for(var i = 0; i < fullLayout._modules.length; i++) { - var module = fullLayout._modules[i]; - if(module.categories && module.categories.indexOf('gl') >= 0) { - // FIXME: handpicked from various regl traces - // there might be a better way to handle extensions - var extensions = [ - 'ANGLE_instanced_arrays', - 'OES_element_index_uint' - ]; - fullLayout._reglBack = createRegl({ - container: fullLayout._glcontainer.node(), - attributes: { - preserveDrawingBuffer: true, - antialias: true - }, - extensions: extensions - }); - fullLayout._reglFront = createRegl({ - container: fullLayout._glcontainer.node(), - attributes: { - preserveDrawingBuffer: true, - antialias: true - }, - extensions: extensions - }); - fullLayout._reglPick = createRegl({ - attributes: { - preserveDrawingBuffer: true, - antialias: false - }, - extensions: extensions - }); - } - } - fullLayout._paperdiv.selectAll('.main-svg').remove(); fullLayout._paper = fullLayout._paperdiv.insert('svg', ':first-child') @@ -3152,3 +3122,70 @@ function makePlotFramework(gd) { gd.emit('plotly_framework'); } + + +// If there are modules with `regl` category, we make sure +// main, secondary and pick regl-canvases created +// TODO: make gl- components use that +function initRegl(gd, container) { + var fullLayout = gd._fullLayout; + var frontCanvas = fullLayout._glFrontCanvas, + backCanvas = fullLayout._glBackCanvas, + pickCanvas = fullLayout._glPickCanvas; + + // just update size + if(!frontCanvas) { + for(var i = 0; i < fullLayout._modules.length; i++) { + var module = fullLayout._modules[i]; + if(module.categories && module.categories.indexOf('regl') >= 0) { + var extensions = [ + 'ANGLE_instanced_arrays', + 'OES_element_index_uint' + ]; + + // FIXME: is it fine creating elements like that in plotly? + frontCanvas = fullLayout._glFrontCanvas = container.appendChild(document.createElement('canvas')); + backCanvas = fullLayout._glBackCanvas = container.appendChild(document.createElement('canvas')); + pickCanvas = fullLayout._glPickCanvas = document.createElement('canvas'); + + frontCanvas.style.width = backCanvas.style.width = '100%'; + frontCanvas.style.height = backCanvas.style.height = '100%'; + frontCanvas.style.position = backCanvas.style.position = 'absolute'; + frontCanvas.style.top = backCanvas.style.top = '0px'; + frontCanvas.style.left = backCanvas.style.left = '0px'; + frontCanvas.style.pointerEvents = backCanvas.style.pointerEvents = 'none'; + + // FIXME: handle pixelRatios + fullLayout._reglFront = createRegl({ + canvas: frontCanvas, + attributes: { + preserveDrawingBuffer: true, + antialias: true + }, + extensions: extensions + }); + fullLayout._reglBack = createRegl({ + canvas: backCanvas, + attributes: { + preserveDrawingBuffer: true, + antialias: true + }, + extensions: extensions + }); + + fullLayout._reglPick = createRegl({ + canvas: pickCanvas, + attributes: { + preserveDrawingBuffer: true, + antialias: false + }, + extensions: extensions + }); + } + } + } + + // update sizes + pickCanvas.width = backCanvas.width = frontCanvas.width = fullLayout.width; + pickCanvas.height = backCanvas.height = frontCanvas.height = fullLayout.height; +} From 498097bdbf957b6e6a73bb97e85ef878731e5218 Mon Sep 17 00:00:00 2001 From: Dmitry Date: Tue, 5 Sep 2017 14:19:49 -0400 Subject: [PATCH 5/5] Update 3-canvas size separately --- src/plot_api/plot_api.js | 108 ++++++++++++++++++++------------------- 1 file changed, 56 insertions(+), 52 deletions(-) diff --git a/src/plot_api/plot_api.js b/src/plot_api/plot_api.js index 1b625488a77..cad33a21582 100644 --- a/src/plot_api/plot_api.js +++ b/src/plot_api/plot_api.js @@ -3043,6 +3043,15 @@ function makePlotFramework(gd) { }) .classed('gl-container', true); + // update sizes + fullLayout._glPickCanvas.width = + fullLayout._glBackCanvas.width = + fullLayout._glFrontCanvas.width = fullLayout.width; + + fullLayout._glPickCanvas.height = + fullLayout._glBackCanvas.height = + fullLayout._glFrontCanvas.height = fullLayout.height; + fullLayout._paperdiv.selectAll('.main-svg').remove(); fullLayout._paper = fullLayout._paperdiv.insert('svg', ':first-child') @@ -3133,59 +3142,54 @@ function initRegl(gd, container) { backCanvas = fullLayout._glBackCanvas, pickCanvas = fullLayout._glPickCanvas; - // just update size - if(!frontCanvas) { - for(var i = 0; i < fullLayout._modules.length; i++) { - var module = fullLayout._modules[i]; - if(module.categories && module.categories.indexOf('regl') >= 0) { - var extensions = [ - 'ANGLE_instanced_arrays', - 'OES_element_index_uint' - ]; - - // FIXME: is it fine creating elements like that in plotly? - frontCanvas = fullLayout._glFrontCanvas = container.appendChild(document.createElement('canvas')); - backCanvas = fullLayout._glBackCanvas = container.appendChild(document.createElement('canvas')); - pickCanvas = fullLayout._glPickCanvas = document.createElement('canvas'); - - frontCanvas.style.width = backCanvas.style.width = '100%'; - frontCanvas.style.height = backCanvas.style.height = '100%'; - frontCanvas.style.position = backCanvas.style.position = 'absolute'; - frontCanvas.style.top = backCanvas.style.top = '0px'; - frontCanvas.style.left = backCanvas.style.left = '0px'; - frontCanvas.style.pointerEvents = backCanvas.style.pointerEvents = 'none'; - - // FIXME: handle pixelRatios - fullLayout._reglFront = createRegl({ - canvas: frontCanvas, - attributes: { - preserveDrawingBuffer: true, - antialias: true - }, - extensions: extensions - }); - fullLayout._reglBack = createRegl({ - canvas: backCanvas, - attributes: { - preserveDrawingBuffer: true, - antialias: true - }, - extensions: extensions - }); + if(frontCanvas) return; - fullLayout._reglPick = createRegl({ - canvas: pickCanvas, - attributes: { - preserveDrawingBuffer: true, - antialias: false - }, - extensions: extensions - }); - } + for(var i = 0; i < fullLayout._modules.length; i++) { + var module = fullLayout._modules[i]; + if(module.categories && module.categories.indexOf('regl') >= 0) { + var extensions = [ + 'ANGLE_instanced_arrays', + 'OES_element_index_uint' + ]; + + // FIXME: is it fine creating elements like that in plotly? + frontCanvas = fullLayout._glFrontCanvas = container.appendChild(document.createElement('canvas')); + backCanvas = fullLayout._glBackCanvas = container.appendChild(document.createElement('canvas')); + pickCanvas = fullLayout._glPickCanvas = document.createElement('canvas'); + + frontCanvas.style.width = backCanvas.style.width = '100%'; + frontCanvas.style.height = backCanvas.style.height = '100%'; + frontCanvas.style.position = backCanvas.style.position = 'absolute'; + frontCanvas.style.top = backCanvas.style.top = '0px'; + frontCanvas.style.left = backCanvas.style.left = '0px'; + frontCanvas.style.pointerEvents = backCanvas.style.pointerEvents = 'none'; + + // FIXME: handle pixelRatios + fullLayout._reglFront = createRegl({ + canvas: frontCanvas, + attributes: { + preserveDrawingBuffer: true, + antialias: true + }, + extensions: extensions + }); + fullLayout._reglBack = createRegl({ + canvas: backCanvas, + attributes: { + preserveDrawingBuffer: true, + antialias: true + }, + extensions: extensions + }); + + fullLayout._reglPick = createRegl({ + canvas: pickCanvas, + attributes: { + preserveDrawingBuffer: true, + antialias: false + }, + extensions: extensions + }); } } - - // update sizes - pickCanvas.width = backCanvas.width = frontCanvas.width = fullLayout.width; - pickCanvas.height = backCanvas.height = frontCanvas.height = fullLayout.height; }