@cornerstonejs/tools 0.56.1 → 0.56.3

package/src/eventListeners/touch/getTouchEventPoints.ts

@@ -0,0 +1,75 @@
+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];
+}

package/src/eventListeners/touch/index.ts

@@ -0,0 +1,37 @@
+import preventGhostClick from './preventGhostClick';
+import touchStartListener from './touchStartListener';
+
+/**
+ * Removes touch event listeners for native touch 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 {
+  preventGhostClick.disable(element);
+  element.removeEventListener('touchstart', touchStartListener);
+}
+
+/**
+ * Registers touch event listeners for native touch 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);
+  preventGhostClick.enable(element);
+  element.addEventListener('touchstart', touchStartListener, {
+    passive: false,
+  });
+}
+
+export default {
+  enable,
+  disable,
+};

package/src/eventListeners/touch/preventGhostClick.js

@@ -0,0 +1,72 @@
+// Functions to prevent ghost clicks following a touch
+// Since the event lifecycle is touchstart, mousedown, touchend, mouseup
+// we want to prevent mousedown and mouseup events after touch events
+// All credit to @kosich
+// https://gist.github.com/kosich/23188dd86633b6c2efb7
+
+const antiGhostDelay = 2000,
+  pointerType = {
+    mouse: 0,
+    touch: 1,
+  };
+
+let lastInteractionType, lastInteractionTime;
+
+function handleTap(type, e) {
+  const now = Date.now();
+
+  if (type !== lastInteractionType) {
+    if (now - lastInteractionTime <= antiGhostDelay) {
+      e.preventDefault();
+      e.stopPropagation();
+      e.stopImmediatePropagation();
+
+      return false;
+    }
+
+    lastInteractionType = type;
+  }
+
+  lastInteractionTime = now;
+}
+
+// Cacheing the function references
+// Necessary because a new function reference is created after .bind() is called
+// http://stackoverflow.com/questions/11565471/removing-event-listener-which-was-added-with-bind
+const handleTapMouse = handleTap.bind(null, pointerType.mouse);
+const handleTapTouch = handleTap.bind(null, pointerType.touch);
+
+function attachEvents(element, eventList, interactionType) {
+  const tapHandler = interactionType ? handleTapMouse : handleTapTouch;
+
+  eventList.forEach(function (eventName) {
+    element.addEventListener(eventName, tapHandler, { passive: false });
+  });
+}
+
+function removeEvents(element, eventList, interactionType) {
+  const tapHandler = interactionType ? handleTapMouse : handleTapTouch;
+
+  eventList.forEach(function (eventName) {
+    element.removeEventListener(eventName, tapHandler);
+  });
+}
+
+const mouseEvents = ['mousedown', 'mouseup', 'mousemove'];
+const touchEvents = ['touchstart', 'touchend'];
+
+function disable(element) {
+  removeEvents(element, mouseEvents, pointerType.mouse);
+  removeEvents(element, touchEvents, pointerType.touch);
+}
+
+function enable(element) {
+  disable(element);
+  attachEvents(element, mouseEvents, pointerType.mouse);
+  attachEvents(element, touchEvents, pointerType.touch);
+}
+
+export default {
+  enable,
+  disable,
+};

package/src/eventListeners/touch/touchStartListener.ts

@@ -0,0 +1,499 @@
+import { getEnabledElement, triggerEvent } from '@cornerstonejs/core';
+import Events from '../../enums/Events';
+import { Swipe } from '../../enums/Touch';
+
+import { EventTypes, ITouchPoints, IPoints, IDistance } from '../../types';
+
+import getTouchEventPoints from './getTouchEventPoints';
+import {
+  copyPoints,
+  copyPointsList,
+  getDeltaDistanceBetweenIPoints,
+  getDeltaDistance,
+  getDeltaPoints,
+  getMeanTouchPoints,
+  // getRotation
+} from '../../utilities/touch';
+import { Settings } from '@cornerstonejs/core';
+
+const runtimeSettings = Settings.getRuntimeSettings();
+
+const {
+  TOUCH_START,
+  TOUCH_START_ACTIVATE,
+  TOUCH_PRESS,
+  TOUCH_DRAG,
+  TOUCH_END,
+  TOUCH_TAP,
+  TOUCH_SWIPE,
+} = Events;
+
+interface ITouchTapListnenerState {
+  element: HTMLDivElement;
+  renderingEngineId: string;
+  viewportId: string;
+  startPointsList: ITouchPoints[];
+  tapMaxDistance: number;
+  tapTimeout: ReturnType<typeof setTimeout>;
+  taps: number;
+  tapToleranceMs: number;
+}
+
+interface ITouchStartListenerState {
+  element: HTMLDivElement;
+  renderingEngineId: string;
+  viewportId: string;
+  startPointsList: ITouchPoints[];
+  lastPointsList: ITouchPoints[];
+
+  // only trigger one touch event in the case the user puts down multiple fingers
+  isTouchStart: boolean;
+  startTime: Date;
+
+  // handle long press
+  pressTimeout: ReturnType<typeof setTimeout>;
+  pressDelay: number;
+  pressMaxDistance: number;
+  accumulatedDistance: IDistance;
+
+  // handle swipes
+  swipeDistanceThreshold: number;
+  swiped: boolean;
+  swipeToleranceMs: number;
+}
+
+const zeroIPoint: IPoints = {
+  page: [0, 0],
+  client: [0, 0],
+  canvas: [0, 0],
+  world: [0, 0, 0],
+};
+
+const zeroIDistance: IDistance = {
+  page: 0,
+  client: 0,
+  canvas: 0,
+  world: 0,
+};
+
+// STATE
+const defaultState: ITouchStartListenerState = {
+  renderingEngineId: undefined,
+  viewportId: undefined,
+  element: null,
+  startPointsList: [
+    {
+      ...zeroIPoint,
+      touch: null,
+    },
+  ],
+  lastPointsList: [
+    {
+      ...zeroIPoint,
+      touch: null,
+    },
+  ],
+  isTouchStart: false,
+  startTime: null,
+
+  pressTimeout: null,
+  pressDelay: 700,
+  pressMaxDistance: 5,
+  accumulatedDistance: zeroIDistance,
+
+  swipeDistanceThreshold: 48,
+  swiped: false,
+  swipeToleranceMs: 300, // user has 300ms to swipe after touch start or no swipe will trigger
+};
+
+// TODO: these values should be configurable to handle different use cases such
+// as pen, left/right handed, index finger vs thumb, etc. These current values
+// assume thumb usage for single finger and index/middle finger for two finger
+// gestures in an attempt to cover the 90% use case.
+const defaultTapState: ITouchTapListnenerState = {
+  renderingEngineId: undefined,
+  viewportId: undefined,
+  element: null,
+  startPointsList: [
+    {
+      ...zeroIPoint,
+      touch: null,
+    },
+  ],
+  taps: 0,
+  tapTimeout: null,
+  tapMaxDistance: 24,
+  tapToleranceMs: 300,
+};
+
+let state: ITouchStartListenerState = JSON.parse(JSON.stringify(defaultState));
+let tapState: ITouchTapListnenerState = JSON.parse(
+  JSON.stringify(defaultTapState)
+);
+
+function triggerEventCallback(ele, name, eventDetail) {
+  if (runtimeSettings.get('debug')) {
+    if (name === 'CORNERSTONE_TOOLS_TOUCH_DRAG') {
+      console.debug(name);
+    } else {
+      console.debug(name, eventDetail);
+    }
+  }
+  return triggerEvent(ele, name, eventDetail);
+}
+
+/**
+ * Listens to touch events from the DOM (touchstart, touchmove, touchend)
+ * and depending on interaction and further interaction can emit the
+ * following touch events:
+ *
+ * - TOUCH_START
+ * - TOUCH_START_ACTIVATE
+ * - TOUCH_PRESS
+ * - TOUCH_DRAG (move while down)
+ * - TOUCH_SWIPE
+ * - TOUCH_END (also an end for multi touch)
+ *
+ * - TOUCH_TAP
+ *
+ * @param evt - The Touch event (touchstart).
+ * @private
+ */
+function touchStartListener(evt: TouchEvent) {
+  // if a user adds an extra finger when a touch/multi touch has already started
+  // don't trigger another touch.
+  state.element = <HTMLDivElement>evt.currentTarget;
+  const enabledElement = getEnabledElement(state.element);
+  const { renderingEngineId, viewportId } = enabledElement;
+  state.renderingEngineId = renderingEngineId;
+  state.viewportId = viewportId;
+  // this prevents multiple start firing
+  if (state.isTouchStart) return;
+  // this will clear on touchstart and touchend
+  clearTimeout(state.pressTimeout);
+  state.pressTimeout = setTimeout(() => _onTouchPress(evt), state.pressDelay);
+
+  _onTouchStart(evt);
+  document.addEventListener('touchmove', _onTouchDrag); // also checks for swipe
+  document.addEventListener('touchend', _onTouchEnd); // also checks for tap
+}
+
+/**
+ * _onTouchPress - Handle emission of touchstart events which are held down for a longer
+ * period of time
+ *
+ * @private
+ * @param evt - The touch event (touchstart)
+ */
+function _onTouchPress(evt: TouchEvent) {
+  const totalDistance = state.accumulatedDistance.canvas;
+  if (totalDistance > state.pressMaxDistance) return;
+  const eventDetail: EventTypes.TouchPressEventDetail = {
+    event: evt, // touchstart native event
+    eventName: TOUCH_PRESS,
+    renderingEngineId: state.renderingEngineId,
+    viewportId: state.viewportId,
+    camera: {},
+    element: state.element,
+    startPointsList: copyPointsList(state.startPointsList),
+    lastPointsList: copyPointsList(state.lastPointsList),
+    startPoints: copyPoints(getMeanTouchPoints(state.startPointsList)),
+    lastPoints: copyPoints(getMeanTouchPoints(state.lastPointsList)),
+  };
+  triggerEventCallback(eventDetail.element, TOUCH_PRESS, eventDetail);
+}
+
+/**
+ * _onTouchStart - Handle emission of touchstart events.
+ *
+ * @private
+ * @param evt - The touch event (touchstart)
+ */
+function _onTouchStart(evt: TouchEvent) {
+  state.isTouchStart = true;
+  state.startTime = new Date();
+  const startPointsList = getTouchEventPoints(evt, state.element);
+  const startPoints = getMeanTouchPoints(startPointsList);
+  const deltaPoints = zeroIPoint;
+  const deltaDistance = zeroIDistance;
+  // deltaRotation same as deltaDistance but values are theta
+  const eventDetail: EventTypes.TouchStartEventDetail = {
+    event: evt,
+    eventName: TOUCH_START,
+    element: state.element,
+    renderingEngineId: state.renderingEngineId,
+    viewportId: state.viewportId,
+    camera: {},
+    startPointsList: startPointsList,
+    lastPointsList: startPointsList,
+    currentPointsList: startPointsList,
+    startPoints: startPoints,
+    lastPoints: startPoints,
+    currentPoints: startPoints,
+    deltaPoints,
+    deltaDistance,
+    // deltaRotation
+  };
+
+  state.startPointsList = copyPointsList(eventDetail.startPointsList);
+  state.lastPointsList = copyPointsList(eventDetail.lastPointsList);
+  // by triggering TOUCH_START it checks if this is toolSelection, handle modification etc.
+  // of already existing tools
+  const eventDidPropagate = triggerEventCallback(
+    eventDetail.element,
+    TOUCH_START,
+    eventDetail
+  );
+
+  // if no tools responded to this event and prevented its default propagation behavior,
+  // create a new tool
+  if (eventDidPropagate) {
+    triggerEventCallback(
+      eventDetail.element,
+      TOUCH_START_ACTIVATE,
+      eventDetail
+    );
+  }
+}
+
+/**
+ * _onTouchDrag - Handle emission of drag events whilst the touch is depressed.
+ *
+ * @private
+ * @param evt - The touch event (touchmove)
+ */
+function _onTouchDrag(evt: TouchEvent) {
+  const currentPointsList = getTouchEventPoints(evt, state.element);
+  const lastPointsList = _updateTouchEventsLastPoints(
+    state.element,
+    state.lastPointsList
+  );
+
+  const deltaPoints =
+    currentPointsList.length === lastPointsList.length
+      ? getDeltaPoints(currentPointsList, lastPointsList)
+      : zeroIPoint;
+
+  const deltaDistance =
+    currentPointsList.length === lastPointsList.length
+      ? getDeltaDistanceBetweenIPoints(currentPointsList, lastPointsList)
+      : zeroIDistance;
+
+  const totalDistance =
+    currentPointsList.length === lastPointsList.length
+      ? getDeltaDistance(currentPointsList, state.lastPointsList)
+      : zeroIDistance;
+
+  state.accumulatedDistance = {
+    page: state.accumulatedDistance.page + totalDistance.page,
+    client: state.accumulatedDistance.client + totalDistance.client,
+    canvas: state.accumulatedDistance.canvas + totalDistance.canvas,
+    world: state.accumulatedDistance.world + totalDistance.world,
+  };
+
+  /**
+   * this is can be uncommented to make dragging smoother. In the future, these values
+   * should be in a configuration file. There may also need to be different
+   * profiles for left handed and right handed thumb use. These values
+   * are currently optimized for left handed use.
+   *
+   * const clamp = (num) => Math.min(Math.max(num, -15), 10);
+   * const deltaDistanceClamped = \{
+   *     page: clamp(deltaDistance.page),
+   *     client: clamp(deltaDistance.client),
+   *     canvas: clamp(deltaDistance.canvas),
+   *     world: clamp(deltaDistance.world),
+   * \};
+   */
+
+  const eventDetail: EventTypes.TouchDragEventDetail = {
+    event: evt,
+    eventName: TOUCH_DRAG,
+    renderingEngineId: state.renderingEngineId,
+    viewportId: state.viewportId,
+    camera: {},
+    element: state.element,
+    startPoints: getMeanTouchPoints(state.startPointsList),
+    lastPoints: getMeanTouchPoints(lastPointsList),
+    currentPoints: getMeanTouchPoints(currentPointsList),
+    startPointsList: copyPointsList(state.startPointsList),
+    lastPointsList: copyPointsList(lastPointsList),
+    currentPointsList,
+    deltaPoints: deltaPoints,
+    deltaDistance: deltaDistance,
+  };
+
+  triggerEventCallback(state.element, TOUCH_DRAG, eventDetail);
+
+  // check for swipe events
+  _checkTouchSwipe(evt, deltaPoints);
+
+  // Update the last points
+  state.lastPointsList = copyPointsList(currentPointsList);
+}
+
+/**
+ * _onTouchEnd - Handle emission of touch end events
+ *
+ * @private
+ * @param evt - The touch event.
+ */
+function _onTouchEnd(evt: TouchEvent): void {
+  // in case it was a tap event we don't want to fire the cornerstone normalized
+  // touch end event if the touch start never happend
+  clearTimeout(state.pressTimeout);
+  const currentPointsList = getTouchEventPoints(evt, state.element);
+  const lastPointsList = _updateTouchEventsLastPoints(
+    state.element,
+    state.lastPointsList
+  );
+  const deltaPoints =
+    currentPointsList.length === lastPointsList.length
+      ? getDeltaPoints(currentPointsList, lastPointsList)
+      : getDeltaPoints(currentPointsList, currentPointsList);
+  const deltaDistance =
+    currentPointsList.length === lastPointsList.length
+      ? getDeltaDistanceBetweenIPoints(currentPointsList, lastPointsList)
+      : getDeltaDistanceBetweenIPoints(currentPointsList, currentPointsList);
+  const eventDetail: EventTypes.TouchEndEventDetail = {
+    event: evt,
+    eventName: TOUCH_END,
+    element: state.element,
+    renderingEngineId: state.renderingEngineId,
+    viewportId: state.viewportId,
+    camera: {},
+    startPointsList: copyPointsList(state.startPointsList),
+    lastPointsList: copyPointsList(lastPointsList),
+    currentPointsList,
+    startPoints: getMeanTouchPoints(state.startPointsList),
+    lastPoints: getMeanTouchPoints(lastPointsList),
+    currentPoints: getMeanTouchPoints(currentPointsList),
+    deltaPoints,
+    deltaDistance,
+  };
+
+  triggerEventCallback(eventDetail.element, TOUCH_END, eventDetail);
+  _checkTouchTap(evt);
+
+  // reset to default state
+  state = JSON.parse(JSON.stringify(defaultState));
+  document.removeEventListener('touchmove', _onTouchDrag);
+  document.removeEventListener('touchend', _onTouchEnd);
+}
+
+function _checkTouchTap(evt: TouchEvent): void {
+  const currentTime = new Date().getTime();
+  const startTime = state.startTime.getTime();
+  if (currentTime - startTime > tapState.tapToleranceMs) return;
+
+  // first tap, initialize the state
+  if (tapState.taps === 0) {
+    tapState.element = state.element;
+    tapState.renderingEngineId = state.renderingEngineId;
+    tapState.viewportId = state.viewportId;
+    tapState.startPointsList = state.startPointsList;
+  }
+
+  // subsequent tap is on a different element
+  if (
+    tapState.taps > 0 &&
+    !(
+      tapState.element == state.element &&
+      tapState.renderingEngineId == state.renderingEngineId &&
+      tapState.viewportId == state.viewportId
+    )
+  ) {
+    return;
+  }
+
+  const currentPointsList = getTouchEventPoints(evt, tapState.element);
+  const distanceFromStart = getDeltaDistance(
+    currentPointsList,
+    tapState.startPointsList
+  ).canvas;
+
+  // if the tap is too far from starting tap, we can ignore it.
+  // TODO: in the case the user means to tap in two separate areas within the
+  // tapTolerance (300ms), the second tap will not trigger. This is because it
+  // is ignored below for simplicity to track multiple taps (double, triple etc)
+  // in order to support two separate single taps that occur < 300ms on the
+  // screen. One can create the concept of "TapChains". Our current implementation
+  // only supports a single tap chain on the screen. You can think of it as a
+  // region where the user has the option to perform unlimited multitaps as long
+  // as they are < the tapToleranceMs value. So a tap somewhere else on the screen
+  // that is > the tapMaxDistance will start a separate and new "TapChain".
+  if (distanceFromStart > tapState.tapMaxDistance) return;
+
+  clearTimeout(tapState.tapTimeout);
+  tapState.taps += 1;
+
+  tapState.tapTimeout = setTimeout(() => {
+    const eventDetail: EventTypes.TouchTapEventDetail = {
+      event: evt,
+      eventName: TOUCH_TAP,
+      element: tapState.element,
+      renderingEngineId: tapState.renderingEngineId,
+      viewportId: tapState.viewportId,
+      camera: {},
+      currentPointsList,
+      currentPoints: getMeanTouchPoints(currentPointsList),
+      taps: tapState.taps,
+    };
+    triggerEventCallback(eventDetail.element, TOUCH_TAP, eventDetail);
+    tapState = JSON.parse(JSON.stringify(defaultTapState));
+  }, tapState.tapToleranceMs);
+}
+
+function _checkTouchSwipe(evt: TouchEvent, deltaPoints: IPoints) {
+  const currentTime = new Date().getTime();
+  const startTime = state.startTime.getTime();
+  if (state.swiped || currentTime - startTime > state.swipeToleranceMs) return;
+  const [x, y] = deltaPoints.canvas;
+  const eventDetail: EventTypes.TouchSwipeEventDetail = {
+    event: evt,
+    eventName: TOUCH_SWIPE,
+    renderingEngineId: state.renderingEngineId,
+    viewportId: state.viewportId,
+    camera: {},
+    element: state.element,
+    swipe: null,
+  };
+  if (Math.abs(x) > state.swipeDistanceThreshold) {
+    eventDetail.swipe = x > 0 ? Swipe.RIGHT : Swipe.LEFT;
+    triggerEventCallback(eventDetail.element, TOUCH_SWIPE, eventDetail);
+    state.swiped = true;
+  }
+
+  if (Math.abs(y) > state.swipeDistanceThreshold) {
+    eventDetail.swipe = y > 0 ? Swipe.DOWN : Swipe.UP;
+    triggerEventCallback(eventDetail.element, TOUCH_SWIPE, eventDetail);
+    state.swiped = true;
+  }
+}
+
+/**
+ * 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 _updateTouchEventsLastPoints(
+  element: HTMLDivElement,
+  lastPoints: ITouchPoints[]
+): ITouchPoints[] {
+  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.
+  return lastPoints.map((lp) => {
+    const world = viewport.canvasToWorld(lp.canvas);
+    return {
+      page: lp.page,
+      client: lp.client,
+      canvas: lp.canvas,
+      world,
+      touch: lp.touch,
+    };
+  });
+}
+
+export default touchStartListener;

package/src/eventListeners/wheel/index.ts

@@ -0,0 +1,27 @@
+import wheelListener from './wheelListener';
+
+/**
+ * Listens for the wheel event, and handles it. Handled event
+ * will be "normalized" and re-emitted as `Events.MOUSE_WHEEL`
+ *
+ * @param element - The HTML element
+ */
+function enable(element: HTMLDivElement) {
+  disable(element);
+  element.addEventListener('wheel', wheelListener, { passive: false });
+}
+
+/**
+ * Removes listener and handler for wheel event. `Events.MOUSE_WHEEL`
+ * will no longer be emitted.
+ *
+ * @param element - THe HTML element
+ */
+function disable(element: HTMLDivElement) {
+  element.removeEventListener('wheel', wheelListener);
+}
+
+export default {
+  enable,
+  disable,
+};