@yuzhouu/canvas-kit 0.1.2

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

@@ -0,0 +1,308 @@
+import { UNINITIALIZED, computed, type Signal } from "@land/signals";
+import type {
+  Editor,
+  EditorOverlayDebugState,
+} from "../Editor";
+import {
+  areOverlayDebugStatesEqual,
+  getBoxDebugSummary,
+} from "../editorComputedHelpers";
+import type {
+  SelectionOverlayFrameState,
+  SelectionOverlayFrameGeometryState,
+  SelectionOverlayFrameStyleState,
+  SelectionOverlayHandleAnchorsState,
+  SelectionOverlayHandleCountsState,
+  SelectionOverlayHandlesState,
+  SelectionOverlayState,
+} from "../selection";
+import {
+  areSelectionOverlayFrameGeometryArraysEqual,
+  areSelectionOverlayFrameGeometryStatesEqual,
+  areSelectionOverlayFrameStatesEqual,
+  areSelectionOverlayFrameStyleStatesEqual,
+  areSelectionOverlayHandleAnchorsStatesEqual,
+  areSelectionOverlayHandleCountsStatesEqual,
+  areSelectionOverlayHandlesStatesEqual,
+  getSelectionHandleAnchorsState,
+  isSingleSelectionPathOverlay,
+  materializeSelectionHandleState,
+} from "../selectionOverlay";
+
+const SELECTION_STROKE_WIDTH_SCREEN = 2;
+const SELECTION_CORNER_RADIUS_SCREEN = 3;
+
+interface OverlayDebugSnapshot {
+  metrics: EditorOverlayDebugState;
+  frame: SelectionOverlayFrameState | null;
+  handleCounts: SelectionOverlayHandleCountsState | null;
+}
+
+/**
+ * Selection overlay derived state: frame geometry/style, handles, combined
+ * overlay state, companion frames, and debug metrics. The Editor exposes thin
+ * signal aliases that forward here.
+ */
+export class SelectionOverlayManager {
+  readonly frameGeometrySignal: Signal<SelectionOverlayFrameGeometryState | null>;
+  readonly companionFrameGeometriesSignal: Signal<
+    SelectionOverlayFrameGeometryState[]
+  >;
+  readonly arrowPathSignal: Signal<string | null>;
+  readonly frameStyleSignal: Signal<SelectionOverlayFrameStyleState>;
+  readonly frameSignal: Signal<SelectionOverlayFrameState | null>;
+  readonly handleAnchorsSignal: Signal<SelectionOverlayHandleAnchorsState | null>;
+  readonly handlesSignal: Signal<SelectionOverlayHandlesState | null>;
+  readonly handleCountsSignal: Signal<SelectionOverlayHandleCountsState | null>;
+  readonly overlaySignal: Signal<SelectionOverlayState | null>;
+  readonly debugStateSignal: Signal<EditorOverlayDebugState>;
+
+  private readonly debugStateSnapshotSignal: Signal<OverlayDebugSnapshot>;
+
+  constructor(private readonly editor: Editor) {
+    this.frameGeometrySignal =
+      computed<SelectionOverlayFrameGeometryState | null>(
+        "editor.selectionOverlayFrameGeometry",
+        () => {
+          const selectedShapeItems =
+            editor.selectedShapeOverlayItemsSignal.get();
+          if (selectedShapeItems.length === 0) {
+            return null;
+          }
+          if (isSingleSelectionPathOverlay(selectedShapeItems)) {
+            return null;
+          }
+          const selectionFrame = editor.getSelectionFrame();
+          if (!selectionFrame) {
+            return null;
+          }
+
+          return {
+            bounds: selectionFrame.bounds,
+            rotation: selectionFrame.rotation,
+            rotationCenter: selectionFrame.rotationCenter,
+          };
+        },
+        { isEqual: areSelectionOverlayFrameGeometryStatesEqual },
+      );
+
+    this.companionFrameGeometriesSignal = computed<
+      SelectionOverlayFrameGeometryState[]
+    >(
+      "editor.selectionOverlayCompanionFrameGeometries",
+      () => {
+        if (editor.toolStateSignal.get().activeToolId !== "select") {
+          return [];
+        }
+        const geometries: SelectionOverlayFrameGeometryState[] = [];
+        for (const selectedShape of editor.selectedShapesSignal.get()) {
+          for (const binding of editor.getBindingsForShape(selectedShape.id)) {
+            geometries.push(
+              ...(
+                editor.getBindingUtil(binding).getSelectionCompanionFrameGeometries?.(
+                  editor,
+                  binding as never,
+                  { selectedShape },
+                ) ?? []
+              ),
+            );
+          }
+        }
+        return geometries;
+      },
+      { isEqual: areSelectionOverlayFrameGeometryArraysEqual },
+    );
+
+    this.arrowPathSignal = computed<string | null>(
+      "editor.selectionOverlayArrowPath",
+      () => {
+        const selectedShapeItems = editor.selectedShapeOverlayItemsSignal.get();
+        if (!isSingleSelectionPathOverlay(selectedShapeItems)) {
+          return null;
+        }
+        return selectedShapeItems[0]?.path ?? null;
+      },
+    );
+
+    this.frameStyleSignal = computed<SelectionOverlayFrameStyleState>(
+      "editor.selectionOverlayFrameStyle",
+      () => {
+        const zoom = editor.cameraZoomSignal.get();
+
+        return {
+          strokeWidth: SELECTION_STROKE_WIDTH_SCREEN / zoom,
+          cornerRadius: SELECTION_CORNER_RADIUS_SCREEN / zoom,
+        };
+      },
+      { isEqual: areSelectionOverlayFrameStyleStatesEqual },
+    );
+
+    this.frameSignal = computed<SelectionOverlayFrameState | null>(
+      "editor.selectionOverlayFrame",
+      () => {
+        const frameGeometry = this.frameGeometrySignal.get();
+        if (!frameGeometry) {
+          return null;
+        }
+        const frameStyle = this.frameStyleSignal.get();
+
+        return {
+          ...frameGeometry,
+          ...frameStyle,
+        };
+      },
+      { isEqual: areSelectionOverlayFrameStatesEqual },
+    );
+
+    this.handleAnchorsSignal =
+      computed<SelectionOverlayHandleAnchorsState | null>(
+        "editor.selectionOverlayHandleAnchors",
+        () => {
+          if (editor.toolStateSignal.get().activeToolId !== "select") {
+            return null;
+          }
+          const selectedShapes = editor.selectedShapesSignal.get();
+          if (selectedShapes.length === 0) {
+            return null;
+          }
+          const selectionFrame = editor.getSelectionFrame();
+          const zoom = editor.cameraZoomSignal.get();
+          const isOnlySelected = selectedShapes.length === 1;
+
+          return getSelectionHandleAnchorsState(
+            selectedShapes,
+            selectionFrame,
+            zoom,
+            (shape) =>
+              editor.getShapeUtil(shape).getSelectionHandleAnchors(shape, {
+                isOnlySelected,
+                editor,
+              }),
+            (shape) =>
+              editor.getShapeUtil(shape).canUseSelectionFrameHandles(shape, {
+                editor,
+              }),
+          );
+        },
+        { isEqual: areSelectionOverlayHandleAnchorsStatesEqual },
+      );
+
+    this.handlesSignal = computed<SelectionOverlayHandlesState | null>(
+      "editor.selectionOverlayHandles",
+      () => {
+        const anchors = this.handleAnchorsSignal.get();
+        if (!anchors) {
+          return null;
+        }
+        const zoom = editor.cameraZoomSignal.get();
+        const {
+          resizeHandles,
+          rotateHandles,
+          terminalHandles,
+          middleHandles,
+          customHandles,
+        } = materializeSelectionHandleState(anchors, zoom);
+
+        return {
+          resizeHandles,
+          rotateHandles,
+          terminalHandles,
+          middleHandles,
+          customHandles,
+          strokeWidth: SELECTION_STROKE_WIDTH_SCREEN / zoom,
+        };
+      },
+      { isEqual: areSelectionOverlayHandlesStatesEqual },
+    );
+
+    this.handleCountsSignal =
+      computed<SelectionOverlayHandleCountsState | null>(
+        "editor.selectionOverlayHandleCounts",
+        () => {
+          const anchors = this.handleAnchorsSignal.get();
+          if (!anchors) {
+            return null;
+          }
+
+          return {
+            resizeHandleCount: anchors.resizeHandleAnchors.length,
+            rotateHandleCount: anchors.rotateHandleAnchors.length,
+            terminalHandleCount: anchors.terminalHandleAnchors.length,
+            middleHandleCount: anchors.middleHandleAnchors.length,
+            customHandleCount: anchors.customHandleAnchors.length,
+          };
+        },
+        { isEqual: areSelectionOverlayHandleCountsStatesEqual },
+      );
+
+    this.overlaySignal = computed<SelectionOverlayState | null>(
+      "editor.selectionOverlay",
+      () => {
+        const frame = this.frameSignal.get();
+        const handles = this.handlesSignal.get();
+        if (!frame || !handles) {
+          return null;
+        }
+
+        return {
+          ...frame,
+          ...handles,
+        };
+      },
+    );
+
+    this.debugStateSnapshotSignal = computed<OverlayDebugSnapshot>(
+      "editor.overlayDebugState.snapshot",
+      (previous) => {
+        const frame = this.frameSignal.get();
+        const handleCounts = this.handleCountsSignal.get();
+        const previousSnapshot = previous !== UNINITIALIZED ? previous : null;
+        const frameChanged =
+          !previousSnapshot ||
+          !areSelectionOverlayFrameStatesEqual(previousSnapshot.frame, frame);
+        const handlesChanged =
+          !previousSnapshot ||
+          !areSelectionOverlayHandleCountsStatesEqual(
+            previousSnapshot.handleCounts,
+            handleCounts,
+          );
+        const metrics: EditorOverlayDebugState = {
+          selectionFrameActive: frame !== null,
+          selectionHandlesActive: handleCounts !== null,
+          bindingPreviewActive: editor.bindingPreviewActiveSignal.get(),
+          brushBoxActive: editor.brushBoxActiveSignal.get(),
+          selectionFrameChangeCount:
+            (previousSnapshot?.metrics.selectionFrameChangeCount ?? 0) +
+            (frameChanged ? 1 : 0),
+          selectionHandlesChangeCount:
+            (previousSnapshot?.metrics.selectionHandlesChangeCount ?? 0) +
+            (handlesChanged ? 1 : 0),
+          resizeHandleCount: handleCounts?.resizeHandleCount ?? 0,
+          rotateHandleCount: handleCounts?.rotateHandleCount ?? 0,
+          terminalHandleCount: handleCounts?.terminalHandleCount ?? 0,
+          middleHandleCount: handleCounts?.middleHandleCount ?? 0,
+          customHandleCount: handleCounts?.customHandleCount ?? 0,
+          boundsSummary: getBoxDebugSummary(frame?.bounds ?? null),
+          rotation: frame?.rotation ?? null,
+          strokeWidth: frame?.strokeWidth ?? null,
+        };
+
+        return {
+          metrics,
+          frame,
+          handleCounts,
+        };
+      },
+      {
+        isEqual: (left, right) =>
+          areOverlayDebugStatesEqual(left.metrics, right.metrics),
+      },
+    );
+
+    this.debugStateSignal = computed<EditorOverlayDebugState>(
+      "editor.overlayDebugState.public",
+      () => this.debugStateSnapshotSignal.get().metrics,
+      { isEqual: areOverlayDebugStatesEqual },
+    );
+  }
+}

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

