More two.js adoption

Author: keller-mark

examples-src/App.vue

@@ -79,6 +79,7 @@
       :pMarginLeft="120"
       :pMarginRight="10"
       :pMarginBottom="150"
+      :showDownloadButton="true"
     >
       <Axis
         slot="axisLeft"
@@ -705,6 +706,7 @@
       :pMarginLeft="120"
       :pMarginRight="10"
       :pMarginBottom="180"
+      :showDownloadButton="true"
     >
       <Axis
         slot="axisLeft"

src/components/plots/ScatterPlot.vue

@@ -301,7 +301,7 @@ export default {
             /*
              * Scale up the canvas
              */
-            var canvas;
+            let canvas;
             if(d3Node) {
                 canvas = d3Node;
             } else {

src/components/plots/StackedBarPlot.vue

@@ -58,6 +58,7 @@
 </template>
 
 <script>
+import Two from 'two.js';
 import { scaleBand as d3_scaleBand, scaleLinear as d3_scaleLinear } from 'd3-scale';
 import { select as d3_select } from 'd3-selection';
 import { stack as d3_stack, stackOrderNone as d3_stackOrderNone, stackOffsetNone as d3_stackOffsetNone } from 'd3-shape';
@@ -221,7 +222,7 @@ export default {
             this.highlightX1 = null;
             this.highlightX2 = null;
         },
-        drawPlot() {
+        drawPlot(d3Node) {
             const vm = this;
 
             if(vm._dataContainer.isLoading || vm._xScale.isLoading || vm._yScale.isLoading || vm._cScale.isLoading) {
@@ -277,21 +278,29 @@ export default {
             /*
              * Scale up the canvas
              */
-            const canvas = d3_select(this.plotSelector);
-            const context = canvas.node().getContext('2d');
+
+            let canvas;
+            if(d3Node) {
+                canvas = d3Node;
+            } else {
+                canvas = d3_select(this.plotSelector);
+            }
+
+            const canvasNode = canvas.node();
+
+            const two = new Two({ 
+                width: vm.pWidth, 
+                height: vm.pHeight, 
+                domElement: canvasNode
+            });
 
             const canvasHidden = d3_select(this.hiddenPlotSelector);
             const contextHidden = canvasHidden.node().getContext('2d');
 
-            const ratio = getRetinaRatio(context);
+            const ratio = getRetinaRatio(contextHidden);
             const scaledWidth = vm.pWidth * ratio;
             const scaledHeight = vm.pHeight * ratio;
 
-            canvas
-                .attr("width", scaledWidth)
-                .attr("height", scaledHeight);
-            context.scale(ratio, ratio);
-
             canvasHidden
                 .attr("width", scaledWidth)
                 .attr("height", scaledHeight);
@@ -329,8 +338,9 @@ export default {
                 barMarginX = 0;
             }
 
+            const twoRectArray = [];
+
             series.forEach((layer) => {
-                context.fillStyle = cScale.color(layer["key"]); 
                 layer.forEach((d) => {
                     const col = genColor();
                     colToNode[col] = { "x": d.data[vm.x], "y": d.data[layer["key"]], "c": layer["key"] };
@@ -339,15 +349,31 @@ export default {
                     if(height + y(d[1]) > vm.pHeight) {
                         height = vm.pHeight - y(d[1]);
                     }
-                    context.fillRect(x(d.data[vm.x]) + (barMarginX/2), y(d[1]), barWidth - barMarginX, height);
+
+                    const rect = two.makeRectangle(x(d.data[vm.x]) + (barMarginX/2) + ((barWidth - barMarginX)/2), y(d[1]) + (height/2), barWidth - barMarginX, height);
+                    //console.log(x(d.data[vm.x]) + (barMarginX/2), y(d[1]), barWidth - barMarginX, height);
+                    rect.fill = cScale.color(layer["key"]);
+                    twoRectArray.push(rect);
+
                     contextHidden.fillRect(x(d.data[vm.x]), y(d[1]), barWidth, height);
                 })
             });
+
+            const twoRectGroup = two.makeGroup(twoRectArray);
+            twoRectGroup.linewidth = 0;
+            twoRectGroup.opacity = 1;
+            twoRectGroup.noStroke();
+
+            two.update();
+
+            if(!canvas) {
+                /* Ignore interactivity if no canvas. In this case an SVG was probably passed in */
+                return;
+            }
             
             /*
              * Listen for mouse events
              */
-            const canvasNode = canvas.node();
 
             const getDataFromMouse = (mouseX, mouseY) => {
                 // Get the corresponding pixel color on the hidden canvas

src/components/plots/StratifiedSinaPlot.vue

@@ -89,14 +89,15 @@
 </template>
 
 <script>
+import Two from 'two.js';
 import { scaleLinear as d3_scaleLinear, scaleQuantile as d3_scaleQuantile, scaleBand as d3_scaleBand } from 'd3-scale';
 import { select as d3_select } from 'd3-selection';
 import { mouse as d3_mouse, event as d3_event } from 'd3';
 import debounce from 'lodash/debounce';
 import { min as d3_min, max as d3_max, mean as d3_mean, histogram as d3_histogram } from 'd3-array';
 
 import { TOOLTIP_DEBOUNCE } from './../../constants.js';
-import { getRetinaRatio, seededRandom, getDelaunay } from './../../helpers.js';
+import { seededRandom, getDelaunay } from './../../helpers.js';
 
 
 import AbstractScale from './../../scales/AbstractScale.js';
@@ -317,7 +318,7 @@ export default {
             this.highlightX2 = null;
             this.highlightY1 = null;
         },
-        drawPlot() {
+        drawPlot(d3Node) {
             const vm = this;
 
             if(vm._dataContainer.isLoading || vm._stratificationDataContainer.isLoading || vm._xScale.isLoading || vm._yScale.isLoading || vm._oScale.isLoading) {
@@ -352,17 +353,20 @@ export default {
             /*
              * Scale up the canvas
              */
-            const canvas = d3_select(this.plotSelector);
-            const context = canvas.node().getContext('2d');
+            let canvas;
+            if(d3Node) {
+                canvas = d3Node;
+            } else {
+                canvas = d3_select(this.plotSelector);
+            }
 
-            const ratio = getRetinaRatio(context);
-            const scaledWidth = vm.pWidth * ratio;
-            const scaledHeight = vm.pHeight * ratio;
+            const canvasNode = canvas.node();
 
-            canvas
-                .attr("width", scaledWidth)
-                .attr("height", scaledHeight);
-            context.scale(ratio, ratio);
+            const two = new Two({ 
+                width: vm.pWidth, 
+                height: vm.pHeight, 
+                domElement: canvasNode
+            });
 
             /*
              * Get the random number generator.
@@ -379,18 +383,12 @@ export default {
              * Draw the boxes
              */
 
+            const twoCircleArray = [];
+
             const boxWidth = (barWidth / 2);
             const boxMargin = barWidth / 4;
 
-            if(vm.strokeColor !== undefined) {
-                context.strokeStyle = vm.strokeColor;
-            }
             xScale.domainFiltered.forEach((boxVar) => {
-                if(vm.strokeColor === undefined) {
-                    context.strokeStyle = xScale.color(boxVar);
-                }
-                context.fillStyle = xScale.color(boxVar);
-
                 let boxData = data.filter((dEl) => {
                     let sEl = stratificationData.find((sEl) => sEl[vm.o] === dEl[vm.o]);
                     return (sEl !== undefined && sEl[vm.x] === boxVar);
@@ -433,14 +431,14 @@ export default {
 
                 bins.forEach((binData) => {
                     binData.forEach((d) => {
-                        context.beginPath();
-                        let xVal = innerX(-binData.length)+random()*2*(innerX(binData.length)-innerXZero);
-                        let yVal = y(d[vm.variable]);
-                        context.arc(xVal, yVal, vm.pointSize, 0, 2*Math.PI);
-                        context.stroke();
-                        if(vm.fillPoints) {
-                            context.fill(); 
-                        }
+                        const xVal = innerX(-binData.length)+random()*2*(innerX(binData.length)-innerXZero);
+                        const yVal = y(d[vm.variable]);
+                        
+                        const circle = two.makeCircle(xVal, yVal, vm.pointSize);
+                        circle.stroke = (vm.strokeColor ? vm.strokeColor : xScale.color(boxVar));
+                        circle.fill = xScale.color(boxVar);
+
+                        twoCircleArray.push(circle);
 
                         points.push([xVal, yVal]); // For Delaunay
                         pointsData.push({
@@ -451,14 +449,27 @@ export default {
                     });
                 });
             });
+
+            const twoCircleGroup = two.makeGroup(twoCircleArray);
+            twoCircleGroup.linewidth = 1;
+            twoCircleGroup.opacity = 1;
+
+            if(!vm.fillPoints) {
+                twoCircleGroup.noFill();
+            }
+
+            two.update();
+
+            if(!canvas) {
+                /* Ignore interactivity if no canvas. In this case an SVG was probably passed in */
+                return;
+            }
             
             const delaunay = getDelaunay(points, false);
 
             /*
              * Listen for mouse events
              */
-            const canvasNode = canvas.node();
-
             const getDataFromMouse = (mouseX, mouseY) => {
                 const i = delaunay.find(mouseX, mouseY);
                 return pointsData[i];