scratchfoundation/scratch-paint
1
0
Fork 0
mirror of https://github.com/scratchfoundation/scratch-paint.git synced 2024-12-23 14:02:50 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

Merge pull request #222 from fsih/showOutline

Browse source 
Show bounding box outline when moving and scaling in the select tool
This commit is contained in:
DD Liu 2017-12-19 11:07:13 -05:00 committed by GitHub
commit 482c994112
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 25 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
src/helper/guides.js
View file

@ -88,6 +88,10 @@ const removeBoundsPath = function () {
_removePaperItemsByDataTags(['isSelectionBound', 'isRotHandle', 'isScaleHandle']); _removePaperItemsByDataTags(['isSelectionBound', 'isRotHandle', 'isScaleHandle']);
}; };
const removeBoundsHandles = function () {
_removePaperItemsByDataTags(['isRotHandle', 'isScaleHandle']);
};
const removeAllGuides = function () { const removeAllGuides = function () {
_removePaperItemsByTags(['guide']); _removePaperItemsByTags(['guide']);
}; };
@ -113,6 +117,7 @@ export {
hoverBounds, hoverBounds,
rectSelect, rectSelect,
removeAllGuides, removeAllGuides,
removeBoundsHandles,
removeBoundsPath, removeBoundsPath,
drawHitPoint, drawHitPoint,
removeHitPoint, removeHitPoint,

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

@ -2,7 +2,7 @@ import paper from '@scratch/paper';
import keyMirror from 'keymirror'; import keyMirror from 'keymirror';
import {getSelectedRootItems} from '../selection'; import {getSelectedRootItems} from '../selection';
import {getGuideColor, removeBoundsPath} from '../guides'; import {getGuideColor, removeBoundsPath, removeBoundsHandles} from '../guides';
import {getGuideLayer} from '../layer'; import {getGuideLayer} from '../layer';
import ScaleTool from './scale-tool'; import ScaleTool from './scale-tool';
@ -102,14 +102,16 @@ class BoundingBoxTool {
}; };
if (this.mode === BoundingBoxModes.MOVE) { if (this.mode === BoundingBoxModes.MOVE) {
this._modeMap[this.mode].onMouseDown(hitProperties); this._modeMap[this.mode].onMouseDown(hitProperties);
this.removeBoundsHandles();
} else if (this.mode === BoundingBoxModes.SCALE) { } else if (this.mode === BoundingBoxModes.SCALE) {
this._modeMap[this.mode].onMouseDown(hitResult, this.boundsPath, getSelectedRootItems()); this._modeMap[this.mode].onMouseDown(hitResult, this.boundsPath, getSelectedRootItems());
this.removeBoundsHandles();
} else if (this.mode === BoundingBoxModes.ROTATE) { } else if (this.mode === BoundingBoxModes.ROTATE) {
this._modeMap[this.mode].onMouseDown(hitResult, this.boundsPath, getSelectedRootItems()); this._modeMap[this.mode].onMouseDown(hitResult, this.boundsPath, getSelectedRootItems());
// While transforming, don't show bounds
this.removeBoundsPath();
} }
// While transforming, don't show bounds
this.removeBoundsPath();
return true; return true;
} }
onMouseDrag (event) { onMouseDrag (event) {
@ -145,6 +147,7 @@ class BoundingBoxTool {
this.boundsPath.curves[2].divideAtTime(0.5); this.boundsPath.curves[2].divideAtTime(0.5);
this.boundsPath.curves[4].divideAtTime(0.5); this.boundsPath.curves[4].divideAtTime(0.5);
this.boundsPath.curves[6].divideAtTime(0.5); this.boundsPath.curves[6].divideAtTime(0.5);
this._modeMap[BoundingBoxModes.MOVE].setBoundsPath(this.boundsPath);
} }
this.boundsPath.guide = true; this.boundsPath.guide = true;
this.boundsPath.data.isSelectionBound = true; this.boundsPath.data.isSelectionBound = true;
@ -233,6 +236,11 @@ class BoundingBoxTool {
this.boundsScaleHandles.length = 0; this.boundsScaleHandles.length = 0;
this.boundsRotHandles.length = 0; this.boundsRotHandles.length = 0;
} }
removeBoundsHandles () {
removeBoundsHandles();
this.boundsScaleHandles.length = 0;
this.boundsRotHandles.length = 0;
}
} }
export default BoundingBoxTool; export default BoundingBoxTool;

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

@ -21,6 +21,7 @@ class MoveTool {
this.clearSelectedItems = clearSelectedItems; this.clearSelectedItems = clearSelectedItems;
this.selectedItems = null; this.selectedItems = null;
this.onUpdateSvg = onUpdateSvg; this.onUpdateSvg = onUpdateSvg;
this.boundsPath = null;
} }
/** /**
@ -57,6 +58,12 @@ class MoveTool {
} }
if (hitProperties.clone) cloneSelection(hitProperties.subselect, this.onUpdateSvg); if (hitProperties.clone) cloneSelection(hitProperties.subselect, this.onUpdateSvg);
this.selectedItems = this.mode === Modes.RESHAPE ? getSelectedLeafItems() : getSelectedRootItems(); this.selectedItems = this.mode === Modes.RESHAPE ? getSelectedLeafItems() : getSelectedRootItems();
if (this.boundsPath) {
this.selectedItems.push(this.boundsPath);
}
}
setBoundsPath (boundsPath) {
this.boundsPath = boundsPath;
} }
/** /**
* Sets the selection state of an item. * Sets the selection state of an item.
@ -101,7 +108,7 @@ class MoveTool {
let moved = false; let moved = false;
// resetting the items origin point for the next usage // resetting the items origin point for the next usage
for (const item of this.selectedItems) { for (const item of this.selectedItems) {
if (item.data.origPos && !item.position.equals(item.data.origPos)) { if (item.data && item.data.origPos && !item.position.equals(item.data.origPos)) {
moved = true; moved = true;
} }
item.data.origPos = null; item.data.origPos = null;

1
src/helper/selection-tools/scale-tool.js
View file

@ -54,6 +54,7 @@ class ScaleTool {
} }
this.itemGroup = new paper.Group(selectedItems); this.itemGroup = new paper.Group(selectedItems);
this.itemGroup.addChild(boundsPath);
this.itemGroup.insertBelow(this.itemToInsertBelow); this.itemGroup.insertBelow(this.itemToInsertBelow);
this.itemGroup.data.isHelperItem = true; this.itemGroup.data.isHelperItem = true;
} }