From 232557d6a77907e9fdb9e4178cce498f23ea6477 Mon Sep 17 00:00:00 2001
From: Forrest <forrest.li@kitware.com>
Date: Fri, 8 Sep 2023 14:17:19 -0400
Subject: [PATCH] refactor(onVTKEvent): easier event interface

---
 src/components/VolumeRendering.vue            | 11 ++----
 src/components/tools/crop/Crop3D.vue          |  8 +---
 .../tools/crosshairs/CrosshairSVG2D.vue       |  8 ++--
 src/components/tools/polygon/PolygonSVG2D.vue |  8 ++--
 .../tools/polygon/PolygonWidget2D.vue         |  8 +---
 .../tools/rectangle/RectangleSVG2D.vue        |  8 ++--
 .../tools/rectangle/RectangleWidget2D.vue     | 13 ++-----
 src/components/tools/ruler/RulerSVG2D.vue     |  8 ++--
 src/components/tools/ruler/RulerWidget2D.vue  | 13 ++-----
 src/composables/annotationTool.ts             |  7 +---
 src/composables/isViewAnimating.ts            | 15 ++------
 src/composables/onVTKEvent.ts                 | 38 +++++++++++++++++++
 src/composables/useOrientationLabels.ts       |  7 +---
 src/composables/useVTKCallback.ts             | 33 ----------------
 src/composables/useVTKWorldToDisplay.ts       | 21 +++++-----
 src/composables/useViewProxy.ts               | 19 +++-------
 16 files changed, 87 insertions(+), 138 deletions(-)
 create mode 100644 src/composables/onVTKEvent.ts
 delete mode 100644 src/composables/useVTKCallback.ts

diff --git a/src/components/VolumeRendering.vue b/src/components/VolumeRendering.vue
index fdc1b0ad9..4efb0f757 100644
--- a/src/components/VolumeRendering.vue
+++ b/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(
diff --git a/src/components/tools/crop/Crop3D.vue b/src/components/tools/crop/Crop3D.vue
index 3158360ee..977ac8ba7 100644
--- a/src/components/tools/crop/Crop3D.vue
+++ b/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;
 
diff --git a/src/components/tools/crosshairs/CrosshairSVG2D.vue b/src/components/tools/crosshairs/CrosshairSVG2D.vue
index d9a401bd3..121a154e5 100644
--- a/src/components/tools/crosshairs/CrosshairSVG2D.vue
+++ b/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);
 
diff --git a/src/components/tools/polygon/PolygonSVG2D.vue b/src/components/tools/polygon/PolygonSVG2D.vue
index 1d5ad2165..bcc5e6d82 100644
--- a/src/components/tools/polygon/PolygonSVG2D.vue
+++ b/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,
diff --git a/src/components/tools/polygon/PolygonWidget2D.vue b/src/components/tools/polygon/PolygonWidget2D.vue
index 2ad334e4a..9ebf50a68 100644
--- a/src/components/tools/polygon/PolygonWidget2D.vue
+++ b/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');
     });
 
diff --git a/src/components/tools/rectangle/RectangleSVG2D.vue b/src/components/tools/rectangle/RectangleSVG2D.vue
index 58db70e9d..f7e3dddab 100644
--- a/src/components/tools/rectangle/RectangleSVG2D.vue
+++ b/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,
diff --git a/src/components/tools/rectangle/RectangleWidget2D.vue b/src/components/tools/rectangle/RectangleWidget2D.vue
index 760d44006..e73c6277c 100644
--- a/src/components/tools/rectangle/RectangleWidget2D.vue
+++ b/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;
     };
diff --git a/src/components/tools/ruler/RulerSVG2D.vue b/src/components/tools/ruler/RulerSVG2D.vue
index 9e4e78279..a2bea6bff 100644
--- a/src/components/tools/ruler/RulerSVG2D.vue
+++ b/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,
diff --git a/src/components/tools/ruler/RulerWidget2D.vue b/src/components/tools/ruler/RulerWidget2D.vue
index ecced81bf..0cb6a8d3c 100644
--- a/src/components/tools/ruler/RulerWidget2D.vue
+++ b/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());
 
diff --git a/src/composables/annotationTool.ts b/src/composables/annotationTool.ts
index 9987b355c..4eb3011e6 100644
--- a/src/composables/annotationTool.ts
+++ b/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', {
diff --git a/src/composables/isViewAnimating.ts b/src/composables/isViewAnimating.ts
index 814a8fb78..fc93dfd86 100644
--- a/src/composables/isViewAnimating.ts
+++ b/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;
   });
 
