@cornerstonejs/tools 2.0.0-beta.1 → 2.0.0-beta.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cornerstonejs/tools",
-  "version": "2.0.0-beta.1",
+  "version": "2.0.0-beta.3",
   "description": "Cornerstone3D Tools",
   "main": "dist/umd/index.js",
   "types": "dist/esm/index.d.ts",
@@ -29,7 +29,7 @@
     "webpack:watch": "webpack --mode development --progress --watch  --config ./.webpack/webpack.dev.js"
   },
   "dependencies": {
-    "@cornerstonejs/core": "^2.0.0-beta.1",
+    "@cornerstonejs/core": "^2.0.0-beta.3",
     "lodash.clonedeep": "4.5.0",
     "lodash.get": "^4.4.2"
   },
@@ -52,5 +52,5 @@
     "type": "individual",
     "url": "https://ohif.org/donate"
   },
-  "gitHead": "8cb0ace8dd10393a32f88507ef911ce823b0069d"
+  "gitHead": "d78cf780d4383a61ea0a9762bafa4104666757a4"
 }

package/src/drawingSvg/drawCircle.ts

@@ -3,8 +3,8 @@ import { SVGDrawingHelper } from '../types';
 
 import _getHash from './_getHash';
 
-import _setAttributesIfNecessary from './_setAttributesIfNecessary';
-import _setNewAttributesIfValid from './_setNewAttributesIfValid';
+import setAttributesIfNecessary from './setAttributesIfNecessary';
+import setNewAttributesIfValid from './setNewAttributesIfValid';
 
 function drawCircle(
   svgDrawingHelper: SVGDrawingHelper,
@@ -15,13 +15,23 @@ function drawCircle(
   options = {},
   dataId = ''
 ): void {
-  const { color, fill, width, lineWidth, lineDash } = Object.assign(
+  const {
+    color,
+    fill,
+    width,
+    lineWidth,
+    lineDash,
+    fillOpacity,
+    strokeOpacity,
+  } = Object.assign(
     {
       color: 'dodgerblue',
       fill: 'transparent',
       width: '2',
       lineDash: undefined,
       lineWidth: undefined,
+      strokeOpacity: 1,
+      fillOpacity: 1,
     },
     options
   );
@@ -42,10 +52,12 @@ function drawCircle(
     fill,
     'stroke-width': strokeWidth,
     'stroke-dasharray': lineDash,
+    'fill-opacity': fillOpacity, // setting fill opacity
+    'stroke-opacity': strokeOpacity, // setting stroke opacity
   };
 
   if (existingCircleElement) {
-    _setAttributesIfNecessary(attributes, existingCircleElement);
+    setAttributesIfNecessary(attributes, existingCircleElement);
 
     svgDrawingHelper.setNodeTouched(svgNodeHash);
   } else {
@@ -55,7 +67,7 @@ function drawCircle(
       newCircleElement.setAttribute('data-id', dataId);
     }
 
-    _setNewAttributesIfValid(attributes, newCircleElement);
+    setNewAttributesIfValid(attributes, newCircleElement);
 
     svgDrawingHelper.appendNode(newCircleElement, svgNodeHash);
   }

package/src/drawingSvg/drawEllipse.ts

@@ -2,8 +2,8 @@ import type { Types } from '@cornerstonejs/core';
 import { SVGDrawingHelper } from '../types';
 
 import _getHash from './_getHash';
-import _setAttributesIfNecessary from './_setAttributesIfNecessary';
-import _setNewAttributesIfValid from './_setNewAttributesIfValid';
+import setAttributesIfNecessary from './setAttributesIfNecessary';
+import setNewAttributesIfValid from './setNewAttributesIfValid';
 
 function drawEllipse(
   svgDrawingHelper: SVGDrawingHelper,
@@ -52,7 +52,7 @@ function drawEllipse(
   };
 
   if (existingEllipse) {
-    _setAttributesIfNecessary(attributes, existingEllipse);
+    setAttributesIfNecessary(attributes, existingEllipse);
 
     svgDrawingHelper.setNodeTouched(svgNodeHash);
   } else {
@@ -62,7 +62,7 @@ function drawEllipse(
       svgEllipseElement.setAttribute('data-id', dataId);
     }
 
-    _setNewAttributesIfValid(attributes, svgEllipseElement);
+    setNewAttributesIfValid(attributes, svgEllipseElement);
 
     svgDrawingHelper.appendNode(svgEllipseElement, svgNodeHash);
   }

package/src/drawingSvg/drawHandles.ts

@@ -1,8 +1,8 @@
 import type { Types } from '@cornerstonejs/core';
 
 import _getHash from './_getHash';
-import _setNewAttributesIfValid from './_setNewAttributesIfValid';
-import _setAttributesIfNecessary from './_setAttributesIfNecessary';
+import setNewAttributesIfValid from './setNewAttributesIfValid';
+import setAttributesIfNecessary from './setAttributesIfNecessary';
 import { SVGDrawingHelper } from '../types';
 
 function drawHandles(
@@ -75,13 +75,13 @@ function drawHandles(
     const existingHandleElement = svgDrawingHelper.getSvgNode(svgNodeHash);
 
     if (existingHandleElement) {
-      _setAttributesIfNecessary(attributes, existingHandleElement);
+      setAttributesIfNecessary(attributes, existingHandleElement);
 
       svgDrawingHelper.setNodeTouched(svgNodeHash);
     } else {
       const newHandleElement = document.createElementNS(svgns, type);
 
-      _setNewAttributesIfValid(attributes, newHandleElement);
+      setNewAttributesIfValid(attributes, newHandleElement);
 
       svgDrawingHelper.appendNode(newHandleElement, svgNodeHash);
     }

package/src/drawingSvg/drawLine.ts

@@ -1,8 +1,8 @@
 import type { Types } from '@cornerstonejs/core';
 
 import _getHash from './_getHash';
-import _setNewAttributesIfValid from './_setNewAttributesIfValid';
-import _setAttributesIfNecessary from './_setAttributesIfNecessary';
+import setNewAttributesIfValid from './setNewAttributesIfValid';
+import setAttributesIfNecessary from './setAttributesIfNecessary';
 import { SVGDrawingHelper } from '../types';
 
 export default function drawLine(
@@ -53,7 +53,7 @@ export default function drawLine(
 
   if (existingLine) {
     // This is run to avoid re-rendering annotations that actually haven't changed
-    _setAttributesIfNecessary(attributes, existingLine);
+    setAttributesIfNecessary(attributes, existingLine);
 
     svgDrawingHelper.setNodeTouched(svgNodeHash);
   } else {
@@ -63,7 +63,7 @@ export default function drawLine(
       newLine.setAttribute('data-id', dataId);
     }
 
-    _setNewAttributesIfValid(attributes, newLine);
+    setNewAttributesIfValid(attributes, newLine);
 
     svgDrawingHelper.appendNode(newLine, svgNodeHash);
   }

package/src/drawingSvg/drawPolyline.ts

@@ -1,7 +1,7 @@
 import type { Types } from '@cornerstonejs/core';
 import _getHash from './_getHash';
-import _setNewAttributesIfValid from './_setNewAttributesIfValid';
-import _setAttributesIfNecessary from './_setAttributesIfNecessary';
+import setNewAttributesIfValid from './setNewAttributesIfValid';
+import setAttributesIfNecessary from './setAttributesIfNecessary';
 import { SVGDrawingHelper } from '../types';
 
 /**
@@ -67,13 +67,13 @@ export default function drawPolyline(
 
   if (existingPolyLine) {
     // This is run to avoid re-rendering annotations that actually haven't changed
-    _setAttributesIfNecessary(attributes, existingPolyLine);
+    setAttributesIfNecessary(attributes, existingPolyLine);
 
     svgDrawingHelper.setNodeTouched(svgNodeHash);
   } else {
     const newPolyLine = document.createElementNS(svgns, 'polyline');
 
-    _setNewAttributesIfValid(attributes, newPolyLine);
+    setNewAttributesIfValid(attributes, newPolyLine);
 
     svgDrawingHelper.appendNode(newPolyLine, svgNodeHash);
   }

package/src/drawingSvg/drawRect.ts

@@ -1,8 +1,8 @@
 import type { Types } from '@cornerstonejs/core';
 
 import _getHash from './_getHash';
-import _setAttributesIfNecessary from './_setAttributesIfNecessary';
-import _setNewAttributesIfValid from './_setNewAttributesIfValid';
+import setAttributesIfNecessary from './setAttributesIfNecessary';
+import setNewAttributesIfValid from './setNewAttributesIfValid';
 import { SVGDrawingHelper } from '../types';
 
 // <rect x="120" y="100" width="100" height="100" />
@@ -53,7 +53,7 @@ export default function drawRect(
   };
 
   if (existingRect) {
-    _setAttributesIfNecessary(attributes, existingRect);
+    setAttributesIfNecessary(attributes, existingRect);
 
     svgDrawingHelper.setNodeTouched(svgNodeHash);
   } else {
@@ -63,7 +63,7 @@ export default function drawRect(
       svgRectElement.setAttribute('data-id', dataId);
     }
 
-    _setNewAttributesIfValid(attributes, svgRectElement);
+    setNewAttributesIfValid(attributes, svgRectElement);
 
     svgDrawingHelper.appendNode(svgRectElement, svgNodeHash);
   }

package/src/drawingSvg/drawTextBox.ts

@@ -2,7 +2,7 @@ import type { Types } from '@cornerstonejs/core';
 import { SVGDrawingHelper } from '../types';
 
 import _getHash from './_getHash';
-import _setAttributesIfNecessary from './_setAttributesIfNecessary';
+import setAttributesIfNecessary from './setAttributesIfNecessary';
 
 /**
  * Draws a textBox.
@@ -100,8 +100,8 @@ function _drawTextGroup(
     };
 
     // Todo: for some reason this does not work to not re-render the textBox
-    _setAttributesIfNecessary(textAttributes, textElement);
-    _setAttributesIfNecessary(textGroupAttributes, existingTextGroup);
+    setAttributesIfNecessary(textAttributes, textElement);
+    setAttributesIfNecessary(textGroupAttributes, existingTextGroup);
 
     textGroupBoundingBox = _drawTextBackground(existingTextGroup, background);
 
@@ -205,7 +205,7 @@ function _drawTextBackground(group: SVGGElement, color: string) {
     fill: color,
   };
 
-  _setAttributesIfNecessary(attributes, element);
+  setAttributesIfNecessary(attributes, element);
 
   return bBox;
 }

package/src/drawingSvg/getSvgDrawingHelper.ts

@@ -38,7 +38,10 @@ function getSvgDrawingHelper(element: HTMLDivElement): SVGDrawingHelper {
 function _getSvgLayer(element) {
   const viewportElement = `.${VIEWPORT_ELEMENT}`;
   const internalDivElement = element.querySelector(viewportElement);
-  const svgLayer = internalDivElement.querySelector('.svg-layer');
+
+  // Using :scope to make sure the right svg layer is selected otherwise it
+  // may select one from a nested viewport (eg: AdvancedMagnifyTool).
+  const svgLayer = internalDivElement.querySelector(':scope > .svg-layer');
 
   return svgLayer;
 }

package/src/drawingSvg/index.ts

@@ -8,6 +8,8 @@ import drawLinkedTextBox from './drawLinkedTextBox';
 import drawRect from './drawRect';
 import drawTextBox from './drawTextBox';
 import drawArrow from './drawArrow';
+import setAttributesIfNecessary from './setAttributesIfNecessary';
+import setNewAttributesIfValid from './setNewAttributesIfValid';
 
 export {
   draw,
@@ -20,4 +22,6 @@ export {
   drawRect,
   drawTextBox,
   drawArrow,
+  setAttributesIfNecessary,
+  setNewAttributesIfValid,
 };

package/src/drawingSvg/{_setAttributesIfNecessary.ts → setAttributesIfNecessary.ts}

@@ -1,4 +1,4 @@
-export function _setAttributesIfNecessary(attributes, svgNode) {
+export function setAttributesIfNecessary(attributes, svgNode) {
   Object.keys(attributes).forEach((key) => {
     const currentValue = svgNode.getAttribute(key);
     const newValue = attributes[key];
@@ -10,4 +10,4 @@ export function _setAttributesIfNecessary(attributes, svgNode) {
   });
 }
 
-export default _setAttributesIfNecessary;
+export default setAttributesIfNecessary;

package/src/drawingSvg/{_setNewAttributesIfValid.ts → setNewAttributesIfValid.ts}

@@ -1,4 +1,4 @@
-export function _setNewAttributesIfValid(attributes, svgNode) {
+export function setNewAttributesIfValid(attributes, svgNode) {
   Object.keys(attributes).forEach((key) => {
     const newValue = attributes[key];
     if (newValue !== undefined && newValue !== '') {
@@ -7,4 +7,4 @@ export function _setNewAttributesIfValid(attributes, svgNode) {
   });
 }
 
-export default _setNewAttributesIfValid;
+export default setNewAttributesIfValid;

package/src/enums/Events.ts

@@ -5,6 +5,28 @@
  *
  */
 enum Events {
+  ///////////////////////////////////////
+  //            Tools
+  ///////////////////////////////////////
+
+  /**
+   * Triggers on the eventTarget when a new tools is activated.
+   *
+   * Make use of {@link EventTypes.ToolActivatedEventType | Tool Activated Event Type  }
+   * for typing your event listeners for this tool activated event, and see what event
+   * detail is included in {@link EventTypes.ToolActivatedEventDetail | Tool Activated Event Detail}.
+   */
+  TOOL_ACTIVATED = 'CORNERSTONE_TOOLS_TOOL_ACTIVATED',
+
+  /**
+   * Triggers on the eventTarget when a mode of a tool is changed (active, passive, enabled and disabled).
+   *
+   * Make use of {@link EventTypes.ToolModeChangedEventType | Tool Mode Changed Event Type  }
+   * for typing your event listeners for this tool activated event, and see what event
+   * detail is included in {@link EventTypes.ToolModeChangedEventDetail | Tool Mode Changed Event Detail}.
+   */
+  TOOL_MODE_CHANGED = 'CORNERSTONE_TOOLS_TOOL_MODE_CHANGED',
+
   ///////////////////////////////////////
   //            Annotations
   ///////////////////////////////////////

package/src/eventDispatchers/mouseEventHandlers/mouseDown.ts

@@ -20,6 +20,7 @@ import filterToolsWithAnnotationsForElement from '../../store/filterToolsWithAnn
 import filterMoveableAnnotationTools from '../../store/filterMoveableAnnotationTools';
 import getActiveToolForMouseEvent from '../shared/getActiveToolForMouseEvent';
 import getToolsWithModesForMouseEvent from '../shared/getToolsWithModesForMouseEvent';
+import mouseDownAnnotationAction from './mouseDownAnnotationAction';
 
 const { Active, Passive } = ToolModes;
 
@@ -39,8 +40,10 @@ const { Active, Passive } = ToolModes;
  * - Next we check any tools are interactable (e.g. moving an entire length annotation rather than one of its handles:
  *   `filterMoveableAnnotationTools`). If interactable tools are found, the first tool found consumes the event and the
  *   event does not propagate further.
- * - Finally, if the `activeTool` has `postMouseDownCallback`, this is called.  If the callback returns `true`,
+ * - If the `activeTool` has `postMouseDownCallback`, this is called.  If the callback returns `true`,
  *   the event does not propagate further.
+ * - Finally, look for annotations actions that could handle the event such as showing a dropdown to allow the user
+ *   change the magnifying glass zoom factor.
  *
  * If the event is not consumed the event will bubble to the `mouseDownActivate` handler.
  *
@@ -133,7 +136,7 @@ export default function mouseDown(evt: EventTypes.MouseDownEventType) {
     );
 
     toggleAnnotationSelection(annotation.annotationUID, isMultiSelect);
-    tool.toolSelectedCallback(evt, annotation, 'Mouse');
+    tool.toolSelectedCallback(evt, annotation, 'Mouse', canvasCoords);
 
     return;
   }
@@ -148,6 +151,12 @@ export default function mouseDown(evt: EventTypes.MouseDownEventType) {
     }
   }
 
+  const actionExecuted = mouseDownAnnotationAction(evt);
+
+  if (actionExecuted) {
+    return;
+  }
+
   // Don't stop propagation so that mouseDownActivate can handle the event
 }
 

package/src/eventDispatchers/mouseEventHandlers/mouseDownAnnotationAction.ts

@@ -0,0 +1,72 @@
+import { getEnabledElement } from '@cornerstonejs/core';
+import { state } from '../../store';
+import { ToolModes } from '../../enums';
+import { EventTypes } from '../../types';
+
+// Util
+import filterToolsWithAnnotationsForElement from '../../store/filterToolsWithAnnotationsForElement';
+import filterMoveableAnnotationTools from '../../store/filterMoveableAnnotationTools';
+import getToolsWithActionsForMouseEvent from '../shared/getToolsWithActionsForMouseEvent';
+
+const { Active, Passive } = ToolModes;
+
+/**
+ * Look for active or passive annotations with an action that could handle the
+ * event based on the bindings and invoke the first one found.
+ *
+ * @param evt - The normalized mouseDown event.
+ * @returns True if an action has executed or false otherwise
+ */
+export default function mouseDownAnnotationAction(
+  evt: EventTypes.MouseDownEventType
+): boolean {
+  // If a tool has locked the current state it is dealing with an interaction within its own eventLoop.
+  if (state.isInteractingWithTool) {
+    return false;
+  }
+
+  const eventDetail = evt.detail;
+  const { element } = eventDetail;
+  const enabledElement = getEnabledElement(element);
+  const { canvas: canvasCoords } = eventDetail.currentPoints;
+
+  if (!enabledElement) {
+    return false;
+  }
+
+  // Find all tools that might respond to this mouse down
+  const toolsWithActions = getToolsWithActionsForMouseEvent(evt, [
+    Active,
+    Passive,
+  ]);
+
+  const tools = Array.from(toolsWithActions.keys());
+
+  // Filter tools with annotations for this element
+  const annotationToolsWithAnnotations = filterToolsWithAnnotationsForElement(
+    element,
+    tools
+  );
+
+  // Only moveable annotations (unlocked, visible and close to the canvas coordinates) may trigger actions
+  const moveableAnnotationTools = filterMoveableAnnotationTools(
+    element,
+    annotationToolsWithAnnotations,
+    canvasCoords
+  );
+
+  // If there are annotation tools that are interactable, select the first one
+  // that isn't locked. If there's only one annotation tool, select it.
+  if (moveableAnnotationTools.length > 0) {
+    const { tool, annotation } = moveableAnnotationTools[0];
+    const action = toolsWithActions.get(tool);
+    const method =
+      typeof action.method === 'string' ? tool[action.method] : action.method;
+
+    method.call(tool, evt, annotation);
+
+    return true;
+  }
+
+  return false;
+}

package/src/eventDispatchers/shared/getMouseModifier.ts

@@ -8,14 +8,24 @@ import { KeyboardBindings as kb } from '../../enums';
 const getMouseModifierKey = (evt) => {
   // The logic is a hard coded key mapping
   if (evt.shiftKey) {
-    if (evt.ctrlKey) return kb.ShiftCtrl;
-    if (evt.altKey) return kb.ShiftAlt;
-    if (evt.metaKey) return kb.ShiftMeta;
+    if (evt.ctrlKey) {
+      return kb.ShiftCtrl;
+    }
+    if (evt.altKey) {
+      return kb.ShiftAlt;
+    }
+    if (evt.metaKey) {
+      return kb.ShiftMeta;
+    }
     return kb.Shift;
   }
   if (evt.ctrlKey) {
-    if (evt.altKey) return kb.CtrlAlt;
-    if (evt.metaKey) return kb.CtrlMeta;
+    if (evt.altKey) {
+      return kb.CtrlAlt;
+    }
+    if (evt.metaKey) {
+      return kb.CtrlMeta;
+    }
     return kb.Ctrl;
   }
   if (evt.altKey) {

package/src/eventDispatchers/shared/getToolsWithActionsForMouseEvent.ts

@@ -0,0 +1,66 @@
+import { ToolGroupManager } from '../../store';
+import { ToolModes } from '../../enums';
+import { ToolAction, EventTypes } from '../../types';
+
+import { keyEventListener } from '../../eventListeners';
+import getMouseModifier from './getMouseModifier';
+
+type ModesFilter = Array<ToolModes>;
+
+/**
+ * Given the mouse event and a list of tool modes, find all tool instances
+ * with actions that were added to the tool group associated with the viewport
+ * that triggered the event.
+ *
+ * @param evt - mouseDown event triggered by a cornerstone viewport
+ * @param toolModes - List of tool modes used to filter the tools registered
+ *                    in the viewport's tool group
+ */
+export default function getToolsWithActionsForMouseEvent(
+  evt: EventTypes.MouseMoveEventType,
+  toolModes: ToolModes[]
+): Map<any, ToolAction> {
+  const toolsWithActions = new Map();
+  const { renderingEngineId, viewportId } = evt.detail;
+  const toolGroup = ToolGroupManager.getToolGroupForViewport(
+    viewportId,
+    renderingEngineId
+  );
+
+  if (!toolGroup) {
+    return toolsWithActions;
+  }
+
+  const toolGroupToolNames = Object.keys(toolGroup.toolOptions);
+  const defaultMousePrimary = toolGroup.getDefaultMousePrimary();
+  const mouseEvent = evt.detail.event;
+  const mouseButton = mouseEvent?.buttons ?? defaultMousePrimary;
+  const modifierKey =
+    getMouseModifier(mouseEvent) || keyEventListener.getModifierKey();
+
+  for (let j = 0; j < toolGroupToolNames.length; j++) {
+    const toolName = toolGroupToolNames[j];
+    const tool = toolGroup.getToolInstance(toolName);
+    const actions = tool.configuration?.actions;
+
+    if (!actions?.length || !toolModes.includes(tool.mode)) {
+      continue;
+    }
+
+    const action = actions.find(
+      (action) =>
+        action.bindings.length &&
+        action.bindings.some(
+          (binding) =>
+            binding.mouseButton === mouseButton &&
+            binding.modifierKey === modifierKey
+        )
+    );
+
+    if (action) {
+      toolsWithActions.set(tool, action);
+    }
+  }
+
+  return toolsWithActions;
+}

package/src/eventListeners/keyboard/keyDownListener.ts

@@ -64,11 +64,23 @@ function keyListener(evt: KeyboardEvent): void {
   triggerEvent(eventDetail.element, Events.KEY_DOWN, eventDetail);
 
   document.addEventListener('keyup', _onKeyUp);
+  document.addEventListener('visibilitychange', _onVisibilityChange);
 
   // Todo: handle combination of keys
   state.element.removeEventListener('keydown', keyListener);
 }
 
+/**
+ * Whenever the visibility (i.e. tab focus) changes such that the tab is NOT the
+ * active tab, reset the modifier key.
+ */
+function _onVisibilityChange(): void {
+  document.removeEventListener('visibilitychange', _onVisibilityChange);
+  if (document.visibilityState === 'hidden') {
+    resetModifierKey();
+  }
+}
+
 function _onKeyUp(evt: KeyboardEvent): void {
   const eventDetail: KeyUpEventDetail = {
     renderingEngineId: state.renderingEngineId,
@@ -81,6 +93,7 @@ function _onKeyUp(evt: KeyboardEvent): void {
 
   // Remove our temporary handlers
   document.removeEventListener('keyup', _onKeyUp);
+  document.removeEventListener('visibilitychange', _onVisibilityChange);
   state.element.addEventListener('keydown', keyListener);
 
   // Restore `state` to `defaultState`

package/src/eventListeners/mouse/mouseDownListener.ts

@@ -129,7 +129,9 @@ const doubleClickState: IDoubleClickState = {
 function mouseDownListener(evt: MouseEvent) {
   if (doubleClickState.doubleClickTimeout) {
     // A second identical click will be a double click event, so ignore it
-    if (evt.buttons === doubleClickState.mouseDownEvent.buttons) return;
+    if (evt.buttons === doubleClickState.mouseDownEvent.buttons) {
+      return;
+    }
 
     // Record the second button or the changed button event as the initial
     // button down state so that the multi-button event can be detected
@@ -260,7 +262,13 @@ function _onMouseDrag(evt: MouseEvent) {
     deltaPoints,
   };
 
-  triggerEvent(state.element, MOUSE_DRAG, eventDetail);
+  const consumed = !triggerEvent(state.element, MOUSE_DRAG, eventDetail);
+
+  // Events.MOUSE_DRAG was consumed, thus no other listener should handle this event.
+  if (consumed) {
+    evt.stopImmediatePropagation();
+    evt.preventDefault();
+  }
 
   // Update the last points
   state.lastPoints = _copyPoints(currentPoints);

package/src/eventListeners/mouse/mouseMoveListener.ts

@@ -27,7 +27,13 @@ function mouseMoveListener(evt: MouseEvent) {
     event: evt,
   };
 
-  triggerEvent(element, eventName, eventDetail);
+  const consumed = !triggerEvent(element, eventName, eventDetail);
+
+  // Events.MOUSE_MOVE was consumed, thus no other listener should handle this event.
+  if (consumed) {
+    evt.stopImmediatePropagation();
+    evt.preventDefault();
+  }
 }
 
 export default mouseMoveListener;