@cornerstonejs/tools 0.56.1 → 0.56.3

package/src/enums/Events.ts

@@ -0,0 +1,242 @@
+/**
+ *  The events for cornerstoneTools3D Tools. Native Mouse and Keyboard events are
+ *  captured, normalized, and re-triggered with a `CORNERSTONE_TOOLS` prefix. This
+ *  allows us to handle events consistently across different browsers.
+ *
+ */
+enum Events {
+  ///////////////////////////////////////
+  //            Annotations
+  ///////////////////////////////////////
+
+  /**
+   * Triggers on the eventTarget when a new annotation is added to the state.
+   *
+   * Make use of {@link EventTypes.AnnotationAddedEventType | Annotation Added Event Type  }
+   * for typing your event listeners for this annotation added event, and see what event
+   * detail is included in {@link EventTypes.AnnotationAddedEventDetail | Annotation Added Event Detail}.
+   */
+  ANNOTATION_ADDED = 'CORNERSTONE_TOOLS_ANNOTATION_ADDED',
+
+  /**
+   * Triggers on the eventTarget when a new annotation is completed its drawing
+   * Make use of {@link EventTypes.AnnotationCompletedEventType | Annotation Completed Event Type }
+   * for typing your event listeners for this annotation completed event, and see what event
+   * detail is included in {@link EventTypes.AnnotationCompletedEventDetail | Annotation Completed Event Detail}.
+   */
+  ANNOTATION_COMPLETED = 'CORNERSTONE_TOOLS_ANNOTATION_COMPLETED',
+
+  /**
+   * Triggers on the eventTarget when an annotation is modified (e.g. a handle is modified).
+   * Make use of {@link EventTypes.AnnotationModifiedEventType | Annotation Modified Event Type}
+   * for typing your event listeners for this annotation modified event, and see what
+   * event detail is included in {@link EventTypes.AnnotationModifiedEventDetail | Annotation Modified Event Detail}.
+   */
+  ANNOTATION_MODIFIED = 'CORNERSTONE_TOOLS_ANNOTATION_MODIFIED',
+
+  /**
+   * Triggers on the eventTarget when an annotation is removed from the annotations manager.
+   * Make use of {@link EventTypes.AnnotationRemovedEventType | Annotation Removed Event Type}
+   * for typing your event listeners for this annotation removed event, and see what
+   * event detail is included in {@link EventTypes.AnnotationRemovedEventDetail | Annotation Removed Event Detail}.
+   */
+  ANNOTATION_REMOVED = 'CORNERSTONE_TOOLS_ANNOTATION_REMOVED',
+
+  /**
+   * Triggers on the eventTarget when an annotation selection status is changed.
+   * Make use of {@link EventTypes.AnnotationSelectionChangeEventType | Annotation Selection Change Event Type}
+   * for typing your event listeners for this annotation selection change event, and see what
+   * event detail is included in {@link EventTypes.AnnotationSelectionChangeEventDetail | Annotation Selection Change Event Detail}.
+   */
+  ANNOTATION_SELECTION_CHANGE = 'CORNERSTONE_TOOLS_ANNOTATION_SELECTION_CHANGE',
+
+  /**
+   * Triggers on the eventTarget when an annotation locked status is changed.
+   * Make use of {@link EventTypes.AnnotationLockChangeEventType | Annotation Lock Change Event Type}
+   * for typing your event listeners for this annotation lock change event, and see what
+   * event detail is included in {@link EventTypes.AnnotationLockChangeEventDetail | Annotation Lock Change Event Detail}.
+   */
+  ANNOTATION_LOCK_CHANGE = 'CORNERSTONE_TOOLS_ANNOTATION_LOCK_CHANGE',
+
+  /**
+   * Triggers on the eventTarget when an annotation visible status is changed.
+   * Make use of {@link EventTypes.AnnotationVisibilityChangeEventType | Annotation Visible Change Event Type}
+   * for typing your event listeners for this annotation Hide change event, and see what
+   * event detail is included in {@link EventTypes.AnnotationVisibilityChangeEventDetail | Annotation Visible Change Event Detail}.
+   */
+  ANNOTATION_VISIBILITY_CHANGE = 'CORNERSTONE_TOOLS_ANNOTATION_VISIBILITY_CHANGE',
+
+  /**
+   * Triggers on the eventTarget when an annotation is rendered.
+   * Make use of {@link EventTypes.AnnotationRenderedEventType | Annotation Rendered Event Type}
+   * for typing your event listeners for this annotation rendered event, and see what
+   * event detail is included in {@link EventTypes.AnnotationRenderedEventDetail | Annotation Rendered Event Detail}.
+   */
+  ANNOTATION_RENDERED = 'CORNERSTONE_TOOLS_ANNOTATION_RENDERED',
+
+  ///////////////////////////////////////
+  //        Segmentations Events
+  ///////////////////////////////////////
+
+  /**
+   * Triggers on the eventTarget when a Segmentation is updated in the state manager.
+   * Make use of {@link EventTypes.SegmentationModifiedEventType | Segmentation Modified Event Type}
+   * for typing your event listeners for this segmentation modified event, and see what
+   * event detail is included in {@link EventTypes.SegmentationModifiedEventDetail | Segmentation Modified Event Detail}.
+   */
+  SEGMENTATION_MODIFIED = 'CORNERSTONE_TOOLS_SEGMENTATION_MODIFIED',
+
+  /**
+   * Triggers on the eventTarget when a Segmentation is rendered by the Segmentation Rendering Engine.
+   * Make use of {@link EventTypes.SegmentationRenderedEventType | Segmentation Rendered Event Type}
+   * for typing your event listeners for this segmentation rendered event, and see what
+   * event detail is included in {@link EventTypes.SegmentationRenderedEventDetail | Segmentation Rendered Event Detail}.
+   */
+  SEGMENTATION_RENDERED = 'CORNERSTONE_TOOLS_SEGMENTATION_RENDERED',
+
+  /**
+   * Triggers on the eventTarget when a Segmentation representation of a toolGroup is modified in the state manager.
+   * Make use of {@link EventTypes.SegmentationRepresentationModifiedEventType | Segmentation Representation Modified Event Type}
+   * for typing your event listeners for this segmentation representation modified event, and see what
+   * event detail is included in {@link EventTypes.SegmentationRepresentationModifiedEventDetail | Segmentation Representation Modified Event Detail}.
+   */
+  SEGMENTATION_REPRESENTATION_MODIFIED = 'CORNERSTONE_TOOLS_SEGMENTATION_REPRESENTATION_MODIFIED',
+
+  /**
+   * Triggers on the eventTarget when a Segmentation is removed from the state manager.
+   * Make use of {@link EventTypes.SegmentationRemovedEventType | Segmentation Removed Event Type}
+   * for typing your event listeners for this segmentation removed event, and see what
+   * event detail is included in {@link EventTypes.SegmentationRemovedEventDetail | Segmentation Removed Event Detail}.
+   */
+  SEGMENTATION_REMOVED = 'CORNERSTONE_TOOLS_SEGMENTATION_REMOVED',
+
+  /**
+   * Triggers on the eventTarget when a Segmentation representation of a toolGroup is removed in the state manager.
+   * Make use of {@link EventTypes.SegmentationRepresentationRemovedEventType | Segmentation Representation Removed Event Type}
+   * for typing your event listeners for this segmentation representation removed event, and see what
+   * event detail is included in {@link EventTypes.SegmentationRepresentationRemovedEventDetail | Segmentation Representation Removed Event Detail}.
+   */
+  SEGMENTATION_REPRESENTATION_REMOVED = 'CORNERSTONE_TOOLS_SEGMENTATION_REPRESENTATION_REMOVED',
+
+  /**
+   * Triggers on the eventTarget when a Segmentation data is modified (e.g., by brush tool).
+   * Make use of {@link EventTypes.SegmentationDataModifiedEventType | Segmentation Data Modified Event Type}
+   * for typing your event listeners for this segmentation data modified event, and see what
+   * event detail is included in {@link EventTypes.SegmentationDataModifiedEventDetail | Segmentation Data Modified Event Detail}.
+   */
+  SEGMENTATION_DATA_MODIFIED = 'CORNERSTONE_TOOLS_SEGMENTATION_DATA_MODIFIED',
+
+  ///////////////////////////////////////
+  //         Keyboard Events
+  ///////////////////////////////////////
+
+  /**
+   * Triggers on the eventTarget when a key on the keyboard is pressed.
+   * Make use of {@link EventTypes.KeyDownEventType | Key Down Event Type}
+   * for typing your event listeners for this key down event, and see what
+   * event detail is included in {@link EventTypes.KeyDownEventDetail | Key Down Event Detail}.
+   */
+  KEY_DOWN = 'CORNERSTONE_TOOLS_KEY_DOWN',
+
+  /**
+   * Triggers on the eventTarget when a key on the keyboard is released.
+   * Make use of {@link EventTypes.KeyUpEventType | Key Up Event Type}
+   * for typing your event listeners for this key up event, and see what
+   * event detail is included in {@link EventTypes.KeyUpEventDetail | Key Up Event Detail}.
+   */
+  KEY_UP = 'CORNERSTONE_TOOLS_KEY_UP',
+
+  ///////////////////////////////////////
+  //      Mouse Events
+  ///////////////////////////////////////
+
+  /**
+   * Triggers on the eventTarget when the mouse is pressed down, it is CornerstoneTools normalized event.
+   * Make use of {@link EventTypes.MouseDownEventType | Mouse Down Event Type}
+   * for typing your event listeners for this mouse down event, and see what
+   * event detail is included in {@link EventTypes.MouseDownEventDetail | Mouse Down Event Detail}.
+   */
+  MOUSE_DOWN = 'CORNERSTONE_TOOLS_MOUSE_DOWN',
+
+  /**
+   * Triggers on the eventTarget when the mouse is released, it is CornerstoneTools normalized event.
+   * Make use of {@link EventTypes.MouseUpEventType | Mouse Up Event Type}
+   * for typing your event listeners for this mouse up event, and see what
+   * event detail is included in {@link EventTypes.MouseUpEventDetail | Mouse Up Event Detail}.
+   */
+  MOUSE_UP = 'CORNERSTONE_TOOLS_MOUSE_UP',
+
+  /**
+   * Triggers on the eventTarget when a handled `MOUSE_DOWN` event does not `stopPropagation`. The hook
+   * we use to create new annotation for mouse events.
+   * Make use of {@link EventTypes.MouseDownActivateEventType | Mouse Down Activate Event Type}
+   * for typing your event listeners for this mouse down activate event, and see what
+   * event detail is included in {@link EventTypes.MouseDownActivateEventDetail | Mouse Down Activate Event Detail}.
+   */
+  MOUSE_DOWN_ACTIVATE = 'CORNERSTONE_TOOLS_MOUSE_DOWN_ACTIVATE',
+
+  /**
+   * Triggers on the event target when mouse is dragging an annotation or textBox.
+   * Make use of {@link EventTypes.MouseDragEventType | Mouse Drag Event Type}
+   * for typing your event listeners for this mouse drag event, and see what
+   * event detail is included in {@link EventTypes.MouseDragEventDetail | Mouse Drag Event Detail}.
+   */
+  MOUSE_DRAG = 'CORNERSTONE_TOOLS_MOUSE_DRAG',
+
+  /**
+   * Triggers on the eventTarget, when the mouse is moved, it is CornerstoneTools normalized event.
+   * It can be just a mouse move or when double click is performed and annotation
+   * drawing can be performed with just mouse move.
+   * Make use of {@link EventTypes.MouseMoveEventType | Mouse Move Event Type}
+   * for typing your event listeners for this mouse move event, and see what
+   * event detail is included in {@link EventTypes.MouseMoveEventDetail | Mouse Move Event Detail}.
+   */
+  MOUSE_MOVE = 'CORNERSTONE_TOOLS_MOUSE_MOVE',
+
+  /**
+   * Triggers on the eventTarget when a mouse click is detected. It is CornerstoneTools normalized event.
+   * Make use of {@link EventTypes.MouseClickEventType | Mouse Click Event Type}
+   * for typing your event listeners for this mouse click event, and see what
+   * event detail is included in {@link EventTypes.MouseClickEventDetail | Mouse Click Event Detail}.
+   */
+  MOUSE_CLICK = 'CORNERSTONE_TOOLS_MOUSE_CLICK',
+
+  /**
+   * Triggers on the eventTarget when a mouse double click is detected. It is CornerstoneTools normalized event.
+   * Make use of {@link EventTypes.MouseDoubleClickEventType | Mouse Double Click Event Type}
+   * for typing your event listeners for this mouse double click event, and see what
+   * event detail is included in {@link EventTypes.MouseDoubleClickEventDetail | Mouse Double Click Event Detail}.
+   */
+  MOUSE_DOUBLE_CLICK = 'CORNERSTONE_TOOLS_MOUSE_DOUBLE_CLICK',
+
+  /**
+   * Triggers on the eventTarget when a mouse wheel event is detected. It is CornerstoneTools normalized event.
+   * Make use of {@link EventTypes.MouseWheelEventType | Mouse Wheel Event Type}
+   * for typing your event listeners for this mouse wheel event, and see what
+   * event detail is included in {@link EventTypes.MouseWheelEventDetail | Mouse Wheel Event Detail}.
+   */
+  MOUSE_WHEEL = 'CORNERSTONE_TOOLS_MOUSE_WHEEL',
+
+  // Todo: not being fired as of now
+  // ANNOTATION_COMPLETED = 'CORNERSTONE_TOOLS_ANNOTATION_COMPLETED',
+  // Todo: not implemented yet
+  // KEY_PRESS = 'CORNERSTONE_TOOLS_KEY_PRESS',
+
+  //////////////////////
+  //   Touch Events   //
+  //////////////////////
+  // The event flow looks like the following
+  // Touch Start -> (optional) Touch Press -> Touch Drag -> (optional) Touch Swipe -> Touch End
+  // Touch Tap
+  // mousedown
+  // mousedown, Touch Start, and Tap are mutually exclusive events
+  TOUCH_START = 'CORNERSTONE_TOOLS_TOUCH_START',
+  TOUCH_START_ACTIVATE = 'CORNERSTONE_TOOLS_TOUCH_START_ACTIVATE',
+  TOUCH_PRESS = 'CORNERSTONE_TOOLS_TOUCH_PRESS',
+  TOUCH_DRAG = 'CORNERSTONE_TOOLS_TOUCH_DRAG',
+  TOUCH_END = 'CORNERSTONE_TOOLS_TOUCH_END',
+  TOUCH_TAP = 'CORNERSTONE_TOOLS_TAP',
+  TOUCH_SWIPE = 'CORNERSTONE_TOOLS_SWIPE',
+}
+
+export default Events;

