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