@@ -0,0 +1,226 @@
+import { atom, type Atom, type Signal } from "@land/signals";
+import type { ChangeSource } from "@land/store";
+import type {
+  ShapeEditingEntryRequest,
+  ShapeEditingSession,
+  ShapeId,
+  ShapeRecord,
+} from "../../schema/records";
+import type { StartEditingShapeInput } from "../commands";
+import type { Editor } from "../Editor";
+
+/**
+ * Shape editing lifecycle for the editor: edit-session entry, completion,
+ * cancellation, composition state, and focus-entry requests. The Editor exposes
+ * thin wrappers that forward here.
+ */
+export class ShapeEditingManager {
+  private readonly entryRequestAtom: Atom<ShapeEditingEntryRequest | null> =
+    atom<ShapeEditingEntryRequest | null>(
+      "editor.shapeEditingEntryRequest",
+      null,
+    );
+  readonly entryRequestSignal: Signal<ShapeEditingEntryRequest | null> =
+    this.entryRequestAtom;
+
+  private nextEntryRequestId = 1;
+
+  constructor(private readonly editor: Editor) {}
+
+  canEditShape(shapeOrId: ShapeRecord | ShapeId | null | undefined): boolean {
+    const shape =
+      typeof shapeOrId === "string" ? this.editor.getShape(shapeOrId) : shapeOrId;
+    if (!shape) {
+      return false;
+    }
+    if (shape.isLocked) {
+      return false;
+    }
+    return this.editor.getShapeUtil(shape).canEdit(shape);
+  }
+
+  start(
+    input: StartEditingShapeInput,
+    source: ChangeSource = "user",
+  ): ShapeEditingSession | null {
+    const shape = this.editor.getShape(input.shapeId);
+    if (!shape || !this.canEditShape(shape)) {
+      return null;
+    }
+
+    const currentSession = this.editor.getShapeEditingSession();
+    if (currentSession?.shapeId === shape.id) {
+      const nextSession: ShapeEditingSession = {
+        ...currentSession,
+        entryMode: input.entryMode ?? currentSession.entryMode,
+        caretPagePoint: input.caretPagePoint
+          ? { ...input.caretPagePoint }
+          : currentSession.caretPagePoint,
+      };
+      this.editor.updateSession(
+        {
+          editingShapeId: shape.id,
+          shapeEditingSession: nextSession,
+        },
+        source,
+      );
+      this.publishEntryRequest({
+        shapeId: shape.id,
+        entryMode: nextSession.entryMode,
+        caretPagePoint: nextSession.caretPagePoint,
+      });
+      return nextSession;
+    }
+
+    if (!input.preserveInteraction) {
+      this.editor.cancelInteractionForCommand();
+    }
+    this.end({ runEditEnd: true, source });
+    const markId = input.markId ?? `editing:${shape.id}`;
+    if (!input.reuseExistingMark) {
+      this.editor.history.mark(markId);
+    }
+    const session: ShapeEditingSession = {
+      shapeId: shape.id,
+      markId,
+      entryMode: input.entryMode ?? "focusEnd",
+      caretPagePoint: input.caretPagePoint
+        ? { ...input.caretPagePoint }
+        : undefined,
+      isComposing: false,
+    };
+
+    this.editor.commands.setSelectedShapeIds([shape.id], { source });
+    this.editor.updateSession(
+      {
+        editingShapeId: shape.id,
+        shapeEditingSession: session,
+      },
+      source,
+    );
+    this.publishEntryRequest({
+      shapeId: shape.id,
+      entryMode: session.entryMode,
+      caretPagePoint: session.caretPagePoint,
+    });
+    return session;
+  }
+
+  complete(source: ChangeSource = "user"): boolean {
+    const session = this.editor.getShapeEditingSession();
+    if (!session) {
+      return false;
+    }
+    if (session.isComposing) {
+      return false;
+    }
+
+    this.end({ runEditEnd: true, source });
+    this.editor.history.squashToMark(session.markId, "shape.edit");
+    return true;
+  }
+
+  cancel(source: ChangeSource = "user"): boolean {
+    const session = this.editor.getShapeEditingSession();
+    if (!session) {
+      return false;
+    }
+    if (session.isComposing) {
+      return false;
+    }
+
+    this.editor.updateSession(
+      {
+        editingShapeId: null,
+        shapeEditingSession: null,
+      },
+      source,
+    );
+    this.editor.history.bailToMark(session.markId);
+    return true;
+  }
+
+  setComposition(
+    isComposing: boolean,
+    source: ChangeSource = "system",
+  ): void {
+    const session = this.editor.getShapeEditingSession();
+    if (!session || session.isComposing === isComposing) {
+      return;
+    }
+
+    this.editor.updateSession(
+      {
+        shapeEditingSession: {
+          ...session,
+          isComposing,
+        },
+      },
+      source,
+    );
+  }
+
+  consumeEntryRequest(requestId: number): void {
+    const current = this.entryRequestAtom.get();
+    if (!current || current.id !== requestId) {
+      return;
+    }
+    this.entryRequestAtom.set(null);
+  }
+
+  removeShapeIds(ids: ShapeId[], source: ChangeSource = "system"): void {
+    const session = this.editor.getShapeEditingSession();
+    if (!session || !ids.includes(session.shapeId)) {
+      return;
+    }
+
+    this.editor.updateSession(
+      {
+        editingShapeId: null,
+        shapeEditingSession: null,
+      },
+      source,
+    );
+  }
+
+  end(options: { runEditEnd: boolean; source: ChangeSource }): void {
+    const session = this.editor.getShapeEditingSession();
+    if (!session) {
+      return;
+    }
+
+    this.entryRequestAtom.set(null);
+    const shape = this.editor.getShape(session.shapeId);
+    this.editor.updateSession(
+      {
+        editingShapeId: null,
+        shapeEditingSession: null,
+      },
+      options.source,
+    );
+
+    if (!options.runEditEnd || !shape) {
+      return;
+    }
+
+    const result = this.editor.getShapeUtil(shape).onEditEnd(shape);
+    if (result?.deleteShapeIds && result.deleteShapeIds.length > 0) {
+      this.editor.commands.deleteShapes(result.deleteShapeIds, {
+        source: options.source,
+      });
+    }
+  }
+
+  private publishEntryRequest(
+    input: Omit<ShapeEditingEntryRequest, "id">,
+  ): void {
+    this.entryRequestAtom.set({
+      id: this.nextEntryRequestId++,
+      shapeId: input.shapeId,
+      entryMode: input.entryMode,
+      caretPagePoint: input.caretPagePoint
+        ? { ...input.caretPagePoint }
+        : undefined,
+    });
+  }
+}

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

