Render to canvas and svg using two.js, then download to svg. Working ScatterPlot

Author: keller-mark

package.json

@@ -19,7 +19,8 @@
  "d3-dispatch-nosplit": "^2.0.1",
  "lodash": "^4.17.11",
  "save-svg-as-png": "^1.4.6",
- "simple-statistics": "^6.1.1"
+ "simple-statistics": "^6.1.1",
+ "two.js": "^0.7.0-beta.3"
  },
  "devDependencies": {
  "@vue/cli-plugin-babel": "^3.0.0-beta.6",

src/components/PlotContainer.vue

@@ -1,6 +1,7 @@
 <script>
 import { getRetinaRatio } from './../helpers.js';
 import { DOWNLOAD_PATH } from './../icons.js';
+import { create as d3_create } from 'd3';
 
 
 /**
@@ -28,22 +29,29 @@ const addProp = function(slotArray, newProps) {
 }
 
 /**
- * Given a canvas context, x and y offsets, and an image URI, render the image to the context.
+ * Given an SVG DOM node, return the SVG contents as a data URI that can be saved to a file.
  * @private
- * @param {Context} ctx The canvas context.
- * @param {string} uri The image data URI.
- * @param {int} x The x offset.
- * @param {int} y The y offset.
+ * @param {any} svg The SVG node.
+ * @returns {string}
  */
-const renderToContext = function(ctx, uri, x, y, width, height) {
- return new Promise((resolve, reject) => {
- var img = new Image;
- img.onload = () => {
- ctx.drawImage(img, x, y, width, height);
- resolve();
- };
- img.src = uri;
- });
+const svgToUri = function(svg) {
+ // Reference: https://stackoverflow.com/a/23218877
+ const serializer = new XMLSerializer();
+ var source = serializer.serializeToString(svg);
+
+ // Add namespace.
+ if(!source.match(/^<svg[^>]+xmlns="http\:\/\/www\.w3\.org\/2000\/svg"/)){
+ source = source.replace(/^<svg/, '<svg xmlns="http://www.w3.org/2000/svg"');
+ }
+ if(!source.match(/^<svg[^>]+"http\:\/\/www\.w3\.org\/1999\/xlink"/)){
+ source = source.replace(/^<svg/, '<svg xmlns:xlink="http://www.w3.org/1999/xlink"');
+ }
+
+ // Add xml declaration.
+ source = '<?xml version="1.0" standalone="no"?>\r\n' + source;
+
+ // Convert svg source to URI.
+ return "data:image/svg+xml;charset=utf-8," + encodeURIComponent(source);
 };
 
 
@@ -209,95 +217,95 @@ export default {
  }
  },
  methods: {
- renderToContext(ctx, x, y, uri) {
- var img = new Image;
- img.onload = () => {
- ctx.drawImage(img, x, y); // Or at whatever offset you like
- };
- img.src = uri;
- },
  downloadViaButton() {
- this.downloadWithoutAxisBrushing()
- .then((uri) => {
- const downloadAnchorNode = document.createElement('a');
- downloadAnchorNode.setAttribute("href", uri);
- downloadAnchorNode.setAttribute("download", this.downloadName + ".png");
- document.body.appendChild(downloadAnchorNode); // required for firefox
- downloadAnchorNode.click();
- downloadAnchorNode.remove();
- });
- },
- downloadWithoutAxisBrushing() {
- let axisTopDisableBrushing = this.$slots.axisTop.forEach((vnode) => { vnode.componentInstance.preDownload(); });
- let axisLeftDisableBrushing = this.$slots.axisLeft.forEach((vnode) => { vnode.componentInstance.preDownload(); });
- let axisRightDisableBrushing = this.$slots.axisRight.forEach((vnode) => { vnode.componentInstance.preDownload(); });
- let axisBottomDisableBrushing = this.$slots.axisBottom.forEach((vnode) => { vnode.componentInstance.preDownload(); });
-
- return new Promise((resolve, reject) => {
- Promise.all([axisTopDisableBrushing, axisLeftDisableBrushing, axisRightDisableBrushing, axisBottomDisableBrushing]).then(() => {
- this.download().then((uri) => {
- resolve(uri);
- this.$slots.axisTop.forEach((vnode) => { vnode.componentInstance.postDownload(); });
- this.$slots.axisLeft.forEach((vnode) => { vnode.componentInstance.postDownload(); });
- this.$slots.axisRight.forEach((vnode) => { vnode.componentInstance.postDownload(); });
- this.$slots.axisBottom.forEach((vnode) => { vnode.componentInstance.postDownload(); });
- });
- });
- });
+ const uri = this.download()
+ const downloadAnchorNode = document.createElement('a');
+ downloadAnchorNode.setAttribute("href", uri);
+ downloadAnchorNode.setAttribute("download", this.downloadName + ".svg");
+ document.body.appendChild(downloadAnchorNode); // required for firefox
+ downloadAnchorNode.click();
+ downloadAnchorNode.remove();
  },
  download() {
- const canvas = document.createElement('canvas');
- const ctx = canvas.getContext('2d');
+ const svg = d3_create("svg")
+ .attr("width", this.fullWidth)
+ .attr("height", this.fullHeight);
+ 
+ const defs = svg
+ .append("defs");
  
- const ratio = getRetinaRatio(ctx);
- const scaledWidth = this.fullWidth * ratio;
- const scaledHeight = this.fullHeight * ratio;
-
- canvas.width = scaledWidth;
- canvas.height = scaledHeight;
- ctx.scale(ratio, ratio);
-
  const renderAxisToContext = (axisType) => {
  if(this.$slots[axisType].length > 0) {
- return this.$slots[axisType][0].componentInstance.downloadAxis()
- .then((uri) => {
- const x = this.$slots[axisType][0].componentInstance.computedLeft;
- const y = this.$slots[axisType][0].componentInstance.computedTop;
- const width = this.$slots[axisType][0].componentInstance.computedWidth;
- const height = this.$slots[axisType][0].componentInstance.computedHeight;
- return renderToContext(ctx, uri, x, y, width, height);
- });
+ const x = this.$slots[axisType][0].componentInstance.computedLeft;
+ const y = this.$slots[axisType][0].componentInstance.computedTop;
+ const width = this.$slots[axisType][0].componentInstance.computedWidth;
+ const height = this.$slots[axisType][0].componentInstance.computedHeight;
+
+ defs
+ .append("clipPath")
+ .attr("id", `cp-${axisType}`)
+ .append("rect")
+ .attr("width", width)
+ .attr("height", height);
+
+ const axisSvg = d3_create("svg")
+ .attr("width", width)
+ .attr("height", height);
+
+ this.$slots[axisType][0].componentInstance.drawAxis(axisSvg, true);
+ this.$slots[axisType][0].componentInstance.drawAxis();
+
+ const axisG = svg
+ .append("g")
+ .attr("class", `download-g-${axisType}`)
+ .attr("width", width)
+ .attr("height", height)
+ .attr("transform", `translate(${x},${y})`)
+ .attr("clip-path", `url(#cp-${axisType})`);
+ 
+ axisG.html(axisSvg.node().innerHTML);
  }
- return Promise.resolve();
  };
 
  const renderPlotToContext = () => {
  if(this.$slots.plot.length > 0) {
- return this.$slots.plot[0].componentInstance.downloadPlot()
- .then((uri) => {
- const x = this.pMarginLeft;
- const y = this.pMarginTop;
- const width = this.pWidth;
- const height = this.pHeight;
- return renderToContext(ctx, uri, x, y, width, height);
- });
+ const x = this.pMarginLeft;
+ const y = this.pMarginTop;
+ const width = this.pWidth;
+ const height = this.pHeight;
+
+ defs
+ .append("clipPath")
+ .attr("id", `cp-plot`)
+ .append("rect")
+ .attr("width", width)
+ .attr("height", height);
+
+ const plotSvg = d3_create("svg")
+ .attr("width", width)
+ .attr("height", height);
+ 
+ this.$slots.plot[0].componentInstance.drawPlot(plotSvg);
+ this.$slots.plot[0].componentInstance.drawPlot();
+
+ const plotG = svg
+ .append("g")
+ .attr("class", `download-g-plot`)
+ .attr("width", width)
+ .attr("height", height)
+ .attr("transform", `translate(${x},${y})`)
+ .attr("clip-path", `url(#cp-plot)`);
+ plotG.html(plotSvg.node().innerHTML);
  }
- return Promise.resolve();
  };
  
- const renderPromises = [];
- renderPromises.push(renderAxisToContext("axisTop"));
- renderPromises.push(renderAxisToContext("axisLeft"));
- renderPromises.push(renderPlotToContext());
- renderPromises.push(renderAxisToContext("axisRight"));
- renderPromises.push(renderAxisToContext("axisBottom"));
+ renderAxisToContext("axisTop");
+ renderAxisToContext("axisLeft");
+ renderPlotToContext();
+ renderAxisToContext("axisRight");
+ renderAxisToContext("axisBottom");
 
- return new Promise((resolve, reject) => {
- Promise.all(renderPromises).then(() => {
- const uri = canvas.toDataURL("image/png");
- resolve(uri);
- });
- });
+ return svgToUri(svg.node());
  }
  }
 }