package/src/enums/SegmentationRepresentations.ts

@@ -0,0 +1,12 @@
+/**
+ * Segmentations on viewports can be visualized in different ways. This enum
+ * defines the different ways of visualizing segmentations. Currently, only
+ * labelmap is supported.
+ */
+enum SegmentationRepresentations {
+  Labelmap = 'LABELMAP',
+  Contour = 'CONTOUR',
+  // Todo: add more representations
+}
+
+export default SegmentationRepresentations;

package/src/enums/ToolBindings.ts

@@ -0,0 +1,37 @@
+/**
+ * Mouse This enum enumerates the different buttons returned by `.buttons` on the mouse event.
+ * These values are used when setting a tool active in a tool group.
+ *
+ * See also: https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/buttons
+ */
+enum MouseBindings {
+  /** usually the left button */
+  Primary = 1,
+  /** usually the right button */
+  Secondary = 2,
+  Primary_And_Secondary = 3,
+  /** usually mouse wheel button */
+  Auxiliary = 4,
+  Primary_And_Auxiliary = 5,
+  Secondary_And_Auxiliary = 6,
+  Primary_And_Secondary_And_Auxiliary = 7,
+  /** usually "Browser Back" button */
+  Fourth_Button = 8,
+  /** usually "Browser Forward" button */
+  Fifth_Button = 16,
+}
+
+enum KeyboardBindings {
+  Shift = 16,
+  Ctrl = 17,
+  Alt = 18,
+  Meta = 91,
+  ShiftCtrl = 1617,
+  ShiftAlt = 1618,
+  ShiftMeta = 1691,
+  CtrlAlt = 1718,
+  CtrlMeta = 1791,
+  AltMeta = 1891,
+}
+
+export { MouseBindings, KeyboardBindings };

