@yuzhouu/canvas-kit 0.1.2

package/_vendor/canvas-core/tools/select/states/PointingShapeState.ts

@@ -0,0 +1,140 @@
+import type { Editor } from "../../../editor/Editor";
+import { Vec } from "../../../geometry/Vec";
+import { StateNode } from "../../../editor/StateNode";
+import type { PointerEditorEvent } from "../../../editor/events";
+import {
+  createTranslatingUpdates,
+  getTranslateShapeSnapshots,
+  isAdditiveSelectionActive,
+  isQuickClick,
+  type PointingShapeInfo,
+  type TranslatingInfo,
+} from "../selectToolHelpers";
+import { PointingStateNode } from "./SelectStateNode";
+
+export class PointingShapeState extends PointingStateNode<PointingShapeInfo> {
+  constructor(editor: Editor, parent: StateNode) {
+    super(editor, "pointing_shape", parent);
+  }
+
+  protected onInfoEnter(): void {
+    if (!this.info) {
+      return;
+    }
+
+    if (this.info.quickClickSelectionTargetId) {
+      return;
+    }
+
+    if (this.info.additiveSelection) {
+      if (!this.info.wasSelected) {
+        this.editor.commands.setSelectedShapeIds(
+          [...this.info.previousSelection, this.info.shapeId],
+          { source: "system" },
+        );
+      }
+      return;
+    }
+
+    if (!this.info.wasSelected) {
+      this.editor.commands.setSelectedShapeIds([this.info.shapeId], {
+        source: "system",
+      });
+    }
+  }
+
+  protected onDragThresholdExceeded(): void {
+    if (!this.info) {
+      return;
+    }
+
+    const selectedShapes = this.editor.getSelectedShapes();
+    const selectedShapeIds = this.info.wasSelected
+      ? selectedShapes.map((shape) => shape.id)
+      : [this.info.translateTargetId];
+    if (
+      !this.info.wasSelected &&
+      selectedShapeIds.length === 1 &&
+      selectedShapeIds[0] !== this.info.shapeId
+    ) {
+      this.editor.commands.setSelectedShapeIds(selectedShapeIds, {
+        source: "system",
+      });
+    }
+    const selectionFrame = this.editor.getSelectionFrame();
+    const selectedShapeSnapshots = getTranslateShapeSnapshots(
+      this.editor,
+      selectedShapeIds,
+    );
+    const movingShapeIds = selectedShapeSnapshots.map((shape) => shape.id);
+    const snapRotation = selectionFrame?.hasCompatibleRotation
+      ? selectionFrame.rotation
+      : 0;
+    const snapRotationCenter =
+      selectionFrame?.rotationCenter.clone() ?? Vec.Zero();
+    const startBounds = selectionFrame?.hasCompatibleRotation
+      ? selectionFrame.bounds.clone()
+      : this.editor.getSelectionPageBounds();
+    this.transition("translating", {
+      originPagePoint: this.info.originPagePoint,
+      previousSelection: this.info.previousSelection,
+      selectedShapeIds,
+      startBounds,
+      snapSnapshot: this.editor.snaps.createTranslateSnapshot({
+        movingShapeIds,
+        coordinateSpace: {
+          rotation: snapRotation,
+          rotationCenter: snapRotationCenter,
+        },
+      }),
+      snapRotation,
+      selectedShapes: selectedShapeSnapshots,
+      updates: createTranslatingUpdates(selectedShapeSnapshots),
+      lockedAxis: null,
+      lastDeltaX: Number.NaN,
+      lastDeltaY: Number.NaN,
+    } satisfies TranslatingInfo);
+  }
+
+  protected onPointerUp(event: PointerEditorEvent): void {
+    if (this.info?.quickClickSelectionTargetId) {
+      const quickClick = isQuickClick(this.info, event);
+      if (quickClick) {
+        this.editor.commands.setSelectedShapeIds(
+          [this.info.quickClickSelectionTargetId],
+          { source: "system" },
+        );
+      }
+      const shouldForwardDoubleClick =
+        quickClick && (event.clickCount ?? 1) >= 2;
+      if (!shouldForwardDoubleClick) {
+        this.editor.resetPointerClickTracking();
+      }
+    } else if (isAdditiveSelectionActive(event) && this.info?.wasSelected) {
+      this.editor.commands.setSelectedShapeIds(
+        this.info.previousSelection.filter((id) => id !== this.info?.shapeId),
+        { source: "system" },
+      );
+    } else if (
+      this.info &&
+      !this.info.additiveSelection &&
+      this.info.wasSelected &&
+      !this.info.fromSelectionBounds &&
+      this.info.previousSelection.length > 1
+    ) {
+      this.editor.commands.setSelectedShapeIds([this.info.shapeId], {
+        source: "system",
+      });
+    }
+    this.transition("idle");
+  }
+
+  protected onCancel(): void {
+    if (this.info) {
+      this.editor.commands.setSelectedShapeIds(this.info.previousSelection, {
+        source: "system",
+      });
+    }
+    this.transition("idle");
+  }
+}