diff --git a/src/composables/onVTKEvent.ts b/src/composables/onVTKEvent.ts
new file mode 100644
index 000000000..684c87823
--- /dev/null
+++ b/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();
+  });
+}
diff --git a/src/composables/useOrientationLabels.ts b/src/composables/useOrientationLabels.ts
index faf4659fd..13737b490 100644
--- a/src/composables/useOrientationLabels.ts
+++ b/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 };
diff --git a/src/composables/useVTKCallback.ts b/src/composables/useVTKCallback.ts
deleted file mode 100644
index c744c26f1..000000000
--- a/src/composables/useVTKCallback.ts
+++ /dev/null
@@ -1,33 +0,0 @@
-import type { vtkSubscription } from '@kitware/vtk.js/interfaces';
-import { isRef, onUnmounted, watchEffect } from 'vue';
-import { MaybeRef } from '@vueuse/core';
-
-type Listener = (obj: any) => void;
-type VTKCallback = (listener: Listener) => vtkSubscription;
-
-export function useVTKCallback(
-  callback: MaybeRef<VTKCallback | null | undefined>
-) {
-  const handleListener = (listener: Listener) => {
-    let subscription: vtkSubscription | null = null;
-
-    const cleanup = () => {
-      subscription?.unsubscribe();
-      subscription = null;
-    };
-    onUnmounted(cleanup);
-
-    if (isRef(callback)) {
-      watchEffect(() => {
-        cleanup();
-        if (callback.value) {
-          subscription = callback.value(listener);
-        }
-      });
-    } else if (callback) {
-      subscription = callback(listener);
-    }
-  };
-
-  return handleListener;
-}
diff --git a/src/composables/useVTKWorldToDisplay.ts b/src/composables/useVTKWorldToDisplay.ts
index be583cf04..a74abaa53 100644
--- a/src/composables/useVTKWorldToDisplay.ts
+++ b/src/composables/useVTKWorldToDisplay.ts
@@ -4,12 +4,13 @@ import type { Vector2, Vector3 } from '@kitware/vtk.js/types';
 import { computed, ref, unref, watchEffect } from 'vue';
 import { MaybeRef, useResizeObserver } from '@vueuse/core';
 import { vec3 } from 'gl-matrix';
-import { useVTKCallback } from './useVTKCallback';
+import { onVTKEvent } from '@/src/composables/onVTKEvent';
+import { Maybe } from '@/src/types';
 import { computeWorldToDisplay } from '../utils/vtk-helpers';
 
-type MaybeCoords = Vector3 | vec3 | null | undefined;
-type MaybeMultiCoords = Vector3[] | vec3[] | null | undefined;
-type MaybeRenderer = vtkRenderer | null | undefined;
+type MaybeCoords = Maybe<Vector3 | vec3>;
+type MaybeMultiCoords = Maybe<Vector3[] | vec3[]>;
+type MaybeRenderer = Maybe<vtkRenderer>;
 
 /**
  * Returns a reactive vtkOpenGLRenderWindow container ref.
@@ -18,7 +19,7 @@ type MaybeRenderer = vtkRenderer | null | undefined;
  * @returns
  */
 export function useVTKViewContainer(
-  view: MaybeRef<vtkOpenGLRenderWindow | null | undefined>
+  view: MaybeRef<Maybe<vtkOpenGLRenderWindow>>
 ) {
   const container = ref<HTMLElement | null>(null);
 
@@ -26,8 +27,7 @@ export function useVTKViewContainer(
     container.value = unref(view)?.getContainer() ?? null;
   };
 
-  const onModified = useVTKCallback(computed(() => unref(view)?.onModified));
-  onModified(update);
+  onVTKEvent(view, 'onModified', update);
   update();
 
   return container;
@@ -71,13 +71,10 @@ export function useVTKMultiWorldToDisplay(
     }) as Vector2[];
   };
 
-  const cameraOnModified = useVTKCallback(
-    computed(() => unref(renderer)?.getActiveCamera().onModified)
-  );
-
+  const camera = computed(() => unref(renderer)?.getActiveCamera());
   useResizeObserver(container, update);
   watchEffect(update);
-  cameraOnModified(update);
+  onVTKEvent(camera, 'onModified', update);
   update();
 
   return displayCoords;
diff --git a/src/composables/useViewProxy.ts b/src/composables/useViewProxy.ts
index 3238a0eae..a1c8ba873 100644
--- a/src/composables/useViewProxy.ts
+++ b/src/composables/useViewProxy.ts
@@ -1,9 +1,9 @@
 import vtkViewProxy from '@kitware/vtk.js/Proxy/Core/ViewProxy';
 import { computed, ref, unref, watch } from 'vue';
 import { MaybeRef } from '@vueuse/core';
+import { onVTKEvent } from '@/src/composables/onVTKEvent';
 import { ViewProxyType } from '../core/proxies';
 import { useViewStore } from '../store/views';
-import { useVTKCallback } from './useVTKCallback';
 
 export function useViewProxy<T extends vtkViewProxy = vtkViewProxy>(
   id: MaybeRef<string>,
@@ -38,16 +38,6 @@ export function useViewProxy<T extends vtkViewProxy = vtkViewProxy>(
   };
 }
 
-function onViewProxyModified<T extends vtkViewProxy = vtkViewProxy>(
-  viewProxy: MaybeRef<T>,
-  callback: () => void
-) {
-  const onModified = useVTKCallback(
-    computed(() => unref(viewProxy).onModified)
-  );
-  onModified(callback);
-}
-
 function useMountedViewProxy<T extends vtkViewProxy = vtkViewProxy>(
   viewProxy: MaybeRef<T>
 ) {
@@ -58,8 +48,11 @@ function useMountedViewProxy<T extends vtkViewProxy = vtkViewProxy>(
   };
 
   updateMounted();
-
-  onViewProxyModified(viewProxy, updateMounted);
+  onVTKEvent<vtkViewProxy, 'onModified'>(
+    viewProxy,
+    'onModified',
+    updateMounted
+  );
 
   return mounted;
 }