@cornerstonejs/tools 1.70.5 → 1.70.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cornerstonejs/tools",
-  "version": "1.70.5",
+  "version": "1.70.6",
   "description": "Cornerstone3D Tools",
   "main": "src/index.ts",
   "types": "dist/types/index.d.ts",
@@ -29,7 +29,7 @@
     "webpack:watch": "webpack --mode development --progress --watch  --config ./.webpack/webpack.dev.js"
   },
   "dependencies": {
-    "@cornerstonejs/core": "^1.70.5",
+    "@cornerstonejs/core": "^1.70.6",
     "@icr/polyseg-wasm": "0.4.0",
     "@types/offscreencanvas": "2019.7.3",
     "comlink": "^4.4.1",
@@ -41,7 +41,7 @@
   },
   "peerDependencies": {
     "@icr/polyseg-wasm": "0.4.0",
-    "@kitware/vtk.js": "30.3.1",
+    "@kitware/vtk.js": "30.3.3",
     "@types/d3-array": "^3.0.4",
     "@types/d3-interpolate": "^3.0.1",
     "d3-array": "^3.2.3",
@@ -59,5 +59,5 @@
     "type": "individual",
     "url": "https://ohif.org/donate"
   },
-  "gitHead": "bf3d33986d1cdad6ab4abf9e4004dcb16a1a83c9"
+  "gitHead": "6358796a0031d69a9987ce089bbc27b8a3801dc1"
 }

package/src/tools/AdvancedMagnifyTool.ts