package/src/enums/ToolModes.ts

@@ -0,0 +1,31 @@
+/**
+ * ToolModes - This enum defines the 4 tool states which are available.
+ */
+enum ToolModes {
+  /**
+   * Active:
+   * - Can be actively used by mouse/touch events mapped to its `ToolBinding`s.
+   * - Can add data if an annotation tool.
+   * - Can be passively interacted by grabbing a tool or its handles.
+   * - Renders data if the tool has a `renderAnnotation` method.
+   */
+  Active = 'Active',
+  /**
+   * Passive:
+   * - Can be passively interacted by grabbing a tool or its handles.
+   * - Renders data if the tool has a `renderAnnotation` method.
+   */
+  Passive = 'Passive',
+  /**
+   * Enabled:
+   * - Renders data if the tool has a `renderAnnotation` method.
+   */
+  Enabled = 'Enabled',
+  /**
+   * Disabled:
+   * - Annotation does not render.
+   */
+  Disabled = 'Disabled',
+}
+
+export default ToolModes;

package/src/enums/Touch.ts

@@ -0,0 +1,8 @@
+enum Swipe {
+  UP = 'UP',
+  DOWN = 'DOWN',
+  LEFT = 'LEFT',
+  RIGHT = 'RIGHT',
+}
+
+export { Swipe };

