From d88defcc6560043c2a202ab7c52fe90a10413341 Mon Sep 17 00:00:00 2001
From: Jeff Avallone <jeff.avallone@gmail.com>
Date: Mon, 28 May 2018 12:47:49 -0400
Subject: [PATCH] Moving logic to generate SVG and PNG blobs to SVG/Image

This is to avoid reaching into the Image component to access the SVG ref
---
 src/components/App/index.js | 27 ++++++---------------------
 src/components/SVG/Image.js | 23 +++++++++++++++++++++++
 2 files changed, 29 insertions(+), 21 deletions(-)

diff --git a/src/components/App/index.js b/src/components/App/index.js
index 3ae29d0..88de33c 100644
--- a/src/components/App/index.js
+++ b/src/components/App/index.js
@@ -29,11 +29,10 @@ class App extends React.PureComponent {
     window.removeEventListener('hashchange', this.handleHashChange);
   }
 
-  setSvgUrl(element) {
+  async setSvgUrl() {
     try {
       const type = 'image/svg+xml';
-      const markup = element.outerHTML;
-      const blob = new Blob([markup], { type });
+      const blob = await this.image.current.svgUrl(type);
 
       this.setState({
         svgUrl: {
@@ -49,24 +48,10 @@ class App extends React.PureComponent {
     }
   }
 
-  async setPngUrl(element) {
+  async setPngUrl() {
     try {
       const type = 'image/png';
-      const markup = element.outerHTML;
-      const canvas = document.createElement('canvas');
-      const context = canvas.getContext('2d');
-      const loader = new Image();
-
-      loader.width = canvas.width = Number(element.getAttribute('width')) * 2;
-      loader.height = canvas.height = Number(element.getAttribute('height')) * 2;
-
-      await new Promise(resolve => {
-        loader.onload = resolve;
-        loader.src = 'data:image/svg+xml,' + encodeURIComponent(markup);
-      });
-
-      context.drawImage(loader, 0, 0, loader.width, loader.height);
-      const blob = await new Promise(resolve => canvas.toBlob(resolve, type));
+      const blob = await this.image.current.pngUrl(type);
 
       this.setState({
         pngUrl: {
@@ -119,8 +104,8 @@ class App extends React.PureComponent {
       expr
     }, async () => {
       await this.image.current.doReflow();
-      this.setSvgUrl(this.image.current.svg.current);
-      this.setPngUrl(this.image.current.svg.current);
+      this.setSvgUrl();
+      this.setPngUrl();
     });
   }
 
diff --git a/src/components/SVG/Image.js b/src/components/SVG/Image.js
index c13ee57..8119c5b 100644
--- a/src/components/SVG/Image.js
+++ b/src/components/SVG/Image.js
@@ -35,6 +35,29 @@ class Image extends React.PureComponent {
 
   children = [React.createRef()]
 
+  async svgUrl(type) {
+    const markup = this.svg.current.outerHTML;
+    return new Blob([markup], { type });
+  }
+
+  async pngUrl(type) {
+    const markup = this.svg.current.outerHTML;
+    const canvas = document.createElement('canvas');
+    const context = canvas.getContext('2d');
+    const loader = new window.Image(); // Using window.Image to avoid name conflict :(
+
+    loader.width = canvas.width = Number(this.svg.current.getAttribute('width')) * 2;
+    loader.height = canvas.height = Number(this.svg.current.getAttribute('height')) * 2;
+
+    await new Promise(resolve => {
+      loader.onload = resolve;
+      loader.src = 'data:image/svg+xml,' + encodeURIComponent(markup);
+    });
+
+    context.drawImage(loader, 0, 0, loader.width, loader.height);
+    return new Promise(resolve => canvas.toBlob(resolve, type));
+  }
+
   reflow() {
     const { padding } = this.props;
     const box = this.children[0].current.getBBox();