package/_vendor/canvas-core/tools/select/states/ResizingState.ts

@@ -0,0 +1,171 @@
+import type { Editor } from "../../../editor/Editor";
+import { getConstrainedSelectionResizeBoundsWithScale } from "../../../editor/resizeGeometry";
+import { StateNode } from "../../../editor/StateNode";
+import { selectionPagePointToLocalPoint } from "../../../editor/selection";
+import {
+  RESIZE_HISTORY_MARK,
+  RESIZE_SNAP_DISTANCE_SCREEN,
+  getResizedPagePointsUpdate,
+  getResizedShapeUpdate,
+  getSelectionTransform,
+  type ResizingInfo,
+} from "../selectToolHelpers";
+import { DraggingStateNode, type DragApplyInput } from "./SelectStateNode";
+
+export class ResizingState extends DraggingStateNode<ResizingInfo> {
+  protected readonly tickMode =
+    "apply_after_scroll_or_without_screen_point" as const;
+
+  constructor(editor: Editor, parent: StateNode) {
+    super(editor, "resizing", parent);
+  }
+
+  protected getHistoryMark(): string {
+    return RESIZE_HISTORY_MARK;
+  }
+
+  protected onDragStart(): void {
+    this.editor.setSnapIndicators(null);
+  }
+
+  protected onPointerUp(): void {
+    this.complete();
+  }
+
+  protected onCancel(): void {
+    if (this.info) {
+      this.editor.commands.setSelectedShapeIds(this.info.previousSelection, {
+        source: "system",
+      });
+    }
+    this.cancel();
+  }
+
+  protected onInfoExit(): void {
+    this.editor.setSnapIndicators(null);
+  }
+
+  protected apply({
+    pagePoint,
+    shiftKey,
+    altKey,
+    accelKey,
+  }: DragApplyInput): void {
+    if (!this.info) {
+      return;
+    }
+
+    if (
+      pagePoint.x === this.info.lastPagePointX &&
+      pagePoint.y === this.info.lastPagePointY &&
+      shiftKey === this.info.lastShiftKey &&
+      altKey === this.info.lastAltKey &&
+      accelKey === this.info.lastAccelKey
+    ) {
+      return;
+    }
+    this.info.lastPagePointX = pagePoint.x;
+    this.info.lastPagePointY = pagePoint.y;
+    this.info.lastShiftKey = shiftKey;
+    this.info.lastAltKey = altKey;
+    this.info.lastAccelKey = accelKey;
+
+    const selectionTransform = getSelectionTransform(
+      this.info.rotationCenter,
+      this.info.rotation,
+    );
+    const resizePagePoint = pagePoint.sub(this.info.cursorHandleOffset);
+    const localPagePoint = selectionPagePointToLocalPoint(
+      resizePagePoint,
+      selectionTransform,
+    );
+    const isAspectRatioLocked =
+      this.info.aspectRatioLockOverride ?? shiftKey;
+    const nextResize = getConstrainedSelectionResizeBoundsWithScale({
+      startBounds: this.info.startBounds,
+      handleId: this.info.handleId,
+      pagePoint: localPagePoint,
+      isAspectRatioLocked,
+      isResizingFromCenter: altKey,
+      aspectRatio: this.info.aspectRatio,
+    });
+    const canSnap =
+      !accelKey &&
+      this.info.snapSnapshot.points.length > 0;
+    const snappedResize = canSnap
+      ? this.editor.snaps.snapResize({
+          handleId: this.info.handleId,
+          initialSelectionBounds: this.info.startBounds,
+          resizedSelectionBounds: nextResize.bounds,
+          scaleX: nextResize.scaleX,
+          scaleY: nextResize.scaleY,
+          snapshot: this.info.snapSnapshot,
+          threshold:
+            RESIZE_SNAP_DISTANCE_SCREEN / this.editor.getCurrentCamera().z,
+          isAspectRatioLocked,
+          isResizingFromCenter: altKey,
+        })
+      : nextResize;
+
+    if (!canSnap) {
+      this.editor.snaps.clearIndicators();
+    }
+
+    for (let index = 0; index < this.info.shapes.length; index += 1) {
+      const shape = this.info.shapes[index];
+      const update = this.info.updates[index];
+      if (!shape || !update) {
+        continue;
+      }
+      getResizedShapeUpdate(
+        this.editor,
+        shape,
+        this.info.startBounds,
+        snappedResize.bounds,
+        snappedResize.scaleX,
+        snappedResize.scaleY,
+        this.info.handleId,
+        altKey,
+        this.info.rotationCenter,
+        this.info.rotation,
+        update,
+      );
+    }
+
+    for (let index = 0; index < this.info.pointShapes.length; index += 1) {
+      const shape = this.info.pointShapes[index];
+      const update = this.info.updates[this.info.shapes.length + index];
+      if (!shape || !update) {
+        continue;
+      }
+
+      getResizedPagePointsUpdate(
+        this.editor,
+        shape,
+        this.info.startBounds,
+        snappedResize.bounds,
+        snappedResize.scaleX,
+        snappedResize.scaleY,
+        this.info.handleId,
+        altKey,
+        this.info.rotationCenter,
+        this.info.rotation,
+        update,
+      );
+    }
+
+    this.editor.commands.updateShapes(this.info.updates);
+  }
+
+  private complete(): void {
+    this.editor.setSnapIndicators(null);
+    this.editor.history.squashToMark(RESIZE_HISTORY_MARK);
+    this.transition("idle");
+  }
+
+  private cancel(): void {
+    this.editor.setSnapIndicators(null);
+    this.editor.history.bailToMark(RESIZE_HISTORY_MARK);
+    this.transition("idle");
+  }
+}