package/src/enums/index.js

@@ -0,0 +1,16 @@
+import { MouseBindings, KeyboardBindings } from './ToolBindings';
+import ToolModes from './ToolModes';
+import AnnotationStyleStates from './AnnotationStyleStates';
+import Events from './Events';
+import SegmentationRepresentations from './SegmentationRepresentations';
+import { Swipe } from './Touch';
+
+export {
+  MouseBindings,
+  KeyboardBindings,
+  ToolModes,
+  AnnotationStyleStates,
+  Events,
+  SegmentationRepresentations,
+  Swipe,
+};

package/src/eventDispatchers/annotationModifiedEventDispatcher.ts

@@ -0,0 +1,41 @@
+import { eventTarget, getRenderingEngine } from '@cornerstonejs/core';
+import Events from '../enums/Events';
+import triggerAnnotationRenderForViewportIds from '../utilities/triggerAnnotationRenderForViewportIds';
+import { AnnotationModifiedEventType } from '../types/EventTypes';
+
+/**
+ * This is a callback function that is called when an annotation is modified.
+ * Since we are throttling the cachedStats calculation for annotation tools,
+ * we need to trigger a final render for the annotation. so that the annotation
+ * textBox is updated.
+ * Todo: This will trigger all the annotation tools to re-render, although DOM
+ * will update those that have changed, but more efficient would be to only
+ * update the changed annotation.
+ * Todo: A better way is to extract the textBox render logic from the renderAnnotation
+ * of all tools and just trigger a render for that (instead of the entire annotation., even if
+ * no svg update happens since the attributes for handles are the same)
+ */
+const onAnnotationModified = function (evt: AnnotationModifiedEventType) {
+  const { viewportId, renderingEngineId } = evt.detail;
+  const renderingEngine = getRenderingEngine(renderingEngineId);
+  triggerAnnotationRenderForViewportIds(renderingEngine, [viewportId]);
+};
+
+const enable = function () {
+  eventTarget.addEventListener(
+    Events.ANNOTATION_MODIFIED,
+    onAnnotationModified
+  );
+};
+
+const disable = function () {
+  eventTarget.removeEventListener(
+    Events.ANNOTATION_MODIFIED,
+    onAnnotationModified
+  );
+};
+
+export default {
+  enable,
+  disable,
+};

