@yuzhouu/canvas-kit 0.1.2 → 0.1.4

package/_vendor/plugin-draw/DrawTool.ts

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

@@ -1,24 +0,0 @@
-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} />;
-}