@yuzhouu/canvas-kit 0.1.2

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

@@ -0,0 +1,145 @@
+import type { Editor } from "../../../editor/Editor";
+import { Vec } from "../../../geometry/Vec";
+import { StateNode } from "../../../editor/StateNode";
+import type {
+  PointerEditorEvent,
+  TickEditorEvent,
+} from "../../../editor/events";
+import {
+  applySelectionDragFromCurrentInputs,
+  createBrushBounds,
+  getOutermostSelectableShapeIds,
+  getSelectionDragInputForTick,
+  isAdditiveSelectionActive,
+  isBrushWrappingSelection,
+  shouldSelectShapeWithBrush,
+  toggleIds,
+  type BrushInfo,
+} from "../selectToolHelpers";
+import { InfoStateNode } from "./SelectStateNode";
+
+export class BrushingState extends InfoStateNode<BrushInfo> {
+  constructor(editor: Editor, parent: StateNode) {
+    super(editor, "brushing", parent);
+  }
+
+  protected onInfoEnter(): void {
+    if (!this.info) {
+      return;
+    }
+    const inputs = this.editor.inputs.state.get();
+    this.updateBrush(
+      this.info.originPagePoint,
+      this.info.additiveSelection,
+      isBrushWrappingSelection(inputs),
+    );
+  }
+
+  protected onPointerMove(event: PointerEditorEvent): void {
+    if (!this.info) {
+      return;
+    }
+    this.updateBrush(
+      event.pagePoint,
+      isAdditiveSelectionActive(event),
+      isBrushWrappingSelection(event),
+    );
+  }
+
+  protected onTick(event: TickEditorEvent): void {
+    if (!this.info) {
+      return;
+    }
+
+    const input = getSelectionDragInputForTick(
+      this.editor,
+      event,
+      "apply_after_scroll_or_without_screen_point",
+    );
+    if (!input) {
+      return;
+    }
+    this.updateBrush(
+      input.pagePoint,
+      isAdditiveSelectionActive(input),
+      isBrushWrappingSelection(input),
+    );
+  }
+
+  protected onKeyDown(): void {
+    this.updateBrushFromInputs();
+  }
+
+  protected onKeyUp(): void {
+    this.updateBrushFromInputs();
+  }
+
+  protected onPointerUp(event: PointerEditorEvent): void {
+    if (this.info) {
+      this.updateBrush(
+        event.pagePoint,
+        isAdditiveSelectionActive(event),
+        isBrushWrappingSelection(event),
+      );
+    }
+    this.complete();
+  }
+
+  protected onCancel(): void {
+    if (this.info) {
+      this.editor.commands.setSelectedShapeIds(this.info.previousSelection, {
+        source: "system",
+      });
+    }
+    this.cancel();
+  }
+
+  private updateBrush(
+    pagePoint: Vec,
+    additiveSelection: boolean,
+    isWrapping: boolean,
+  ): void {
+    if (!this.info) {
+      return;
+    }
+
+    const brushBounds = createBrushBounds(this.info.originPagePoint, pagePoint);
+    const hitIds = getOutermostSelectableShapeIds(
+      this.editor,
+      this.editor.getShapeIdsInBounds(brushBounds).filter((shapeId) =>
+        shouldSelectShapeWithBrush(
+          this.editor,
+          brushBounds,
+          shapeId,
+          isWrapping,
+        ),
+      ),
+    );
+    const nextSelection = additiveSelection
+      ? toggleIds(this.info.previousSelection, hitIds)
+      : hitIds;
+
+    this.editor.setBrushBox(brushBounds);
+    this.editor.commands.setSelectedShapeIds(nextSelection, {
+      source: "system",
+    });
+  }
+
+  private updateBrushFromInputs(): void {
+    applySelectionDragFromCurrentInputs(this.editor, (input) =>
+      this.updateBrush(
+        input.pagePoint,
+        isAdditiveSelectionActive(input),
+        isBrushWrappingSelection(input),
+      ),
+    );
+  }
+
+  private complete(): void {
+    this.transition("idle");
+  }
+
+  private cancel(): void {
+    this.transition("idle");
+  }
+}

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

