@yuzhouu/canvas-kit 0.1.2

package/_vendor/canvas-core/editor/managers/BindingManager.ts

@@ -0,0 +1,262 @@
+import type { ChangeSource } from "@land/store";
+import {
+  type BindingId,
+  type BindingRecord,
+  type ShapeId,
+  type ShapeRecord,
+} from "../../schema/records";
+import type { Editor } from "../Editor";
+import { getEditorStore } from "../internal";
+import type { BindingUtilEffect } from "../../bindings/BindingUtil";
+
+export interface ShapeChangeEntry {
+  before: ShapeRecord;
+  after: ShapeRecord;
+}
+
+export class BindingManager {
+  constructor(private readonly editor: Editor) {}
+
+  getBindingsFromShape(shapeId: ShapeId): BindingRecord[] {
+    return this.editor.queries
+      .getBindingIdsFromShape(shapeId)
+      .map((id) => this.editor.queries.getBinding(id))
+      .filter((binding): binding is BindingRecord => !!binding);
+  }
+
+  getBindingsToShape(shapeId: ShapeId): BindingRecord[] {
+    return this.editor.queries
+      .getBindingIdsToShape(shapeId)
+      .map((id) => this.editor.queries.getBinding(id))
+      .filter((binding): binding is BindingRecord => !!binding);
+  }
+
+  getBindingsForShape(shapeId: ShapeId): BindingRecord[] {
+    return this.editor.queries
+      .getBindingIdsForShape(shapeId)
+      .map((id) => this.editor.queries.getBinding(id))
+      .filter((binding): binding is BindingRecord => !!binding);
+  }
+
+  getConflictingBindings(binding: BindingRecord): BindingRecord[] {
+    const exclusiveKey = this.getExclusiveBindingKey(binding);
+    if (!exclusiveKey) {
+      return [];
+    }
+
+    return this.getAllBindings().filter(
+      (candidate) =>
+        candidate.id !== binding.id &&
+        candidate.type === binding.type &&
+        this.getExclusiveBindingKey(candidate) === exclusiveKey,
+    );
+  }
+
+  canBind(binding: BindingRecord): boolean {
+    const fromShape = this.editor.getShape(binding.fromId);
+    const toShape = this.editor.getShape(binding.toId);
+    if (!fromShape || !toShape) {
+      return false;
+    }
+
+    return (
+      this.editor.getBindingUtil(binding).canBind?.(
+        this.editor,
+        binding as never,
+        {
+          fromShape,
+          toShape,
+        },
+      ) ?? true
+    );
+  }
+
+  syncCreatedBinding(binding: BindingRecord, source: ChangeSource): void {
+    const effect = this.editor
+      .getBindingUtil(binding)
+      .onBindingCreate?.(this.editor, binding as never);
+    this.applyEffect(effect, source, binding.id);
+  }
+
+  syncUpdatedBinding(
+    before: BindingRecord,
+    after: BindingRecord,
+    source: ChangeSource,
+  ): void {
+    const effect = this.editor
+      .getBindingUtil(after)
+      .onBindingUpdate?.(this.editor, before as never, after as never);
+    this.applyEffect(effect, source, after.id);
+  }
+
+  repairLoadedBindings(source: ChangeSource): void {
+    getEditorStore(this.editor).atomic(() => {
+      const seenExclusiveBindings = new Set<string>();
+
+      for (const binding of this.getAllBindings()) {
+        const fromShape = this.editor.getShape(binding.fromId);
+        const toShape = this.editor.getShape(binding.toId);
+        if (!fromShape || !toShape) {
+          getEditorStore(this.editor).remove([binding.id], source);
+          continue;
+        }
+
+        if (!this.canBind(binding)) {
+          getEditorStore(this.editor).remove([binding.id], source);
+          continue;
+        }
+
+        const exclusiveKey = this.getExclusiveBindingKey(binding);
+        if (exclusiveKey) {
+          if (seenExclusiveBindings.has(exclusiveKey)) {
+            getEditorStore(this.editor).remove([binding.id], source);
+            continue;
+          }
+          seenExclusiveBindings.add(exclusiveKey);
+        }
+
+        const effect = this.editor
+          .getBindingUtil(binding)
+          .onBindingLoad?.(this.editor, binding as never);
+        this.applyEffect(effect, source, binding.id);
+      }
+    }, source);
+  }
+
+  handleShapeChanges(
+    changes: ShapeChangeEntry[],
+    source: ChangeSource,
+    options?: { skipBindingIds?: ReadonlySet<BindingId> },
+  ): void {
+    if (changes.length === 0) {
+      return;
+    }
+
+    for (const change of changes) {
+      for (const binding of this.getBindingsForShape(change.after.id)) {
+        if (options?.skipBindingIds?.has(binding.id)) {
+          continue;
+        }
+        const role = binding.fromId === change.after.id ? "from" : "to";
+        const effect = this.editor
+          .getBindingUtil(binding)
+          .onAfterShapeChange?.(this.editor, binding as never, {
+            before: change.before,
+            after: change.after,
+            role,
+          });
+        this.applyEffect(effect, source, binding.id);
+      }
+    }
+  }
+
+  cleanupBindingsForDeletedShapes(ids: ShapeId[], source: ChangeSource): void {
+    if (ids.length === 0) {
+      return;
+    }
+
+    const deletingIds = new Set(ids);
+    const seenBindings = new Set<BindingId>();
+
+    for (const shapeId of ids) {
+      const shape = this.editor.getShape(shapeId);
+      if (!shape) {
+        continue;
+      }
+
+      for (const binding of this.getBindingsForShape(shapeId)) {
+        if (seenBindings.has(binding.id)) {
+          continue;
+        }
+        seenBindings.add(binding.id);
+
+        const role = binding.fromId === shapeId ? "from" : "to";
+        if (role === "to" && deletingIds.has(binding.fromId)) {
+          getEditorStore(this.editor).remove([binding.id], source);
+          continue;
+        }
+
+        const effect = this.editor
+          .getBindingUtil(binding)
+          .onBeforeDeleteShape?.(this.editor, binding as never, {
+            shape,
+            role,
+          });
+        this.applyEffect(effect, source, binding.id);
+      }
+    }
+  }
+
+  cleanupBindings(ids: BindingId[], source: ChangeSource): void {
+    for (const id of ids) {
+      const binding = this.editor.getBinding(id);
+      if (!binding) {
+        continue;
+      }
+      const effect = this.editor
+        .getBindingUtil(binding)
+        .onBeforeDeleteBinding?.(this.editor, binding as never);
+      this.applyEffect(effect, source, binding.id);
+    }
+  }
+
+  private applyEffect(
+    effect: BindingUtilEffect | void,
+    source: ChangeSource,
+    originBindingId?: BindingId,
+  ): void {
+    if (!effect) {
+      return;
+    }
+
+    if (effect.bindings && effect.bindings.length > 0) {
+      getEditorStore(this.editor).put(effect.bindings, source);
+    }
+
+    if (effect.shapes && effect.shapes.length > 0) {
+      const changes = effect.shapes.flatMap((after) => {
+        const before = this.editor.getShape(after.id);
+        return before ? [{ before, after }] : [];
+      });
+      getEditorStore(this.editor).put(effect.shapes, source);
+      this.handleShapeChanges(
+        changes,
+        source,
+        originBindingId
+          ? { skipBindingIds: new Set([originBindingId]) }
+          : undefined,
+      );
+    }
+
+    if (effect.deleteShapeIds && effect.deleteShapeIds.length > 0) {
+      const idsWithDescendants = this.editor.getShapeIdsIncludingDescendants(
+        effect.deleteShapeIds,
+      );
+      this.cleanupBindingsForDeletedShapes(idsWithDescendants, source);
+      getEditorStore(this.editor).remove(
+        Array.from(new Set(idsWithDescendants)),
+        source,
+      );
+      this.editor.removeShapeIdsFromSelection(idsWithDescendants, source);
+      this.editor.removeShapeIdsFromEditingSession(idsWithDescendants, source);
+    }
+
+    if (effect.deleteBindingIds && effect.deleteBindingIds.length > 0) {
+      getEditorStore(this.editor).remove(
+        Array.from(new Set(effect.deleteBindingIds)),
+        source,
+      );
+    }
+  }
+
+  private getAllBindings(): BindingRecord[] {
+    return this.editor.queries.getBindings();
+  }
+
+  private getExclusiveBindingKey(binding: BindingRecord): string | null {
+    const key = this.editor
+      .getBindingUtil(binding)
+      .getExclusiveBindingKey?.(binding as never);
+    return key ? `${binding.type}:${key}` : null;
+  }
+}

