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

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

src/helper/selection-tools/select-tool.js

@@ -96,6 +96,7 @@ class SelectTool extends paper.Tool {
         // Backspace, delete
         if (event.key === 'delete' || event.key === 'backspace') {
             deleteSelection(Modes.SELECT);
+            this.boundingBoxTool.removeBoundsPath();
             this.onUpdateSvg();
         }
     }

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

src/helper/selection.js

@@ -6,6 +6,10 @@ import {getItemsGroup, isGroup} from './group';
 import {getRootItem, isBoundsItem, isCompoundPathItem, 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,19 +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 selected, deselect the child and select the compound path
-    // instead. (otherwise the compound path breaks because of scale-grouping)
     const items = getSelectedItems();
     for (const item of items) {
         if (isCompoundPathChild(item)) {