@yuzhouu/canvas-kit 0.1.2

package/_vendor/canvas-core/editor/HistoryManager.ts

@@ -0,0 +1,83 @@
+import {
+  filterRecordsDiff,
+  hasRecordsDiff,
+} from "@land/store";
+import {
+  StoreHistoryBuffer,
+  type StoreHistoryEntry,
+  type StoreHistoryState,
+} from "@land/store";
+import type { StoreChange } from "@land/store";
+import {
+  type EditorRecord,
+  isDocumentRecord,
+  type DocumentRecord,
+} from "../schema/records";
+import type { Editor } from "./Editor";
+import { getEditorStore } from "./internal";
+
+export type HistoryState = StoreHistoryState;
+
+export class HistoryManager {
+  private readonly buffer = new StoreHistoryBuffer<DocumentRecord>();
+  readonly state = this.buffer.state;
+
+  constructor(private readonly editor: Editor) {
+    getEditorStore(this.editor).listen((change) => {
+      this.handleStoreChange(change);
+    });
+  }
+
+  clear(): void {
+    this.buffer.clear();
+  }
+
+  mark(id: string): void {
+    this.buffer.mark(id);
+  }
+
+  bailToMark(id: string): void {
+    const diff = this.buffer.bailToMark(id);
+    if (diff) {
+      getEditorStore(this.editor).applyDiff(diff, "history");
+      this.editor.syncAfterDocumentRestore();
+    }
+  }
+
+  squashToMark(id: string, label = id): void {
+    this.buffer.squashToMark(id, label);
+  }
+
+  undo(): boolean {
+    const entry = this.buffer.undo();
+    if (!entry) return false;
+
+    getEditorStore(this.editor).applyDiff(entry.inverse, "history");
+    this.editor.syncAfterDocumentRestore();
+    return true;
+  }
+
+  redo(): boolean {
+    const entry = this.buffer.redo();
+    if (!entry) return false;
+
+    getEditorStore(this.editor).applyDiff(entry.forward, "history");
+    this.editor.syncAfterDocumentRestore();
+    return true;
+  }
+
+  getEntries(): readonly StoreHistoryEntry<DocumentRecord>[] {
+    return this.buffer.getEntries();
+  }
+
+  private handleStoreChange(change: StoreChange<EditorRecord>): void {
+    const documentDiff = filterRecordsDiff(change.diff, isDocumentRecord);
+    if (!hasRecordsDiff(documentDiff)) {
+      return;
+    }
+
+    if (change.source === "user") {
+      this.buffer.append(documentDiff);
+    }
+  }
+}

package/_vendor/canvas-core/editor/StateNode.ts

