Merge pull request #222 from fsih/showOutline

Show bounding box outline when moving and scaling in the select tool

src/helper/guides.js

@@ -88,6 +88,10 @@ const removeBoundsPath = function () {
     _removePaperItemsByDataTags(['isSelectionBound', 'isRotHandle', 'isScaleHandle']);
 };
 
+const removeBoundsHandles = function () {
+    _removePaperItemsByDataTags(['isRotHandle', 'isScaleHandle']);
+};
+
 const removeAllGuides = function () {
     _removePaperItemsByTags(['guide']);
 };
@@ -113,6 +117,7 @@ export {
     hoverBounds,
     rectSelect,
     removeAllGuides,
+    removeBoundsHandles,
     removeBoundsPath,
     drawHitPoint,
     removeHitPoint,

src/helper/selection-tools/bounding-box-tool.js

@@ -2,7 +2,7 @@ import paper from '@scratch/paper';
 import keyMirror from 'keymirror';
 
 import {getSelectedRootItems} from '../selection';
-import {getGuideColor, removeBoundsPath} from '../guides';
+import {getGuideColor, removeBoundsPath, removeBoundsHandles} from '../guides';
 import {getGuideLayer} from '../layer';
 
 import ScaleTool from './scale-tool';
@@ -102,14 +102,16 @@ class BoundingBoxTool {
         };
         if (this.mode === BoundingBoxModes.MOVE) {
             this._modeMap[this.mode].onMouseDown(hitProperties);
+            this.removeBoundsHandles();
         } else if (this.mode === BoundingBoxModes.SCALE) {
             this._modeMap[this.mode].onMouseDown(hitResult, this.boundsPath, getSelectedRootItems());
+            this.removeBoundsHandles();
         } else if (this.mode === BoundingBoxModes.ROTATE) {
             this._modeMap[this.mode].onMouseDown(hitResult, this.boundsPath, getSelectedRootItems());
+            // While transforming, don't show bounds
+            this.removeBoundsPath();
         }
 
-        // While transforming, don't show bounds
-        this.removeBoundsPath();
         return true;
     }
     onMouseDrag (event) {
@@ -145,6 +147,7 @@ class BoundingBoxTool {
             this.boundsPath.curves[2].divideAtTime(0.5);
             this.boundsPath.curves[4].divideAtTime(0.5);
             this.boundsPath.curves[6].divideAtTime(0.5);
+            this._modeMap[BoundingBoxModes.MOVE].setBoundsPath(this.boundsPath);
         }
         this.boundsPath.guide = true;
         this.boundsPath.data.isSelectionBound = true;
@@ -233,6 +236,11 @@ class BoundingBoxTool {
         this.boundsScaleHandles.length = 0;
         this.boundsRotHandles.length = 0;
     }
+    removeBoundsHandles () {
+        removeBoundsHandles();
+        this.boundsScaleHandles.length = 0;
+        this.boundsRotHandles.length = 0;
+    }
 }
 
 export default BoundingBoxTool;

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

@@ -21,6 +21,7 @@ class MoveTool {
         this.clearSelectedItems = clearSelectedItems;
         this.selectedItems = null;
         this.onUpdateSvg = onUpdateSvg;
+        this.boundsPath = null;
     }
 
     /**
@@ -57,6 +58,12 @@ class MoveTool {
         }
         if (hitProperties.clone) cloneSelection(hitProperties.subselect, this.onUpdateSvg);
         this.selectedItems = this.mode === Modes.RESHAPE ? getSelectedLeafItems() : getSelectedRootItems();
+        if (this.boundsPath) {
+            this.selectedItems.push(this.boundsPath);
+        }
+    }
+    setBoundsPath (boundsPath) {
+        this.boundsPath = boundsPath;
     }
     /**
      * Sets the selection state of an item.
@@ -101,7 +108,7 @@ class MoveTool {
         let moved = false;
         // resetting the items origin point for the next usage
         for (const item of this.selectedItems) {
-            if (item.data.origPos && !item.position.equals(item.data.origPos)) {
+            if (item.data && item.data.origPos && !item.position.equals(item.data.origPos)) {
                 moved = true;
             }
             item.data.origPos = null;

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

@@ -54,6 +54,7 @@ class ScaleTool {
         }
 
         this.itemGroup = new paper.Group(selectedItems);
+        this.itemGroup.addChild(boundsPath);
         this.itemGroup.insertBelow(this.itemToInsertBelow);
         this.itemGroup.data.isHelperItem = true;
     }