package/_vendor/canvas-core/tools/select/states/RotatingState.ts

@@ -0,0 +1,124 @@
+import type { Editor } from "../../../editor/Editor";
+import { Vec } from "../../../geometry/Vec";
+import { StateNode } from "../../../editor/StateNode";
+import {
+  ROTATE_HISTORY_MARK,
+  ROTATION_SNAP_STEP,
+  ROTATION_SOFT_SNAP_MAX_SCREEN_VELOCITY,
+  ROTATION_SOFT_SNAP_STEP,
+  ROTATION_SOFT_SNAP_THRESHOLD,
+  getRotatedPagePointsUpdate,
+  getRotatedShapeUpdate,
+  normalizeAngle,
+  snapAngle,
+  type RotatingInfo,
+} from "../selectToolHelpers";
+import { DraggingStateNode, type DragApplyInput } from "./SelectStateNode";
+
+export class RotatingState extends DraggingStateNode<RotatingInfo> {
+  protected readonly tickMode = "apply_after_scroll" as const;
+
+  constructor(editor: Editor, parent: StateNode) {
+    super(editor, "rotating", parent);
+  }
+
+  protected getHistoryMark(): string {
+    return ROTATE_HISTORY_MARK;
+  }
+
+  protected onPointerUp(): void {
+    this.complete();
+  }
+
+  protected onCancel(): void {
+    if (this.info) {
+      this.editor.commands.setSelectedShapeIds(this.info.previousSelection, {
+        source: "system",
+      });
+    }
+    this.cancel();
+  }
+
+  protected apply({ pagePoint, shiftKey, accelKey }: DragApplyInput): void {
+    if (!this.info) {
+      return;
+    }
+
+    if (
+      pagePoint.x === this.info.lastPointerX &&
+      pagePoint.y === this.info.lastPointerY &&
+      shiftKey === this.info.lastShiftKey &&
+      accelKey === this.info.lastAccelKey
+    ) {
+      return;
+    }
+    this.info.lastPointerX = pagePoint.x;
+    this.info.lastPointerY = pagePoint.y;
+    this.info.lastShiftKey = shiftKey;
+    this.info.lastAccelKey = accelKey;
+
+    let delta = normalizeAngle(
+      Vec.Angle(this.info.center, pagePoint) - this.info.startAngle,
+    );
+    if (shiftKey) {
+      delta = snapAngle(delta, ROTATION_SNAP_STEP);
+    } else {
+      const shouldSoftSnap =
+        !accelKey &&
+        this.editor.inputs.state.get().screenVelocity.len() <
+          ROTATION_SOFT_SNAP_MAX_SCREEN_VELOCITY;
+      if (shouldSoftSnap) {
+        const nextSelectionRotation =
+          this.info.initialSelectionRotation + delta;
+        const snappedSelectionRotation = snapAngle(
+          nextSelectionRotation,
+          ROTATION_SOFT_SNAP_STEP,
+        );
+        const snapOffset = normalizeAngle(
+          snappedSelectionRotation - nextSelectionRotation,
+        );
+        if (Math.abs(snapOffset) <= ROTATION_SOFT_SNAP_THRESHOLD) {
+          delta = normalizeAngle(
+            snappedSelectionRotation - this.info.initialSelectionRotation,
+          );
+        }
+      }
+    }
+
+    for (let index = 0; index < this.info.shapes.length; index += 1) {
+      const shape = this.info.shapes[index];
+      const update = this.info.updates[index];
+      if (!shape || !update) {
+        continue;
+      }
+      getRotatedShapeUpdate(shape, this.info.center, delta, update);
+    }
+
+    for (let index = 0; index < this.info.pointShapes.length; index += 1) {
+      const shape = this.info.pointShapes[index];
+      const update = this.info.updates[this.info.shapes.length + index];
+      if (!shape || !update) {
+        continue;
+      }
+      getRotatedPagePointsUpdate(
+        this.editor,
+        shape,
+        this.info.center,
+        delta,
+        update,
+      );
+    }
+
+    this.editor.commands.updateShapes(this.info.updates);
+  }
+
+  private complete(): void {
+    this.editor.history.squashToMark(ROTATE_HISTORY_MARK);
+    this.transition("idle");
+  }
+
+  private cancel(): void {
+    this.editor.history.bailToMark(ROTATE_HISTORY_MARK);
+    this.transition("idle");
+  }
+}

