fix a bunch of things around import and export

src/containers/paint-editor.jsx

@@ -29,8 +29,9 @@ class PaintEditor extends React.Component {
         document.removeEventListener('keydown', this.props.onKeyPress);
     }
     handleUpdateSvg (skipSnapshot) {
-        // Hide bounding box
+        // Hide guide layer
-        getGuideLayer().visible = false;
+        const guideLayer = getGuideLayer();
+        guideLayer.remove();
         const bounds = paper.project.activeLayer.bounds;
         this.props.onUpdateSvg(
             paper.project.exportSVG({
@@ -42,7 +43,7 @@ class PaintEditor extends React.Component {
         if (!skipSnapshot) {
             performSnapshot(this.props.undoSnapshot);
         }
-        getGuideLayer().visible = true;
+        paper.project.addLayer(guideLayer);
     }
     handleUndo () {
         performUndo(this.props.undoState, this.props.onUndo, this.handleUpdateSvg);

src/containers/paper-canvas.jsx

@@ -5,7 +5,8 @@ import {connect} from 'react-redux';
 import paper from '@scratch/paper';
 
 import {performSnapshot} from '../helper/undo';
-import {undoSnapshot} from '../reducers/undo';
+import {undoSnapshot, clearUndoState} from '../reducers/undo';
+import {isGroup, ungroupItems} from '../helper/group';
 
 import styles from './paper-canvas.css';
 
@@ -23,17 +24,24 @@ class PaperCanvas extends React.Component {
         paper.settings.handleSize = 0;
         if (this.props.svg) {
             this.importSvg(this.props.svg, this.props.rotationCenterX, this.props.rotationCenterY);
+        } else {
+            performSnapshot(this.props.undoSnapshot);
         }
-        performSnapshot(this.props.undoSnapshot);
     }
     componentWillReceiveProps (newProps) {
-        paper.project.activeLayer.removeChildren();
+        for (const layer of paper.project.layers) {
-        this.importSvg(newProps.svg, newProps.rotationCenterX, newProps.rotationCenterY);
+            layer.removeChildren();
+        }
+        this.props.clearUndo();
+        if (newProps.svg) {
+            this.importSvg(newProps.svg, newProps.rotationCenterX, newProps.rotationCenterY);
+        }
     }
     componentWillUnmount () {
         paper.remove();
     }
     importSvg (svg, rotationCenterX, rotationCenterY) {
+        const paperCanvas = this;
         paper.project.importSVG(svg, {
             expandShapes: true,
             onLoad: function (item) {
@@ -67,7 +75,11 @@ class PaperCanvas extends React.Component {
                     // Center
                     item.position = paper.project.view.center;
                 }
+                if (isGroup(item)) {
+                    ungroupItems([item]);
+                }
 
+                performSnapshot(paperCanvas.props.undoSnapshot);
                 paper.project.view.update();
             }
         });
@@ -92,6 +104,7 @@ class PaperCanvas extends React.Component {
 
 PaperCanvas.propTypes = {
     canvasRef: PropTypes.func,
+    clearUndo: PropTypes.func.isRequired,
     rotationCenterX: PropTypes.number,
     rotationCenterY: PropTypes.number,
     svg: PropTypes.string,
@@ -100,6 +113,9 @@ PaperCanvas.propTypes = {
 const mapDispatchToProps = dispatch => ({
     undoSnapshot: snapshot => {
         dispatch(undoSnapshot(snapshot));
+    },
+    clearUndo: () => {
+        dispatch(clearUndoState());
     }
 });
 

src/helper/group.js

@@ -23,37 +23,41 @@ const groupSelection = function (clearSelectedItems) {
     return false;
 };
 
-const ungroupLoop = function (group, recursive) {
+const ungroupLoop = function (group, recursive, selectUngroupedItems) {
-    // don't ungroup items that are not groups
+    // Can't ungroup items that are not groups
     if (!group || !group.children || !isGroup(group)) return;
             
     group.applyMatrix = true;
     // iterate over group children recursively
     for (let i = 0; i < group.children.length; i++) {
-        const groupChild = group.children[i];
+        let groupChild = group.children[i];
         if (groupChild.hasChildren()) {
             // recursion (groups can contain groups, ie. from SVG import)
             if (recursive) {
-                ungroupLoop(groupChild, true /* recursive */);
+                ungroupLoop(groupChild, recursive, selectUngroupedItems);
                 continue;
             }
+            if (groupChild.children.length === 1) {
+                groupChild = groupChild.reduce();
+            }
         }
         groupChild.applyMatrix = true;
         // move items from the group to the activeLayer (ungrouping)
         groupChild.insertBelow(group);
-        groupChild.selected = true;
+        if (selectUngroupedItems) {
+            groupChild.selected = true;
+        }
         i--;
     }
 };
 
 // ungroup items (only top hierarchy)
-const ungroupItems = function (items, clearSelectedItems) {
+const ungroupItems = function (items, selectUngroupedItems) {
-    clearSelection(clearSelectedItems);
     const emptyGroups = [];
     for (let i = 0; i < items.length; i++) {
         const item = items[i];
         if (isGroup(item) && !item.data.isPGTextItem) {
-            ungroupLoop(item, false /* recursive */);
+            ungroupLoop(item, false /* recursive */, selectUngroupedItems /* selectUngroupedItems */);
 
             if (!item.hasChildren()) {
                 emptyGroups.push(item);
@@ -70,9 +74,10 @@ const ungroupItems = function (items, clearSelectedItems) {
     // pg.undo.snapshot('ungroupItems');
 };
 
-const ungroupSelection = function () {
+const ungroupSelection = function (clearSelectedItems) {
     const items = getSelectedRootItems();
-    ungroupItems(items);
+    clearSelection(clearSelectedItems);
+    ungroupItems(items, true /* selectUngroupedItems */);
 };