@@ -0,0 +1,116 @@
+import { transact } from "@land/signals";
+import type { Editor } from "../../../editor/Editor";
+import { StateNode } from "../../../editor/StateNode";
+import type { PointerEditorEvent } from "../../../editor/events";
+import {
+  HANDLE_SNAP_DISTANCE_SCREEN,
+  arePagePointsApproximatelyEqual,
+  type DraggingSelectionHandleInteractionInfo,
+} from "../selectToolHelpers";
+import { DraggingStateNode, type DragApplyInput } from "./SelectStateNode";
+
+export class DraggingSelectionHandleInteractionState extends DraggingStateNode<DraggingSelectionHandleInteractionInfo> {
+  protected readonly tickMode = "apply_after_scroll" as const;
+
+  constructor(editor: Editor, parent: StateNode) {
+    super(editor, "dragging_selection_handle_interaction", parent);
+  }
+
+  protected getHistoryMark(info: DraggingSelectionHandleInteractionInfo): string {
+    return info.session.historyMark;
+  }
+
+  protected onPointerUp(event: PointerEditorEvent): void {
+    this.apply(event);
+    this.complete();
+  }
+
+  protected onCancel(): void {
+    const previousSelection = this.info?.previousSelection;
+    transact(() => {
+      if (previousSelection) {
+        this.editor.commands.setSelectedShapeIds(previousSelection, {
+          source: "system",
+        });
+      }
+      if (this.info) {
+        this.editor.clearSelectionTransients();
+        this.editor.history.bailToMark(this.info.session.historyMark);
+      }
+    });
+    this.transition("idle");
+  }
+
+  protected onInfoExit(): void {
+    if (this.info?.session.shouldClearBindingPreviewOnExit) {
+      this.editor.setBindingPreview(null);
+    }
+    this.editor.setSnapIndicators(null);
+  }
+
+  protected apply({ pagePoint, accelKey }: DragApplyInput): void {
+    if (!this.info) {
+      return;
+    }
+
+    if (
+      pagePoint.x === this.info.lastPagePointX &&
+      pagePoint.y === this.info.lastPagePointY &&
+      accelKey === this.info.lastAccelKey
+    ) {
+      return;
+    }
+    this.info.lastPagePointX = pagePoint.x;
+    this.info.lastPagePointY = pagePoint.y;
+    this.info.lastAccelKey = accelKey;
+
+    const snapMode = this.info.session.handleSnapMode ?? "none";
+    const snapSnapshot = this.info.snapSnapshot;
+    const canSnap = !accelKey && snapMode !== "none" && snapSnapshot !== null;
+    const snapResult =
+      canSnap && snapSnapshot
+        ? this.editor.snaps.snapHandle({
+            mode: snapMode,
+            pagePoint,
+            snapshot: snapSnapshot,
+            threshold:
+              HANDLE_SNAP_DISTANCE_SCREEN / this.editor.getCurrentCamera().z,
+          })
+        : null;
+
+    if (!canSnap) {
+      this.editor.snaps.clearIndicators();
+    }
+
+    const snappedPagePoint = snapResult?.snappedPagePoint ?? pagePoint;
+    const result = this.info.session.update({
+      editor: this.editor,
+      pagePoint: snappedPagePoint,
+      accelKey,
+      source: "user",
+    });
+    const status = typeof result === "string" ? result : result.status;
+    const finalPagePoint =
+      typeof result === "string" ? snappedPagePoint : result.finalPagePoint;
+
+    if (
+      snapResult &&
+      finalPagePoint &&
+      !arePagePointsApproximatelyEqual(finalPagePoint, snapResult.snappedPagePoint)
+    ) {
+      this.editor.snaps.clearIndicators();
+    }
+
+    if (status === "stop") {
+      this.transition("idle");
+    }
+  }
+
+  private complete(): void {
+    if (this.info) {
+      this.editor.setSnapIndicators(null);
+      this.editor.history.squashToMark(this.info.session.historyMark);
+    }
+    this.transition("idle");
+  }
+}

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