package/_vendor/canvas-core/tools/select/states/SelectStateNode.ts

@@ -0,0 +1,128 @@
+import type { Editor } from "../../../editor/Editor";
+import type { Vec } from "../../../geometry/Vec";
+import { StateNode } from "../../../editor/StateNode";
+import type {
+  PointerEditorEvent,
+  TickEditorEvent,
+} from "../../../editor/events";
+import {
+  applySelectionDragFromCurrentInputs,
+  getSelectionDragInputForTick,
+  hasExceededDragThreshold,
+  type EdgeScrollTickMode,
+} from "../selectToolHelpers";
+
+/**
+ * Base for every select-tool state that carries a transient `info` payload.
+ * Centralises the identical `info` lifecycle (assign on enter, clear on exit)
+ * so concrete states only express their behaviour. Cleanup that must run while
+ * `info` is still readable belongs in {@link onInfoExit}.
+ */
+export abstract class InfoStateNode<T> extends StateNode {
+  protected info: T | null = null;
+
+  protected onEnter(info?: unknown): void {
+    this.info = info as T;
+    this.onInfoEnter();
+  }
+
+  protected onExit(): void {
+    this.onInfoExit();
+    this.info = null;
+  }
+
+  /** Runs after `info` is assigned. */
+  protected onInfoEnter(): void {}
+
+  /** Runs before `info` is cleared. */
+  protected onInfoExit(): void {}
+}
+
+/**
+ * Base for the "pointing_*" states. They all wait for the pointer to exceed the
+ * drag threshold before committing to a gesture; subclasses only implement what
+ * happens once that threshold is crossed.
+ */
+export abstract class PointingStateNode<
+  T extends { originPagePoint: Vec },
+> extends InfoStateNode<T> {
+  protected onPointerMove(event: PointerEditorEvent): void {
+    if (!this.info) {
+      return;
+    }
+    if (!hasExceededDragThreshold(this.info.originPagePoint, event.pagePoint)) {
+      return;
+    }
+    this.onDragThresholdExceeded(event);
+  }
+
+  protected abstract onDragThresholdExceeded(event: PointerEditorEvent): void;
+}
+
+/** Pointer/keyboard fields shared by pointer events and synthesized drag inputs. */
+export interface DragApplyInput {
+  pagePoint: Vec;
+  shiftKey: boolean;
+  altKey: boolean;
+  accelKey: boolean;
+}
+
+/**
+ * Base for the active drag states (translate / resize / rotate / handle
+ * interaction). Centralises the identical event wiring: mark history on enter,
+ * apply on pointer-move, apply edge-scroll-aware input on tick, and re-apply the
+ * current input on key changes. Subclasses implement {@link apply} plus their own
+ * completion/cancellation and any extra cleanup.
+ */
+export abstract class DraggingStateNode<T> extends InfoStateNode<T> {
+  /** Edge-scroll behaviour for this gesture's tick handling. */
+  protected abstract readonly tickMode: EdgeScrollTickMode;
+
+  /** History mark to open on enter (constant or derived from `info`). */
+  protected abstract getHistoryMark(info: T): string;
+
+  /** Apply one drag sample. Implementations must guard on `this.info`. */
+  protected abstract apply(input: DragApplyInput): void;
+
+  protected onInfoEnter(): void {
+    if (this.info) {
+      this.editor.history.mark(this.getHistoryMark(this.info));
+    }
+    this.onDragStart();
+  }
+
+  /** Extra setup after the history mark is opened (e.g. clearing indicators). */
+  protected onDragStart(): void {}
+
+  protected onPointerMove(event: PointerEditorEvent): void {
+    this.apply(event);
+  }
+
+  protected onTick(event: TickEditorEvent): void {
+    if (!this.info) {
+      return;
+    }
+    const input = getSelectionDragInputForTick(
+      this.editor,
+      event,
+      this.tickMode,
+    );
+    if (input) {
+      this.apply(input);
+    }
+  }
+
+  protected onKeyDown(): void {
+    this.applyFromInputs();
+  }
+
+  protected onKeyUp(): void {
+    this.applyFromInputs();
+  }
+
+  protected applyFromInputs(): void {
+    applySelectionDragFromCurrentInputs(this.editor, (input) =>
+      this.apply(input),
+    );
+  }
+}

