From 05d7b806a6fe8af93f83fe4f3a880fc487d535c8 Mon Sep 17 00:00:00 2001 From: DD Date: Mon, 16 Oct 2017 19:31:30 -0400 Subject: [PATCH] fix a bunch of things around import and export --- src/containers/paint-editor.jsx | 7 ++++--- src/containers/paper-canvas.jsx | 24 ++++++++++++++++++++---- src/helper/group.js | 25 +++++++++++++++---------- 3 files changed, 39 insertions(+), 17 deletions(-) diff --git a/src/containers/paint-editor.jsx b/src/containers/paint-editor.jsx index 0b039e8a..cfb66679 100644 --- a/src/containers/paint-editor.jsx +++ b/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 - getGuideLayer().visible = false; + // Hide guide layer + 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); diff --git a/src/containers/paper-canvas.jsx b/src/containers/paper-canvas.jsx index d09046d0..aa450598 100644 --- a/src/containers/paper-canvas.jsx +++ b/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(); - this.importSvg(newProps.svg, newProps.rotationCenterX, newProps.rotationCenterY); + for (const layer of paper.project.layers) { + 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()); } }); diff --git a/src/helper/group.js b/src/helper/group.js index 1071021c..56e5a2a0 100644 --- a/src/helper/group.js +++ b/src/helper/group.js @@ -23,37 +23,41 @@ const groupSelection = function (clearSelectedItems) { return false; }; -const ungroupLoop = function (group, recursive) { - // don't ungroup items that are not groups +const ungroupLoop = function (group, recursive, selectUngroupedItems) { + // 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) { - clearSelection(clearSelectedItems); +const ungroupItems = function (items, selectUngroupedItems) { 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 */); };