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

Move select tool out of select mode

Browse source
This commit is contained in:
DD 2017-09-21 18:20:44 -04:00
parent f15a3dbe02
commit 4bc4d92415
12 changed files with 135 additions and 199 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
src/containers/paper-canvas.jsx
View file

@ -35,7 +35,15 @@ class PaperCanvas extends React.Component {
onLoad: function (item) {
// Remove viewbox
if (item.clipped) {
let mask;
for (const child of item.children) {
if (child.isClipMask()) {
mask = child;
break;
}
}
item.clipped = false;
mask.remove();
// Consider removing clip mask here?
}
while (item.reduce() !== item) {

14
src/containers/reshape-mode.jsx
View file

@ -7,7 +7,6 @@ import Modes from '../modes/modes';
import {changeMode} from '../reducers/modes';
import {setHoveredItem, clearHoveredItem} from '../reducers/hover';
import {selectSubItems} from '../helper/selection';
import ReshapeTool from '../helper/selection-tools/reshape-tool';
import ReshapeModeComponent from '../components/reshape-mode.jsx';
import paper from 'paper';
@ -41,15 +40,12 @@ class ReshapeMode extends React.Component {
return false; // Static component, for now
}
activateTool () {
selectSubItems();
this.tool = new ReshapeTool(this.props.setHoveredItem, this.props.clearHoveredItem);
this.tool = new ReshapeTool(this.props.setHoveredItem, this.props.clearHoveredItem, this.props.onUpdateSvg);
this.tool.setPrevHoveredItem(this.props.hoveredItem);
this.tool.activate();
paper.settings.handleSize = 8;
}
deactivateTool () {
paper.settings.handleSize = 0;
this.props.clearHoveredItem();
this.tool.deactivateTool();
this.tool.remove();
this.tool = null;
this.hitResult = null;
@ -64,10 +60,10 @@ class ReshapeMode extends React.Component {
ReshapeMode.propTypes = {
clearHoveredItem: PropTypes.func.isRequired,
handleMouseDown: PropTypes.func.isRequired,
hoveredItem: PropTypes.instanceOf(paper.Item), // eslint-disable-line react/no-unused-prop-types
hoveredItem: PropTypes.instanceOf(paper.Item),
isReshapeModeActive: PropTypes.bool.isRequired,
onUpdateSvg: PropTypes.func.isRequired, // eslint-disable-line react/no-unused-prop-types
setHoveredItem: PropTypes.func.isRequired // eslint-disable-line react/no-unused-prop-types
onUpdateSvg: PropTypes.func.isRequired,
setHoveredItem: PropTypes.func.isRequired
};
const mapStateToProps = state => ({

110
src/containers/select-mode.jsx
View file

@ -7,36 +7,17 @@ import Modes from '../modes/modes';
import {changeMode} from '../reducers/modes';
import {setHoveredItem, clearHoveredItem} from '../reducers/hover';
import {getHoveredItem} from '../helper/hover';
import {rectSelect} from '../helper/guides';
import {selectRootItem, processRectangularSelection} from '../helper/selection';
import SelectTool from '../helper/selection-tools/select-tool';
import SelectModeComponent from '../components/select-mode.jsx';
import BoundingBoxTool from '../helper/selection-tools/bounding-box-tool';
import SelectionBoxTool from '../helper/selection-tools/selection-box-tool';
import paper from 'paper';
class SelectMode extends React.Component {
static get TOLERANCE () {
return 6;
}
constructor (props) {
super(props);
bindAll(this, [
'activateTool',
'deactivateTool',
'getHitOptions'
'deactivateTool'
]);
this._hitOptions = {
segments: true,
stroke: true,
curves: true,
fill: true,
guide: false
};
this.boundingBoxTool = new BoundingBoxTool();
this.selectionBoxTool = new SelectionBoxTool();
this.selectionBoxMode = false;
}
componentDidMount () {
if (this.props.isSelectModeActive) {
@ -44,6 +25,10 @@ class SelectMode extends React.Component {
}
}
componentWillReceiveProps (nextProps) {
if (this.tool && nextProps.hoveredItem !== this.props.hoveredItem) {
this.tool.setPrevHoveredItem(nextProps.hoveredItem);
}
if (nextProps.isSelectModeActive && !this.props.isSelectModeActive) {
this.activateTool();
} else if (!nextProps.isSelectModeActive && this.props.isSelectModeActive) {
@ -53,87 +38,14 @@ class SelectMode extends React.Component {
shouldComponentUpdate () {
return false; // Static component, for now
}
getHitOptions (preselectedOnly) {
this._hitOptions.tolerance = SelectMode.TOLERANCE / paper.view.zoom;
if (preselectedOnly) {
this._hitOptions.selected = true;
} else {
delete this._hitOptions.selected;
}
return this._hitOptions;
}
activateTool () {
debugger;
selectRootItem();
this.boundingBoxTool.setSelectionBounds();
this.tool = new paper.Tool();
// Define these to sate linter
const selectMode = this;
this.tool.onMouseDown = event => {
if (event.event.button > 0) return; // only first mouse button
this.props.clearHoveredItem();
if (!this.boundingBoxTool
.onMouseDown(
event,
event.modifiers.alt,
event.modifiers.shift,
this.getHitOptions(false /* preseelectedOnly */))) {
this.selectionBoxMode = true;
this.selectionBoxTool.onMouseDown(event.modifiers.shift);
}
};
this.tool.onMouseMove = function (event) {
const hoveredItem = getHoveredItem(event, selectMode.getHitOptions());
const oldHoveredItem = selectMode.props.hoveredItem;
if ((!hoveredItem && oldHoveredItem) || // There is no longer a hovered item
(hoveredItem && !oldHoveredItem) || // There is now a hovered item
(hoveredItem && oldHoveredItem && hoveredItem.id !== oldHoveredItem.id)) { // hovered item changed
selectMode.props.setHoveredItem(hoveredItem);
}
};
this.tool.onMouseDrag = function (event) {
if (event.event.button > 0) return; // only first mouse button
if (selectMode.selectionBoxMode) {
selectMode.selectionRect = rectSelect(event);
// Remove this rect on the next drag and up event
selectMode.selectionRect.removeOnDrag();
} else {
selectMode.boundingBoxTool.onMouseDrag(event);
}
};
this.tool.onMouseUp = function (event) {
if (event.event.button > 0) return; // only first mouse button
if (selectMode.selectionBoxMode) {
if (selectMode.selectionRect) {
processRectangularSelection(event, selectMode.selectionRect, Modes.SELECT);
selectMode.selectionRect.remove();
}
selectMode.boundingBoxTool.setSelectionBounds();
} else {
selectMode.boundingBoxTool.onMouseUp(event);
selectMode.props.onUpdateSvg();
}
selectMode.selectionBoxMode = false;
selectMode.selectionRect = null;
};
this.tool = new SelectTool(this.props.setHoveredItem, this.props.clearHoveredItem, this.props.onUpdateSvg);
this.tool.activate();
}
deactivateTool () {
debugger;
this.props.clearHoveredItem();
this.boundingBoxTool.removeBoundsPath();
this.tool.deactivateTool();
this.tool.remove();
this.tool = null;
this.hitResult = null;
}
render () {
return (
@ -145,10 +57,10 @@ class SelectMode extends React.Component {
SelectMode.propTypes = {
clearHoveredItem: PropTypes.func.isRequired,
handleMouseDown: PropTypes.func.isRequired,
hoveredItem: PropTypes.instanceOf(paper.Item), // eslint-disable-line react/no-unused-prop-types
hoveredItem: PropTypes.instanceOf(paper.Item),
isSelectModeActive: PropTypes.bool.isRequired,
onUpdateSvg: PropTypes.func.isRequired, // eslint-disable-line react/no-unused-prop-types
setHoveredItem: PropTypes.func.isRequired // eslint-disable-line react/no-unused-prop-types
onUpdateSvg: PropTypes.func.isRequired,
setHoveredItem: PropTypes.func.isRequired
};
const mapStateToProps = state => ({

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

@ -28,17 +28,19 @@ const Modes = keyMirror({
* On mouse down, the type of function (move, scale, rotate) is determined based on what is clicked
* (scale handle, rotate handle, the object itself). This determines the mode of the tool, which then
* delegates actions to the MoveTool, RotateTool or ScaleTool accordingly.
* @param {!function} onUpdateSvg A callback to call when the image visibly changes
*/
class BoundingBoxTool {
constructor () {
constructor (onUpdateSvg) {
this.onUpdateSvg = onUpdateSvg;
this.mode = null;
this.boundsPath = null;
this.boundsScaleHandles = [];
this.boundsRotHandles = [];
this._modeMap = {};
this._modeMap[Modes.SCALE] = new ScaleTool();
this._modeMap[Modes.ROTATE] = new RotateTool();
this._modeMap[Modes.MOVE] = new MoveTool();
this._modeMap[Modes.SCALE] = new ScaleTool(onUpdateSvg);
this._modeMap[Modes.ROTATE] = new RotateTool(onUpdateSvg);
this._modeMap[Modes.MOVE] = new MoveTool(onUpdateSvg);
}
/**
@ -75,8 +77,13 @@ class BoundingBoxTool {
this.mode = Modes.MOVE;
}
const hitProperties = {
hitResult: hitResult,
clone: event.modifiers.alt,
multiselect: event.modifiers.shift
};
if (this.mode === Modes.MOVE) {
this._modeMap[this.mode].onMouseDown(hitResult, clone, multiselect);
this._modeMap[this.mode].onMouseDown(hitProperties);
} else if (this.mode === Modes.SCALE) {
this._modeMap[this.mode].onMouseDown(
hitResult, this.boundsPath, this.boundsScaleHandles, this.boundsRotHandles, getSelectedItems());
@ -100,10 +107,9 @@ class BoundingBoxTool {
this.setSelectionBounds();
}
setSelectionBounds () {
debugger;
this.removeBoundsPath();
const items = getSelectedItems();
const items = getSelectedItems(true /* recursive */);
if (items.length <= 0) return;
let rect = null;
@ -181,7 +187,6 @@ class BoundingBoxTool {
}
}
removeBoundsPath () {
debugger;
removeHelperItems();
this.boundsPath = null;
this.boundsScaleHandles.length = 0;

7
src/helper/selection-tools/handle-tool.js
View file

@ -1,8 +1,12 @@
import {clearSelection, getSelectedItems} from '../selection';
class HandleTool {
constructor () {
/**
* @param {!function} onUpdateSvg A callback to call when the image visibly changes
*/
constructor (onUpdateSvg) {
this.hitType = null;
this.onUpdateSvg = onUpdateSvg;
}
/**
* @param {!object} hitProperties Describes the mouse event
@ -58,6 +62,7 @@ class HandleTool {
}
onMouseUp () {
// @todo add back undo
this.onUpdateSvg();
}
}

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

@ -4,8 +4,12 @@ import {snapDeltaToAngle} from '../math';
import {clearSelection, cloneSelection, getSelectedItems, setItemSelection} from '../selection';
class MoveTool {
constructor () {
/**
* @param {!function} onUpdateSvg A callback to call when the image visibly changes
*/
constructor (onUpdateSvg) {
this.selectedItems = null;
this.onUpdateSvg = onUpdateSvg;
}
/**
@ -41,7 +45,7 @@ class MoveTool {
this._select(item, true, hitProperties.subselect);
}
if (hitProperties.clone) cloneSelection(hitProperties.subselect);
this.selectedItems = getSelectedItems(hitProperties.subselect);
this.selectedItems = getSelectedItems(true /* subselect */);
}
/**
* Sets the selection state of an item.
@ -90,6 +94,7 @@ class MoveTool {
// @todo add back undo
// pg.undo.snapshot('moveSelection');
this.onUpdateSvg();
}
}

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

@ -4,7 +4,10 @@ import {clearSelection, getSelectedItems} from '../selection';
/** Subtool of ReshapeTool for moving control points. */
class PointTool {
constructor () {
/**
* @param {!function} onUpdateSvg A callback to call when the image visibly changes
*/
constructor (onUpdateSvg) {
/**
* Deselection often does not happen until mouse up. If the mouse is dragged before
* mouse up, deselection is cancelled. This variable keeps track of which paper.Item to deselect.
@ -21,6 +24,7 @@ class PointTool {
*/
this.invertDeselect = false;
this.selectedItems = null;
this.onUpdateSvg = onUpdateSvg;
}
/**
@ -185,9 +189,8 @@ class PointTool {
}
this.selectedItems = null;
// @todo add back undo
this.onUpdateSvg();
}
}
export default PointTool;
// - bounding box when switching between select and reshape

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

@ -26,10 +26,11 @@ class ReshapeTool extends paper.Tool {
static get DOUBLE_CLICK_MILLIS () {
return 250;
}
constructor (setHoveredItem, clearHoveredItem) {
constructor (setHoveredItem, clearHoveredItem, onUpdateSvg) {
super();
this.setHoveredItem = setHoveredItem;
this.clearHoveredItem = clearHoveredItem;
this.onUpdateSvg = onUpdateSvg;
this.prevHoveredItem = null;
this._hitOptionsSelected = {
match: function (item) {
@ -72,10 +73,10 @@ class ReshapeTool extends paper.Tool {
this.mode = ReshapeModes.SELECTION_BOX;
this.selectionRect = null;
this._modeMap = {};
this._modeMap[ReshapeModes.FILL] = new MoveTool();
this._modeMap[ReshapeModes.POINT] = new PointTool();
this._modeMap[ReshapeModes.HANDLE] = new HandleTool();
this._modeMap[ReshapeModes.SELECTION_BOX] = new SelectionBoxTool();
this._modeMap[ReshapeModes.FILL] = new MoveTool(onUpdateSvg);
this._modeMap[ReshapeModes.POINT] = new PointTool(onUpdateSvg);
this._modeMap[ReshapeModes.HANDLE] = new HandleTool(onUpdateSvg);
this._modeMap[ReshapeModes.SELECTION_BOX] = new SelectionBoxTool(Modes.RESHAPE);
// We have to set these functions instead of just declaring them because
// paper.js tools hook up the listeners in the setter functions.
@ -84,6 +85,8 @@ class ReshapeTool extends paper.Tool {
this.onMouseDrag = this.handleMouseDrag;
this.onMouseUp = this.handleMouseUp;
this.onKeyUp = this.handleKeyUp;
paper.settings.handleSize = 8;
}
getHitOptions (preselectedOnly) {
this._hitOptions.tolerance = ReshapeTool.TOLERANCE / paper.view.zoom;
@ -193,8 +196,13 @@ class ReshapeTool extends paper.Tool {
// Backspace, delete
if (event.key === 'delete' || event.key === 'backspace') {
deleteSelection(Modes.RESHAPE);
this.onUpdateSvg();
}
}
deactivateTool() {
paper.settings.handleSize = 0;
this.clearHoveredItem();
}
}
export default ReshapeTool;

8
src/helper/selection-tools/rotate-tool.js
View file

@ -1,10 +1,14 @@
import paper from 'paper';
class RotateTool {
constructor () {
/**
* @param {!function} onUpdateSvg A callback to call when the image visibly changes
*/
constructor (onUpdateSvg) {
this.rotItems = [];
this.rotGroupPivot = null;
this.prevRot = [];
this.onUpdateSvg = onUpdateSvg;
}
/**
@ -57,7 +61,7 @@ class RotateTool {
this.prevRot = [];
// @todo add back undo
// pg.undo.snapshot('rotateSelection');
this.onUpdateSvg();
}
}

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

@ -1,7 +1,10 @@
import paper from 'paper';
class ScaleTool {
constructor () {
/**
* @param {!function} onUpdateSvg A callback to call when the image visibly changes
*/
constructor (onUpdateSvg) {
this.pivot = null;
this.origPivot = null;
this.corner = null;
@ -14,6 +17,7 @@ class ScaleTool {
this.scaleItems = [];
this.boundsScaleHandles = [];
this.boundsRotHandles = [];
this.onUpdateSvg = onUpdateSvg;
}
/**
@ -113,7 +117,7 @@ class ScaleTool {
}
}
}
onMouseUp (event) {
onMouseUp () {
this.pivot = null;
this.origPivot = null;
this.corner = null;
@ -150,7 +154,7 @@ class ScaleTool {
this.itemGroup.remove();
// @todo add back undo
// pg.undo.snapshot('scaleSelection');
this.onUpdateSvg();
}
getRectCornerNameByIndex (index) {
switch (index) {

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

@ -1,11 +1,11 @@
import Modes from '../../modes/modes';
import {rectSelect} from '../guides';
import {clearSelection, processRectangularSelection} from '../selection';
import {getHoveredItem} from '../hover';
class SelectionBoxTool {
constructor () {
constructor (mode) {
this.selectionRect = null;
this.mode = mode;
}
/**
* @param {boolean} multiselect Whether to multiselect on mouse down (e.g. shift key held)

116
src/helper/selection.js
View file

@ -3,7 +3,7 @@ import Modes from '../modes/modes';
import {getAllPaperItems} from './helper';
import {getItemsGroup, isGroup} from './group';
import {getRootItem, isGroupItem, isCompoundPathItem, isPathItem, isPGTextItem} from './item';
import {getRootItem, isCompoundPathItem, isBoundsItem, isPathItem, isPGTextItem} from './item';
import {getItemsCompoundPath, isCompoundPath, isCompoundPathChild} from './compound-path';
const getAllSelectableItems = function () {
@ -34,37 +34,40 @@ const selectItemSegments = function (item, state) {
}
};
const setGroupSelection = function (root, selected) {
// fully selected segments need to be unselected first
root.fullySelected = false;
// then the item can be normally selected
const setGroupSelection = function (root, selected, fullySelected) {
root.fullySelected = fullySelected;
root.selected = selected;
// select children of compound-path or group
if (isCompoundPath(root) || isGroup(root)) {
const children = root.children;
if (children) {
for (let i = 0; i < children.length; i++) {
children[i].selected = selected;
for (const child of children) {
if (isGroup(child)) {
setGroupSelection(child, selected, fullySelected);
} else {
child.fullySelected = fullySelected;
child.selected = selected;
}
}
}
}
};
const setItemSelection = function (item, state) {
const setItemSelection = function (item, state, fullySelected) {
const parentGroup = getItemsGroup(item);
const itemsCompoundPath = getItemsCompoundPath(item);
// if selection is in a group, select group
if (parentGroup) {
// do it recursive
setItemSelection(parentGroup, state);
setItemSelection(parentGroup, state, fullySelected);
} else if (itemsCompoundPath) {
setGroupSelection(itemsCompoundPath, state);
setGroupSelection(itemsCompoundPath, state, fullySelected);
} else {
if (item.data && item.data.noSelect) {
return;
}
setGroupSelection(item, state);
setGroupSelection(item, state, fullySelected);
}
// @todo: Update toolbar state on change
@ -311,34 +314,34 @@ const getSelectedPaths = function () {
return paths;
};
// const checkBoundsItem = function (selectionRect, item, event) {
// const itemBounds = new paper.Path([
// item.localToGlobal(item.internalBounds.topLeft),
// item.localToGlobal(item.internalBounds.topRight),
// item.localToGlobal(item.internalBounds.bottomRight),
// item.localToGlobal(item.internalBounds.bottomLeft)
// ]);
// itemBounds.closed = true;
// itemBounds.guide = true;
const checkBoundsItem = function (selectionRect, item, event) {
const itemBounds = new paper.Path([
item.localToGlobal(item.internalBounds.topLeft),
item.localToGlobal(item.internalBounds.topRight),
item.localToGlobal(item.internalBounds.bottomRight),
item.localToGlobal(item.internalBounds.bottomLeft)
]);
itemBounds.closed = true;
itemBounds.guide = true;
// for (let i = 0; i < itemBounds.segments.length; i++) {
// const seg = itemBounds.segments[i];
// if (selectionRect.contains(seg.point) ||
// (i === 0 && selectionRect.getIntersections(itemBounds).length > 0)) {
// if (event.modifiers.shift && item.selected) {
// setItemSelection(item, false);
for (let i = 0; i < itemBounds.segments.length; i++) {
const seg = itemBounds.segments[i];
if (selectionRect.contains(seg.point) ||
(i === 0 && selectionRect.getIntersections(itemBounds).length > 0)) {
if (event.modifiers.shift && item.selected) {
setItemSelection(item, false);
// } else {
// setItemSelection(item, true);
// }
// itemBounds.remove();
// return true;
} else {
setItemSelection(item, true);
}
itemBounds.remove();
return true;
// }
// }
}
}
// itemBounds.remove();
// };
itemBounds.remove();
};
const handleRectangularSelectionItems = function (item, event, rect, mode) {
if (isPathItem(item)) {
@ -355,11 +358,9 @@ const handleRectangularSelectionItems = function (item, event, rect, mode) {
seg.selected = true;
}
segmentMode = true;
} else {
if (event.modifiers.shift && item.selected) {
setItemSelection(item, false);
} else {
setItemSelection(item, true);
}
@ -371,7 +372,7 @@ const handleRectangularSelectionItems = function (item, event, rect, mode) {
// second round checks for path intersections
const intersections = item.getIntersections(rect);
if (intersections.length > 0 && !segmentMode) {
// if in detail select mode, select the curves that intersect
// if in reshape mode, select the curves that intersect
// with the selectionRect
if (mode === Modes.RESHAPE) {
for (let k = 0; k < intersections.length; k++) {
@ -389,7 +390,6 @@ const handleRectangularSelectionItems = function (item, event, rect, mode) {
curve.selected = true;
}
}
} else {
if (event.modifiers.shift && item.selected) {
setItemSelection(item, false);
@ -402,10 +402,10 @@ const handleRectangularSelectionItems = function (item, event, rect, mode) {
}
// @todo: Update toolbar state on change
// } else if (isBoundsItem(item)) {
// if (checkBoundsItem(rect, item, event)) {
// return false;
// }
} else if (isBoundsItem(item)) {
if (checkBoundsItem(rect, item, event)) {
return false;
}
}
return true;
};
@ -417,9 +417,8 @@ const rectangularSelectionGroupLoop = function (group, rect, root, event, mode)
if (isGroup(child) || isCompoundPathItem(child)) {
rectangularSelectionGroupLoop(child, rect, root, event, mode);
} else if (!handleRectangularSelectionItems(child, event, rect, mode)) {
return false;
} else {
handleRectangularSelectionItems(child, event, rect, mode);
}
}
return true;
@ -428,20 +427,16 @@ const rectangularSelectionGroupLoop = function (group, rect, root, event, mode)
const processRectangularSelection = function (event, rect, mode) {
const allItems = getAllSelectableItems();
itemLoop:
for (let i = 0; i < allItems.length; i++) {
const item = allItems[i];
if (mode === Modes.RESHAPE && isPGTextItem(getRootItem(item))) {
continue itemLoop;
continue;
}
// check for item segment points inside selectionRect
if (isGroup(item) || isCompoundPathItem(item)) {
if (!rectangularSelectionGroupLoop(item, rect, item, event, mode)) {
continue itemLoop;
}
} else if (!handleRectangularSelectionItems(item, event, rect, mode)) {
continue itemLoop;
rectangularSelectionGroupLoop(item, rect, item, event, mode);
} else {
handleRectangularSelectionItems(item, event, rect, mode);
}
}
};
@ -455,23 +450,15 @@ const selectRootItem = function () {
for (const item of items) {
if (isCompoundPathChild(item)) {
const cp = getItemsCompoundPath(item);
setItemSelection(cp, true);
setItemSelection(cp, true, true /* fullySelected */);
}
const rootItem = getRootItem(item);
if (item !== rootItem) {
setItemSelection(item, false);
setItemSelection(rootItem, true);
setItemSelection(rootItem, true, true /* fullySelected */);
}
}
};
const selectSubItems = function () {
// when switching to the reshape tool while having a compound path or group
// selected, deselect the group and select the children instead.
// TODO
};
const shouldShowIfSelection = function () {
return getSelectedItems().length > 0;
};
@ -500,7 +487,6 @@ export {
removeSelectedSegments,
processRectangularSelection,
selectRootItem,
selectSubItems,
shouldShowIfSelection,
shouldShowIfSelectionRecursive,
shouldShowSelectAll