package/_vendor/canvas-core/editor/managers/CameraManager.ts

@@ -0,0 +1,147 @@
+import { type Atom, type Signal, atom } from "@land/signals";
+import type { ChangeSource } from "@land/store";
+import { Vec } from "../../geometry/Vec";
+import { type Camera, DEFAULT_CAMERA } from "../../schema/records";
+import type { PageId } from "../../schema/records";
+import type { Editor } from "../Editor";
+import { clampCameraZoom } from "../camera";
+
+/**
+ * Camera and viewport-screen-size state for the editor. Owns the viewport size
+ * atom (viewport + camera together define the page<->screen transform) and the
+ * camera read/write/transform operations carved out of the Editor facade so the
+ * editor can stay a thinner delegating surface. The Editor exposes thin wrappers
+ * that forward here and re-publishes {@link viewportScreenSizeSignal}.
+ */
+export class CameraManager {
+  private readonly _viewportScreenSizeSignal: Atom<{ w: number; h: number }> =
+    atom<{ w: number; h: number }>("editor.viewportScreenSize", { w: 0, h: 0 });
+  readonly viewportScreenSizeSignal: Signal<{ w: number; h: number }> =
+    this._viewportScreenSizeSignal;
+
+  constructor(private readonly editor: Editor) {}
+
+  getCurrentCamera(): Camera {
+    return this.editor.currentCameraSignal.get();
+  }
+
+  getCamera(pageId: PageId = this.editor.getCurrentPageId()): Camera {
+    return this.editor.sessionSignal.get().pageCameraById[pageId] ?? DEFAULT_CAMERA;
+  }
+
+  pageToScreen(point: Vec, pageId: PageId = this.editor.getCurrentPageId()): Vec {
+    const camera = this.getCamera(pageId);
+    return new (point.constructor as typeof Vec)(
+      (point.x - camera.x) * camera.z,
+      (point.y - camera.y) * camera.z,
+    );
+  }
+
+  screenToPage(point: Vec, pageId: PageId = this.editor.getCurrentPageId()): Vec {
+    const camera = this.getCamera(pageId);
+    return new (point.constructor as typeof Vec)(
+      point.x / camera.z + camera.x,
+      point.y / camera.z + camera.y,
+    );
+  }
+
+  setCamera(
+    partial: Partial<Camera>,
+    options?: { pageId?: PageId; source?: ChangeSource },
+  ): void {
+    const source = options?.source ?? "system";
+    const pageId = options?.pageId ?? this.editor.getCurrentPageId();
+    const current = this.getCamera(pageId);
+    const nextX = typeof partial.x === "number" ? partial.x : current.x;
+    const nextY = typeof partial.y === "number" ? partial.y : current.y;
+    const nextZInput = typeof partial.z === "number" ? partial.z : current.z;
+    const nextCamera: Camera = {
+      x: nextX,
+      y: nextY,
+      z: clampCameraZoom(nextZInput),
+    };
+
+    this.editor.updateSession(
+      {
+        pageCameraById: {
+          ...this.editor.sessionSignal.get().pageCameraById,
+          [pageId]: nextCamera,
+        },
+      },
+      source,
+    );
+  }
+
+  panCamera(delta: Vec, source: ChangeSource = "system"): void {
+    const camera = this.getCurrentCamera();
+    this.setCamera(
+      {
+        x: camera.x + delta.x / camera.z,
+        y: camera.y + delta.y / camera.z,
+      },
+      { source },
+    );
+  }
+
+  zoomCameraAtScreenPoint(
+    screenPoint: Vec,
+    deltaY: number,
+    source: ChangeSource = "system",
+  ): void {
+    const current = this.getCurrentCamera();
+    const nextZoom = clampCameraZoom(current.z * Math.exp(-deltaY * 0.0015));
+    this.zoomCameraToScreenPoint(screenPoint, nextZoom, source);
+  }
+
+  zoomCameraToScreenPoint(
+    screenPoint: Vec,
+    zoom: number,
+    source: ChangeSource = "system",
+  ): void {
+    const nextZoom = clampCameraZoom(zoom);
+    const pagePoint = this.screenToPage(screenPoint);
+
+    this.setCamera(
+      {
+        x: pagePoint.x - screenPoint.x / nextZoom,
+        y: pagePoint.y - screenPoint.y / nextZoom,
+        z: nextZoom,
+      },
+      { source },
+    );
+  }
+
+  zoomAtViewportCenter(deltaY: number, source: ChangeSource = "system"): void {
+    const viewport = this.viewportScreenSizeSignal.get();
+    const center = new Vec(viewport.w / 2, viewport.h / 2);
+    this.zoomCameraAtScreenPoint(center, deltaY, source);
+  }
+
+  resetZoom(source: ChangeSource = "user"): void {
+    const viewport = this.viewportScreenSizeSignal.get();
+    const centerScreen = new Vec(viewport.w / 2, viewport.h / 2);
+    const centerPage = this.screenToPage(centerScreen);
+    this.editor.commands.setCamera(
+      {
+        camera: {
+          x: centerPage.x - centerScreen.x,
+          y: centerPage.y - centerScreen.y,
+          z: 1,
+        },
+      },
+      { source },
+    );
+  }
+
+  setViewportScreenSize(size: { w: number; h: number }): void {
+    const nextSize = {
+      w: Math.max(0, size.w),
+      h: Math.max(0, size.h),
+    };
+    const current = this._viewportScreenSizeSignal.get();
+    if (current.w === nextSize.w && current.h === nextSize.h) {
+      return;
+    }
+    this._viewportScreenSizeSignal.set(nextSize);
+  }
+}

