@yuzhouu/canvas-kit 0.1.2

package/_vendor/canvas-react/host/toolbarRegistry.ts

@@ -0,0 +1,100 @@
+import type {
+  LandCorePlugin,
+  ToolbarAction,
+  ToolbarContext,
+  ToolbarContribution,
+  ToolbarGroup,
+  ToolbarPlacement,
+  ToolbarSurface,
+} from "@land/canvas-core";
+
+export class CanvasToolbarRegistry {
+  private readonly actions = new Map<string, ToolbarAction>();
+  private readonly contributions = new Map<string, ToolbarContribution>();
+  private readonly hostActionIds = new Set<string>();
+  private readonly duplicateActionIds = new Set<string>();
+  private readonly duplicateContributionIds = new Set<string>();
+
+  registerAction(
+    action: ToolbarAction,
+    options: { replace?: boolean } = {},
+  ): void {
+    if (this.actions.has(action.id) && !options.replace) {
+      this.duplicateActionIds.add(action.id);
+      return;
+    }
+    this.actions.set(action.id, action);
+  }
+
+  registerHostAction(action: ToolbarAction): void {
+    this.hostActionIds.add(action.id);
+    this.registerAction(action, { replace: true });
+  }
+
+  registerContribution(
+    contribution: ToolbarContribution,
+    options: { replace?: boolean } = {},
+  ): void {
+    if (this.contributions.has(contribution.id) && !options.replace) {
+      this.duplicateContributionIds.add(contribution.id);
+      return;
+    }
+    this.contributions.set(contribution.id, contribution);
+  }
+
+  registerCorePlugins(plugins: readonly LandCorePlugin[]): void {
+    for (const plugin of plugins) {
+      for (const action of plugin.toolbarActions ?? []) {
+        this.registerAction(action);
+      }
+      for (const contribution of plugin.toolbarContributions ?? []) {
+        this.registerContribution(contribution);
+      }
+    }
+  }
+
+  getAction(actionId: string): ToolbarAction | null {
+    return this.actions.get(actionId) ?? null;
+  }
+
+  getHostActionIds(): string[] {
+    return [...this.hostActionIds];
+  }
+
+  getDuplicateActionIds(): string[] {
+    return [...this.duplicateActionIds];
+  }
+
+  getDuplicateContributionIds(): string[] {
+    return [...this.duplicateContributionIds];
+  }
+
+  getGroups(
+    surface: ToolbarSurface,
+    context: ToolbarContext,
+    options: { placement?: ToolbarPlacement } = {},
+  ): ToolbarGroup[] {
+    return [...this.contributions.values()]
+      .filter((contribution) => contribution.surface === surface)
+      .filter(
+        (contribution) =>
+          !options.placement ||
+          (contribution.placement ?? "context") === options.placement,
+      )
+      .filter((contribution) => contribution.when?.(context) ?? true)
+      .sort((a, b) => (a.order ?? 0) - (b.order ?? 0))
+      .flatMap((contribution) =>
+        [...contribution.getGroups(context)].sort(
+          (a, b) => (a.order ?? 0) - (b.order ?? 0),
+        ),
+      );
+  }
+}
+
+export function createCanvasToolbarRegistry(
+  plugins: readonly LandCorePlugin[] = [],
+): CanvasToolbarRegistry {
+  const nextRegistry = new CanvasToolbarRegistry();
+  nextRegistry.registerCorePlugins(plugins);
+  return nextRegistry;
+}

package/_vendor/canvas-react/index.ts

@@ -0,0 +1,3 @@
+export { Canvas, OverlayLayer, PageSpace, ShapeLayer } from "./components";
+export { useEditor, EditorContext } from "./hooks/useEditor";
+export { useValue } from "./hooks/useValue";

package/_vendor/plugin-arrow/ArrowBindingUtil.ts

