From c2097249f3924b43801d0f14d60dd20a2c383260 Mon Sep 17 00:00:00 2001 From: Axel Bocciarelli Date: Mon, 21 Aug 2023 16:39:53 +0200 Subject: [PATCH] Rename `canvasWrapper` to `canvasArea` --- apps/storybook/src/Html.stories.tsx | 2 +- packages/lib/src/interactions/hooks.ts | 20 +++++++++---------- packages/lib/src/vis/shared/AxisSystem.tsx | 2 -- packages/lib/src/vis/shared/Html.tsx | 6 +++--- .../lib/src/vis/shared/VisCanvas.module.css | 4 ++-- packages/lib/src/vis/shared/VisCanvas.tsx | 2 +- 6 files changed, 17 insertions(+), 19 deletions(-) diff --git a/apps/storybook/src/Html.stories.tsx b/apps/storybook/src/Html.stories.tsx index 8b806ce7a..e38d9a117 100644 --- a/apps/storybook/src/Html.stories.tsx +++ b/apps/storybook/src/Html.stories.tsx @@ -230,7 +230,7 @@ export const Portal = {

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 canvasWrapper. You + longer be able to bubble up to canvasArea. You can remedy this with pointer-events: none.

, diff --git a/packages/lib/src/interactions/hooks.ts b/packages/lib/src/interactions/hooks.ts index 29fd233e1..5a854ea3a 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 canvasWrapper = useCanvasWrapper(); + const canvasArea = useCanvasArea(); 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(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, diff --git a/packages/lib/src/vis/shared/AxisSystem.tsx b/packages/lib/src/vis/shared/AxisSystem.tsx index 5a0c6b080..7f6ae559b 100644 --- a/packages/lib/src/vis/shared/AxisSystem.tsx +++ b/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'; diff --git a/packages/lib/src/vis/shared/Html.tsx b/packages/lib/src/vis/shared/Html.tsx index cb924f5e6..b161c7174 100644 --- a/packages/lib/src/vis/shared/Html.tsx +++ b/packages/lib/src/vis/shared/Html.tsx @@ -14,10 +14,10 @@ function Html(props: PropsWithChildren) { 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'); diff --git a/packages/lib/src/vis/shared/VisCanvas.module.css b/packages/lib/src/vis/shared/VisCanvas.module.css index 5101bfdc5..a1efad246 100644 --- a/packages/lib/src/vis/shared/VisCanvas.module.css +++ b/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 diff --git a/packages/lib/src/vis/shared/VisCanvas.tsx b/packages/lib/src/vis/shared/VisCanvas.tsx index bdecab356..f13610640 100644 --- a/packages/lib/src/vis/shared/VisCanvas.tsx +++ b/packages/lib/src/vis/shared/VisCanvas.tsx @@ -65,7 +65,7 @@ function VisCanvas(props: PropsWithChildren) { > {showAxes && title &&

{title}

} -
+