@yuzhouu/canvas-kit 0.1.2

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

@@ -0,0 +1,347 @@
+import { UNINITIALIZED, computed, type Signal } from "@land/signals";
+import type { Box } from "../../geometry/Box";
+import type { ShapeId, ShapeRecord } from "../../schema/records";
+import type {
+  Editor,
+  EditorRenderHostDebugState,
+  RenderItem,
+} from "../Editor";
+import {
+  areRenderHostDebugStatesEqual,
+  areRenderItemsEqual,
+  areShapeIdArraysEqual,
+  areShapeIdSetsEqual,
+} from "../editorComputedHelpers";
+import {
+  collectRetainedShapeRanges,
+  doRangesContainRanges,
+  formatShapeIndexRanges,
+  getExpandedRetainedBaseShapeRanges,
+  getExpandedRetainedShapeRanges,
+  getRetainedRenderWindowExtraShapeBudget,
+  getShapeIdArrayChangeCounts,
+  getShapeIndexRangeSpan,
+  getShapeIndexRangesForShapeIds,
+  getShapeWindowSnapshot,
+  mergeShapeIndexRanges,
+  type ShapeWindowSnapshot,
+} from "../renderWindow";
+
+interface RenderHostDebugSnapshot {
+  metrics: EditorRenderHostDebugState;
+  retainedShapeIds: ShapeId[];
+}
+
+/**
+ * Render culling and retained-window signals for the editor render host. The
+ * Editor exposes thin signal aliases that forward here.
+ */
+export class RenderWindowManager {
+  readonly shapeRenderOrderByIdSignal: Signal<Map<ShapeId, number>>;
+  readonly culledShapeIdsSignal: Signal<ShapeId[]>;
+  readonly culledShapeIdSetSignal: Signal<Set<ShapeId>>;
+  readonly selectedShapeIdsOutsideCulledSignal: Signal<ShapeId[]>;
+  readonly selectedShapeIdsOutsideCulledSetSignal: Signal<Set<ShapeId>>;
+  readonly renderVisibleShapeIdsSignal: Signal<ShapeId[]>;
+  readonly retainedShapeIdsSignal: Signal<ShapeId[]>;
+  readonly renderVisibleShapeIdSetSignal: Signal<Set<ShapeId>>;
+  readonly renderItemsSignal: Signal<RenderItem[]>;
+  readonly renderHostDebugStateSignal: Signal<EditorRenderHostDebugState>;
+
+  private readonly retainedBaseShapeWindowSnapshotSignal: Signal<ShapeWindowSnapshot>;
+  private readonly retainedShapeWindowSnapshotSignal: Signal<ShapeWindowSnapshot>;
+  private readonly renderHostDebugStateSnapshotSignal: Signal<RenderHostDebugSnapshot>;
+
+  constructor(private readonly editor: Editor) {
+    this.shapeRenderOrderByIdSignal = computed<Map<ShapeId, number>>(
+      "editor.shapeRenderOrderById",
+      () => {
+        const orderById = new Map<ShapeId, number>();
+        for (const [index, shapeId] of editor.currentPageShapeIdsSignal
+          .get()
+          .entries()) {
+          orderById.set(shapeId, index);
+        }
+        return orderById;
+      },
+    );
+
+    this.culledShapeIdsSignal = computed<ShapeId[]>(
+      "editor.culledShapeIds",
+      () => {
+        const currentPageId = editor.getCurrentPageId();
+        const viewportBounds = editor.renderViewportPageBoundsSignal.get();
+        return viewportBounds
+          ? editor.spatialIndex.getShapeIdsInViewport(viewportBounds, {
+              pageId: currentPageId,
+            })
+          : editor.currentPageShapeIdsSignal.get();
+      },
+      { isEqual: areShapeIdArraysEqual },
+    );
+
+    this.retainedBaseShapeWindowSnapshotSignal =
+      computed<ShapeWindowSnapshot>(
+        "editor.retainedBaseShapeWindowSnapshot",
+        (previous) => {
+          const pageShapeIds = editor.currentPageShapeIdsSignal.get();
+          const viewportReady = editor.viewportPageBoundsSignal.get() !== null;
+          const nextShapeIds = this.culledShapeIdsSignal.get();
+          const pageIndexById = this.getPageIndexById(pageShapeIds);
+          const nextRanges = getShapeIndexRangesForShapeIds(
+            nextShapeIds,
+            pageIndexById,
+          );
+
+          if (
+            previous !== UNINITIALIZED &&
+            previous &&
+            previous.viewportReady &&
+            nextRanges.length > 0
+          ) {
+            const previousRanges = mergeShapeIndexRanges(
+              previous.ranges.map((range) => ({ ...range })),
+            );
+            const expandedRanges = getExpandedRetainedBaseShapeRanges(
+              previousRanges,
+              nextRanges,
+            );
+
+            if (expandedRanges) {
+              return getShapeWindowSnapshot(pageShapeIds, expandedRanges, {
+                viewportReady,
+              });
+            }
+          }
+
+          return getShapeWindowSnapshot(pageShapeIds, nextRanges, {
+            viewportReady,
+          });
+        },
+        {
+          isEqual: (left, right) =>
+            areShapeIdArraysEqual(left.shapeIds, right.shapeIds),
+        },
+      );
+
+    this.culledShapeIdSetSignal = computed<Set<ShapeId>>(
+      "editor.culledShapeIdSet",
+      () => new Set(this.culledShapeIdsSignal.get()),
+      { isEqual: areShapeIdSetsEqual },
+    );
+
+    this.selectedShapeIdsOutsideCulledSignal = computed<ShapeId[]>(
+      "editor.selectedShapeIdsOutsideCulled",
+      () => {
+        const selectedIds = editor.selectedShapeIdsSignal.get();
+        if (selectedIds.length === 0) {
+          return [];
+        }
+
+        const culledIds = this.culledShapeIdSetSignal.get();
+        return selectedIds.filter((shapeId) => !culledIds.has(shapeId));
+      },
+      { isEqual: areShapeIdArraysEqual },
+    );
+
+    this.selectedShapeIdsOutsideCulledSetSignal = computed<Set<ShapeId>>(
+      "editor.selectedShapeIdsOutsideCulledSet",
+      () => new Set(this.selectedShapeIdsOutsideCulledSignal.get()),
+      { isEqual: areShapeIdSetsEqual },
+    );
+
+    this.renderVisibleShapeIdsSignal = computed<ShapeId[]>(
+      "editor.renderVisibleShapeIds",
+      () => {
+        const selectedIdsOutsideCulled =
+          this.selectedShapeIdsOutsideCulledSignal.get();
+        if (selectedIdsOutsideCulled.length === 0) {
+          return this.culledShapeIdsSignal.get();
+        }
+
+        const culledIds = this.culledShapeIdSetSignal.get();
+        const selectedIds = this.selectedShapeIdsOutsideCulledSetSignal.get();
+        return editor.currentPageShapeIdsSignal
+          .get()
+          .filter(
+            (shapeId) => culledIds.has(shapeId) || selectedIds.has(shapeId),
+          );
+      },
+      { isEqual: areShapeIdArraysEqual },
+    );
+
+    this.retainedShapeWindowSnapshotSignal = computed<ShapeWindowSnapshot>(
+      "editor.retainedShapeWindowSnapshot",
+      (previous) => {
+        const pageShapeIds = editor.currentPageShapeIdsSignal.get();
+        const viewportReady = editor.viewportPageBoundsSignal.get() !== null;
+        const baseShapeIds =
+          this.retainedBaseShapeWindowSnapshotSignal.get().shapeIds;
+        const extraShapeBudget =
+          getRetainedRenderWindowExtraShapeBudget(baseShapeIds.length);
+        const nextRanges = collectRetainedShapeRanges(
+          pageShapeIds,
+          baseShapeIds,
+          this.selectedShapeIdsOutsideCulledSetSignal.get(),
+          extraShapeBudget,
+        );
+
+        if (
+          viewportReady &&
+          previous !== UNINITIALIZED &&
+          previous &&
+          previous.viewportReady &&
+          previous.ranges.length > 0 &&
+          nextRanges.length > 0
+        ) {
+          const previousRanges = mergeShapeIndexRanges(
+            previous.ranges.map((range) => ({ ...range })),
+          );
+
+          if (doRangesContainRanges(previousRanges, nextRanges)) {
+            return getShapeWindowSnapshot(pageShapeIds, previousRanges, {
+              viewportReady,
+            });
+          }
+
+          const expandedRanges = getExpandedRetainedShapeRanges(
+            previousRanges,
+            nextRanges,
+            extraShapeBudget,
+          );
+          if (expandedRanges) {
+            return getShapeWindowSnapshot(pageShapeIds, expandedRanges, {
+              viewportReady,
+            });
+          }
+        }
+
+        return getShapeWindowSnapshot(pageShapeIds, nextRanges, {
+          viewportReady,
+        });
+      },
+      {
+        isEqual: (left, right) =>
+          areShapeIdArraysEqual(left.shapeIds, right.shapeIds),
+      },
+    );
+
+    this.retainedShapeIdsSignal = computed<ShapeId[]>(
+      "editor.retainedShapeIds",
+      () => this.retainedShapeWindowSnapshotSignal.get().shapeIds,
+      { isEqual: areShapeIdArraysEqual },
+    );
+
+    this.renderVisibleShapeIdSetSignal = computed<Set<ShapeId>>(
+      "editor.renderVisibleShapeIdSet",
+      () => new Set(this.renderVisibleShapeIdsSignal.get()),
+      { isEqual: areShapeIdSetsEqual },
+    );
+
+    this.renderItemsSignal = computed<RenderItem[]>(
+      "editor.renderItems",
+      () => {
+        const selectedIds = editor.selectedShapeIdSetSignal.get();
+        const renderItems: RenderItem[] = [];
+        for (const shapeId of this.renderVisibleShapeIdsSignal.get()) {
+          const shape = editor.getShape(shapeId);
+          const bounds = editor.queries.getShapePageBoundsSignal(shapeId).get();
+          if (!shape || shape.isHidden || !bounds) {
+            continue;
+          }
+
+          renderItems.push({
+            id: shape.id,
+            shape,
+            bounds,
+            isSelected: selectedIds.has(shape.id),
+          });
+        }
+
+        return renderItems;
+      },
+      { isEqual: areRenderItemsEqual },
+    );
+
+    this.renderHostDebugStateSnapshotSignal =
+      computed<RenderHostDebugSnapshot>(
+        "editor.renderHostDebugState.snapshot",
+        (previous) => {
+          const culledShapeIds = this.culledShapeIdsSignal.get();
+          const visibleShapeIds = this.renderVisibleShapeIdsSignal.get();
+          const retainedBaseShapeIds =
+            this.retainedBaseShapeWindowSnapshotSignal.get().shapeIds;
+          const retainedShapeIds = this.retainedShapeIdsSignal.get();
+          const selectedOutsideCulled =
+            this.selectedShapeIdsOutsideCulledSignal.get();
+
+          const pageIndexById = this.getPageIndexById(
+            editor.currentPageShapeIdsSignal.get(),
+          );
+
+          const culledRanges = getShapeIndexRangesForShapeIds(
+            culledShapeIds,
+            pageIndexById,
+          );
+          const retainedRanges = getShapeIndexRangesForShapeIds(
+            retainedShapeIds,
+            pageIndexById,
+          );
+          const retainedBaseRanges = getShapeIndexRangesForShapeIds(
+            retainedBaseShapeIds,
+            pageIndexById,
+          );
+          const previousRetainedIds =
+            previous === UNINITIALIZED ? [] : previous.retainedShapeIds;
+          const retainedChange = getShapeIdArrayChangeCounts(
+            previousRetainedIds,
+            retainedShapeIds,
+          );
+
+          const metrics: EditorRenderHostDebugState = {
+            culledCount: culledShapeIds.length,
+            visibleCount: visibleShapeIds.length,
+            retainedCount: retainedShapeIds.length,
+            retainedBaseCount: retainedBaseShapeIds.length,
+            culledRangeCount: culledRanges.length,
+            culledRangeSpan: getShapeIndexRangeSpan(culledRanges),
+            culledRangesSummary: formatShapeIndexRanges(culledRanges),
+            retainedBaseRangeCount: retainedBaseRanges.length,
+            retainedBaseRangeSpan: getShapeIndexRangeSpan(retainedBaseRanges),
+            retainedBaseRangesSummary:
+              formatShapeIndexRanges(retainedBaseRanges),
+            retainedRangeCount: retainedRanges.length,
+            retainedRangeSpan: getShapeIndexRangeSpan(retainedRanges),
+            retainedRangesSummary: formatShapeIndexRanges(retainedRanges),
+            retainedChangeCount: retainedChange.changed,
+            retainedAddedCount: retainedChange.added,
+            retainedRemovedCount: retainedChange.removed,
+            selectedOutsideCulledCount: selectedOutsideCulled.length,
+          };
+
+          return {
+            metrics,
+            retainedShapeIds: retainedShapeIds.slice(),
+          };
+        },
+        {
+          isEqual: (left, right) =>
+            areRenderHostDebugStatesEqual(left.metrics, right.metrics),
+        },
+      );
+
+    this.renderHostDebugStateSignal = computed<EditorRenderHostDebugState>(
+      "editor.renderHostDebugState.public",
+      () => this.renderHostDebugStateSnapshotSignal.get().metrics,
+      { isEqual: areRenderHostDebugStatesEqual },
+    );
+  }
+
+  private getPageIndexById(shapeIds: ShapeId[]): Map<ShapeId, number> {
+    const pageIndexById = new Map<ShapeId, number>();
+    for (const [index, shapeId] of shapeIds.entries()) {
+      pageIndexById.set(shapeId, index);
+    }
+    return pageIndexById;
+  }
+}

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