src/components/axes/Axis.vue

@@ -17,8 +17,6 @@ import { axisTop as d3_axisTop, axisLeft as d3_axisLeft, axisRight as d3_axisRig
 import { brushX as d3_brushX, brushY as d3_brushY } from 'd3-brush';
 import { event as d3_event } from 'd3';
 
-import { svgAsPngUri } from 'save-svg-as-png';
-
 import AbstractScale from './../../scales/AbstractScale.js';
 import HistoryEvent from './../../history/HistoryEvent.js';
 import HistoryStack from './../../history/HistoryStack.js';
@@ -235,13 +233,7 @@ export default {
  removeAxis() {
  d3_select(this.axisSelector).select("svg").remove();
  },
- preDownload() {
- this.drawAxis(true);
- },
- postDownload() {
- this.drawAxis();
- },
- drawAxis(brushingOverride) {
+ drawAxis(d3Node, brushingOverride) {
  const vm = this;
  vm.removeAxis();
 
@@ -323,11 +315,16 @@ export default {
  /*
  * Create the SVG elements
  */
-
- const container = d3_select(vm.axisSelector)
- .append("svg")
- .attr("width", vm.computedWidth)
- .attr("height", vm.computedHeight);
+ 
+ var container;
+ if(d3Node) {
+ container = d3Node;
+ } else {
+ container = d3_select(vm.axisSelector)
+ .append("svg")
+ .attr("width", vm.computedWidth)
+ .attr("height", vm.computedHeight);
+ }
  
  const containerZoomedIn = container.append("g")
  .attr("class", "axis-zoomed-in")
@@ -377,7 +374,12 @@ export default {
  }
 
  const tickTransformFunction = (d, i, v) => {
- let tickBbox = v[i].getBBox();
+ let tickBbox;
+ try {
+ tickBbox = v[i].getBBox();
+ } catch(e) {
+ tickBbox = { height: 0 };
+ }
  let tickRotateX = 0;
  let tickRotateY = 0;
  if(vm._side === SIDES.TOP) {
@@ -415,7 +417,15 @@ export default {
  
  
  // Get the width/height of the zoomed-in axis, before removing the text
- const axisBboxZoomedIn = container.select(".axis-zoomed-in").node().getBBox();
+ let axisBboxZoomedIn;
+ try {
+ axisBboxZoomedIn = container.select(".axis-zoomed-in").node().getBBox();
+ } catch(e) {
+ axisBboxZoomedIn = {
+ height: 0,
+ width: 0,
+ };
+ }
  
  if(varScale instanceof CategoricalScale) {
  if(vm._orientation === ORIENTATIONS.HORIZONTAL) {
@@ -467,14 +477,26 @@ export default {
  .tickSizeOuter(tickSizeOuter)
  .tickFormat(tickFormatFunction2)
  );
- const textBboxZoomedOut = ticksZoomedOut.select("text").node().getBBox();
+ let textBboxZoomedOut;
+ try {
+ textBboxZoomedOut = ticksZoomedOut.select("text").node().getBBox();
+ } catch(e) {
+ textBboxZoomedOut = { height: 0 };
+ }
 
  ticksZoomedOut.selectAll("text")
  .style("text-anchor", tickTextAnchor)
  .attr("transform", tickTransformFunction);
  
  // Get the width/height of the zoomed-out axis, before removing the text
- axisBboxZoomedOut = container.select(".axis-zoomed-out").node().getBBox();
+ try {
+ axisBboxZoomedOut = container.select(".axis-zoomed-out").node().getBBox();
+ } catch(e) {
+ axisBboxZoomedOut = {
+ height: 0,
+ width: 0,
+ };
+ }
  
  if(varScale instanceof CategoricalScale) {
  const barWidth = vm.pWidth / varScaleDomain.length;
@@ -722,7 +744,25 @@ export default {
  .style("font-family", "Avenir")
  .text(varScale.name);
 
- const labelTextBbox = labelText.node().getBBox();
+ let labelTextBbox;
+ try {
+ labelTextBbox = labelText.node().getBBox();
+ if(d3Node) {
+ throw new Error("no bbox, use catch block");
+ }
+ } catch(e) {
+ if(vm._orientation === ORIENTATIONS.HORIZONTAL) {
+ labelTextBbox = {
+ height: vm.computedHeight / 2,
+ width: 0
+ };
+ } else if(vm._orientation === ORIENTATIONS.VERTICAL) {
+ labelTextBbox = {
+ height: vm.computedWidth / 2,
+ width: 0
+ };
+ }
+ }
 
  if(disableBrushing) {
  axisBboxZoomedOut = { width: 0, height: 0 };
@@ -756,15 +796,6 @@ export default {
  labelText.attr("fill-opacity", 0);
  }
  
- },
- downloadAxis() {
- const node = d3_select(this.axisSelector).select("svg").node();
- return new Promise((resolve, reject) => {
- svgAsPngUri(node, {}, (uri) => {
- resolve(uri);
- });
- });
- 
  }
  }
 }

src/components/axes/DendrogramAxis.vue

@@ -202,12 +202,6 @@ export default {
  removeAxis() {
  d3_select(this.axisSelector).select("svg").remove();
  },
- preDownload() {
- // noop
- },
- postDownload() {
- // noop
- },
  drawAxis() {
  const vm = this;
  vm.removeAxis();