@yuzhouu/canvas-kit 0.1.2

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

@@ -0,0 +1,83 @@
+import type { ChangeSource } from "@land/store";
+import type { EditorRecord } from "../../schema/records";
+
+/**
+ * Type-keyed lifecycle handlers for record changes. Side effects let the editor
+ * and plugins react to record mutations (binding cleanup, selection repair,
+ * delete cleanup) without each command hard-coding the full cleanup sequence.
+ *
+ * `before*` handlers run synchronously inside the mutating command, while the
+ * record still exists, so a handler can cascade further changes in the same
+ * transaction. `after*` handlers run once a command's cleanup phase completes.
+ */
+export type RecordTypeName = EditorRecord["typeName"];
+
+export type BeforeDeleteHandler = (
+  ids: readonly string[],
+  source: ChangeSource,
+) => void;
+
+export type AfterDeleteHandler = (
+  ids: readonly string[],
+  source: ChangeSource,
+) => void;
+
+export class SideEffectManager {
+  private readonly beforeDelete = new Map<RecordTypeName, BeforeDeleteHandler[]>();
+  private readonly afterDelete = new Map<RecordTypeName, AfterDeleteHandler[]>();
+
+  registerBeforeDeleteHandler(
+    typeName: RecordTypeName,
+    handler: BeforeDeleteHandler,
+  ): () => void {
+    return this.register(this.beforeDelete, typeName, handler);
+  }
+
+  registerAfterDeleteHandler(
+    typeName: RecordTypeName,
+    handler: AfterDeleteHandler,
+  ): () => void {
+    return this.register(this.afterDelete, typeName, handler);
+  }
+
+  runBeforeDelete(
+    typeName: RecordTypeName,
+    ids: readonly string[],
+    source: ChangeSource,
+  ): void {
+    if (ids.length === 0) return;
+    for (const handler of this.beforeDelete.get(typeName) ?? []) {
+      handler(ids, source);
+    }
+  }
+
+  runAfterDelete(
+    typeName: RecordTypeName,
+    ids: readonly string[],
+    source: ChangeSource,
+  ): void {
+    if (ids.length === 0) return;
+    for (const handler of this.afterDelete.get(typeName) ?? []) {
+      handler(ids, source);
+    }
+  }
+
+  private register<THandler>(
+    map: Map<RecordTypeName, THandler[]>,
+    typeName: RecordTypeName,
+    handler: THandler,
+  ): () => void {
+    const handlers = map.get(typeName);
+    if (handlers) {
+      handlers.push(handler);
+    } else {
+      map.set(typeName, [handler]);
+    }
+    return () => {
+      const current = map.get(typeName);
+      if (!current) return;
+      const index = current.indexOf(handler);
+      if (index >= 0) current.splice(index, 1);
+    };
+  }
+}

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

