From accdbb0fc32fab1585a5ab072af1aedc5e6c5a52 Mon Sep 17 00:00:00 2001
From: DD <liudi08@gmail.com>
Date: Tue, 12 Dec 2017 11:42:19 -0500
Subject: [PATCH 1/2] Selection box handle design

---
 .../selection-tools/bounding-box-tool.js      | 61 +++++++++++++------
 1 file changed, 41 insertions(+), 20 deletions(-)

diff --git a/src/helper/selection-tools/bounding-box-tool.js b/src/helper/selection-tools/bounding-box-tool.js
index 8d7c4ec3..4e649014 100644
--- a/src/helper/selection-tools/bounding-box-tool.js
+++ b/src/helper/selection-tools/bounding-box-tool.js
@@ -150,16 +150,39 @@ 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();
         
+        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,20 +210,18 @@ class BoundingBoxTool {
                 this.boundsRotHandles[index] = rotHandle;
             }
             
-            this.boundsScaleHandles[index] =
-                new paper.Path.Rectangle({
-                    center: segment.point,
-                    data: {
-                        index: index,
-                        isScaleHandle: true,
-                        isHelperItem: true,
-                        noSelect: true,
-                        noHover: true
-                    },
-                    size: [size / paper.view.zoom, size / paper.view.zoom],
-                    fillColor: getGuideColor(),
-                    parent: getGuideLayer()
-                });
+            this.boundsScaleHandles[index] = boundsScaleHandle.clone();
+            this.boundsScaleHandles[index].position = segment.point;
+            for (const child of this.boundsScaleHandles[index].children) {
+                child.data.index = index;
+            }
+            this.boundsScaleHandles[index].data = {
+                index: index,
+                isScaleHandle: true,
+                isHelperItem: true,
+                noSelect: true,
+                noHover: true
+            };
         }
     }
     removeBoundsPath () {

From e9392d4b2bdeeb4949c5f27e74eec48549c49837 Mon Sep 17 00:00:00 2001
From: DD <liudi08@gmail.com>
Date: Tue, 12 Dec 2017 12:23:02 -0500
Subject: [PATCH 2/2] Remove template

---
 src/helper/hover.js                             | 1 +
 src/helper/selection-tools/bounding-box-tool.js | 3 +++
 2 files changed, 4 insertions(+)

diff --git a/src/helper/hover.js b/src/helper/hover.js
index 2ae46e1f..464fca13 100644
--- a/src/helper/hover.js
+++ b/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;
diff --git a/src/helper/selection-tools/bounding-box-tool.js b/src/helper/selection-tools/bounding-box-tool.js
index 4e649014..f33978b2 100644
--- a/src/helper/selection-tools/bounding-box-tool.js
+++ b/src/helper/selection-tools/bounding-box-tool.js
@@ -154,6 +154,7 @@ class BoundingBoxTool {
         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),
@@ -223,6 +224,8 @@ class BoundingBoxTool {
                 noHover: true
             };
         }
+        // Remove the template
+        boundsScaleHandle.remove();
     }
     removeBoundsPath () {
         removeBoundsPath();