@@ -0,0 +1,196 @@
+import type { ChangeSource } from "@land/store";
+import { Box } from "../../geometry/Box";
+import { Vec } from "../../geometry/Vec";
+import type { PageId, ShapeRecord } from "../../schema/records";
+import type { Editor } from "../Editor";
+import { clampCameraZoom } from "../camera";
+import { isValidBox } from "../editorComputedHelpers";
+
+export type AlignMode =
+  | "left"
+  | "horizontal-center"
+  | "right"
+  | "top"
+  | "vertical-center"
+  | "bottom";
+
+export type DistributeAxis = "horizontal" | "vertical";
+
+export interface ZoomToBoundsOptions {
+  padding?: number;
+  maxZoom?: number;
+  source?: ChangeSource;
+}
+
+interface AlignableEntry {
+  shape: ShapeRecord;
+  bounds: Box;
+}
+
+/**
+ * Selection alignment / distribution and viewport-fit camera moves. These are
+ * cohesive, page-space selection operations carved out of the Editor facade so
+ * the editor can stay a thinner delegating surface. The Editor exposes thin
+ * wrappers that forward here.
+ */
+export class SelectionLayoutManager {
+  constructor(private readonly editor: Editor) {}
+
+  align(mode: AlignMode, source: ChangeSource = "user"): boolean {
+    const entries = this.getAlignableEntries();
+    if (entries.length < 2) {
+      return false;
+    }
+
+    const union = Box.FromPoints(
+      entries.flatMap((entry) => [
+        new Vec(entry.bounds.minX, entry.bounds.minY),
+        new Vec(entry.bounds.maxX, entry.bounds.maxY),
+      ]),
+    );
+
+    const updates = entries.map(({ shape, bounds }) => {
+      let dx = 0;
+      let dy = 0;
+      switch (mode) {
+        case "left":
+          dx = union.minX - bounds.minX;
+          break;
+        case "right":
+          dx = union.maxX - bounds.maxX;
+          break;
+        case "horizontal-center":
+          dx = union.center.x - bounds.center.x;
+          break;
+        case "top":
+          dy = union.minY - bounds.minY;
+          break;
+        case "bottom":
+          dy = union.maxY - bounds.maxY;
+          break;
+        case "vertical-center":
+          dy = union.center.y - bounds.center.y;
+          break;
+      }
+      return { id: shape.id, x: shape.x + dx, y: shape.y + dy };
+    });
+
+    this.editor.commands.updateShapes(updates, { source });
+    return true;
+  }
+
+  distribute(axis: DistributeAxis, source: ChangeSource = "user"): boolean {
+    const entries = this.getAlignableEntries();
+    if (entries.length < 3) {
+      return false;
+    }
+
+    const isHorizontal = axis === "horizontal";
+    const size = (b: Box) => (isHorizontal ? b.w : b.h);
+    const min = (b: Box) => (isHorizontal ? b.minX : b.minY);
+    const axisKey = isHorizontal ? "x" : "y";
+
+    const sorted = [...entries].sort(
+      (a, b) => a.bounds.center[axisKey] - b.bounds.center[axisKey],
+    );
+
+    const first = sorted[0]!.bounds;
+    const last = sorted[sorted.length - 1]!.bounds;
+    const span = (isHorizontal ? last.maxX : last.maxY) - min(first);
+    const totalSize = sorted.reduce((sum, entry) => sum + size(entry.bounds), 0);
+    const gap = (span - totalSize) / (sorted.length - 1);
+
+    let cursor = min(first);
+    const updates = sorted.map(({ shape, bounds }, index) => {
+      const target =
+        index === 0 || index === sorted.length - 1 ? min(bounds) : cursor;
+      const delta = target - min(bounds);
+      cursor = target + size(bounds) + gap;
+      return isHorizontal
+        ? { id: shape.id, x: shape.x + delta }
+        : { id: shape.id, y: shape.y + delta };
+    });
+
+    this.editor.commands.updateShapes(updates, { source });
+    return true;
+  }
+
+  getCurrentPageBounds(
+    pageId: PageId = this.editor.getCurrentPageId(),
+  ): Box | null {
+    return this.boundsOfShapeIds(this.editor.getCurrentPageShapeIds());
+  }
+
+  zoomToBounds(bounds: Box, options?: ZoomToBoundsOptions): boolean {
+    const viewport = this.editor.viewportScreenSizeSignal.get();
+    if (viewport.w <= 0 || viewport.h <= 0 || !isValidBox(bounds)) {
+      return false;
+    }
+    if (bounds.w <= 0 && bounds.h <= 0) {
+      return false;
+    }
+
+    const padding = options?.padding ?? 64;
+    const usableW = Math.max(1, viewport.w - padding * 2);
+    const usableH = Math.max(1, viewport.h - padding * 2);
+    const zoomX = bounds.w > 0 ? usableW / bounds.w : Infinity;
+    const zoomY = bounds.h > 0 ? usableH / bounds.h : Infinity;
+    const maxZoom = options?.maxZoom ?? 1;
+    const zoom = clampCameraZoom(Math.min(zoomX, zoomY, maxZoom));
+
+    const center = bounds.center;
+    this.editor.setCamera(
+      {
+        x: center.x - viewport.w / 2 / zoom,
+        y: center.y - viewport.h / 2 / zoom,
+        z: zoom,
+      },
+      { source: options?.source ?? "user" },
+    );
+    return true;
+  }
+
+  zoomToFit(options?: ZoomToBoundsOptions): boolean {
+    const bounds = this.getCurrentPageBounds();
+    return bounds ? this.zoomToBounds(bounds, options) : false;
+  }
+
+  zoomToSelection(options?: ZoomToBoundsOptions): boolean {
+    const bounds = this.boundsOfShapeIds(this.editor.getSelectedShapeIds());
+    return bounds ? this.zoomToBounds(bounds, options) : false;
+  }
+
+  private boundsOfShapeIds(ids: Iterable<ShapeRecord["id"]>): Box | null {
+    const points: Vec[] = [];
+    for (const id of ids) {
+      const bounds = this.editor.getShapePageBounds(id);
+      if (bounds && isValidBox(bounds)) {
+        points.push(
+          new Vec(bounds.minX, bounds.minY),
+          new Vec(bounds.maxX, bounds.maxY),
+        );
+      }
+    }
+    if (points.length === 0) {
+      return null;
+    }
+    const box = Box.FromPoints(points);
+    return isValidBox(box) ? box : null;
+  }
+
+  private getAlignableEntries(): AlignableEntry[] {
+    const pageId = this.editor.getCurrentPageId();
+    const entries: AlignableEntry[] = [];
+    for (const id of this.editor.getSelectedShapeIds()) {
+      const shape = this.editor.getShape(id);
+      if (!shape || shape.isLocked || shape.parentId !== pageId) {
+        continue;
+      }
+      const bounds = this.editor.getShapePageBounds(id);
+      if (bounds && isValidBox(bounds)) {
+        entries.push({ shape, bounds });
+      }
+    }
+    return entries;
+  }
+}

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

