fix: Elliptical roi when in flipped/rotated state (#479)

* better fix for elliptical roi * type and tools.api * save/restore compatible * add flip h/flip v/ and rotation 90 buttons
cornerstonejs · Mar 22, 2023 · f0961ae · f0961ae
1 parent 2c625b9
commit f0961ae
Show file tree

Hide file tree

Showing 5 changed files with 132 additions and 13 deletions.
diff --git a/common/reviews/api/tools.api.md b/common/reviews/api/tools.api.md
@@ -1527,6 +1527,7 @@ interface EllipticalROIAnnotation extends Annotation {
         };
         label: string;
         cachedStats?: ROICachedStats;
+        initialRotation: number;
     };
 }
 

diff --git a/packages/adapters/src/adapters/Cornerstone3D/EllipticalROI.ts b/packages/adapters/src/adapters/Cornerstone3D/EllipticalROI.ts
@@ -137,19 +137,27 @@ class EllipticalROI {
     static getTID300RepresentationArguments(tool, worldToImageCoords) {
         const { data, finding, findingSites, metadata } = tool;
         const { cachedStats = {}, handles } = data;
-
+        const rotation = data.initialRotation || 0;
         const { referencedImageId } = metadata;
 
         if (!referencedImageId) {
             throw new Error(
                 "EllipticalROI.getTID300RepresentationArguments: referencedImageId is not defined"
             );
         }
-
-        const top = worldToImageCoords(referencedImageId, handles.points[0]);
-        const bottom = worldToImageCoords(referencedImageId, handles.points[1]);
-        const left = worldToImageCoords(referencedImageId, handles.points[2]);
-        const right = worldToImageCoords(referencedImageId, handles.points[3]);
+        let top, bottom, left, right;
+        // this way when it's restored we can assume the initial rotation is 0.
+        if (rotation == 90 || rotation == 270) {
+            bottom = worldToImageCoords(referencedImageId, handles.points[2]);
+            top = worldToImageCoords(referencedImageId, handles.points[3]);
+            left = worldToImageCoords(referencedImageId, handles.points[0]);
+            right = worldToImageCoords(referencedImageId, handles.points[1]);
+        } else {
+            top = worldToImageCoords(referencedImageId, handles.points[0]);
+            bottom = worldToImageCoords(referencedImageId, handles.points[1]);
+            left = worldToImageCoords(referencedImageId, handles.points[2]);
+            right = worldToImageCoords(referencedImageId, handles.points[3]);
+        }
 
         // find the major axis and minor axis
         const topBottomLength = Math.abs(top[1] - bottom[1]);

diff --git a/packages/tools/examples/stackAnnotationTools/index.ts b/packages/tools/examples/stackAnnotationTools/index.ts
@@ -1,9 +1,15 @@
-import { RenderingEngine, Types, Enums } from '@cornerstonejs/core';
+import {
+  RenderingEngine,
+  Types,
+  Enums,
+  getRenderingEngine,
+} from '@cornerstonejs/core';
 import {
   initDemo,
   createImageIdsAndCacheMetaData,
   setTitleAndDescription,
   addDropdownToToolbar,
+  addButtonToToolbar,
 } from '../../../../utils/demo/helpers';
 import * as cornerstoneTools from '@cornerstonejs/tools';
 
@@ -25,8 +31,10 @@ const {
   Enums: csToolsEnums,
 } = cornerstoneTools;
 
-const { ViewportType } = Enums;
+const { ViewportType, Events } = Enums;
 const { MouseBindings } = csToolsEnums;
+const renderingEngineId = 'myRenderingEngine';
+const viewportId = 'CT_STACK';
 
 // ======== Set up page ======== //
 setTitleAndDescription(
@@ -46,10 +54,42 @@ element.style.height = '500px';
 
 content.appendChild(element);
 
+const info = document.createElement('div');
+content.appendChild(info);
+
 const instructions = document.createElement('p');
 instructions.innerText = 'Left Click to use selected tool';
+info.appendChild(instructions);
+
+const rotationInfo = document.createElement('div');
+info.appendChild(rotationInfo);
+
+const flipHorizontalInfo = document.createElement('div');
+info.appendChild(flipHorizontalInfo);
+
+const flipVerticalInfo = document.createElement('div');
+info.appendChild(flipVerticalInfo);
+
+element.addEventListener(Events.CAMERA_MODIFIED, (_) => {
+  // Get the rendering engine
+  const renderingEngine = getRenderingEngine(renderingEngineId);
+
+  // Get the stack viewport
+  const viewport = <Types.IStackViewport>(
+    renderingEngine.getViewport(viewportId)
+  );
+
+  if (!viewport) {
+    return;
+  }
+
+  const { flipHorizontal, flipVertical } = viewport.getCamera();
+  const { rotation } = viewport.getProperties();
 
-content.append(instructions);
+  rotationInfo.innerText = `Rotation: ${Math.round(rotation)}`;
+  flipHorizontalInfo.innerText = `Flip horizontal: ${flipHorizontal}`;
+  flipVerticalInfo.innerText = `Flip vertical: ${flipVertical}`;
+});
 // ============================= //
 
 const toolGroupId = 'STACK_TOOL_GROUP_ID';
@@ -88,6 +128,61 @@ addDropdownToToolbar({
   },
 });
 
+addButtonToToolbar({
+  title: 'Flip H',
+  onClick: () => {
+    // Get the rendering engine
+    const renderingEngine = getRenderingEngine(renderingEngineId);
+
+    // Get the stack viewport
+    const viewport = <Types.IStackViewport>(
+      renderingEngine.getViewport(viewportId)
+    );
+
+    const { flipHorizontal } = viewport.getCamera();
+    viewport.setCamera({ flipHorizontal: !flipHorizontal });
+
+    viewport.render();
+  },
+});
+
+addButtonToToolbar({
+  title: 'Flip V',
+  onClick: () => {
+    // Get the rendering engine
+    const renderingEngine = getRenderingEngine(renderingEngineId);
+
+    // Get the stack viewport
+    const viewport = <Types.IStackViewport>(
+      renderingEngine.getViewport(viewportId)
+    );
+
+    const { flipVertical } = viewport.getCamera();
+
+    viewport.setCamera({ flipVertical: !flipVertical });
+
+    viewport.render();
+  },
+});
+
+addButtonToToolbar({
+  title: 'Rotate Delta 90',
+  onClick: () => {
+    // Get the rendering engine
+    const renderingEngine = getRenderingEngine(renderingEngineId);
+
+    // Get the stack viewport
+    const viewport = <Types.IStackViewport>(
+      renderingEngine.getViewport(viewportId)
+    );
+
+    const { rotation } = viewport.getProperties();
+    viewport.setProperties({ rotation: rotation + 90 });
+
+    viewport.render();
+  },
+});
+
 /**
  * Runs the demo
  */
@@ -148,11 +243,9 @@ async function run() {
   });
 
   // Instantiate a rendering engine
-  const renderingEngineId = 'myRenderingEngine';
   const renderingEngine = new RenderingEngine(renderingEngineId);
 
   // Create a stack viewport
-  const viewportId = 'CT_STACK';
   const viewportInput = {
     viewportId,
     type: ViewportType.STACK,

diff --git a/packages/tools/src/tools/annotation/EllipticalROITool.ts b/packages/tools/src/tools/annotation/EllipticalROITool.ts
@@ -214,6 +214,7 @@ class EllipticalROITool extends AnnotationTool {
           activeHandleIndex: null,
         },
         cachedStats: {},
+        initialRotation: viewport.getRotation(),
       },
     };
 
