Take config.plotGlPixelRatio into account for parcoords trace

Author: jonmmease

src/traces/parcoords/base_plot.js

@@ -39,8 +39,8 @@ exports.toSVG = function(gd) {
             preserveAspectRatio: 'none',
             x: 0,
             y: 0,
-            width: canvas.width,
-            height: canvas.height
+            width: canvas.style.width,
+            height: canvas.style.height
         });
     }
 

src/traces/parcoords/lines.js

@@ -160,17 +160,27 @@ function emptyAttributes(regl) {
     return attributes;
 }
 
-function makeItem(model, leftmost, rightmost, itemNumber, i0, i1, x, y, panelSizeX, panelSizeY, crossfilterDimensionIndex, drwLayer, constraints) {
+function makeItem(
+    model, leftmost, rightmost, itemNumber, i0, i1, x, y, panelSizeX, panelSizeY,
+    crossfilterDimensionIndex, drwLayer, constraints, plotGlPixelRatio
+) {
     var dims = [[], []];
     for(var k = 0; k < 64; k++) {
         dims[0][k] = (k === i0) ? 1 : 0;
         dims[1][k] = (k === i1) ? 1 : 0;
     }
-
-    var overdrag = model.lines.canvasOverdrag;
+    x *= plotGlPixelRatio;
+    y *= plotGlPixelRatio;
+    panelSizeX *= plotGlPixelRatio;
+    panelSizeY *= plotGlPixelRatio;
+    var overdrag = model.lines.canvasOverdrag * plotGlPixelRatio;
     var domain = model.domain;
-    var canvasWidth = model.canvasWidth;
-    var canvasHeight = model.canvasHeight;
+    var canvasWidth = model.canvasWidth * plotGlPixelRatio;
+    var canvasHeight = model.canvasHeight * plotGlPixelRatio;
+    var padL = model.pad.l * plotGlPixelRatio;
+    var padB = model.pad.b * plotGlPixelRatio;
+    var layoutHeight = model.layoutHeight * plotGlPixelRatio;
+    var layoutWidth = model.layoutWidth * plotGlPixelRatio;
 
     var deselectedLinesColor = model.deselectedLines.color;
 
@@ -201,13 +211,13 @@ function makeItem(model, leftmost, rightmost, itemNumber, i0, i1, x, y, panelSiz
                 Math.max(1 / 255, Math.pow(1 / model.lines.color.length, 1 / 3))
         ],
 
-        scissorX: (itemNumber === leftmost ? 0 : x + overdrag) + (model.pad.l - overdrag) + model.layoutWidth * domain.x[0],
+        scissorX: (itemNumber === leftmost ? 0 : x + overdrag) + (padL - overdrag) + layoutWidth * domain.x[0],
         scissorWidth: (itemNumber === rightmost ? canvasWidth - x + overdrag : panelSizeX + 0.5) + (itemNumber === leftmost ? x + overdrag : 0),
-        scissorY: y + model.pad.b + model.layoutHeight * domain.y[0],
+        scissorY: y + padB + layoutHeight * domain.y[0],
         scissorHeight: panelSizeY,
 
-        viewportX: model.pad.l - overdrag + model.layoutWidth * domain.x[0],
-        viewportY: model.pad.b + model.layoutHeight * domain.y[0],
+        viewportX: padL - overdrag + layoutWidth * domain.x[0],
+        viewportY: padB + layoutHeight * domain.y[0],
         viewportWidth: canvasWidth,
         viewportHeight: canvasHeight
     }, constraints);
@@ -454,6 +464,7 @@ module.exports = function(canvasGL, d) {
             var x = p.canvasX;
             var y = p.canvasY;
             var nextX = x + p.panelSizeX;
+            var plotGlPixelRatio = p.plotGlPixelRatio;
             if(setChanged ||
                 !prevAxisOrder[i0] ||
                 prevAxisOrder[i0][0] !== x ||
@@ -467,7 +478,8 @@ module.exports = function(canvasGL, d) {
                     p.panelSizeX, p.panelSizeY,
                     p.dim0.crossfilterDimensionIndex,
                     isContext ? 0 : isPick ? 2 : 1,
-                    constraints
+                    constraints,
+                    plotGlPixelRatio
                 );
 
                 renderState.clearOnly = clearOnly;

src/traces/parcoords/parcoords.js

@@ -369,7 +369,7 @@ function calcTilt(angle, position) {
     };
 }
 
-function updatePanelLayout(yAxis, vm) {
+function updatePanelLayout(yAxis, vm, plotGlPixelRatio) {
     var panels = vm.panels || (vm.panels = []);
     var data = yAxis.data();
     for(var i = 0; i < data.length - 1; i++) {
@@ -383,6 +383,7 @@ function updatePanelLayout(yAxis, vm) {
         p.panelSizeY = vm.model.canvasHeight;
         p.y = 0;
         p.canvasY = 0;
+        p.plotGlPixelRatio = plotGlPixelRatio;
     }
 }
 
@@ -433,6 +434,7 @@ module.exports = function parcoords(gd, cdModule, layout, callbacks) {
     var fullLayout = gd._fullLayout;
     var svg = fullLayout._toppaper;
     var glContainer = fullLayout._glcontainer;
+    var plotGlPixelRatio = gd._context.plotGlPixelRatio;
 
     calcAllTicks(cdModule);
 
@@ -534,7 +536,7 @@ module.exports = function parcoords(gd, cdModule, layout, callbacks) {
         .classed(c.cn.yAxis, true);
 
     parcoordsControlView.each(function(p) {
-        updatePanelLayout(yAxis, p);
+        updatePanelLayout(yAxis, p, plotGlPixelRatio);
     });
 
     glLayers
@@ -573,7 +575,7 @@ module.exports = function parcoords(gd, cdModule, layout, callbacks) {
                     e.canvasX = e.x * e.model.canvasPixelRatio;
                 });
 
-            updatePanelLayout(yAxis, p);
+            updatePanelLayout(yAxis, p, plotGlPixelRatio);
 
             yAxis.filter(function(e) { return Math.abs(d.xIndex - e.xIndex) !== 0; })
                 .attr('transform', function(d) { return strTranslate(d.xScale(d.xIndex), 0); });
@@ -586,7 +588,7 @@ module.exports = function parcoords(gd, cdModule, layout, callbacks) {
             var p = d.parent;
             d.x = d.xScale(d.xIndex);
             d.canvasX = d.x * d.model.canvasPixelRatio;
-            updatePanelLayout(yAxis, p);
+            updatePanelLayout(yAxis, p, plotGlPixelRatio);
             d3.select(this)
                 .attr('transform', function(d) { return strTranslate(d.x, 0); });
             p.contextLayer && p.contextLayer.render(p.panels, false, !someFiltersActive(p));