fix(tools): re-render svg on canvas size change

Author: floryst

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() {

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() {

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;
     },
   },
 };

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() {

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() {

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() {