Fix widgets not rendering after relayout

src/components/tools/polygon/PolygonWidget2D.vue

@@ -4,10 +4,7 @@ import {
   reactive,
   computed,
   defineComponent,
-  onMounted,
-  onUnmounted,
   PropType,
-  Ref,
   ref,
   toRefs,
   watch,
@@ -21,6 +18,7 @@ import { onVTKEvent } from '@/src/composables/onVTKEvent';
 import {
   useHoverEvent,
   useRightClickContextMenu,
+  useWidgetVisibility,
 } from '@/src/composables/annotationTool';
 import { usePolygonStore as useStore } from '@/src/store/tools/polygons';
 import { PolygonID as ToolID } from '@/src/types/polygon';
@@ -29,14 +27,19 @@ import vtkWidgetFactory, {
 } from '@/src/vtk/PolygonWidget';
 import { Maybe } from '@/src/types';
 import { Vector3 } from '@kitware/vtk.js/types';
+import { useViewStore } from '@/src/store/views';
+import {
+  useViewProxyMounted,
+  useViewProxyUnmounted,
+} from '@/src/composables/useViewProxy';
 import SVG2DComponent from './PolygonSVG2D.vue';
 
 export default defineComponent({
   name: 'PolygonWidget2D',
   emits: ['placed', 'contextmenu', 'widgetHover'],
   props: {
     toolId: {
-      type: String,
+      type: String as unknown as PropType<ToolID>,
       required: true,
     },
     widgetManager: {
@@ -65,29 +68,32 @@ export default defineComponent({
   },
   setup(props, { emit }) {
     const {
-      toolId: stringToolId,
+      toolId,
+      viewId,
       widgetManager,
       viewDirection,
       currentSlice,
       isPlacing,
     } = toRefs(props);
-    const toolId = ref(stringToolId.value) as Ref<ToolID>;
 
     const toolStore = useStore();
     const tool = computed(() => toolStore.toolByID[toolId.value]);
     const { currentImageID, currentImageMetadata } = useCurrentImage();
+    const viewProxy = computed(
+      () => useViewStore().getViewProxy(viewId.value)!
+    );
 
     const widgetFactory = vtkWidgetFactory.newInstance({
       id: toolId.value,
       store: toolStore,
     });
     const widget = ref<WidgetView | null>(null);
 
-    onMounted(() => {
+    useViewProxyMounted(viewProxy, () => {
       widget.value = widgetManager.value.addWidget(widgetFactory) as WidgetView;
     });
 
-    onUnmounted(() => {
+    useViewProxyUnmounted(viewProxy, () => {
       if (!widget.value) {
         return;
       }
@@ -119,7 +125,7 @@ export default defineComponent({
 
     const manipulator = vtkPlaneManipulator.newInstance();
 
-    onMounted(() => {
+    useViewProxyMounted(viewProxy, () => {
       if (!widget.value) {
         return;
       }
@@ -137,24 +143,8 @@ export default defineComponent({
 
     // --- visibility --- //
 
-    // toggles the pickability of the tool handles,
-    // since the 3D tool parts are visually hidden.
-    watch(
-      () => !!widget.value && tool.value?.slice === currentSlice.value,
-      (visible) => {
-        widget.value?.setVisibility(visible);
-      },
-      { immediate: true }
-    );
-
-    onMounted(() => {
-      if (!widget.value) {
-        return;
-      }
-      // hide handle visibility, but not picking visibility
-      widget.value.setHandleVisibility(false);
-      widgetManager.value.renderWidgets();
-    });
+    const isVisible = computed(() => tool.value?.slice === currentSlice.value);
+    useWidgetVisibility(widget, isVisible, widgetManager, viewId);
 
     // --- //
 

src/components/tools/rectangle/RectangleWidget2D.vue

@@ -3,10 +3,7 @@ import vtkWidgetManager from '@kitware/vtk.js/Widgets/Core/WidgetManager';
 import {
   computed,
   defineComponent,
-  onMounted,
-  onUnmounted,
   PropType,
-  Ref,
   ref,
   toRefs,
   watch,
@@ -28,8 +25,14 @@ import { RectangleID } from '@/src/types/rectangle';
 import {
   useRightClickContextMenu,
   useHoverEvent,
+  useWidgetVisibility,
 } from '@/src/composables/annotationTool';
 import { vtkRulerWidgetState } from '@/src/vtk/RulerWidget';
+import { useViewStore } from '@/src/store/views';
+import {
+  useViewProxyMounted,
+  useViewProxyUnmounted,
+} from '@/src/composables/useViewProxy';
 
 const useStore = useRectangleStore;
 const vtkWidgetFactory = vtkRectangleWidget;
@@ -42,7 +45,7 @@ export default defineComponent({
   emits: ['placed', 'contextmenu', 'widgetHover'],
   props: {
     toolId: {
-      type: String,
+      type: String as unknown as PropType<ToolID>,
       required: true,
     },
     widgetManager: {
@@ -71,17 +74,20 @@ export default defineComponent({
   },
   setup(props, { emit }) {
     const {
-      toolId: stringToolId,
+      toolId,
+      viewId,
       widgetManager,
       viewDirection,
       currentSlice,
       isPlacing,
     } = toRefs(props);
-    const toolId = ref(stringToolId.value) as Ref<ToolID>;
 
     const toolStore = useStore();
     const tool = computed(() => toolStore.toolByID[toolId.value]);
     const { currentImageID, currentImageMetadata } = useCurrentImage();
+    const viewProxy = computed(
+      () => useViewStore().getViewProxy(viewId.value)!
+    );
 
     const widgetFactory = vtkWidgetFactory.newInstance({
       id: toolId.value,
@@ -90,11 +96,11 @@ export default defineComponent({
     });
     const widget = ref<WidgetView | null>(null);
 
-    onMounted(() => {
+    useViewProxyMounted(viewProxy, () => {
       widget.value = widgetManager.value.addWidget(widgetFactory) as WidgetView;
     });
 
-    onUnmounted(() => {
+    useViewProxyUnmounted(viewProxy, () => {
       if (!widget.value) {
         return;
       }
@@ -137,7 +143,7 @@ export default defineComponent({
 
     const manipulator = vtkPlaneManipulator.newInstance();
 
-    onMounted(() => {
+    useViewProxyMounted(viewProxy, () => {
       if (!widget.value) {
         return;
       }
@@ -155,24 +161,8 @@ export default defineComponent({
 
     // --- visibility --- //
 
-    // toggles the pickability of the tool handles,
-    // since the 3D tool parts are visually hidden.
-    watch(
-      () => !!widget.value && tool.value?.slice === currentSlice.value,
-      (visible) => {
-        widget.value?.setVisibility(visible);
-      },
-      { immediate: true }
-    );
-
-    onMounted(() => {
-      if (!widget.value) {
-        return;
-      }
-      // hide handle visibility, but not picking visibility
-      widget.value.setHandleVisibility(false);
-      widgetManager.value.renderWidgets();
-    });
+    const isVisible = computed(() => tool.value?.slice === currentSlice.value);
+    useWidgetVisibility(widget, isVisible, widgetManager, viewId);
 
     // --- handle pick visibility --- //
 

src/components/tools/ruler/RulerWidget2D.vue

@@ -9,8 +9,6 @@ import {
   reactive,
   computed,
   defineComponent,
-  onMounted,
-  onUnmounted,
   PropType,
   ref,
   toRefs,
@@ -27,7 +25,13 @@ import RulerSVG2D from '@/src/components/tools/ruler/RulerSVG2D.vue';
 import {
   useRightClickContextMenu,
   useHoverEvent,
+  useWidgetVisibility,
 } from '@/src/composables/annotationTool';
+import { useViewStore } from '@/src/store/views';
+import {
+  useViewProxyMounted,
+  useViewProxyUnmounted,
+} from '@/src/composables/useViewProxy';
 
 export default defineComponent({
   name: 'RulerWidget2D',
@@ -62,12 +66,21 @@ export default defineComponent({
     RulerSVG2D,
   },
   setup(props, { emit }) {
-    const { rulerId, widgetManager, viewDirection, currentSlice, isPlacing } =
-      toRefs(props);
+    const {
+      rulerId,
+      viewId,
+      widgetManager,
+      viewDirection,
+      currentSlice,
+      isPlacing,
+    } = toRefs(props);
 
     const rulerStore = useRulerStore();
     const ruler = computed(() => rulerStore.rulerByID[rulerId.value]);
     const { currentImageID, currentImageMetadata } = useCurrentImage();
+    const viewProxy = computed(
+      () => useViewStore().getViewProxy(viewId.value)!
+    );
 
     const widgetFactory = vtkRulerWidget.newInstance({
       id: rulerId.value,
@@ -76,13 +89,13 @@ export default defineComponent({
     });
     const widget = ref<vtkRulerViewWidget | null>(null);
 
-    onMounted(() => {
+    useViewProxyMounted(viewProxy, () => {
       widget.value = widgetManager.value.addWidget(
         widgetFactory
       ) as vtkRulerViewWidget;
     });
 
-    onUnmounted(() => {
+    useViewProxyUnmounted(viewProxy, () => {
       if (!widget.value) {
         return;
       }
@@ -127,7 +140,7 @@ export default defineComponent({
 
     const manipulator = vtkPlaneManipulator.newInstance();
 
-    onMounted(() => {
+    useViewProxyMounted(viewProxy, () => {
       if (!widget.value) {
         return;
       }
@@ -145,24 +158,8 @@ export default defineComponent({
 
     // --- visibility --- //
 
-    // toggles the pickability of the ruler handles,
-    // since the 3D ruler parts are visually hidden.
-    watch(
-      () => !!widget.value && ruler.value?.slice === currentSlice.value,
-      (visible) => {
-        widget.value?.setVisibility(visible);
-      },
-      { immediate: true }
-    );
-
-    onMounted(() => {
-      if (!widget.value) {
-        return;
-      }
-      // hide handle visibility, but not picking visibility
-      widget.value.setHandleVisibility(false);
-      widgetManager.value.renderWidgets();
-    });
+    const isVisible = computed(() => ruler.value?.slice === currentSlice.value);
+    useWidgetVisibility(widget, isVisible, widgetManager, viewId);
 
     // --- handle pick visibility --- //
 

src/composables/annotationTool.ts

@@ -11,7 +11,11 @@ import { AnnotationToolStore } from '@/src/store/tools/useAnnotationTool';
 import { getCSSCoordinatesFromEvent } from '@/src//utils/vtk-helpers';
 import { LPSAxis } from '@/src/types/lps';
 import { AnnotationTool, ContextMenuEvent } from '@/src/types/annotation-tool';
-import { usePopperState } from './usePopperState';
+import vtkAbstractWidget from '@kitware/vtk.js/Widgets/Core/AbstractWidget';
+import { useViewStore } from '@/src/store/views';
+import vtkWidgetManager from '@kitware/vtk.js/Widgets/Core/WidgetManager';
+import { usePopperState } from '@/src/composables/usePopperState';
+import { useViewProxyMounted } from '@/src/composables/useViewProxy';
 
 const SHOW_OVERLAY_DELAY = 250; // milliseconds
 
@@ -226,3 +230,32 @@ export const usePlacingAnnotationTool = <ToolID extends string>(
     remove,
   };
 };
+
+export const useWidgetVisibility = <T extends vtkAbstractWidget>(
+  widget: Ref<Maybe<T>>,
+  visible: Ref<boolean>,
+  widgetManager: Ref<vtkWidgetManager>,
+  viewId: Ref<string>
+) => {
+  // toggles the pickability of the ruler handles,
+  // since the 3D ruler parts are visually hidden.
+  watch(
+    () => !!widget.value && visible.value,
+    (visibility) => {
+      widget.value?.setVisibility(visibility);
+    },
+    { immediate: true }
+  );
+
+  const viewProxy = computed(() => useViewStore().getViewProxy(viewId.value)!);
+
+  useViewProxyMounted(viewProxy, () => {
+    if (!widget.value) {
+      return;
+    }
+    // hide handle visibility, but not picking visibility
+    widget.value.setHandleVisibility(false);
+    widgetManager.value.renderWidgets();
+    viewProxy.value?.renderLater();
+  });
+};