@yuzhouu/canvas-kit 0.1.2

package/_vendor/plugin-draw/DrawTool.ts

@@ -0,0 +1,444 @@
+import {
+  StateNode,
+  Vec,
+  reparentShapeToContainingParent,
+  type Editor,
+  type PointerEditorEvent,
+  type ShapeId,
+} from "@land/canvas-core";
+import {
+  appendGuardedDrawPoint,
+  getDrawInputPointGuardOptions,
+  getDrawSegmentPointLimit,
+  type DrawInputPointGuardOptions,
+} from "./drawPath";
+import { cloneDrawShapeSegmentsForUpdate } from "./drawGeometry";
+import type {
+  DrawShapePoint,
+  DrawShapeProps,
+  DrawShapeRecord,
+  DrawShapeSegment,
+} from "./types";
+
+const DRAW_CREATE_HISTORY_MARK = "draw.create";
+const DRAW_CREATE_THRESHOLD = 2;
+const DRAW_UPDATE_FALLBACK_DELAY_MS = 16;
+
+type DrawUpdateFrame =
+  | { type: "animation"; id: number }
+  | { type: "timeout"; id: ReturnType<typeof setTimeout> };
+
+interface DrawingInfo {
+  originPagePoint: Vec;
+  shapeId: ShapeId | null;
+  segments: DrawShapeSegment[];
+  stroke: DrawShapeProps["stroke"];
+  strokeWidth: DrawShapeProps["strokeWidth"];
+  fill: DrawShapeProps["fill"];
+  isClosed: DrawShapeProps["isClosed"];
+  isPen: boolean;
+  pointGuard: DrawInputPointGuardOptions;
+  straightSegmentAnchorPoint: DrawShapePoint | null;
+  preserveStraightEndpointOnNextFreePoint: boolean;
+}
+
+export class DrawTool extends StateNode {
+  constructor(editor: Editor) {
+    super(editor, "draw");
+    this.initial = "idle";
+    this.addChild(new DrawIdleState(editor, this));
+    this.addChild(new DrawDrawingState(editor, this));
+  }
+
+  getDefaultProps(): DrawShapeProps {
+    return this.editor.getDefaultShapeProps<DrawShapeProps>("draw");
+  }
+}
+
+class DrawIdleState extends StateNode {
+  constructor(editor: Editor, parent: DrawTool) {
+    super(editor, "idle", parent);
+  }
+
+  protected onEnter(): void {
+    this.editor.clearSelectionTransients();
+  }
+
+  protected onPointerDown(event: PointerEditorEvent): void {
+    const defaultProps = (this.parent as DrawTool).getDefaultProps();
+    this.transition("drawing", {
+      originPagePoint: event.pagePoint.clone(),
+      shapeId: null,
+      stroke: defaultProps.stroke,
+      strokeWidth: defaultProps.strokeWidth,
+      fill: defaultProps.fill,
+      isClosed: defaultProps.isClosed,
+      isPen: event.pointerType === "pen",
+      pointGuard: getDrawInputPointGuardOptions(
+        defaultProps.strokeWidth,
+        event.pointerType === "pen",
+      ),
+      straightSegmentAnchorPoint: null,
+      preserveStraightEndpointOnNextFreePoint: false,
+      segments: [
+        {
+          points: [
+            toLocalDrawPoint(
+              event.pagePoint,
+              event.pagePoint,
+              event.pressure,
+              event.pointerType === "pen",
+            ),
+          ],
+        },
+      ],
+    } satisfies DrawingInfo);
+  }
+}
+
+class DrawDrawingState extends StateNode {
+  private info: DrawingInfo | null = null;
+  private pendingUpdateFrame: DrawUpdateFrame | null = null;
+
+  constructor(
+    editor: Editor,
+    private readonly tool: DrawTool,
+  ) {
+    super(editor, "drawing", tool);
+  }
+
+  protected onEnter(info?: unknown): void {
+    this.info = info as DrawingInfo;
+    this.editor.clearSelectionTransients();
+    this.editor.commands.setSelectedShapeIds([], { source: "system" });
+    this.editor.history.mark(DRAW_CREATE_HISTORY_MARK);
+  }
+
+  protected onPointerMove(event: PointerEditorEvent): void {
+    this.appendPoint(event, false);
+  }
+
+  protected onPointerUp(event: PointerEditorEvent): void {
+    this.appendPoint(event, true);
+    this.flushShapeUpdate();
+
+    const shapeId = this.info?.shapeId ?? null;
+    if (!shapeId) {
+      this.editor.history.bailToMark(DRAW_CREATE_HISTORY_MARK);
+      this.transition("idle");
+      return;
+    }
+
+    reparentShapeToContainingParent(this.editor, shapeId, {
+      source: "user",
+    });
+    this.editor.history.squashToMark(DRAW_CREATE_HISTORY_MARK);
+    this.transition("idle");
+  }
+
+  protected onCancel(): void {
+    this.cancelScheduledShapeUpdate();
+    this.editor.history.bailToMark(DRAW_CREATE_HISTORY_MARK);
+    this.transition("idle");
+  }
+
+  protected onExit(): void {
+    this.cancelScheduledShapeUpdate();
+    this.info = null;
+  }
+
+  private appendPoint(
+    event: PointerEditorEvent,
+    allowCreate: boolean,
+  ): void {
+    if (!this.info) {
+      return;
+    }
+
+    const point = toLocalDrawPoint(
+      event.pagePoint,
+      this.info.originPagePoint,
+      event.pressure,
+      this.info.isPen,
+    );
+
+    if (event.shiftKey) {
+      this.appendStraightSegmentPoint(point);
+    } else {
+      this.exitStraightSegmentMode();
+      if (this.info.preserveStraightEndpointOnNextFreePoint) {
+        if (this.appendDistinctCurrentPoint(point)) {
+          this.info.preserveStraightEndpointOnNextFreePoint = false;
+        }
+      } else {
+        this.appendGuardedCurrentPoint(point);
+      }
+    }
+    this.splitCurrentSegmentAtLimit();
+
+    if (!this.info.shapeId) {
+      const dragDistance = this.info.originPagePoint.dist(event.pagePoint);
+      if (!allowCreate && dragDistance < DRAW_CREATE_THRESHOLD) {
+        return;
+      }
+
+      const created = this.createShape();
+      this.info.shapeId = created.id;
+      return;
+    }
+
+    this.scheduleShapeUpdate();
+  }
+
+  private scheduleShapeUpdate(): void {
+    if (this.pendingUpdateFrame !== null) {
+      return;
+    }
+
+    this.pendingUpdateFrame = scheduleDrawUpdateFrame(() => {
+      this.pendingUpdateFrame = null;
+      this.flushShapeUpdate();
+    });
+  }
+
+  private cancelScheduledShapeUpdate(): void {
+    if (this.pendingUpdateFrame === null) {
+      return;
+    }
+
+    cancelDrawUpdateFrame(this.pendingUpdateFrame);
+    this.pendingUpdateFrame = null;
+  }
+
+  private flushShapeUpdate(): void {
+    this.cancelScheduledShapeUpdate();
+    if (!this.info?.shapeId) {
+      return;
+    }
+
+    this.editor.commands.updateShapes(
+      [
+        {
+          id: this.info.shapeId,
+          props: getDrawShapePropsForSegments(this.info.segments),
+        },
+      ],
+      { source: "user" },
+    );
+  }
+
+  private createShape(): DrawShapeRecord {
+    const defaultProps = this.tool.getDefaultProps();
+    const [created] = this.editor.commands.createShapes(
+      [
+        {
+          type: "draw",
+          x: this.info?.originPagePoint.x ?? 0,
+          y: this.info?.originPagePoint.y ?? 0,
+          props: {
+            ...defaultProps,
+            stroke: this.info?.stroke ?? defaultProps.stroke,
+            strokeWidth:
+              this.info?.strokeWidth ?? defaultProps.strokeWidth,
+            fill: this.info?.fill ?? defaultProps.fill,
+            isClosed: this.info?.isClosed ?? defaultProps.isClosed,
+            ...getDrawShapePropsForSegments(this.info?.segments ?? []),
+            isPen: this.info?.isPen ?? false,
+          },
+        },
+      ],
+      { source: "user" },
+    );
+
+    if (!created || created.type !== "draw") {
+      throw new Error("Failed to create draw shape");
+    }
+
+    return created as DrawShapeRecord;
+  }
+
+  private appendStraightSegmentPoint(point: DrawShapePoint): void {
+    if (!this.info) {
+      return;
+    }
+
+    this.info.preserveStraightEndpointOnNextFreePoint = false;
+
+    const points = getCurrentSegmentPoints(this.info);
+    const lastPoint = points[points.length - 1];
+    if (!this.info.straightSegmentAnchorPoint) {
+      if (!lastPoint) {
+        this.replaceCurrentSegmentPoints([{ ...point, segment: "straight" }]);
+        return;
+      }
+
+      this.info.straightSegmentAnchorPoint = clonePoint(lastPoint);
+    }
+
+    const straightPoint: DrawShapePoint = {
+      ...point,
+      segment: "straight",
+    };
+    if (lastPoint?.segment === "straight") {
+      this.replaceCurrentSegmentPoints([
+        ...points.slice(0, -1),
+        straightPoint,
+      ]);
+      return;
+    }
+
+    this.replaceCurrentSegmentPoints([...points, straightPoint]);
+  }
+
+  private exitStraightSegmentMode(): void {
+    if (!this.info?.straightSegmentAnchorPoint) {
+      return;
+    }
+
+    this.info.straightSegmentAnchorPoint = null;
+    this.info.preserveStraightEndpointOnNextFreePoint = true;
+  }
+
+  private appendDistinctCurrentPoint(point: DrawShapePoint): boolean {
+    if (!this.info) {
+      return false;
+    }
+
+    const points = getCurrentSegmentPoints(this.info);
+    const previous = points[points.length - 1];
+    if (previous && arePointsEqual(previous, point)) {
+      return false;
+    }
+
+    this.replaceCurrentSegmentPoints([...points, clonePoint(point)]);
+    return true;
+  }
+
+  private appendGuardedCurrentPoint(point: DrawShapePoint): void {
+    if (!this.info) {
+      return;
+    }
+
+    const points = getCurrentSegmentPoints(this.info).map(clonePoint);
+    appendGuardedDrawPoint(points, point, this.info.pointGuard);
+    this.replaceCurrentSegmentPoints(points);
+  }
+
+  private replaceCurrentSegmentPoints(points: DrawShapePoint[]): void {
+    if (!this.info) {
+      return;
+    }
+
+    const segments = ensureDrawingSegments(this.info.segments);
+    this.info.segments = [
+      ...segments.slice(0, -1),
+      { points: points.map(clonePoint) },
+    ];
+  }
+
+  private splitCurrentSegmentAtLimit(): void {
+    if (!this.info) {
+      return;
+    }
+
+    const limit = getDrawSegmentPointLimit(this.info.isPen);
+    let segments = ensureDrawingSegments(this.info.segments);
+    let current = segments[segments.length - 1]!;
+
+    while (current.points.length > limit) {
+      const frozenPoints = current.points.slice(0, limit).map(clonePoint);
+      const overlapPoint = frozenPoints[frozenPoints.length - 1];
+      const overflowPoints = current.points.slice(limit).map(clonePoint);
+      if (!overlapPoint || overflowPoints.length === 0) {
+        break;
+      }
+
+      const nextCurrent: DrawShapeSegment = {
+        points: [clonePoint(overlapPoint), ...overflowPoints],
+      };
+      segments = [
+        ...segments.slice(0, -1),
+        { points: frozenPoints },
+        nextCurrent,
+      ];
+      current = nextCurrent;
+    }
+
+    this.info.segments = segments;
+  }
+}
+
+function toLocalDrawPoint(
+  pagePoint: Vec,
+  originPagePoint: Vec,
+  pressure: number,
+  isPen: boolean,
+): DrawShapePoint {
+  return {
+    x: pagePoint.x - originPagePoint.x,
+    y: pagePoint.y - originPagePoint.y,
+    ...(isPen && pressure > 0 ? { pressure } : null),
+  };
+}
+
+function clonePoint(point: DrawShapePoint): DrawShapePoint {
+  return {
+    x: point.x,
+    y: point.y,
+    ...(point.pressure === undefined ? null : { pressure: point.pressure }),
+    ...(point.segment === undefined ? null : { segment: point.segment }),
+  };
+}
+
+function getCurrentSegmentPoints(info: DrawingInfo): DrawShapePoint[] {
+  const segments = ensureDrawingSegments(info.segments);
+  const current = segments[segments.length - 1];
+  return current ? current.points.map(clonePoint) : [];
+}
+
+function ensureDrawingSegments(
+  segments: readonly DrawShapeSegment[],
+): DrawShapeSegment[] {
+  return segments.length > 0 ? [...segments] : [{ points: [] }];
+}
+
+function getDrawShapePropsForSegments(
+  segments: readonly DrawShapeSegment[],
+): Pick<DrawShapeProps, "segments"> {
+  const nextSegments = ensureDrawingSegments(segments);
+  return {
+    segments: cloneDrawShapeSegmentsForUpdate(nextSegments),
+  };
+}
+
+function arePointsEqual(a: DrawShapePoint, b: DrawShapePoint): boolean {
+  return (
+    a.x === b.x &&
+    a.y === b.y &&
+    a.pressure === b.pressure &&
+    a.segment === b.segment
+  );
+}
+
+function scheduleDrawUpdateFrame(callback: () => void): DrawUpdateFrame {
+  if (typeof requestAnimationFrame === "function") {
+    return {
+      type: "animation",
+      id: requestAnimationFrame(callback),
+    };
+  }
+
+  return {
+    type: "timeout",
+    id: setTimeout(callback, DRAW_UPDATE_FALLBACK_DELAY_MS),
+  };
+}
+
+function cancelDrawUpdateFrame(frame: DrawUpdateFrame): void {
+  if (frame.type === "animation") {
+    cancelAnimationFrame(frame.id);
+    return;
+  }
+
+  clearTimeout(frame.id);
+}

package/_vendor/plugin-draw/canvas.tsx

@@ -0,0 +1,24 @@
+import type {
+  LandCanvasPlugin,
+  ShapeRendererProps,
+} from "@land/canvas-plugin-api";
+import { DrawShapeSvg } from "./DrawShapeRenderer";
+import type { DrawShapeRecord } from "./types";
+
+export function createDrawCanvasPlugin(): LandCanvasPlugin {
+  return {
+    id: "land.draw.react",
+    setup(registerShapeRenderer) {
+      registerShapeRenderer({
+        type: "draw",
+        component: DrawShapeRenderer,
+      });
+    },
+  };
+}
+
+function DrawShapeRenderer({
+  shape,
+}: ShapeRendererProps<DrawShapeRecord>) {
+  return <DrawShapeSvg shape={shape} />;
+}