Rename canvasWrapper to canvasArea

apps/storybook/src/Html.stories.tsx

@@ -230,7 +230,7 @@ export const Portal = {
                 <p>
                   However, note that your elements will interfere with canvas
                   interactions (zoom, pan, etc.), since pointer events will no
-                  longer be able to bubble up to <code>canvasWrapper</code>. You
+                  longer be able to bubble up to <code>canvasArea</code>. You
                   can remedy this with <code>pointer-events: none</code>.
                 </p>
               </div>,

packages/lib/src/interactions/hooks.ts

@@ -62,15 +62,15 @@ export function useZoomOnSelection() {
 }
 
 function useWheelCapture() {
-  const canvasWrapper = useCanvasWrapper();
+  const canvasArea = useCanvasArea();
 
   const onWheel = useCallback((evt: WheelEvent) => {
     evt.preventDefault();
   }, []);
 
   // Handler must be registed as non-passive for `preventDefault` to have an effect
   // (React's `onWheel` prop registers handlers as passive)
-  useEventListener(canvasWrapper, 'wheel', onWheel, { passive: false });
+  useEventListener(canvasArea, 'wheel', onWheel, { passive: false });
 }
 
 export function useZoomOnWheel(
@@ -123,7 +123,7 @@ export function useZoomOnWheel(
 export function useCanvasEvents(callbacks: CanvasEventCallbacks): void {
   const { onPointerDown, onPointerMove, onPointerUp, onWheel } = callbacks;
 
-  const canvasWrapper = useCanvasWrapper();
+  const canvasArea = useCanvasArea();
   const camera = useThree((state) => state.camera);
   const { htmlToWorld, worldToData } = useVisCanvasContext();
 
@@ -176,10 +176,10 @@ export function useCanvasEvents(callbacks: CanvasEventCallbacks): void {
     [processEvent, onWheel],
   );
 
-  useEventListener(canvasWrapper, 'pointerdown', handlePointerDown);
-  useEventListener(canvasWrapper, 'pointermove', handlePointerMove);
-  useEventListener(canvasWrapper, 'pointerup', handlePointerUp);
-  useEventListener(canvasWrapper, 'wheel', handleWheel);
+  useEventListener(canvasArea, 'pointerdown', handlePointerDown);
+  useEventListener(canvasArea, 'pointermove', handlePointerMove);
+  useEventListener(canvasArea, 'pointerup', handlePointerUp);
+  useEventListener(canvasArea, 'wheel', handleWheel);
 }
 
 export function useInteraction(
@@ -230,8 +230,8 @@ export function useModifierKeyPressed(
   /* Keyboard events are triggered only when the window has focus.
    * This ensures that the `allPressed` state gets updated (if needed) when the
    * user starts interacting with the canvas while the window is out of focus. */
-  const canvasWrapper = useCanvasWrapper();
-  useEventListener(canvasWrapper, 'pointerdown', (event: PointerEvent) => {
+  const canvasArea = useCanvasArea();
+  useEventListener(canvasArea, 'pointerdown', (event: PointerEvent) => {
     MODIFIER_KEYS.forEach((key) => {
       pressedKeys.set(key, event.getModifierState(key));
     });
@@ -242,7 +242,7 @@ export function useModifierKeyPressed(
   return allPressed;
 }
 
-function useCanvasWrapper(): HTMLDivElement {
+function useCanvasArea(): HTMLDivElement {
   return useThree(
     (state) =>
       state.gl.domElement.parentElement?.parentElement as HTMLDivElement,

packages/lib/src/vis/shared/AxisSystem.tsx

@@ -1,5 +1,3 @@
-import { assertDefined, assertNonNull } from '@h5web/shared';
-import { useThree } from '@react-three/fiber';
 import { createPortal } from 'react-dom';
 
 import { useCameraState } from '../hooks';

packages/lib/src/vis/shared/Html.tsx

@@ -14,10 +14,10 @@ function Html(props: PropsWithChildren<Props>) {
   const r3fRoot = useThree((state) => state.gl.domElement.parentElement);
   assertNonNull(r3fRoot);
 
-  const canvasWrapper = r3fRoot.parentElement;
-  assertNonNull(canvasWrapper);
+  const canvasArea = r3fRoot.parentElement;
+  assertNonNull(canvasArea);
 
-  const portalContainer = overflowCanvas ? canvasWrapper : r3fRoot;
+  const portalContainer = overflowCanvas ? canvasArea : r3fRoot;
 
   const [renderContainer] = useState(() => {
     const div = document.createElement('div');

packages/lib/src/vis/shared/VisCanvas.module.css

@@ -37,14 +37,14 @@
   font-weight: var(--h5w-plotTitle--fontWeight, inherit);
 }
 
-.canvasWrapper {
+.canvasArea {
   grid-area: canvas;
   position: relative; /* for `.r3fRoot`, `.svgOverlay`, `.floatingToolbar`, overflowing annotations, etc. */
   background-color: var(--h5w-canvas--bgColor, transparent);
   user-select: none; /* selection may be restored on specific elements as needed (annotations, etc.) */
 
   /*
-   * `.canvasWrapper` and `.r3fRoot` are implicitely stacked at `z-index: 0`, so
+   * `.canvasArea` and `.r3fRoot` are implicitely stacked at `z-index: 0`, so
    * they intercept events before they can reach the canvas. We can't stack them
    * explicitly without creating a new stacking context, which would break the
    * stacking order. So we disable pointer events instead and restore them only

packages/lib/src/vis/shared/VisCanvas.tsx

@@ -65,7 +65,7 @@ function VisCanvas(props: PropsWithChildren<Props>) {
     >
       {showAxes && title && <p className={styles.title}>{title}</p>}
 
-      <div className={styles.canvasWrapper}>
+      <div className={styles.canvasArea}>
         <R3FCanvas className={styles.r3fRoot} orthographic>
           <VisCanvasProvider
             visRatio={visRatio}