@@ -0,0 +1,162 @@
+import { Box } from "../../geometry/Box";
+import { Mat } from "../../geometry/Mat";
+import { Vec } from "../../geometry/Vec";
+import type { ShapeId, ShapeRecord } from "../../schema/records";
+import type { Editor } from "../Editor";
+import {
+  getShapeExportBounds,
+  getShapeExportPageBounds,
+  getShapeExportToPageTransform,
+  getShapeGeometry,
+  getShapeLocalBounds,
+  getShapeLocalToPageTransform,
+  getShapePageBounds,
+  getShapePositionedToPageTransform,
+  getShapeRenderBounds,
+  getShapeRenderToPageTransform,
+  type ShapeGeometry,
+} from "../queries/shapeTransforms";
+import { selectionPagePointToLocalPoint } from "../selection";
+import type { SelectionFrame } from "../selection";
+
+/**
+ * Shape and selection geometry facade helpers. Query-backed methods read the
+ * current editor state; compute methods operate on the provided shape snapshot.
+ */
+export class ShapeGeometryManager {
+  constructor(private readonly editor: Editor) {}
+
+  computeShapeBounds(shape: ShapeRecord): Box {
+    return this.editor.getShapeUtil(shape).getBounds(shape);
+  }
+
+  computeShapeLocalBounds(shape: ShapeRecord): Box {
+    return getShapeLocalBounds(shape, this.editor.getShapeUtil(shape));
+  }
+
+  computeShapeRenderBounds(shape: ShapeRecord): Box {
+    return getShapeRenderBounds(shape, this.editor.getShapeUtil(shape));
+  }
+
+  computeShapeExportBounds(shape: ShapeRecord): Box {
+    return getShapeExportBounds(shape, this.editor.getShapeUtil(shape));
+  }
+
+  computeShapeLocalToPageTransform(shape: ShapeRecord): Mat {
+    return getShapeLocalToPageTransform(shape, this.editor.getShapeUtil(shape));
+  }
+
+  computeShapeRenderToPageTransform(shape: ShapeRecord): Mat {
+    return getShapeRenderToPageTransform(shape, this.editor.getShapeUtil(shape));
+  }
+
+  computeShapeExportToPageTransform(shape: ShapeRecord): Mat {
+    return getShapeExportToPageTransform(shape, this.editor.getShapeUtil(shape));
+  }
+
+  computeShapePageBounds(shape: ShapeRecord): Box {
+    return getShapePageBounds(shape, this.editor.getShapeUtil(shape));
+  }
+
+  computeShapeExportPageBounds(shape: ShapeRecord): Box {
+    return getShapeExportPageBounds(shape, this.editor.getShapeUtil(shape));
+  }
+
+  computeShapeGeometry(shape: ShapeRecord): ShapeGeometry {
+    return getShapeGeometry(shape, this.editor.getShapeUtil(shape));
+  }
+
+  computeShapePositionedToPageTransform(shape: ShapeRecord): Mat {
+    return getShapePositionedToPageTransform(
+      shape,
+      this.editor.getShapeUtil(shape),
+    );
+  }
+
+  computeShapePageCenter(shape: ShapeRecord): Vec {
+    return this.computeShapeGeometry(shape).center;
+  }
+
+  computeShapePageCorners(shape: ShapeRecord): Vec[] {
+    return this.computeShapeGeometry(shape).corners;
+  }
+
+  computeShapePageOutlineVertices(shape: ShapeRecord): Vec[] {
+    return this.computeShapeGeometry(shape).outlineVertices;
+  }
+
+  getShapeBounds(shapeId: ShapeId): Box | null {
+    return this.editor.queries.getShapeBounds(shapeId) ?? null;
+  }
+
+  getShapePageBounds(shapeId: ShapeId): Box | null {
+    return this.editor.queries.getShapePageBounds(shapeId) ?? null;
+  }
+
+  getShapeGeometry(shapeId: ShapeId): ShapeGeometry | null {
+    return this.editor.queries.getShapeGeometry(shapeId) ?? null;
+  }
+
+  getShapePositionedToPageTransform(shapeId: ShapeId): Mat | null {
+    return this.editor.queries.getShapePositionedToPageTransform(shapeId) ?? null;
+  }
+
+  getShapePageCenter(shapeId: ShapeId): Vec | null {
+    return this.editor.queries.getShapePageCenter(shapeId) ?? null;
+  }
+
+  getShapePageCorners(shapeId: ShapeId): Vec[] | null {
+    return this.editor.queries.getShapePageCorners(shapeId) ?? null;
+  }
+
+  getShapePageOutlineVertices(shapeId: ShapeId): Vec[] {
+    return this.editor.queries.getShapePageOutlineVertices(shapeId) ?? [];
+  }
+
+  getSelectionPageBounds(): Box | null {
+    return this.editor.queries.getSelectionPageBounds();
+  }
+
+  getSelectionFrame(): SelectionFrame | null {
+    const bounds = this.editor.queries.getSelectionFrameBounds();
+    const rotationCenter = this.editor.queries.getSelectionRotationCenter();
+    if (!bounds || !rotationCenter) {
+      return null;
+    }
+
+    return {
+      bounds,
+      rotation: this.editor.queries.getSelectionRotation(),
+      rotationCenter,
+      hasCompatibleRotation:
+        this.editor.queries.getSelectionHasCompatibleRotation(),
+    };
+  }
+
+  isPointInSelectionBounds(point: Vec): boolean {
+    const selectionFrame = this.getSelectionFrame();
+    if (!selectionFrame) {
+      return false;
+    }
+
+    const localPoint = this.getSelectionFrameLocalBoundsPoint(point);
+    return localPoint ? selectionFrame.bounds.containsPoint(localPoint) : false;
+  }
+
+  getSelectionFrameLocalBoundsPoint(point: Vec): Vec | null {
+    const selectionFrame = this.getSelectionFrame();
+    if (!selectionFrame) {
+      return null;
+    }
+
+    return selectionPagePointToLocalPoint(point, selectionFrame);
+  }
+
+  getSelectionPageOutlineVertices(): Vec[] {
+    return this.editor.queries.getSelectionPageOutlineVertices();
+  }
+
+  getSelectionToolbarAnchorPagePoint(): Vec | null {
+    return this.editor.queries.getSelectionToolbarAnchorPagePoint();
+  }
+}