Merge branch 'fix/display-area-edge' of github.com:cornerstonejs/corn…

…erstone3D into fix/display-area-edge
cornerstonejs · Jan 6, 2025 · e5e85d4 · e5e85d4
2 parents 8661f59 + 6a23308
commit e5e85d4
Show file tree

Hide file tree

Showing 2 changed files with 62 additions and 8 deletions.
diff --git a/packages/core/examples/stackPosition/index.ts b/packages/core/examples/stackPosition/index.ts
@@ -116,11 +116,23 @@ function createDisplayArea(
 const displayAreas = new Map();
 displayAreas.set('Center with border', createDisplayArea(1.1, 0.5));
 displayAreas.set('Center Full', createDisplayArea(1, 0.5));
+displayAreas.set('Center Half', createDisplayArea(2, 0.5));
 displayAreas.set('Left Top', createDisplayArea(1, 0));
 displayAreas.set('Right Top', createDisplayArea(1, [1, 0]));
+displayAreas.set('Center Left/Top', createDisplayArea(2, 0, 0.5));
+displayAreas.set('Center Right/Bottom', createDisplayArea(2, 1, 0.5));
+displayAreas.set('Left Top', createDisplayArea(1, 0));
 displayAreas.set('Left Bottom', createDisplayArea(1, [0, 1]));
 displayAreas.set('Right Bottom', createDisplayArea(1, [1, 1]));
-displayAreas.set('Left Top Half', createDisplayArea([2, 0.1], 0, undefined));
+displayAreas.set(
+  'Left Top Half 2, 0.1',
+  createDisplayArea([2, 0.1], 0, undefined)
+);
+displayAreas.set(
+  'Left Top Half 0.1, 2',
+  createDisplayArea([0.1, 2], 0, undefined)
+);
+displayAreas.set('Left Top Half 2,2', createDisplayArea(2, 0, undefined));
 displayAreas.set('Right Top Half', createDisplayArea([0.1, 2], [1, 0]));
 displayAreas.set('Left Bottom Half', createDisplayArea(2, [0, 1]));
 displayAreas.set('Right Bottom Half', createDisplayArea(2, [1, 1]));
@@ -297,6 +309,20 @@ async function run() {
   const instructions = document.createElement('p');
   instructions.innerText = 'Middle Click: Pan\nRight Click: Zoom';
   content.appendChild(instructions);
+
+  const svgNode = document.getElementsByClassName('svg-layer').item(0);
+  const divNode = document.createElement('div');
+  divNode.setAttribute(
+    'style',
+    'left:25%; top: 25%; width:25%; height:25%; border: 1px solid green; position: absolute'
+  );
+  svgNode.parentNode.insertBefore(divNode, svgNode.nextSibling);
+  const div2Node = document.createElement('div');
+  div2Node.setAttribute(
+    'style',
+    'left: 50%; top: 50%; width:25%; height:25%; border: 1px solid red; position: absolute'
+  );
+  divNode.parentNode.insertBefore(div2Node, divNode.nextSibling);
 }
 
 run();
diff --git a/packages/core/src/RenderingEngine/Viewport.ts b/packages/core/src/RenderingEngine/Viewport.ts
@@ -868,8 +868,8 @@ class Viewport {
     );
     const canvasEdge = this.worldToCanvas(
       imageData.indexToWorld([
-        dimensions[0] - 1,
-        dimensions[1] - 1,
+        dimensions[0],
+        dimensions[1],
         dimensions[2],
       ]) as Point3
     );
@@ -880,31 +880,59 @@ class Viewport {
     ];
     const [imgWidth, imgHeight] = canvasImage;
 
-    let zoom = 1;
+    let zoom = this.getZoom() / this.insetImageMultiplier;
     if (imageArea) {
       const [areaX, areaY] = imageArea;
-      zoom = Math.min(this.getZoom() / areaX, this.getZoom() / areaY);
+
+      const currentScale = Math.max(
+        Math.abs(imgWidth / canvasWidth),
+        Math.abs(imgHeight / canvasHeight)
+      );
+      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 =
+        requireX > requireY ? currentScale / requireX : currentScale / requireY;
+      const applyZoom = (absZoom * initZoom) / fitZoom;
+
+      zoom = applyZoom;
       // 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);
+      this.setZoom(this.insetImageMultiplier * zoom, false);
     }
     if (imageCanvasPoint) {
+      console.log('Starting pan update zoom=', zoom);
       const { imagePoint, canvasPoint = imagePoint || [0.5, 0.5] } =
         imageCanvasPoint;
       const [canvasX, canvasY] = canvasPoint;
       const canvasPanX = canvasWidth * (canvasX - 0.5);
       const canvasPanY = canvasHeight * (canvasY - 0.5);
 
       const [imageX, imageY] = imagePoint || canvasPoint;
+      const useZoom = zoom;
       const imagePanX =
-        (zoom * imgWidth * (0.5 - imageX) * canvasHeight) / imgHeight;
-      const imagePanY = zoom * canvasHeight * (0.5 - imageY);
+        this.insetImageMultiplier * useZoom * imgWidth * (0.5 - imageX);
+      const imagePanY =
+        this.insetImageMultiplier * 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;
 
       const deltaPoint2: Point2 = [newPositionX, newPositionY];
+      console.log(
+        'delta point',
+        newPositionX,
+        this.getPan()[0],
+        imagePanX,
+        canvasPanX
+      );
       // Use getPan from current for the setting
       vec2.add(deltaPoint2, deltaPoint2, this.getPan());
       // The pan is part of the display area settings, not the initial camera, so