Merge pull request #214 from fsih/selectionBoxHandles

Selection box handles

src/helper/hover.js

@@ -11,6 +11,7 @@ import {isGroupChild} from './group';
  * @return {paper.Item} the hovered item or null if there is none
  */
 const getHoveredItem = function (event, hitOptions, subselect) {
+    // @todo make hit test only hit painting layer
     const hitResults = paper.project.hitTestAll(event.point, hitOptions);
     if (hitResults.length === 0) {
         return null;

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

@@ -150,16 +150,40 @@ class BoundingBoxTool {
         this.boundsPath.data.isSelectionBound = true;
         this.boundsPath.data.isHelperItem = true;
         this.boundsPath.fillColor = null;
-        this.boundsPath.fullySelected = true;
         this.boundsPath.parent = getGuideLayer();
+        this.boundsPath.strokeWidth = 1 / paper.view.zoom;
+        this.boundsPath.strokeColor = getGuideColor();
+        
+        // Make a template to copy
+        const boundsScaleCircleShadow =
+            new paper.Path.Circle({
+                center: new paper.Point(0, 0),
+                radius: 5.5 / paper.view.zoom,
+                fillColor: 'black',
+                opacity: .12,
+                data: {
+                    isHelperItem: true,
+                    noSelect: true,
+                    noHover: true
+                }
+            });
+        const boundsScaleCircle =
+            new paper.Path.Circle({
+                center: new paper.Point(0, 0),
+                radius: 4 / paper.view.zoom,
+                fillColor: getGuideColor(),
+                data: {
+                    isScaleHandle: true,
+                    isHelperItem: true,
+                    noSelect: true,
+                    noHover: true
+                }
+            });
+        const boundsScaleHandle = new paper.Group([boundsScaleCircleShadow, boundsScaleCircle]);
+        boundsScaleHandle.parent = getGuideLayer();
 
         for (let index = 0; index < this.boundsPath.segments.length; index++) {
             const segment = this.boundsPath.segments[index];
-            let size = 4;
-            
-            if (index % 2 === 0) {
-                size = 6;
-            }
             
             if (index === 7) {
                 const offset = new paper.Point(0, 20);
@@ -187,21 +211,21 @@ class BoundingBoxTool {
                 this.boundsRotHandles[index] = rotHandle;
             }
             
-            this.boundsScaleHandles[index] =
+            this.boundsScaleHandles[index] = boundsScaleHandle.clone();
-                new paper.Path.Rectangle({
+            this.boundsScaleHandles[index].position = segment.point;
-                    center: segment.point,
+            for (const child of this.boundsScaleHandles[index].children) {
-                    data: {
+                child.data.index = index;
-                        index: index,
+            }
-                        isScaleHandle: true,
+            this.boundsScaleHandles[index].data = {
-                        isHelperItem: true,
+                index: index,
-                        noSelect: true,
+                isScaleHandle: true,
-                        noHover: true
+                isHelperItem: true,
-                    },
+                noSelect: true,
-                    size: [size / paper.view.zoom, size / paper.view.zoom],
+                noHover: true
-                    fillColor: getGuideColor(),
+            };
-                    parent: getGuideLayer()
-                });
         }
+        // Remove the template
+        boundsScaleHandle.remove();
     }
     removeBoundsPath () {
         removeBoundsPath();