@yuzhouu/canvas-kit 0.1.2

package/_vendor/plugin-arrow/ArrowTool.ts

@@ -0,0 +1,208 @@
+import {
+  StateNode,
+  Vec,
+  getEdgeScrollDelta,
+  reparentShapeToContainingParent,
+  type Editor,
+  type PointerEditorEvent,
+  type ShapeId,
+  type TickEditorEvent,
+} from "@land/canvas-core";
+import {
+  applyResolvedArrowTerminalBinding,
+  createArrow,
+} from "./arrowTerminalCommands";
+import {
+  resolveArrowTerminalBindingAtPoint,
+  resolveArrowTerminalBindingAtStartPoint,
+  resolveArrowTerminalBindingForArrow,
+} from "./arrowTerminalBindingResolver";
+import { isArrowShapeRecord, type ArrowShapeProps } from "./types";
+
+interface CreatingArrowInfo {
+  startPagePoint: Vec;
+  currentPagePoint: Vec;
+  shapeId: ShapeId | null;
+  startBinding: ReturnType<typeof resolveArrowTerminalBindingAtPoint>["binding"];
+  props: ArrowShapeProps;
+}
+
+const ARROW_CREATE_HISTORY_MARK = "arrow.create";
+const DRAG_CREATE_THRESHOLD = 4;
+
+export class ArrowTool extends StateNode {
+  constructor(editor: Editor) {
+    super(editor, "arrow");
+    this.initial = "idle";
+    this.addChild(new ArrowIdleState(editor, this));
+    this.addChild(new CreatingArrowState(editor, this));
+  }
+}
+
+class ArrowIdleState extends StateNode {
+  constructor(editor: Editor, parent: StateNode) {
+    super(editor, "idle", parent);
+  }
+
+  protected onEnter(): void {
+    this.editor.clearSelectionTransients();
+  }
+
+  protected onPointerDown(event: PointerEditorEvent): void {
+    const defaults = this.editor.getDefaultShapeProps<ArrowShapeProps>("arrow");
+    const startBinding = resolveArrowTerminalBindingAtStartPoint(this.editor, {
+      terminal: "start",
+      rawPagePoint: event.pagePoint,
+      ignoreTargets: event.accelKey,
+    });
+
+    this.transition("creating", {
+      startPagePoint: startBinding.pagePoint,
+      currentPagePoint: startBinding.pagePoint.clone(),
+      shapeId: null,
+      startBinding: startBinding.binding,
+      props: defaults,
+    } satisfies CreatingArrowInfo);
+  }
+}
+
+class CreatingArrowState extends StateNode {
+  private info: CreatingArrowInfo | null = null;
+
+  constructor(editor: Editor, parent: StateNode) {
+    super(editor, "creating", parent);
+  }
+
+  protected onEnter(info?: unknown): void {
+    this.info = info as CreatingArrowInfo;
+    if (!this.info) {
+      return;
+    }
+
+    this.editor.history.mark(ARROW_CREATE_HISTORY_MARK);
+    const created = createArrow(
+      this.editor,
+      {
+        startPagePoint: this.info.startPagePoint,
+        endPagePoint: this.info.startPagePoint,
+        startBinding: this.info.startBinding,
+        props: {
+          stroke: this.info.props.stroke,
+          strokeWidth: this.info.props.strokeWidth,
+          headStart: this.info.props.headStart,
+          headEnd: this.info.props.headEnd,
+        },
+      },
+      "user",
+    );
+    this.info.shapeId = created.id;
+
+    this.editor.commands.setSelectedShapeIds([created.id], {
+      source: "system",
+    });
+    this.editor.setBindingPreview(null);
+  }
+
+  protected onPointerMove(event: PointerEditorEvent): void {
+    this.updateShape(event.pagePoint);
+  }
+
+  protected onTick(event: TickEditorEvent): void {
+    if (!this.info) {
+      return;
+    }
+
+    const inputs = this.editor.inputs.state.get();
+    if (
+      inputs.dragPhase !== "dragging" ||
+      !inputs.currentPagePoint ||
+      !inputs.currentScreenPoint
+    ) {
+      return;
+    }
+
+    const edgeScrollDelta = getEdgeScrollDelta(
+      inputs.currentScreenPoint,
+      this.editor.viewportScreenSizeSignal.get(),
+      event.elapsed,
+    );
+    if (edgeScrollDelta.x === 0 && edgeScrollDelta.y === 0) {
+      return;
+    }
+
+    this.editor.panCamera(edgeScrollDelta);
+    this.updateShape(this.editor.screenToPage(inputs.currentScreenPoint));
+  }
+
+  protected onPointerUp(event: PointerEditorEvent): void {
+    if (!this.info) {
+      this.transition("idle");
+      return;
+    }
+
+    this.updateShape(event.pagePoint);
+
+    if (
+      !this.info.shapeId ||
+      this.info.startPagePoint.dist(this.info.currentPagePoint) <
+        DRAG_CREATE_THRESHOLD
+    ) {
+      this.editor.history.bailToMark(ARROW_CREATE_HISTORY_MARK);
+      this.transition("idle");
+      return;
+    }
+
+    reparentShapeToContainingParent(this.editor, this.info.shapeId, {
+      source: "user",
+    });
+    this.editor.history.squashToMark(ARROW_CREATE_HISTORY_MARK);
+
+    if (this.editor.isToolLocked()) {
+      this.transition("idle");
+      return;
+    }
+
+    this.editor.commands.setActiveTool("select", { source: "system" });
+  }
+
+  protected onCancel(): void {
+    this.editor.history.bailToMark(ARROW_CREATE_HISTORY_MARK);
+    this.transition("idle");
+  }
+
+  protected onExit(): void {
+    this.info = null;
+  }
+
+  private updateShape(rawPagePoint: Vec): void {
+    if (!this.info) {
+      return;
+    }
+
+    this.info.currentPagePoint = rawPagePoint.clone();
+    const shapeId = this.info.shapeId;
+    const arrow = shapeId ? this.editor.getShape(shapeId) : null;
+    const endBinding =
+      isArrowShapeRecord(arrow)
+        ? resolveArrowTerminalBindingForArrow(this.editor, {
+            arrow,
+            terminal: "end",
+            rawPagePoint,
+            ignoreTargets: this.editor.inputs.state.get().accelKey,
+          })
+        : resolveArrowTerminalBindingAtPoint(this.editor, {
+            terminal: "end",
+            rawPagePoint,
+            oppositePagePoint: this.info.startPagePoint,
+            ignoreTargets: this.editor.inputs.state.get().accelKey,
+          });
+
+    applyResolvedArrowTerminalBinding(
+      this.editor,
+      shapeId,
+      "end",
+      endBinding,
+      "user",
+    );
+  }
+}