@@ -0,0 +1,159 @@
+import type { Editor } from "../../../editor/Editor";
+import { StateNode } from "../../../editor/StateNode";
+import type { PointerEditorEvent } from "../../../editor/events";
+import {
+  getSelectableShapeIdForHit,
+  getSelectedTransformAncestorIdForHit,
+  isAdditiveSelectionActive,
+  type PointingCanvasInfo,
+  type PointingResizeHandleInfo,
+  type PointingRotateHandleInfo,
+  type PointingSelectionHandleInteractionInfo,
+  type PointingShapeInfo,
+} from "../selectToolHelpers";
+
+export class IdleState extends StateNode {
+  constructor(editor: Editor, parent: StateNode) {
+    super(editor, "idle", parent);
+  }
+
+  protected onEnter(): void {
+    this.editor.clearSelectionTransients();
+  }
+
+  protected onPointerDown(event: PointerEditorEvent): void {
+    const previousSelection = this.editor.getSelectedShapeIds();
+    const handle = this.editor.hitTestSelectionHandle(event.pagePoint);
+    if (handle?.kind === "rotate") {
+      this.transition("pointing_rotate_handle", {
+        originPagePoint: event.pagePoint.clone(),
+        previousSelection,
+      } satisfies PointingRotateHandleInfo);
+      return;
+    }
+
+    if (handle?.kind === "resize") {
+      this.transition("pointing_resize_handle", {
+        handleId: handle.id,
+        originPagePoint: event.pagePoint.clone(),
+        cursorHandleOffset: event.pagePoint.sub(handle.point),
+        previousSelection,
+      } satisfies PointingResizeHandleInfo);
+      return;
+    }
+
+    if (handle) {
+      const selectedShape = this.editor.getSelectedShapes()[0] ?? null;
+      if (selectedShape) {
+        const session = this.editor.selectionHandleInteractions.createSession(
+          this.editor,
+          {
+            handle,
+            shape: selectedShape,
+            originPagePoint: event.pagePoint.clone(),
+          },
+        );
+        if (session) {
+          const snapMode = session.handleSnapMode ?? "none";
+          this.transition("pointing_selection_handle_interaction", {
+            originPagePoint: event.pagePoint.clone(),
+            previousSelection,
+            session,
+            snapSnapshot:
+              snapMode === "none"
+                ? null
+                : this.editor.snaps.createHandleSnapshot({
+                    context: session.handleSnapContext ?? {
+                      shapeId: session.shapeId,
+                      handle,
+                    },
+                    currentPagePoint: event.pagePoint,
+                    allowSelfSnap: session.allowSelfSnap ?? false,
+                    excludedShapeIds: session.excludedSnapShapeIds,
+                  }),
+          } satisfies PointingSelectionHandleInteractionInfo);
+          return;
+        }
+      }
+    }
+
+    const hit = this.editor.hitTestShape(event.pagePoint);
+    if (hit) {
+      const rawSelectionTargetId = this.editor
+        .getShapeUtil(hit)
+        .getSelectionTargetId(hit, { editor: this.editor });
+      const rawTranslateTargetId = this.editor
+        .getShapeUtil(hit)
+        .getTranslateTargetId(hit, { editor: this.editor });
+      const additiveSelection = isAdditiveSelectionActive(event);
+      const selectionTargetId = getSelectableShapeIdForHit(
+        this.editor,
+        rawSelectionTargetId,
+        previousSelection,
+      );
+      const selectedTransformAncestorId = additiveSelection
+        ? null
+        : getSelectedTransformAncestorIdForHit(
+            this.editor,
+            rawSelectionTargetId,
+            previousSelection,
+          );
+      const quickClickSelectionTargetId = additiveSelection
+        ? null
+        : selectedTransformAncestorId
+          ? selectionTargetId
+          : null;
+      const translateTargetId = getSelectableShapeIdForHit(
+        this.editor,
+        rawTranslateTargetId,
+        previousSelection,
+      );
+      const dragTargetId =
+        quickClickSelectionTargetId === null
+          ? translateTargetId
+          : selectedTransformAncestorId ?? translateTargetId;
+      this.transition("pointing_shape", {
+        shapeId: selectionTargetId,
+        translateTargetId: dragTargetId,
+        originPagePoint: event.pagePoint.clone(),
+        originTimestamp: event.timestamp,
+        previousSelection,
+        additiveSelection,
+        wasSelected: previousSelection.includes(selectionTargetId),
+        fromSelectionBounds: false,
+        quickClickSelectionTargetId,
+      } satisfies PointingShapeInfo);
+      return;
+    }
+
+    if (!isAdditiveSelectionActive(event) && previousSelection.length > 0) {
+      const selectedShape = this.editor.getSelectedShapes()[0];
+      if (
+        selectedShape &&
+        this.editor
+          .getShapeUtil(selectedShape)
+          .canStartTranslateFromSelectionBounds(selectedShape) &&
+        this.editor.isPointInSelectionBounds(event.pagePoint)
+      ) {
+        this.transition("pointing_shape", {
+          shapeId: selectedShape.id,
+          translateTargetId: selectedShape.id,
+          originPagePoint: event.pagePoint.clone(),
+          originTimestamp: event.timestamp,
+          previousSelection,
+          additiveSelection: false,
+          wasSelected: true,
+          fromSelectionBounds: true,
+          quickClickSelectionTargetId: null,
+        } satisfies PointingShapeInfo);
+        return;
+      }
+    }
+
+    this.transition("pointing_canvas", {
+      originPagePoint: event.pagePoint.clone(),
+      previousSelection,
+      additiveSelection: isAdditiveSelectionActive(event),
+    } satisfies PointingCanvasInfo);
+  }
+}

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