@@ -0,0 +1,162 @@
+import type { Editor } from "./Editor";
+import type {
+  CancelEditorEvent,
+  ClickEditorEvent,
+  EditorEvent,
+  KeyboardEditorEvent,
+  PointerEditorEvent,
+  TickEditorEvent,
+  WheelEditorEvent,
+} from "./events";
+
+export abstract class StateNode {
+  protected readonly children = new Map<string, StateNode>();
+  protected currentChild: StateNode | null = null;
+  protected initial: string | null = null;
+
+  constructor(
+    readonly editor: Editor,
+    readonly id: string,
+    readonly parent?: StateNode,
+  ) {}
+
+  protected addChild(child: StateNode): void {
+    this.children.set(child.id, child);
+  }
+
+  enter(info?: unknown): void {
+    this.onEnter(info);
+    if (!this.initial) return;
+    const child = this.children.get(this.initial);
+    if (!child) {
+      throw new Error(
+        `Missing child state \"${this.initial}\" on \"${this.id}\"`,
+      );
+    }
+    this.currentChild = child;
+    child.enter(info);
+  }
+
+  exit(info?: unknown): void {
+    if (this.currentChild) {
+      this.currentChild.exit(info);
+      this.currentChild = null;
+    }
+    this.onExit(info);
+  }
+
+  transition(id: string, info?: unknown): void {
+    if (!this.parent) {
+      const next = this.children.get(id);
+      if (!next) {
+        throw new Error(
+          `Missing root child state \"${id}\" on tool \"${this.id}\"`,
+        );
+      }
+      if (this.currentChild === next) return;
+      this.currentChild?.exit(info);
+      this.currentChild = next;
+      next.enter(info);
+      return;
+    }
+    this.parent.transition(id, info);
+  }
+
+  isInInitialState(): boolean {
+    if (!this.currentChild) {
+      return true;
+    }
+
+    if (!this.initial) {
+      return false;
+    }
+
+    return (
+      this.currentChild.id === this.initial &&
+      this.currentChild.isInInitialState()
+    );
+  }
+
+  dispatch(event: EditorEvent): void {
+    if (this.currentChild) {
+      this.currentChild.dispatch(event);
+      return;
+    }
+
+    switch (event.type) {
+      case "pointer":
+        this.handlePointerEvent(event);
+        return;
+      case "click":
+        this.handleClickEvent(event);
+        return;
+      case "keyboard":
+        this.handleKeyboardEvent(event);
+        return;
+      case "wheel":
+        this.onWheel(event);
+        return;
+      case "tick":
+        this.onTick(event);
+        return;
+      case "cancel":
+        this.onCancel(event);
+        return;
+    }
+  }
+
+  protected onEnter(_info?: unknown): void {}
+
+  protected onExit(_info?: unknown): void {}
+
+  protected onPointerDown(_event: PointerEditorEvent): void {}
+
+  protected onPointerMove(_event: PointerEditorEvent): void {}
+
+  protected onPointerUp(_event: PointerEditorEvent): void {}
+
+  protected onDoubleClick(_event: ClickEditorEvent): void {}
+
+  protected onCancel(_event: CancelEditorEvent): void {}
+
+  protected onKeyDown(_event: KeyboardEditorEvent): void {}
+
+  protected onKeyUp(_event: KeyboardEditorEvent): void {}
+
+  protected onWheel(_event: WheelEditorEvent): void {}
+
+  protected onTick(_event: TickEditorEvent): void {}
+
+  private handlePointerEvent(event: PointerEditorEvent): void {
+    switch (event.name) {
+      case "pointer_down":
+        this.onPointerDown(event);
+        return;
+      case "pointer_move":
+        this.onPointerMove(event);
+        return;
+      case "pointer_up":
+        this.onPointerUp(event);
+        return;
+      case "pointer_cancel":
+        this.onCancel({ type: "cancel", reason: "pointer_cancel" });
+        return;
+    }
+  }
+
+  private handleClickEvent(event: ClickEditorEvent): void {
+    switch (event.name) {
+      case "double_click":
+        this.onDoubleClick(event);
+        return;
+    }
+  }
+
+  private handleKeyboardEvent(event: KeyboardEditorEvent): void {
+    if (event.name === "key_down") {
+      this.onKeyDown(event);
+      return;
+    }
+    this.onKeyUp(event);
+  }
+}

package/_vendor/canvas-core/editor/camera.ts

@@ -0,0 +1,6 @@
+export const CAMERA_MIN_ZOOM = 0.1;
+export const CAMERA_MAX_ZOOM = 8;
+
+export function clampCameraZoom(zoom: number): number {
+  return Math.min(CAMERA_MAX_ZOOM, Math.max(CAMERA_MIN_ZOOM, zoom));
+}

package/_vendor/canvas-core/editor/clipboard.ts