package/_vendor/plugin-arrow/arrowGeometry.ts

@@ -0,0 +1,441 @@
+import { Box, Vec } from "@land/canvas-core";
+import type { ArrowShapeProps, ArrowShapeRecord, ArrowTerminal } from "./types";
+
+const ARROW_CURVE_SAMPLE_COUNT = 24;
+const ARROW_CURVE_EPSILON = 1e-6;
+const MIN_ARROW_AXIS = 1;
+const PI2 = Math.PI * 2;
+
+export interface ArrowInfoTerminal {
+  terminal: ArrowTerminal;
+  point: Vec;
+  handle: Vec;
+}
+
+export interface StraightArrowInfo {
+  type: "straight";
+  start: ArrowInfoTerminal;
+  end: ArrowInfoTerminal;
+  middle: Vec;
+  arc: null;
+  bend: number;
+  points: Vec[];
+  bounds: Box;
+  path: string;
+}
+
+export interface CurvedArrowInfo {
+  type: "curved";
+  start: ArrowInfoTerminal;
+  end: ArrowInfoTerminal;
+  middle: Vec;
+  arc: ArrowArcInfo;
+  bend: number;
+  points: Vec[];
+  bounds: Box;
+  path: string;
+}
+
+export type ArrowInfo = StraightArrowInfo | CurvedArrowInfo;
+
+export interface ArrowArcInfo {
+  center: Vec;
+  radius: number;
+  largeArcFlag: 0 | 1;
+  sweepFlag: 0 | 1;
+  size: number;
+  length: number;
+}
+
+export function getArrowTerminalPagePoint(
+  shape: ArrowShapeRecord,
+  terminal: ArrowTerminal,
+): Vec {
+  const point = terminal === "start" ? shape.props.start : shape.props.end;
+  return transformArrowPoint(shape, new Vec(shape.x + point.x, shape.y + point.y));
+}
+
+export function getOppositeArrowTerminal(
+  terminal: ArrowTerminal,
+): ArrowTerminal {
+  return terminal === "start" ? "end" : "start";
+}
+
+export function withArrowPagePoints(
+  shape: ArrowShapeRecord,
+  start: Vec,
+  end: Vec,
+): ArrowShapeRecord {
+  const normalized = normalizeArrowShapePoints(start, end);
+  return {
+    ...shape,
+    x: normalized.x,
+    y: normalized.y,
+    rotation: 0,
+    scaleX: 1,
+    scaleY: 1,
+    props: {
+      ...shape.props,
+      w: normalized.w,
+      h: normalized.h,
+      start: normalized.start,
+      end: normalized.end,
+      bend: shape.props.bend,
+    },
+  };
+}
+
+export function setArrowTerminalPagePoint(
+  shape: ArrowShapeRecord,
+  terminal: ArrowTerminal,
+  pagePoint: Vec,
+): ArrowShapeRecord {
+  const start =
+    terminal === "start" ? pagePoint : getArrowTerminalPagePoint(shape, "start");
+  const end =
+    terminal === "end" ? pagePoint : getArrowTerminalPagePoint(shape, "end");
+  return withArrowPagePoints(shape, start, end);
+}
+
+export function normalizeArrowShapePoints(
+  start: Vec,
+  end: Vec,
+): Pick<ArrowShapeProps, "w" | "h" | "start" | "end"> & {
+  x: number;
+  y: number;
+} {
+  const normalizedX = normalizeAxis(start.x, end.x);
+  const normalizedY = normalizeAxis(start.y, end.y);
+
+  return {
+    x: normalizedX.origin,
+    y: normalizedY.origin,
+    w: normalizedX.size,
+    h: normalizedY.size,
+    start: {
+      x: normalizedX.startOffset,
+      y: normalizedY.startOffset,
+    },
+    end: {
+      x: normalizedX.endOffset,
+      y: normalizedY.endOffset,
+    },
+  };
+}
+
+export function getArrowInfo(shape: ArrowShapeRecord): ArrowInfo {
+  return getArrowInfoFromPoints(
+    new Vec(shape.props.start.x, shape.props.start.y).add(
+      new Vec(shape.x, shape.y),
+    ),
+    new Vec(shape.props.end.x, shape.props.end.y).add(
+      new Vec(shape.x, shape.y),
+    ),
+    shape.props.bend,
+  );
+}
+
+export function getArrowLocalInfo(shape: ArrowShapeRecord): ArrowInfo {
+  return getArrowInfoFromPoints(
+    new Vec(shape.props.start.x, shape.props.start.y),
+    new Vec(shape.props.end.x, shape.props.end.y),
+    shape.props.bend,
+  );
+}
+
+export function getArrowBendFromMiddlePagePoint(
+  start: Vec,
+  end: Vec,
+  point: Vec,
+): number {
+  const middle = Vec.Med(start, end);
+  const direction = end.sub(start);
+  if (direction.len() < 1e-6) {
+    return 0;
+  }
+
+  const perpendicular = direction.per().normalize();
+  const offset = point.sub(middle);
+  return -dot(offset, perpendicular);
+}
+
+export function getArrowHitDistance(info: ArrowInfo, point: Vec): number {
+  let minDistance = Infinity;
+  for (let index = 0; index < info.points.length - 1; index++) {
+    minDistance = Math.min(
+      minDistance,
+      getDistanceToSegment(point, info.points[index]!, info.points[index + 1]!),
+    );
+  }
+
+  return Number.isFinite(minDistance)
+    ? minDistance
+    : point.dist(info.start.point);
+}
+
+function clampFinite(value: unknown, fallback: number): number {
+  return typeof value === "number" && Number.isFinite(value) ? value : fallback;
+}
+
+function normalizeAxis(
+  start: number,
+  end: number,
+): {
+  origin: number;
+  size: number;
+  startOffset: number;
+  endOffset: number;
+} {
+  const min = Math.min(start, end);
+  const max = Math.max(start, end);
+  if (Math.abs(max - min) < 1e-6) {
+    return {
+      origin: min - MIN_ARROW_AXIS / 2,
+      size: MIN_ARROW_AXIS,
+      startOffset: MIN_ARROW_AXIS / 2,
+      endOffset: MIN_ARROW_AXIS / 2,
+    };
+  }
+
+  return {
+    origin: min,
+    size: max - min,
+    startOffset: start - min,
+    endOffset: end - min,
+  };
+}
+
+function transformArrowPoint(shape: ArrowShapeRecord, point: Vec): Vec {
+  if (shape.rotation === 0 && shape.scaleX === 1 && shape.scaleY === 1) {
+    return point;
+  }
+
+  const center = new Vec(
+    shape.x + shape.props.w / 2,
+    shape.y + shape.props.h / 2,
+  );
+  const offset = point.sub(center);
+  return center.add(
+    new Vec(offset.x * shape.scaleX, offset.y * shape.scaleY).rot(
+      shape.rotation,
+    ),
+  );
+}
+
+function formatPathNumber(value: number): string {
+  if (!Number.isFinite(value)) {
+    return "0";
+  }
+  return Number(value.toFixed(3)).toString();
+}
+
+function normalizeArrowBend(value: unknown, fallback = 0): number {
+  return clampFinite(value, fallback);
+}
+
+function getArrowInfoFromPoints(
+  start: Vec,
+  end: Vec,
+  rawBend: unknown,
+): ArrowInfo {
+  const bend = normalizeArrowBend(rawBend, 0);
+  const middle = getArrowMiddlePagePoint(start, end, bend);
+  const arc = getArrowArcInfo(start, middle, end);
+  const isStraight =
+    Math.abs(bend) < ARROW_CURVE_EPSILON ||
+    arc === null ||
+    arc.length === 0 ||
+    !Number.isFinite(arc.length) ||
+    !Number.isFinite(arc.radius);
+  const points = isStraight
+    ? [start, end]
+    : sampleArcCurve(start, end, arc, ARROW_CURVE_SAMPLE_COUNT);
+  const path =
+    isStraight || arc === null
+      ? `M ${formatPathNumber(start.x)} ${formatPathNumber(
+          start.y,
+        )} L ${formatPathNumber(end.x)} ${formatPathNumber(end.y)}`
+      : `M ${formatPathNumber(start.x)} ${formatPathNumber(
+          start.y,
+        )} A ${formatPathNumber(arc.radius)} ${formatPathNumber(
+          arc.radius,
+        )} 0 ${arc.largeArcFlag} ${arc.sweepFlag} ${formatPathNumber(
+          end.x,
+        )} ${formatPathNumber(end.y)}`;
+
+  const sharedBase = {
+    start: {
+      terminal: "start" as const,
+      point: start,
+      handle: start,
+    },
+    end: {
+      terminal: "end" as const,
+      point: end,
+      handle: end,
+    },
+    middle,
+    bend,
+    points,
+    bounds: Box.FromPoints(points),
+    path,
+  };
+
+  return isStraight
+    ? {
+        type: "straight",
+        ...sharedBase,
+        arc: null,
+      }
+    : {
+        type: "curved",
+        ...sharedBase,
+        arc: arc!,
+      };
+}
+
+function getArrowMiddlePagePoint(
+  start: Vec,
+  end: Vec,
+  bend: number,
+): Vec {
+  const middle = Vec.Med(start, end);
+  const direction = end.sub(start);
+  const perpendicular = direction.len()
+    ? direction.per().normalize()
+    : new Vec(0, -1);
+
+  return middle.add(perpendicular.mul(-bend));
+}
+
+function sampleArcCurve(
+  start: Vec,
+  end: Vec,
+  arc: ArrowArcInfo,
+  sampleCount: number,
+): Vec[] {
+  const points: Vec[] = [];
+  const startAngle = Vec.Angle(arc.center, start);
+  const measure = getArcMeasure(
+    startAngle,
+    Vec.Angle(arc.center, end),
+    arc.sweepFlag,
+    arc.largeArcFlag,
+  );
+  for (let index = 0; index <= sampleCount; index++) {
+    const t = index / sampleCount;
+    points.push(getPointOnCircle(arc.center, arc.radius, startAngle + measure * t));
+  }
+
+  return points;
+}
+
+function getArrowArcInfo(start: Vec, middle: Vec, end: Vec): ArrowArcInfo | null {
+  const center = getCircleCenterFromThreePoints(start, middle, end);
+  if (!center) {
+    return null;
+  }
+
+  const radius = center.dist(start);
+  if (radius < ARROW_CURVE_EPSILON) {
+    return null;
+  }
+
+  const sweepFlag = isClockwise(start, middle, end) ? 1 : 0;
+  const theta = getInscribedArcMeasure(start, middle, end);
+  if (!Number.isFinite(theta)) {
+    return null;
+  }
+  const largeArcFlag = Math.PI > theta ? 1 : 0;
+  const size = (PI2 - theta) * (sweepFlag ? 1 : -1);
+
+  return {
+    center,
+    radius,
+    largeArcFlag,
+    sweepFlag,
+    size,
+    length: Math.abs(size * radius),
+  };
+}
+
+function getInscribedArcMeasure(start: Vec, middle: Vec, end: Vec): number {
+  const ab = start.dist(end);
+  const bc = end.dist(middle);
+  const ca = middle.dist(start);
+  if (bc < ARROW_CURVE_EPSILON || ca < ARROW_CURVE_EPSILON) {
+    return 0;
+  }
+
+  const ratio = (bc * bc + ca * ca - ab * ab) / (2 * bc * ca);
+  return Math.acos(Math.max(-1, Math.min(1, ratio))) * 2;
+}
+
+function getCircleCenterFromThreePoints(
+  a: Vec,
+  b: Vec,
+  c: Vec,
+): Vec | null {
+  const denominator =
+    -2 *
+    (a.x * (b.y - c.y) -
+      a.y * (b.x - c.x) +
+      b.x * c.y -
+      c.x * b.y);
+  if (Math.abs(denominator) < ARROW_CURVE_EPSILON) {
+    return null;
+  }
+
+  const x =
+    ((a.x * a.x + a.y * a.y) * (c.y - b.y) +
+      (b.x * b.x + b.y * b.y) * (a.y - c.y) +
+      (c.x * c.x + c.y * c.y) * (b.y - a.y)) /
+    denominator;
+  const y =
+    ((a.x * a.x + a.y * a.y) * (b.x - c.x) +
+      (b.x * b.x + b.y * b.y) * (c.x - a.x) +
+      (c.x * c.x + c.y * c.y) * (a.x - b.x)) /
+    denominator;
+
+  return Number.isFinite(x) && Number.isFinite(y) ? new Vec(x, y) : null;
+}
+
+function getPointOnCircle(center: Vec, radius: number, angle: number): Vec {
+  return center.add(new Vec(Math.cos(angle) * radius, Math.sin(angle) * radius));
+}
+
+function getArcMeasure(
+  startAngle: number,
+  endAngle: number,
+  sweepFlag: 0 | 1,
+  largeArcFlag: 0 | 1,
+): number {
+  const delta = (endAngle - startAngle) % PI2;
+  const shortMeasure = ((2 * delta) % PI2) - delta;
+  if (!largeArcFlag) {
+    return shortMeasure;
+  }
+
+  return (PI2 - Math.abs(shortMeasure)) * (sweepFlag ? 1 : -1);
+}
+
+function isClockwise(a: Vec, b: Vec, c: Vec): boolean {
+  return (c.x - a.x) * (b.y - a.y) - (b.x - a.x) * (c.y - a.y) < 0;
+}
+
+function getDistanceToSegment(point: Vec, start: Vec, end: Vec): number {
+  const segment = end.sub(start);
+  const lengthSquared = segment.x * segment.x + segment.y * segment.y;
+  if (lengthSquared === 0) {
+    return point.dist(start);
+  }
+
+  const offset = point.sub(start);
+  const t = Math.max(0, Math.min(1, dot(offset, segment) / lengthSquared));
+  const projection = start.add(segment.mul(t));
+  return point.dist(projection);
+}
+
+function dot(a: Vec, b: Vec): number {
+  return a.x * b.x + a.y * b.y;
+}