[OHIF-248] hideHandlesIfMoving (#1257)

* hideHandlesOnEdit * feat: 🎸 hideHandlesOnMove hides handles whilst they are edited * Highlight ellipse active when mouse over handle. * Reset defaults. * Fix unit tests
cornerstonejs · Jul 2, 2020 · e2c2906 · e2c2906
1 parent c9e6fa3
commit e2c2906
Show file tree

Hide file tree

Showing 14 changed files with 57 additions and 6 deletions.
diff --git a/src/drawing/drawHandles.js b/src/drawing/drawHandles.js
@@ -39,6 +39,9 @@ export default function(context, evtDetail, handles, options = {}) {
     if (options.drawHandlesIfActive === true && !handle.active) {
       continue;
     }
+    if (options.hideHandlesIfMoving && handle.moving) {
+      continue;
+    }
 
     const lineWidth = handle.active
       ? toolStyle.getActiveWidth()

diff --git a/src/manipulators/moveHandle.js b/src/manipulators/moveHandle.js
@@ -115,6 +115,7 @@ export default function(
   );
 
   handle.active = true;
+  handle.moving = true;
   annotation.active = true;
   state.isToolLocked = true;
 
@@ -270,6 +271,7 @@ function _endHandler(
   const element = evtDetail.element;
 
   handle.active = false;
+  handle.moving = false;
   annotation.active = false;
   annotation.invalidated = true;
   runAnimation.value = false;

diff --git a/src/manipulators/moveNewHandle.js b/src/manipulators/moveNewHandle.js
@@ -66,6 +66,7 @@ export default function(
 
   annotation.active = true;
 
+  handle.moving = true;
   handle.active = true;
   state.isToolLocked = true;
 
@@ -252,6 +253,7 @@ function _moveEndHandler(
   annotation.active = false;
   annotation.invalidated = true;
   handle.active = false;
+  handle.moving = false;
   handle.x = targetLocation.x;
   handle.y = targetLocation.y;
 

diff --git a/src/tools/annotation/AngleTool.js b/src/tools/annotation/AngleTool.js
@@ -47,6 +47,8 @@ export default class AngleTool extends BaseAnnotationTool {
       svgCursor: angleCursor,
       configuration: {
         drawHandles: true,
+        drawHandlesOnHover: false,
+        hideHandlesIfMoving: false,
         renderDashed: false,
       },
     };
@@ -142,6 +144,7 @@ export default class AngleTool extends BaseAnnotationTool {
     const {
       handleRadius,
       drawHandlesOnHover,
+      hideHandlesIfMoving,
       renderDashed,
     } = this.configuration;
     // If we have no toolData for this element, return immediately as there is nothing to do
@@ -200,6 +203,7 @@ export default class AngleTool extends BaseAnnotationTool {
           color,
           handleRadius,
           drawHandlesIfActive: drawHandlesOnHover,
+          hideHandlesIfMoving,
         };
 
         if (this.configuration.drawHandles) {

diff --git a/src/tools/annotation/ArrowAnnotateTool.js b/src/tools/annotation/ArrowAnnotateTool.js
@@ -39,8 +39,9 @@ export default class ArrowAnnotateTool extends BaseAnnotationTool {
       configuration: {
         getTextCallback,
         changeTextCallback,
-        drawHandles: false,
-        drawHandlesOnHover: true,
+        drawHandles: true,
+        drawHandlesOnHover: false,
+        hideHandlesIfMoving: false,
         arrowFirst: true,
         renderDashed: false,
       },
@@ -102,6 +103,7 @@ export default class ArrowAnnotateTool extends BaseAnnotationTool {
     const {
       handleRadius,
       drawHandlesOnHover,
+      hideHandlesIfMoving,
       renderDashed,
     } = this.configuration;
 
@@ -170,6 +172,7 @@ export default class ArrowAnnotateTool extends BaseAnnotationTool {
           color,
           handleRadius,
           drawHandlesIfActive: drawHandlesOnHover,
+          hideHandlesIfMoving,
         };
 
         if (this.configuration.drawHandles) {

diff --git a/src/tools/annotation/BidirectionalTool.js b/src/tools/annotation/BidirectionalTool.js
@@ -37,6 +37,7 @@ export default class BidirectionalTool extends BaseAnnotationTool {
         shadow: '',
         drawHandles: true,
         drawHandlesOnHover: true,
+        hideHandlesIfMoving: false,
         renderDashed: false,
         additionalData: [],
       },

diff --git a/src/tools/annotation/CircleRoiTool.js b/src/tools/annotation/CircleRoiTool.js
@@ -46,6 +46,7 @@ export default class CircleRoiTool extends BaseAnnotationTool {
       svgCursor: circleRoiCursor,
       configuration: {
         renderDashed: false,
+        hideHandlesIfMoving: false,
       },
     };
 
@@ -171,6 +172,7 @@ export default class CircleRoiTool extends BaseAnnotationTool {
     const {
       handleRadius,
       drawHandlesOnHover,
+      hideHandlesIfMoving,
       renderDashed,
     } = this.configuration;
     const newContext = getNewContext(canvasContext.canvas);
@@ -201,6 +203,7 @@ export default class CircleRoiTool extends BaseAnnotationTool {
           color,
           handleRadius,
           drawHandlesIfActive: drawHandlesOnHover,
+          hideHandlesIfMoving,
         };
 
         setShadow(context, this.configuration);

diff --git a/src/tools/annotation/CobbAngleTool.js b/src/tools/annotation/CobbAngleTool.js
@@ -44,6 +44,8 @@ export default class CobbAngleTool extends BaseAnnotationTool {
       svgCursor: cobbAngleCursor,
       configuration: {
         drawHandles: true,
+        drawHandlesOnHover: false,
+        hideHandlesIfMoving: false,
         renderDashed: false,
       },
     };
@@ -164,6 +166,7 @@ export default class CobbAngleTool extends BaseAnnotationTool {
     const {
       handleRadius,
       drawHandlesOnHover,
+      hideHandlesIfMoving,
       renderDashed,
     } = this.configuration;
     // If we have no toolData for this element, return immediately as there is nothing to do
@@ -222,6 +225,7 @@ export default class CobbAngleTool extends BaseAnnotationTool {
           color,
           handleRadius,
           drawHandlesIfActive: drawHandlesOnHover,
+          hideHandlesIfMoving,
         };
 
         if (this.configuration.drawHandles) {

diff --git a/src/tools/annotation/EllipticalRoiTool.js b/src/tools/annotation/EllipticalRoiTool.js
@@ -5,6 +5,7 @@ import BaseAnnotationTool from '../base/BaseAnnotationTool.js';
 import { getToolState } from './../../stateManagement/toolState.js';
 import toolStyle from './../../stateManagement/toolStyle.js';
 import toolColors from './../../stateManagement/toolColors.js';
+import getHandleNearImagePoint from '../../manipulators/getHandleNearImagePoint';
 
 // Drawing
 import {
@@ -48,6 +49,8 @@ export default class EllipticalRoiTool extends BaseAnnotationTool {
       configuration: {
         // showMinMax: false,
         // showHounsfieldUnits: true,
+        drawHandlesOnHover: false,
+        hideHandlesIfMoving: false,
         renderDashed: false,
       },
       svgCursor: ellipticalRoiCursor,
@@ -116,6 +119,17 @@ export default class EllipticalRoiTool extends BaseAnnotationTool {
       return false;
     }
 
+    const handleNearImagePoint = getHandleNearImagePoint(
+      element,
+      data.handles,
+      coords,
+      6
+    );
+
+    if (handleNearImagePoint) {
+      return true;
+    }
+
     const distance = interactionType === 'mouse' ? 15 : 25;
     const startCanvas = external.cornerstone.pixelToCanvas(
       element,
@@ -183,6 +197,7 @@ export default class EllipticalRoiTool extends BaseAnnotationTool {
     const {
       handleRadius,
       drawHandlesOnHover,
+      hideHandlesIfMoving,
       renderDashed,
     } = this.configuration;
     const context = getNewContext(eventData.canvasContext.canvas);
@@ -212,6 +227,7 @@ export default class EllipticalRoiTool extends BaseAnnotationTool {
           color,
           handleRadius,
           drawHandlesIfActive: drawHandlesOnHover,
+          hideHandlesIfMoving,
         };
 
         setShadow(context, this.configuration);

diff --git a/src/tools/annotation/EllipticalRoiTool.test.js b/src/tools/annotation/EllipticalRoiTool.test.js
@@ -136,9 +136,7 @@ describe('EllipticalRoiTool.js', () => {
     // Todo: Not sure we want all of our methods to check for valid params.
     it('emits a console warning when measurementData without start/end handles are supplied', () => {
       const instantiatedTool = new EllipticalRoiTool();
-      const noHandlesMeasurementData = {
-        handles: {},
-      };
+      const noHandlesMeasurementData = {};
       const logger = getLogger();
 
       instantiatedTool.pointNearTool(element, noHandlesMeasurementData, coords);

diff --git a/src/tools/annotation/LengthTool.js b/src/tools/annotation/LengthTool.js
@@ -36,6 +36,8 @@ export default class LengthTool extends BaseAnnotationTool {
       svgCursor: lengthCursor,
       configuration: {
         drawHandles: true,
+        drawHandlesOnHover: false,
+        hideHandlesIfMoving: false,
         renderDashed: false,
       },
     };
@@ -142,6 +144,7 @@ export default class LengthTool extends BaseAnnotationTool {
     const {
       handleRadius,
       drawHandlesOnHover,
+      hideHandlesIfMoving,
       renderDashed,
     } = this.configuration;
     const toolData = getToolState(evt.currentTarget, this.name);
@@ -191,6 +194,7 @@ export default class LengthTool extends BaseAnnotationTool {
           color,
           handleRadius,
           drawHandlesIfActive: drawHandlesOnHover,
+          hideHandlesIfMoving,
         };
 
         if (this.configuration.drawHandles) {

diff --git a/src/tools/annotation/RectangleRoiTool.js b/src/tools/annotation/RectangleRoiTool.js
@@ -43,6 +43,8 @@ export default class RectangleRoiTool extends BaseAnnotationTool {
       supportedInteractionTypes: ['Mouse', 'Touch'],
       configuration: {
         drawHandles: true,
+        drawHandlesOnHover: false,
+        hideHandlesIfMoving: false,
         renderDashed: false,
         // showMinMax: false,
         // showHounsfieldUnits: true
@@ -171,6 +173,7 @@ export default class RectangleRoiTool extends BaseAnnotationTool {
     const {
       handleRadius,
       drawHandlesOnHover,
+      hideHandlesIfMoving,
       renderDashed,
     } = this.configuration;
     const context = getNewContext(eventData.canvasContext.canvas);
@@ -200,6 +203,7 @@ export default class RectangleRoiTool extends BaseAnnotationTool {
           color,
           handleRadius,
           drawHandlesIfActive: drawHandlesOnHover,
+          hideHandlesIfMoving,
         };
 
         setShadow(context, this.configuration);

diff --git a/src/tools/annotation/bidirectionalTool/moveHandle/moveHandle.js b/src/tools/annotation/bidirectionalTool/moveHandle/moveHandle.js
@@ -64,6 +64,7 @@ export default function(
   };
 
   handle.active = true;
+  handle.moving = true;
   state.isToolLocked = true;
 
   element.addEventListener(EVENTS.MOUSE_DRAG, _dragCallback);

diff --git a/src/tools/annotation/bidirectionalTool/renderToolData.js b/src/tools/annotation/bidirectionalTool/renderToolData.js
@@ -18,7 +18,12 @@ import getPixelSpacing from '../../../util/getPixelSpacing';
 export default function(evt) {
   const eventData = evt.detail;
   const { element, canvasContext, image } = eventData;
-  const { handleRadius, drawHandlesOnHover, renderDashed } = this.configuration;
+  const {
+    handleRadius,
+    drawHandlesOnHover,
+    hideHandlesIfMoving,
+    renderDashed,
+  } = this.configuration;
 
   const lineDash = getModule('globalConfiguration').configuration.lineDash;
 
@@ -102,6 +107,7 @@ export default function(evt) {
         color,
         handleRadius,
         drawHandlesIfActive: drawHandlesOnHover,
+        hideHandlesIfMoving,
       };
 
       // Draw the handles