All files / packages/tools/src/eventListeners/mouse mouseDownListener.ts

100% Statements 52/52
100% Branches 4/4
100% Functions 10/10
100% Lines 46/46

Press n or j to go to the next uncovered block, b, p or k for the previous block.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300                  1x                             1x                                               1x                                                                           87x   87x   87x 87x   87x 87x   87x           87x   87x 87x   87x                           87x 87x       87x               87x 56x     87x 87x                   67x 67x         67x   67x                           67x     67x                     78x   78x   78x 78x     78x                           78x     78x 78x     78x     78x       8x                   531x                         67x     67x   67x                               232x                                     696x             232x       18x        
import { getEnabledElement, triggerEvent } from '@cornerstonejs/core';
import type { Types } from '@cornerstonejs/core';
 
import Events from '../../enums/Events';
import mouseMoveListener from './mouseMoveListener';
import { EventTypes, IPoints } from '../../types';
import getMouseEventPoints from './getMouseEventPoints';
 
const { MOUSE_DOWN, MOUSE_DOWN_ACTIVATE, MOUSE_CLICK, MOUSE_UP, MOUSE_DRAG } =
  Events;
 
interface IMouseDownListenerState {
  mouseButton: number;
  element: HTMLDivElement;
  renderingEngineId: string;
  viewportId: string;
  isClickEvent: boolean;
  clickDelay: number;
  preventClickTimeout: ReturnType<typeof setTimeout>;
  startPoints: IPoints;
  lastPoints: IPoints;
}
 
// STATE
const defaultState: IMouseDownListenerState = {
  mouseButton: undefined,
  //
  element: null,
  renderingEngineId: undefined,
  viewportId: undefined,
  //
  isClickEvent: true,
  clickDelay: 200,
  preventClickTimeout: null,
  startPoints: {
    page: [0, 0],
    client: [0, 0],
    canvas: [0, 0],
    world: [0, 0, 0],
  },
  lastPoints: {
    page: [0, 0],
    client: [0, 0],
    canvas: [0, 0],
    world: [0, 0, 0],
  },
};
 
let state: IMouseDownListenerState = {
  mouseButton: undefined,
  //
  renderingEngineId: undefined,
  viewportId: undefined,
  //
  isClickEvent: true,
  clickDelay: 200,
  element: null,
  preventClickTimeout: null,
  startPoints: {
    page: [0, 0],
    client: [0, 0],
    canvas: [0, 0],
    world: [0, 0, 0],
  },
  lastPoints: {
    page: [0, 0],
    client: [0, 0],
    canvas: [0, 0],
    world: [0, 0, 0],
  },
};
 
/**
 * Listens to mouse down events from the DOM and depending on interaction and further
 * interaction can emit the following mouse events:
 *
 * - MOUSE_DOWN
 * - MOUSE_DOWN_ACTIVATE
 * - MOUSE_DRAG (move while down)
 * - MOUSE_UP
 * - MOUSE_CLICK
 *
 * @param evt - The Mouse event.
 * @private
 */
function mouseDownListener(evt: MouseEvent) {
  state.element = <HTMLDivElement>evt.currentTarget;
 
  state.mouseButton = evt.button;
 
  const enabledElement = getEnabledElement(state.element);
  const { renderingEngineId, viewportId } = enabledElement;
 
  state.renderingEngineId = renderingEngineId;
  state.viewportId = viewportId;
 
  state.preventClickTimeout = setTimeout(
    _preventClickHandler,
    state.clickDelay
  );
 
  // Prevent CornerstoneToolsMouseMove while mouse is down
  state.element.removeEventListener('mousemove', mouseMoveListener);
 
  const startPoints = getMouseEventPoints(evt, state.element);
  const deltaPoints = _getDeltaPoints(startPoints, startPoints);
 
  const eventDetail: EventTypes.MouseDownEventDetail = {
    event: evt,
    eventName: MOUSE_DOWN,
    element: state.element,
    mouseButton: state.mouseButton,
    renderingEngineId: state.renderingEngineId,
    viewportId: state.viewportId,
    camera: {},
    startPoints,
    lastPoints: startPoints,
    currentPoints: startPoints,
    deltaPoints,
  };
 
  state.startPoints = _copyPoints(eventDetail.startPoints);
  state.lastPoints = _copyPoints(eventDetail.lastPoints);
 
  // by triggering MOUSE_DOWN it checks if this is toolSelection, handle modification etc.
  // of already existing tools
  const eventDidPropagate = triggerEvent(
    eventDetail.element,
    MOUSE_DOWN,
    eventDetail
  );
 
  // if no tools responded to this event and prevented its default propagation behavior,
  // create a new tool
  if (eventDidPropagate) {
    triggerEvent(eventDetail.element, MOUSE_DOWN_ACTIVATE, eventDetail);
  }
 
  document.addEventListener('mousemove', _onMouseDrag);
  document.addEventListener('mouseup', _onMouseUp);
}
 