package/_vendor/canvas-core/tools/select/states/TranslatingState.ts

@@ -0,0 +1,139 @@
+import type { Editor } from "../../../editor/Editor";
+import { Vec } from "../../../geometry/Vec";
+import { StateNode } from "../../../editor/StateNode";
+import {
+  applyContainmentParent,
+  updateDropTarget,
+} from "../selectContainment";
+import {
+  TRANSLATE_HISTORY_MARK,
+  TRANSLATE_SNAP_DISTANCE_SCREEN,
+  TRANSLATE_SNAP_MAX_SCREEN_VELOCITY,
+  type TranslatingInfo,
+} from "../selectToolHelpers";
+import { DraggingStateNode, type DragApplyInput } from "./SelectStateNode";
+
+export class TranslatingState extends DraggingStateNode<TranslatingInfo> {
+  protected readonly tickMode = "always_apply" as const;
+
+  constructor(editor: Editor, parent: StateNode) {
+    super(editor, "translating", parent);
+  }
+
+  protected getHistoryMark(): string {
+    return TRANSLATE_HISTORY_MARK;
+  }
+
+  protected onDragStart(): void {
+    this.editor.setSnapIndicators(null);
+  }
+
+  protected onPointerUp(): void {
+    this.complete();
+  }
+
+  protected onCancel(): void {
+    if (this.info) {
+      this.editor.commands.setSelectedShapeIds(this.info.previousSelection, {
+        source: "system",
+      });
+    }
+    this.cancel();
+  }
+
+  protected onInfoExit(): void {
+    this.editor.setSnapIndicators(null);
+  }
+
+  protected apply({ pagePoint, shiftKey, accelKey }: DragApplyInput): void {
+    if (!this.info) {
+      return;
+    }
+
+    const rawDeltaX = pagePoint.x - this.info.originPagePoint.x;
+    const rawDeltaY = pagePoint.y - this.info.originPagePoint.y;
+    if (!shiftKey) {
+      this.info.lockedAxis = null;
+    } else if (!this.info.lockedAxis && (rawDeltaX !== 0 || rawDeltaY !== 0)) {
+      this.info.lockedAxis =
+        Math.abs(rawDeltaX) >= Math.abs(rawDeltaY) ? "x" : "y";
+    }
+
+    let deltaX = rawDeltaX;
+    let deltaY = rawDeltaY;
+    if (this.info.lockedAxis === "x") {
+      deltaY = 0;
+    } else if (this.info.lockedAxis === "y") {
+      deltaX = 0;
+    }
+
+    const startBounds = this.info.startBounds;
+    const canSnap =
+      !accelKey &&
+      !!startBounds &&
+      (this.info.snapSnapshot.points.length > 0 ||
+        this.info.snapSnapshot.nodes.length > 0) &&
+      this.editor.inputs.state.get().screenVelocity.len() <
+        TRANSLATE_SNAP_MAX_SCREEN_VELOCITY;
+
+    if (canSnap && startBounds) {
+      const snapRotation = this.info.snapRotation;
+      const snapThreshold =
+        TRANSLATE_SNAP_DISTANCE_SCREEN / this.editor.getCurrentCamera().z;
+      const translatedDelta =
+        snapRotation === 0
+          ? new Vec(deltaX, deltaY)
+          : new Vec(deltaX, deltaY).rot(-snapRotation);
+      const { nudge: snapOffset } = this.editor.snaps.snapTranslate({
+        lockedAxis: this.info.lockedAxis,
+        initialSelectionBounds: startBounds,
+        dragDelta: translatedDelta,
+        snapshot: this.info.snapSnapshot,
+        threshold: snapThreshold,
+      });
+      const pageSnapOffset =
+        snapRotation === 0 ? snapOffset : snapOffset.rot(snapRotation);
+
+      deltaX += this.info.lockedAxis === "y" ? 0 : pageSnapOffset.x;
+      deltaY += this.info.lockedAxis === "x" ? 0 : pageSnapOffset.y;
+    } else {
+      this.editor.snaps.clearIndicators();
+    }
+
+    if (deltaX === this.info.lastDeltaX && deltaY === this.info.lastDeltaY) {
+      return;
+    }
+    this.info.lastDeltaX = deltaX;
+    this.info.lastDeltaY = deltaY;
+
+    for (let index = 0; index < this.info.selectedShapes.length; index += 1) {
+      const shape = this.info.selectedShapes[index];
+      const update = this.info.updates[index];
+      if (!shape || !update) {
+        continue;
+      }
+      update.x = shape.x + deltaX;
+      update.y = shape.y + deltaY;
+    }
+
+    this.editor.commands.updateShapes(this.info.updates);
+    updateDropTarget(this.editor, this.info.selectedShapeIds);
+  }
+
+  private complete(): void {
+    if (this.info) {
+      applyContainmentParent(this.editor, this.info.selectedShapeIds);
+    }
+    this.editor.setDropTargetShapeId(null);
+    this.editor.setSnapIndicators(null);
+    this.editor.history.squashToMark(TRANSLATE_HISTORY_MARK);
+    this.transition("idle");
+  }
+
+  private cancel(): void {
+    this.editor.setDropTargetShapeId(null);
+    this.editor.setSnapIndicators(null);
+    this.editor.history.bailToMark(TRANSLATE_HISTORY_MARK);
+    this.transition("idle");
+  }
+}