@@ -0,0 +1,478 @@
+import type { ChangeSource } from "@land/store";
+import { Box } from "../geometry/Box";
+import { Vec } from "../geometry/Vec";
+import type {
+  AssetId,
+  AssetRecord,
+  BindingRecord,
+  PageId,
+  ShapeId,
+  ShapeParentId,
+  ShapeRecord,
+} from "../schema/records";
+import type { Editor } from "./Editor";
+import { getShapeAssetId } from "./editorComputedHelpers";
+import { getEditorStore } from "./internal";
+
+const DEFAULT_PASTE_OFFSET = new Vec(24, 24);
+
+export interface EditorClipboardPayload {
+  type: "land/clipboard";
+  version: 1;
+  source: {
+    app: "land";
+    documentId?: string;
+  };
+  rootShapeIds: readonly ShapeId[];
+  records: {
+    shapes: readonly ShapeRecord[];
+    bindings: readonly BindingRecord[];
+    assets: readonly AssetRecord[];
+  };
+  bounds: {
+    x: number;
+    y: number;
+    w: number;
+    h: number;
+  };
+}
+
+export interface ClipboardAssetSidecar {
+  assetId: AssetId;
+  kind: "local-image-blob";
+  storageKey: string;
+}
+
+export interface PasteClipboardPayloadInput {
+  payload: EditorClipboardPayload;
+  pagePoint?: Vec;
+  offset?: Vec;
+  source?: ChangeSource;
+}
+
+export interface DuplicateSelectionInput {
+  offset?: Vec;
+  source?: ChangeSource;
+}
+
+export function isEditorClipboardPayload(
+  value: unknown,
+): value is EditorClipboardPayload {
+  if (!value || typeof value !== "object") {
+    return false;
+  }
+
+  const candidate = value as Partial<EditorClipboardPayload>;
+  return (
+    candidate.type === "land/clipboard" &&
+    candidate.version === 1 &&
+    !!candidate.records &&
+    Array.isArray(candidate.rootShapeIds) &&
+    Array.isArray(candidate.records.shapes) &&
+    Array.isArray(candidate.records.bindings) &&
+    Array.isArray(candidate.records.assets)
+  );
+}
+
+export function createEditorClipboardPayloadFromSelection(
+  editor: Editor,
+): EditorClipboardPayload | null {
+  const rootShapeIds = getClipboardRootShapeIds(editor);
+  if (rootShapeIds.length === 0) {
+    return null;
+  }
+
+  const shapeIds = getClipboardShapeIds(editor, rootShapeIds);
+  const shapeIdSet = new Set(shapeIds);
+  const shapes = shapeIds
+    .map((shapeId) => editor.getShape(shapeId))
+    .filter((shape): shape is ShapeRecord => !!shape)
+    .map(cloneSerializableRecord);
+  if (shapes.length === 0) {
+    return null;
+  }
+
+  const bindings = getClipboardBindings(editor, shapes, shapeIdSet);
+  const assets = getClipboardAssets(editor, shapes);
+
+  return {
+    type: "land/clipboard",
+    version: 1,
+    source: {
+      app: "land",
+    },
+    rootShapeIds,
+    records: {
+      shapes,
+      bindings,
+      assets,
+    },
+    bounds: getPayloadBounds(editor, shapeIds),
+  };
+}
+
+export function pasteEditorClipboardPayload(
+  editor: Editor,
+  input: PasteClipboardPayloadInput,
+): ShapeId[] {
+  const { payload } = input;
+  if (!isEditorClipboardPayload(payload) || payload.records.shapes.length === 0) {
+    return [];
+  }
+
+  const source = input.source ?? "user";
+  const currentPageId = editor.getCurrentPageId();
+  const offset = getPasteOffset(input);
+  const assetIdMap = new Map<AssetId, AssetId>();
+  const shapeIdMap = new Map<ShapeId, ShapeId>();
+  const pastedRootIds: ShapeId[] = [];
+
+  // Batch the whole paste into a single transaction so it is one undo step.
+  // Nested command atomics participate in this outer transaction.
+  getEditorStore(editor).atomic(() => {
+    const assets = payload.records.assets.map((asset) => {
+      const nextAsset = editor.createAssetRecord({
+        type: asset.type,
+        props: cloneRecordObject(asset.props),
+        meta: cloneRecordObject(asset.meta),
+      });
+      assetIdMap.set(asset.id, nextAsset.id);
+      return nextAsset;
+    });
+
+    if (assets.length > 0) {
+      editor.commands.createAssetsFromRecords(assets, { source });
+    }
+
+    const draftShapes = payload.records.shapes.map((shape) => {
+      const props = remapAssetIdsInRecord(shape.props, assetIdMap);
+      const draft = editor.createShapeRecord({
+        type: shape.type,
+        x: shape.x + offset.x,
+        y: shape.y + offset.y,
+        props,
+        parentId: currentPageId,
+        rotation: shape.rotation,
+        scaleX: shape.scaleX,
+        scaleY: shape.scaleY,
+        opacity: shape.opacity,
+        isHidden: shape.isHidden,
+        isLocked: shape.isLocked,
+        meta: cloneRecordObject(shape.meta),
+      });
+      shapeIdMap.set(shape.id, draft.id);
+      return { original: shape, draft };
+    });
+
+    const shapeRecords = draftShapes.map(({ original, draft }) => ({
+      ...draft,
+      parentId: remapPastedParentId(
+        original.parentId,
+        shapeIdMap,
+        currentPageId,
+      ),
+    }));
+
+    if (shapeRecords.length > 0) {
+      editor.commands.createShapesFromRecords(shapeRecords, { source });
+    }
+
+    for (const binding of payload.records.bindings) {
+      const fromId = shapeIdMap.get(binding.fromId);
+      const toId = shapeIdMap.get(binding.toId);
+      if (!fromId || !toId) {
+        continue;
+      }
+
+      editor.commands.createBinding(
+        {
+          type: binding.type,
+          fromId,
+          toId,
+          props: cloneRecordObject(binding.props),
+          meta: cloneRecordObject(binding.meta),
+        },
+        { source },
+      );
+    }
+  }, source);
+
+  for (const rootShapeId of payload.rootShapeIds) {
+    const pastedShapeId = shapeIdMap.get(rootShapeId);
+    if (pastedShapeId) {
+      pastedRootIds.push(pastedShapeId);
+    }
+  }
+
+  if (pastedRootIds.length > 0) {
+    editor.commands.setSelectedShapeIds(pastedRootIds, { source });
+  }
+
+  return pastedRootIds;
+}
+
+export function duplicateEditorSelection(
+  editor: Editor,
+  input: DuplicateSelectionInput = {},
+): ShapeId[] {
+  const payload = createEditorClipboardPayloadFromSelection(editor);
+  if (!payload) {
+    return [];
+  }
+
+  return pasteEditorClipboardPayload(editor, {
+    payload,
+    offset: input.offset ?? DEFAULT_PASTE_OFFSET,
+    source: input.source,
+  });
+}
+
+function getClipboardRootShapeIds(editor: Editor): ShapeId[] {
+  const selectedShapeIds = new Set(editor.getSelectedShapeIds());
+  if (selectedShapeIds.size === 0) {
+    return [];
+  }
+
+  return editor
+    .getCurrentPageShapeIds()
+    .filter((shapeId) => selectedShapeIds.has(shapeId))
+    .filter((shapeId) => !hasAncestorInSet(editor, shapeId, selectedShapeIds));
+}
+
+function getClipboardShapeIds(
+  editor: Editor,
+  rootShapeIds: readonly ShapeId[],
+): ShapeId[] {
+  const traversalIds = editor.getShapeExportTraversalIds(rootShapeIds);
+  const traversalIdSet = new Set(traversalIds);
+  return editor
+    .getCurrentPageShapeIds()
+    .filter((shapeId) => traversalIdSet.has(shapeId));
+}
+
+function getClipboardBindings(
+  editor: Editor,
+  shapes: readonly ShapeRecord[],
+  shapeIdSet: ReadonlySet<ShapeId>,
+): BindingRecord[] {
+  const bindings: BindingRecord[] = [];
+  const seenBindingIds = new Set<string>();
+
+  for (const shape of shapes) {
+    for (const binding of editor.getBindingsForShape(shape.id)) {
+      if (seenBindingIds.has(binding.id)) {
+        continue;
+      }
+      if (!shapeIdSet.has(binding.fromId) || !shapeIdSet.has(binding.toId)) {
+        continue;
+      }
+      seenBindingIds.add(binding.id);
+      bindings.push(cloneSerializableRecord(binding));
+    }
+  }
+
+  return bindings;
+}
+
+function getClipboardAssets(
+  editor: Editor,
+  shapes: readonly ShapeRecord[],
+): AssetRecord[] {
+  const assets: AssetRecord[] = [];
+  const seenAssetIds = new Set<AssetId>();
+
+  for (const shape of shapes) {
+    for (const assetId of getShapeAssetIds(shape)) {
+      if (seenAssetIds.has(assetId)) {
+        continue;
+      }
+      const asset = editor.getAsset(assetId);
+      if (!asset) {
+        continue;
+      }
+      seenAssetIds.add(assetId);
+      assets.push(cloneSerializableRecord(asset));
+    }
+  }
+
+  return assets;
+}
+
+function getPayloadBounds(
+  editor: Editor,
+  shapeIds: readonly ShapeId[],
+): EditorClipboardPayload["bounds"] {
+  const boxes = shapeIds
+    .map((shapeId) => editor.getShapePageBounds(shapeId))
+    .filter((box): box is Box => !!box);
+  const bounds = unionBoxes(boxes) ?? new Box(0, 0, 0, 0);
+
+  return {
+    x: bounds.x,
+    y: bounds.y,
+    w: bounds.w,
+    h: bounds.h,
+  };
+}
+
+function getPasteOffset(input: PasteClipboardPayloadInput): Vec {
+  const bounds = input.payload.bounds;
+  if (input.pagePoint) {
+    return input.pagePoint.sub(
+      new Vec(bounds.x + bounds.w / 2, bounds.y + bounds.h / 2),
+    );
+  }
+
+  return input.offset ?? DEFAULT_PASTE_OFFSET;
+}
+
+function remapPastedParentId(
+  parentId: ShapeParentId,
+  shapeIdMap: ReadonlyMap<ShapeId, ShapeId>,
+  currentPageId: PageId,
+): ShapeParentId {
+  if (!parentId.startsWith("shape:")) {
+    return currentPageId;
+  }
+
+  return shapeIdMap.get(parentId as ShapeId) ?? currentPageId;
+}
+
+function hasAncestorInSet(
+  editor: Editor,
+  shapeId: ShapeId,
+  shapeIdSet: ReadonlySet<ShapeId>,
+): boolean {
+  const seen = new Set<ShapeId>([shapeId]);
+  let shape = editor.getShape(shapeId);
+
+  while (shape?.parentId.startsWith("shape:")) {
+    const parentId = shape.parentId as ShapeId;
+    if (shapeIdSet.has(parentId)) {
+      return true;
+    }
+    if (seen.has(parentId)) {
+      return false;
+    }
+    seen.add(parentId);
+    shape = editor.getShape(parentId);
+  }
+
+  return false;
+}
+
+function getShapeAssetIds(shape: ShapeRecord): AssetId[] {
+  const assetIds: AssetId[] = [];
+  const seenAssetIds = new Set<AssetId>();
+  const topLevelAssetId = getShapeAssetId(shape);
+  if (topLevelAssetId) {
+    seenAssetIds.add(topLevelAssetId);
+    assetIds.push(topLevelAssetId);
+  }
+
+  collectAssetIdsFromValue(shape.props, seenAssetIds, assetIds);
+  return assetIds;
+}
+
+function collectAssetIdsFromValue(
+  value: unknown,
+  seenAssetIds: Set<AssetId>,
+  assetIds: AssetId[],
+): void {
+  if (isAssetId(value)) {
+    if (!seenAssetIds.has(value)) {
+      seenAssetIds.add(value);
+      assetIds.push(value);
+    }
+    return;
+  }
+
+  if (Array.isArray(value)) {
+    for (const item of value) {
+      collectAssetIdsFromValue(item, seenAssetIds, assetIds);
+    }
+    return;
+  }
+
+  if (!value || typeof value !== "object") {
+    return;
+  }
+
+  for (const nested of Object.values(value)) {
+    collectAssetIdsFromValue(nested, seenAssetIds, assetIds);
+  }
+}
+
+function remapAssetIdsInRecord(
+  record: object,
+  assetIdMap: ReadonlyMap<AssetId, AssetId>,
+): Record<string, unknown> {
+  return remapAssetIdsInValue(record, assetIdMap) as Record<string, unknown>;
+}
+
+function remapAssetIdsInValue(
+  value: unknown,
+  assetIdMap: ReadonlyMap<AssetId, AssetId>,
+): unknown {
+  if (isAssetId(value)) {
+    return assetIdMap.get(value) ?? value;
+  }
+
+  if (Array.isArray(value)) {
+    return value.map((item) => remapAssetIdsInValue(item, assetIdMap));
+  }
+
+  if (!value || typeof value !== "object") {
+    return value;
+  }
+
+  const next: Record<string, unknown> = {};
+  for (const [key, nested] of Object.entries(value)) {
+    next[key] = remapAssetIdsInValue(nested, assetIdMap);
+  }
+  return next;
+}
+
+function cloneRecordObject(value: object): Record<string, unknown> {
+  return cloneSerializableRecord(value) as Record<string, unknown>;
+}
+
+function cloneSerializableRecord<T>(value: T): T {
+  if (Array.isArray(value)) {
+    return value.map(cloneSerializableRecord) as T;
+  }
+
+  if (!value || typeof value !== "object") {
+    return value;
+  }
+
+  const next: Record<string, unknown> = {};
+  for (const [key, nested] of Object.entries(value)) {
+    next[key] = cloneSerializableRecord(nested);
+  }
+  return next as T;
+}
+
+function isAssetId(value: unknown): value is AssetId {
+  return typeof value === "string" && value.startsWith("asset:");
+}
+
+function unionBoxes(boxes: readonly Box[]): Box | null {
+  if (boxes.length === 0) {
+    return null;
+  }
+
+  let minX = Infinity;
+  let minY = Infinity;
+  let maxX = -Infinity;
+  let maxY = -Infinity;
+
+  for (const box of boxes) {
+    minX = Math.min(minX, box.minX);
+    minY = Math.min(minY, box.minY);
+    maxX = Math.max(maxX, box.maxX);
+    maxY = Math.max(maxY, box.maxY);
+  }
+
+  return new Box(minX, minY, maxX - minX, maxY - minY);
+}