From 82ded73f46c1e1f537e1444d4380449ed1e820d1 Mon Sep 17 00:00:00 2001
From: Kathrin Koebel <kathrin@koebel.ch>
Date: Thu, 15 Aug 2024 11:16:45 +0545
Subject: [PATCH 1/5] remove purple border around dicom image

---
 src/App.vue | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 90c2b888..579ad53d 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -258,9 +258,10 @@ export default defineComponent({
       // set stack on the viewport (currently only one image in the stack, therefore no frame # required)
       await this.viewport.setStack(dicomStack)
 
-      // render the image (updates every viewport in the rendering engine)
-      this.viewport.render()
+      // set initial parallel scale factor and render the image (updates every viewport in the rendering engine)
       this.setViewportCameraParallelScaleFactor()
+      this.setZoom(this.currentImageZoom)
+      this.viewport.render()
 
       // getting image metadata from viewport
       this.getImageMetadataFromViewport(this.dicomUrl)
@@ -268,8 +269,6 @@ export default defineComponent({
   },
   updated() {
     // this.viewport.resize()
-    // also check if it is needed to recalculate scale factor
-    // this.setViewportCameraParallelScaleFactor()
   },
   beforeUnmount() {
     this.renderingEngine.destroy()
@@ -563,7 +562,7 @@ export default defineComponent({
     },
     setViewportCameraParallelScaleFactor() {
       const camera = this.viewport.getCamera()
-      this.viewportCameraParallelScale = camera.parallelScale
+      this.viewportCameraParallelScale = camera.parallelScale * 0.925 // add small correction factor to remove purple border around image
     },
     // functions for styling data
     formatOverlayDateAndTime(date: string, time: string) {

From 69ebf418086ee74bbd6fe549c9ddbf52733eea3d Mon Sep 17 00:00:00 2001
From: Kathrin Koebel <kathrin@koebel.ch>
Date: Thu, 15 Aug 2024 14:22:46 +0545
Subject: [PATCH 2/5] improve readability of code

---
 src/App.vue | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/App.vue b/src/App.vue
index 579ad53d..31235b64 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -562,7 +562,8 @@ export default defineComponent({
     },
     setViewportCameraParallelScaleFactor() {
       const camera = this.viewport.getCamera()
-      this.viewportCameraParallelScale = camera.parallelScale * 0.925 // add small correction factor to remove purple border around image
+      this.viewportCameraParallelScale = camera.parallelScale * 0.925
+      // add small correction factor to remove purple border around image
     },
     // functions for styling data
     formatOverlayDateAndTime(date: string, time: string) {

From 508368e181863c0baeb1c2756090e567a7659471 Mon Sep 17 00:00:00 2001
From: Kathrin Koebel <kathrin@koebel.ch>
Date: Thu, 15 Aug 2024 14:51:25 +0545
Subject: [PATCH 3/5] figure out how to refresh viewport after changing
 parallel scale factor

---
 src/App.vue | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/App.vue b/src/App.vue
index 31235b64..fa7989fe 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -260,7 +260,9 @@ export default defineComponent({
 
       // set initial parallel scale factor and render the image (updates every viewport in the rendering engine)
       this.setViewportCameraParallelScaleFactor()
-      this.setZoom(this.currentImageZoom)
+      // this.setZoom(this.currentImageZoom)
+      // TODO: figure out how to refresh viewport (display image with modified parallel scale factor)
+
       this.viewport.render()
 
       // getting image metadata from viewport

From 3aacc1904dfd6dcc3c0909899f312bf15cf62cc8 Mon Sep 17 00:00:00 2001
From: Kathrin Koebel <kathrin@koebel.ch>
Date: Thu, 15 Aug 2024 16:53:19 +0545
Subject: [PATCH 4/5] add setZoom back

---
 src/App.vue | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index fa7989fe..31235b64 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -260,9 +260,7 @@ export default defineComponent({
 
       // set initial parallel scale factor and render the image (updates every viewport in the rendering engine)
       this.setViewportCameraParallelScaleFactor()
-      // this.setZoom(this.currentImageZoom)
-      // TODO: figure out how to refresh viewport (display image with modified parallel scale factor)
-
+      this.setZoom(this.currentImageZoom)
       this.viewport.render()
 
       // getting image metadata from viewport

From 70722a9fe58375f70e4c790c697b06e089e78223 Mon Sep 17 00:00:00 2001
From: Kathrin Koebel <kathrin@koebel.ch>
Date: Thu, 15 Aug 2024 17:01:33 +0545
Subject: [PATCH 5/5] correcting the parallel scale factor in mocks to match
 with changes in implementation

---
 tests/unit/App.spec.ts | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/tests/unit/App.spec.ts b/tests/unit/App.spec.ts
index a0b344e9..e7508436 100644
--- a/tests/unit/App.spec.ts
+++ b/tests/unit/App.spec.ts
@@ -19,8 +19,9 @@ vi.mock('@cornerstonejs/core', () => {
         return {
           setStack: vi.fn(),
           render: vi.fn(),
+          setCamera: vi.fn(),
           getCamera: vi.fn().mockImplementation(() => {
-            return { parallelScale: 137.3853139193763 }
+            return { parallelScale: 127.08141537542309 }
           }),
           getImageData: vi.fn().mockImplementation(() => {
             return { dimensions: [] }