feat(View): move interactor style up to View

The View component controls the interactor style, as that's the primary
component for working with multiple views.

Other changes:
- Fixes the interactor style being deleted before it gets removed from
the interactor.

Author: floryst

src/core-ts/RenderWindow.tsx

@@ -17,62 +17,10 @@ import useResizeObserver from '../utils-ts/useResizeObserver';
 import useUnmount from '../utils-ts/useUnmount';
 import { OpenGLRenderWindowContext, RenderWindowContext } from './contexts';
 import useInteractor from './modules/useInteractor';
-import {
-  ManipulatorSettings,
-  useInteractorStyle,
-  useInteractorStyleManipulatorSettings,
-} from './modules/useInteractorStyle';
-
-export interface Props extends PropsWithChildren {
-  /**
-   * Configure the interactions
-   */
-  interactorSettings?: ManipulatorSettings[];
-}
-
-const DefaultProps = {
-  interactorSettings: [
-    {
-      button: 1,
-      action: 'Rotate',
-    },
-    {
-      button: 2,
-      action: 'Pan',
-    },
-    {
-      button: 3,
-      action: 'Zoom',
-      scrollEnabled: true,
-    },
-    {
-      button: 1,
-      action: 'Pan',
-      alt: true,
-    },
-    {
-      button: 1,
-      action: 'Zoom',
-      control: true,
-    },
-    {
-      button: 1,
-      action: 'Select',
-      shift: true,
-    },
-    {
-      button: 1,
-      action: 'Roll',
-      alt: true,
-      shift: true,
-    },
-  ] as ManipulatorSettings[],
-};
-
-// TODO Wrap in OpenGLRenderWindow by default
-export default forwardRef(function RenderWindow(props: Props, fwdRef) {
-  const { interactorSettings = DefaultProps.interactorSettings } = props;
 
+export type Props = PropsWithChildren;
+
+export default forwardRef(function RenderWindow(props: Props, fwdRef) {
   const openGLRenderWindow = useContext(OpenGLRenderWindowContext);
   if (!openGLRenderWindow) throw new Error('No OpenGL Render Window!');
 
@@ -110,11 +58,6 @@ export default forwardRef(function RenderWindow(props: Props, fwdRef) {
     getRenderWindow().setInteractor(getInteractor());
   });
 
-  const [getInteractorStyle, setInteractorStyle] =
-    useInteractorStyle(getInteractor);
-
-  useInteractorStyleManipulatorSettings(getInteractorStyle, interactorSettings);
-
   // --- rendering --- //
 
   const [renderRequested, setRenderRequested] = useState(false);
@@ -153,11 +96,9 @@ export default forwardRef(function RenderWindow(props: Props, fwdRef) {
     () => ({
       get: getRenderWindow,
       getInteractor,
-      getInteractorStyle,
-      setInteractorStyle,
       requestRender: queueRender,
     }),
-    [getRenderWindow, getInteractor, getInteractorStyle, setInteractorStyle]
+    [getRenderWindow, getInteractor]
   );
 
   useImperativeHandle(fwdRef, () => api);

src/core-ts/View.tsx

@@ -1,3 +1,4 @@
+import vtkInteractorStyle from '@kitware/vtk.js/Interaction/Style/InteractorStyle';
 import { FixedVTKRenderWindowInteractor } from '@kitware/vtk.js/type-patches';
 import { Bounds } from '@kitware/vtk.js/types';
 import {
@@ -21,6 +22,11 @@ import {
   OpenGLRenderWindowContext,
   RenderWindowContext,
 } from './contexts';
+import {
+  ManipulatorSettings,
+  useInteractorStyle,
+  useInteractorStyleManipulatorSettings,
+} from './modules/useInteractorStyle';
 import OpenGLRenderWindow, {
   Props as OpenGLRenderWindowProps,
 } from './OpenGLRenderWindow';
@@ -64,8 +70,51 @@ interface Props
    * Show/Hide orientation axes.
    */
   // showOrientationAxes?: boolean;
+  /**
+   * Configure the interactions
+   */
+  interactorSettings?: ManipulatorSettings[];
 }
 
+const DefaultProps = {
+  interactorSettings: [
+    {
+      button: 1,
+      action: 'Rotate',
+    },
+    {
+      button: 2,
+      action: 'Pan',
+    },
+    {
+      button: 3,
+      action: 'Zoom',
+      scrollEnabled: true,
+    },
+    {
+      button: 1,
+      action: 'Pan',
+      alt: true,
+    },
+    {
+      button: 1,
+      action: 'Zoom',
+      control: true,
+    },
+    {
+      button: 1,
+      action: 'Select',
+      shift: true,
+    },
+    {
+      button: 1,
+      action: 'Roll',
+      alt: true,
+      shift: true,
+    },
+  ] as ManipulatorSettings[],
+};
+
 /**
  * A standalone View (not within a MultiViewRoot).
  */
@@ -75,7 +124,6 @@ const SingleView = forwardRef(function SingleView(props: Props, fwdRef) {
   const renderWindowRef = useRef<IRenderWindow | null>(null);
   const rendererRef = useRef<IRenderer | null>(null);
 
-  const renderWindowProps = pick(props, 'interactorSettings');
   const rendererProps = pick(
     props,
     'background',
@@ -87,24 +135,38 @@ const SingleView = forwardRef(function SingleView(props: Props, fwdRef) {
 
   const openGLRenderWindowProps = omit(
     props,
-    ...([
-      ...Object.keys(renderWindowProps),
-      ...Object.keys(rendererProps),
-    ] as (keyof Props)[])
+    ...([...Object.keys(rendererProps)] as (keyof Props)[])
   );
 
+  // --- interactor style --- //
+
+  const getInteractor = useCallback(
+    () => renderWindowRef.current?.getInteractor() ?? null,
+    []
+  );
+
+  const [getInteractorStyle, setInteractorStyle] =
+    useInteractorStyle(getInteractor);
+
+  const { interactorSettings = DefaultProps.interactorSettings } = props;
+  useInteractorStyleManipulatorSettings(getInteractorStyle, interactorSettings);
+
+  // --- api --- //
+
   const api = useMemo<IView>(
     () => ({
       isInMultiViewRoot: () => false,
       getOpenGLRenderWindow: () => openGLRenderWindowRef.current,
       getRenderWindow: () => renderWindowRef.current,
       getRenderer: () => rendererRef.current,
+      getInteractorStyle: () => getInteractorStyle(),
+      setInteractorStyle: (style) => setInteractorStyle(style),
       requestRender: () => rendererRef.current?.requestRender(),
       getCamera: () => rendererRef.current?.get().getActiveCamera() ?? null,
       resetCamera: (boundsToUse?: Bounds) =>
         rendererRef.current?.resetCamera(boundsToUse),
     }),
-    []
+    [getInteractorStyle, setInteractorStyle]
   );
 
   useImperativeHandle(fwdRef, () => api);
@@ -114,7 +176,7 @@ const SingleView = forwardRef(function SingleView(props: Props, fwdRef) {
       {...openGLRenderWindowProps}
       ref={openGLRenderWindowRef}
     >
-      <RenderWindow {...renderWindowProps} ref={renderWindowRef}>
+      <RenderWindow ref={renderWindowRef}>
         <Renderer {...rendererProps} ref={rendererRef}>
           {props.children}
         </Renderer>
@@ -225,6 +287,12 @@ const ParentedView = forwardRef(function ParentedView(props: Props, fwdRef) {
       getOpenGLRenderWindow: () => openGLRenderWindowAPI,
       getRenderWindow: () => renderWindowAPI,
       getRenderer: () => rendererRef.current,
+      // TODO
+      getInteractorStyle: () => ({} as unknown as vtkInteractorStyle),
+      // TODO
+      setInteractorStyle: (style) => {
+        console.log(style);
+      },
       requestRender: () => rendererRef.current?.requestRender(),
       getCamera: () => rendererRef.current?.get().getActiveCamera() ?? null,
       resetCamera: (boundsToUse?: Bounds) =>
@@ -271,6 +339,8 @@ export default forwardRef(function View(props: Props, fwdRef) {
       getOpenGLRenderWindow: () => getView()?.getOpenGLRenderWindow() ?? null,
       getRenderWindow: () => getView()?.getRenderWindow() ?? null,
       getRenderer: () => getView()?.getRenderer() ?? null,
+      getInteractorStyle: () => getView()?.getInteractorStyle() ?? null,
+      setInteractorStyle: (style) => getView()?.setInteractorStyle(style),
       requestRender: () => getView()?.requestRender(),
       getCamera: () => getView()?.getCamera() ?? null,
       resetCamera: (boundsToUse?: Bounds) =>

src/core-ts/modules/useInteractor.ts

@@ -1,9 +1,9 @@
 import vtkRenderWindowInteractor from '@kitware/vtk.js/Rendering/Core/RenderWindowInteractor';
 import { useEffect } from 'react';
+import { IOpenGLRenderWindow } from '../../types';
 import deletionRegistry from '../../utils-ts/DeletionRegistry';
 import useGetterRef from '../../utils-ts/useGetterRef';
 import useUnmount from '../../utils-ts/useUnmount';
-import { IOpenGLRenderWindow } from '../OpenGLRenderWindow';
 
 export default function useInteractor(openglRenderWindow: IOpenGLRenderWindow) {
   const [interactorRef, getInteractor] = useGetterRef(() => {

src/core-ts/modules/useInteractorStyle.ts

@@ -23,7 +23,6 @@ import vtkMouseCameraTrackballZoomToMouseManipulator, {
 import vtkInteractorStyle from '@kitware/vtk.js/Interaction/Style/InteractorStyle';
 import vtkInteractorStyleManipulator from '@kitware/vtk.js/Interaction/Style/InteractorStyleManipulator';
 import vtkRenderWindowInteractor from '@kitware/vtk.js/Rendering/Core/RenderWindowInteractor';
-import { Nullable } from '@kitware/vtk.js/types';
 import deepEqual from 'deep-equal';
 import { useCallback, useEffect, useState } from 'react';
 import deletionRegistry from '../../utils-ts/DeletionRegistry';
@@ -116,10 +115,11 @@ export function useInteractorStyleManipulatorSettings(
 }
 
 export function useInteractorStyle(
-  getInteractor: () => vtkRenderWindowInteractor
+  getInteractor: () => vtkRenderWindowInteractor | null
 ) {
-  const [externalStyle, setExternalStyle] =
-    useState<Nullable<vtkInteractorStyle>>(null);
+  const [externalStyle, setExternalStyle] = useState<vtkInteractorStyle | null>(
+    null
+  );
 
   const [styleRef, getStyle] = useGetterRef<vtkInteractorStyle>(() => {
     setExternalStyle(null);
@@ -130,16 +130,22 @@ export function useInteractorStyle(
 
   useEffect(() => {
     const interactor = getInteractor();
-    const style = getStyle();
-    deletionRegistry.incRefCount(interactor);
+    if (!interactor) return;
+
+    const style = externalStyle ?? getStyle();
     interactor.setInteractorStyle(style);
+
+    deletionRegistry.incRefCount(interactor);
+    deletionRegistry.incRefCount(style);
+
     return () => {
       if (interactor.getInteractorStyle() === style) {
         interactor.setInteractorStyle(null);
       }
       deletionRegistry.decRefCount(interactor);
+      deletionRegistry.incRefCount(style);
     };
-  }, [getInteractor, getStyle]);
+  });
 
   useUnmount(() => {
     if (styleRef.current && !externalStyle) {

src/types.ts

@@ -43,8 +43,6 @@ export interface IOpenGLRenderWindow {
 export interface IRenderWindow {
   get(): vtkRenderWindow;
   getInteractor(): vtkRenderWindowInteractor;
-  getInteractorStyle(): vtkInteractorStyle;
-  setInteractorStyle(style: vtkInteractorStyle): void;
   requestRender(): void;
 }
 
@@ -61,8 +59,8 @@ export interface IView {
   getOpenGLRenderWindow(): IOpenGLRenderWindow | null;
   // getAPISpecificRenderWindow(): vtkOpenGLRenderWindow;
   // getInteractor(): vtkRenderWindowInteractor;
-  // getInteractorStyle(): vtkInteractorStyle;
-  // setInteractorStyle(style: vtkInteractorStyle): void;
+  getInteractorStyle(): vtkInteractorStyle | null;
+  setInteractorStyle(style: vtkInteractorStyle): void;
   requestRender(): void;
   getCamera(): vtkCamera | null;
   resetCamera(boundsToUse?: Bounds): void;