@yuzhouu/canvas-kit 0.1.2

package/_vendor/plugin-geo/GeoShapeUtil.ts

@@ -0,0 +1,463 @@
+import {
+  Box,
+  ShapeUtil,
+  Vec,
+  pagePointToShapePositionedPoint,
+  positionedShapePointToPagePoint,
+  type ShapeBindingPointInput,
+  type ShapeHandleSnapGeometry,
+  type ShapeLineSegmentHitTestInput,
+} from "@land/canvas-core";
+import type { GeoShapeKind, GeoShapeProps, GeoShapeRecord } from "./types";
+
+const GEO_KINDS: readonly GeoShapeKind[] = ["rectangle", "ellipse", "diamond"];
+const GEO_HANDLE_SNAP_ELLIPSE_SEGMENTS = 32;
+
+function clampNumber(value: unknown, fallback: number): number {
+  return typeof value === "number" && Number.isFinite(value) ? value : fallback;
+}
+
+function isGeoKind(value: unknown): value is GeoShapeKind {
+  return typeof value === "string" && GEO_KINDS.includes(value as GeoShapeKind);
+}
+
+function cross(a: Vec, b: Vec): number {
+  return a.x * b.y - a.y * b.x;
+}
+
+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 distanceBetweenSegments(
+  firstStart: Vec,
+  firstEnd: Vec,
+  secondStart: Vec,
+  secondEnd: Vec,
+): number {
+  if (intersectSegments(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),
+  );
+}
+
+function intersectSegments(
+  a1: Vec,
+  a2: Vec,
+  b1: Vec,
+  b2: Vec,
+): { point: Vec; t: number } | null {
+  const r = a2.sub(a1);
+  const s = b2.sub(b1);
+  const denominator = cross(r, s);
+  if (Math.abs(denominator) < 1e-8) {
+    return null;
+  }
+
+  const delta = b1.sub(a1);
+  const t = cross(delta, s) / denominator;
+  const u = cross(delta, r) / denominator;
+  if (t < 0 || t > 1 || u < 0 || u > 1) {
+    return null;
+  }
+
+  return {
+    point: a1.add(r.mul(t)),
+    t,
+  };
+}
+
+function intersectPolygonBoundary(
+  raw: Vec,
+  opposite: Vec,
+  points: Vec[],
+): Vec | null {
+  let best: { point: Vec; t: number } | null = null;
+
+  for (let index = 0; index < points.length; index += 1) {
+    const start = points[index];
+    const end = points[(index + 1) % points.length] ?? points[0];
+    if (!start || !end) {
+      continue;
+    }
+
+    const intersection = intersectSegments(raw, opposite, start, end);
+    if (!intersection || intersection.t <= 1e-6) {
+      continue;
+    }
+
+    if (!best || intersection.t < best.t) {
+      best = intersection;
+    }
+  }
+
+  return best?.point ?? null;
+}
+
+function doesSegmentIntersectPolygon(
+  start: Vec,
+  end: Vec,
+  points: readonly Vec[],
+  margin: number,
+): boolean {
+  if (points.length < 3) {
+    return false;
+  }
+
+  for (let index = 0; index < points.length; index += 1) {
+    const edgeStart = points[index];
+    const edgeEnd = points[(index + 1) % points.length];
+    if (
+      edgeStart &&
+      edgeEnd &&
+      distanceBetweenSegments(start, end, edgeStart, edgeEnd) <= margin
+    ) {
+      return true;
+    }
+  }
+
+  return false;
+}
+
+function intersectEllipseBoundary(
+  bounds: Box,
+  raw: Vec,
+  opposite: Vec,
+): Vec | null {
+  const center = bounds.center;
+  const radiiX = bounds.w / 2;
+  const radiiY = bounds.h / 2;
+  if (radiiX <= 0 || radiiY <= 0) {
+    return null;
+  }
+
+  const origin = raw.sub(center);
+  const delta = opposite.sub(raw);
+  const dx = delta.x / radiiX;
+  const dy = delta.y / radiiY;
+  const ox = origin.x / radiiX;
+  const oy = origin.y / radiiY;
+  const a = dx * dx + dy * dy;
+  const b = 2 * (ox * dx + oy * dy);
+  const c = ox * ox + oy * oy - 1;
+  const discriminant = b * b - 4 * a * c;
+  if (a === 0 || discriminant < 0) {
+    return null;
+  }
+
+  const sqrt = Math.sqrt(discriminant);
+  const roots = [(-b - sqrt) / (2 * a), (-b + sqrt) / (2 * a)]
+    .filter((root) => root > 1e-6 && root <= 1)
+    .sort((left, right) => left - right);
+  const t = roots[0];
+  return t === undefined ? null : raw.add(delta.mul(t));
+}
+
+function doesSegmentIntersectEllipse(
+  bounds: Box,
+  start: Vec,
+  end: Vec,
+  margin: number,
+): boolean {
+  const center = bounds.center;
+  const radiiX = bounds.w / 2 + margin;
+  const radiiY = bounds.h / 2 + margin;
+  if (radiiX <= 0 || radiiY <= 0) {
+    return false;
+  }
+
+  const delta = end.sub(start);
+  const origin = start.sub(center);
+  const dx = delta.x / radiiX;
+  const dy = delta.y / radiiY;
+  const ox = origin.x / radiiX;
+  const oy = origin.y / radiiY;
+  const a = dx * dx + dy * dy;
+  const b = 2 * (ox * dx + oy * dy);
+  const c = ox * ox + oy * oy - 1;
+  if (c <= 0) {
+    return true;
+  }
+  const discriminant = b * b - 4 * a * c;
+  if (a === 0 || discriminant < 0) {
+    return false;
+  }
+
+  const sqrt = Math.sqrt(discriminant);
+  const first = (-b - sqrt) / (2 * a);
+  const second = (-b + sqrt) / (2 * a);
+  return (first >= 0 && first <= 1) || (second >= 0 && second <= 1);
+}
+
+function getGeoPositionedBoundaryPoint(
+  shape: GeoShapeRecord,
+  raw: Vec,
+  opposite: Vec,
+): Vec | null {
+  const bounds = new Box(shape.x, shape.y, shape.props.w, shape.props.h);
+  switch (shape.props.geo) {
+    case "ellipse":
+      return intersectEllipseBoundary(bounds, raw, opposite);
+    case "diamond":
+      return intersectPolygonBoundary(raw, opposite, [
+        new Vec(bounds.center.x, bounds.minY),
+        new Vec(bounds.maxX, bounds.center.y),
+        new Vec(bounds.center.x, bounds.maxY),
+        new Vec(bounds.minX, bounds.center.y),
+      ]);
+    case "rectangle":
+    default:
+      return intersectPolygonBoundary(raw, opposite, [
+        new Vec(bounds.minX, bounds.minY),
+        new Vec(bounds.maxX, bounds.minY),
+        new Vec(bounds.maxX, bounds.maxY),
+        new Vec(bounds.minX, bounds.maxY),
+      ]);
+  }
+}
+
+function getGeoLocalOutline(shape: GeoShapeRecord): Vec[] {
+  const bounds = new Box(0, 0, shape.props.w, shape.props.h);
+  switch (shape.props.geo) {
+    case "ellipse": {
+      const points: Vec[] = [];
+      for (let index = 0; index < GEO_HANDLE_SNAP_ELLIPSE_SEGMENTS; index += 1) {
+        const angle =
+          (index / GEO_HANDLE_SNAP_ELLIPSE_SEGMENTS) * Math.PI * 2;
+        points.push(
+          new Vec(
+            bounds.center.x + (bounds.w / 2) * Math.cos(angle),
+            bounds.center.y + (bounds.h / 2) * Math.sin(angle),
+          ),
+        );
+      }
+      return points;
+    }
+    case "diamond":
+      return [
+        new Vec(bounds.center.x, bounds.minY),
+        new Vec(bounds.maxX, bounds.center.y),
+        new Vec(bounds.center.x, bounds.maxY),
+        new Vec(bounds.minX, bounds.center.y),
+      ];
+    case "rectangle":
+    default:
+      return [
+        new Vec(bounds.minX, bounds.minY),
+        new Vec(bounds.maxX, bounds.minY),
+        new Vec(bounds.maxX, bounds.maxY),
+        new Vec(bounds.minX, bounds.maxY),
+      ];
+  }
+}
+
+function getGeoHandleSnapPoints(shape: GeoShapeRecord): Vec[] {
+  const bounds = new Box(0, 0, shape.props.w, shape.props.h);
+  return [
+    new Vec(bounds.minX, bounds.minY),
+    new Vec(bounds.center.x, bounds.minY),
+    new Vec(bounds.maxX, bounds.minY),
+    new Vec(bounds.minX, bounds.center.y),
+    bounds.center,
+    new Vec(bounds.maxX, bounds.center.y),
+    new Vec(bounds.minX, bounds.maxY),
+    new Vec(bounds.center.x, bounds.maxY),
+    new Vec(bounds.maxX, bounds.maxY),
+  ];
+}
+
+export class GeoShapeUtil extends ShapeUtil<GeoShapeRecord> {
+  readonly type = "geo" as const;
+
+  getDefaultProps(): GeoShapeProps {
+    return {
+      w: 160,
+      h: 108,
+      geo: "rectangle",
+      fill: "#e2e8f0",
+      stroke: "#334155",
+      strokeWidth: 2,
+    };
+  }
+
+  validateProps(props: unknown): GeoShapeProps {
+    const candidate =
+      props && typeof props === "object"
+        ? (props as Partial<GeoShapeProps>)
+        : {};
+    const fallback = this.getDefaultProps();
+    return {
+      w: Math.max(24, clampNumber(candidate.w, fallback.w)),
+      h: Math.max(24, clampNumber(candidate.h, fallback.h)),
+      geo: isGeoKind(candidate.geo) ? candidate.geo : fallback.geo,
+      fill: typeof candidate.fill === "string" ? candidate.fill : fallback.fill,
+      stroke:
+        typeof candidate.stroke === "string"
+          ? candidate.stroke
+          : fallback.stroke,
+      strokeWidth: Math.max(
+        1,
+        clampNumber(candidate.strokeWidth, fallback.strokeWidth),
+      ),
+    };
+  }
+
+  getBounds(shape: GeoShapeRecord): Box {
+    return new Box(shape.x, shape.y, shape.props.w, shape.props.h);
+  }
+
+  getPositionedOutlineVertices(shape: GeoShapeRecord): Vec[] {
+    const bounds = this.getBounds(shape);
+
+    switch (shape.props.geo) {
+      case "ellipse": {
+        const cx = bounds.center.x;
+        const cy = bounds.center.y;
+        const rx = bounds.w / 2;
+        const ry = bounds.h / 2;
+        const segments = 32;
+        const points: Vec[] = [];
+
+        for (let i = 0; i < segments; i += 1) {
+          const angle = (i / segments) * Math.PI * 2;
+          points.push(new Vec(cx + rx * Math.cos(angle), cy + ry * Math.sin(angle)));
+        }
+
+        return points;
+      }
+      case "diamond":
+        return [
+          new Vec(bounds.center.x, bounds.minY),
+          new Vec(bounds.maxX, bounds.center.y),
+          new Vec(bounds.center.x, bounds.maxY),
+          new Vec(bounds.minX, bounds.center.y),
+        ];
+      case "rectangle":
+      default:
+        return super.getPositionedOutlineVertices(shape);
+    }
+  }
+
+  getHandleSnapGeometry(shape: GeoShapeRecord): ShapeHandleSnapGeometry {
+    return {
+      points: getGeoHandleSnapPoints(shape),
+      outline: getGeoLocalOutline(shape),
+    };
+  }
+
+  hitTest(shape: GeoShapeRecord, positionedPoint: Vec): boolean {
+    const bounds = this.getBounds(shape);
+
+    switch (shape.props.geo) {
+      case "ellipse": {
+        const rx = bounds.w / 2;
+        const ry = bounds.h / 2;
+        if (rx <= 0 || ry <= 0) {
+          return false;
+        }
+
+        const dx = positionedPoint.x - bounds.center.x;
+        const dy = positionedPoint.y - bounds.center.y;
+        return (dx * dx) / (rx * rx) + (dy * dy) / (ry * ry) <= 1;
+      }
+      case "diamond": {
+        const rx = bounds.w / 2;
+        const ry = bounds.h / 2;
+        if (rx <= 0 || ry <= 0) {
+          return false;
+        }
+
+        const dx = Math.abs(positionedPoint.x - bounds.center.x) / rx;
+        const dy = Math.abs(positionedPoint.y - bounds.center.y) / ry;
+        return dx + dy <= 1;
+      }
+      case "rectangle":
+      default:
+        return bounds.containsPoint(positionedPoint);
+    }
+  }
+
+  hitTestLineSegment(
+    shape: GeoShapeRecord,
+    input: ShapeLineSegmentHitTestInput,
+  ): boolean {
+    const bounds = this.getBounds(shape);
+
+    switch (shape.props.geo) {
+      case "ellipse":
+        return doesSegmentIntersectEllipse(
+          bounds,
+          input.positionedStart,
+          input.positionedEnd,
+          input.margin,
+        );
+      case "diamond": {
+        const points = [
+          new Vec(bounds.center.x, bounds.minY),
+          new Vec(bounds.maxX, bounds.center.y),
+          new Vec(bounds.center.x, bounds.maxY),
+          new Vec(bounds.minX, bounds.center.y),
+        ];
+        return (
+          this.hitTest(shape, input.positionedStart) ||
+          this.hitTest(shape, input.positionedEnd) ||
+          doesSegmentIntersectPolygon(
+            input.positionedStart,
+            input.positionedEnd,
+            points,
+            input.margin,
+          )
+        );
+      }
+      case "rectangle":
+      default:
+        return super.hitTestLineSegment(shape, input);
+    }
+  }
+
+  resolveBindingPoint(
+    shape: GeoShapeRecord,
+    input: ShapeBindingPointInput,
+  ): Vec {
+    const rawPositionedPoint = pagePointToShapePositionedPoint(
+      shape,
+      input.rawPagePoint,
+      this,
+    );
+    const oppositePositionedPoint = pagePointToShapePositionedPoint(
+      shape,
+      input.oppositePagePoint,
+      this,
+    );
+    const intersectionPositionedPoint = getGeoPositionedBoundaryPoint(
+      shape,
+      rawPositionedPoint,
+      oppositePositionedPoint,
+    );
+
+    return intersectionPositionedPoint
+      ? positionedShapePointToPagePoint(
+          shape,
+          intersectionPositionedPoint,
+          this,
+        )
+      : input.rawPagePoint;
+  }
+}

