@cornerstonejs/tools 1.70.5 → 1.70.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cornerstonejs/tools",
-  "version": "1.70.5",
+  "version": "1.70.7",
   "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.7",
     "@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": "4b6774d20ea66e2fa2815edc042b57565b816959"
 }

package/src/enums/Events.ts

@@ -18,6 +18,12 @@ enum Events {
    */
   TOOL_ACTIVATED = 'CORNERSTONE_TOOLS_TOOL_ACTIVATED',
 
+  // fired when a viewport is added to the toolGroup
+  TOOLGROUP_VIEWPORT_ADDED = 'CORNERSTONE_TOOLS_TOOLGROUP_VIEWPORT_ADDED',
+
+  // fired when a viewport is removed from the toolGroup
+  TOOLGROUP_VIEWPORT_REMOVED = 'CORNERSTONE_TOOLS_TOOLGROUP_VIEWPORT_REMOVED',
+
   /**
    * Triggers on the eventTarget when a mode of a tool is changed (active, passive, enabled and disabled).
    *

package/src/store/ToolGroupManager/ToolGroup.ts

@@ -239,6 +239,14 @@ export default class ToolGroup implements IToolGroup {
     if (runtimeSettings.get('useCursors')) {
       this.setViewportsCursorByToolName(toolName);
     }
+
+    const eventDetail = {
+      toolGroupId: this.id,
+      viewportId,
+      renderingEngineId: renderingEngineUIDToUse,
+    };
+
+    triggerEvent(eventTarget, Events.TOOLGROUP_VIEWPORT_ADDED, eventDetail);
   }
 
   /**
@@ -273,6 +281,14 @@ export default class ToolGroup implements IToolGroup {
         this.viewportsInfo.splice(indices[i], 1);
       }
     }
+
+    const eventDetail = {
+      toolGroupId: this.id,
+      viewportId,
+      renderingEngineId,
+    };
+
+    triggerEvent(eventTarget, Events.TOOLGROUP_VIEWPORT_REMOVED, eventDetail);
   }
 
   public setActiveStrategy(toolName: string, strategyName: string) {

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() {