@cornerstonejs/tools 0.56.1 → 0.56.3

package/src/eventListeners/keyboard/keyDownListener.ts

@@ -0,0 +1,99 @@
+import _cloneDeep from 'lodash.clonedeep';
+import { getEnabledElement, triggerEvent } from '@cornerstonejs/core';
+import Events from '../../enums/Events';
+import { KeyDownEventDetail, KeyUpEventDetail } from '../../types/EventTypes';
+
+interface IKeyDownListenerState {
+  renderingEngineId: string;
+  viewportId: string;
+  key: string | null;
+  keyCode: number | null;
+  element: HTMLDivElement;
+}
+
+const defaultState: IKeyDownListenerState = {
+  //
+  renderingEngineId: undefined,
+  viewportId: undefined,
+  //
+  key: undefined,
+  keyCode: undefined,
+  element: null,
+};
+
+let state: IKeyDownListenerState = {
+  //
+  renderingEngineId: undefined,
+  viewportId: undefined,
+  //
+  key: undefined,
+  keyCode: undefined,
+  element: null,
+};
+
+/**
+ * Normalizes the keyboard event and triggers KEY_DOWN event from CornerstoneTools3D events
+ * @param evt - DOM Keyboard event
+ */
+function keyListener(evt: KeyboardEvent): void {
+  state.element = <HTMLDivElement>evt.currentTarget;
+
+  const enabledElement = getEnabledElement(state.element);
+  const { renderingEngineId, viewportId } = enabledElement;
+
+  state.renderingEngineId = renderingEngineId;
+  state.viewportId = viewportId;
+  state.key = evt.key;
+  state.keyCode = evt.keyCode;
+
+  evt.preventDefault();
+  const eventDetail: KeyDownEventDetail = {
+    renderingEngineId: state.renderingEngineId,
+    viewportId: state.viewportId,
+    element: state.element,
+    key: state.key,
+    keyCode: state.keyCode,
+
+    // detail: evt,
+    // Todo: mouse event points can be used later for placing tools with a key
+    // e.g., putting an arrow/probe/etc. on the mouse position. Another use case
+    // hovering and deleting the tool
+    // points: getMouseEventPoints(evt),
+  };
+
+  triggerEvent(eventDetail.element, Events.KEY_DOWN, eventDetail);
+
+  document.addEventListener('keyup', _onKeyUp);
+
+  // Todo: handle combination of keys
+  state.element.removeEventListener('keydown', keyListener);
+}
+
+function _onKeyUp(evt: KeyboardEvent): void {
+  const eventDetail: KeyUpEventDetail = {
+    renderingEngineId: state.renderingEngineId,
+    viewportId: state.viewportId,
+    element: state.element,
+    key: state.key,
+    keyCode: state.keyCode,
+    // detail: evt,
+  };
+
+  // Remove our temporary handlers
+  document.removeEventListener('keyup', _onKeyUp);
+  state.element.addEventListener('keydown', keyListener);
+
+  // Restore `state` to `defaultState`
+  state = _cloneDeep(defaultState);
+  triggerEvent(eventDetail.element, Events.KEY_UP, eventDetail);
+}
+
+export function getModifierKey(): number | undefined {
+  return state.keyCode;
+}
+
+export function resetModifierKey(): void {
+  state.keyCode = undefined;
+}
+
+export default keyListener;

package/src/eventListeners/mouse/getMouseEventPoints.ts

@@ -0,0 +1,66 @@
+import { getEnabledElement } from '@cornerstonejs/core';
+import type { Types } from '@cornerstonejs/core';
+
+import { IPoints } from '../../types';
+
+/**
+ * Given a native mouse event, get the associated cornerstone3D enabled element
+ * and derive a set of coordinates useful for tools.
+ * @param evt - The Mouse event.
+ * @param element - The DOM HTMLDivElement that the event was triggered on.
+ * @returns The points related to the event in the form of a `IPoints` object containing
+ * the following properties: `page`, `client`, `canvas`, and `world` details of the event.
+ */
+export default function getMouseEventPoints(
+  evt: MouseEvent,
+  element?: HTMLDivElement
+): IPoints {
+  const elementToUse = element || (evt.currentTarget as HTMLDivElement);
+  const { viewport } = getEnabledElement(elementToUse);
+  const clientPoint = _clientToPoint(evt);
+  const pagePoint = _pageToPoint(evt);
+  const canvasPoint = _pagePointsToCanvasPoints(elementToUse, pagePoint);
+  const worldPoint = viewport.canvasToWorld(canvasPoint);
+
+  return {
+    page: pagePoint,
+    client: clientPoint,
+    canvas: canvasPoint,
+    world: worldPoint,
+  };
+}
+
+/**
+ * Converts point from page coordinates to canvas coordinates.
+ * @param element - HTMLDivElement
+ * @param pagePoint - Point in page coordinates pageX and pageY
+ *
+ * @returns The canvas coordinate points
+ */
+function _pagePointsToCanvasPoints(
+  element: HTMLDivElement,
+  pagePoint: Types.Point2
+): Types.Point2 {
+  const rect = element.getBoundingClientRect();
+  return [
+    pagePoint[0] - rect.left - window.pageXOffset,
+    pagePoint[1] - rect.top - window.pageYOffset,
+  ];
+}
+
+/**
+ * Converts the event's `pageX` and `pageY` properties to Types.Point2 format
+ *
+ * @param evt - The Mouse `Event`
+ */
+function _pageToPoint(evt: MouseEvent): Types.Point2 {
+  return [evt.pageX, evt.pageY];
+}
+
+/**
+ * Converts the event's `clientX` and `clientY` properties to Types.Point2 format
+ * @param evt - The Mouse `Event`
+ */
+function _clientToPoint(evt: MouseEvent): Types.Point2 {
+  return [evt.clientX, evt.clientY];
+}