@@ -0,0 +1,433 @@
+import { atom, computed, type Signal } from "@land/signals";
+import { Vec } from "../../geometry/Vec";
+import type { ShapeId } from "../../schema/records";
+import type { Editor } from "../Editor";
+import {
+  getSelectionResizeHandleForScale,
+  isSelectionResizeCorner,
+} from "../resizeGeometry";
+import type { SnapIndicatorState } from "../selection";
+import {
+  EPSILON,
+  getBoxSnapPoints,
+  getNearestPointOnOutline,
+  translateBounds,
+  translatePoints,
+} from "./snapGeometry";
+import {
+  chooseAxisSnap,
+  collectGaps,
+  getGapSnap,
+  getPointSnap,
+  getResizeResultAfterNudge,
+  getResizeSnapPointsForHandle,
+  type Gap,
+} from "./snapCalculations";
+import {
+  areIndicatorsEqual,
+  cloneIndicator,
+  getGapIndicator,
+  getHandleAlignIndicator,
+  getHandlePointIndicator,
+  getPointIndicators,
+  getPointIndicatorsWithBoundsExtent,
+} from "./snapIndicators";
+import { SnapSnapshotBuilder } from "./SnapSnapshotBuilder";
+import type {
+  HandleSnapInput,
+  HandleSnapResult,
+  HandleSnapSnapshot,
+  HandleSnapSnapshotInput,
+  ResizeSnapInput,
+  ResizeSnapResult,
+  ResizeSnapSnapshot,
+  SnapAxis,
+  SnapCoordinateSpace,
+  TranslateSnapInput,
+  TranslateSnapResult,
+  TranslateSnapSnapshot,
+} from "./snapTypes";
+
+export class SnapManager {
+  private readonly gapCache = new WeakMap<
+    TranslateSnapSnapshot,
+    { x: Gap[]; y: Gap[] }
+  >();
+  private readonly _indicatorsSignal = atom<SnapIndicatorState[]>(
+    "editor.snapIndicators",
+    [],
+  );
+  readonly indicatorsSignal: Signal<SnapIndicatorState[]> =
+    this._indicatorsSignal;
+  readonly activeSignal = computed<boolean>(
+    "editor.snapIndicatorsActive",
+    () => this._indicatorsSignal.get().length > 0,
+  );
+  private readonly snapshots: SnapSnapshotBuilder;
+
+  constructor(editor: Editor) {
+    this.snapshots = new SnapSnapshotBuilder(editor);
+  }
+
+  setIndicators(indicators: SnapIndicatorState[]): void {
+    const next = indicators.map(cloneIndicator);
+    if (areIndicatorsEqual(this._indicatorsSignal.get(), next)) {
+      return;
+    }
+    this._indicatorsSignal.set(next);
+  }
+
+  clearIndicators(): void {
+    if (this._indicatorsSignal.get().length > 0) {
+      this._indicatorsSignal.set([]);
+    }
+  }
+
+  createTranslateSnapshot({
+    movingShapeIds,
+    coordinateSpace,
+  }: {
+    movingShapeIds: Iterable<ShapeId>;
+    coordinateSpace: SnapCoordinateSpace;
+  }): TranslateSnapSnapshot {
+    const snapshot = this.snapshots.createTranslateSnapshot({
+      movingShapeIds,
+      coordinateSpace,
+    });
+    this.gapCache.set(snapshot, {
+      x: collectGaps(snapshot.nodes, "x"),
+      y: collectGaps(snapshot.nodes, "y"),
+    });
+    return snapshot;
+  }
+
+  createResizeSnapshot({
+    resizingShapeIds,
+    coordinateSpace,
+  }: {
+    resizingShapeIds: Iterable<ShapeId>;
+    coordinateSpace: SnapCoordinateSpace;
+  }): ResizeSnapSnapshot {
+    return this.snapshots.createResizeSnapshot({
+      resizingShapeIds,
+      coordinateSpace,
+    });
+  }
+
+  createHandleSnapshot(input: HandleSnapSnapshotInput): HandleSnapSnapshot {
+    return this.snapshots.createHandleSnapshot(input);
+  }
+
+  snapTranslate(input: TranslateSnapInput): TranslateSnapResult {
+    const selectionBounds = translateBounds(
+      input.initialSelectionBounds,
+      input.dragDelta,
+    );
+    const selectionPoints = translatePoints(
+      getBoxSnapPoints(input.initialSelectionBounds),
+      input.dragDelta,
+    );
+    const visibleGaps = this.gapCache.get(input.snapshot) ?? {
+      x: collectGaps(input.snapshot.nodes, "x"),
+      y: collectGaps(input.snapshot.nodes, "y"),
+    };
+    const xSnap =
+      input.lockedAxis === "y"
+        ? null
+        : chooseAxisSnap(
+            getPointSnap(
+              "x",
+              selectionPoints,
+              input.snapshot.points,
+              input.threshold,
+            ),
+            getGapSnap(
+              "x",
+              selectionBounds,
+              visibleGaps.x,
+              input.threshold,
+            ),
+          );
+    const ySnap =
+      input.lockedAxis === "x"
+        ? null
+        : chooseAxisSnap(
+            getPointSnap(
+              "y",
+              selectionPoints,
+              input.snapshot.points,
+              input.threshold,
+            ),
+            getGapSnap(
+              "y",
+              selectionBounds,
+              visibleGaps.y,
+              input.threshold,
+            ),
+          );
+    const nudge = new Vec(xSnap?.nudge ?? 0, ySnap?.nudge ?? 0);
+    const indicators: SnapIndicatorState[] = [];
+
+    if (xSnap?.type === "points") {
+      indicators.push(
+        ...getPointIndicators(
+          "x",
+          xSnap,
+          nudge,
+          input.snapshot.coordinateSpace,
+        ),
+      );
+    } else if (xSnap?.type === "gaps") {
+      indicators.push(
+        getGapIndicator(xSnap, input.snapshot.coordinateSpace, nudge),
+      );
+    }
+    if (ySnap?.type === "points") {
+      indicators.push(
+        ...getPointIndicators(
+          "y",
+          ySnap,
+          nudge,
+          input.snapshot.coordinateSpace,
+        ),
+      );
+    } else if (ySnap?.type === "gaps") {
+      indicators.push(
+        getGapIndicator(ySnap, input.snapshot.coordinateSpace, nudge),
+      );
+    }
+
+    this.setIndicators(indicators);
+    return { nudge, indicators };
+  }
+
+  snapResize(input: ResizeSnapInput): ResizeSnapResult {
+    const snapHandleId = getSelectionResizeHandleForScale({
+      handleId: input.handleId,
+      scaleX: input.scaleX,
+      scaleY: input.scaleY,
+    });
+    const selectionPoints = getResizeSnapPointsForHandle(
+      snapHandleId,
+      input.resizedSelectionBounds,
+    );
+    const xLocked =
+      snapHandleId === "top" || snapHandleId === "bottom";
+    const yLocked =
+      snapHandleId === "left" || snapHandleId === "right";
+    const xSnap = xLocked
+      ? null
+      : getPointSnap(
+          "x",
+          selectionPoints,
+          input.snapshot.points,
+          input.threshold,
+        );
+    const ySnap = yLocked
+      ? null
+      : getPointSnap(
+          "y",
+          selectionPoints,
+          input.snapshot.points,
+          input.threshold,
+        );
+    const usedAxes = {
+      x: xSnap !== null,
+      y: ySnap !== null,
+    };
+    const nudge = new Vec(xSnap?.nudge ?? 0, ySnap?.nudge ?? 0);
+
+    if (
+      input.isAspectRatioLocked &&
+      isSelectionResizeCorner(snapHandleId) &&
+      (nudge.x !== 0 || nudge.y !== 0)
+    ) {
+      const primaryAxis: SnapAxis =
+        xSnap && ySnap
+          ? Math.abs(nudge.x) < Math.abs(nudge.y)
+            ? "x"
+            : "y"
+          : xSnap
+            ? "x"
+            : "y";
+      const aspectRatio =
+        input.initialSelectionBounds.h === 0
+          ? 1
+          : input.initialSelectionBounds.w / input.initialSelectionBounds.h;
+
+      if (primaryAxis === "x") {
+        usedAxes.y = false;
+        nudge.y = nudge.x / aspectRatio;
+        if (
+          snapHandleId === "bottom_left" ||
+          snapHandleId === "top_right"
+        ) {
+          nudge.y = -nudge.y;
+        }
+      } else {
+        usedAxes.x = false;
+        nudge.x = nudge.y * aspectRatio;
+        if (
+          snapHandleId === "bottom_left" ||
+          snapHandleId === "top_right"
+        ) {
+          nudge.x = -nudge.x;
+        }
+      }
+    }
+
+    const result = getResizeResultAfterNudge(input, nudge);
+    const { bounds } = result;
+    const snappedSelectionPoints = getResizeSnapPointsForHandle("any", bounds);
+    const indicators: SnapIndicatorState[] = [];
+
+    if (usedAxes.x) {
+      const exactSnap = getPointSnap(
+        "x",
+        snappedSelectionPoints,
+        input.snapshot.points,
+        EPSILON,
+      );
+      if (exactSnap) {
+        indicators.push(
+          ...getPointIndicatorsWithBoundsExtent(
+            "x",
+            exactSnap,
+            Vec.Zero(),
+            input.snapshot.coordinateSpace,
+            bounds,
+            input.snapshot.nodes,
+          ),
+        );
+      }
+    }
+
+    if (usedAxes.y) {
+      const exactSnap = getPointSnap(
+        "y",
+        snappedSelectionPoints,
+        input.snapshot.points,
+        EPSILON,
+      );
+      if (exactSnap) {
+        indicators.push(
+          ...getPointIndicatorsWithBoundsExtent(
+            "y",
+            exactSnap,
+            Vec.Zero(),
+            input.snapshot.coordinateSpace,
+            bounds,
+            input.snapshot.nodes,
+          ),
+        );
+      }
+    }
+
+    this.setIndicators(indicators);
+    return {
+      nudge,
+      bounds,
+      scaleX: result.scaleX,
+      scaleY: result.scaleY,
+      indicators,
+    };
+  }
+
+  snapHandle(input: HandleSnapInput): HandleSnapResult | null {
+    if (input.mode === "none") {
+      this.clearIndicators();
+      return null;
+    }
+
+    const result =
+      input.mode === "point"
+        ? this.snapHandlePoint(input)
+        : this.snapHandleAlign(input);
+    if (!result) {
+      this.clearIndicators();
+      return null;
+    }
+
+    this.setIndicators(result.indicators);
+    return result;
+  }
+
+  private snapHandlePoint(input: HandleSnapInput): HandleSnapResult | null {
+    let nearestPoint: Vec | null = null;
+    let nearestDistanceSquared = input.threshold * input.threshold;
+
+    for (const candidate of input.snapshot.points) {
+      const distanceSquared = input.pagePoint.dist2(candidate.point);
+      if (distanceSquared > nearestDistanceSquared) {
+        continue;
+      }
+      nearestDistanceSquared = distanceSquared;
+      nearestPoint = candidate.point;
+    }
+
+    if (!nearestPoint) {
+      for (const outline of input.snapshot.outlines) {
+        const nearest = getNearestPointOnOutline(input.pagePoint, outline.points);
+        if (!nearest || nearest.distanceSquared > nearestDistanceSquared) {
+          continue;
+        }
+        nearestDistanceSquared = nearest.distanceSquared;
+        nearestPoint = nearest.point;
+      }
+    }
+
+    if (!nearestPoint) {
+      return null;
+    }
+
+    const snappedPagePoint = nearestPoint.clone();
+    const nudge = snappedPagePoint.sub(input.pagePoint);
+    const indicators = [getHandlePointIndicator(snappedPagePoint)];
+    return { snappedPagePoint, nudge, indicators };
+  }
+
+  private snapHandleAlign(input: HandleSnapInput): HandleSnapResult | null {
+    let nearestXPoint: Vec | null = null;
+    let nearestYPoint: Vec | null = null;
+    let nearestXDistance = input.threshold;
+    let nearestYDistance = input.threshold;
+
+    for (const candidate of input.snapshot.points) {
+      const xDistance = Math.abs(candidate.point.x - input.pagePoint.x);
+      if (xDistance <= nearestXDistance) {
+        nearestXDistance = xDistance;
+        nearestXPoint = candidate.point;
+      }
+
+      const yDistance = Math.abs(candidate.point.y - input.pagePoint.y);
+      if (yDistance <= nearestYDistance) {
+        nearestYDistance = yDistance;
+        nearestYPoint = candidate.point;
+      }
+    }
+
+    if (!nearestXPoint && !nearestYPoint) {
+      return null;
+    }
+
+    const nudge = new Vec(
+      nearestXPoint ? nearestXPoint.x - input.pagePoint.x : 0,
+      nearestYPoint ? nearestYPoint.y - input.pagePoint.y : 0,
+    );
+    const snappedPagePoint = input.pagePoint.add(nudge);
+    const indicators: SnapIndicatorState[] = [];
+
+    if (nearestXPoint) {
+      indicators.push(
+        getHandleAlignIndicator("x", snappedPagePoint, nearestXPoint),
+      );
+    }
+    if (nearestYPoint) {
+      indicators.push(
+        getHandleAlignIndicator("y", snappedPagePoint, nearestYPoint),
+      );
+    }
+
+    return { snappedPagePoint, nudge, indicators };
+  }
+}