@@ -0,0 +1,41 @@
+import type { Editor } from "../../../editor/Editor";
+import { StateNode } from "../../../editor/StateNode";
+import type { PointerEditorEvent } from "../../../editor/events";
+import {
+  isAdditiveSelectionActive,
+  type BrushInfo,
+  type PointingCanvasInfo,
+} from "../selectToolHelpers";
+import { PointingStateNode } from "./SelectStateNode";
+
+export class PointingCanvasState extends PointingStateNode<PointingCanvasInfo> {
+  constructor(editor: Editor, parent: StateNode) {
+    super(editor, "pointing_canvas", parent);
+  }
+
+  protected onDragThresholdExceeded(event: PointerEditorEvent): void {
+    if (!this.info) {
+      return;
+    }
+    this.transition("brushing", {
+      ...this.info,
+      additiveSelection: isAdditiveSelectionActive(event),
+    } satisfies BrushInfo);
+  }
+
+  protected onPointerUp(event: PointerEditorEvent): void {
+    if (!isAdditiveSelectionActive(event)) {
+      this.editor.commands.setSelectedShapeIds([], { 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/PointingResizeHandleState.ts

@@ -0,0 +1,78 @@
+import type { Editor } from "../../../editor/Editor";
+import { StateNode } from "../../../editor/StateNode";
+import { getSelectionResizeSnapshot } from "../../../editor/selection";
+import {
+  createResizingUpdates,
+  getSelectionResizeAspectRatioLockOverride,
+  getShapeSelectionResizePageOutlineVertices,
+  type PointingResizeHandleInfo,
+  type ResizingInfo,
+} from "../selectToolHelpers";
+import { PointingStateNode } from "./SelectStateNode";
+
+export class PointingResizeHandleState extends PointingStateNode<PointingResizeHandleInfo> {
+  constructor(editor: Editor, parent: StateNode) {
+    super(editor, "pointing_resize_handle", parent);
+  }
+
+  protected onDragThresholdExceeded(): void {
+    if (!this.info) {
+      return;
+    }
+
+    const selectionFrame = this.editor.getSelectionFrame();
+    if (!selectionFrame) {
+      this.transition("idle");
+      return;
+    }
+
+    const selectedShapes = this.editor.getSelectionTransformTargetShapes();
+    const resizeSnapshot = getSelectionResizeSnapshot({
+      shapes: selectedShapes,
+      selectionFrame,
+      getShapeSelectionResizePageOutlineVertices: (shape) =>
+        getShapeSelectionResizePageOutlineVertices(this.editor, shape),
+      getShapeSelectionPagePoints: (shape) =>
+        this.editor.getShapeUtil(shape).getSelectionPagePoints(shape),
+    });
+
+    this.transition("resizing", {
+      ...this.info,
+      startBounds: resizeSnapshot.startBounds,
+      rotation: resizeSnapshot.rotation,
+      rotationCenter: resizeSnapshot.rotationCenter,
+      aspectRatio: resizeSnapshot.aspectRatio,
+      snapSnapshot: this.editor.snaps.createResizeSnapshot({
+        resizingShapeIds: selectedShapes.map((shape) => shape.id),
+        coordinateSpace: {
+          rotation: resizeSnapshot.rotation,
+          rotationCenter: resizeSnapshot.rotationCenter,
+        },
+      }),
+      shapes: resizeSnapshot.shapes,
+      pointShapes: resizeSnapshot.pointShapes,
+      updates: createResizingUpdates(
+        resizeSnapshot.shapes,
+        resizeSnapshot.pointShapes,
+      ),
+      aspectRatioLockOverride: getSelectionResizeAspectRatioLockOverride(
+        this.editor,
+        selectedShapes,
+        this.info.handleId,
+      ),
+      lastPagePointX: Number.NaN,
+      lastPagePointY: Number.NaN,
+      lastShiftKey: false,
+      lastAltKey: false,
+      lastAccelKey: false,
+    } satisfies ResizingInfo);
+  }
+
+  protected onPointerUp(): void {
+    this.transition("idle");
+  }
+
+  protected onCancel(): void {
+    this.transition("idle");
+  }
+}

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

@@ -0,0 +1,64 @@
+import type { Editor } from "../../../editor/Editor";
+import { Vec } from "../../../geometry/Vec";
+import { StateNode } from "../../../editor/StateNode";
+import { getSelectionRotateSnapshot } from "../../../editor/selection";
+import {
+  createRotatingUpdates,
+  type PointingRotateHandleInfo,
+  type RotatingInfo,
+} from "../selectToolHelpers";
+import { PointingStateNode } from "./SelectStateNode";
+
+export class PointingRotateHandleState extends PointingStateNode<PointingRotateHandleInfo> {
+  constructor(editor: Editor, parent: StateNode) {
+    super(editor, "pointing_rotate_handle", parent);
+  }
+
+  protected onDragThresholdExceeded(): void {
+    if (!this.info) {
+      return;
+    }
+
+    const selectionFrame = this.editor.getSelectionFrame();
+    if (!selectionFrame) {
+      this.transition("idle");
+      return;
+    }
+
+    const rotateSnapshot = getSelectionRotateSnapshot({
+      shapes: this.editor.getSelectionRotationTargetShapes(),
+      selectionFrame,
+      getShapeLocalBounds: (shape) => this.editor.computeShapeLocalBounds(shape),
+      getShapeSelectionPagePoints: (shape) =>
+        this.editor.getShapeUtil(shape).getSelectionPagePoints(shape),
+    });
+
+    this.transition("rotating", {
+      ...this.info,
+      center: rotateSnapshot.center,
+      startAngle: Vec.Angle(
+        rotateSnapshot.center,
+        this.info.originPagePoint,
+      ),
+      initialSelectionRotation: rotateSnapshot.initialSelectionRotation,
+      shapes: rotateSnapshot.shapes,
+      pointShapes: rotateSnapshot.pointShapes,
+      updates: createRotatingUpdates(
+        rotateSnapshot.shapes,
+        rotateSnapshot.pointShapes,
+      ),
+      lastPointerX: Number.NaN,
+      lastPointerY: Number.NaN,
+      lastShiftKey: false,
+      lastAccelKey: false,
+    } satisfies RotatingInfo);
+  }
+
+  protected onPointerUp(): void {
+    this.transition("idle");
+  }
+
+  protected onCancel(): void {
+    this.transition("idle");
+  }
+}

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

@@ -0,0 +1,34 @@
+import type { Editor } from "../../../editor/Editor";
+import { StateNode } from "../../../editor/StateNode";
+import {
+  type DraggingSelectionHandleInteractionInfo,
+  type PointingSelectionHandleInteractionInfo,
+} from "../selectToolHelpers";
+import { PointingStateNode } from "./SelectStateNode";
+
+export class PointingSelectionHandleInteractionState extends PointingStateNode<PointingSelectionHandleInteractionInfo> {
+  constructor(editor: Editor, parent: StateNode) {
+    super(editor, "pointing_selection_handle_interaction", parent);
+  }
+
+  protected onDragThresholdExceeded(): void {
+    if (!this.info) {
+      return;
+    }
+
+    this.transition("dragging_selection_handle_interaction", {
+      ...this.info,
+      lastPagePointX: Number.NaN,
+      lastPagePointY: Number.NaN,
+      lastAccelKey: false,
+    } satisfies DraggingSelectionHandleInteractionInfo);
+  }
+
+  protected onPointerUp(): void {
+    this.transition("idle");
+  }
+
+  protected onCancel(): void {
+    this.transition("idle");
+  }
+}