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

Add selection tool to rect

Browse source
This commit is contained in:
DD 2017-10-19 18:29:32 -04:00
parent f95bbe2ca5
commit 6732483d80
2 changed files with 51 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -84,8 +84,8 @@ class BoundingBoxTool {
const hitProperties = {
hitResult: hitResult,
clone: event.modifiers.alt,
multiselect: event.modifiers.shift
clone: clone,
multiselect: multiselect
};
if (this.mode === BoundingBoxModes.MOVE) {
this._modeMap[this.mode].onMouseDown(hitProperties);

55
src/helper/tools/rect-tool.js
View file

@ -1,12 +1,16 @@
import paper from '@scratch/paper';
import Modes from '../../modes/modes';
import {styleShape} from '../style-path';
import {clearSelection} from '../selection';
import BoundingBoxTool from '../selection-tools/bounding-box-tool';
/**
* Tool for drawing rectangles.
*/
class RectTool extends paper.Tool {
static get TOLERANCE () {
return 6;
}
/**
* @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
@ -14,33 +18,66 @@ class RectTool extends paper.Tool {
*/
constructor (setSelectedItems, clearSelectedItems, onUpdateSvg) {
super();
this.clearSelectedItems = clearSelectedItems;
this.onUpdateSvg = onUpdateSvg;
this.prevHoveredItemId = null;
this.boundingBoxTool = new BoundingBoxTool(Modes.SELECT, setSelectedItems, clearSelectedItems, onUpdateSvg);
// We have to set these functions instead of just declaring them because
// paper.js tools hook up the listeners in the setter functions.
this.onMouseDown = this.handleMouseDown;
this.onMouseDrag = this.handleMouseDrag;
this.onMouseUp = this.handleMouseUp;
this.downPoint = null;
this.rect = null;
this.colorState = null;
this.isBoundingBoxMode = null;
}
getHitOptions () {
return {
segments: true,
stroke: true,
curves: true,
fill: true,
guide: false,
match: hitResult =>
(hitResult.item.data && hitResult.item.data.isHelperItem) ||
hitResult.item.selected, // Allow hits on bounding box and selected only
tolerance: RectTool.TOLERANCE / paper.view.zoom
};
}
setColorState (colorState) {
this.colorState = colorState;
}
handleMouseDown (event) {
const clickedItem = paper.project.hitTest(event.point, this.getHitOptions());
if (clickedItem) {
this.isBoundingBoxMode = true;
this.boundingBoxTool.onMouseDown(event, false /* clone */, false /* multiselect */, this.getHitOptions());
} else {
this.isBoundingBoxMode = false;
this.boundingBoxTool.removeBoundsPath();
clearSelection(this.clearSelectedItems);
}
}
handleMouseDrag (event) {
if (event.event.button > 0) return; // only first mouse button
if (this.isBoundingBoxMode) {
this.boundingBoxTool.onMouseDrag(event);
return;
}
if (this.rect) {
this.rect.remove();
}
this.rect = new paper.Path.Rectangle(event.downPoint, event.point);
const rect = new paper.Rectangle(event.downPoint, event.point);
if (event.modifiers.shift) {
this.rect.height = this.rect.width;
rect.height = rect.width;
}
this.rect = new paper.Path.Rectangle(rect);
if (event.modifiers.alt) {
this.rect.position = event.downPoint;
@ -51,15 +88,21 @@ class RectTool extends paper.Tool {
handleMouseUp (event) {
if (event.event.button > 0) return; // only first mouse button
if (this.isBoundingBoxMode) {
this.boundingBoxTool.onMouseUp(event);
this.isBoundingBoxMode = null;
return;
}
if (this.rect) {
this.rect.selected = true;
this.boundingBoxTool.setSelectionBounds();
this.onUpdateSvg();
this.rect = null;
}
}
deactivateTool () {
this.downPoint = null;
this.rect = null;
this.colorState = null;
this.boundingBoxTool.removeBoundsPath();
}
}