@dxos/react-ui-canvas 0.7.5-feature-compute.4d9d99a

package/src/hooks/useWheel.tsx

@@ -0,0 +1,107 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { bindAll } from 'bind-event-listener';
+import { useEffect } from 'react';
+
+import { getZoomTransform } from './projection';
+import { useCanvasContext } from './useCanvasContext';
+import { getRelativePoint } from '../util';
+
+export type WheelOptions = {
+  zoom?: boolean;
+};
+
+const defaultOptions: WheelOptions = {
+  zoom: true,
+};
+
+/**
+ * Handle wheel events to update the transform state (zoom and offset).
+ */
+export const useWheel = (options: WheelOptions = defaultOptions) => {
+  const { root, setProjection } = useCanvasContext();
+  useEffect(() => {
+    if (!root) {
+      return;
+    }
+
+    return bindAll(root, [
+      {
+        type: 'wheel',
+        options: { capture: true, passive: false },
+        listener: (ev: WheelEvent) => {
+          const zooming = isWheelZooming(ev);
+          if (!hasFocus(root) && !zooming) {
+            return;
+          }
+
+          ev.preventDefault();
+          if (zooming && !options.zoom) {
+            return;
+          }
+
+          // Zoom or pan.
+          if (ev.ctrlKey) {
+            if (!root) {
+              return;
+            }
+
+            // Keep centered while zooming.
+            setProjection(({ scale, offset }) => {
+              const pos = getRelativePoint(root, ev);
+              const scaleSensitivity = 0.01;
+              const newScale = scale * Math.exp(-ev.deltaY * scaleSensitivity);
+              return getZoomTransform({ scale, offset, newScale, pos });
+            });
+          } else {
+            setProjection(({ scale, offset: { x, y } }) => {
+              return {
+                scale,
+                offset: {
+                  x: x - ev.deltaX,
+                  y: y - ev.deltaY,
+                },
+              };
+            });
+          }
+        },
+      },
+    ]);
+  }, [root]);
+};
+
+const isWheelZooming = (ev: WheelEvent): boolean => {
+  // Check for ctrl/cmd key + wheel action.
+  if (ev.ctrlKey || ev.metaKey) {
+    // Some browsers use deltaY, others deltaZ for zoom.
+    return Math.abs(ev.deltaY) > 0 || Math.abs(ev.deltaZ) > 0;
+  }
+
+  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/index.ts

@@ -0,0 +1,8 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+export * from './components';
+export * from './hooks';
+export * from './types';
+export * from './util';

package/src/types.ts

@@ -0,0 +1,13 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { S } from '@dxos/effect';
+
+export const Point = S.Struct({ x: S.Number, y: S.Number });
+export const Dimension = S.Struct({ width: S.Number, height: S.Number });
+export const Rect = S.extend(Point, Dimension);
+
+export type Point = S.Schema.Type<typeof Point>;
+export type Dimension = S.Schema.Type<typeof Dimension>;
+export type Rect = S.Schema.Type<typeof Rect>;

package/src/util/index.ts

@@ -0,0 +1,6 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+export * from './svg';
+export * from './util';

package/src/util/svg.stories.tsx

@@ -0,0 +1,45 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import '@dxos-theme';
+
+import type { Meta } from '@storybook/react';
+import React from 'react';
+
+import { withTheme } from '@dxos/storybook-utils';
+
+import { Arrow, createPath } from './svg';
+import { testId } from './util';
+
+const Render = () => (
+  <svg className='border border-neutral-500 w-[400px] 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' />
+    </defs>
+    <path
+      {...testId('dx-storybook', true)}
+      className={'stroke-red-500'}
+      d={createPath([
+        { x: 100, y: 300 },
+        { x: 300, y: 100 },
+      ])}
+      markerStart={'url(#arrow-start)'}
+      markerEnd={'url(#arrow-end)'}
+    />
+  </svg>
+);
+
+const meta: Meta = {
+  title: 'ui/react-ui-canvas/svg',
+  render: Render,
+  decorators: [withTheme],
+  parameters: {
+    layout: 'centered',
+  },
+};
+
+export default meta;
+
+export const Default = {};

package/src/util/svg.tsx

@@ -0,0 +1,131 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import React, { type PropsWithChildren, type SVGProps } from 'react';
+
+import { type ThemedClassName } from '@dxos/react-ui';
+import { mx } from '@dxos/react-ui-theme';
+
+import { type Dimension, type Point } from '../types';
+
+// Refs
+//  - https://airbnb.io/visx/gallery
+//  - https://github.com/tldraw/tldraw/blob/main/packages/editor/src/lib/primitives/Vec.ts
+
+export const createPath = (points: Point[], join = false) => {
+  return ['M', points.map(({ x, y }) => `${x},${y}`).join(' L '), join ? 'Z' : ''].join(' ');
+};
+
+/**
+ * https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths
+ * NOTE: Leave space around shape for line width.
+ */
+export const Markers = ({ id = 'dx-marker', classNames }: ThemedClassName<{ id?: string }>) => {
+  return (
+    <>
+      <Arrow id={`${id}-arrow-start`} dir='start' classNames={classNames} />
+      <Arrow id={`${id}-arrow-end`} dir='end' classNames={classNames} />
+      <Arrow id={`${id}-triangle-start`} dir='start' closed classNames={classNames} />
+      <Arrow id={`${id}-triangle-end`} dir='end' closed classNames={classNames} />
+      <Marker id={`${id}-circle`} pos={{ x: 8, y: 8 }} size={{ width: 16, height: 16 }}>
+        <circle cx={8} cy={8} r={5} stroke={'context-stroke'} className={mx(classNames)} />
+      </Marker>
+    </>
+  );
+};
+
+export type MarkerProps = SVGProps<SVGMarkerElement> &
+  PropsWithChildren<
+    ThemedClassName<{
+      id: string;
+      pos: Point;
+      size: Dimension;
+      fill?: boolean;
+    }>
+  >;
+
+/**
+ * https://www.w3.org/TR/SVG2/painting.html#Markers
+ */
+export const Marker = ({
+  id,
+  className,
+  children,
+  pos: { x: refX, y: refY },
+  size: { width: markerWidth, height: markerHeight },
+  fill,
+  ...rest
+}: MarkerProps) => (
+  <marker
+    id={id}
+    className={className}
+    {...{
+      refX,
+      refY,
+      markerWidth,
+      markerHeight,
+      markerUnits: 'strokeWidth',
+      orient: 'auto',
+      ...rest,
+    }}
+  >
+    {children}
+  </marker>
+);
+
+export const Arrow = ({
+  classNames,
+  id,
+  size = 16,
+  dir = 'end',
+  closed = false,
+}: ThemedClassName<{ id: string; size?: number; dir?: 'start' | 'end'; closed?: boolean }>) => (
+  <Marker
+    id={id}
+    size={{ width: size, height: size }}
+    pos={dir === 'end' ? { x: size, y: size / 2 } : { x: 0, y: size / 2 }}
+  >
+    <path
+      fill={closed ? undefined : 'none'}
+      stroke={'context-stroke'}
+      className={mx(classNames)}
+      d={createPath(
+        dir === 'end'
+          ? [
+              { x: 1, y: 1 },
+              { x: size, y: size / 2 },
+              { x: 1, y: size - 1 },
+            ]
+          : [
+              { x: size - 1, y: 1 },
+              { x: 0, y: size / 2 },
+              { x: size - 1, y: size - 1 },
+            ],
+        closed,
+      )}
+    />
+  </Marker>
+);
+
+export const GridPattern = ({
+  classNames,
+  id,
+  size,
+  offset,
+}: ThemedClassName<{ id: string; size: number; offset: Point }>) => (
+  <pattern
+    id={id}
+    x={(size / 2 + offset.x) % size}
+    y={(size / 2 + offset.y) % size}
+    width={size}
+    height={size}
+    patternUnits='userSpaceOnUse'
+  >
+    {/* TODO(burdon): vars. */}
+    <g className={mx(classNames)}>
+      <line x1={0} y1={size / 2} x2={size} y2={size / 2} />
+      <line x1={size / 2} y1={0} x2={size / 2} y2={size} />
+    </g>
+  </pattern>
+);

package/src/util/util.ts

@@ -0,0 +1,50 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+let logged = false;
+
+/**
+ * Get the relative point of the cursor.
+ * NOTE: ev.offset returns the position relative to the target.
+ */
+export const getRelativePoint = (el: HTMLElement, ev: MouseEvent) => {
+  const rect = el.getBoundingClientRect();
+  return { x: ev.clientX - rect.x, y: ev.clientY - rect.top };
+};
+
+/**
+ *
+ */
+// TODO(burdon): Factor out.
+export const testId = <ID = string>(id: ID, inspect = false) => {
+  if (inspect) {
+    if (!logged) {
+      // eslint-disable-next-line no-console
+      console.log('Open storybook in expanded window;\nthen run INSPECT()');
+      logged = true;
+    }
+
+    (window as any).INSPECT = () => {
+      const el = document.querySelector(`[data-test-id="${id}"]`);
+      (window as any).inspect(el);
+      // eslint-disable-next-line no-console
+      console.log(el);
+    };
+  }
+
+  return { [DATA_TEST_ID]: id };
+};
+
+export const inspectElement = (el: Element) => {
+  (window as any).INSPECT = () => {
+    (window as any).inspect(el);
+    (window as any).element = el;
+    // eslint-disable-next-line no-console
+    console.log('Open storybook in expanded window;\nthen run INSPECT()');
+    // eslint-disable-next-line no-console
+    console.log(el);
+  };
+};
+
+export const DATA_TEST_ID = 'data-test-id';