@yuzhouu/canvas-kit 0.1.2

package/_vendor/canvas-react/components/CanvasView.tsx

@@ -0,0 +1,796 @@
+import { useEffect, useMemo, useRef, useState, type ReactNode } from "react";
+import {
+  Vec,
+  type Camera,
+  type ContextMenuOpenSnapshot,
+  type EditorPointerType,
+  type KeyboardEditorEvent,
+  type PointerEditorEvent,
+  type TickEditorEvent,
+  type WheelEditorEvent,
+} from "@land/canvas-core";
+import type {
+  CanvasDomEventGuardName,
+  CanvasPluginComponent,
+  CanvasPluginProvider,
+} from "@land/canvas-plugin-api";
+import { ShapeLayer } from "./ShapeLayer";
+import { OverlayLayer } from "./OverlayLayer";
+import { useEditor } from "../hooks/useEditor";
+import { useValue } from "../hooks/useValue";
+import { CanvasRendererRegistryContext } from "../host/CanvasRendererRegistryContext";
+import {
+  createCanvasRendererRegistry,
+  type CanvasRendererRegistry,
+} from "../host/rendererRegistry";
+import {
+  createCanvasDomEventGuardRegistry,
+  type CanvasDomEventGuardRegistry,
+} from "../host/domEventGuards";
+
+interface PointerEventLike {
+  timeStamp: number;
+  pointerId: number;
+  button: number;
+  buttons: number;
+  pointerType: string;
+  detail?: number;
+  pressure: number;
+  clientX: number;
+  clientY: number;
+  shiftKey: boolean;
+  altKey: boolean;
+  ctrlKey: boolean;
+  metaKey: boolean;
+}
+
+interface PointerMoveSnapshot {
+  clientX: number;
+  clientY: number;
+  buttons: number;
+  shiftKey: boolean;
+  altKey: boolean;
+  ctrlKey: boolean;
+  metaKey: boolean;
+}
+
+interface ContainerOffset {
+  left: number;
+  top: number;
+}
+
+function isEditableEventTarget(target: EventTarget | null): boolean {
+  if (!(target instanceof HTMLElement)) {
+    return false;
+  }
+
+  if (target.isContentEditable) {
+    return true;
+  }
+
+  if (
+    target instanceof HTMLInputElement ||
+    target instanceof HTMLTextAreaElement ||
+    target instanceof HTMLSelectElement
+  ) {
+    return true;
+  }
+
+  return false;
+}
+
+function getPointerType(pointerType: string): EditorPointerType {
+  return pointerType === "touch" || pointerType === "pen"
+    ? pointerType
+    : "mouse";
+}
+
+function createPointerEvent(
+  name: PointerEditorEvent["name"],
+  event: PointerEventLike,
+  screenPoint: Vec,
+  pagePoint: Vec,
+): PointerEditorEvent {
+  return {
+    type: "pointer",
+    name,
+    timestamp: event.timeStamp,
+    pointerId: event.pointerId,
+    button: event.button,
+    buttons: event.buttons,
+    pointerType: getPointerType(event.pointerType),
+    clickCount: event.detail,
+    screenPoint,
+    pagePoint,
+    pressure: event.pressure,
+    shiftKey: event.shiftKey,
+    altKey: event.altKey,
+    ctrlKey: event.ctrlKey,
+    metaKey: event.metaKey,
+    accelKey: event.metaKey || event.ctrlKey,
+  };
+}
+
+function createWheelEvent(
+  event: WheelEvent,
+  screenPoint: Vec,
+  pagePoint: Vec,
+): WheelEditorEvent {
+  return {
+    type: "wheel",
+    screenPoint,
+    pagePoint,
+    delta: new Vec(event.deltaX, event.deltaY),
+    shiftKey: event.shiftKey,
+    altKey: event.altKey,
+    ctrlKey: event.ctrlKey,
+    metaKey: event.metaKey,
+    accelKey: event.metaKey || event.ctrlKey,
+  };
+}
+
+function createKeyboardEvent(
+  name: KeyboardEditorEvent["name"],
+  event: KeyboardEvent,
+): KeyboardEditorEvent {
+  return {
+    type: "keyboard",
+    name,
+    key: event.key,
+    code: event.code,
+    shiftKey: event.shiftKey,
+    altKey: event.altKey,
+    ctrlKey: event.ctrlKey,
+    metaKey: event.metaKey,
+    accelKey: event.metaKey || event.ctrlKey,
+  };
+}
+
+function getScreenPoint(
+  event: Pick<PointerEventLike, "clientX" | "clientY">,
+  offset: ContainerOffset,
+): Vec {
+  return new Vec(event.clientX - offset.left, event.clientY - offset.top);
+}
+
+function arePointerMoveSnapshotsEqual(
+  left: PointerMoveSnapshot | null,
+  right: PointerMoveSnapshot,
+): boolean {
+  return (
+    !!left &&
+    left.clientX === right.clientX &&
+    left.clientY === right.clientY &&
+    left.buttons === right.buttons &&
+    left.shiftKey === right.shiftKey &&
+    left.altKey === right.altKey &&
+    left.ctrlKey === right.ctrlKey &&
+    left.metaKey === right.metaKey
+  );
+}
+
+const CANVAS_DOT_GRID_SIZE = 15;
+const CANVAS_DOT_GRID_STEPS = [
+  { min: -1, mid: 0.15, step: 64 },
+  { min: 0.05, mid: 0.375, step: 16 },
+  { min: 0.15, mid: 1, step: 4 },
+  { min: 0.7, mid: 2.5, step: 1 },
+] as const;
+
+function getPositiveModulo(value: number, divisor: number): number {
+  return ((value % divisor) + divisor) % divisor;
+}
+
+function clamp(value: number, min: number, max: number): number {
+  return Math.max(min, Math.min(max, value));
+}
+
+function modulate(
+  value: number,
+  [fromLow, fromHigh]: readonly [number, number],
+  [toLow, toHigh]: readonly [number, number],
+): number {
+  return toLow + ((value - fromLow) / (fromHigh - fromLow)) * (toHigh - toLow);
+}
+
+function CanvasBackground() {
+  const editor = useEditor();
+  const camera = useValue(editor.currentCameraSignal);
+
+  return (
+    <svg
+      data-ui="canvas-background"
+      aria-hidden="true"
+      className="pointer-events-none absolute inset-0"
+      xmlns="http://www.w3.org/2000/svg"
+      style={{
+        position: "absolute",
+        inset: 0,
+        width: "100%",
+        height: "100%",
+        pointerEvents: "none",
+      }}
+    >
+      <defs>
+        {CANVAS_DOT_GRID_STEPS.map(({ min, mid, step }) => {
+          const gridSize = CANVAS_DOT_GRID_SIZE * step * camera.z;
+          const dotCenter = getCanvasBackgroundDotCenter(camera, gridSize);
+          const opacity = camera.z < mid
+            ? clamp(modulate(camera.z, [min, mid], [0, 1]), 0, 1)
+            : 1;
+
+          return (
+            <pattern
+              key={step}
+              id={`land-canvas-grid-${step}`}
+              width={gridSize}
+              height={gridSize}
+              patternUnits="userSpaceOnUse"
+            >
+              <circle
+                cx={dotCenter.x}
+                cy={dotCenter.y}
+                r={1}
+                fill="var(--canvas-dot)"
+                opacity={opacity}
+              />
+            </pattern>
+          );
+        })}
+      </defs>
+      {CANVAS_DOT_GRID_STEPS.map(({ step }) => (
+        <rect
+          key={step}
+          width="100%"
+          height="100%"
+          fill={`url(#land-canvas-grid-${step})`}
+        />
+      ))}
+    </svg>
+  );
+}
+
+function getCanvasBackgroundDotCenter(
+  camera: Camera,
+  gridSize: number,
+): { x: number; y: number } {
+  return {
+    x: getPositiveModulo(0.5 - camera.x * camera.z, gridSize),
+    y: getPositiveModulo(0.5 - camera.y * camera.z, gridSize),
+  };
+}
+
+function getDefaultSurfaceCursor(
+  activeToolId: string,
+  isPointerActive: boolean,
+): string | undefined {
+  if (activeToolId === "hand") {
+    return isPointerActive ? "grabbing" : "grab";
+  }
+  return activeToolId === "select" ? undefined : "crosshair";
+}
+
+export function Canvas({
+  canvasComponents,
+  canvasProviders,
+  domEventGuardRegistry,
+  onContextMenuRequest,
+  rendererRegistry,
+}: {
+  canvasComponents?: readonly CanvasPluginComponent[];
+  canvasProviders?: readonly CanvasPluginProvider[];
+  domEventGuardRegistry?: CanvasDomEventGuardRegistry;
+  onContextMenuRequest?: (snapshot: ContextMenuOpenSnapshot) => void;
+  rendererRegistry?: CanvasRendererRegistry;
+} = {}) {
+  const editor = useEditor();
+  const activeRendererRegistry = useMemo(
+    () => rendererRegistry ?? createCanvasRendererRegistry(),
+    [rendererRegistry],
+  );
+  const activeDomEventGuards = useMemo(
+    () => domEventGuardRegistry ?? createCanvasDomEventGuardRegistry(),
+    [domEventGuardRegistry],
+  );
+  const activeToolId = useValue(editor.toolStateSignal).activeToolId;
+  const shapeEditingSession = useValue(editor.shapeEditingStateSignal).session;
+  const containerRef = useRef<HTMLDivElement>(null);
+  const containerOffsetRef = useRef<ContainerOffset | null>(null);
+  const activePointerIdRef = useRef<number | null>(null);
+  const lastPointerMoveRef = useRef<PointerMoveSnapshot | null>(null);
+  const tickFrameRef = useRef<number | null>(null);
+  const previousTickTimestampRef = useRef<number | null>(null);
+  const lastPointerClientPointRef = useRef<{ x: number; y: number } | null>(null);
+  const [isPointerActive, setIsPointerActive] = useState(false);
+  const [surfaceCursor, setSurfaceCursor] = useState<string | undefined>(
+    undefined,
+  );
+
+  const stopTicking = () => {
+    if (tickFrameRef.current !== null) {
+      cancelAnimationFrame(tickFrameRef.current);
+      tickFrameRef.current = null;
+    }
+    previousTickTimestampRef.current = null;
+  };
+
+  const tick = (timestamp: number) => {
+    if (activePointerIdRef.current === null) {
+      stopTicking();
+      return;
+    }
+
+    const previousTimestamp = previousTickTimestampRef.current ?? timestamp;
+    previousTickTimestampRef.current = timestamp;
+
+    const event: TickEditorEvent = {
+      type: "tick",
+      timestamp,
+      elapsed: timestamp - previousTimestamp,
+    };
+    editor.dispatch(event);
+
+    tickFrameRef.current = requestAnimationFrame(tick);
+  };
+
+  const startTicking = () => {
+    if (tickFrameRef.current !== null) {
+      return;
+    }
+    previousTickTimestampRef.current = null;
+    tickFrameRef.current = requestAnimationFrame(tick);
+  };
+
+  useEffect(() => {
+    const container = containerRef.current;
+    if (!container) return;
+
+    const syncContainerOffset = (): ContainerOffset => {
+      const rect = container.getBoundingClientRect();
+      const nextOffset = {
+        left: rect.left,
+        top: rect.top,
+      };
+      containerOffsetRef.current = nextOffset;
+      return nextOffset;
+    };
+
+    const getContainerOffset = (): ContainerOffset => {
+      return containerOffsetRef.current ?? syncContainerOffset();
+    };
+
+    const handleDomEventGuard = (
+      name: CanvasDomEventGuardName,
+      event: Event,
+    ): boolean => {
+      return (
+        activeDomEventGuards.handle({
+          name,
+          event,
+          editor,
+          container,
+        }) === "handled"
+      );
+    };
+
+    const syncSurfaceCursorFromPointer = () => {
+      if (!shapeEditingSession) {
+        setSurfaceCursor(undefined);
+        return;
+      }
+
+      const point = lastPointerClientPointRef.current;
+      if (!point) {
+        setSurfaceCursor(undefined);
+        return;
+      }
+
+      setSurfaceCursor(
+        activeDomEventGuards.getCursor({
+          clientPoint: point,
+          element: document.elementFromPoint(point.x, point.y),
+          editor,
+          container,
+        }),
+      );
+    };
+
+    const dispatchPointer = (
+      name: PointerEditorEvent["name"],
+      event: PointerEventLike,
+    ) => {
+      const nextContainer = containerRef.current;
+      if (!nextContainer) {
+        return;
+      }
+      const screenPoint = getScreenPoint(event, getContainerOffset());
+      editor.dispatch(
+        createPointerEvent(
+          name,
+          event,
+          screenPoint,
+          editor.screenToPage(screenPoint),
+        ),
+      );
+    };
+
+    const syncViewportSize = () => {
+      editor.setViewportScreenSize({
+        w: container.clientWidth,
+        h: container.clientHeight,
+      });
+    };
+
+    syncContainerOffset();
+    syncViewportSize();
+
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (handleDomEventGuard("key_down", event)) {
+        return;
+      }
+
+      const shapeEditingSession = editor.getShapeEditingSession();
+      if (shapeEditingSession) {
+        if (!isEditableEventTarget(event.target)) {
+          if (editor.handleInteractionEvent(createKeyboardEvent("key_down", event))) {
+            event.preventDefault();
+            event.stopPropagation();
+            return;
+          }
+        }
+
+        if (
+          !isEditableEventTarget(event.target) &&
+          event.key === "Escape" &&
+          !event.altKey &&
+          !event.ctrlKey &&
+          !event.metaKey
+        ) {
+          editor.cancelEditing("user");
+        } else if (
+          !isEditableEventTarget(event.target) &&
+          event.key === "Enter" &&
+          (event.metaKey || event.ctrlKey)
+        ) {
+          editor.completeEditing("user");
+        }
+        return;
+      }
+
+      if (isEditableEventTarget(event.target)) {
+        return;
+      }
+      if ((event.metaKey || event.ctrlKey) && event.key.toLowerCase() === "z") {
+        event.preventDefault();
+      }
+      if (
+        event.altKey &&
+        !event.metaKey &&
+        !event.ctrlKey &&
+        !event.shiftKey &&
+        (event.key === "ArrowDown" || event.key === "ArrowUp")
+      ) {
+        event.preventDefault();
+      }
+      editor.dispatch(createKeyboardEvent("key_down", event));
+    };
+
+    const handleKeyUp = (event: KeyboardEvent) => {
+      if (handleDomEventGuard("key_up", event)) {
+        return;
+      }
+
+      if (editor.getShapeEditingSession()) {
+        return;
+      }
+      if (isEditableEventTarget(event.target)) {
+        return;
+      }
+      editor.dispatch(createKeyboardEvent("key_up", event));
+    };
+
+    const handleBlur = () => {
+      activePointerIdRef.current = null;
+      lastPointerMoveRef.current = null;
+      setIsPointerActive(false);
+      stopTicking();
+      editor.dispatch({ type: "cancel", reason: "blur" });
+    };
+
+    const handleWheel = (event: WheelEvent) => {
+      if (handleDomEventGuard("wheel", event)) {
+        return;
+      }
+
+      event.preventDefault();
+      const screenPoint = getScreenPoint(event, getContainerOffset());
+      const pagePoint = editor.screenToPage(screenPoint);
+      editor.dispatch(createWheelEvent(event, screenPoint, pagePoint));
+    };
+
+    const handlePointerMove = (event: PointerEvent) => {
+      lastPointerClientPointRef.current = {
+        x: event.clientX,
+        y: event.clientY,
+      };
+      syncSurfaceCursorFromPointer();
+      if (event.pointerId !== activePointerIdRef.current) {
+        const screenPoint = getScreenPoint(event, getContainerOffset());
+        editor.inputs.setCurrentPointerPoint({
+          timestamp: event.timeStamp,
+          screenPoint,
+          pagePoint: editor.screenToPage(screenPoint),
+          shiftKey: event.shiftKey,
+          altKey: event.altKey,
+          ctrlKey: event.ctrlKey,
+          metaKey: event.metaKey,
+          accelKey: event.metaKey || event.ctrlKey,
+        });
+        handleDomEventGuard("pointer_move", event);
+        return;
+      }
+
+      const nextSnapshot: PointerMoveSnapshot = {
+        clientX: event.clientX,
+        clientY: event.clientY,
+        buttons: event.buttons,
+        shiftKey: event.shiftKey,
+        altKey: event.altKey,
+        ctrlKey: event.ctrlKey,
+        metaKey: event.metaKey,
+      };
+      if (
+        arePointerMoveSnapshotsEqual(lastPointerMoveRef.current, nextSnapshot)
+      ) {
+        return;
+      }
+      lastPointerMoveRef.current = nextSnapshot;
+      dispatchPointer("pointer_move", event);
+    };
+
+    const finishPointerInteraction = (
+      name: Extract<
+        PointerEditorEvent["name"],
+        "pointer_up" | "pointer_cancel"
+      >,
+      event: PointerEvent,
+    ) => {
+      if (event.pointerId !== activePointerIdRef.current) {
+        return;
+      }
+
+      activePointerIdRef.current = null;
+      lastPointerMoveRef.current = null;
+      setIsPointerActive(false);
+      stopTicking();
+      if (container.hasPointerCapture(event.pointerId)) {
+        container.releasePointerCapture(event.pointerId);
+      }
+      dispatchPointer(name, event);
+    };
+
+    const handlePointerUp = (event: PointerEvent) => {
+      lastPointerClientPointRef.current = {
+        x: event.clientX,
+        y: event.clientY,
+      };
+      window.setTimeout(syncSurfaceCursorFromPointer, 0);
+      if (event.pointerId !== activePointerIdRef.current) {
+        handleDomEventGuard("pointer_up", event);
+        return;
+      }
+      finishPointerInteraction("pointer_up", event);
+    };
+
+    const handlePointerCancel = (event: PointerEvent) => {
+      lastPointerClientPointRef.current = {
+        x: event.clientX,
+        y: event.clientY,
+      };
+      syncSurfaceCursorFromPointer();
+      if (event.pointerId !== activePointerIdRef.current) {
+        handleDomEventGuard("pointer_cancel", event);
+        return;
+      }
+      finishPointerInteraction("pointer_cancel", event);
+    };
+
+    const resizeObserver = new ResizeObserver(() => {
+      syncContainerOffset();
+      syncViewportSize();
+    });
+
+    window.addEventListener("keydown", handleKeyDown);
+    window.addEventListener("keyup", handleKeyUp);
+    window.addEventListener("blur", handleBlur);
+    window.addEventListener("scroll", syncContainerOffset, {
+      passive: true,
+      capture: true,
+    });
+    window.addEventListener("pointermove", handlePointerMove, {
+      passive: true,
+    });
+    window.addEventListener("pointerup", handlePointerUp);
+    window.addEventListener("pointercancel", handlePointerCancel);
+    container.addEventListener("wheel", handleWheel, { passive: false });
+    resizeObserver.observe(container);
+    const syncCursorFrame = window.requestAnimationFrame(syncSurfaceCursorFromPointer);
+
+    return () => {
+      stopTicking();
+      setIsPointerActive(false);
+      window.cancelAnimationFrame(syncCursorFrame);
+      window.removeEventListener("keydown", handleKeyDown);
+      window.removeEventListener("keyup", handleKeyUp);
+      window.removeEventListener("blur", handleBlur);
+      window.removeEventListener("scroll", syncContainerOffset, true);
+      window.removeEventListener("pointermove", handlePointerMove);
+      window.removeEventListener("pointerup", handlePointerUp);
+      window.removeEventListener("pointercancel", handlePointerCancel);
+      container.removeEventListener("wheel", handleWheel);
+      resizeObserver.disconnect();
+    };
+  }, [activeDomEventGuards, editor, shapeEditingSession]);
+
+  return (
+    <div
+      ref={containerRef}
+      data-ui="canvas-surface"
+      className="ic-canvas relative h-full w-full overflow-hidden touch-none select-none"
+      tabIndex={0}
+      style={{
+        cursor:
+          surfaceCursor ??
+          getDefaultSurfaceCursor(
+            activeToolId,
+            isPointerActive,
+          ),
+      }}
+      onPointerDown={(event) => {
+        const container = containerRef.current;
+        if (!container) return;
+        lastPointerClientPointRef.current = {
+          x: event.clientX,
+          y: event.clientY,
+        };
+        if (event.button === 2) {
+          container.focus();
+          return;
+        }
+        if (
+          activeDomEventGuards.handle({
+            name: "pointer_down",
+            event: event.nativeEvent,
+            editor,
+            container,
+          }) === "handled"
+        ) {
+          return;
+        }
+        if (isEditableEventTarget(event.target)) {
+          return;
+        }
+        event.preventDefault();
+        container.focus();
+        container.setPointerCapture(event.pointerId);
+        const rect = container.getBoundingClientRect();
+        containerOffsetRef.current = {
+          left: rect.left,
+          top: rect.top,
+        };
+        activePointerIdRef.current = event.pointerId;
+        setIsPointerActive(true);
+        lastPointerMoveRef.current = null;
+        startTicking();
+        const screenPoint = getScreenPoint(event, containerOffsetRef.current);
+        editor.dispatch(
+          createPointerEvent(
+            "pointer_down",
+            event,
+            screenPoint,
+            editor.screenToPage(screenPoint),
+          ),
+        );
+      }}
+      onContextMenu={(event) => {
+        const container = containerRef.current;
+        if (
+          !container ||
+          !onContextMenuRequest ||
+          isEditableEventTarget(event.target)
+        ) {
+          return;
+        }
+        event.preventDefault();
+        event.stopPropagation();
+
+        if (editor.getShapeEditingSession()) {
+          return;
+        }
+
+        container.focus();
+
+        if (activePointerIdRef.current !== null) {
+          if (container.hasPointerCapture(activePointerIdRef.current)) {
+            container.releasePointerCapture(activePointerIdRef.current);
+          }
+          activePointerIdRef.current = null;
+          lastPointerMoveRef.current = null;
+          stopTicking();
+          editor.dispatch({ type: "cancel", reason: "pointer_cancel" });
+        }
+
+        const rect = container.getBoundingClientRect();
+        containerOffsetRef.current = {
+          left: rect.left,
+          top: rect.top,
+        };
+        const screenPoint = getScreenPoint(event, containerOffsetRef.current);
+        const pagePoint = editor.screenToPage(screenPoint);
+        const hitShape = editor.hitTestShape(pagePoint);
+        let snapshot: ContextMenuOpenSnapshot;
+
+        if (hitShape) {
+          const selectedShapeIds = editor.getSelectedShapeIds();
+          const isSelected = selectedShapeIds.includes(hitShape.id);
+          if (!isSelected) {
+            editor.commands.setSelectedShapeIds([hitShape.id], {
+              source: "user",
+            });
+          }
+          const nextSelectedShapeIds = isSelected
+            ? selectedShapeIds
+            : [hitShape.id];
+          snapshot = {
+            screenPoint,
+            pagePoint,
+            target: {
+              type: "selection",
+              selectedShapeIds: nextSelectedShapeIds,
+            },
+          };
+        } else {
+          snapshot = {
+            screenPoint,
+            pagePoint,
+            target: {
+              type: "canvas",
+            },
+          };
+        }
+
+        onContextMenuRequest?.(snapshot);
+      }}
+    >
+      <CanvasBackground />
+      <CanvasRendererRegistryContext.Provider value={activeRendererRegistry}>
+        <CanvasPluginProviders providers={canvasProviders}>
+          <ShapeLayer />
+          {canvasComponents?.map(({ id, component: Component }) => (
+            <Component key={id} />
+          ))}
+          <OverlayLayer />
+        </CanvasPluginProviders>
+      </CanvasRendererRegistryContext.Provider>
+    </div>
+  );
+}
+
+function CanvasPluginProviders({
+  children,
+  providers,
+}: {
+  children: ReactNode;
+  providers?: readonly CanvasPluginProvider[];
+}) {
+  return (
+    <>
+      {providers?.reduceRight<ReactNode>(
+        (inner, { id, component: Provider }) => (
+          <Provider key={id}>{inner}</Provider>
+        ),
+        children,
+      ) ?? children}
+    </>
+  );
+}