From e8c33c8779589bc18c610bc0129d470f0e50c672 Mon Sep 17 00:00:00 2001
From: DD Liu <liudi@media.mit.edu>
Date: Tue, 11 Feb 2020 21:44:45 -0500
Subject: [PATCH] Change the opacity code so that the crosshair stays opaque
 over the entirety of the selection

---
 src/helper/layer.js                     |  4 ++-
 src/helper/selection-tools/move-tool.js | 40 ++++++++++++++++++++++---
 2 files changed, 39 insertions(+), 5 deletions(-)

diff --git a/src/helper/layer.js b/src/helper/layer.js
index 2c3eafbf..31c6aa1d 100644
--- a/src/helper/layer.js
+++ b/src/helper/layer.js
@@ -4,6 +4,7 @@ import {ART_BOARD_WIDTH, ART_BOARD_HEIGHT, CENTER} from './view';
 import {isGroupItem} from './item';
 
 const CROSSHAIR_SIZE = 16;
+const CROSSHAIR_FULL_OPACITY = 0.65;
 
 const _getLayer = function (layerString) {
     for (const layer of paper.project.layers) {
@@ -234,7 +235,7 @@ const _makeCrosshair = function (opacity, parent) {
 
 const _makeDragCrosshairLayer = function () {
     const dragCrosshairLayer = new paper.Layer();
-    _makeCrosshair(0.65, dragCrosshairLayer);
+    _makeCrosshair(CROSSHAIR_FULL_OPACITY, dragCrosshairLayer);
     dragCrosshairLayer.data.isDragCrosshairLayer = true;
     dragCrosshairLayer.visible = false;
     return dragCrosshairLayer;
@@ -270,6 +271,7 @@ const setupLayers = function () {
 
 export {
     CROSSHAIR_SIZE,
+    CROSSHAIR_FULL_OPACITY,
     createCanvas,
     hideGuideLayers,
     showGuideLayers,
diff --git a/src/helper/selection-tools/move-tool.js b/src/helper/selection-tools/move-tool.js
index ca3e93b3..06bd703c 100644
--- a/src/helper/selection-tools/move-tool.js
+++ b/src/helper/selection-tools/move-tool.js
@@ -6,10 +6,11 @@ import {checkPointsClose, snapDeltaToAngle} from '../math';
 import {ART_BOARD_WIDTH, ART_BOARD_HEIGHT, CENTER} from '../view';
 import {clearSelection, cloneSelection, getSelectedLeafItems, getSelectedRootItems, setItemSelection}
     from '../selection';
-import {getDragCrosshairLayer} from '../layer';
+import {getDragCrosshairLayer, CROSSHAIR_FULL_OPACITY} from '../layer';
 
 /** Snap to align selection center to rotation center within this distance */
 const SNAPPING_THRESHOLD = 4;
+const FADE_DISTANCE = 10;
 
 /**
  * Tool to handle dragging an item to reposition it in a selection mode.
@@ -138,7 +139,11 @@ class MoveTool {
                 snapVector = CENTER.subtract(this.selectionCenter);
             }
         }
+        if (this.selectedItems.length === 0) {
+            return;
+        }
 
+        let bounds;
         for (const item of this.selectedItems) {
             // add the position of the item before the drag started
             // for later use in the snap calculation
@@ -153,6 +158,12 @@ class MoveTool {
             } else {
                 item.position = item.data.origPos.add(dragVector);
             }
+
+            if (bounds) {
+                bounds = bounds.unite(item.bounds);
+            } else {
+                bounds = item.bounds;
+            }
         }
         
         if (this.firstDrag) {
@@ -160,9 +171,30 @@ class MoveTool {
             getDragCrosshairLayer().visible = true;
             this.firstDrag = false;
         }
-        const opacity = Math.max(0,
-            1 - ((CENTER.getDistance(this.selectionCenter.add(dragVector)) / CENTER.x) * (4 * paper.view.zoom)));
-        getDragCrosshairLayer().opacity = opacity;
+
+        let opacityMultiplier = 1;
+        const newCenter = this.selectionCenter.add(dragVector);
+        if ((CENTER.y < bounds.top && CENTER.x < bounds.left) ||
+            (CENTER.y > bounds.bottom && CENTER.x < bounds.left) ||
+            (CENTER.y < bounds.top && CENTER.x > bounds.right) ||
+            (CENTER.y > bounds.bottom && CENTER.x > bounds.right)) {
+            // 4 corners
+            const distX = Math.max(CENTER.x - bounds.right, bounds.left - CENTER.x);
+            const distY = Math.max(CENTER.y - bounds.bottom, bounds.top - CENTER.y);
+            const dist = Math.sqrt((distX * distX) + (distY * distY));
+            opacityMultiplier =
+                Math.max(0, (1 - (dist / (FADE_DISTANCE / paper.view.zoom))));
+        } else if (CENTER.y < bounds.top || CENTER.y > bounds.bottom) {
+            // above or below
+            opacityMultiplier = Math.max(0,
+                (1 - ((Math.abs(CENTER.y - newCenter.y) - (bounds.height / 2)) / (FADE_DISTANCE / paper.view.zoom))));
+        } else if (CENTER.x < bounds.left || CENTER.x > bounds.right) {
+            // left or right
+            opacityMultiplier = Math.max(0,
+                (1 - ((Math.abs(CENTER.x - newCenter.x) - (bounds.width / 2)) / (FADE_DISTANCE / paper.view.zoom))));
+        } // else within selection bounds, always show drag crosshair at full opacity
+        getDragCrosshairLayer().opacity = CROSSHAIR_FULL_OPACITY * opacityMultiplier;
+
     }
     onMouseUp () {
         this.firstDrag = false;