@@ -0,0 +1,98 @@
+import type { ChangeSource } from "@land/store";
+import type { PageId, SessionRecord, ShapeId } from "../../schema/records";
+import type { Editor } from "../Editor";
+import { areShapeIdArraysEqual } from "../editorComputedHelpers";
+
+/**
+ * Selection-set writes for the editor: which shapes are selected per page. These
+ * are cohesive session-state mutations carved out of the Editor facade so the
+ * editor can stay a thinner delegating surface. Selection geometry and the
+ * rotation/flip transforms live elsewhere (selection.ts /
+ * editorSelectionTransforms.ts); this manager only owns the selected-id sets.
+ * The Editor exposes thin wrappers that forward here.
+ */
+export class SelectionManager {
+  constructor(private readonly editor: Editor) {}
+
+  setSelectedShapeIds(
+    ids: ShapeId[],
+    options?: { pageId?: PageId; source?: ChangeSource },
+  ): void {
+    const editor = this.editor;
+    const pageId = options?.pageId ?? editor.getCurrentPageId();
+    const source = options?.source ?? "user";
+    const uniqueIds = Array.from(
+      new Set(
+        ids.filter((id) => {
+          return (
+            editor.getShapePageId(id) === pageId && !editor.isShapeHidden(id)
+          );
+        }),
+      ),
+    );
+    const session = editor.sessionSignal.get();
+    const currentIds = session.pageSelectedShapeIdsById[pageId] ?? [];
+
+    if (editor.getShapeEditingSession() && !editor.completeEditing(source)) {
+      return;
+    }
+
+    if (areShapeIdArraysEqual(currentIds, uniqueIds)) {
+      return;
+    }
+
+    editor.setBindingPreview(null);
+    editor.setSnapIndicators(null);
+    editor.updateSession(
+      {
+        pageSelectedShapeIdsById: {
+          ...session.pageSelectedShapeIdsById,
+          [pageId]: uniqueIds,
+        },
+      },
+      source,
+    );
+  }
+
+  removeShapeIdsFromSelection(
+    ids: ShapeId[],
+    source: ChangeSource = "system",
+  ): void {
+    if (ids.length === 0) {
+      return;
+    }
+
+    const editor = this.editor;
+    const removedIds = new Set(ids);
+    const session = editor.sessionSignal.get();
+    const nextSelectionByPage: SessionRecord["pageSelectedShapeIdsById"] = {};
+
+    for (const page of editor.getPages()) {
+      nextSelectionByPage[page.id] = (
+        session.pageSelectedShapeIdsById[page.id] ?? []
+      ).filter((shapeId) => !removedIds.has(shapeId));
+    }
+
+    editor.updateSession(
+      { pageSelectedShapeIdsById: nextSelectionByPage },
+      source,
+    );
+  }
+
+  selectAllCurrentPage(source: ChangeSource = "user"): void {
+    const editor = this.editor;
+    const currentPageId = editor.getCurrentPageId();
+    const shapeIds = editor
+      .getCurrentPageShapeIds()
+      .map((shapeId) => editor.getShape(shapeId))
+      .filter(
+        (shape) =>
+          !!shape &&
+          shape.parentId === currentPageId &&
+          !editor.isShapeHidden(shape.id),
+      )
+      .map((shape) => shape!.id);
+
+    editor.commands.setSelectedShapeIds(shapeIds, { source });
+  }
+}