From cb34c29db6b0d5726d3080fec6d2964c3d8ed1ef Mon Sep 17 00:00:00 2001
From: DD <liudi08@gmail.com>
Date: Tue, 10 Oct 2017 16:02:16 -0400
Subject: [PATCH] Fix some issues with import not centering costume

---
 src/containers/paper-canvas.jsx | 68 +++++++++++++++++----------------
 1 file changed, 36 insertions(+), 32 deletions(-)

diff --git a/src/containers/paper-canvas.jsx b/src/containers/paper-canvas.jsx
index ae4eda24..eb9fcf29 100644
--- a/src/containers/paper-canvas.jsx
+++ b/src/containers/paper-canvas.jsx
@@ -29,39 +29,43 @@ class PaperCanvas extends React.Component {
         paper.remove();
     }
     importSvg (svg, rotationCenterX, rotationCenterY) {
-        const imported = paper.project.importSVG(svg,
-            {
-                expandShapes: true,
-                onLoad: function (item) {
-                    // Remove viewbox
-                    if (item.clipped) {
-                        let mask;
-                        for (const child of item.children) {
-                            if (child.isClipMask()) {
-                                mask = child;
-                                break;
-                            }
-                        }
-                        item.clipped = false;
-                        mask.remove();
-                        // Consider removing clip mask here?
-                    }
-                    while (item.reduce() !== item) {
-                        item = item.reduce();
-                    }
-                }
-            });
-        if (typeof rotationCenterX !== 'undefined' && typeof rotationCenterY !== 'undefined') {
-            imported.position =
-                paper.project.view.center
-                    .add(imported.bounds.width / 2, imported.bounds.height / 2)
-                    .subtract(rotationCenterX, rotationCenterY);
-        } else {
-            // Center
-            imported.position = paper.project.view.center;
-        }
+        paper.project.importSVG(svg, {
+            expandShapes: true,
+            onLoad: function (item) {
+                const itemWidth = item.bounds.width;
+                const itemHeight = item.bounds.height;
 
-        paper.project.view.update();
+                // Remove viewbox
+                if (item.clipped) {
+                    let mask;
+                    for (const child of item.children) {
+                        if (child.isClipMask()) {
+                            mask = child;
+                            break;
+                        }
+                    }
+                    item.clipped = false;
+                    mask.remove();
+                }
+                
+                // Reduce single item nested in groups
+                if (item.children && item.children.length === 1) {
+                    item = item.reduce();
+                }
+
+                if (typeof rotationCenterX !== 'undefined' && typeof rotationCenterY !== 'undefined') {
+                    item.position =
+                        paper.project.view.center
+                            .add(itemWidth / 2, itemHeight / 2)
+                            .subtract(rotationCenterX, rotationCenterY);
+                } else {
+                    // Center
+                    item.position = paper.project.view.center;
+                }
+
+                paper.project.view.update();
+            }
+        });
     }
     setCanvas (canvas) {
         this.canvas = canvas;