From 8d997f3350f22d80f6ec48204018b8fed7e8911d Mon Sep 17 00:00:00 2001
From: Axel Bocciarelli <axelboc@gmail.com>
Date: Fri, 11 Aug 2023 16:33:00 +0200
Subject: [PATCH] Allow interacting with canvas through other interactive
 elements

---
 .../storybook/src/FloatingToolbar.stories.tsx |  3 ++-
 packages/lib/src/interactions/hooks.ts        | 25 ++++++++++++-------
 .../lib/src/vis/shared/VisCanvas.module.css   |  1 +
 3 files changed, 19 insertions(+), 10 deletions(-)

diff --git a/apps/storybook/src/FloatingToolbar.stories.tsx b/apps/storybook/src/FloatingToolbar.stories.tsx
index 1d1d89c6a..436b31fc3 100644
--- a/apps/storybook/src/FloatingToolbar.stories.tsx
+++ b/apps/storybook/src/FloatingToolbar.stories.tsx
@@ -1,4 +1,4 @@
-import { FloatingControl, VisCanvas } from '@h5web/lib';
+import { DefaultInteractions, FloatingControl, VisCanvas } from '@h5web/lib';
 import { useToggle } from '@react-hookz/web';
 import type { Meta, StoryObj } from '@storybook/react';
 
@@ -24,6 +24,7 @@ export const Default = {
         ordinateConfig={{ visDomain: [50, 100], showGrid: true }}
         title={withTitle ? 'Plot title' : undefined}
       >
+        <DefaultInteractions />
         <FloatingControl>
           <button
             type="button"
diff --git a/packages/lib/src/interactions/hooks.ts b/packages/lib/src/interactions/hooks.ts
index 7a286f653..29fd233e1 100644
--- a/packages/lib/src/interactions/hooks.ts
+++ b/packages/lib/src/interactions/hooks.ts
@@ -62,7 +62,7 @@ export function useZoomOnSelection() {
 }
 
 function useWheelCapture() {
-  const { domElement } = useThree((state) => state.gl);
+  const canvasWrapper = useCanvasWrapper();
 
   const onWheel = useCallback((evt: WheelEvent) => {
     evt.preventDefault();
@@ -70,7 +70,7 @@ function useWheelCapture() {
 
   // Handler must be registed as non-passive for `preventDefault` to have an effect
   // (React's `onWheel` prop registers handlers as passive)
-  useEventListener(domElement, 'wheel', onWheel, { passive: false });
+  useEventListener(canvasWrapper, '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 { domElement } = useThree((state) => state.gl);
+  const canvasWrapper = useCanvasWrapper();
   const camera = useThree((state) => state.camera);
   const { htmlToWorld, worldToData } = useVisCanvasContext();
 
@@ -176,10 +176,10 @@ export function useCanvasEvents(callbacks: CanvasEventCallbacks): void {
     [processEvent, onWheel],
   );
 
-  useEventListener(domElement, 'pointerdown', handlePointerDown);
-  useEventListener(domElement, 'pointermove', handlePointerMove);
-  useEventListener(domElement, 'pointerup', handlePointerUp);
-  useEventListener(domElement, 'wheel', handleWheel);
+  useEventListener(canvasWrapper, 'pointerdown', handlePointerDown);
+  useEventListener(canvasWrapper, 'pointermove', handlePointerMove);
+  useEventListener(canvasWrapper, 'pointerup', handlePointerUp);
+  useEventListener(canvasWrapper, 'wheel', handleWheel);
 }
 
 export function useInteraction(
@@ -204,7 +204,6 @@ export function useModifierKeyPressed(
   modifierKey: ModifierKey | ModifierKey[] = [],
 ): boolean {
   const modifierKeys = castArray(modifierKey);
-  const { domElement } = useThree((state) => state.gl);
 
   const [pressedKeys] = useState(new Map<string, boolean>());
   const [allPressed, toggleAllPressed] = useToggle(false);
@@ -231,7 +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. */
-  useEventListener(domElement, 'pointerdown', (event: PointerEvent) => {
+  const canvasWrapper = useCanvasWrapper();
+  useEventListener(canvasWrapper, 'pointerdown', (event: PointerEvent) => {
     MODIFIER_KEYS.forEach((key) => {
       pressedKeys.set(key, event.getModifierState(key));
     });
@@ -241,3 +241,10 @@ export function useModifierKeyPressed(
 
   return allPressed;
 }
+
+function useCanvasWrapper(): HTMLDivElement {
+  return useThree(
+    (state) =>
+      state.gl.domElement.parentElement?.parentElement as HTMLDivElement,
+  );
+}
diff --git a/packages/lib/src/vis/shared/VisCanvas.module.css b/packages/lib/src/vis/shared/VisCanvas.module.css
index 86dfa7d58..5101bfdc5 100644
--- a/packages/lib/src/vis/shared/VisCanvas.module.css
+++ b/packages/lib/src/vis/shared/VisCanvas.module.css
@@ -41,6 +41,7 @@
   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