feat(stackPosition): integrate Pan and Zoom tools with Cornerstone3D …

…and enhance viewport zoom handling
cornerstonejs · Dec 11, 2024 · a916ba8 · a916ba8
1 parent 06611b5
commit a916ba8
Show file tree

Hide file tree

Showing 2 changed files with 69 additions and 14 deletions.
diff --git a/packages/core/examples/stackPosition/index.ts b/packages/core/examples/stackPosition/index.ts
@@ -12,6 +12,7 @@ import {
   addDropdownToToolbar,
   getLocalUrl,
 } from '../../../../utils/demo/helpers';
+import * as cornerstoneTools from '@cornerstonejs/tools';
 
 // This is for debugging purposes
 console.warn(
@@ -27,6 +28,19 @@ const viewportId = 'CT_STACK';
 // Get the rendering engine
 let renderingEngine, viewport;
 
+// Add these imports at the top with other imports
+import {
+  PanTool,
+  ZoomTool,
+  ToolGroupManager,
+  Enums as csToolsEnums,
+} from '@cornerstonejs/tools';
+
+const { MouseBindings } = csToolsEnums;
+
+// Add after the renderingEngineId constant
+const toolGroupId = 'STACK_POSITION_TOOL_GROUP';
+
 // ======== Set up page ======== //
 setTitleAndDescription(
   'Stack Position',
@@ -201,13 +215,48 @@ addButtonToToolbar({
   },
 });
 
+// Add before the run() function
+function initializeTools() {
+  // Add tools to Cornerstone3D
+  cornerstoneTools.addTool(PanTool);
+  cornerstoneTools.addTool(ZoomTool);
+
+  // Create a tool group
+  const toolGroup = ToolGroupManager.createToolGroup(toolGroupId);
+
+  // Add tools to the tool group
+  toolGroup.addTool(PanTool.toolName);
+  toolGroup.addTool(ZoomTool.toolName);
+
+  // Set the initial state of the tools
+  toolGroup.setToolActive(PanTool.toolName, {
+    bindings: [
+      {
+        mouseButton: MouseBindings.Auxiliary, // Middle Click
+      },
+    ],
+  });
+  toolGroup.setToolActive(ZoomTool.toolName, {
+    bindings: [
+      {
+        mouseButton: MouseBindings.Secondary, // Right Click
+      },
+    ],
+  });
+
+  return toolGroup;
+}
+
 /**
  * Runs the demo
  */
 async function run() {
   // Init Cornerstone and related libraries
   await initDemo();
 
+  // Initialize tools
+  const toolGroup = initializeTools();
+
   // Get Cornerstone imageIds and fetch metadata into RAM
   const imageIds = await createImageIdsAndCacheMetaData({
     StudyInstanceUID:
@@ -242,6 +291,17 @@ async function run() {
 
   // Render the image
   viewport.render();
+
+  // Add tools to the tool group
+  toolGroup.addViewport(viewportId, renderingEngineId);
+
+  // Disable right click context menu
+  element.oncontextmenu = (e) => e.preventDefault();
+
+  // Add instructions
+  const instructions = document.createElement('p');
+  instructions.innerText = 'Middle Click: Pan\nRight Click: Zoom';
+  content.appendChild(instructions);
 }
 
 run();
diff --git a/packages/core/src/RenderingEngine/Viewport.ts b/packages/core/src/RenderingEngine/Viewport.ts
@@ -880,20 +880,15 @@ class Viewport {
     ];
     const [imgWidth, imgHeight] = canvasImage;
 
+    let zoom = 1;
     if (imageArea) {
       const [areaX, areaY] = imageArea;
-      const requireX = Math.abs((areaX * imgWidth) / canvasWidth);
-      const requireY = Math.abs((areaY * imgHeight) / canvasHeight);
-
-      const initZoom = this.getZoom();
-      const fitZoom = this.getZoom(this.fitToCanvasCamera);
-      const absZoom = Math.min(1 / requireX, 1 / requireY);
-      const applyZoom = (absZoom * initZoom) / fitZoom;
-      this.setZoom(applyZoom, false);
+      zoom = Math.min(this.getZoom() / areaX, this.getZoom() / areaY);
+      // Don't set as initial camera because then the zoom interactions don't
+      // work consistently.
+      // TODO: Add a better method to handle initial camera
+      this.setZoom(this.insetImageMultiplier * zoom);
     }
-
-    // getting the image info
-    // getting the image info
     if (imageCanvasPoint) {
       const { imagePoint, canvasPoint = imagePoint || [0.5, 0.5] } =
         imageCanvasPoint;
@@ -902,9 +897,9 @@ class Viewport {
       const canvasPanY = canvasHeight * (canvasY - 0.5);
 
       const [imageX, imageY] = imagePoint || canvasPoint;
-      const useZoom = 1;
-      const imagePanX = useZoom * imgWidth * (0.5 - imageX);
-      const imagePanY = useZoom * imgHeight * (0.5 - imageY);
+      const imagePanX =
+        (zoom * imgWidth * (0.5 - imageX) * canvasHeight) / imgHeight;
+      const imagePanY = zoom * canvasHeight * (0.5 - imageY);
 
       const newPositionX = imagePanX + canvasPanX;
       const newPositionY = imagePanY + canvasPanY;