Some refactors and cleanups

src/components/tools/crop/Crop3D.vue

@@ -23,7 +23,7 @@ import {
   toRefs,
   watch,
 } from 'vue';
-import { useViewProxyMounted } from '@/src/composables/useViewProxy';
+import { onViewProxyMounted } from '@/src/composables/useViewProxy';
 
 function isValidCroppingPlanes(planes: LPSCroppingPlanes) {
   return (
@@ -93,7 +93,7 @@ export default defineComponent({
       }
     });
 
-    useViewProxyMounted(viewProxy, () => {
+    onViewProxyMounted(viewProxy, () => {
       if (widgetManager.value) {
         widget.value = widgetManager.value.addWidget(
           factory

src/components/tools/polygon/PolygonWidget2D.vue

@@ -29,8 +29,8 @@ import { Maybe } from '@/src/types';
 import { Vector3 } from '@kitware/vtk.js/types';
 import { useViewStore } from '@/src/store/views';
 import {
-  useViewProxyMounted,
-  useViewProxyUnmounted,
+  onViewProxyMounted,
+  onViewProxyUnmounted,
 } from '@/src/composables/useViewProxy';
 import SVG2DComponent from './PolygonSVG2D.vue';
 
@@ -79,21 +79,19 @@ export default defineComponent({
     const toolStore = useStore();
     const tool = computed(() => toolStore.toolByID[toolId.value]);
     const { currentImageID, currentImageMetadata } = useCurrentImage();
-    const viewProxy = computed(
-      () => useViewStore().getViewProxy(viewId.value)!
-    );
+    const viewProxy = computed(() => useViewStore().getViewProxy(viewId.value));
 
     const widgetFactory = vtkWidgetFactory.newInstance({
       id: toolId.value,
       store: toolStore,
     });
     const widget = ref<WidgetView | null>(null);
 
-    useViewProxyMounted(viewProxy, () => {
+    onViewProxyMounted(viewProxy, () => {
       widget.value = widgetManager.value.addWidget(widgetFactory) as WidgetView;
     });
 
-    useViewProxyUnmounted(viewProxy, () => {
+    onViewProxyUnmounted(viewProxy, () => {
       if (!widget.value) {
         return;
       }
@@ -125,7 +123,7 @@ export default defineComponent({
 
     const manipulator = vtkPlaneManipulator.newInstance();
 
-    useViewProxyMounted(viewProxy, () => {
+    onViewProxyMounted(viewProxy, () => {
       if (!widget.value) {
         return;
       }

src/components/tools/rectangle/RectangleWidget2D.vue

@@ -30,8 +30,8 @@ import {
 import { vtkRulerWidgetState } from '@/src/vtk/RulerWidget';
 import { useViewStore } from '@/src/store/views';
 import {
-  useViewProxyMounted,
-  useViewProxyUnmounted,
+  onViewProxyMounted,
+  onViewProxyUnmounted,
 } from '@/src/composables/useViewProxy';
 
 const useStore = useRectangleStore;
@@ -85,9 +85,7 @@ export default defineComponent({
     const toolStore = useStore();
     const tool = computed(() => toolStore.toolByID[toolId.value]);
     const { currentImageID, currentImageMetadata } = useCurrentImage();
-    const viewProxy = computed(
-      () => useViewStore().getViewProxy(viewId.value)!
-    );
+    const viewProxy = computed(() => useViewStore().getViewProxy(viewId.value));
 
     const widgetFactory = vtkWidgetFactory.newInstance({
       id: toolId.value,
@@ -96,11 +94,11 @@ export default defineComponent({
     });
     const widget = ref<WidgetView | null>(null);
 
-    useViewProxyMounted(viewProxy, () => {
+    onViewProxyMounted(viewProxy, () => {
       widget.value = widgetManager.value.addWidget(widgetFactory) as WidgetView;
     });
 
-    useViewProxyUnmounted(viewProxy, () => {
+    onViewProxyUnmounted(viewProxy, () => {
       if (!widget.value) {
         return;
       }
@@ -143,7 +141,7 @@ export default defineComponent({
 
     const manipulator = vtkPlaneManipulator.newInstance();
 
-    useViewProxyMounted(viewProxy, () => {
+    onViewProxyMounted(viewProxy, () => {
       if (!widget.value) {
         return;
       }

src/components/tools/ruler/RulerWidget2D.vue

@@ -29,8 +29,8 @@ import {
 } from '@/src/composables/annotationTool';
 import { useViewStore } from '@/src/store/views';
 import {
-  useViewProxyMounted,
-  useViewProxyUnmounted,
+  onViewProxyMounted,
+  onViewProxyUnmounted,
 } from '@/src/composables/useViewProxy';
 
 export default defineComponent({
@@ -78,9 +78,7 @@ export default defineComponent({
     const rulerStore = useRulerStore();
     const ruler = computed(() => rulerStore.rulerByID[rulerId.value]);
     const { currentImageID, currentImageMetadata } = useCurrentImage();
-    const viewProxy = computed(
-      () => useViewStore().getViewProxy(viewId.value)!
-    );
+    const viewProxy = computed(() => useViewStore().getViewProxy(viewId.value));
 
     const widgetFactory = vtkRulerWidget.newInstance({
       id: rulerId.value,
@@ -89,13 +87,13 @@ export default defineComponent({
     });
     const widget = ref<vtkRulerViewWidget | null>(null);
 
-    useViewProxyMounted(viewProxy, () => {
+    onViewProxyMounted(viewProxy, () => {
       widget.value = widgetManager.value.addWidget(
         widgetFactory
       ) as vtkRulerViewWidget;
     });
 
-    useViewProxyUnmounted(viewProxy, () => {
+    onViewProxyUnmounted(viewProxy, () => {
       if (!widget.value) {
         return;
       }
@@ -140,7 +138,7 @@ export default defineComponent({
 
     const manipulator = vtkPlaneManipulator.newInstance();
 
-    useViewProxyMounted(viewProxy, () => {
+    onViewProxyMounted(viewProxy, () => {
       if (!widget.value) {
         return;
       }

src/composables/annotationTool.ts

@@ -15,7 +15,7 @@ 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';
+import { onViewProxyMounted } from '@/src/composables/useViewProxy';
 
 const SHOW_OVERLAY_DELAY = 250; // milliseconds
 
@@ -247,9 +247,9 @@ export const useWidgetVisibility = <T extends vtkAbstractWidget>(
     { immediate: true }
   );
 
-  const viewProxy = computed(() => useViewStore().getViewProxy(viewId.value)!);
+  const viewProxy = computed(() => useViewStore().getViewProxy(viewId.value));
 
-  useViewProxyMounted(viewProxy, () => {
+  onViewProxyMounted(viewProxy, () => {
     if (!widget.value) {
       return;
     }

src/composables/useViewProxy.ts

@@ -40,13 +40,13 @@ export function useViewProxy<T extends vtkViewProxy = vtkViewProxy>(
 }
 
 function useMountedViewProxy<T extends vtkViewProxy = vtkViewProxy>(
-  viewProxy: MaybeRef<T>
+  viewProxy: MaybeRef<Maybe<T>>
 ) {
   const mounted = ref(false);
 
-  const container = ref<Maybe<HTMLElement>>(unref(viewProxy).getContainer());
+  const container = ref<Maybe<HTMLElement>>(unref(viewProxy)?.getContainer());
   onVTKEvent<vtkViewProxy, 'onModified'>(viewProxy, 'onModified', () => {
-    container.value = unref(viewProxy).getContainer();
+    container.value = unref(viewProxy)?.getContainer();
   });
 
   const { width, height } = useElementSize(container);
@@ -61,8 +61,8 @@ function useMountedViewProxy<T extends vtkViewProxy = vtkViewProxy>(
   return mounted;
 }
 
-export function useViewProxyMounted<T extends vtkViewProxy = vtkViewProxy>(
-  viewProxy: MaybeRef<T>,
+export function onViewProxyMounted<T extends vtkViewProxy = vtkViewProxy>(
+  viewProxy: MaybeRef<Maybe<T>>,
   callback: () => void
 ) {
   const mounted = useMountedViewProxy(viewProxy);
@@ -76,8 +76,8 @@ export function useViewProxyMounted<T extends vtkViewProxy = vtkViewProxy>(
   );
 }
 
-export function useViewProxyUnmounted<T extends vtkViewProxy = vtkViewProxy>(
-  viewProxy: MaybeRef<T>,
+export function onViewProxyUnmounted<T extends vtkViewProxy = vtkViewProxy>(
+  viewProxy: MaybeRef<Maybe<T>>,
   callback: () => void
 ) {
   const mounted = useMountedViewProxy(viewProxy);

src/composables/useWidgetManager.ts

@@ -2,7 +2,7 @@ import vtkViewProxy from '@kitware/vtk.js/Proxy/Core/ViewProxy';
 import vtkWidgetManager from '@kitware/vtk.js/Widgets/Core/WidgetManager';
 import { CaptureOn } from '@kitware/vtk.js/Widgets/Core/WidgetManager/Constants';
 import { computed, onUnmounted, Ref, watch } from 'vue';
-import { useViewProxyMounted, useViewProxyUnmounted } from './useViewProxy';
+import { onViewProxyMounted, onViewProxyUnmounted } from './useViewProxy';
 
 export function useWidgetManager(viewProxy: Ref<vtkViewProxy>) {
   const widgetManager = computed(() => {
@@ -14,12 +14,12 @@ export function useWidgetManager(viewProxy: Ref<vtkViewProxy>) {
     return wm;
   });
 
-  useViewProxyMounted(viewProxy, () => {
+  onViewProxyMounted(viewProxy, () => {
     widgetManager.value.setRenderer(viewProxy.value.getRenderer());
     widgetManager.value.enablePicking();
   });
 
-  useViewProxyUnmounted(viewProxy, () => {
+  onViewProxyUnmounted(viewProxy, () => {
     widgetManager.value.disablePicking();
   });
 

src/vtk/PolygonWidget/index.d.ts

@@ -4,11 +4,13 @@ import vtkAbstractWidgetFactory from '@kitware/vtk.js/Widgets/Core/AbstractWidge
 import vtkPlaneManipulator from '@kitware/vtk.js/Widgets/Manipulators/PlaneManipulator';
 import vtkWidgetState from '@kitware/vtk.js/Widgets/Core/WidgetState';
 import { usePolygonStore } from '@/src/store/tools/polygons';
-import { vtkAnnotationToolWidget } from '../ToolWidgetUtils/utils';
+import {
+  vtkAnnotationToolWidget,
+  vtkAnnotationWidgetPointState,
+} from '../ToolWidgetUtils/utils';
 
-export interface vtkPolygonWidgetPointState extends vtkWidgetState {
-  getVisible(): boolean;
-}
+export interface vtkPolygonWidgetPointState
+  extends vtkAnnotationWidgetPointState {}
 
 export interface vtkPolygonWidgetState extends vtkWidgetState {
   getMoveHandle(): any;

src/vtk/RulerWidget/index.d.ts

@@ -5,13 +5,15 @@ import vtkPlaneManipulator from '@kitware/vtk.js/Widgets/Manipulators/PlaneManip
 import { InteractionState } from './behavior';
 import { useRulerStore } from '@/src/store/tools/rulers';
 import vtkWidgetState from '@kitware/vtk.js/Widgets/Core/WidgetState';
-import { vtkAnnotationToolWidget } from '../ToolWidgetUtils/utils';
+import {
+  vtkAnnotationToolWidget,
+  vtkAnnotationWidgetPointState,
+} from '../ToolWidgetUtils/utils';
 
 export { InteractionState } from './behavior';
 
-export interface vtkRulerWidgetPointState extends vtkWidgetState {
-  getVisible(): boolean;
-}
+export interface vtkRulerWidgetPointState
+  extends vtkAnnotationWidgetPointState {}
 
 export interface vtkRulerWidgetState extends vtkWidgetState {
   setIsPlaced(isPlaced: boolean): boolean;

src/vtk/ToolWidgetUtils/pointState.js

@@ -4,6 +4,7 @@ import visibleMixin from '@kitware/vtk.js/Widgets/Core/StateBuilder/visibleMixin
 import scale1Mixin from '@kitware/vtk.js/Widgets/Core/StateBuilder/scale1Mixin';
 import { watchStore } from '@/src/vtk/ToolWidgetUtils/utils';
 import { ANNOTATION_TOOL_HANDLE_RADIUS } from '@/src/constants';
+import { toRaw } from 'vue';
 
 const PIXEL_SIZE = ANNOTATION_TOOL_HANDLE_RADIUS * 2;
 
@@ -28,7 +29,7 @@ function _createPointState(
   const updateTool = (patch) => model._store.updateTool(model.id, patch);
 
   publicAPI.getOrigin = () => {
-    return getTool()?.[model.key];
+    return toRaw(getTool()?.[model.key]);
   };
 
   publicAPI.setOrigin = (xyz) => {

src/vtk/ToolWidgetUtils/utils.ts

@@ -1,7 +1,9 @@
 import { Maybe } from '@/src/types';
 import vtkAbstractWidget from '@kitware/vtk.js/Widgets/Core/AbstractWidget';
+import vtkWidgetState from '@kitware/vtk.js/Widgets/Core/WidgetState';
 import vtkPlaneManipulator from '@kitware/vtk.js/Widgets/Manipulators/PlaneManipulator';
 import { vtkSubscription } from '@kitware/vtk.js/interfaces';
+import { Vector3 } from '@kitware/vtk.js/types';
 import { Store } from 'pinia';
 
 export function watchStore<T>(
@@ -53,3 +55,8 @@ export interface vtkAnnotationToolWidget extends vtkAbstractWidget {
   onHoverEvent(cb: (eventData: any) => void): vtkSubscription;
   resetInteractions(): void;
 }
+
+export interface vtkAnnotationWidgetPointState extends vtkWidgetState {
+  getVisible(): boolean;
+  getOrigin(): Vector3 | null;
+}