package/src/eventDispatchers/cameraModifiedEventDispatcher.ts

@@ -0,0 +1,41 @@
+import { Enums, Types } from '@cornerstonejs/core';
+import { ToolModes } from '../enums';
+import getToolsWithModesForMouseEvent from './shared/getToolsWithModesForMouseEvent';
+
+const { Active, Passive, Enabled } = ToolModes;
+
+/**
+ * When the camera is modified, check what tools need to react to this.
+ *
+ * - First we get all tools which are active, passive or enabled on the element.
+ * - If any of these tools have a `onCameraModified` method, we call it.
+ *
+ * @param evt - The normalized camera modified event.
+ */
+const onCameraModified = function (evt: Types.EventTypes.CameraModifiedEvent) {
+  // @ts-ignore
+  const enabledTools = getToolsWithModesForMouseEvent(evt, [
+    Active,
+    Passive,
+    Enabled,
+  ]);
+
+  enabledTools.forEach((tool) => {
+    if (tool.onCameraModified) {
+      tool.onCameraModified(evt);
+    }
+  });
+};
+
+const enable = function (element) {
+  element.addEventListener(Enums.Events.CAMERA_MODIFIED, onCameraModified);
+};
+
+const disable = function (element) {
+  element.removeEventListener(Enums.Events.CAMERA_MODIFIED, onCameraModified);
+};
+
+export default {
+  enable,
+  disable,
+};