@@ -0,0 +1,239 @@
+import {
+  BindingUtil,
+  type BindingRecord,
+  type BindingUtilEffect,
+  type Editor,
+  type ShapeRecord,
+} from "@land/canvas-core";
+import {
+  getArrowTerminalPagePoint,
+  getOppositeArrowTerminal,
+  setArrowTerminalPagePoint,
+} from "./arrowGeometry";
+import { resolveArrowBindingPagePoint } from "./arrowTerminalBindingResolver";
+import {
+  isArrowBindingRecord,
+  isArrowShapeRecord,
+  type ArrowBindingRecord,
+  type ArrowShapeRecord,
+  type ArrowTerminal,
+} from "./types";
+
+function clampNumber(value: unknown, fallback: number): number {
+  return typeof value === "number" && Number.isFinite(value) ? value : fallback;
+}
+
+function createShapeEffect(
+  shape: ShapeRecord | null,
+): BindingUtilEffect | void {
+  if (!shape) {
+    return;
+  }
+  return { shapes: [shape] };
+}
+
+export class ArrowBindingUtil extends BindingUtil<ArrowBindingRecord> {
+  readonly type = "arrow" as const;
+
+  getDefaultProps(): ArrowBindingRecord["props"] {
+    return {
+      terminal: "start",
+      normalizedAnchor: { x: 0.5, y: 0.5 },
+    };
+  }
+
+  validateProps(props: unknown): ArrowBindingRecord["props"] {
+    const candidate =
+      props && typeof props === "object"
+        ? (props as Partial<ArrowBindingRecord["props"]>)
+        : {};
+    const fallback = this.getDefaultProps();
+    const normalizedAnchor =
+      candidate.normalizedAnchor &&
+      typeof candidate.normalizedAnchor === "object"
+        ? candidate.normalizedAnchor
+        : fallback.normalizedAnchor;
+
+    return {
+      terminal: candidate.terminal === "end" ? "end" : fallback.terminal,
+      normalizedAnchor: {
+        x: Math.min(
+          1,
+          Math.max(
+            0,
+            clampNumber(normalizedAnchor.x, fallback.normalizedAnchor.x),
+          ),
+        ),
+        y: Math.min(
+          1,
+          Math.max(
+            0,
+            clampNumber(normalizedAnchor.y, fallback.normalizedAnchor.y),
+          ),
+        ),
+      },
+    };
+  }
+
+  canBind(
+    _editor: Editor,
+    _binding: ArrowBindingRecord,
+    context: { fromShape: ShapeRecord; toShape: ShapeRecord },
+  ): boolean {
+    return (
+      isArrowShapeRecord(context.fromShape) &&
+      !isArrowShapeRecord(context.toShape)
+    );
+  }
+
+  getExclusiveBindingKey(binding: ArrowBindingRecord): string {
+    return `${binding.fromId}:${binding.props.terminal}`;
+  }
+
+  onBindingCreate(
+    editor: Editor,
+    binding: ArrowBindingRecord,
+  ): BindingUtilEffect | void {
+    return createShapeEffect(this.syncArrowTerminal(editor, binding));
+  }
+
+  onBindingUpdate(
+    editor: Editor,
+    _before: ArrowBindingRecord,
+    after: ArrowBindingRecord,
+  ): BindingUtilEffect | void {
+    return createShapeEffect(this.syncArrowTerminal(editor, after));
+  }
+
+  onBindingLoad(
+    editor: Editor,
+    binding: ArrowBindingRecord,
+  ): BindingUtilEffect | void {
+    return createShapeEffect(this.syncArrowTerminal(editor, binding));
+  }
+
+  getGeometryDependentShapeIds(
+    _editor: Editor,
+    binding: ArrowBindingRecord,
+    context: { role: "from" | "to" },
+  ): ShapeRecord["id"][] {
+    return context.role === "to" ? [binding.fromId] : [];
+  }
+
+  onAfterShapeChange(
+    editor: Editor,
+    binding: ArrowBindingRecord,
+    _context: { role: "from" | "to" },
+  ): BindingUtilEffect | void {
+    return createShapeEffect(this.syncArrowTerminal(editor, binding));
+  }
+
+  onBeforeDeleteShape(
+    editor: Editor,
+    binding: ArrowBindingRecord,
+    context: { role: "from" | "to" },
+  ): BindingUtilEffect | void {
+    if (context.role === "from") {
+      return { deleteBindingIds: [binding.id] };
+    }
+
+    const arrow = editor.getShape(binding.fromId);
+    if (!isArrowShapeRecord(arrow)) {
+      return { deleteBindingIds: [binding.id] };
+    }
+
+    const terminalPoint = this.resolveTerminalPagePoint(editor, binding);
+    const nextArrow = terminalPoint
+      ? setArrowTerminalPagePoint(arrow, binding.props.terminal, terminalPoint)
+      : arrow;
+
+    return {
+      shapes: [nextArrow],
+      deleteBindingIds: [binding.id],
+    };
+  }
+
+  onBeforeDeleteBinding(
+    editor: Editor,
+    binding: ArrowBindingRecord,
+  ): BindingUtilEffect | void {
+    const arrow = editor.getShape(binding.fromId);
+    if (!isArrowShapeRecord(arrow)) {
+      return { deleteBindingIds: [binding.id] };
+    }
+
+    const terminalPoint = this.resolveTerminalPagePoint(editor, binding);
+    return {
+      shapes: [
+        terminalPoint
+          ? setArrowTerminalPagePoint(
+              arrow,
+              binding.props.terminal,
+              terminalPoint,
+            )
+          : arrow,
+      ],
+      deleteBindingIds: [binding.id],
+    };
+  }
+
+  private syncArrowTerminal(
+    editor: Editor,
+    binding: BindingRecord,
+  ): ArrowShapeRecord | null {
+    if (!isArrowBindingRecord(binding)) {
+      return null;
+    }
+
+    const arrow = editor.getShape(binding.fromId);
+    if (!isArrowShapeRecord(arrow)) {
+      return null;
+    }
+
+    const terminalPoint = this.resolveTerminalPagePoint(editor, binding);
+    if (!terminalPoint) {
+      return null;
+    }
+
+    const currentTerminalPoint = getArrowTerminalPagePoint(
+      arrow,
+      binding.props.terminal,
+    );
+    if (currentTerminalPoint.dist(terminalPoint) < 1e-6) {
+      return null;
+    }
+
+    return setArrowTerminalPagePoint(
+      arrow,
+      binding.props.terminal,
+      terminalPoint,
+    );
+  }
+
+  private resolveTerminalPagePoint(editor: Editor, binding: BindingRecord) {
+    if (!isArrowBindingRecord(binding)) {
+      return null;
+    }
+
+    const arrow = editor.getShape(binding.fromId);
+    const target = editor.getShape(binding.toId);
+    if (!isArrowShapeRecord(arrow) || !target || isArrowShapeRecord(target)) {
+      return null;
+    }
+
+    const oppositeTerminal = getOppositeArrowTerminal(
+      binding.props.terminal as ArrowTerminal,
+    );
+    const oppositePagePoint = getArrowTerminalPagePoint(
+      arrow,
+      oppositeTerminal,
+    );
+
+    return resolveArrowBindingPagePoint(
+      editor,
+      target,
+      binding.props.normalizedAnchor,
+      oppositePagePoint,
+    );
+  }
+}

