@dxos/react-ui-canvas 0.8.4-main.c4373fc → 0.8.4-main.c85a9c8dae

package/package.json

@@ -1,9 +1,13 @@
 {
   "name": "@dxos/react-ui-canvas",
-  "version": "0.8.4-main.c4373fc",
+  "version": "0.8.4-main.c85a9c8dae",
   "description": "A canvas component.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/dxos/dxos"
+  },
   "license": "MIT",
   "author": "DXOS.org",
   "type": "module",
@@ -24,37 +28,35 @@
     "src"
   ],
   "dependencies": {
-    "@preact-signals/safe-react": "^0.9.0",
-    "@preact/signals-core": "^1.12.1",
     "@radix-ui/react-context": "1.1.1",
     "bind-event-listener": "^3.0.0",
     "d3": "^7.9.0",
     "react-resize-detector": "^11.0.1",
     "transformation-matrix": "^2.16.1",
-    "@dxos/debug": "0.8.4-main.c4373fc",
-    "@dxos/invariant": "0.8.4-main.c4373fc",
-    "@dxos/log": "0.8.4-main.c4373fc",
-    "@dxos/util": "0.8.4-main.c4373fc"
+    "@dxos/invariant": "0.8.4-main.c85a9c8dae",
+    "@dxos/log": "0.8.4-main.c85a9c8dae",
+    "@dxos/util": "0.8.4-main.c85a9c8dae",
+    "@dxos/debug": "0.8.4-main.c85a9c8dae"
   },
   "devDependencies": {
     "@types/d3": "^7.4.3",
-    "@types/react": "~19.2.2",
-    "@types/react-dom": "~19.2.1",
-    "effect": "3.18.3",
-    "react": "~19.2.0",
-    "react-dom": "~19.2.0",
-    "vite": "7.1.9",
-    "@dxos/random": "0.8.4-main.c4373fc",
-    "@dxos/react-ui": "0.8.4-main.c4373fc",
-    "@dxos/storybook-utils": "0.8.4-main.c4373fc",
-    "@dxos/react-ui-theme": "0.8.4-main.c4373fc"
+    "@types/react": "~19.2.7",
+    "@types/react-dom": "~19.2.3",
+    "effect": "3.19.16",
+    "react": "~19.2.3",
+    "react-dom": "~19.2.3",
+    "vite": "^7.1.11",
+    "@dxos/random": "0.8.4-main.c85a9c8dae",
+    "@dxos/storybook-utils": "0.8.4-main.c85a9c8dae",
+    "@dxos/react-ui": "0.8.4-main.c85a9c8dae",
+    "@dxos/ui-theme": "0.8.4-main.c85a9c8dae"
   },
   "peerDependencies": {
-    "effect": "3.13.3",
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0",
-    "@dxos/react-ui": "0.8.4-main.c4373fc",
-    "@dxos/react-ui-theme": "0.8.4-main.c4373fc"
+    "effect": "3.19.16",
+    "react": "~19.2.3",
+    "react-dom": "~19.2.3",
+    "@dxos/ui-theme": "0.8.4-main.c85a9c8dae",
+    "@dxos/react-ui": "0.8.4-main.c85a9c8dae"
   },
   "publishConfig": {
     "access": "public"

package/src/components/Canvas/Canvas.stories.tsx

@@ -5,9 +5,9 @@
 import type { Meta, StoryObj } from '@storybook/react-vite';
 import React from 'react';
 
-import { withTheme } from '@dxos/react-ui/testing';
+import { withLayout, withTheme } from '@dxos/react-ui/testing';
 
-import { useCanvasContext, useWheel } from '../../hooks';
+import { useCanvasContext, useDrag, useWheel } from '../../hooks';
 import { type Point } from '../../types';
 import { testId } from '../../util';
 import { Grid, type GridProps } from '../Grid';
@@ -51,6 +51,7 @@ const TwoCanvases = (props: GridProps) => {
 
 const Content = () => {
   useWheel();
+  useDrag();
   return (
     <div>
       {points.map(({ x, y }, i) => (
@@ -91,7 +92,7 @@ const meta = {
   title: 'ui/react-ui-canvas/Canvas',
   component: Grid,
   render: DefaultStory,
-  decorators: [withTheme],
+  decorators: [withTheme(), withLayout({ layout: 'fullscreen' })],
   parameters: {
     layout: 'fullscreen',
   },
@@ -106,6 +107,6 @@ export const Default: Story = {
 };
 
 export const SideBySide: Story = {
-  args: { size: 16 },
   render: TwoCanvases,
+  args: { size: 16 },
 };

package/src/components/Canvas/Canvas.tsx

@@ -15,7 +15,7 @@ import React, {
 import { useResizeDetector } from 'react-resize-detector';
 
 import { type ThemedClassName } from '@dxos/react-ui';
-import { mx } from '@dxos/react-ui-theme';
+import { mx } from '@dxos/ui-theme';
 
 import { CanvasContext, ProjectionMapper, type ProjectionState, defaultOrigin } from '../../hooks';
 
@@ -30,7 +30,7 @@ export type CanvasProps = ThemedClassName<PropsWithChildren<Partial<ProjectionSt
  * Manages CSS projection.
  */
 export const Canvas = forwardRef<CanvasController, CanvasProps>(
-  ({ children, classNames, scale: _scale = 1, offset: _offset = defaultOrigin, ...props }, forwardedRef) => {
+  ({ children, classNames, scale: scaleProp = 1, offset: offsetProp = defaultOrigin, ...props }, forwardedRef) => {
     // Size.
     const { ref, width = 0, height = 0 } = useResizeDetector();
 
@@ -38,7 +38,7 @@ export const Canvas = forwardRef<CanvasController, CanvasProps>(
     const [ready, setReady] = useState(false);
 
     // Projection.
-    const [{ scale, offset }, setProjection] = useState<ProjectionState>({ scale: _scale, offset: _offset });
+    const [{ scale, offset }, setProjection] = useState<ProjectionState>({ scale: scaleProp, offset: offsetProp });
     useEffect(() => {
       if (width && height && offset === defaultOrigin) {
         setProjection({ scale, offset: { x: width / 2, y: height / 2 } });

package/src/components/FPS.tsx

@@ -6,7 +6,7 @@
 import React, { useEffect, useReducer, useRef } from 'react';
 
 import { type ThemedClassName } from '@dxos/react-ui';
-import { mx } from '@dxos/react-ui-theme';
+import { mx } from '@dxos/ui-theme';
 
 export type FPSProps = ThemedClassName<{
   width?: number;
@@ -73,7 +73,7 @@ export const FPS = ({ classNames, width = 60, height = 30, bar = 'bg-cyan-500' }
       style={{ width: width + 6 }}
       className={mx(
         'relative flex flex-col p-0.5',
-        'bg-baseSurface text-xs text-subdued font-thin pointer-events-none border border-separator',
+        'bg-base-surface text-xs text-subdued font-thin pointer-events-none border border-separator',
         classNames,
       )}
     >

package/src/components/Grid/Grid.stories.tsx

@@ -5,7 +5,7 @@
 import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React, { useRef, useState } from 'react';
 
-import { withTheme } from '@dxos/react-ui/testing';
+import { withLayout, withTheme } from '@dxos/react-ui/testing';
 
 import { type ProjectionState } from '../../hooks';
 
@@ -16,7 +16,7 @@ const DefaultStory = (props: GridProps) => {
   const [{ scale, offset }] = useState<ProjectionState>({ scale: 1, offset: { x: 0, y: 0 } });
 
   return (
-    <div ref={ref} className='grow'>
+    <div role='none' ref={ref} className='grow'>
       <GridComponent scale={scale} offset={offset} {...props} />
     </div>
   );
@@ -26,7 +26,7 @@ const meta = {
   title: 'ui/react-ui-canvas/Grid',
   component: GridComponent,
   render: DefaultStory,
-  decorators: [withTheme],
+  decorators: [withTheme(), withLayout({ layout: 'fullscreen' })],
   parameters: {
     layout: 'fullscreen',
   },

package/src/components/Grid/Grid.tsx

@@ -5,7 +5,7 @@
 import React, { forwardRef, useId, useMemo } from 'react';
 
 import { type ThemedClassName, useForwardedRef } from '@dxos/react-ui';
-import { mx } from '@dxos/react-ui-theme';
+import { mx } from '@dxos/ui-theme';
 
 import { useCanvasContext } from '../../hooks';
 import { type Point } from '../../types';
@@ -18,6 +18,8 @@ const defaultOffset: Point = { x: 0, y: 0 };
 
 const createId = (parent: string, grid: number) => `dx-canvas-grid-${parent}-${grid}`;
 
+// TODO(burdon): Click to drag.
+
 export type GridProps = ThemedClassName<{
   size?: number;
   scale?: number;
@@ -25,23 +27,29 @@ export type GridProps = ThemedClassName<{
   showAxes?: boolean;
 }>;
 
+// TODO(burdon): Use id of parent canvas.
+export const Grid = (props: GridProps) => {
+  const { scale, offset } = useCanvasContext();
+  return <GridComponent {...props} scale={scale} offset={offset} />;
+};
+
 export const GridComponent = forwardRef<SVGSVGElement, GridProps>(
   (
     { size: gridSize = defaultGridSize, scale = 1, offset = defaultOffset, showAxes = true, classNames },
     forwardedRef,
   ) => {
     const svgRef = useForwardedRef(forwardedRef);
+    const { width = 0, height = 0 } = svgRef.current?.getBoundingClientRect() ?? {};
+
     const instanceId = useId();
     const grids = useMemo(
       () =>
         gridRatios
           .map((ratio) => ({ id: ratio, size: ratio * gridSize * scale }))
-          .filter(({ size }) => size >= gridSize && size <= 256),
+          .filter(({ size }) => size >= gridSize && size <= 128),
       [gridSize, scale],
     );
 
-    const { width = 0, height = 0 } = svgRef.current?.getBoundingClientRect() ?? {};
-
     return (
       <svg
         {...testId('dx-canvas-grid')}
@@ -79,9 +87,3 @@ export const GridComponent = forwardRef<SVGSVGElement, GridProps>(
     );
   },
 );
-
-// TODO(burdon): Use id of parent canvas.
-export const Grid = (props: GridProps) => {
-  const { scale, offset } = useCanvasContext();
-  return <GridComponent {...props} scale={scale} offset={offset} />;
-};

package/src/hooks/index.ts

@@ -4,4 +4,5 @@
 
 export * from './projection';
 export * from './useCanvasContext';
+export * from './useDrag';
 export * from './useWheel';

package/src/hooks/useDrag.tsx

@@ -0,0 +1,96 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { bind } from 'bind-event-listener';
+import { useEffect, useRef } from 'react';
+
+import { useCanvasContext } from './useCanvasContext';
+
+export type DragOptions = {
+  // TODO(burdon): Add constraints?
+};
+
+/**
+ * Handle drag events to update the transform state (offset).
+ */
+export const useDrag = (_options: DragOptions = {}) => {
+  const { root, setProjection } = useCanvasContext();
+
+  // Track drag state.
+  const state = useRef<{
+    panning: boolean;
+    x: number;
+    y: number;
+  }>({ panning: false, x: 0, y: 0 });
+
+  useEffect(() => {
+    if (!root) {
+      return;
+    }
+
+    // TODO(burdon): Use d3-drag?
+    return bind(root, {
+      type: 'pointerdown',
+      listener: (ev: PointerEvent) => {
+        // Only left click.
+        if (ev.button !== 0) {
+          return;
+        }
+
+        if (ev.defaultPrevented) {
+          return;
+        }
+
+        if (ev.target !== root || ev.shiftKey) {
+          return;
+        }
+
+        // Check if clicking on an interactive element?
+        // For now, assume if it bubbled to root, it's fair game unless prevented.
+
+        ev.preventDefault(); // Prevent text selection.
+        root.setPointerCapture(ev.pointerId);
+        state.current = { panning: true, x: ev.clientX, y: ev.clientY };
+
+        const moveUnbind = bind(root, {
+          type: 'pointermove',
+          listener: (ev: PointerEvent) => {
+            if (!state.current.panning) {
+              return;
+            }
+
+            // Calculate delta.
+            const dx = ev.clientX - state.current.x;
+            const dy = ev.clientY - state.current.y;
+
+            state.current.x = ev.clientX;
+            state.current.y = ev.clientY;
+
+            setProjection((prev) => ({
+              ...prev,
+              offset: {
+                x: prev.offset.x + dx,
+                y: prev.offset.y + dy,
+              },
+            }));
+          },
+        });
+
+        const upUnbind = bind(root, {
+          type: 'pointerup',
+          listener: (ev: PointerEvent) => {
+            state.current.panning = false;
+            root.releasePointerCapture(ev.pointerId);
+            moveUnbind();
+            upUnbind();
+            // Clean up lostpointercapture as well?
+          },
+        });
+
+        // Handle cancellation/lost capture just in case?
+        // Using setPointerCapture usually handles this well on the element.
+      },
+    });
+  }, [root]);
+};

package/src/hooks/useWheel.tsx

@@ -34,9 +34,6 @@ export const useWheel = (options: WheelOptions = defaultOptions) => {
         options: { capture: true, passive: false },
         listener: (ev: WheelEvent) => {
           const zooming = isWheelZooming(ev);
-          if (!hasFocus(root) && !zooming) {
-            return;
-          }
 
           ev.preventDefault();
           if (zooming && !options.zoom) {
@@ -82,27 +79,3 @@ const isWheelZooming = (ev: WheelEvent): boolean => {
 
   return false;
 };
-
-const hasFocus = (element: HTMLElement): boolean => {
-  const activeElement = document.activeElement;
-  if (!activeElement) {
-    return false;
-  }
-
-  // Handle shadow DOM.
-  let shadowActive = activeElement;
-  while (shadowActive?.shadowRoot?.activeElement) {
-    shadowActive = shadowActive.shadowRoot.activeElement;
-  }
-
-  // Check if element or any parent has focus.
-  let current: HTMLElement | null = element;
-  while (current) {
-    if (current === activeElement || current === shadowActive) {
-      return true;
-    }
-    current = current.parentElement;
-  }
-
-  return false;
-};

package/src/util/svg.stories.tsx

@@ -11,7 +11,7 @@ import { Arrow, createPath } from './svg';
 import { testId } from './util';
 
 const DefaultStory = () => (
-  <svg className='border border-neutral-500 w-[30rem] h-[400px]'>
+  <svg className='border border-separator w-[30rem] h-[400px]'>
     <defs>
       <Arrow id='arrow-start' classNames='fill-none stroke-red-500' dir='start' />
       <Arrow id='arrow-end' classNames='fill-none stroke-red-500' dir='end' />
@@ -32,7 +32,7 @@ const DefaultStory = () => (
 const meta = {
   title: 'ui/react-ui-canvas/svg',
   render: DefaultStory,
-  decorators: [withTheme],
+  decorators: [withTheme()],
   parameters: {
     layout: 'centered',
   },

package/src/util/svg.tsx

@@ -5,7 +5,7 @@
 import React, { type PropsWithChildren, type SVGProps } from 'react';
 
 import { type ThemedClassName } from '@dxos/react-ui';
-import { mx } from '@dxos/react-ui-theme';
+import { mx } from '@dxos/ui-theme';
 
 import { type Dimension, type Point } from '../types';