package/src/eventDispatchers/imageRenderedEventDispatcher.ts

@@ -0,0 +1,37 @@
+import { Enums, Types } from '@cornerstonejs/core';
+import triggerAnnotationRender from '../utilities/triggerAnnotationRender';
+
+/**
+ *  When the image is rendered, check what tools can be rendered for this element.
+ *
+ * - First we get all tools which are active, passive or enabled on the element.
+ * - If any of these tools have a `renderAnnotation` method, then we render them.
+ * - Note that these tools don't necessarily have to be instances of  `AnnotationTool`,
+ *   Any tool may register a `renderAnnotation` method (e.g. a tool that displays an overlay).
+ *
+ * @param evt - The normalized IMAGE_RENDERED event.
+ */
+const onImageRendered = function (evt: Types.EventTypes.ImageRenderedEvent) {
+  // TODO: should we do this on camera modified instead of image rendered?
+  // e.g. no need to re-render annotations if only the VOI has changed
+  triggerAnnotationRender(evt.detail.element);
+};
+
+const enable = function (element: HTMLDivElement): void {
+  element.addEventListener(
+    Enums.Events.IMAGE_RENDERED,
+    onImageRendered as EventListener
+  );
+};
+
+const disable = function (element: HTMLDivElement): void {
+  element.removeEventListener(
+    Enums.Events.IMAGE_RENDERED,
+    onImageRendered as EventListener
+  );
+};
+
+export default {
+  enable,
+  disable,
+};

package/src/eventDispatchers/imageSpacingCalibratedEventDispatcher.ts

@@ -0,0 +1,50 @@
+import { Enums, Types } from '@cornerstonejs/core';
+import { ToolModes } from '../enums';
+import getToolsWithModesForMouseEvent from './shared/getToolsWithModesForMouseEvent';
+
+const { Active, Passive, Enabled } = ToolModes;
+
+/**
+ * When image spacing is calibrated modify the annotations for all of its tools
+ * to consider the new calibration info.
+ *
+ * - First we get all tools which are active, passive or enabled on the element.
+ * - If any of these tools have a `onImageSpacingCalibrated` method, we call it.
+ *
+ * @param evt - The normalized image calibration event.
+ */
+const onImageSpacingCalibrated = function (
+  evt: Types.EventTypes.ImageSpacingCalibratedEvent
+) {
+  // @ts-ignore
+  const enabledTools = getToolsWithModesForMouseEvent(evt, [
+    Active,
+    Passive,
+    Enabled,
+  ]);
+
+  enabledTools.forEach((tool) => {
+    if (tool.onImageSpacingCalibrated) {
+      tool.onImageSpacingCalibrated(evt);
+    }
+  });
+};
+
+const enable = function (element: HTMLDivElement) {
+  element.addEventListener(
+    Enums.Events.IMAGE_SPACING_CALIBRATED,
+    onImageSpacingCalibrated as EventListener
+  );
+};
+
+const disable = function (element: HTMLDivElement) {
+  element.removeEventListener(
+    Enums.Events.IMAGE_SPACING_CALIBRATED,
+    onImageSpacingCalibrated as EventListener
+  );
+};
+
+export default {
+  enable,
+  disable,
+};

package/src/eventDispatchers/index.js

@@ -0,0 +1,15 @@
+import imageRenderedEventDispatcher from './imageRenderedEventDispatcher';
+import mouseToolEventDispatcher from './mouseToolEventDispatcher';
+import keyboardToolEventDispatcher from './keyboardToolEventDispatcher';
+import cameraModifiedEventDispatcher from './cameraModifiedEventDispatcher';
+import imageSpacingCalibratedEventDispatcher from './imageSpacingCalibratedEventDispatcher';
+import touchToolEventDispatcher from './touchToolEventDispatcher';
+
+export {
+  imageRenderedEventDispatcher,
+  mouseToolEventDispatcher,
+  keyboardToolEventDispatcher,
+  cameraModifiedEventDispatcher,
+  imageSpacingCalibratedEventDispatcher,
+  touchToolEventDispatcher,
+};

package/src/eventDispatchers/keyboardEventHandlers/index.js

