refactor(onVTKEvent): easier event interface

src/components/VolumeRendering.vue

@@ -13,9 +13,9 @@ import type { vtkSubscription } from '@kitware/vtk.js/interfaces';
 import vtkColorMaps from '@kitware/vtk.js/Rendering/Core/ColorTransferFunction/ColorMaps';
 import vtkPiecewiseFunctionProxy from '@kitware/vtk.js/Proxy/Core/PiecewiseFunctionProxy';
 import vtkColorTransferFunction from '@kitware/vtk.js/Rendering/Core/ColorTransferFunction';
+import { onVTKEvent } from '@/src/composables/onVTKEvent';
 import { useResizeObserver } from '../composables/useResizeObserver';
 import { useCurrentImage } from '../composables/useCurrentImage';
-import { useVTKCallback } from '../composables/useVTKCallback';
 import useVolumeColoringStore from '../store/view-configs/volume-coloring';
 import {
   getColorFunctionRangeFromPreset,
@@ -128,8 +128,7 @@ export default defineComponent({
       recurseGuard = false;
     }
 
-    const onWidgetOpacityChange = useVTKCallback(pwfWidget.onOpacityChange);
-    onWidgetOpacityChange(updateOpacityFunc);
+    onVTKEvent(pwfWidget, 'onOpacityChange', updateOpacityFunc);
 
     // trigger 3D view animations when updating the opacity widget
     const { viewProxy } = useViewProxy(TARGET_VIEW_ID, ViewProxyType.Volume);
@@ -149,8 +148,7 @@ export default defineComponent({
         .cancelAnimation(pwfWidget, true /* skipWarning */);
     };
 
-    const onWidgetAnimation = useVTKCallback(pwfWidget.onAnimation);
-    onWidgetAnimation((animating: boolean) => {
+    onVTKEvent(pwfWidget, 'onAnimation', (animating: boolean) => {
       if (animating) {
         request3DAnimation();
       } else {
@@ -212,8 +210,7 @@ export default defineComponent({
       { immediate: true }
     );
 
-    const onTFModified = useVTKCallback(colorTransferFunc.onModified);
-    onTFModified(() => pwfWidget.render());
+    onVTKEvent(colorTransferFunc, 'onModified', () => pwfWidget.render());
 
     // update pwf widget when opacity function changes
     watch(

src/components/tools/crop/Crop3D.vue

@@ -1,6 +1,6 @@
 <script lang="ts">
 import { useCurrentImage } from '@/src/composables/useCurrentImage';
-import { useVTKCallback } from '@/src/composables/useVTKCallback';
+import { onVTKEvent } from '@/src/composables/onVTKEvent';
 import { VTKThreeViewWidgetManager } from '@/src/constants';
 import { useCropStore } from '@/src/store/tools/crop';
 import { LPSCroppingPlanes } from '@/src/types/crop';
@@ -152,11 +152,7 @@ export default defineComponent({
       { immediate: true }
     );
 
-    const onPlanesUpdated = useVTKCallback(
-      state.getCroppingPlanes().onModified
-    );
-
-    onPlanesUpdated(() => {
+    onVTKEvent(state.getCroppingPlanes(), 'onModified', () => {
       const imageID = currentImageID.value;
       if (!imageID) return;
 

src/components/tools/crosshairs/CrosshairSVG2D.vue

@@ -41,7 +41,7 @@
 
 <script lang="ts">
 import { useResizeObserver } from '@/src/composables/useResizeObserver';
-import { useVTKCallback } from '@/src/composables/useVTKCallback';
+import { onVTKEvent } from '@/src/composables/onVTKEvent';
 import { ToolContainer } from '@/src/constants';
 import { useViewStore } from '@/src/store/views';
 import { worldToSVG } from '@/src/utils/vtk-helpers';
@@ -95,10 +95,8 @@ export default defineComponent({
       }
     };
 
-    const cameraOnModified = useVTKCallback(
-      computed(() => viewProxy.value.getCamera().onModified)
-    );
-    cameraOnModified(updatePoints);
+    const camera = computed(() => viewProxy.value.getCamera());
+    onVTKEvent(camera, 'onModified', updatePoints);
 
     watchEffect(updatePoints);
 

src/components/tools/polygon/PolygonSVG2D.vue

@@ -22,7 +22,7 @@
 
 <script lang="ts">
 import { useResizeObserver } from '@/src/composables/useResizeObserver';
-import { useVTKCallback } from '@/src/composables/useVTKCallback';
+import { onVTKEvent } from '@/src/composables/onVTKEvent';
 import { ToolContainer } from '@/src/constants';
 import { useViewStore } from '@/src/store/views';
 import { worldToSVG } from '@/src/utils/vtk-helpers';
@@ -117,10 +117,8 @@ export default defineComponent({
       linePoints.value = lines.join(' ');
     };
 
-    const cameraOnModified = useVTKCallback(
-      computed(() => viewProxy.value.getCamera().onModified)
-    );
-    cameraOnModified(updatePoints);
+    const camera = computed(() => viewProxy.value.getCamera());
+    onVTKEvent(camera, 'onModified', updatePoints);
 
     watch([viewProxy, points, movePoint, placing], updatePoints, {
       deep: true,

src/components/tools/polygon/PolygonWidget2D.vue

@@ -16,7 +16,7 @@ import vtkPlaneManipulator from '@kitware/vtk.js/Widgets/Manipulators/PlaneManip
 import { useCurrentImage } from '@/src/composables/useCurrentImage';
 import { updatePlaneManipulatorFor2DView } from '@/src/utils/manipulators';
 import { LPSAxisDir } from '@/src/types/lps';
-import { useVTKCallback } from '@/src/composables/useVTKCallback';
+import { onVTKEvent } from '@/src/composables/onVTKEvent';
 import { useRightClickContextMenu } from '@/src/composables/annotationTool';
 import { usePolygonStore as useStore } from '@/src/store/tools/polygons';
 import { PolygonID as ToolID } from '@/src/types/polygon';
@@ -99,11 +99,7 @@ export default defineComponent({
       }
     });
 
-    const onPlacedEvent = useVTKCallback(
-      computed(() => widget.value?.onPlacedEvent)
-    );
-
-    onPlacedEvent(() => {
+    onVTKEvent(widget, 'onPlacedEvent', () => {
       emit('placed');
     });
 

src/components/tools/rectangle/RectangleSVG2D.vue

@@ -33,7 +33,7 @@
 
 <script lang="ts">
 import { useResizeObserver } from '@/src/composables/useResizeObserver';
-import { useVTKCallback } from '@/src/composables/useVTKCallback';
+import { onVTKEvent } from '@/src/composables/onVTKEvent';
 import { ToolContainer } from '@/src/constants';
 import { useViewStore } from '@/src/store/views';
 import { worldToSVG } from '@/src/utils/vtk-helpers';
@@ -123,10 +123,8 @@ export default defineComponent({
       };
     });
 
-    const cameraOnModified = useVTKCallback(
-      computed(() => viewProxy.value.getCamera().onModified)
-    );
-    cameraOnModified(updatePoints);
+    const camera = computed(() => viewProxy.value.getCamera());
+    onVTKEvent(camera, 'onModified', updatePoints);
 
     watch([viewProxy, point1, point2], updatePoints, {
       deep: true,

src/components/tools/rectangle/RectangleWidget2D.vue

@@ -16,7 +16,7 @@ import vtkPlaneManipulator from '@kitware/vtk.js/Widgets/Manipulators/PlaneManip
 import { useCurrentImage } from '@/src/composables/useCurrentImage';
 import { updatePlaneManipulatorFor2DView } from '@/src/utils/manipulators';
 import { LPSAxisDir } from '@/src/types/lps';
-import { useVTKCallback } from '@/src/composables/useVTKCallback';
+import { onVTKEvent } from '@/src/composables/onVTKEvent';
 import { useRectangleStore } from '@/src/store/tools/rectangles';
 import vtkRectangleWidget, {
   vtkRectangleViewWidget,
@@ -121,11 +121,7 @@ export default defineComponent({
       }
     });
 
-    const onPlacedEvent = useVTKCallback(
-      computed(() => widget.value?.onPlacedEvent)
-    );
-
-    onPlacedEvent(() => {
+    onVTKEvent(widget, 'onPlacedEvent', () => {
       emit('placed');
     });
 
@@ -183,10 +179,7 @@ export default defineComponent({
         if (!pointState.value) return;
         visible.value = pointState.value.getVisible();
       };
-      const onModified = useVTKCallback(
-        computed(() => pointState.value?.onModified)
-      );
-      onModified(() => updateVisibility());
+      onVTKEvent(pointState, 'onModified', () => updateVisibility());
       watchOnce(pointState, () => updateVisibility());
       return visible;
     };

src/components/tools/ruler/RulerSVG2D.vue

@@ -49,7 +49,7 @@
 
 <script lang="ts">
 import { useResizeObserver } from '@/src/composables/useResizeObserver';
-import { useVTKCallback } from '@/src/composables/useVTKCallback';
+import { onVTKEvent } from '@/src/composables/onVTKEvent';
 import { ToolContainer } from '@/src/constants';
 import { useViewStore } from '@/src/store/views';
 import { worldToSVG } from '@/src/utils/vtk-helpers';
@@ -136,10 +136,8 @@ export default defineComponent({
       }
     };
 
-    const cameraOnModified = useVTKCallback(
-      computed(() => viewProxy.value.getCamera().onModified)
-    );
-    cameraOnModified(updatePoints);
+    const camera = computed(() => viewProxy.value.getCamera());
+    onVTKEvent(camera, 'onModified', updatePoints);
 
     watch([viewProxy, point1, point2], updatePoints, {
       deep: true,

src/components/tools/ruler/RulerWidget2D.vue

@@ -22,7 +22,7 @@ import { useCurrentImage } from '@/src/composables/useCurrentImage';
 import { updatePlaneManipulatorFor2DView } from '@/src/utils/manipulators';
 import { LPSAxisDir } from '@/src/types/lps';
 import { useRulerStore } from '@/src/store/tools/rulers';
-import { useVTKCallback } from '@/src/composables/useVTKCallback';
+import { onVTKEvent } from '@/src/composables/onVTKEvent';
 import RulerSVG2D from '@/src/components/tools/ruler/RulerSVG2D.vue';
 import { watchOnce } from '@vueuse/core';
 import { useRightClickContextMenu } from '@/src/composables/annotationTool';
@@ -111,11 +111,7 @@ export default defineComponent({
 
     // --- placed event --- //
 
-    const onPlacedEvent = useVTKCallback(
-      computed(() => widget.value?.onPlacedEvent)
-    );
-
-    onPlacedEvent(() => {
+    onVTKEvent(widget, 'onPlacedEvent', () => {
       emit('placed');
     });
 
@@ -175,10 +171,7 @@ export default defineComponent({
         visible.value = pointState.value.getVisible();
       };
 
-      const onModified = useVTKCallback(
-        computed(() => pointState.value?.onModified)
-      );
-      onModified(() => updateVisibility());
+      onVTKEvent(pointState, 'onModified', () => updateVisibility());
 
       watchOnce(pointState, () => updateVisibility());
 

src/composables/annotationTool.ts

@@ -2,11 +2,11 @@ import { Ref, computed, ref } from 'vue';
 import { useCurrentImage } from '@/src/composables/useCurrentImage';
 import { frameOfReferenceToImageSliceAndAxis } from '@/src/utils/frameOfReference';
 import { vtkAnnotationToolWidget } from '@/src/vtk/ToolWidgetUtils/utils';
+import { onVTKEvent } from '@/src/composables/onVTKEvent';
 import { LPSAxis } from '../types/lps';
 import { AnnotationTool, ContextMenuEvent } from '../types/annotation-tool';
 import { AnnotationToolStore } from '../store/tools/useAnnotationTool';
 import { getCSSCoordinatesFromEvent } from '../utils/vtk-helpers';
-import { useVTKCallback } from './useVTKCallback';
 
 // does the tools's frame of reference match
 // the view's axis
@@ -68,10 +68,7 @@ export const useRightClickContextMenu = (
   emit: (event: 'contextmenu', ...args: any[]) => void,
   widget: Ref<vtkAnnotationToolWidget | null>
 ) => {
-  const widgetOnRightClick = computed(() => widget.value?.onRightClickEvent);
-  const onRightClick = useVTKCallback(widgetOnRightClick);
-
-  onRightClick((eventData) => {
+  onVTKEvent(widget, 'onRightClickEvent', (eventData) => {
     const displayXY = getCSSCoordinatesFromEvent(eventData);
     if (displayXY) {
       emit('contextmenu', {

src/composables/isViewAnimating.ts

@@ -1,23 +1,16 @@
 import vtkViewProxy from '@kitware/vtk.js/Proxy/Core/ViewProxy';
 import { computed, ref, unref } from 'vue';
 import { MaybeRef } from '@vueuse/core';
-import { useVTKCallback } from './useVTKCallback';
+import { onVTKEvent } from '@/src/composables/onVTKEvent';
 
 export function isViewAnimating(viewProxy: MaybeRef<vtkViewProxy>) {
   const isAnimating = ref(false);
+  const interactor = computed(() => unref(viewProxy).getInteractor());
 
-  const onStartAnimation = useVTKCallback(
-    computed(() => unref(viewProxy).getInteractor().onStartAnimation)
-  );
-  const onEndAnimation = useVTKCallback(
-    computed(() => unref(viewProxy).getInteractor().onEndAnimation)
-  );
-
-  onStartAnimation(() => {
+  onVTKEvent(interactor, 'onStartAnimation', () => {
     isAnimating.value = true;
   });
-
-  onEndAnimation(() => {
+  onVTKEvent(interactor, 'onEndAnimation', () => {
     isAnimating.value = false;
   });
 

src/composables/onVTKEvent.ts

@@ -0,0 +1,38 @@
+import { Maybe } from '@/src/types';
+import { vtkObject, vtkSubscription } from '@kitware/vtk.js/interfaces';
+import { MaybeRef, computed, onBeforeUnmount, unref, watch } from 'vue';
+
+export type VTKEventHandler = (ev?: any) => any;
+export type VTKEventListener = (handler: VTKEventHandler) => vtkSubscription;
+
+export function onVTKEvent<T extends vtkObject, K extends keyof T>(
+  vtkObj: MaybeRef<Maybe<T>>,
+  eventHookName: T[K] extends VTKEventListener ? K : never,
+  callback: VTKEventHandler
+) {
+  const listenerRef = computed(() => {
+    const obj = unref(vtkObj);
+    return obj ? (obj[eventHookName] as VTKEventListener) : null;
+  });
+
+  let subscription: Maybe<vtkSubscription> = null;
+  const stop = () => {
+    subscription?.unsubscribe();
+    subscription = null;
+  };
+
+  watch(
+    listenerRef,
+    (listener) => {
+      stop();
+      if (listener) {
+        subscription = listener(callback);
+      }
+    },
+    { immediate: true }
+  );
+
+  onBeforeUnmount(() => {
+    stop();
+  });
+}

src/composables/useOrientationLabels.ts

@@ -2,8 +2,8 @@ import { computed, Ref, ref } from 'vue';
 import { vec3 } from 'gl-matrix';
 import type { Vector3 } from '@kitware/vtk.js/types';
 import vtkViewProxy from '@kitware/vtk.js/Proxy/Core/ViewProxy';
+import { onVTKEvent } from '@/src/composables/onVTKEvent';
 import { EPSILON } from '../constants';
-import { useVTKCallback } from './useVTKCallback';
 
 export function toOrderedLabels(vec: Vector3) {
   return (
@@ -52,10 +52,7 @@ export function useOrientationLabels(view: Ref<vtkViewProxy>) {
     left.value = toOrderedLabels(vleft);
   }
 
-  const cameraOnModified = useVTKCallback(
-    computed(() => camera.value.onModified)
-  );
-  cameraOnModified(updateAxes);
+  onVTKEvent(camera, 'onModified', updateAxes);
   updateAxes();
 
   return { top, right, bottom, left };