fix(SegRendering): preserve canvas transform matrix after seg render

ViniciusResende · ViniciusResende · commit 27bfacc2ee65 · 2023-07-21T08:04:48.000-03:00
Previously after rendering the segmentation cornerstone was always transforming the canvas to follow
the identity matrix, but in cases where we had an overlay using a different transformation matrix,
it old undesirably affect the original overlay.
diff --git a/src/eventListeners/internals/renderSegmentationFill.js b/src/eventListeners/internals/renderSegmentationFill.js
@@ -1,9 +1,5 @@
 import { getModule } from '../../store/index.js';
-import {
-  getNewContext,
-  resetCanvasContextTransform,
-  transformCanvasContext,
-} from '../../drawing/index.js';
+import { getNewContext, transformCanvasContext } from '../../drawing/index.js';
 import external from '../../externalModules';
 
 const segmentationModule = getModule('segmentation');
@@ -80,25 +76,25 @@ export function getLabelmapCanvas(evt, labelmap3D, labelmap2D) {
 export function renderFill(evt, labelmapCanvas, isActiveLabelMap) {
   const { configuration } = segmentationModule;
   const eventData = evt.detail;
-  const context = getNewContext(eventData.canvasContext.canvas);
+  const { canvasContext, element, image, viewport } = eventData;
 
-  const canvasTopLeft = external.cornerstone.pixelToCanvas(eventData.element, {
+  const previousTransform = canvasContext.getTransform();
+  const context = getNewContext(canvasContext.canvas);
+
+  const canvasTopLeft = external.cornerstone.pixelToCanvas(element, {
     x: 0,
     y: 0,
   });
 
-  const canvasTopRight = external.cornerstone.pixelToCanvas(eventData.element, {
-    x: eventData.image.width,
+  const canvasTopRight = external.cornerstone.pixelToCanvas(element, {
+    x: image.width,
     y: 0,
   });
 
-  const canvasBottomRight = external.cornerstone.pixelToCanvas(
-    eventData.element,
-    {
-      x: eventData.image.width,
-      y: eventData.image.height,
-    }
-  );
+  const canvasBottomRight = external.cornerstone.pixelToCanvas(element, {
+    x: image.width,
+    y: image.height,
+  });
 
   const cornerstoneCanvasWidth = external.cornerstoneMath.point.distance(
     canvasTopLeft,
@@ -109,8 +105,7 @@ export function renderFill(evt, labelmapCanvas, isActiveLabelMap) {
     canvasBottomRight
   );
 
-  const canvas = eventData.canvasContext.canvas;
-  const viewport = eventData.viewport;
+  const canvas = canvasContext.canvas;
 
   const previousImageSmoothingEnabled = context.imageSmoothingEnabled;
   const previousGlobalAlpha = context.globalAlpha;
@@ -137,7 +132,7 @@ export function renderFill(evt, labelmapCanvas, isActiveLabelMap) {
   context.globalAlpha = previousGlobalAlpha;
   context.imageSmoothingEnabled = previousImageSmoothingEnabled;
 
-  resetCanvasContextTransform(context);
+  context.setTransform(previousTransform);
 }
 
 /**
diff --git a/src/eventListeners/internals/renderSegmentationOutline.js b/src/eventListeners/internals/renderSegmentationOutline.js
@@ -44,6 +44,7 @@ export function renderOutline(
 
   const lineWidth = configuration.outlineWidth || 1;
 
+  const previousTransform = canvasContext.getTransform();
   const context = getNewContext(canvasContext.canvas);
   const colorLutTable = state.colorLutTables[colorLUTIndex];
 
@@ -74,6 +75,7 @@ export function renderOutline(
   });
 
   context.globalAlpha = previousAlpha;
+  context.setTransform(previousTransform);
 }
 
 /**
diff --git a/src/eventListeners/internals/renderSegmentationOutline.test.js b/src/eventListeners/internals/renderSegmentationOutline.test.js
@@ -5,16 +5,21 @@ import * as drawing from '../../drawing/index.js';
 
 const { state } = getModule('segmentation');
 
-jest.mock('../../drawing/index.js', () => ({
-  getNewContext: () => ({
+jest.mock('../../drawing/index.js', () => {
+  const getNewContextMock = {
     globalAlpha: 1.0,
-  }),
-  draw: (context, callback) => {
-    callback(context);
-  },
-  drawLines: jest.fn(),
-  drawJoinedLines: jest.fn(),
-}));
+    setTransform: jest.fn(),
+  };
+
+  return {
+    getNewContext: jest.fn(() => getNewContextMock),
+    draw: (context, callback) => {
+      callback(context);
+    },
+    drawLines: jest.fn(),
+    drawJoinedLines: jest.fn(),
+  };
+});
 
 jest.mock('../../externalModules', () => ({
   cornerstone: {
@@ -132,6 +137,15 @@ function resetEvents() {
 
   lineWidth = 1;
 
+  const canvasTransformState = {
+    a: 0.078,
+    b: 0,
+    c: 0,
+    d: 0.078,
+    e: 52.9,
+    f: 0,
+  };
+
   eventData = {
     element: null,
     image: {
@@ -154,6 +168,7 @@ function resetEvents() {
         width: canvasScale * width,
         height: canvasScale * width,
       },
+      getTransform: jest.fn(() => canvasTransformState),
     },
   };
 
@@ -224,8 +239,14 @@ function setCanvasTransform(options = {}) {
 }
 
 describe('renderSegmentationOutline.js', () => {
+  let getNewContext;
+
   beforeEach(() => {
     resetEvents();
+
+    getNewContext = drawing.getNewContext;
+
+    jest.clearAllMocks();
   });
 
   describe('Initialization', () => {
@@ -365,6 +386,31 @@ describe('renderSegmentationOutline.js', () => {
   });
 
   describe('renderOutline', () => {
+    it('should preserve the canvas transform matrix', () => {
+      const outline = getOutline(evt, labelmap3D, labelmap2D, lineWidth);
+
+      // Fake colormap to stop renderOutline breaking.
+      state.colorLutTables[0] = [[0, 0, 0, 0], [0, 0, 0, 0], [0, 0, 0, 0]];
+
+      const beforeCallTransformMatrix = evt.detail.canvasContext.getTransform();
+      const newContextSetTransform = getNewContext().setTransform;
+
+      evt.detail.canvasContext.getTransform.mockClear();
+      getNewContext.mockClear();
+
+      renderOutline(evt, outline, 0, true);
+
+      expect(evt.detail.canvasContext.getTransform).toHaveBeenCalledTimes(1);
+      expect(getNewContext).toHaveBeenCalledTimes(1);
+      expect(getNewContext).toHaveBeenCalledWith(
+        evt.detail.canvasContext.canvas
+      );
+      expect(newContextSetTransform).toHaveBeenCalledTimes(1);
+      expect(newContextSetTransform).toHaveBeenCalledWith(
+        beforeCallTransformMatrix
+      );
+    });
+
     it('Should call drawLines twice', () => {
       const outline = getOutline(evt, labelmap3D, labelmap2D, lineWidth);
 
