Merge pull request #523 from PaulHax/crosshair-view-switch-fix

fix(CrosshairsWidget2D): avoid error when changing layout

src/components/tools/crosshairs/CrosshairsWidget2D.vue

@@ -3,18 +3,20 @@ import vtkWidgetManager from '@kitware/vtk.js/Widgets/Core/WidgetManager';
 import {
   defineComponent,
   onBeforeUnmount,
-  onMounted,
   PropType,
   ref,
   toRefs,
   watchEffect,
+  computed,
 } from 'vue';
 import vtkPlaneManipulator from '@kitware/vtk.js/Widgets/Manipulators/PlaneManipulator';
 import { LPSAxisDir } from '@/src/types/lps';
 import { useCurrentImage } from '@/src/composables/useCurrentImage';
 import { updatePlaneManipulatorFor2DView } from '@/src/utils/manipulators';
 import { vtkCrosshairsViewWidget } from '@/src/vtk/CrosshairsWidget';
 import { useCrosshairsToolStore } from '@/src/store/tools/crosshairs';
+import { useViewStore } from '@/src/store/views';
+import { onViewProxyMounted } from '@/src/composables/useViewProxy';
 
 export default defineComponent({
   name: 'CrosshairsWidget2D',
@@ -41,33 +43,35 @@ export default defineComponent({
       widgetManager: widgetManagerRef,
       viewDirection,
       slice,
+      viewId,
     } = toRefs(props);
 
+    const widgetRef = ref<vtkCrosshairsViewWidget>();
+
     const crosshairsStore = useCrosshairsToolStore();
     const factory = crosshairsStore.getWidgetFactory();
+    const viewProxy = computed(() => useViewStore().getViewProxy(viewId.value));
 
-    const widgetRef = ref<vtkCrosshairsViewWidget>();
-
-    const { currentImageMetadata } = useCurrentImage();
-    onMounted(() => {
+    onViewProxyMounted(viewProxy, () => {
       const widgetManager = widgetManagerRef.value;
       widgetRef.value = widgetManager.addWidget(
         factory
       ) as vtkCrosshairsViewWidget;
 
       if (!widgetRef.value) {
-        throw new Error('[PaintWidget2D] failed to create view widget');
+        throw new Error('CrosshairsWidget2D failed to create view widget');
       }
     });
 
     // --- manipulator --- //
 
     const manipulator = vtkPlaneManipulator.newInstance();
 
-    onMounted(() => {
+    onViewProxyMounted(viewProxy, () => {
       widgetRef.value!.setManipulator(manipulator);
     });
 
+    const { currentImageMetadata } = useCurrentImage();
     watchEffect(() => {
       updatePlaneManipulatorFor2DView(
         manipulator,
@@ -79,13 +83,13 @@ export default defineComponent({
 
     // --- visibility --- //
 
-    onMounted(() => {
+    onViewProxyMounted(viewProxy, () => {
       widgetRef.value!.setVisibility(true);
     });
 
     // --- focus and rendering --- //
 
-    onMounted(() => {
+    onViewProxyMounted(viewProxy, () => {
       const widgetManager = widgetManagerRef.value;
       widgetManager.renderWidgets();
     });

src/components/tools/paint/PaintWidget2D.vue

@@ -45,12 +45,7 @@ export default defineComponent({
     },
   },
   setup(props) {
-    const {
-      widgetManager,
-      viewDirection,
-      slice,
-      viewId: viewID,
-    } = toRefs(props);
+    const { widgetManager, viewDirection, slice, viewId } = toRefs(props);
 
     const paintStore = usePaintToolStore();
     const widgetFactory = paintStore.getWidgetFactory();
@@ -70,15 +65,15 @@ export default defineComponent({
       return indexPoint;
     };
 
-    const viewProxy = computed(() => useViewStore().getViewProxy(viewID.value));
+    const viewProxy = computed(() => useViewStore().getViewProxy(viewId.value));
 
     onViewProxyMounted(viewProxy, () => {
       widgetRef.value = widgetManager.value.addWidget(
         widgetFactory
       ) as vtkPaintViewWidget;
 
       if (!widgetRef.value) {
-        throw new Error('[PaintWidget2D] failed to create view widget');
+        throw new Error('PaintWidget2D failed to create view widget');
       }
 
       widgetManager.value.renderWidgets();