package/_vendor/canvas-core/editor/managers/ClipboardManager.ts

@@ -0,0 +1,32 @@
+import type { ShapeId } from "../../schema/records";
+import {
+  createEditorClipboardPayloadFromSelection,
+  duplicateEditorSelection,
+  pasteEditorClipboardPayload,
+  type DuplicateSelectionInput,
+  type EditorClipboardPayload,
+  type PasteClipboardPayloadInput,
+} from "../clipboard";
+import type { Editor } from "../Editor";
+
+/**
+ * Clipboard operations over editor selections. The Editor exposes thin wrappers
+ * that forward here.
+ */
+export class ClipboardManager {
+  constructor(private readonly editor: Editor) {}
+
+  createPayloadFromSelection(): EditorClipboardPayload | null {
+    return createEditorClipboardPayloadFromSelection(this.editor);
+  }
+
+  pastePayload(input: PasteClipboardPayloadInput): ShapeId[] {
+    this.editor.cancelInteractionForCommand();
+    return pasteEditorClipboardPayload(this.editor, input);
+  }
+
+  duplicateSelection(input: DuplicateSelectionInput = {}): ShapeId[] {
+    this.editor.cancelInteractionForCommand();
+    return duplicateEditorSelection(this.editor, input);
+  }
+}

package/_vendor/canvas-core/editor/managers/DocumentSnapshotManager.ts