@@ -66,8 +66,8 @@ class AdvancedMagnifyTool extends AnnotationTool {
         shadow: true,
         magnifyingGlass: {
           radius: 125, // px
-          zoomFactor: 2.5,
-          zoomFactorList: [2.5, 3, 3.5, 4, 4.5, 5],
+          zoomFactor: 3,
+          zoomFactorList: [1.5, 2, 2.5, 3, 3.5, 4, 4.5, 5],
           autoPan: {
             enabled: true,
             padding: 10, // px
@@ -111,11 +111,10 @@ class AdvancedMagnifyTool extends AnnotationTool {
     const { magnifyingGlass: config } = this.configuration;
     const { radius, zoomFactor, autoPan } = config;
 
-    const worldHandlesPoints = this._getWorldHandlesPoints(
-      viewport,
+    const canvasHandlePoints = this._getCanvasHandlePoints(
       canvasPos,
       radius
-    );
+    ) as [Types.Point3, Types.Point3, Types.Point3, Types.Point3];
 
     const camera = viewport.getCamera();
     const { viewPlaneNormal, viewUp } = camera;
@@ -146,8 +145,11 @@ class AdvancedMagnifyTool extends AnnotationTool {
         sourceViewportId: viewport.id,
         magnifyViewportId,
         zoomFactor,
+        // this means that the last coordinate for the points
+        // is 0 and should not be used for calculations
+        isCanvasAnnotation: true,
         handles: {
-          points: worldHandlesPoints,
+          points: canvasHandlePoints,
           activeHandleIndex: null,
         },
       },
@@ -164,12 +166,13 @@ class AdvancedMagnifyTool extends AnnotationTool {
         padding: autoPan.padding,
         callback: (data: AutoPanCallbackData) => {
           const annotationPoints = annotation.data.handles.points;
-          const { world: worldDelta } = data.delta;
+          const { canvas: canvasDelta } = data.delta;
 
           for (let i = 0, len = annotationPoints.length; i < len; i++) {
-            annotationPoints[i][0] += worldDelta[0];
-            annotationPoints[i][1] += worldDelta[1];
-            annotationPoints[i][2] += worldDelta[2];
+            const point = annotationPoints[i];
+            point[0] += canvasDelta[0];
+            point[1] += canvasDelta[1];
+            annotation.invalidated = true;
           }
         },
       },
@@ -217,20 +220,12 @@ class AdvancedMagnifyTool extends AnnotationTool {
     canvasCoords: Types.Point2,
     proximity: number
   ): boolean => {
-    const enabledElement = getEnabledElement(element);
-    const { viewport } = enabledElement;
-
     const { data } = annotation;
     const { points } = data.handles;
 
     // For some reason Typescript doesn't understand this, so we need to be
     // more specific about the type
-    const canvasCoordinates = points.map((p) => viewport.worldToCanvas(p)) as [
-      Types.Point2,
-      Types.Point2,
-      Types.Point2,
-      Types.Point2
-    ];
+    const canvasCoordinates = points;
 
     const canvasTop = canvasCoordinates[0];
     const canvasBottom = canvasCoordinates[2];
@@ -242,7 +237,7 @@ class AdvancedMagnifyTool extends AnnotationTool {
     ] as Types.Point2;
     const radiusPoint = getCanvasCircleRadius([center, canvasCoords]);
 
-    if (Math.abs(radiusPoint - radius) < proximity * 1.5) {
+    if (Math.abs(radiusPoint - radius) < proximity * 2) {
       return true;
     }
 
@@ -347,7 +342,7 @@ class AdvancedMagnifyTool extends AnnotationTool {
     this.isDrawing = true;
     const eventDetail = evt.detail;
     const { element, deltaPoints } = eventDetail;
-    const worldPosDelta = deltaPoints?.world ?? [0, 0, 0];
+    const canvasDelta = deltaPoints?.canvas ?? [0, 0, 0];
     const enabledElement = getEnabledElement(element);
     const { renderingEngine } = enabledElement;
 
@@ -355,9 +350,8 @@ class AdvancedMagnifyTool extends AnnotationTool {
     const { points } = annotation.data.handles;
 
     points.forEach((point) => {
-      point[0] += worldPosDelta[0];
-      point[1] += worldPosDelta[1];
-      point[2] += worldPosDelta[2];
+      point[0] += canvasDelta[0];
+      point[1] += canvasDelta[1];
     });
 
     annotation.invalidated = true;
@@ -377,14 +371,13 @@ class AdvancedMagnifyTool extends AnnotationTool {
     if (handleIndex === undefined) {
       // Moving tool
       const { deltaPoints } = eventDetail;
-      const worldPosDelta = deltaPoints.world;
+      const canvasDelta = deltaPoints.canvas;
 
       const points = data.handles.points;
 
       points.forEach((point) => {
-        point[0] += worldPosDelta[0];
-        point[1] += worldPosDelta[1];
-        point[2] += worldPosDelta[2];
+        point[0] += canvasDelta[0];
+        point[1] += canvasDelta[1];
       });
       annotation.invalidated = true;
     } else {
@@ -400,16 +393,12 @@ class AdvancedMagnifyTool extends AnnotationTool {
 
   _dragHandle = (evt: EventTypes.InteractionEventType): void => {
     const eventDetail = evt.detail;
-    const { element } = eventDetail;
-    const enabledElement = getEnabledElement(element);
-    const { viewport } = enabledElement;
-    const { worldToCanvas } = viewport;
 
     const { annotation } = this.editData;
     const { data } = annotation;
     const { points } = data.handles;
 
-    const canvasCoordinates = points.map((p) => worldToCanvas(p));
+    const canvasCoordinates = points;
     const canvasTop = canvasCoordinates[0];
     const canvasBottom = canvasCoordinates[2];
     const canvasLeft = canvasCoordinates[3];
@@ -426,16 +415,15 @@ class AdvancedMagnifyTool extends AnnotationTool {
       canvasCenter,
       currentCanvasPoints,
     ]);
-    const newWorldHandlesPoints = this._getWorldHandlesPoints(
-      viewport,
+    const newCanvasHandlePoints = this._getCanvasHandlePoints(
       canvasCenter,
       newRadius
     );
 
-    points[0] = newWorldHandlesPoints[0];
-    points[1] = newWorldHandlesPoints[1];
-    points[2] = newWorldHandlesPoints[2];
-    points[3] = newWorldHandlesPoints[3];
+    points[0] = newCanvasHandlePoints[0];
+    points[1] = newCanvasHandlePoints[1];
+    points[2] = newCanvasHandlePoints[2];
+    points[3] = newCanvasHandlePoints[3];
   };
 
   cancel = (element: HTMLDivElement) => {
@@ -513,18 +501,18 @@ class AdvancedMagnifyTool extends AnnotationTool {
       return renderStatus;
     }
 
-    annotations = this.filterInteractableAnnotationsForElement(
-      element,
-      annotations
-    );
-
     annotations = annotations?.filter(
       (annotation) =>
         (<AdvancedMagnifyAnnotation>annotation).data.sourceViewportId ===
         viewport.id
     );
 
-    if (!annotations?.length) {
+    const filteredAnnotations = this.filterInteractableAnnotationsForElement(
+      element,
+      annotations
+    );
+
+    if (!filteredAnnotations?.length) {
       return renderStatus;
     }
 
@@ -534,8 +522,8 @@ class AdvancedMagnifyTool extends AnnotationTool {
       viewportId: enabledElement.viewport.id,
     };
 
-    for (let i = 0; i < annotations.length; i++) {
-      const annotation = annotations[i] as AdvancedMagnifyAnnotation;
+    for (let i = 0; i < filteredAnnotations.length; i++) {
+      const annotation = filteredAnnotations[i] as AdvancedMagnifyAnnotation;
       const { annotationUID, data } = annotation;
       const { magnifyViewportId, zoomFactor, handles } = data;
       const { points, activeHandleIndex } = handles;
@@ -546,9 +534,7 @@ class AdvancedMagnifyTool extends AnnotationTool {
       const lineDash = this.getStyle('lineDash', styleSpecifier, annotation);
       const color = this.getStyle('color', styleSpecifier, annotation);
 
-      const canvasCoordinates = points.map((p) =>
-        viewport.worldToCanvas(p)
-      ) as Types.Point2[];
+      const canvasCoordinates = points;
       const canvasTop = canvasCoordinates[0];
       const canvasBottom = canvasCoordinates[2];
       const canvasLeft = canvasCoordinates[3];
@@ -701,23 +687,13 @@ class AdvancedMagnifyTool extends AnnotationTool {
     return dropdown;
   }
 
-  private _getWorldHandlesPoints = (
-    viewport,
-    canvasCenterPos,
-    canvasRadius
-  ): Types.Point3[] => {
-    const canvasHandlesPoints = [
-      [canvasCenterPos[0], canvasCenterPos[1] - canvasRadius], // top
-      [canvasCenterPos[0] + canvasRadius, canvasCenterPos[1]], // right
-      [canvasCenterPos[0], canvasCenterPos[1] + canvasRadius], // bottom
-      [canvasCenterPos[0] - canvasRadius, canvasCenterPos[1]], // left
+  private _getCanvasHandlePoints = (canvasCenterPos, canvasRadius) => {
+    return [
+      [canvasCenterPos[0], canvasCenterPos[1] - canvasRadius, 0], // top
+      [canvasCenterPos[0] + canvasRadius, canvasCenterPos[1], 0], // right
+      [canvasCenterPos[0], canvasCenterPos[1] + canvasRadius, 0], // bottom
+      [canvasCenterPos[0] - canvasRadius, canvasCenterPos[1], 0], // left
     ];
-
-    const worldHandlesPoints = canvasHandlesPoints.map((p) =>
-      viewport.canvasToWorld(p)
-    ) as Types.Point3[];
-
-    return worldHandlesPoints;
   };
 }
 

package/src/tools/AdvancedMagnifyViewport.ts

@@ -91,7 +91,7 @@ class AdvancedMagnifyViewport {
     this._sourceEnabledElement = sourceEnabledElement;
     this._autoPan = autoPan;
 
-    // Pulic properties
+    // Public properties
     this.radius = radius;
     this.position = position;
     this.zoomFactor = zoomFactor;
@@ -234,7 +234,7 @@ class AdvancedMagnifyViewport {
     return magnifyElement;
   }
 
-  private _convertZoomFactorToParalellScale(
+  private _convertZoomFactorToParallelScale(
     viewport,
     magnifyViewport,
     zoomFactor
@@ -556,7 +556,7 @@ class AdvancedMagnifyViewport {
     const worldPos = sourceViewport.canvasToWorld(this.position);
 
     // Use the original viewport for the base for parallelScale
-    const parallelScale = this._convertZoomFactorToParalellScale(
+    const parallelScale = this._convertZoomFactorToParallelScale(
       sourceViewport,
       magnifyViewport,
       this.zoomFactor
@@ -601,6 +601,11 @@ class AdvancedMagnifyViewport {
     const { viewport: sourceViewport } = this._sourceEnabledElement;
     const { viewport: magnifyViewport } = this._enabledElement;
     const sourceProperties = sourceViewport.getProperties();
+    const imageData = magnifyViewport.getImageData();
+
+    if (!imageData) {
+      return;
+    }
 
     magnifyViewport.setProperties(sourceProperties);
     this._syncViewportsCameras(sourceViewport, magnifyViewport);
@@ -611,6 +616,9 @@ class AdvancedMagnifyViewport {
         magnifyViewport as Types.IStackViewport
       );
     }
+
+    this._syncViewportsCameras(sourceViewport, magnifyViewport);
+    magnifyViewport.render();
   }
 
   private _resizeViewport() {

package/src/tools/AdvancedMagnifyViewportManager.ts

@@ -4,6 +4,7 @@ import {
   Enums,
   getRenderingEngine,
   CONSTANTS,
+  getEnabledElementByViewportId,
 } from '@cornerstonejs/core';
 import type { Types } from '@cornerstonejs/core';
 import { AnnotationRemovedEventType } from '../types/EventTypes';
@@ -47,6 +48,7 @@ export type MagnifyViewportInfo = {
 type MagnifyViewportsMapEntry = {
   annotation: AdvancedMagnifyAnnotation;
   magnifyViewport: AdvancedMagnifyViewport;
+  magnifyViewportInfo: MagnifyViewportInfo;
 };
 
 /**
@@ -110,6 +112,7 @@ class AdvancedMagnifyViewportManager {
     this._magnifyViewportsMap.set(magnifyViewport.viewportId, {
       annotation,
       magnifyViewport,
+      magnifyViewportInfo: viewportInfo,
     });
 
     return magnifyViewport;
@@ -133,7 +136,7 @@ class AdvancedMagnifyViewportManager {
     this._destroyViewports();
   }
 
-  private _destroyViewport(magnifyViewportId: string) {
+  public destroyViewport(magnifyViewportId: string) {
     const magnifyViewportMapEntry =
       this._magnifyViewportsMap.get(magnifyViewportId);
 
@@ -153,7 +156,7 @@ class AdvancedMagnifyViewportManager {
     const magnifyViewportIds = Array.from(this._magnifyViewportsMap.keys());
 
     magnifyViewportIds.forEach((magnifyViewportId) =>
-      this._destroyViewport(magnifyViewportId)
+      this.destroyViewport(magnifyViewportId)
     );
   }
 
@@ -164,7 +167,7 @@ class AdvancedMagnifyViewportManager {
       return;
     }
 
-    this._destroyViewport(annotation.data.magnifyViewportId);
+    this.destroyViewport(annotation.data.magnifyViewportId);
   };
 
   private _getMagnifyViewportsMapEntriesBySourceViewportId(sourceViewportId) {
@@ -185,6 +188,17 @@ class AdvancedMagnifyViewportManager {
     const magnifyViewportsMapEntries =
       this._getMagnifyViewportsMapEntriesBySourceViewportId(sourceViewportId);
 
+    const { viewport } = getEnabledElementByViewportId(sourceViewportId);
+
+    // if the viewport was new in terms of image, we need to destroy the magnify
+    // viewports and recreate them, the new image might have different dimensions
+    // or orientation etc.
+    if ((viewport as Types.IStackViewport).stackActorReInitialized) {
+      // we should invalidate the viewport as well
+      // this will trigger the magnify viewport to be updated
+      this._reset(sourceViewportId);
+    }
+
     magnifyViewportsMapEntries.forEach(({ annotation }) => {
       annotation.metadata.referencedImageId = imageId;
       annotation.invalidated = true;
@@ -242,6 +256,29 @@ class AdvancedMagnifyViewportManager {
     });
   };
 
+  private _reset(sourceViewportId: string) {
+    const magnifyViewports =
+      this._getMagnifyViewportsMapEntriesBySourceViewportId(sourceViewportId);
+
+    magnifyViewports.forEach(
+      ({ magnifyViewport, annotation, magnifyViewportInfo }) => {
+        this.destroyViewport(magnifyViewport.viewportId);
+
+        // if it is new image we need to update the magnifyViewportInfo
+        // since it might have new image dimensions etc.
+        const newEnabledElement =
+          getEnabledElementByViewportId(sourceViewportId);
+
+        this.createViewport(annotation, {
+          ...magnifyViewportInfo,
+          sourceEnabledElement: {
+            ...newEnabledElement,
+          },
+        });
+      }
+    );
+  }
+
   private _addEventListeners() {
     eventTarget.addEventListener(
       cstEvents.ANNOTATION_REMOVED,
@@ -262,10 +299,30 @@ class AdvancedMagnifyViewportManager {
       this._newStackImageCallback
     );
 
+    const newStackHandler = (evt) => {
+      const { viewportId: sourceViewportId } = evt.detail;
+      this._reset(sourceViewportId);
+    };
+
+    element.addEventListener(Events.STACK_VIEWPORT_NEW_STACK, newStackHandler);
+
+    const newVolumeHandler = (evt) => {
+      const { viewportId: sourceViewportId } = evt.detail;
+      this._reset(sourceViewportId);
+    };
+    element.addEventListener(
+      Events.VOLUME_VIEWPORT_NEW_VOLUME,
+      newVolumeHandler
+    );
+
     element.addEventListener(
       Events.VOLUME_NEW_IMAGE,
       this._newVolumeImageCallback
     );
+
+    // Store the event handlers to remove later
+    element.newStackHandler = newStackHandler;
+    element.newVolumeHandler = newVolumeHandler;
   }
 
   private _removeSourceElementEventListener(element) {
@@ -278,6 +335,20 @@ class AdvancedMagnifyViewportManager {
       Events.VOLUME_NEW_IMAGE,
       this._newVolumeImageCallback
     );
+
+    // Remove using the stored handlers
+    element.removeEventListener(
+      Events.STACK_VIEWPORT_NEW_STACK,
+      element.newStackHandler
+    );
+    element.removeEventListener(
+      Events.VOLUME_VIEWPORT_NEW_VOLUME,
+      element.newVolumeHandler
+    );
+
+    // Clean up references
+    delete element.newStackHandler;
+    delete element.newVolumeHandler;
   }
 
   private _initialize() {

package/src/tools/OrientationMarkerTool.ts

@@ -213,7 +213,12 @@ class OrientationMarkerTool extends BaseTool {
 
     let viewports = renderingEngine.getViewports();
     viewports = filterViewportsWithToolEnabled(viewports, this.getToolName());
-    viewports.forEach((viewport) => this.addAxisActorInViewport(viewport));
+
+    viewports.forEach((viewport) => {
+      if (!viewport.getWidget(this.getToolName())) {
+        this.addAxisActorInViewport(viewport);
+      }
+    });
   }
 
   async addAxisActorInViewport(viewport) {
@@ -268,6 +273,7 @@ class OrientationMarkerTool extends BaseTool {
       orientationWidget,
       actor,
     };
+    viewport.addWidget(this.getToolName(), orientationWidget);
     renderWindow.render();
     viewport.getRenderingEngine().render();
 

package/src/tools/base/AnnotationTool.ts

@@ -266,6 +266,7 @@ abstract class AnnotationTool extends AnnotationDisplayTool {
     const { viewport } = enabledElement;
 
     const { data } = annotation;
+    const { isCanvasAnnotation } = data;
     const { points, textBox } = data.handles;
 
     if (textBox) {
@@ -292,10 +293,15 @@ abstract class AnnotationTool extends AnnotationDisplayTool {
 
     for (let i = 0; i < points?.length; i++) {
       const point = points[i];
-      const annotationCanvasCoordinate = viewport.worldToCanvas(point);
+      const annotationCanvasCoordinate = isCanvasAnnotation
+        ? point.slice(0, 2)
+        : viewport.worldToCanvas(point);
 
       const near =
-        vec2.distance(canvasCoords, annotationCanvasCoordinate) < proximity;
+        vec2.distance(
+          canvasCoords,
+          annotationCanvasCoordinate as Types.Point2
+        ) < proximity;
 
       if (near === true) {
         data.handles.activeHandleIndex = i;

package/src/tools/displayTools/Labelmap/labelmapDisplay.ts

@@ -361,6 +361,13 @@ function _setLabelmapColorAndOpacity(
 
   for (let i = 1; i < numColors; i++) {
     // Start from 1 to skip the background segment index.
+    const isHidden = segmentsHidden.has(i);
+
+    if (isHidden) {
+      outlineWidths[i - 1] = 0;
+      continue;
+    }
+
     outlineWidths[i - 1] =
       i === activeSegmentIndex
         ? outlineWidth + toolGroupLabelmapConfig.activeSegmentOutlineWidthDelta

package/src/tools/segmentation/BrushTool.ts

@@ -2,6 +2,9 @@ import {
   utilities as csUtils,
   cache,
   getEnabledElement,
+  StackViewport,
+  eventTarget,
+  Enums,
 } from '@cornerstonejs/core';
 import { vec3, vec2 } from 'gl-matrix';
 
@@ -112,7 +115,6 @@ class BrushTool extends BaseTool {
         strategySpecificConfiguration: {
           THRESHOLD: {
             threshold: [-150, -70], // E.g. CT Fat // Only used during threshold strategies.
-            dynamicRadius: 0, // in voxel counts in each direction, only used during dynamic threshold strategies.
           },
         },
         defaultStrategy: 'FILL_INSIDE_CIRCLE',
@@ -208,6 +210,20 @@ class BrushTool extends BaseTool {
       ] as LabelmapSegmentationDataVolume;
       const actors = viewport.getActors();
 
+      const isStackViewport = viewport instanceof StackViewport;
+
+      if (isStackViewport) {
+        const event = new CustomEvent(Enums.Events.ERROR_EVENT, {
+          detail: {
+            type: 'Segmentation',
+            message: 'Cannot perform brush operation on the selected viewport',
+          },
+          cancelable: true,
+        });
+        eventTarget.dispatchEvent(event);
+        return null;
+      }
+
       // we used to take the first actor here but we should take the one that is
       // probably the same size as the segmentation volume
       const volumes = actors.map((actorEntry) =>

package/src/tools/segmentation/strategies/compositions/dynamicThreshold.ts

@@ -77,9 +77,15 @@ export default {
     const { configuration, viewport } = operationData;
     const { THRESHOLD: { dynamicRadius = 0 } = {} } =
       configuration.strategySpecificConfiguration || {};
+
+    if (dynamicRadius === 0) {
+      return;
+    }
+
     const { spacing } = (
       viewport as Types.IStackViewport | Types.IVolumeViewport
     ).getImageData();
+
     const centerCanvas = [
       viewport.element.clientWidth / 2,
       viewport.element.clientHeight / 2,

package/src/tools/segmentation/strategies/compositions/preview.ts

@@ -4,10 +4,19 @@ import { triggerSegmentationDataModified } from '../../../../stateManagement/seg
 import { config as segmentationConfig } from '../../../../stateManagement/segmentation';
 import StrategyCallbacks from '../../../../enums/StrategyCallbacks';
 
+function lightenColor(r, g, b, a, factor = 0.4) {
+  return [
+    Math.round(r + (255 - r) * factor),
+    Math.round(g + (255 - g) * factor),
+    Math.round(b + (255 - b) * factor),
+    a,
+  ];
+}
+
 /**
- * Sets up a preview to use an alternate set of colours.  First fills the
+ * Sets up a preview to use an alternate set of colors.  First fills the
  * preview segment index with the final one for all pixels, then resets
- * the preview colours.
+ * the preview colors.
  * This is only activated when the preview segment index is defined, either
  * from the initial state or from the global state.
  */
@@ -71,7 +80,8 @@ export default {
     if (!configColor && !segmentColor) {
       return;
     }
-    const previewColor = configColor || segmentColor.map((it) => it * 0.9);
+    const previewColor = configColor || lightenColor(...segmentColor);
+
     segmentationConfig.color.setColorForSegmentIndex(
       toolGroupId,
       segmentationRepresentationUID,
@@ -88,7 +98,7 @@ export default {
       previewVoxelManager: previewVoxelManager,
       previewSegmentIndex,
       preview,
-    } = operationData;
+    } = operationData || {};
     if (previewSegmentIndex === undefined) {
       return;
     }

package/src/types/ToolSpecificAnnotationTypes.ts

@@ -87,8 +87,9 @@ export interface AdvancedMagnifyAnnotation extends Annotation {
     zoomFactor: number;
     sourceViewportId: string;
     magnifyViewportId: string;
+    isCanvasAnnotation: boolean;
     handles: {
-      points: Types.Point3[]; // [top, right, bottom, left]
+      points: [Types.Point3, Types.Point3, Types.Point3, Types.Point3]; // in canvas space
       activeHandleIndex: number | null;
     };
   };

package/src/utilities/cine/playClip.ts

@@ -198,10 +198,10 @@ function playClip(
  * Stops an already playing clip.
  * @param element - HTML Element
  */
-function stopClip(element: HTMLDivElement, viewportId?: string): void {
+function stopClip(element: HTMLDivElement, options = {} as any): void {
   _stopClip(element, {
     stopDynamicCine: true,
-    viewportId,
+    ...options,
   });
 }
 

package/src/utilities/planar/filterAnnotationsForDisplay.ts

@@ -47,6 +47,9 @@ export default function filterAnnotationsForDisplay(
     if (!annotation.isVisible) {
       return false;
     }
+    if (annotation.data.isCanvasAnnotation) {
+      return true;
+    }
     return viewport.isReferenceViewable(annotation.metadata, filterOptions);
   });
 }