@yuzhouu/canvas-kit 0.1.2 → 0.1.4

package/_vendor/plugin-geo/GeoShapeUtil.ts

@@ -1,463 +0,0 @@
-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

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