All files / packages/tools/src/eventListeners/touch getTouchEventPoints.ts

0% Statements 0/13
0% Branches 0/4
0% Functions 0/5
0% Lines 0/13

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                                                                                                                                                       
import { getEnabledElement } from '@cornerstonejs/core';
import type { Types } from '@cornerstonejs/core';
 
import { ITouchPoints } from '../../types';
 
/**
 * Given a native touch event, get the associated cornerstone3D enabled element
 * and derive a set of coordinates useful for tools.
 * @param evt - The Touch 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 getTouchEventPoints(
  evt: TouchEvent,
  element?: HTMLDivElement
): ITouchPoints[] {
  const elementToUse = element || (evt.currentTarget as HTMLDivElement);
  const touches = evt.type === 'touchend' ? evt.changedTouches : evt.touches;
  return Object.keys(touches).map((i) => {
    const clientPoint = _clientToPoint(touches[i]);
    const pagePoint = _pageToPoint(touches[i]);
    const canvasPoint = _pagePointsToCanvasPoints(elementToUse, pagePoint);
    const { viewport } = getEnabledElement(elementToUse);
    const worldPoint = viewport.canvasToWorld(canvasPoint);
    return {
      page: pagePoint,
      client: clientPoint,
      canvas: canvasPoint,
      world: worldPoint,
      touch: {
        identifier: i,
        radiusX: touches[i].radiusX,
        radiusY: touches[i].radiusY,
        force: touches[i].force,
        rotationAngle: touches[i].rotationAngle,
      },
    };
  });
}
 
/**
 * 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 touch - The Touch
 */
function _pageToPoint(touch: Touch): Types.Point2 {
  return [touch.pageX, touch.pageY];
}
 
/**
 * Converts the event's `clientX` and `clientY` properties to Types.Point2 format
 * @param evt - The Touch `Event`
 */
function _clientToPoint(touch: Touch): Types.Point2 {
  return [touch.clientX, touch.clientY];
}