diff --git a/src/helper/guides.js b/src/helper/guides.js index ae5c569e..cd0d7481 100644 --- a/src/helper/guides.js +++ b/src/helper/guides.js @@ -20,6 +20,7 @@ const hoverItem = function (hitResult) { clone.closed = true; } clone.parent = getGuideLayer(); + clone.position = hitResult.item.position; clone.strokeColor = GUIDE_BLUE; clone.fillColor = null; clone.data.isHelperItem = true; diff --git a/src/helper/selection-tools/bounding-box-tool.js b/src/helper/selection-tools/bounding-box-tool.js index 1826f365..9a6018ab 100644 --- a/src/helper/selection-tools/bounding-box-tool.js +++ b/src/helper/selection-tools/bounding-box-tool.js @@ -17,7 +17,7 @@ const ARROW_PATH = 'M19.28,1.09C19.28.28,19,0,18.2,0c-1.67,0-3.34,0-5,0-.34,0-.8 '0,0,0,7.34,2,9.45,9.45,0,0,0,4.82-2.05l.73-.62a14.38,14.38,0,0,0,1.29,1.51,1.22,1.22,' + '0,0,0,1,.31,1.23,1.23,0,0,0,.49-1C19.31,4.43,19.29,2.76,19.28,1.09Z'; /** Modes of the bounding box tool, which can do many things depending on how it's used. */ -const Modes = keyMirror({ +const BoundingBoxModes = keyMirror({ SCALE: null, ROTATE: null, MOVE: null @@ -32,20 +32,21 @@ const Modes = keyMirror({ */ class BoundingBoxTool { /** + * @param {Modes} mode Paint editor mode * @param {function} setSelectedItems Callback to set the set of selected items in the Redux state * @param {function} clearSelectedItems Callback to clear the set of selected items in the Redux state * @param {!function} onUpdateSvg A callback to call when the image visibly changes */ - constructor (setSelectedItems, clearSelectedItems, onUpdateSvg) { + constructor (mode, setSelectedItems, clearSelectedItems, onUpdateSvg) { this.onUpdateSvg = onUpdateSvg; this.mode = null; this.boundsPath = null; this.boundsScaleHandles = []; this.boundsRotHandles = []; this._modeMap = {}; - this._modeMap[Modes.SCALE] = new ScaleTool(onUpdateSvg); - this._modeMap[Modes.ROTATE] = new RotateTool(onUpdateSvg); - this._modeMap[Modes.MOVE] = new MoveTool(setSelectedItems, clearSelectedItems, onUpdateSvg); + this._modeMap[BoundingBoxModes.SCALE] = new ScaleTool(onUpdateSvg); + this._modeMap[BoundingBoxModes.ROTATE] = new RotateTool(onUpdateSvg); + this._modeMap[BoundingBoxModes.MOVE] = new MoveTool(mode, setSelectedItems, clearSelectedItems, onUpdateSvg); } /** @@ -70,15 +71,15 @@ class BoundingBoxTool { for (let i = 0; i < hitResults.length; i++) { if (hitResults[i].item.data && hitResults[i].item.data.isScaleHandle) { hitResult = hitResults[i]; - this.mode = Modes.SCALE; + this.mode = BoundingBoxModes.SCALE; break; } else if (hitResults[i].item.data && hitResults[i].item.data.isRotHandle) { hitResult = hitResults[i]; - this.mode = Modes.ROTATE; + this.mode = BoundingBoxModes.ROTATE; } } if (!this.mode) { - this.mode = Modes.MOVE; + this.mode = BoundingBoxModes.MOVE; } const hitProperties = { @@ -86,12 +87,12 @@ class BoundingBoxTool { clone: event.modifiers.alt, multiselect: event.modifiers.shift }; - if (this.mode === Modes.MOVE) { + if (this.mode === BoundingBoxModes.MOVE) { this._modeMap[this.mode].onMouseDown(hitProperties); - } else if (this.mode === Modes.SCALE) { + } else if (this.mode === BoundingBoxModes.SCALE) { this._modeMap[this.mode].onMouseDown( hitResult, this.boundsPath, this.boundsScaleHandles, this.boundsRotHandles, getSelectedRootItems()); - } else if (this.mode === Modes.ROTATE) { + } else if (this.mode === BoundingBoxModes.ROTATE) { this._modeMap[this.mode].onMouseDown(hitResult, this.boundsPath, getSelectedRootItems()); } diff --git a/src/helper/selection-tools/move-tool.js b/src/helper/selection-tools/move-tool.js index 6e39673d..778c47c9 100644 --- a/src/helper/selection-tools/move-tool.js +++ b/src/helper/selection-tools/move-tool.js @@ -1,18 +1,22 @@ +import Modes from '../../modes/modes'; import {isGroup} from '../group'; import {isCompoundPathItem, getRootItem} from '../item'; import {snapDeltaToAngle} from '../math'; -import {clearSelection, cloneSelection, getSelectedLeafItems, setItemSelection} from '../selection'; +import {clearSelection, cloneSelection, getSelectedLeafItems, getSelectedRootItems, setItemSelection} + from '../selection'; /** * Tool to handle dragging an item to reposition it in a selection mode. */ class MoveTool { /** + * @param {Modes} mode Paint editor mode * @param {function} setSelectedItems Callback to set the set of selected items in the Redux state * @param {function} clearSelectedItems Callback to clear the set of selected items in the Redux state * @param {!function} onUpdateSvg A callback to call when the image visibly changes */ - constructor (setSelectedItems, clearSelectedItems, onUpdateSvg) { + constructor (mode, setSelectedItems, clearSelectedItems, onUpdateSvg) { + this.mode = mode; this.setSelectedItems = setSelectedItems; this.clearSelectedItems = clearSelectedItems; this.selectedItems = null; @@ -52,7 +56,7 @@ class MoveTool { this._select(item, true, hitProperties.subselect); } if (hitProperties.clone) cloneSelection(hitProperties.subselect, this.onUpdateSvg); - this.selectedItems = getSelectedLeafItems(); + this.selectedItems = this.mode === Modes.RESHAPE ? getSelectedLeafItems() : getSelectedRootItems(); } /** * Sets the selection state of an item. diff --git a/src/helper/selection-tools/reshape-tool.js b/src/helper/selection-tools/reshape-tool.js index 38ecebae..460f33e0 100644 --- a/src/helper/selection-tools/reshape-tool.js +++ b/src/helper/selection-tools/reshape-tool.js @@ -54,7 +54,8 @@ class ReshapeTool extends paper.Tool { this.lastEvent = null; this.mode = ReshapeModes.SELECTION_BOX; this._modeMap = {}; - this._modeMap[ReshapeModes.FILL] = new MoveTool(setSelectedItems, clearSelectedItems, onUpdateSvg); + this._modeMap[ReshapeModes.FILL] = + new MoveTool(Modes.RESHAPE, setSelectedItems, clearSelectedItems, onUpdateSvg); this._modeMap[ReshapeModes.POINT] = new PointTool(setSelectedItems, clearSelectedItems, onUpdateSvg); this._modeMap[ReshapeModes.HANDLE] = new HandleTool(setSelectedItems, clearSelectedItems, onUpdateSvg); this._modeMap[ReshapeModes.SELECTION_BOX] = diff --git a/src/helper/selection-tools/select-tool.js b/src/helper/selection-tools/select-tool.js index 14f9e5b2..d2306cd1 100644 --- a/src/helper/selection-tools/select-tool.js +++ b/src/helper/selection-tools/select-tool.js @@ -30,7 +30,7 @@ class SelectTool extends paper.Tool { this.setHoveredItem = setHoveredItem; this.clearHoveredItem = clearHoveredItem; this.onUpdateSvg = onUpdateSvg; - this.boundingBoxTool = new BoundingBoxTool(setSelectedItems, clearSelectedItems, onUpdateSvg); + this.boundingBoxTool = new BoundingBoxTool(Modes.SELECT, setSelectedItems, clearSelectedItems, onUpdateSvg); this.selectionBoxTool = new SelectionBoxTool(Modes.SELECT, setSelectedItems, clearSelectedItems); this.selectionBoxMode = false; this.prevHoveredItemId = null;