@yuzhouu/canvas-kit 0.1.2 → 0.1.4

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

@@ -1,796 +0,0 @@
-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}
-    </>
-  );
-}