package/_vendor/plugin-geo/GeoTools.ts

@@ -0,0 +1,247 @@
+import {
+  Box,
+  StateNode,
+  Vec,
+  reparentShapeToContainingParent,
+  type Editor,
+  type PointerEditorEvent,
+  type ShapeId,
+} from "@land/canvas-core";
+import type { GeoShapeKind, GeoShapeProps } from "./types";
+
+const GEO_CREATE_HISTORY_MARK = "geo.create";
+const MIN_SHAPE_SIZE = 1;
+const DRAG_CREATE_THRESHOLD = 4;
+
+interface CreatingGeoInfo {
+  originPagePoint: Vec;
+  currentPagePoint: Vec;
+  shapeId: ShapeId | null;
+  shiftKey: boolean;
+}
+
+function getNormalizedBounds(
+  origin: Vec,
+  current: Vec,
+  lockAspectRatio: boolean,
+): Box {
+  let deltaX = current.x - origin.x;
+  let deltaY = current.y - origin.y;
+
+  if (lockAspectRatio) {
+    const size = Math.max(Math.abs(deltaX), Math.abs(deltaY));
+    deltaX = (deltaX < 0 ? -1 : 1) * size;
+    deltaY = (deltaY < 0 ? -1 : 1) * size;
+  }
+
+  const end = new Vec(origin.x + deltaX, origin.y + deltaY);
+
+  return new Box(
+    Math.min(origin.x, end.x),
+    Math.min(origin.y, end.y),
+    Math.max(Math.abs(end.x - origin.x), MIN_SHAPE_SIZE),
+    Math.max(Math.abs(end.y - origin.y), MIN_SHAPE_SIZE),
+  );
+}
+
+function getDefaultBoundsAtPoint(point: Vec, props: GeoShapeProps): Box {
+  return new Box(
+    point.x - props.w / 2,
+    point.y - props.h / 2,
+    props.w,
+    props.h,
+  );
+}
+
+class BoxGeoTool extends StateNode {
+  constructor(
+    editor: Editor,
+    id: string,
+    private readonly geo: GeoShapeKind,
+  ) {
+    super(editor, id);
+    this.initial = "idle";
+    this.addChild(new GeoIdleState(editor, this));
+    this.addChild(new GeoCreatingState(editor, this));
+  }
+
+  getDefaultProps(): GeoShapeProps {
+    const props = this.editor.getDefaultShapeProps<GeoShapeProps>("geo");
+    return {
+      ...props,
+      geo: this.geo,
+    };
+  }
+}
+
+class GeoIdleState extends StateNode {
+  constructor(editor: Editor, parent: BoxGeoTool) {
+    super(editor, "idle", parent);
+  }
+
+  protected onEnter(): void {
+    this.editor.clearSelectionTransients();
+  }
+
+  protected onPointerDown(event: PointerEditorEvent): void {
+    this.transition("creating", {
+      originPagePoint: event.pagePoint.clone(),
+      currentPagePoint: event.pagePoint.clone(),
+      shapeId: null,
+      shiftKey: event.shiftKey,
+    } satisfies CreatingGeoInfo);
+  }
+}
+
+class GeoCreatingState extends StateNode {
+  private info: CreatingGeoInfo | null = null;
+
+  constructor(
+    editor: Editor,
+    private readonly tool: BoxGeoTool,
+  ) {
+    super(editor, "creating", tool);
+  }
+
+  protected onEnter(info?: unknown): void {
+    this.info = info as CreatingGeoInfo;
+    this.editor.history.mark(GEO_CREATE_HISTORY_MARK);
+  }
+
+  protected onPointerMove(event: PointerEditorEvent): void {
+    this.updateShape(event.pagePoint, event.shiftKey);
+  }
+
+  protected onPointerUp(event: PointerEditorEvent): void {
+    if (!this.info) {
+      this.transition("idle");
+      return;
+    }
+
+    this.updateShape(event.pagePoint, event.shiftKey, true);
+    if (this.info.shapeId) {
+      reparentShapeToContainingParent(this.editor, this.info.shapeId, {
+        source: "user",
+      });
+    }
+    this.editor.history.squashToMark(GEO_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(GEO_CREATE_HISTORY_MARK);
+    this.transition("idle");
+  }
+
+  protected onExit(): void {
+    this.info = null;
+  }
+
+  private updateShape(
+    pagePoint: Vec,
+    shiftKey: boolean,
+    allowClickCreate = false,
+  ): void {
+    if (!this.info) {
+      return;
+    }
+
+    this.info.currentPagePoint = pagePoint.clone();
+    this.info.shiftKey = shiftKey;
+
+    const dragDistance = this.info.originPagePoint.dist(pagePoint);
+
+    if (!this.info.shapeId && dragDistance < DRAG_CREATE_THRESHOLD) {
+      if (!allowClickCreate) {
+        return;
+      }
+
+      const bounds = getDefaultBoundsAtPoint(
+        pagePoint,
+        this.tool.getDefaultProps(),
+      );
+      const created = this.createShape(bounds);
+      this.info.shapeId = created.id;
+      return;
+    }
+
+    const bounds = getNormalizedBounds(
+      this.info.originPagePoint,
+      pagePoint,
+      shiftKey,
+    );
+
+    if (!this.info.shapeId) {
+      const created = this.createShape(bounds);
+      this.info.shapeId = created.id;
+      return;
+    }
+
+    this.editor.commands.updateShapes(
+      [
+        {
+          id: this.info.shapeId,
+          x: bounds.x,
+          y: bounds.y,
+          props: {
+            w: bounds.w,
+            h: bounds.h,
+          },
+        },
+      ],
+      { source: "user" },
+    );
+  }
+
+  private createShape(bounds: Box) {
+    const [created] = this.editor.commands.createShapes(
+      [
+        {
+          type: "geo",
+          x: bounds.x,
+          y: bounds.y,
+          props: {
+            ...this.tool.getDefaultProps(),
+            w: bounds.w,
+            h: bounds.h,
+          },
+        },
+      ],
+      { source: "user" },
+    );
+
+    if (!created) {
+      throw new Error("Failed to create geo shape");
+    }
+
+    this.editor.commands.setSelectedShapeIds([created.id], {
+      source: "system",
+    });
+
+    return created;
+  }
+}
+
+export class RectangleTool extends BoxGeoTool {
+  constructor(editor: Editor) {
+    super(editor, "rectangle", "rectangle");
+  }
+}
+
+export class EllipseTool extends BoxGeoTool {
+  constructor(editor: Editor) {
+    super(editor, "ellipse", "ellipse");
+  }
+}
+
+export class DiamondTool extends BoxGeoTool {
+  constructor(editor: Editor) {
+    super(editor, "diamond", "diamond");
+  }
+}