From ed04f4652c2828e5dce7dc6b6997bd67ee51ff3b Mon Sep 17 00:00:00 2001
From: DD <liudi08@gmail.com>
Date: Wed, 24 Jan 2018 19:40:19 -0500
Subject: [PATCH] Fix point rotation point is relative to, which is not viewBox
 upper left

---
 src/containers/paper-canvas.jsx | 20 +++++++++++++++++++-
 1 file changed, 19 insertions(+), 1 deletion(-)

diff --git a/src/containers/paper-canvas.jsx b/src/containers/paper-canvas.jsx
index a9f9d60f..742e38db 100644
--- a/src/containers/paper-canvas.jsx
+++ b/src/containers/paper-canvas.jsx
@@ -98,6 +98,20 @@ class PaperCanvas extends React.Component {
             svg = svg.replace(
                 '<svg ', '<svg xmlns="http://www.w3.org/2000/svg" ');
         }
+
+        // Get the origin which the viewBox is defined relative to. During import, Paper will translate
+        // the viewBox to start at (0, 0), and we need to translate it back for some costumes to render
+        // correctly.
+        const parser = new DOMParser();
+        const svgDom = parser.parseFromString(svg, 'text/xml');
+        const viewBox = svgDom.documentElement.attributes.viewBox ?
+            svgDom.documentElement.attributes.viewBox.value.match(/\S+/g) : null;
+        if (viewBox) {
+            for (let i = 0; i < viewBox.length; i++) {
+                viewBox[i] = parseFloat(viewBox[i]);
+            }
+        }
+
         paper.project.importSVG(svg, {
             expandShapes: true,
             onLoad: function (item) {
@@ -131,8 +145,12 @@ class PaperCanvas extends React.Component {
                 ensureClockwise(item);
 
                 if (typeof rotationCenterX !== 'undefined' && typeof rotationCenterY !== 'undefined') {
+                    let rotationPoint = new paper.Point(rotationCenterX, rotationCenterY);
+                    if (viewBox && viewBox.length >= 2 && !isNaN(viewBox[0]) && !isNaN(viewBox[1])) {
+                        rotationPoint = rotationPoint.subtract(viewBox[0], viewBox[1]);
+                    }
                     item.translate(paper.project.view.center
-                        .subtract(rotationCenterX, rotationCenterY));
+                        .subtract(rotationPoint));
                 } else {
                     // Center
                     item.translate(paper.project.view.center