From dc66283bd2d34ced081956493e0c07641133fa0e Mon Sep 17 00:00:00 2001 From: DD Date: Fri, 22 Sep 2017 11:10:17 -0400 Subject: [PATCH] Fix select tool being able to select sub pieces of groups, fix bounding box showing after delete --- src/helper/helper.js | 5 +++ src/helper/selection-tools/select-tool.js | 2 ++ .../selection-tools/selection-box-tool.js | 3 +- src/helper/selection.js | 33 ++++++++++++++----- 4 files changed, 33 insertions(+), 10 deletions(-) diff --git a/src/helper/helper.js b/src/helper/helper.js index 7a041959..c7428106 100644 --- a/src/helper/helper.js +++ b/src/helper/helper.js @@ -1,5 +1,10 @@ import paper from 'paper'; +/** + * @param {boolean} includeGuides True if guide layer items like the bounding box should + * be included in the returned items. + * @return {Array} all top-level (direct descendants of a paper.Layer) items + */ const getAllPaperItems = function (includeGuides) { includeGuides = includeGuides || false; const allItems = []; diff --git a/src/helper/selection-tools/select-tool.js b/src/helper/selection-tools/select-tool.js index 3cb574f5..2dbb015d 100644 --- a/src/helper/selection-tools/select-tool.js +++ b/src/helper/selection-tools/select-tool.js @@ -96,6 +96,8 @@ class SelectTool extends paper.Tool { // Backspace, delete if (event.key === 'delete' || event.key === 'backspace') { deleteSelection(Modes.SELECT); + this.clearHoveredItem(); + this.boundingBoxTool.removeBoundsPath(); this.onUpdateSvg(); } } diff --git a/src/helper/selection-tools/selection-box-tool.js b/src/helper/selection-tools/selection-box-tool.js index 68f014a9..f057200f 100644 --- a/src/helper/selection-tools/selection-box-tool.js +++ b/src/helper/selection-tools/selection-box-tool.js @@ -1,4 +1,3 @@ -import Modes from '../../modes/modes'; import {rectSelect} from '../guides'; import {clearSelection, processRectangularSelection} from '../selection'; @@ -22,7 +21,7 @@ class SelectionBoxTool { } onMouseUp (event) { if (this.selectionRect) { - processRectangularSelection(event, this.selectionRect, Modes.RESHAPE); + processRectangularSelection(event, this.selectionRect, this.mode); this.selectionRect.remove(); this.selectionRect = null; } diff --git a/src/helper/selection.js b/src/helper/selection.js index c1996270..458b5f41 100644 --- a/src/helper/selection.js +++ b/src/helper/selection.js @@ -6,6 +6,10 @@ import {getItemsGroup, isGroup} from './group'; import {getRootItem, isCompoundPathItem, isBoundsItem, isPathItem, isPGTextItem} from './item'; import {getItemsCompoundPath, isCompoundPath, isCompoundPathChild} from './compound-path'; +/** + * @return {Array} all top-level (direct descendants of a paper.Layer) items + * that aren't guide items or helper items. + */ const getAllSelectableItems = function () { const allItems = getAllPaperItems(); const selectables = []; @@ -411,12 +415,12 @@ const handleRectangularSelectionItems = function (item, event, rect, mode) { }; // if the rectangular selection found a group, drill into it recursively -const rectangularSelectionGroupLoop = function (group, rect, root, event, mode) { +const _rectangularSelectionGroupLoop = function (group, rect, root, event, mode) { for (let i = 0; i < group.children.length; i++) { const child = group.children[i]; if (isGroup(child) || isCompoundPathItem(child)) { - rectangularSelectionGroupLoop(child, rect, root, event, mode); + _rectangularSelectionGroupLoop(child, rect, root, event, mode); } else { handleRectangularSelectionItems(child, event, rect, mode); } @@ -424,6 +428,14 @@ const rectangularSelectionGroupLoop = function (group, rect, root, event, mode) return true; }; +/** + * Called after drawing a selection rectangle in a select mode. In reshape mode, this + * selects all control points and curves within the rectangle. In select mode, this + * selects all items and groups that intersect the rectangle + * @param {!MouseEvent} event The mouse event to draw the rectangle + * @param {!paper.Rect} rect The selection rectangle + * @param {Modes} mode The mode of the paint editor when drawing the rectangle + */ const processRectangularSelection = function (event, rect, mode) { const allItems = getAllSelectableItems(); @@ -432,20 +444,25 @@ const processRectangularSelection = function (event, rect, mode) { if (mode === Modes.RESHAPE && isPGTextItem(getRootItem(item))) { continue; } - // check for item segment points inside selectionRect if (isGroup(item) || isCompoundPathItem(item)) { - rectangularSelectionGroupLoop(item, rect, item, event, mode); + // Drill into the group in reshape mode; check for item segment points inside + if (mode === Modes.RESHAPE) { + _rectangularSelectionGroupLoop(item, rect, item, event, mode); + } else { + setGroupSelection(item, true, true /* fullySelected */); + } } else { handleRectangularSelectionItems(item, event, rect, mode); } } }; +/** + * When switching to the select tool while having a child object of a + * compound path selected, deselect the child and select the compound path + * instead. (otherwise the compound path breaks because of scale-grouping) + */ const selectRootItem = function () { - // when switching to the select tool while having a child object of a - // compound path or group selected, select the whole compound path or - // group instead. (otherwise the compound path breaks because of - // scale-grouping) const items = getSelectedItems(true /* recursive */); for (const item of items) { if (isCompoundPathChild(item)) {