@@ -0,0 +1,256 @@
+import type { ChangeSource } from "@land/store";
+import {
+  DEFAULT_CAMERA,
+  DEFAULT_PAGE_ID,
+  DEFAULT_SESSION_ID,
+  createDefaultPage,
+  createDefaultSession,
+  isAssetRecord,
+  isBindingRecord,
+  isDocumentRecord,
+  isPageRecord,
+  isSessionRecord,
+  isShapeRecord,
+  type EditorRecord,
+  type PageId,
+  type SessionRecord,
+  type ShapeId,
+} from "../../schema/records";
+import {
+  SnapshotParseError,
+  parseDocumentSnapshot,
+  parseSessionSnapshot,
+  type DocumentSnapshot,
+  type SessionSnapshot,
+} from "../../schema/snapshots";
+import type { Editor } from "../Editor";
+import { getShapePageIdFromParentChain } from "../editorComputedHelpers";
+import { getEditorStore } from "../internal";
+
+/**
+ * Document/session snapshot serialization, restore, and post-restore repair.
+ * The Editor exposes thin wrappers that forward here.
+ */
+export class DocumentSnapshotManager {
+  constructor(private readonly editor: Editor) {}
+
+  buildInitialRecords(
+    documentSnapshot: unknown,
+    sessionSnapshot: unknown,
+  ): EditorRecord[] {
+    const parsedDocumentSnapshot =
+      this.parseInitialDocumentSnapshot(documentSnapshot);
+    const parsedSessionSnapshot =
+      this.parseInitialSessionSnapshot(sessionSnapshot);
+
+    const documentRecords = parsedDocumentSnapshot.records.length
+      ? parsedDocumentSnapshot.records
+      : [createDefaultPage()];
+    const session = parsedSessionSnapshot.records[0] ?? createDefaultSession();
+
+    return [...documentRecords, session];
+  }
+
+  getDocumentSnapshot(): DocumentSnapshot {
+    const records = this.editor.store.getAll();
+    const pages = this.editor.getPages();
+    const assets = records
+      .filter(isAssetRecord)
+      .sort((left, right) => left.id.localeCompare(right.id));
+    const shapes = records.filter(isShapeRecord).sort((left, right) => {
+      if (left.parentId === right.parentId) {
+        return left.index.localeCompare(right.index);
+      }
+      return left.parentId.localeCompare(right.parentId);
+    });
+    const bindings = records
+      .filter(isBindingRecord)
+      .sort((left, right) => left.id.localeCompare(right.id));
+
+    return {
+      schemaVersion: 1,
+      records: [...pages, ...assets, ...shapes, ...bindings],
+    };
+  }
+
+  getSessionSnapshot(): SessionSnapshot {
+    return {
+      schemaVersion: 1,
+      records: [this.editor.sessionSignal.get()],
+    };
+  }
+
+  loadDocumentSnapshot(
+    snapshot: unknown,
+    options?: { source?: ChangeSource },
+  ): void {
+    const source = options?.source ?? "system";
+    const parsed = parseDocumentSnapshot(
+      snapshot,
+      this.editor.shapeUtils,
+      this.editor.bindingUtils,
+    );
+    this.editor.cancelInteractionAndClearTransients("restore");
+    this.editor.editing.end({ runEditEnd: false, source });
+    const session = this.editor.sessionSignal.get();
+    getEditorStore(this.editor).replaceAll([...parsed.records, session], source);
+    this.syncAfterDocumentSnapshotLoad(source);
+  }
+
+  loadSessionSnapshot(
+    snapshot: unknown,
+    options?: { source?: ChangeSource },
+  ): void {
+    const source = options?.source ?? "system";
+    const session =
+      parseSessionSnapshot(snapshot).records[0] ?? createDefaultSession();
+    const documentRecords = getEditorStore(this.editor)
+      .getAll()
+      .filter(isDocumentRecord);
+    this.editor.cancelInteractionAndClearTransients("restore");
+    this.editor.editing.end({ runEditEnd: false, source });
+    getEditorStore(this.editor).replaceAll(
+      [...documentRecords, session],
+      source,
+    );
+    this.ensureSessionIntegrity();
+    this.editor.syncToolStateFromSession(source);
+  }
+
+  syncAfterDocumentRestore(): void {
+    this.ensureSessionIntegrity();
+    this.editor.syncShapeCounter();
+    this.editor.syncPageCounter();
+    this.editor.syncBindingCounter();
+    this.editor.syncAssetCounter();
+  }
+
+  ensureSessionIntegrity(): void {
+    const store = getEditorStore(this.editor);
+    const records = store.getAll();
+    const pages = records
+      .filter(isPageRecord)
+      .sort((left, right) => left.index.localeCompare(right.index));
+    const fallbackPageId = pages[0]?.id ?? DEFAULT_PAGE_ID;
+    const pageIds = new Set(pages.map((record) => record.id));
+    const shapes = records.filter(isShapeRecord);
+    const shapeIds = new Set(shapes.map((record) => record.id));
+    const shapeById = new Map(shapes.map((record) => [record.id, record]));
+    const shapePageById = new Map<ShapeId, PageId>();
+    for (const shape of shapes) {
+      shapePageById.set(
+        shape.id,
+        getShapePageIdFromParentChain(shape, shapeById, pageIds) ??
+          fallbackPageId,
+      );
+    }
+    const currentSession = records.find(
+      (record) => record.id === DEFAULT_SESSION_ID,
+    );
+    const session = isSessionRecord(currentSession)
+      ? currentSession
+      : createDefaultSession(fallbackPageId);
+
+    const nextSession: SessionRecord = {
+      ...session,
+      currentPageId: pageIds.has(session.currentPageId)
+        ? session.currentPageId
+        : fallbackPageId,
+      pageCameraById: this.repairCameraByPage(session.pageCameraById, pageIds),
+      pageSelectedShapeIdsById: this.repairSelectionByPage(
+        session.pageSelectedShapeIdsById,
+        pageIds,
+        shapeIds,
+        shapePageById,
+      ),
+    };
+
+    store.put([nextSession], "system");
+  }
+
+  private syncAfterDocumentSnapshotLoad(source: ChangeSource): void {
+    this.syncAfterDocumentRestore();
+    this.editor.history.clear();
+    this.editor.bindings.repairLoadedBindings(source);
+  }
+
+  private repairCameraByPage(
+    cameraByPage: SessionRecord["pageCameraById"],
+    pageIds: Set<PageId>,
+  ): SessionRecord["pageCameraById"] {
+    const nextCameraByPage: SessionRecord["pageCameraById"] = {};
+
+    for (const pageId of pageIds) {
+      const camera = cameraByPage[pageId] ?? DEFAULT_CAMERA;
+      nextCameraByPage[pageId] = {
+        x: Number.isFinite(camera.x) ? camera.x : DEFAULT_CAMERA.x,
+        y: Number.isFinite(camera.y) ? camera.y : DEFAULT_CAMERA.y,
+        z: Math.min(
+          8,
+          Math.max(
+            0.1,
+            Number.isFinite(camera.z) ? camera.z : DEFAULT_CAMERA.z,
+          ),
+        ),
+      };
+    }
+
+    return nextCameraByPage;
+  }
+
+  private repairSelectionByPage(
+    selectionByPage: SessionRecord["pageSelectedShapeIdsById"],
+    pageIds: Set<PageId>,
+    shapeIds: Set<ShapeId>,
+    shapePageById: Map<ShapeId, PageId>,
+  ): SessionRecord["pageSelectedShapeIdsById"] {
+    const nextSelectionByPage: SessionRecord["pageSelectedShapeIdsById"] = {};
+
+    for (const pageId of pageIds) {
+      nextSelectionByPage[pageId] = Array.from(
+        new Set(
+          (selectionByPage[pageId] ?? []).filter(
+            (shapeId) =>
+              shapeIds.has(shapeId) && shapePageById.get(shapeId) === pageId,
+          ),
+        ),
+      );
+    }
+
+    return nextSelectionByPage;
+  }
+
+  private parseInitialDocumentSnapshot(snapshot: unknown): DocumentSnapshot {
+    if (!snapshot) {
+      return { schemaVersion: 1, records: [createDefaultPage()] };
+    }
+
+    try {
+      return parseDocumentSnapshot(
+        snapshot,
+        this.editor.shapeUtils,
+        this.editor.bindingUtils,
+      );
+    } catch (error) {
+      if (!(error instanceof SnapshotParseError)) {
+        throw error;
+      }
+      return { schemaVersion: 1, records: [createDefaultPage()] };
+    }
+  }
+
+  private parseInitialSessionSnapshot(snapshot: unknown): SessionSnapshot {
+    if (!snapshot) {
+      return { schemaVersion: 1, records: [createDefaultSession()] };
+    }
+
+    try {
+      return parseSessionSnapshot(snapshot);
+    } catch (error) {
+      if (!(error instanceof SnapshotParseError)) {
+        throw error;
+      }
+      return { schemaVersion: 1, records: [createDefaultSession()] };
+    }
+  }
+}