scratchfoundation/scratch-paint
1
0
Fork 0
mirror of https://github.com/scratchfoundation/scratch-paint.git synced 2024-12-22 13:32:28 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

Merge pull request #52 from fsih/fixDrag

Browse source 
Fixes the bounding box bounding an area much larger than the sprite after dragging it in select mode.
Fixes the pieces of a grouped sprite drifting apart as it is moved around in select mode.
This commit is contained in:
DD Liu 2017-10-12 11:32:56 -04:00 committed by GitHub
commit 19eeeff018
5 changed files with 23 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
src/helper/guides.js
View file

@ -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;

23
src/helper/selection-tools/bounding-box-tool.js
View file

@ -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());
}

10
src/helper/selection-tools/move-tool.js
View file

@ -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.

3
src/helper/selection-tools/reshape-tool.js
View file

@ -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] =

2
src/helper/selection-tools/select-tool.js
View file

@ -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;