Fix select tool being able to select sub pieces of groups, fix bounding box showing after delete

This commit is contained in:
DD 2017-09-22 11:10:17 -04:00
parent 340316565b
commit dc66283bd2
4 changed files with 33 additions and 10 deletions

View file

@ -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<paper.item>} all top-level (direct descendants of a paper.Layer) items
*/
const getAllPaperItems = function (includeGuides) {
includeGuides = includeGuides || false;
const allItems = [];

View file

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

View file

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

View file

@ -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<paper.item>} 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)) {