From 63f76a828bd37f55d6984d05e732ec090aefed3d Mon Sep 17 00:00:00 2001
From: Forrest <forrest.li@kitware.com>
Date: Tue, 17 Sep 2024 16:04:53 -0400
Subject: [PATCH] fix(tools): re-render svg on canvas size change

---
 .../tools/MeasurementTools/svg/AngleSvg.vue          |  7 +++++++
 .../tools/MeasurementTools/svg/RulerSvg.vue          |  7 +++++++
 .../tools/MeasurementTools/svg/SvgCircleHandles.vue  | 12 ++++++++++--
 .../tools/MeasurementTools/svg/SvgLabel.vue          |  7 +++++++
 .../tools/MeasurementTools/svg/SvgPolyLine.vue       |  7 +++++++
 .../tools/MeasurementTools/svg/TextSvg.vue           |  7 +++++++
 6 files changed, 45 insertions(+), 2 deletions(-)

diff --git a/src/components/tools/MeasurementTools/svg/AngleSvg.vue b/src/components/tools/MeasurementTools/svg/AngleSvg.vue
index e8aa6c49..eeee4f67 100644
--- a/src/components/tools/MeasurementTools/svg/AngleSvg.vue
+++ b/src/components/tools/MeasurementTools/svg/AngleSvg.vue
@@ -97,6 +97,13 @@ export default {
   mounted() {
     this.trackVtkSubscription(this.widgetState.onModified(this.updateLabels));
     this.updateLabels();
+    this.resizeObserver = new ResizeObserver(() => {
+      this.updatePoints();
+    });
+    this.resizeObserver.observe(this.view.getContainer());
+  },
+  beforeUnmount() {
+    this.resizeObserver.disconnect();
   },
   methods: {
     updateLabels() {
diff --git a/src/components/tools/MeasurementTools/svg/RulerSvg.vue b/src/components/tools/MeasurementTools/svg/RulerSvg.vue
index c934ae99..9be538cd 100644
--- a/src/components/tools/MeasurementTools/svg/RulerSvg.vue
+++ b/src/components/tools/MeasurementTools/svg/RulerSvg.vue
@@ -97,6 +97,13 @@ export default {
   mounted() {
     this.trackVtkSubscription(this.widgetState.onModified(this.updateLabels));
     this.updateLabels();
+    this.resizeObserver = new ResizeObserver(() => {
+      this.updatePoints();
+    });
+    this.resizeObserver.observe(this.view.getContainer());
+  },
+  beforeUnmount() {
+    this.resizeObserver.disconnect();
   },
   methods: {
     updateLabels() {
diff --git a/src/components/tools/MeasurementTools/svg/SvgCircleHandles.vue b/src/components/tools/MeasurementTools/svg/SvgCircleHandles.vue
index a6cfb108..517c708b 100644
--- a/src/components/tools/MeasurementTools/svg/SvgCircleHandles.vue
+++ b/src/components/tools/MeasurementTools/svg/SvgCircleHandles.vue
@@ -42,7 +42,13 @@ export default {
   },
   mounted() {
     this.trackVtkSubscription(this.widgetState.onModified(this.updatePoints));
-    this.updatePoints();
+    this.resizeObserver = new ResizeObserver(() => {
+      this.updatePoints();
+    });
+    this.resizeObserver.observe(this.view.getContainer());
+  },
+  beforeUnmount() {
+    this.resizeObserver.disconnect();
   },
   methods: {
     async updatePoints() {
@@ -52,7 +58,9 @@ export default {
         .filter((state) => state.isVisible())
         .flatMap((state) => state.getOrigin());
 
-      this.points = await this.mapToPixelSpace(handlePoints);
+      const promise = this.mapToPixelSpace(handlePoints);
+      this.view.render();
+      this.points = await promise;
     },
   },
 };
diff --git a/src/components/tools/MeasurementTools/svg/SvgLabel.vue b/src/components/tools/MeasurementTools/svg/SvgLabel.vue
index 87827864..3ce0da61 100644
--- a/src/components/tools/MeasurementTools/svg/SvgLabel.vue
+++ b/src/components/tools/MeasurementTools/svg/SvgLabel.vue
@@ -51,6 +51,13 @@ export default {
   },
   mounted() {
     this.updatePoints();
+    this.resizeObserver = new ResizeObserver(() => {
+      this.updatePoints();
+    });
+    this.resizeObserver.observe(this.view.getContainer());
+  },
+  beforeUnmount() {
+    this.resizeObserver.disconnect();
   },
   methods: {
     async updatePoints() {
diff --git a/src/components/tools/MeasurementTools/svg/SvgPolyLine.vue b/src/components/tools/MeasurementTools/svg/SvgPolyLine.vue
index 7474e3ea..8a08436d 100644
--- a/src/components/tools/MeasurementTools/svg/SvgPolyLine.vue
+++ b/src/components/tools/MeasurementTools/svg/SvgPolyLine.vue
@@ -56,6 +56,13 @@ export default {
   mounted() {
     this.trackVtkSubscription(this.widgetState.onModified(this.updatePoints));
     this.updatePoints();
+    this.resizeObserver = new ResizeObserver(() => {
+      this.updatePoints();
+    });
+    this.resizeObserver.observe(this.view.getContainer());
+  },
+  beforeUnmount() {
+    this.resizeObserver.disconnect();
   },
   methods: {
     async updatePoints() {
diff --git a/src/components/tools/MeasurementTools/svg/TextSvg.vue b/src/components/tools/MeasurementTools/svg/TextSvg.vue
index c225fc5a..6754b952 100644
--- a/src/components/tools/MeasurementTools/svg/TextSvg.vue
+++ b/src/components/tools/MeasurementTools/svg/TextSvg.vue
@@ -85,6 +85,13 @@ export default {
   mounted() {
     this.trackVtkSubscription(this.widgetState.onModified(this.updateLabels));
     this.updateLabels();
+    this.resizeObserver = new ResizeObserver(() => {
+      this.updatePoints();
+    });
+    this.resizeObserver.observe(this.view.getContainer());
+  },
+  beforeUnmount() {
+    this.resizeObserver.disconnect();
   },
   methods: {
     updateLabels() {