@cornerstonejs/tools 1.9.3 → 1.10.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cornerstonejs/tools",
-  "version": "1.9.3",
+  "version": "1.10.1",
   "description": "Cornerstone3D Tools",
   "main": "dist/umd/index.js",
   "types": "dist/esm/index.d.ts",
@@ -29,7 +29,7 @@
     "webpack:watch": "webpack --mode development --progress --watch  --config ./.webpack/webpack.dev.js"
   },
   "dependencies": {
-    "@cornerstonejs/core": "^1.9.3",
+    "@cornerstonejs/core": "^1.10.1",
     "lodash.clonedeep": "4.5.0",
     "lodash.get": "^4.4.2"
   },
@@ -52,5 +52,5 @@
     "type": "individual",
     "url": "https://ohif.org/donate"
   },
-  "gitHead": "64d4409021e5090043cace49fbefa75f27bfad83"
+  "gitHead": "d5dfd002158723322adb328e32bc8637b8035dea"
 }

package/src/enums/Events.ts

@@ -5,6 +5,19 @@
  *
  */
 enum Events {
+  ///////////////////////////////////////
+  //            Tools
+  ///////////////////////////////////////
+
+  /**
+   * Triggers on the eventTarget when a new tools is activated.
+   *
+   * Make use of {@link EventTypes.ToolActivatedEventType | Tool Activated Event Type  }
+   * for typing your event listeners for this tool activated event, and see what event
+   * detail is included in {@link EventTypes.ToolActivatedEventDetail | Tool Activated Event Detail}.
+   */
+  TOOL_ACTIVATED = 'CORNERSTONE_TOOLS_TOOL_ACTIVATED',
+
   ///////////////////////////////////////
   //            Annotations
   ///////////////////////////////////////

package/src/eventDispatchers/shared/getMouseModifier.ts

@@ -8,14 +8,24 @@ import { KeyboardBindings as kb } from '../../enums';
 const getMouseModifierKey = (evt) => {
   // The logic is a hard coded key mapping
   if (evt.shiftKey) {
-    if (evt.ctrlKey) return kb.ShiftCtrl;
-    if (evt.altKey) return kb.ShiftAlt;
-    if (evt.metaKey) return kb.ShiftMeta;
+    if (evt.ctrlKey) {
+      return kb.ShiftCtrl;
+    }
+    if (evt.altKey) {
+      return kb.ShiftAlt;
+    }
+    if (evt.metaKey) {
+      return kb.ShiftMeta;
+    }
     return kb.Shift;
   }
   if (evt.ctrlKey) {
-    if (evt.altKey) return kb.CtrlAlt;
-    if (evt.metaKey) return kb.CtrlMeta;
+    if (evt.altKey) {
+      return kb.CtrlAlt;
+    }
+    if (evt.metaKey) {
+      return kb.CtrlMeta;
+    }
     return kb.Ctrl;
   }
   if (evt.altKey) {

package/src/eventListeners/mouse/mouseDownListener.ts

@@ -129,7 +129,9 @@ const doubleClickState: IDoubleClickState = {
 function mouseDownListener(evt: MouseEvent) {
   if (doubleClickState.doubleClickTimeout) {
     // A second identical click will be a double click event, so ignore it
-    if (evt.buttons === doubleClickState.mouseDownEvent.buttons) return;
+    if (evt.buttons === doubleClickState.mouseDownEvent.buttons) {
+      return;
+    }
 
     // Record the second button or the changed button event as the initial
     // button down state so that the multi-button event can be detected

package/src/eventListeners/touch/touchStartListener.ts

@@ -168,7 +168,9 @@ function touchStartListener(evt: TouchEvent) {
   state.renderingEngineId = renderingEngineId;
   state.viewportId = viewportId;
   // this prevents multiple start firing
-  if (state.isTouchStart) return;
+  if (state.isTouchStart) {
+    return;
+  }
   // this will clear on touchstart and touchend
   clearTimeout(state.pressTimeout);
   state.pressTimeout = setTimeout(() => _onTouchPress(evt), state.pressDelay);
@@ -187,7 +189,9 @@ function touchStartListener(evt: TouchEvent) {
  */
 function _onTouchPress(evt: TouchEvent) {
   const totalDistance = state.accumulatedDistance.canvas;
-  if (totalDistance > state.pressMaxDistance) return;
+  if (totalDistance > state.pressMaxDistance) {
+    return;
+  }
   const eventDetail: EventTypes.TouchPressEventDetail = {
     event: evt, // touchstart native event
     eventName: TOUCH_PRESS,
@@ -384,7 +388,9 @@ function _onTouchEnd(evt: TouchEvent): void {
 function _checkTouchTap(evt: TouchEvent): void {
   const currentTime = new Date().getTime();
   const startTime = state.startTime.getTime();
-  if (currentTime - startTime > tapState.tapToleranceMs) return;
+  if (currentTime - startTime > tapState.tapToleranceMs) {
+    return;
+  }
 
   // first tap, initialize the state
   if (tapState.taps === 0) {
@@ -422,7 +428,9 @@ function _checkTouchTap(evt: TouchEvent): void {
   // 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;
+  if (distanceFromStart > tapState.tapMaxDistance) {
+    return;
+  }
 
   clearTimeout(tapState.tapTimeout);
   tapState.taps += 1;
@@ -447,7 +455,9 @@ function _checkTouchTap(evt: TouchEvent): void {
 function _checkTouchSwipe(evt: TouchEvent, deltaPoints: IPoints) {
   const currentTime = new Date().getTime();
   const startTime = state.startTime.getTime();
-  if (state.swiped || currentTime - startTime > state.swipeToleranceMs) return;
+  if (state.swiped || currentTime - startTime > state.swipeToleranceMs) {
+    return;
+  }
   const [x, y] = deltaPoints.canvas;
   const eventDetail: EventTypes.TouchSwipeEventDetail = {
     event: evt,

package/src/stateManagement/annotation/config/getState.ts

@@ -11,13 +11,17 @@ import { AnnotationStyleStates } from '../../../enums';
  */
 function getState(annotation?: Annotation): AnnotationStyleStates {
   if (annotation) {
-    if (annotation.data && annotation.highlighted)
+    if (annotation.data && annotation.highlighted) {
       return AnnotationStyleStates.Highlighted;
-    if (isAnnotationSelected(annotation.annotationUID))
+    }
+    if (isAnnotationSelected(annotation.annotationUID)) {
       return AnnotationStyleStates.Selected;
+    }
 
     // Todo: make annotation lock api not to rely on the annotation itself
-    if (isAnnotationLocked(annotation)) return AnnotationStyleStates.Locked;
+    if (isAnnotationLocked(annotation)) {
+      return AnnotationStyleStates.Locked;
+    }
   }
 
   return AnnotationStyleStates.Default;

package/src/stateManagement/annotation/config/helpers.ts

@@ -15,8 +15,12 @@ function getHierarchalPropertyStyles(
   mode?: ToolModes
 ): string[] {
   const list = [`${property}`];
-  if (state) list.push(`${list[0]}${state}`);
-  if (mode) list.push(`${list[list.length - 1]}${mode}`);
+  if (state) {
+    list.push(`${list[0]}${state}`);
+  }
+  if (mode) {
+    list.push(`${list[list.length - 1]}${mode}`);
+  }
   return list;
 }
 

package/src/store/ToolGroupManager/ToolGroup.ts

@@ -2,6 +2,8 @@ import { MouseBindings, ToolModes } from '../../enums';
 import cloneDeep from 'lodash.clonedeep';
 import get from 'lodash.get';
 import {
+  triggerEvent,
+  eventTarget,
   getRenderingEngine,
   getRenderingEngines,
   getEnabledElementByIds,
@@ -9,6 +11,8 @@ import {
   utilities as csUtils,
 } from '@cornerstonejs/core';
 import type { Types } from '@cornerstonejs/core';
+import { Events } from '../../enums';
+import { ToolActivatedEventDetail } from '../../types/EventTypes';
 import { state } from '../index';
 import {
   IToolBinding,
@@ -69,7 +73,7 @@ export default class ToolGroup implements IToolGroup {
     const toolInstance = this._toolInstances[toolInstanceName];
     if (!toolInstance) {
       console.warn(
-        `'${toolInstanceName}' is not registered with this toolGroup.`
+        `'${toolInstanceName}' is not registered with this toolGroup (${this.id}).`
       );
       return;
     }
@@ -372,6 +376,14 @@ export default class ToolGroup implements IToolGroup {
       toolInstance.onSetToolActive();
     }
     this._renderViewports();
+
+    const eventDetail: ToolActivatedEventDetail = {
+      toolGroupId: this.id,
+      toolName,
+      toolBindingsOptions,
+    };
+
+    triggerEvent(eventTarget, Events.TOOL_ACTIVATED, eventDetail);
   }
 
   /**

package/src/store/ToolGroupManager/getToolGroupsWithToolName.ts

@@ -15,7 +15,9 @@ function getToolGroupsWithToolName(toolName: string): IToolGroup[] | [] {
     const toolGroupToolNames = Object.keys(toolOptions);
 
     for (let i = 0; i < toolGroupToolNames.length; i++) {
-      if (toolName !== toolGroupToolNames[i]) continue;
+      if (toolName !== toolGroupToolNames[i]) {
+        continue;
+      }
 
       /* filter out tools that don't have options */
       if (!toolOptions[toolName]) {

package/src/tools/MIPJumpToClickTool.ts

@@ -80,9 +80,13 @@ class MIPJumpToClickTool extends BaseTool {
     const { targetViewportIds, toolGroupId } = this.configuration;
     // TODO - consider making this a utility
     const viewports = renderingEngine.getViewports().filter((vp) => {
-      if (targetViewportIds?.indexOf(vp.id) >= 0) return true;
+      if (targetViewportIds?.indexOf(vp.id) >= 0) {
+        return true;
+      }
       const foundToolGroup = getToolGroupForViewport(vp.id, renderingEngine.id);
-      if (toolGroupId && toolGroupId === foundToolGroup?.id) return true;
+      if (toolGroupId && toolGroupId === foundToolGroup?.id) {
+        return true;
+      }
       return false;
     });
 

package/src/tools/PlanarRotateTool.ts

@@ -56,7 +56,9 @@ class PlanarRotateTool extends BaseTool {
       angle = -angle;
     }
 
-    if (Number.isNaN(angle)) return;
+    if (Number.isNaN(angle)) {
+      return;
+    }
 
     if (viewport instanceof BaseVolumeViewport) {
       const rotAngle = (angle * Math.PI) / 180;

package/src/tools/ReferenceCursors.ts

@@ -104,26 +104,38 @@ class ReferenceCursors extends AnnotationDisplayTool {
 
   onSetToolActive(): void {
     this._disableCursorEnabled = this.configuration.disableCursor;
-    if (!this._disableCursorEnabled) return;
+    if (!this._disableCursorEnabled) {
+      return;
+    }
     const viewportIds = getToolGroup(this.toolGroupId).viewportsInfo;
-    if (!viewportIds) return;
+    if (!viewportIds) {
+      return;
+    }
     const enabledElements = viewportIds.map((e) =>
       getEnabledElementByIds(e.viewportId, e.renderingEngineId)
     );
 
     enabledElements.forEach((element) => {
-      if (element) hideElementCursor(element.viewport.element);
+      if (element) {
+        hideElementCursor(element.viewport.element);
+      }
     });
   }
   onSetToolDisabled(): void {
-    if (!this._disableCursorEnabled) return;
+    if (!this._disableCursorEnabled) {
+      return;
+    }
     const viewportIds = getToolGroup(this.toolGroupId).viewportsInfo;
-    if (!viewportIds) return;
+    if (!viewportIds) {
+      return;
+    }
     const enabledElements = viewportIds.map((e) =>
       getEnabledElementByIds(e.viewportId, e.renderingEngineId)
     );
     enabledElements.forEach((element) => {
-      if (element) resetElementCursor(element.viewport.element);
+      if (element) {
+        resetElementCursor(element.viewport.element);
+      }
     });
   }
 
@@ -132,14 +144,18 @@ class ReferenceCursors extends AnnotationDisplayTool {
     element: HTMLDivElement
   ): void => {
     const enabledElement = getEnabledElement(element);
-    if (!enabledElement) throw new Error('No enabled element found');
+    if (!enabledElement) {
+      throw new Error('No enabled element found');
+    }
     const { viewport, renderingEngine } = enabledElement;
 
     this.isDrawing = true;
 
     const camera = viewport.getCamera();
     const { viewPlaneNormal, viewUp } = camera;
-    if (!viewPlaneNormal || !viewUp) throw new Error('Camera not found');
+    if (!viewPlaneNormal || !viewUp) {
+      throw new Error('Camera not found');
+    }
 
     const referencedImageId = this.getReferencedImageId(
       viewport,
@@ -181,10 +197,14 @@ class ReferenceCursors extends AnnotationDisplayTool {
 
     const annotations = getAnnotations(this.getToolName(), element);
 
-    if (annotations.length > 0) return null;
+    if (annotations.length > 0) {
+      return null;
+    }
     const annotationId = addAnnotation(annotation, element);
 
-    if (annotationId === null) return;
+    if (annotationId === null) {
+      return;
+    }
 
     const viewportIdsToRender = getViewportIdsWithToolToRender(
       element,
@@ -212,8 +232,12 @@ class ReferenceCursors extends AnnotationDisplayTool {
     annotation: Annotation
   ): void {
     const worldPos = this._currentCursorWorldPosition;
-    if (!worldPos) return;
-    if (!annotation.data?.handles?.points) return;
+    if (!worldPos) {
+      return;
+    }
+    if (!annotation.data?.handles?.points) {
+      return;
+    }
     annotation.data.handles.points = [[...worldPos]];
     annotation.invalidated = true;
 
@@ -223,7 +247,9 @@ class ReferenceCursors extends AnnotationDisplayTool {
       false
     );
     const enabledElement = getEnabledElement(element);
-    if (!enabledElement) return;
+    if (!enabledElement) {
+      return;
+    }
     const { renderingEngine } = enabledElement;
     triggerAnnotationRenderForViewportIds(renderingEngine, viewportIdsToRender);
   }
@@ -238,7 +264,9 @@ class ReferenceCursors extends AnnotationDisplayTool {
       | Types.IStackViewport;
 
     //only react to changes for element with cursor, otherwise would cause infinite loop
-    if (element !== this._elementWithCursor) return;
+    if (element !== this._elementWithCursor) {
+      return;
+    }
     //check if camera moved along its normal
     const oldFocalPoint = previousCamera.focalPoint;
     const cameraNormal = camera.viewPlaneNormal;
@@ -247,14 +275,20 @@ class ReferenceCursors extends AnnotationDisplayTool {
     const deltaCameraFocalPoint: Types.Point3 = [0, 0, 0];
     vtkMath.subtract(newFocalPoint, oldFocalPoint, deltaCameraFocalPoint);
     //check if focal point changed
-    if (deltaCameraFocalPoint.reduce((a, b) => a + b, 0) === 0) return;
+    if (deltaCameraFocalPoint.reduce((a, b) => a + b, 0) === 0) {
+      return;
+    }
     //if nomrmal is perpendicular to focal point change, then we are not moving along the normal
     const dotProduct = vtkMath.dot(deltaCameraFocalPoint, cameraNormal);
     //dot product is 0 -> perpendicular
-    if (Math.abs(dotProduct) < 1e-2) return;
+    if (Math.abs(dotProduct) < 1e-2) {
+      return;
+    }
 
     //need to update the position of the annotation since camera changed
-    if (!this._currentCanvasPosition) return;
+    if (!this._currentCanvasPosition) {
+      return;
+    }
 
     const newWorldPos = viewport.canvasToWorld(this._currentCanvasPosition);
     this._currentCursorWorldPosition = newWorldPos;
@@ -267,15 +301,23 @@ class ReferenceCursors extends AnnotationDisplayTool {
     annotations: Annotations
   ): Annotations {
     //calculate distance of current viewport to annotation
-    if (!(annotations instanceof Array) || annotations.length === 0) return [];
+    if (!(annotations instanceof Array) || annotations.length === 0) {
+      return [];
+    }
     const annotation = annotations[0];
     const viewport = getEnabledElement(element)?.viewport;
-    if (!viewport) return [];
+    if (!viewport) {
+      return [];
+    }
     const camera = viewport.getCamera();
     const { viewPlaneNormal, focalPoint } = camera;
-    if (!viewPlaneNormal || !focalPoint) return [];
+    if (!viewPlaneNormal || !focalPoint) {
+      return [];
+    }
     const points = annotation.data?.handles?.points;
-    if (!(points instanceof Array) || points.length !== 1) return [];
+    if (!(points instanceof Array) || points.length !== 1) {
+      return [];
+    }
     const worldPos = points[0];
     const plane = utilities.planar.planeEquation(viewPlaneNormal, focalPoint);
     const distance = utilities.planar.planeDistanceToPoint(plane, worldPos);
@@ -333,7 +375,9 @@ class ReferenceCursors extends AnnotationDisplayTool {
       const { handles } = data;
       const { points } = handles;
 
-      if (!annotationUID) return renderStatus;
+      if (!annotationUID) {
+        return renderStatus;
+      }
       styleSpecifier.annotationUID = annotationUID;
 
       const lineWidthBase = parseFloat(
@@ -347,7 +391,9 @@ class ReferenceCursors extends AnnotationDisplayTool {
       const lineDash = this.getStyle('lineDash', styleSpecifier, annotation);
       const color = this.getStyle('color', styleSpecifier, annotation);
 
-      if (points[0].some((e) => isNaN(e))) return renderStatus;
+      if (points[0].some((e) => isNaN(e))) {
+        return renderStatus;
+      }
       const canvasCoordinates = points.map((p) =>
         viewport.worldToCanvas(p)
       ) as [Types.Point2];
@@ -414,8 +460,9 @@ class ReferenceCursors extends AnnotationDisplayTool {
   ): void {
     const currentMousePosition = this._currentCursorWorldPosition;
 
-    if (!currentMousePosition || currentMousePosition.some((e) => isNaN(e)))
+    if (!currentMousePosition || currentMousePosition.some((e) => isNaN(e))) {
       return;
+    }
 
     if (viewport instanceof StackViewport) {
       const closestIndex = utilities.getClosestStackImageIndexForPoint(
@@ -423,12 +470,17 @@ class ReferenceCursors extends AnnotationDisplayTool {
         viewport
       );
 
-      if (closestIndex === null) return;
-      if (closestIndex !== viewport.getCurrentImageIdIndex())
+      if (closestIndex === null) {
+        return;
+      }
+      if (closestIndex !== viewport.getCurrentImageIdIndex()) {
         viewport.setImageIdIndex(closestIndex);
+      }
     } else if (viewport instanceof VolumeViewport) {
       const { focalPoint, viewPlaneNormal } = viewport.getCamera();
-      if (!focalPoint || !viewPlaneNormal) return;
+      if (!focalPoint || !viewPlaneNormal) {
+        return;
+      }
       const plane = utilities.planar.planeEquation(viewPlaneNormal, focalPoint);
       const currentDistance = utilities.planar.planeDistanceToPoint(
         plane,
@@ -436,7 +488,9 @@ class ReferenceCursors extends AnnotationDisplayTool {
         true
       );
 
-      if (Math.abs(currentDistance) < 0.5) return;
+      if (Math.abs(currentDistance) < 0.5) {
+        return;
+      }
       const normalizedViewPlane = vec3.normalize(
         vec3.create(),
         vec3.fromValues(...viewPlaneNormal)
@@ -456,7 +510,9 @@ class ReferenceCursors extends AnnotationDisplayTool {
       if (isInBounds) {
         viewport.setCamera({ focalPoint: newFocalPoint });
         const renderingEngine = viewport.getRenderingEngine();
-        if (renderingEngine) renderingEngine.renderViewport(viewport.id);
+        if (renderingEngine) {
+          renderingEngine.renderViewport(viewport.id);
+        }
       }
     }
   }

package/src/tools/ScaleOverlayTool.ts

@@ -72,7 +72,9 @@ class ScaleOverlayTool extends AnnotationDisplayTool {
     // get viewports with tool enabled
     const viewportIds = getToolGroup(this.toolGroupId).viewportsInfo;
 
-    if (!viewportIds) return;
+    if (!viewportIds) {
+      return;
+    }
 
     // get enabled elements
     const enabledElements = viewportIds.map((e) =>

package/src/tools/annotation/AngleTool.ts

@@ -219,8 +219,12 @@ class AngleTool extends AnnotationTool {
       [canvasCoords[0], canvasCoords[1]]
     );
 
-    if (distanceToPoint <= proximity) return true;
-    if (!point3) return false;
+    if (distanceToPoint <= proximity) {
+      return true;
+    }
+    if (!point3) {
+      return false;
+    }
 
     const canvasPoint3 = viewport.worldToCanvas(point3);
 

package/src/tools/annotation/CircleROITool.ts

@@ -281,7 +281,9 @@ class CircleROITool extends AnnotationTool {
       canvasCoords,
     ]);
 
-    if (Math.abs(radiusPoint - radius) < proximity / 2) return true;
+    if (Math.abs(radiusPoint - radius) < proximity / 2) {
+      return true;
+    }
 
     return false;
   };

package/src/tools/annotation/PlanarFreehandROITool.ts

@@ -662,15 +662,18 @@ class PlanarFreehandROITool extends AnnotationTool {
       renderStatus = true;
     }
 
-    if (!this.configuration.calculateStats) return;
+    if (!this.configuration.calculateStats) {
+      return;
+    }
 
     annotations.forEach((annotation) => {
       const activeAnnotationUID = this.commonData?.annotation.annotationUID;
       if (
         annotation.annotationUID === activeAnnotationUID &&
         !this.commonData?.movingTextBox
-      )
+      ) {
         return;
+      }
 
       const modalityUnitOptions = {
         isPreScaled: isViewportPreScaled(viewport, targetId),
@@ -893,7 +896,9 @@ class PlanarFreehandROITool extends AnnotationTool {
     const targetId = this.getTargetId(viewport);
 
     const textLines = this._getTextLines(data, targetId);
-    if (!textLines || textLines.length === 0) return;
+    if (!textLines || textLines.length === 0) {
+      return;
+    }
 
     const canvasCoordinates = data.polyline.map((p) =>
       viewport.worldToCanvas(p)

package/src/tools/segmentation/PaintFillTool.ts

@@ -169,8 +169,12 @@ class PaintFillTool extends BaseTool {
     for (let b = 0; b < boundaries.length; b++) {
       const j = boundaries[b][1];
 
-      if (j < minJ) minJ = j;
-      if (j > maxJ) maxJ = j;
+      if (j < minJ) {
+        minJ = j;
+      }
+      if (j > maxJ) {
+        maxJ = j;
+      }
     }
 
     const framesModified = [];

package/src/types/EventTypes.ts

@@ -3,6 +3,7 @@ import { Annotation } from './AnnotationTypes';
 import IPoints from './IPoints';
 import ITouchPoints from './ITouchPoints';
 import IDistance from './IDistance';
+import { SetToolBindingsType } from './ISetToolModeOptions';
 import { Swipe } from '../enums/Touch';
 
 /**
@@ -70,6 +71,18 @@ type InteractionStartEventDetail = InteractionEventDetail;
 
 type InteractionEndEventDetail = InteractionEventDetail;
 
+/**
+ * The data that is passed to the event handler when a tool is activated.
+ */
+type ToolActivatedEventDetail = {
+  /** unique id of the toolGroup */
+  toolGroupId: string;
+  /** Tool name */
+  toolName: string;
+  /** Tool binding options */
+  toolBindingsOptions: SetToolBindingsType;
+};
+
 /**
  * The data that is passed to the event handler when a new annotation is added
  * to the annotations.
@@ -411,6 +424,11 @@ type NormalizedMouseEventType = Types.CustomEventType<MouseCustomEventDetail>;
  */
 type NormalizedTouchEventType = Types.CustomEventType<TouchCustomEventDetail>;
 
+/**
+ * The ToolActivated event type
+ */
+type ToolActivatedEventType = Types.CustomEventType<ToolActivatedEventDetail>;
+
 /**
  * The AnnotationAdded event type
  */
@@ -611,6 +629,8 @@ export {
   NormalizedInteractionEventDetail,
   NormalizedMouseEventType,
   NormalizedTouchEventType,
+  ToolActivatedEventDetail,
+  ToolActivatedEventType,
   AnnotationAddedEventDetail,
   AnnotationAddedEventType,
   AnnotationCompletedEventDetail,

package/src/types/ISetToolModeOptions.ts

@@ -1,9 +1,9 @@
 import { ToolModes, MouseBindings, KeyboardBindings } from '../enums';
 
-type ToolBindingMouseType = typeof MouseBindings[keyof typeof MouseBindings];
+type ToolBindingMouseType = (typeof MouseBindings)[keyof typeof MouseBindings];
 
 type ToolBindingKeyboardType =
-  typeof KeyboardBindings[keyof typeof KeyboardBindings];
+  (typeof KeyboardBindings)[keyof typeof KeyboardBindings];
 
 type IToolBinding = {
   /** Mouse button bindings e.g., MouseBindings.Primary/Secondary etc. */

package/src/utilities/cine/playClip.ts

@@ -193,7 +193,9 @@ function stopClip(element: HTMLDivElement): void {
 
 function _stopClip(element: HTMLDivElement, stopDynamicCine: boolean): void {
   const enabledElement = getEnabledElement(element);
-  if (!enabledElement) return;
+  if (!enabledElement) {
+    return;
+  }
   const { viewport } = enabledElement;
   const cineToolData = getToolState(viewport.element);