@cornerstonejs/tools 2.0.0-beta.5 → 2.0.0-beta.7

package/src/tools/AdvancedMagnifyTool.ts

@@ -1,19 +1,17 @@
 import { AnnotationTool } from './base';
 
-import {
-  getEnabledElement,
-  eventTarget,
-  triggerEvent,
-  utilities as csUtils,
-} from '@cornerstonejs/core';
+import { getEnabledElement, utilities as csUtils } from '@cornerstonejs/core';
 import type { Types } from '@cornerstonejs/core';
 
 import {
   addAnnotation,
+  getAllAnnotations,
   getAnnotations,
+  removeAnnotation,
 } from '../stateManagement/annotation/annotationState';
 import { isAnnotationLocked } from '../stateManagement/annotation/annotationLocking';
 import { isAnnotationVisible } from '../stateManagement/annotation/annotationVisibility';
+import { triggerAnnotationCompleted } from '../stateManagement/annotation/helpers/state';
 import {
   drawCircle as drawCircleSvg,
   drawHandles as drawHandlesSvg,
@@ -34,15 +32,19 @@ import {
 } from '../types';
 import { AdvancedMagnifyAnnotation } from '../types/ToolSpecificAnnotationTypes';
 
-import { AnnotationCompletedEventDetail } from '../types/EventTypes';
 import triggerAnnotationRenderForViewportIds from '../utilities/triggerAnnotationRenderForViewportIds';
 import { StyleSpecifier } from '../types/AnnotationStyle';
 import { getCanvasCircleRadius } from '../utilities/math/circle';
 import AdvancedMagnifyViewportManager from './AdvancedMagnifyViewportManager';
 import type { AutoPanCallbackData } from './AdvancedMagnifyViewport';
 
+enum AdvancedMagnifyToolActions {
+  ShowZoomFactorsList = 'showZoomFactorsList',
+}
+
 class AdvancedMagnifyTool extends AnnotationTool {
   static toolName;
+  static Actions = AdvancedMagnifyToolActions;
 
   magnifyViewportManager: AdvancedMagnifyViewportManager;
   touchDragCallback: any;
@@ -64,15 +66,15 @@ 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
           },
         },
-        actions: [
-          {
+        actions: {
+          showZoomFactorsList: {
             method: 'showZoomFactorsList',
             bindings: [
               {
@@ -81,7 +83,7 @@ class AdvancedMagnifyTool extends AnnotationTool {
               },
             ],
           },
-        ],
+        },
       },
     }
   ) {
@@ -109,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;
@@ -144,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,
         },
       },
@@ -162,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;
           }
         },
       },
@@ -186,6 +191,18 @@ class AdvancedMagnifyTool extends AnnotationTool {
     return annotation;
   };
 