/**
 *_onMouseDrag - Handle emission of drag events whilst the mouse is depressed.
 *
 * @private
 * @param evt - The mouse event.
 */
function _onMouseDrag(evt: MouseEvent) {
  const currentPoints = getMouseEventPoints(evt, state.element);
  const lastPoints = _updateMouseEventsLastPoints(
    state.element,
    state.lastPoints
  );
 
  const deltaPoints = _getDeltaPoints(currentPoints, lastPoints);
 
  const eventDetail: EventTypes.MouseDragEventDetail = {
    event: evt,
    eventName: MOUSE_DRAG,
    mouseButton: state.mouseButton,
    renderingEngineId: state.renderingEngineId,
    viewportId: state.viewportId,
    camera: {},
    element: state.element,
    startPoints: _copyPoints(state.startPoints),
    lastPoints: _copyPoints(lastPoints),
    currentPoints,
    deltaPoints,
  };
 
  triggerEvent(state.element, MOUSE_DRAG, eventDetail);
 
  // Update the last points
  state.lastPoints = _copyPoints(currentPoints);
}
 
/**
 *_onMouseDrag - Handle emission of mouse up events, and re-enabling mouse move events.
 *
 * @private
 * @param evt - The mouse event.
 */
function _onMouseUp(evt: MouseEvent): void {
  // Cancel the timeout preventing the click event from triggering
  clearTimeout(state.preventClickTimeout);
 
  const eventName = state.isClickEvent ? MOUSE_CLICK : MOUSE_UP;
 
  const currentPoints = getMouseEventPoints(evt, state.element);
  const deltaPoints = _getDeltaPoints(currentPoints, state.lastPoints);
  const eventDetail:
    | EventTypes.MouseUpEventDetail
    | EventTypes.MouseClickEventType = {
    event: evt,
    eventName,
    mouseButton: state.mouseButton,
    element: state.element,
    renderingEngineId: state.renderingEngineId,
    viewportId: state.viewportId,
    camera: {},
    startPoints: _copyPoints(state.startPoints),
    lastPoints: _copyPoints(state.lastPoints),
    currentPoints,
    deltaPoints,
  };
 
  triggerEvent(eventDetail.element, eventName, eventDetail);
 
  // Remove our temporary handlers
  document.removeEventListener('mousemove', _onMouseDrag);
  document.removeEventListener('mouseup', _onMouseUp);
 
  // Restore our global mousemove listener
  state.element.addEventListener('mousemove', mouseMoveListener);
 
  // Restore `state` to `defaultState`
  state = JSON.parse(JSON.stringify(defaultState));
}
 
function _preventClickHandler() {
  state.isClickEvent = false;
}
 
/**
 * Copies a set of points.
 * @param points - The `IPoints` instance to copy.
 *
 * @returns A copy of the points.
 */
function _copyPoints(points: IPoints): IPoints {
  return JSON.parse(JSON.stringify(points));
}
 
/**
 * Recalculates the last world coordinate, as the linear transform from client
 * to world could be different if the camera was updated.
 * @param element - The HTML element
 * @param lastPoints - The last points
 */
function _updateMouseEventsLastPoints(
  element: HTMLDivElement,
  lastPoints: IPoints
): IPoints {
  const { viewport } = getEnabledElement(element);
  // Need to update the world point to be calculated from the current reference frame,
  // Which might have changed since the last interaction.
  const world = viewport.canvasToWorld(lastPoints.canvas);
 
  return {
    page: lastPoints.page,
    client: lastPoints.client,
    canvas: lastPoints.canvas,
    world,
  };
}
 
/**
 * Returns the difference between two `IPoints` instances.
 * @param currentPoints - The current points.
 * @param lastPoints -- The last points, to be subtracted from the `currentPoints`.
 *
 * @returns The difference in IPoints format
 */
function _getDeltaPoints(currentPoints: IPoints, lastPoints: IPoints): IPoints {
  return {
    page: _subtractPoints2D(currentPoints.page, lastPoints.page),
    client: _subtractPoints2D(currentPoints.client, lastPoints.client),
    canvas: _subtractPoints2D(currentPoints.canvas, lastPoints.canvas),
    world: _subtractPoints3D(currentPoints.world, lastPoints.world),
  };
}
 
/**
 * _subtractPoints - Subtracts `point1` from `point0`.
 * @param point0 - The first point.
 * @param point1 - The second point to subtract from the first.
 *
 * @returns The difference.
 */
function _subtractPoints2D(
  point0: Types.Point2,
  point1: Types.Point2
): Types.Point2 {
  return [point0[0] - point1[0], point0[1] - point1[1]];
}
 
function _subtractPoints3D(
  point0: Types.Point3,
  point1: Types.Point3
): Types.Point3 {
  return [point0[0] - point1[0], point0[1] - point1[1], point0[2] - point1[2]];
}
 
export function getMouseButton(): number {
  return state.mouseButton;
}
 
export default mouseDownListener;