@dxos/react-ui-canvas 0.8.4-main.84f28bd → 0.8.4-main.8baae0fced

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

@@ -5,9 +5,9 @@
 import { bindAll } from 'bind-event-listener';
 import { useEffect } from 'react';
 
+import { getRelativePoint } from '../util';
 import { getZoomTransform } from './projection';
 import { useCanvasContext } from './useCanvasContext';
-import { getRelativePoint } from '../util';
 
 export type WheelOptions = {
   zoom?: boolean;
@@ -33,9 +33,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) {
@@ -81,27 +78,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/types.ts

@@ -2,7 +2,7 @@
 // Copyright 2024 DXOS.org
 //
 
-import { Schema } from 'effect';
+import * as Schema from 'effect/Schema';
 
 export const Point = Schema.Struct({ x: Schema.Number, y: Schema.Number });
 export const Dimension = Schema.Struct({ width: Schema.Number, height: Schema.Number });

package/src/util/svg.stories.tsx

@@ -2,18 +2,16 @@
 // Copyright 2024 DXOS.org
 //
 
-import '@dxos-theme';
-
-import type { Meta } from '@storybook/react-vite';
+import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React from 'react';
 
-import { withTheme } from '@dxos/storybook-utils';
+import { withTheme } from '@dxos/react-ui/testing';
 
 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' />
@@ -31,15 +29,17 @@ const DefaultStory = () => (
   </svg>
 );
 
-const meta: Meta = {
+const meta = {
   title: 'ui/react-ui-canvas/svg',
   render: DefaultStory,
-  decorators: [withTheme],
+  decorators: [withTheme()],
   parameters: {
     layout: 'centered',
   },
-};
+} satisfies Meta;
 
 export default meta;
 
-export const Default = {};
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};

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';