+  onSetToolDisabled = () => {
+    // reset
+    this.magnifyViewportManager.dispose();
+    // remove the annotations from the state for that toolGroup
+    const annotations = getAllAnnotations();
+    annotations.forEach((annotation) => {
+      if (annotation.metadata.toolName === this.getToolName()) {
+        removeAnnotation(annotation.annotationUID);
+      }
+    });
+  };
+
   /**
    * It returns if the canvas point is near the provided annotation in the provided
    * element or not. A proximity is passed to the function to determine the
@@ -203,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];
@@ -228,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;
     }
 
@@ -325,13 +334,7 @@ class AdvancedMagnifyTool extends AnnotationTool {
     triggerAnnotationRenderForViewportIds(renderingEngine, viewportIdsToRender);
 
     if (newAnnotation) {
-      const eventType = Events.ANNOTATION_COMPLETED;
-
-      const eventDetail: AnnotationCompletedEventDetail = {
-        annotation,
-      };
-
-      triggerEvent(eventTarget, eventType, eventDetail);
+      triggerAnnotationCompleted(annotation);
     }
   };
 
@@ -339,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;
 
@@ -347,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;
@@ -369,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 {
@@ -392,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];
@@ -418,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) => {
@@ -452,13 +448,7 @@ class AdvancedMagnifyTool extends AnnotationTool {
     triggerAnnotationRenderForViewportIds(renderingEngine, viewportIdsToRender);
 
     if (newAnnotation) {
-      const eventType = Events.ANNOTATION_COMPLETED;
-
-      const eventDetail: AnnotationCompletedEventDetail = {
-        annotation,
-      };
-
-      triggerEvent(eventTarget, eventType, eventDetail);
+      triggerAnnotationCompleted(annotation);
     }
 
     this.editData = null;
@@ -511,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;
     }
 
@@ -532,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;
@@ -544,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];
@@ -600,8 +588,7 @@ class AdvancedMagnifyTool extends AnnotationTool {
         radius,
         {
           color,
-          lineDash,
-          lineWidth,
+          lineWidth: 5,
         },
         dataId
       );
@@ -700,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';
@@ -15,7 +16,7 @@ import {
 import { AdvancedMagnifyAnnotation } from '../types/ToolSpecificAnnotationTypes';
 
 // Defined the tool name internally instead of importing
-// AdvangedMagnifyTool due to cyclic dependency
+// AdvancedMagnifyTool due to cyclic dependency
 const ADVANCED_MAGNIFY_TOOL_NAME = 'AdvancedMagnify';
 
 const PARALLEL_THRESHOLD = 1 - CONSTANTS.EPSILON;
@@ -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/AnnotationEraserTool.ts

@@ -0,0 +1,96 @@
+import { BaseTool } from './base';
+import { EventTypes, PublicToolProps, ToolProps } from '../types';
+import { ToolGroupManager } from '../store';
+import {
+  getAnnotations,
+  removeAnnotation,
+} from '../stateManagement/annotation/annotationState';
+import { setAnnotationSelected } from '../stateManagement/annotation/annotationSelection';
+
+class AnnotationEraserTool extends BaseTool {
+  static toolName;
+  constructor(
+    toolProps: PublicToolProps = {},
+    defaultToolProps: ToolProps = {
+      supportedInteractionTypes: ['Mouse', 'Touch'],
+    }
+  ) {
+    super(toolProps, defaultToolProps);
+  }
+  preMouseDownCallback = (evt: EventTypes.InteractionEventType): boolean => {
+    return this._deleteNearbyAnnotations(evt, 'mouse');
+  };
+  preTouchStartCallback = (evt: EventTypes.InteractionEventType): boolean => {
+    return this._deleteNearbyAnnotations(evt, 'touch');
+  };
+
+  _deleteNearbyAnnotations(
+    evt: EventTypes.InteractionEventType,
+    interactionType: string
+  ): boolean {
+    const { renderingEngineId, viewportId, element, currentPoints } =
+      evt.detail;
+
+    const toolGroup = ToolGroupManager.getToolGroupForViewport(
+      viewportId,
+      renderingEngineId
+    );
+
+    if (!toolGroup) {
+      return false;
+    }
+
+    const tools = toolGroup._toolInstances;
+    const annotationsToRemove = [];
+
+    for (const toolName in tools) {
+      const toolInstance = tools[toolName];
+
+      if (
+        typeof toolInstance.isPointNearTool !== 'function' ||
+        typeof toolInstance.filterInteractableAnnotationsForElement !==
+          'function'
+      ) {
+        continue;
+      }
+
+      const annotations = getAnnotations(toolName, element);
+
+      if (!annotations.length) {
+        continue;
+      }
+
+      const interactableAnnotations =
+        toolInstance.filterInteractableAnnotationsForElement(
+          element,
+          annotations
+        ) || [];
+
+      for (const annotation of interactableAnnotations) {
+        if (
+          toolInstance.isPointNearTool(
+            element,
+            annotation,
+            currentPoints.canvas,
+            10,
+            interactionType
+          )
+        ) {
+          annotationsToRemove.push(annotation.annotationUID);
+        }
+      }
+    }
+
+    for (const annotationUID of annotationsToRemove) {
+      setAnnotationSelected(annotationUID);
+      removeAnnotation(annotationUID);
+    }
+
+    evt.preventDefault();
+
+    return true;
+  }
+}
+
+AnnotationEraserTool.toolName = 'Eraser';
+export default AnnotationEraserTool;