Merge pull request #110 from Kitware/picking-uses-react-events

Picking uses react synthetic events

Author: floryst

src/core/Picking.ts

@@ -3,14 +3,15 @@ import vtkOpenGLHardwareSelector from '@kitware/vtk.js/Rendering/OpenGL/Hardware
 import { Vector2, Vector3 } from '@kitware/vtk.js/types';
 import {
   forwardRef,
+  MouseEvent,
+  PointerEvent,
   useCallback,
   useContext,
   useImperativeHandle,
   useMemo,
 } from 'react';
 import deletionRegistry from '../utils/DeletionRegistry';
 import useDebounce from '../utils/useDebounce';
-import { useEventListener } from '../utils/useEventListener';
 import useGetterRef from '../utils/useGetterRef';
 import useMount from '../utils/useMount';
 import useUnmount from '../utils/useUnmount';
@@ -19,6 +20,7 @@ import {
   RendererContext,
   ViewContext,
 } from './contexts';
+import { useViewEventListener } from './modules/useViewEvents';
 
 export interface PickResult {
   representationId?: string;
@@ -118,7 +120,7 @@ export default forwardRef(function ViewPicking(props: PickingProps, fwdRef) {
   const viewAPI = useContext(ViewContext);
 
   if (!openGLRenderWindowAPI || !rendererAPI || !viewAPI) {
-    throw new Error('<ViewPicking> must have a <View> ancestor');
+    throw new Error('<Picking> must have a <View> ancestor');
   }
 
   const getSelector = useOpenGLHardwareSelector();
@@ -375,8 +377,7 @@ export default forwardRef(function ViewPicking(props: PickingProps, fwdRef) {
   const { onHoverDebounceWait = DefaultProps.onHoverDebounceWait } = props;
 
   // TODO last selection? (see View.js)
-  useEventListener(
-    viewAPI.getViewContainer,
+  useViewEventListener(
     'pointermove',
     useDebounce(
       useCallback(
@@ -390,8 +391,7 @@ export default forwardRef(function ViewPicking(props: PickingProps, fwdRef) {
     )
   );
 
-  useEventListener(
-    viewAPI.getViewContainer,
+  useViewEventListener(
     'pointerdown',
     useCallback(
       (ev: PointerEvent) => {
@@ -402,8 +402,7 @@ export default forwardRef(function ViewPicking(props: PickingProps, fwdRef) {
     )
   );
 
-  useEventListener(
-    viewAPI.getViewContainer,
+  useViewEventListener(
     'pointerup',
     useCallback(
       (ev: PointerEvent) => {
@@ -414,8 +413,7 @@ export default forwardRef(function ViewPicking(props: PickingProps, fwdRef) {
     )
   );
 
-  useEventListener(
-    viewAPI.getViewContainer,
+  useViewEventListener(
     'click',
     useCallback(
       (ev: MouseEvent) => {

src/core/internal/ParentedView.tsx

@@ -25,6 +25,7 @@ import {
   useInteractorStyle,
   useInteractorStyleManipulatorSettings,
 } from '../modules/useInteractorStyle';
+import useViewEvents, { ViewEvents } from '../modules/useViewEvents';
 import Renderer from '../Renderer';
 import { DefaultProps, ViewProps } from './view-shared';
 
@@ -154,6 +155,10 @@ const ParentedView = forwardRef(function ParentedView(
     }
   }, [onResize, openGLRenderWindowAPI, resizeWatcher]);
 
+  // --- events --- //
+
+  const { rootListeners, registerEventListener } = useViewEvents();
+
   // --- api --- //
 
   const api = useMemo<IView>(
@@ -195,11 +200,13 @@ const ParentedView = forwardRef(function ParentedView(
 
   return (
     <ViewContext.Provider value={api}>
-      <div style={style} ref={containerRef}>
-        <Renderer {...rendererProps} ref={rendererRef}>
-          {props.children}
-        </Renderer>
-      </div>
+      <ViewEvents.Provider value={registerEventListener}>
+        <div style={style} ref={containerRef} {...rootListeners}>
+          <Renderer {...rendererProps} ref={rendererRef}>
+            {props.children}
+          </Renderer>
+        </div>
+      </ViewEvents.Provider>
     </ViewContext.Provider>
   );
 });

src/core/internal/SingleView.tsx

@@ -20,6 +20,7 @@ import {
   useInteractorStyle,
   useInteractorStyleManipulatorSettings,
 } from '../modules/useInteractorStyle';
+import useViewEvents, { ViewEvents } from '../modules/useViewEvents';
 import OpenGLRenderWindow from '../OpenGLRenderWindow';
 import Renderer from '../Renderer';
 import RenderWindow from '../RenderWindow';
@@ -77,6 +78,10 @@ const SingleView = forwardRef(function SingleView(props: ViewProps, fwdRef) {
     autoCenterOfRotation
   );
 
+  // --- events --- //
+
+  const { rootListeners, registerEventListener } = useViewEvents();
+
   // --- api --- //
 
   const api = useMemo<IView>(
@@ -101,16 +106,19 @@ const SingleView = forwardRef(function SingleView(props: ViewProps, fwdRef) {
 
   return (
     <ViewContext.Provider value={api}>
-      <OpenGLRenderWindow
-        {...openGLRenderWindowProps}
-        ref={openGLRenderWindowRef}
-      >
-        <RenderWindow ref={renderWindowRef}>
-          <Renderer {...rendererProps} ref={rendererRef}>
-            {props.children}
-          </Renderer>
-        </RenderWindow>
-      </OpenGLRenderWindow>
+      <ViewEvents.Provider value={registerEventListener}>
+        <OpenGLRenderWindow
+          {...openGLRenderWindowProps}
+          {...rootListeners}
+          ref={openGLRenderWindowRef}
+        >
+          <RenderWindow ref={renderWindowRef}>
+            <Renderer {...rendererProps} ref={rendererRef}>
+              {props.children}
+            </Renderer>
+          </RenderWindow>
+        </OpenGLRenderWindow>
+      </ViewEvents.Provider>
     </ViewContext.Provider>
   );
 });

src/core/modules/useViewEvents.ts

@@ -0,0 +1,86 @@
+import {
+  createContext,
+  EventHandler,
+  SyntheticEvent,
+  useContext,
+  useEffect,
+  useRef,
+} from 'react';
+
+type HandledEvents = 'pointermove' | 'pointerdown' | 'pointerup' | 'click';
+
+type Handler = EventHandler<SyntheticEvent<unknown>>;
+
+function createEvent() {
+  const handlers: Handler[] = [];
+  const add = (callback: Handler) => {
+    handlers.push(callback);
+  };
+  const remove = (callback: Handler) => {
+    const idx = handlers.indexOf(callback);
+    if (idx < 0) return;
+    handlers.splice(idx, 1);
+  };
+  const trigger = (ev: SyntheticEvent<unknown>) => {
+    handlers.forEach((h) => h(ev));
+  };
+  return { add, remove, trigger };
+}
+
+export default function useViewEvents() {
+  const eventMap = useRef<
+    Record<HandledEvents, ReturnType<typeof createEvent>>
+  >({
+    pointermove: createEvent(),
+    pointerdown: createEvent(),
+    pointerup: createEvent(),
+    click: createEvent(),
+  });
+
+  const rootListeners = useRef({
+    onPointerDown: eventMap.current.pointerdown.trigger,
+    onPointerUp: eventMap.current.pointerup.trigger,
+    onPointerMove: eventMap.current.pointermove.trigger,
+    onClick: eventMap.current.click.trigger,
+  });
+
+  const registerEventListener = (
+    eventName: HandledEvents,
+    callback: Handler
+  ) => {
+    const bus = eventMap.current[eventName];
+    if (!bus) {
+      throw new Error(`${eventName} is not supported in useViewEvents`);
+    }
+
+    bus.add(callback);
+    return () => bus.remove(callback);
+  };
+
+  return {
+    rootListeners: rootListeners.current,
+    registerEventListener,
+  };
+}
+
+export type ViewEventRegistrar = ReturnType<
+  typeof useViewEvents
+>['registerEventListener'];
+
+export const ViewEvents = createContext<ViewEventRegistrar | null>(null);
+
+export function useViewEventListener(
+  eventName: HandledEvents,
+  callback: Handler
+) {
+  const registerEventListener = useContext<ViewEventRegistrar | null>(
+    ViewEvents
+  );
+  if (!registerEventListener) {
+    throw new Error('useViewEventListener needs ViewEventRegistrar!');
+  }
+
+  useEffect(() => {
+    return registerEventListener(eventName, callback);
+  }, [eventName, callback, registerEventListener]);
+}