mirror of
https://github.com/scratchfoundation/scratch-paint.git
synced 2024-12-22 21:42:30 -05:00
Merge pull request #68 from fsih/selectionBug
Fix a bunch of things around import and export
This commit is contained in:
commit
09ef88cac1
3 changed files with 39 additions and 17 deletions
|
@ -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);
|
||||
|
|
|
@ -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());
|
||||
}
|
||||
});
|
||||
|
||||
|
|
|
@ -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 */);
|
||||
};
|
||||
|
||||
|
||||
|
|
Loading…
Reference in a new issue