@@ -0,0 +1,4 @@
+import keyDown from './keyDown';
+import keyUp from './keyUp';
+
+export { keyDown, keyUp };

package/src/eventDispatchers/keyboardEventHandlers/keyDown.ts

@@ -0,0 +1,29 @@
+import { ToolGroupManager } from '../../store';
+import getActiveToolForKeyboardEvent from '../shared/getActiveToolForKeyboardEvent';
+import { KeyDownEventType } from '../../types/EventTypes';
+
+/**
+ * KeyDown event listener to handle viewport cursor icon changes
+ *
+ * @param evt - The KeyboardEvent
+ */
+export default function keyDown(evt: KeyDownEventType): void {
+  // get the active tool given the key and mouse button
+  const activeTool = getActiveToolForKeyboardEvent(evt);
+
+  if (!activeTool) {
+    return;
+  }
+
+  const { renderingEngineId, viewportId } = evt.detail;
+
+  const toolGroup = ToolGroupManager.getToolGroupForViewport(
+    viewportId,
+    renderingEngineId
+  );
+
+  const toolName = activeTool.getToolName();
+  if (Object.keys(toolGroup.toolOptions).includes(toolName)) {
+    toolGroup.setViewportsCursorByToolName(toolName);
+  }
+}

package/src/eventDispatchers/keyboardEventHandlers/keyUp.ts

@@ -0,0 +1,33 @@
+import { resetModifierKey } from '../../eventListeners/keyboard/keyDownListener';
+import { ToolGroupManager } from '../../store';
+import getActiveToolForKeyboardEvent from '../shared/getActiveToolForKeyboardEvent';
+import { KeyDownEventType } from '../../types/EventTypes';
+
+/**
+ * KeyDown event listener to handle viewport cursor icon changes
+ *
+ * @param evt - The KeyboardEvent
+ */
+export default function keyUp(evt: KeyDownEventType): void {
+  // get the active tool for the primary mouse button
+  const activeTool = getActiveToolForKeyboardEvent(evt);
+
+  if (!activeTool) {
+    return;
+  }
+
+  const { renderingEngineId, viewportId } = evt.detail;
+
+  const toolGroup = ToolGroupManager.getToolGroupForViewport(
+    viewportId,
+    renderingEngineId
+  );
+
+  // Reset the modifier key
+  resetModifierKey();
+
+  const toolName = activeTool.getToolName();
+  if (Object.keys(toolGroup.toolOptions).includes(toolName)) {
+    toolGroup.setViewportsCursorByToolName(toolName);
+  }
+}

package/src/eventDispatchers/keyboardToolEventDispatcher.ts

@@ -0,0 +1,28 @@
+import Events from '../enums/Events';
+import { keyDown, keyUp } from './keyboardEventHandlers';
+
+/**
+ * Enable Key down and key up listeners
+ *
+ * @param element - The HTML element to attach the event listeners to.
+ */
+const enable = function (element: HTMLDivElement) {
+  element.addEventListener(Events.KEY_DOWN, keyDown as EventListener);
+  element.addEventListener(Events.KEY_UP, keyUp as EventListener);
+};
+
+/**
+ * Disable Key down and key up listeners
+ * @param element - The HTML element to attach the event listeners to.
+ */
+const disable = function (element: HTMLDivElement) {
+  element.removeEventListener(Events.KEY_DOWN, keyDown as EventListener);
+  element.removeEventListener(Events.KEY_UP, keyUp as EventListener);
+};
+
+const keyboardToolEventDispatcher = {
+  enable,
+  disable,
+};
+
+export default keyboardToolEventDispatcher;

package/src/eventDispatchers/mouseEventHandlers/index.js

@@ -0,0 +1,19 @@
+import mouseClick from './mouseClick';
+import mouseDoubleClick from './mouseDoubleClick';
+import mouseDown from './mouseDown';
+import mouseDownActivate from './mouseDownActivate';
+import mouseDrag from './mouseDrag';
+import mouseMove from './mouseMove';
+import mouseUp from './mouseUp';
+import mouseWheel from './mouseWheel';
+
+export {
+  mouseClick,
+  mouseDown,
+  mouseDownActivate,
+  mouseDoubleClick,
+  mouseDrag,
+  mouseMove,
+  mouseUp,
+  mouseWheel,
+};