package/_vendor/plugin-arrow/ArrowShapeUtil.ts

@@ -0,0 +1,311 @@
+import {
+  Box,
+  ShapeUtil,
+  Vec,
+  type ShapeBrushWrapInput,
+  type ShapeSelectionHandleAnchorInput,
+  type ShapeSelectionHandleAnchors,
+  type ShapeLineSegmentHitTestInput,
+  type ShapeSelectionOverlayInfo,
+  type ShapeSelectionPagePointsInput,
+  type ShapeSelectionPagePoints,
+  type ShapeUpdate,
+} from "@land/canvas-core";
+import {
+  getArrowInfo,
+  getArrowHitDistance,
+  getArrowLocalInfo,
+  getArrowTerminalPagePoint,
+  withArrowPagePoints,
+} from "./arrowGeometry";
+import type { ArrowShapeProps, ArrowShapeRecord } from "./types";
+
+function normalizeArrowPoint(
+  point: unknown,
+  fallback: ArrowShapeProps["start"],
+): ArrowShapeProps["start"] {
+  const candidate =
+    point && typeof point === "object"
+      ? (point as Partial<ArrowShapeProps["start"]>)
+      : undefined;
+
+  return {
+    x: clampNumber(candidate?.x, fallback.x),
+    y: clampNumber(candidate?.y, fallback.y),
+  };
+}
+
+function clampNumber(value: unknown, fallback: number): number {
+  return typeof value === "number" && Number.isFinite(value) ? value : fallback;
+}
+
+function distanceToSegment(point: Vec, start: Vec, end: Vec): number {
+  const segment = end.sub(start);
+  const lengthSquared = segment.len2();
+  if (lengthSquared === 0) {
+    return point.dist(start);
+  }
+
+  const offset = point.sub(start);
+  const t = Math.max(
+    0,
+    Math.min(1, (offset.x * segment.x + offset.y * segment.y) / lengthSquared),
+  );
+  return point.dist(start.add(segment.mul(t)));
+}
+
+function doSegmentsIntersect(
+  firstStart: Vec,
+  firstEnd: Vec,
+  secondStart: Vec,
+  secondEnd: Vec,
+): boolean {
+  const first = firstEnd.sub(firstStart);
+  const second = secondEnd.sub(secondStart);
+  const denominator = first.x * second.y - first.y * second.x;
+  if (Math.abs(denominator) < 1e-8) {
+    return false;
+  }
+
+  const delta = secondStart.sub(firstStart);
+  const t = (delta.x * second.y - delta.y * second.x) / denominator;
+  const u = (delta.x * first.y - delta.y * first.x) / denominator;
+
+  return t >= 0 && t <= 1 && u >= 0 && u <= 1;
+}
+
+function distanceBetweenSegments(
+  firstStart: Vec,
+  firstEnd: Vec,
+  secondStart: Vec,
+  secondEnd: Vec,
+): number {
+  if (doSegmentsIntersect(firstStart, firstEnd, secondStart, secondEnd)) {
+    return 0;
+  }
+
+  return Math.min(
+    distanceToSegment(firstStart, secondStart, secondEnd),
+    distanceToSegment(firstEnd, secondStart, secondEnd),
+    distanceToSegment(secondStart, firstStart, firstEnd),
+    distanceToSegment(secondEnd, firstStart, firstEnd),
+  );
+}
+
+export class ArrowShapeUtil extends ShapeUtil<ArrowShapeRecord> {
+  readonly type = "arrow" as const;
+
+  getDefaultProps(): ArrowShapeProps {
+    return {
+      w: 160,
+      h: 48,
+      start: { x: 8, y: 24 },
+      end: { x: 152, y: 24 },
+      bend: 0,
+      stroke: "#334155",
+      strokeWidth: 2,
+      headStart: "none",
+      headEnd: "arrow",
+    };
+  }
+
+  validateProps(props: unknown): ArrowShapeProps {
+    const candidate =
+      props && typeof props === "object"
+        ? (props as Partial<ArrowShapeProps>)
+        : {};
+    const fallback = this.getDefaultProps();
+    const w = Math.max(1, clampNumber(candidate.w, fallback.w));
+    const h = Math.max(1, clampNumber(candidate.h, fallback.h));
+
+    return {
+      w,
+      h,
+      start: normalizeArrowPoint(candidate.start, fallback.start),
+      end: normalizeArrowPoint(candidate.end, fallback.end),
+      bend: clampNumber(candidate.bend, fallback.bend),
+      stroke:
+        typeof candidate.stroke === "string"
+          ? candidate.stroke
+          : fallback.stroke,
+      strokeWidth: Math.max(
+        1,
+        clampNumber(candidate.strokeWidth, fallback.strokeWidth),
+      ),
+      headStart: candidate.headStart === "arrow" ? "arrow" : "none",
+      headEnd: candidate.headEnd === "none" ? "none" : "arrow",
+    };
+  }
+
+  getBounds(shape: ArrowShapeRecord): Box {
+    const arrowInfo = getArrowInfo(shape);
+    const padding = Math.max(6, shape.props.strokeWidth * 0.5 + 4);
+    return arrowInfo.bounds.expand(padding);
+  }
+
+  getLocalBounds(shape: ArrowShapeRecord): Box {
+    return new Box(0, 0, shape.props.w, shape.props.h);
+  }
+
+  getExportBounds(shape: ArrowShapeRecord): Box {
+    const arrowInfo = getArrowLocalInfo(shape);
+    const padding = Math.max(6, shape.props.strokeWidth * 0.5 + 4);
+    return arrowInfo.bounds.expand(padding);
+  }
+
+  repairLoadedShape(shape: ArrowShapeRecord): ArrowShapeRecord | null {
+    if (shape.rotation === 0 && shape.scaleX === 1 && shape.scaleY === 1) {
+      return null;
+    }
+
+    return withArrowPagePoints(
+      shape,
+      getArrowTerminalPagePoint(shape, "start"),
+      getArrowTerminalPagePoint(shape, "end"),
+    );
+  }
+
+  updateSelectionPagePoints(
+    shape: ArrowShapeRecord,
+    input: ShapeSelectionPagePointsInput,
+  ): ShapeUpdate {
+    const nextArrow = withArrowPagePoints(
+      shape,
+      input.pagePoints[0],
+      input.pagePoints[1],
+    );
+    return {
+      id: shape.id,
+      x: nextArrow.x,
+      y: nextArrow.y,
+      rotation: nextArrow.rotation,
+      scaleX: nextArrow.scaleX,
+      scaleY: nextArrow.scaleY,
+      props: {
+        w: nextArrow.props.w,
+        h: nextArrow.props.h,
+        start: nextArrow.props.start,
+        end: nextArrow.props.end,
+      },
+    };
+  }
+
+  isWrappedByBrush(
+    shape: ArrowShapeRecord,
+    input: ShapeBrushWrapInput,
+  ): boolean {
+    return (
+      input.brushBounds.containsPoint(
+        getArrowTerminalPagePoint(shape, "start"),
+      ) &&
+      input.brushBounds.containsPoint(getArrowTerminalPagePoint(shape, "end"))
+    );
+  }
+
+  getSelectionPagePoints(shape: ArrowShapeRecord): ShapeSelectionPagePoints {
+    return [
+      getArrowTerminalPagePoint(shape, "start"),
+      getArrowTerminalPagePoint(shape, "end"),
+    ];
+  }
+
+  contributesToSelectionFrame(_shape: ArrowShapeRecord): boolean {
+    return false;
+  }
+
+  canStartTranslateFromSelectionBounds(_shape: ArrowShapeRecord): boolean {
+    return false;
+  }
+
+  getSelectionHandleAnchors(
+    shape: ArrowShapeRecord,
+    input: ShapeSelectionHandleAnchorInput,
+  ): ShapeSelectionHandleAnchors {
+    if (!input.isOnlySelected) {
+      return {
+        terminalHandleAnchors: [],
+        middleHandleAnchors: [],
+      };
+    }
+
+    const arrowInfo = getArrowInfo(shape);
+    return {
+      terminalHandleAnchors: [
+        {
+          kind: "arrow_terminal",
+          terminal: "start",
+          point: arrowInfo.start.point,
+        },
+        {
+          kind: "arrow_terminal",
+          terminal: "end",
+          point: arrowInfo.end.point,
+        },
+      ],
+      middleHandleAnchors: arrowInfo.middle
+        ? [
+            {
+              kind: "arrow_middle",
+              point: arrowInfo.middle,
+            },
+          ]
+        : [],
+    };
+  }
+
+  getSelectionOverlayInfo(shape: ArrowShapeRecord): ShapeSelectionOverlayInfo {
+    const arrowInfo = getArrowInfo(shape);
+    return {
+      usesSelectionPathOverlay: true,
+      startPagePoint: arrowInfo.start.point,
+      endPagePoint: arrowInfo.end.point,
+      middlePagePoint: arrowInfo.middle,
+      path: arrowInfo.path,
+    };
+  }
+
+  hitTest(shape: ArrowShapeRecord, point: Vec): boolean {
+    const arrowInfo = getArrowInfo(shape);
+    return (
+      getArrowHitDistance(arrowInfo, point) <=
+      Math.max(8, shape.props.strokeWidth + 4)
+    );
+  }
+
+  hitTestLineSegment(
+    shape: ArrowShapeRecord,
+    input: ShapeLineSegmentHitTestInput,
+  ): boolean {
+    const arrowInfo = getArrowInfo(shape);
+    const margin = Math.max(8, shape.props.strokeWidth + 4, input.margin);
+
+    if (arrowInfo.points.length === 1) {
+      return (
+        distanceToSegment(
+          arrowInfo.points[0]!,
+          input.positionedStart,
+          input.positionedEnd,
+        ) <= margin
+      );
+    }
+
+    for (let index = 0; index < arrowInfo.points.length - 1; index += 1) {
+      const start = arrowInfo.points[index];
+      const end = arrowInfo.points[index + 1];
+      if (
+        start &&
+        end &&
+        distanceBetweenSegments(
+          input.positionedStart,
+          input.positionedEnd,
+          start,
+          end,
+        ) <= margin
+      ) {
+        return true;
+      }
+    }
+
+    return false;
+  }
+}