@yuzhouu/canvas-kit 0.1.2

package/_vendor/plugin-frame/FrameShapeUtil.ts

@@ -0,0 +1,173 @@
+import {
+  Box,
+  distanceBetweenSegments,
+  ShapeUtil,
+  Vec,
+  type ShapeBrushSelectInput,
+  type ShapeLineSegmentHitTestInput,
+  type ShapeRecordBase,
+} from "@land/canvas-core";
+
+export interface FrameShapeProps {
+  w: number;
+  h: number;
+  name: string;
+  fill: string;
+  stroke: string;
+  strokeWidth: number;
+}
+
+export type FrameShapeRecord = ShapeRecordBase<"frame", FrameShapeProps>;
+
+function clampNumber(value: unknown, fallback: number): number {
+  return typeof value === "number" && Number.isFinite(value) ? value : fallback;
+}
+
+function getHitStrokeWidth(shape: FrameShapeRecord): number {
+  return Math.max(6, shape.props.strokeWidth + 4);
+}
+
+function isPointOnFrameBorder(
+  bounds: Box,
+  point: Vec,
+  strokeWidth: number,
+): boolean {
+  const outer = bounds.expand(strokeWidth / 2);
+  if (!outer.containsPoint(point)) {
+    return false;
+  }
+
+  const inset = strokeWidth / 2;
+  const innerWidth = bounds.w - inset * 2;
+  const innerHeight = bounds.h - inset * 2;
+  if (innerWidth <= 0 || innerHeight <= 0) {
+    return true;
+  }
+
+  return !new Box(
+    bounds.x + inset,
+    bounds.y + inset,
+    innerWidth,
+    innerHeight,
+  ).containsPoint(point);
+}
+
+function doesSegmentHitFrameBorder(
+  bounds: Box,
+  start: Vec,
+  end: Vec,
+  margin: number,
+): boolean {
+  const hitDistance = margin / 2;
+  if (
+    isPointOnFrameBorder(bounds, start, margin) ||
+    isPointOnFrameBorder(bounds, end, margin)
+  ) {
+    return true;
+  }
+
+  const corners = [
+    new Vec(bounds.minX, bounds.minY),
+    new Vec(bounds.maxX, bounds.minY),
+    new Vec(bounds.maxX, bounds.maxY),
+    new Vec(bounds.minX, bounds.maxY),
+  ];
+
+  for (let index = 0; index < corners.length; index += 1) {
+    const edgeStart = corners[index];
+    const edgeEnd = corners[(index + 1) % corners.length];
+    if (
+      edgeStart &&
+      edgeEnd &&
+      distanceBetweenSegments(start, end, edgeStart, edgeEnd) <= hitDistance
+    ) {
+      return true;
+    }
+  }
+
+  return false;
+}
+
+export class FrameShapeUtil extends ShapeUtil<FrameShapeRecord> {
+  readonly type = "frame" as const;
+
+  getDefaultProps(): FrameShapeProps {
+    return {
+      w: 640,
+      h: 360,
+      name: "Frame",
+      fill: "transparent",
+      stroke: "#94a3b8",
+      strokeWidth: 1,
+    };
+  }
+
+  validateProps(props: unknown): FrameShapeProps {
+    const candidate =
+      props && typeof props === "object"
+        ? (props as Partial<FrameShapeProps>)
+        : {};
+    const fallback = this.getDefaultProps();
+
+    return {
+      w: Math.max(1, clampNumber(candidate.w, fallback.w)),
+      h: Math.max(1, clampNumber(candidate.h, fallback.h)),
+      name:
+        typeof candidate.name === "string" && candidate.name.length > 0
+          ? candidate.name
+          : fallback.name,
+      fill: typeof candidate.fill === "string" ? candidate.fill : fallback.fill,
+      stroke:
+        typeof candidate.stroke === "string"
+          ? candidate.stroke
+          : fallback.stroke,
+      strokeWidth: Math.max(
+        0,
+        clampNumber(candidate.strokeWidth, fallback.strokeWidth),
+      ),
+    };
+  }
+
+  getBounds(shape: FrameShapeRecord): Box {
+    return new Box(shape.x, shape.y, shape.props.w, shape.props.h);
+  }
+
+  canReceiveChildren(_shape: FrameShapeRecord): boolean {
+    return true;
+  }
+
+  shouldRotateDescendants(_shape: FrameShapeRecord): boolean {
+    return true;
+  }
+
+  getChildClipLocalBounds(shape: FrameShapeRecord): Box | null {
+    return this.getLocalBounds(shape);
+  }
+
+  canSelectByBrush(
+    shape: FrameShapeRecord,
+    input: ShapeBrushSelectInput,
+  ): boolean {
+    return super.isWrappedByBrush(shape, input);
+  }
+
+  hitTest(shape: FrameShapeRecord, positionedPoint: Vec): boolean {
+    return isPointOnFrameBorder(
+      this.getBounds(shape),
+      positionedPoint,
+      getHitStrokeWidth(shape),
+    );
+  }
+
+  hitTestLineSegment(
+    shape: FrameShapeRecord,
+    input: ShapeLineSegmentHitTestInput,
+  ): boolean {
+    return doesSegmentHitFrameBorder(
+      this.getBounds(shape),
+      input.positionedStart,
+      input.positionedEnd,
+      Math.max(getHitStrokeWidth(shape), input.margin),
+    );
+  }
+}

package/_vendor/plugin-frame/FrameTool.ts