@@ -765,9 +766,24 @@ class EllipticalROITool extends AnnotationTool {
       const canvasCoordinates = points.map((p) =>
         viewport.worldToCanvas(p)
       ) as [Types.Point2, Types.Point2, Types.Point2, Types.Point2];
-      const canvasCorners = <Array<Types.Point2>>(
-        getCanvasEllipseCorners(canvasCoordinates)
+
+      const rotation = Math.abs(
+        viewport.getRotation() - (data.initialRotation || 0)
       );
+      let canvasCorners;
+
+      if (rotation == 90 || rotation == 270) {
+        canvasCorners = <Array<Types.Point2>>getCanvasEllipseCorners([
+          canvasCoordinates[2], // bottom
+          canvasCoordinates[3], // top
+          canvasCoordinates[0], // left
+          canvasCoordinates[1], // right
+        ]);
+      } else {
+        canvasCorners = <Array<Types.Point2>>(
+          getCanvasEllipseCorners(canvasCoordinates) // bottom, top, left, right, keep as is
+        );
+      }
 
       const { centerPointRadius } = this.configuration;
 

diff --git a/packages/tools/src/types/ToolSpecificAnnotationTypes.ts b/packages/tools/src/types/ToolSpecificAnnotationTypes.ts
@@ -96,6 +96,7 @@ export interface EllipticalROIAnnotation extends Annotation {
     };
     label: string;
     cachedStats?: ROICachedStats;
+    initialRotation: number;
   };
 }
-Original file line number
+Diff line change
@@ Expand Up / @@ -1527,6 +1527,7 @@ interface EllipticalROIAnnotation extends Annotation { @@
             };
             label: string;
             cachedStats?: ROICachedStats;
+            initialRotation: number;
         };
     }
@@ Expand Down @@