feat: Event cancelling for manipulators (#1195)

* Adding inFlight manipulators handling * quick notes w/ james * Working manipulator cancellation. Co-authored-by: Bruno Alves de Faria <[email protected]> Co-authored-by: Danny <[email protected]>
cornerstonejs · Mar 24, 2020 · 3987557 · 3987557
1 parent b4afdef
commit 3987557
Show file tree

Hide file tree

Showing 11 changed files with 443 additions and 111 deletions.
diff --git a/src/eventDispatchers/mouseEventHandlers/addNewMeasurement.js b/src/eventDispatchers/mouseEventHandlers/addNewMeasurement.js
@@ -20,7 +20,6 @@ export default function(evt, tool) {
     return;
   }
 
-  // Associate this data with this imageId so we can render it and manipulate it
   addToolState(element, tool.name, measurementData);
 
   external.cornerstone.updateImage(element);

diff --git a/src/manipulators/moveAllHandles.js b/src/manipulators/moveAllHandles.js
@@ -8,9 +8,12 @@ import { state } from './../store/index.js';
 import getActiveTool from '../util/getActiveTool';
 import BaseAnnotationTool from '../tools/base/BaseAnnotationTool';
 import { getLogger } from '../util/logger.js';
+import { getModule } from '../store';
 
 const logger = getLogger('manipulators:moveAllHandles');
 
+const manipulatorStateModule = getModule('manipulatorState');
+
 const _dragEvents = {
   mouse: [EVENTS.MOUSE_DRAG],
   touch: [EVENTS.TOUCH_DRAG],
@@ -86,6 +89,19 @@ export default function(
     );
   };
 
+  manipulatorStateModule.setters.addActiveManipulatorForElement(
+    element,
+    _cancelEventHandler.bind(
+      null,
+      annotation,
+      options,
+      interactionType,
+      { dragHandler, upOrEndHandler },
+      element,
+      doneMovingCallback
+    )
+  );
+
   annotation.active = true;
   state.isToolLocked = true;
 
@@ -156,6 +172,25 @@ function _dragHandler(
   evt.stopPropagation();
 }
 
+function _cancelEventHandler(
+  annotation,
+  options = {},
+  interactionType,
+  { dragHandler, upOrEndHandler },
+  element,
+  doneMovingCallback
+) {
+  _endHandler(
+    annotation,
+    options,
+    interactionType,
+    { dragHandler, upOrEndHandler },
+    element,
+    doneMovingCallback,
+    false
+  );
+}
+
 function _upOrEndHandler(
   toolName,
   annotation,
@@ -166,8 +201,37 @@ function _upOrEndHandler(
   doneMovingCallback
 ) {
   const eventData = evt.detail;
-  const element = evt.detail.element;
+  const { element } = eventData;
+  manipulatorStateModule.setters.removeActiveManipulatorForElement(element);
 
+  // If any handle is outside the image, delete the tool data
+  if (
+    options.deleteIfHandleOutsideImage &&
+    anyHandlesOutsideImage(eventData, annotation.handles)
+  ) {
+    removeToolState(element, toolName, annotation);
+  }
+
+  _endHandler(
+    annotation,
+    options,
+    interactionType,
+    { dragHandler, upOrEndHandler },
+    element,
+    doneMovingCallback,
+    true
+  );
+}
+
+function _endHandler(
+  annotation,
+  options = {},
+  interactionType,
+  { dragHandler, upOrEndHandler },
+  element,
+  doneMovingCallback,
+  success = true
+) {
   annotation.active = false;
   annotation.invalidated = true;
   state.isToolLocked = false;
@@ -180,23 +244,15 @@ function _upOrEndHandler(
     element.removeEventListener(eventType, upOrEndHandler);
   });
 
-  // If any handle is outside the image, delete the tool data
-  if (
-    options.deleteIfHandleOutsideImage &&
-    anyHandlesOutsideImage(eventData, annotation.handles)
-  ) {
-    removeToolState(element, toolName, annotation);
-  }
-
   if (typeof options.doneMovingCallback === 'function') {
     logger.warn(
       '`options.doneMovingCallback` has been depricated. See https://github.com/cornerstonejs/cornerstoneTools/pull/915 for details.'
     );
-    options.doneMovingCallback();
+    options.doneMovingCallback(success);
   }
 
   if (typeof doneMovingCallback === 'function') {
-    doneMovingCallback();
+    doneMovingCallback(success);
   }
 
   external.cornerstone.updateImage(element);

diff --git a/src/manipulators/moveHandle.js b/src/manipulators/moveHandle.js
@@ -8,9 +8,12 @@ import { state } from './../store/index.js';
 import getActiveTool from '../util/getActiveTool';
 import BaseAnnotationTool from '../tools/base/BaseAnnotationTool';
 import { getLogger } from '../util/logger.js';
+import { getModule } from '../store';
 
 const logger = getLogger('manipulators:moveHandle');
 
+const manipulatorStateModule = getModule('manipulatorState');
+
 const runAnimation = {
   value: false,
 };
@@ -89,11 +92,28 @@ export default function(
         dragHandler,
         upOrEndHandler,
       },
-      evt,
       doneMovingCallback
     );
   };
 