@@ -0,0 +1,225 @@
+import {
+  Box,
+  StateNode,
+  Vec,
+  type Editor,
+  type PointerEditorEvent,
+  type ShapeId,
+} from "@land/canvas-core";
+import type { FrameShapeProps, FrameShapeRecord } from "./FrameShapeUtil";
+
+const FRAME_CREATE_HISTORY_MARK = "frame.create";
+const MIN_FRAME_SIZE = 1;
+const DRAG_CREATE_THRESHOLD = 4;
+
+interface CreatingFrameInfo {
+  originPagePoint: Vec;
+  currentPagePoint: Vec;
+  shapeId: ShapeId | null;
+  shiftKey: boolean;
+}
+
+export class FrameTool extends StateNode {
+  constructor(editor: Editor) {
+    super(editor, "frame");
+    this.initial = "idle";
+    this.addChild(new FrameIdleState(editor, this));
+    this.addChild(new FrameCreatingState(editor, this));
+  }
+
+  getDefaultProps(): FrameShapeProps {
+    return this.editor.getDefaultShapeProps<FrameShapeProps>("frame");
+  }
+}
+
+class FrameIdleState extends StateNode {
+  constructor(editor: Editor, parent: FrameTool) {
+    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 CreatingFrameInfo);
+  }
+}
+
+class FrameCreatingState extends StateNode {
+  private info: CreatingFrameInfo | null = null;
+
+  constructor(
+    editor: Editor,
+    private readonly tool: FrameTool,
+  ) {
+    super(editor, "creating", tool);
+  }
+
+  protected onEnter(info?: unknown): void {
+    this.info = info as CreatingFrameInfo;
+    this.editor.history.mark(FRAME_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);
+    this.editor.history.squashToMark(FRAME_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(FRAME_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,
+      this.tool.getDefaultProps(),
+    );
+
+    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): FrameShapeRecord {
+    const [created] = this.editor.commands.createShapes(
+      [
+        {
+          type: "frame",
+          x: bounds.x,
+          y: bounds.y,
+          props: {
+            ...this.tool.getDefaultProps(),
+            w: bounds.w,
+            h: bounds.h,
+          },
+        },
+      ],
+      { source: "user" },
+    );
+
+    if (!created || created.type !== "frame") {
+      throw new Error("Failed to create frame shape");
+    }
+
+    this.editor.commands.setSelectedShapeIds([created.id], {
+      source: "system",
+    });
+
+    return created as FrameShapeRecord;
+  }
+}
+
+function getDefaultBoundsAtPoint(point: Vec, props: FrameShapeProps): Box {
+  return new Box(
+    point.x - props.w / 2,
+    point.y - props.h / 2,
+    props.w,
+    props.h,
+  );
+}
+
+function getNormalizedBounds(
+  origin: Vec,
+  current: Vec,
+  lockAspectRatio: boolean,
+  props: FrameShapeProps,
+): Box {
+  let deltaX = current.x - origin.x;
+  let deltaY = current.y - origin.y;
+
+  if (lockAspectRatio) {
+    const aspectRatio = props.w / props.h;
+    const width = Math.abs(deltaX);
+    const height = Math.abs(deltaY);
+    if (
+      height === 0 ||
+      width / Math.max(height, MIN_FRAME_SIZE) >= aspectRatio
+    ) {
+      deltaY = (deltaY < 0 ? -1 : 1) * (width / aspectRatio);
+    } else {
+      deltaX = (deltaX < 0 ? -1 : 1) * (height * aspectRatio);
+    }
+  }
+
+  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_FRAME_SIZE),
+    Math.max(Math.abs(end.y - origin.y), MIN_FRAME_SIZE),
+  );
+}

package/_vendor/plugin-frame/canvas.tsx

@@ -0,0 +1,75 @@
+import type {
+  LandCanvasPlugin,
+  ShapeRendererProps,
+} from "@land/canvas-plugin-api";
+import type { FrameShapeRecord } from "./FrameShapeUtil";
+
+interface FrameShapeSvgProps {
+  shape: FrameShapeRecord;
+}
+
+export function createFrameCanvasPlugin(): LandCanvasPlugin {
+  return {
+    id: "land.frame.react",
+    setup(registerShapeRenderer) {
+      registerShapeRenderer({
+        type: "frame",
+        component: FrameShapeRenderer,
+      });
+    },
+  };
+}
+
+function FrameShapeRenderer({
+  shape,
+}: ShapeRendererProps<FrameShapeRecord>) {
+  return <FrameShapeSvg shape={shape} />;
+}
+
+export function FrameShapeSvg({ shape }: FrameShapeSvgProps) {
+  const { fill, h, name, stroke, strokeWidth, w } = shape.props;
+  const inset = strokeWidth / 2;
+  const width = Math.max(w - strokeWidth, 0);
+  const height = Math.max(h - strokeWidth, 0);
+
+  return (
+    <svg
+      width="100%"
+      height="100%"
+      viewBox={`0 0 ${w} ${h}`}
+      style={{ display: "block", overflow: "visible" }}
+      shapeRendering="geometricPrecision"
+    >
+      <rect
+        x={inset}
+        y={inset}
+        width={width}
+        height={height}
+        fill={fill}
+        stroke={stroke}
+        strokeWidth={strokeWidth}
+        strokeLinejoin="round"
+        strokeLinecap="round"
+      />
+      <text
+        x={12}
+        y={18}
+        fill={stroke}
+        fontFamily={[
+          "Inter",
+          "ui-sans-serif",
+          "system-ui",
+          "-apple-system",
+          "BlinkMacSystemFont",
+          "'Segoe UI'",
+          "sans-serif",
+        ].join(", ")}
+        fontSize={12}
+        fontWeight={600}
+        style={{ userSelect: "none" }}
+      >
+        {name}
+      </text>
+    </svg>
+  );
+}