package/src/eventListeners/mouse/index.ts

@@ -0,0 +1,55 @@
+import mouseDoubleClickListener from './mouseDoubleClickListener';
+import mouseDownListener, {
+  mouseDoubleClickIgnoreListener,
+} from './mouseDownListener';
+import mouseMoveListener from './mouseMoveListener';
+
+/**
+ * Removes mouse event listeners for native mouse event. Enables
+ * vtk.js tools flavored events that build on top of existing events to
+ * provide more helpful information.
+ *
+ * @private
+ * @param element - The DOM element to remove event listeners from.
+ */
+function disable(element: HTMLDivElement): void {
+  element.removeEventListener('dblclick', mouseDoubleClickListener);
+  element.removeEventListener('mousedown', mouseDownListener);
+  element.removeEventListener('mousemove', mouseMoveListener);
+  // The mouseDoubleClickIgnoreListener prevents those browser 'dblclick'
+  // events that cornerstone has determined are single clicks from propagating
+  // to other (3rd party) listeners. A capture phase listener is used so that
+  // the 'dblclick' event can be ignored and not propagated ASAP.
+  element.removeEventListener('dblclick', mouseDoubleClickIgnoreListener, {
+    capture: true,
+  });
+}
+
+/**
+ * Registers mouse event listeners for native mouse event. Enables
+ * vtk.js tools flavored events that build on top of existing events to
+ * provide more helpful information.
+ *
+ * @private
+ * @param element - The DOM element to register event listeners on.
+ */
+function enable(element: HTMLDivElement): void {
+  // Prevent handlers from being attached multiple times
+  disable(element);
+
+  element.addEventListener('dblclick', mouseDoubleClickListener);
+  element.addEventListener('mousedown', mouseDownListener);
+  element.addEventListener('mousemove', mouseMoveListener);
+  // The mouseDoubleClickIgnoreListener prevents those browser 'dblclick'
+  // events that cornerstone has determined are single clicks from propagating
+  // to other (3rd party) listeners. A capture phase listener is used so that
+  // the 'dblclick' event can be ignored and not propagated ASAP.
+  element.addEventListener('dblclick', mouseDoubleClickIgnoreListener, {
+    capture: true,
+  });
+}
+
+export default {
+  enable,
+  disable,
+};

package/src/eventListeners/mouse/mouseDoubleClickListener.ts

@@ -0,0 +1,55 @@
+import { getEnabledElement, triggerEvent } from '@cornerstonejs/core';
+import Events from '../../enums/Events';
+import getMouseEventPoints from './getMouseEventPoints';
+import { EventTypes, IPoints } from '../../types';
+
+/**
+ * Captures and normalizes the double click event. Emits as a cornerstoneTools3D
+ * double click event.
+ *
+ * @param evt - The mouse event.
+ */
+function mouseDoubleClickListener(evt: MouseEvent): void {
+  const element = <HTMLDivElement>evt.currentTarget;
+
+  const { viewportId, renderingEngineId } = getEnabledElement(element);
+
+  const startPoints = getMouseEventPoints(evt, element);
+  const deltaPoints: IPoints = {
+    page: [0, 0],
+    client: [0, 0],
+    canvas: [0, 0],
+    world: [0, 0, 0],
+  };
+
+  const eventDetail: EventTypes.MouseDoubleClickEventDetail = {
+    event: evt,
+    eventName: Events.MOUSE_DOUBLE_CLICK,
+    viewportId,
+    renderingEngineId,
+    camera: {},
+    element,
+    startPoints,
+    lastPoints: startPoints,
+    currentPoints: startPoints,
+    deltaPoints,
+  };
+
+  const consumed = !triggerEvent(
+    element,
+    Events.MOUSE_DOUBLE_CLICK,
+    eventDetail
+  );
+
+  if (consumed) {
+    // The Events.MOUSE_DOUBLE_CLICK was consumed, thus no other listener should handle this 'dblclick' event.
+
+    // Use stopImmediatePropagation to lessen the possibility that a third party 'dblclick'
+    // listener receives this event. However, there still is no guarantee
+    // that any third party listener has not already handled the event.
+    evt.stopImmediatePropagation();
+    evt.preventDefault();
+  }
+}
+
+export default mouseDoubleClickListener;