+  manipulatorStateModule.setters.addActiveManipulatorForElement(
+    element,
+    _cancelEventHandler.bind(
+      null,
+      toolName,
+      evtDetail,
+      annotation,
+      handle,
+      options,
+      interactionType,
+      {
+        dragHandler,
+        upOrEndHandler,
+      },
+      doneMovingCallback
+    )
+  );
+
   handle.active = true;
   annotation.active = true;
   state.isToolLocked = true;
@@ -179,6 +199,29 @@ function _dragHandler(
   triggerEvent(element, eventType, modifiedEventData);
 }
 
+function _cancelEventHandler(
+  toolName,
+  evtDetail,
+  annotation,
+  handle,
+  options = {},
+  interactionType,
+  { dragHandler, upOrEndHandler },
+  doneMovingCallback
+) {
+  _endHandler(
+    toolName,
+    evtDetail,
+    annotation,
+    handle,
+    options,
+    interactionType,
+    { dragHandler, upOrEndHandler },
+    doneMovingCallback,
+    false
+  );
+}
+
 function _upOrEndHandler(
   toolName,
   evtDetail,
@@ -187,18 +230,42 @@ function _upOrEndHandler(
   options = {},
   interactionType,
   { dragHandler, upOrEndHandler },
-  evt,
   doneMovingCallback
 ) {
-  const image = evtDetail.currentPoints.image;
-  const element = evt.detail.element;
+  const { element } = evtDetail;
+  manipulatorStateModule.setters.removeActiveManipulatorForElement(element);
+
+  _endHandler(
+    toolName,
+    evtDetail,
+    annotation,
+    handle,
+    options,
+    interactionType,
+    { dragHandler, upOrEndHandler },
+    doneMovingCallback,
+    true
+  );
+}
+
+function _endHandler(
+  toolName,
+  evtDetail,
+  annotation,
+  handle,
+  options = {},
+  interactionType,
+  { dragHandler, upOrEndHandler },
+  doneMovingCallback,
+  success = true
+) {
+  const element = evtDetail.element;
 
   handle.active = false;
   annotation.active = false;
-  // TODO: A way to not flip this for textboxes on annotations
   annotation.invalidated = true;
-  state.isToolLocked = false;
   runAnimation.value = false;
+  state.isToolLocked = false;
 
   // Remove Event Listeners
   _dragEvents[interactionType].forEach(eventType => {
@@ -216,23 +283,23 @@ function _upOrEndHandler(
     removeToolState(element, toolName, annotation);
   }
 
-  // TODO: What dark magic makes us want to handle TOUCH_PRESS differently?
-  if (evt.type === EVENTS.TOUCH_PRESS) {
-    evt.detail.handlePressed = annotation;
-    handle.x = image.x; // Original Event
-    handle.y = image.y;
-  }
+  // // TODO: What dark magic makes us want to handle TOUCH_PRESS differently?
+  // if (evt.type === EVENTS.TOUCH_PRESS) {
+  //   evt.detail.handlePressed = annotation;
+  //   handle.x = image.x; // Original Event
+  //   handle.y = image.y;
+  // }
 
   if (typeof options.doneMovingCallback === 'function') {
     logger.warn(
       '`options.doneMovingCallback` has been depricated. See https://github.com/cornerstonejs/cornerstoneTools/pull/915 for details.'
     );
 
-    options.doneMovingCallback();
+    options.doneMovingCallback(success);
   }
 
   if (typeof doneMovingCallback === 'function') {
-    doneMovingCallback();
+    doneMovingCallback(success);
   }
 
   external.cornerstone.updateImage(element);
-Original file line number
+Diff line change
@@ Expand Up / @@ -20,7 +20,6 @@ export default function(evt, tool) { @@
         return;
       }
-      // Associate this data with this imageId so we can render it and manipulate it
       addToolState(element, tool.name, measurementData);
       external.cornerstone.updateImage(element);
@@ Expand Down @@