Merge pull request #507 from Kitware/fix-svg-rendering

fix(tools): re-render svg on canvas size change
Kitware · Sep 17, 2024 · dec53fb · dec53fb
2 parents da8426e + 63f76a8
commit dec53fb
Show file tree

Hide file tree

Showing 6 changed files with 45 additions and 2 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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() {