@yuzhouu/canvas-kit 0.1.2 → 0.1.3

package/_vendor/plugin-frame/FrameShapeUtil.ts

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

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

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