@yuzhouu/canvas-kit 0.1.2

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

@@ -0,0 +1,319 @@
+import { atom } from "@land/signals";
+import type {
+  EditorEvent,
+  KeyboardEditorEvent,
+  PointerEditorEvent,
+  WheelEditorEvent,
+} from "../events";
+import { Vec } from "../../geometry/Vec";
+
+export type InputDragPhase = "idle" | "pointing" | "dragging";
+
+export interface InputsState {
+  originPagePoint: Vec | null;
+  currentPagePoint: Vec | null;
+  previousPagePoint: Vec | null;
+  originScreenPoint: Vec | null;
+  currentScreenPoint: Vec | null;
+  previousScreenPoint: Vec | null;
+  currentTimestamp: number | null;
+  previousTimestamp: number | null;
+  pageVelocity: Vec;
+  screenVelocity: Vec;
+  pointerId: number | null;
+  pointerType: PointerEditorEvent["pointerType"] | null;
+  buttons: number;
+  isPointing: boolean;
+  isDragging: boolean;
+  dragPhase: InputDragPhase;
+  shiftKey: boolean;
+  altKey: boolean;
+  ctrlKey: boolean;
+  metaKey: boolean;
+  accelKey: boolean;
+}
+
+const DRAG_DISTANCE = 3;
+const DRAG_DISTANCE_SQUARED = DRAG_DISTANCE * DRAG_DISTANCE;
+
+function getZeroVelocity(): Vec {
+  return Vec.Zero();
+}
+
+function getVelocity(previousPoint: Vec, currentPoint: Vec, elapsed: number): Vec {
+  if (elapsed <= 0) {
+    return getZeroVelocity();
+  }
+
+  const deltaX = currentPoint.x - previousPoint.x;
+  const deltaY = currentPoint.y - previousPoint.y;
+
+  if (deltaX === 0 && deltaY === 0) {
+    return getZeroVelocity();
+  }
+
+  return new Vec(deltaX / elapsed, deltaY / elapsed);
+}
+
+function areModifierKeysEqual(
+  state: InputsState,
+  event: KeyboardEditorEvent | PointerEditorEvent | WheelEditorEvent,
+): boolean {
+  return (
+    state.shiftKey === event.shiftKey &&
+    state.altKey === event.altKey &&
+    state.ctrlKey === event.ctrlKey &&
+    state.metaKey === event.metaKey &&
+    state.accelKey === event.accelKey
+  );
+}
+
+export class InputsManager {
+  readonly state = atom<InputsState>("inputs.state", {
+    originPagePoint: null,
+    currentPagePoint: null,
+    previousPagePoint: null,
+    originScreenPoint: null,
+    currentScreenPoint: null,
+    previousScreenPoint: null,
+    currentTimestamp: null,
+    previousTimestamp: null,
+    pageVelocity: getZeroVelocity(),
+    screenVelocity: getZeroVelocity(),
+    pointerId: null,
+    pointerType: null,
+    buttons: 0,
+    isPointing: false,
+    isDragging: false,
+    dragPhase: "idle",
+    shiftKey: false,
+    altKey: false,
+    ctrlKey: false,
+    metaKey: false,
+    accelKey: false,
+  });
+
+  setCurrentPointerPoint(input: {
+    timestamp: number;
+    pagePoint: Vec;
+    screenPoint: Vec;
+    shiftKey: boolean;
+    altKey: boolean;
+    ctrlKey: boolean;
+    metaKey: boolean;
+    accelKey: boolean;
+  }): void {
+    this.state.update((state) => {
+      if (
+        state.currentPagePoint?.equals(input.pagePoint) &&
+        state.currentScreenPoint?.equals(input.screenPoint) &&
+        state.currentTimestamp === input.timestamp &&
+        state.shiftKey === input.shiftKey &&
+        state.altKey === input.altKey &&
+        state.ctrlKey === input.ctrlKey &&
+        state.metaKey === input.metaKey &&
+        state.accelKey === input.accelKey
+      ) {
+        return state;
+      }
+
+      const previousPagePoint = state.currentPagePoint ?? input.pagePoint;
+      const previousScreenPoint = state.currentScreenPoint ?? input.screenPoint;
+      const previousTimestamp = state.currentTimestamp ?? input.timestamp;
+      const elapsed = input.timestamp - previousTimestamp;
+
+      return {
+        ...state,
+        previousPagePoint,
+        previousScreenPoint,
+        currentPagePoint: input.pagePoint,
+        currentScreenPoint: input.screenPoint,
+        previousTimestamp,
+        currentTimestamp: input.timestamp,
+        pageVelocity: getVelocity(
+          previousPagePoint,
+          input.pagePoint,
+          elapsed,
+        ),
+        screenVelocity: getVelocity(
+          previousScreenPoint,
+          input.screenPoint,
+          elapsed,
+        ),
+        shiftKey: input.shiftKey,
+        altKey: input.altKey,
+        ctrlKey: input.ctrlKey,
+        metaKey: input.metaKey,
+        accelKey: input.accelKey,
+      };
+    });
+  }
+
+  handleEvent(event: EditorEvent): void {
+    switch (event.type) {
+      case "pointer":
+        this.handlePointerEvent(event);
+        return;
+      case "keyboard":
+        this.handleKeyboardEvent(event);
+        return;
+      case "wheel":
+        this.handleWheelEvent(event);
+        return;
+      case "cancel":
+        this.resetPointer();
+        return;
+    }
+  }
+
+  resetPointer(): void {
+    this.state.update((state) => ({
+      ...state,
+      originPagePoint: null,
+      currentPagePoint: null,
+      previousPagePoint: null,
+      originScreenPoint: null,
+      currentScreenPoint: null,
+      previousScreenPoint: null,
+      currentTimestamp: null,
+      previousTimestamp: null,
+      pageVelocity: getZeroVelocity(),
+      screenVelocity: getZeroVelocity(),
+      pointerId: null,
+      pointerType: null,
+      buttons: 0,
+      isPointing: false,
+      isDragging: false,
+      dragPhase: "idle",
+    }));
+  }
+
+  private handlePointerEvent(event: PointerEditorEvent): void {
+    this.state.update((state) => {
+      switch (event.name) {
+        case "pointer_down":
+          return {
+            ...state,
+            originPagePoint: event.pagePoint,
+            currentPagePoint: event.pagePoint,
+            previousPagePoint: event.pagePoint,
+            originScreenPoint: event.screenPoint,
+            currentScreenPoint: event.screenPoint,
+            previousScreenPoint: event.screenPoint,
+            currentTimestamp: event.timestamp,
+            previousTimestamp: event.timestamp,
+            pageVelocity: getZeroVelocity(),
+            screenVelocity: getZeroVelocity(),
+            pointerId: event.pointerId,
+            pointerType: event.pointerType,
+            buttons: event.buttons,
+            isPointing: true,
+            isDragging: false,
+            dragPhase: "pointing",
+            shiftKey: event.shiftKey,
+            altKey: event.altKey,
+            ctrlKey: event.ctrlKey,
+            metaKey: event.metaKey,
+            accelKey: event.accelKey,
+          };
+        case "pointer_move": {
+          if (
+            state.currentPagePoint?.equals(event.pagePoint) &&
+            state.currentScreenPoint?.equals(event.screenPoint) &&
+            state.currentTimestamp === event.timestamp &&
+            state.buttons === event.buttons &&
+            areModifierKeysEqual(state, event)
+          ) {
+            return state;
+          }
+
+          const previous = state.currentPagePoint ?? event.pagePoint;
+          const previousScreen = state.currentScreenPoint ?? event.screenPoint;
+          const origin = state.originPagePoint ?? event.pagePoint;
+          const isDragging =
+            state.isDragging ||
+            origin.dist2(event.pagePoint) >= DRAG_DISTANCE_SQUARED;
+          const previousTimestamp = state.currentTimestamp ?? event.timestamp;
+          const elapsed = event.timestamp - previousTimestamp;
+          return {
+            ...state,
+            previousPagePoint: previous,
+            previousScreenPoint: previousScreen,
+            currentPagePoint: event.pagePoint,
+            currentScreenPoint: event.screenPoint,
+            previousTimestamp,
+            currentTimestamp: event.timestamp,
+            pageVelocity: getVelocity(previous, event.pagePoint, elapsed),
+            screenVelocity: getVelocity(
+              previousScreen,
+              event.screenPoint,
+              elapsed,
+            ),
+            buttons: event.buttons,
+            isDragging,
+            dragPhase: isDragging ? "dragging" : "pointing",
+            shiftKey: event.shiftKey,
+            altKey: event.altKey,
+            ctrlKey: event.ctrlKey,
+            metaKey: event.metaKey,
+            accelKey: event.accelKey,
+          };
+        }
+        case "pointer_up":
+        case "pointer_cancel":
+          return {
+            ...state,
+            previousPagePoint: state.currentPagePoint,
+            previousScreenPoint: state.currentScreenPoint,
+            currentPagePoint: event.pagePoint,
+            currentScreenPoint: event.screenPoint,
+            previousTimestamp: state.currentTimestamp,
+            currentTimestamp: event.timestamp,
+            pageVelocity: getZeroVelocity(),
+            screenVelocity: getZeroVelocity(),
+            buttons: event.buttons,
+            isPointing: false,
+            isDragging: false,
+            dragPhase: "idle",
+            shiftKey: event.shiftKey,
+            altKey: event.altKey,
+            ctrlKey: event.ctrlKey,
+            metaKey: event.metaKey,
+            accelKey: event.accelKey,
+          };
+      }
+    });
+  }
+
+  private handleKeyboardEvent(event: KeyboardEditorEvent): void {
+    this.state.update((state) => {
+      if (areModifierKeysEqual(state, event)) {
+        return state;
+      }
+      return {
+        ...state,
+        shiftKey: event.shiftKey,
+        altKey: event.altKey,
+        ctrlKey: event.ctrlKey,
+        metaKey: event.metaKey,
+        accelKey: event.accelKey,
+      };
+    });
+  }
+
+  private handleWheelEvent(event: WheelEditorEvent): void {
+    this.state.update((state) => {
+      if (areModifierKeysEqual(state, event)) {
+        return state;
+      }
+      return {
+        ...state,
+        shiftKey: event.shiftKey,
+        altKey: event.altKey,
+        ctrlKey: event.ctrlKey,
+        metaKey: event.metaKey,
+        accelKey: event.accelKey,
+      };
+    });
+  }
+}

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

@@ -0,0 +1,218 @@
+import { atom, computed, type Atom, type Signal } from "@land/signals";
+import {
+  getFreeArrowTerminalBinding,
+  type ArrowTerminalBindingResolver,
+  type ArrowTerminalBindingResolverInput,
+  type ResolvedArrowTerminalBinding,
+} from "../../bindings/arrow/arrowBindingHelpers";
+import type { Box } from "../../geometry/Box";
+import type { Vec } from "../../geometry/Vec";
+import type { ShapeId } from "../../schema/records";
+import type { Editor } from "../Editor";
+import {
+  areBindingPreviewStatesEqual,
+  areBoxesEqual,
+  areShapeIdArraysEqual,
+  areVecArraysEqual,
+} from "../editorComputedHelpers";
+import type {
+  ArrowBindingPreviewState,
+  SnapIndicatorState,
+} from "../selection";
+
+export interface LaserTrailState {
+  sessionId: number;
+  phase: "active" | "ending";
+  points: Vec[];
+}
+
+export class InteractionTransientManager {
+  private readonly _brushBoxSignal: Atom<Box | null> = atom<Box | null>(
+    "editor.brushBox",
+    null,
+  );
+  readonly brushBoxSignal: Signal<Box | null> = this._brushBoxSignal;
+  readonly brushBoxActiveSignal = computed<boolean>(
+    "editor.brushBoxActive",
+    () => this._brushBoxSignal.get() !== null,
+  );
+
+  private readonly _erasingShapeIdsSignal: Atom<ShapeId[]> = atom<ShapeId[]>(
+    "editor.erasingShapeIds",
+    [],
+  );
+  readonly erasingShapeIdsSignal: Signal<ShapeId[]> =
+    this._erasingShapeIdsSignal;
+  readonly erasingShapeIdsActiveSignal = computed<boolean>(
+    "editor.erasingShapeIdsActive",
+    () => this._erasingShapeIdsSignal.get().length > 0,
+  );
+
+  private readonly _eraserTrailSignal: Atom<Vec[]> = atom<Vec[]>(
+    "editor.eraserTrail",
+    [],
+  );
+  readonly eraserTrailSignal: Signal<Vec[]> = this._eraserTrailSignal;
+  readonly eraserTrailActiveSignal = computed<boolean>(
+    "editor.eraserTrailActive",
+    () => this._eraserTrailSignal.get().length > 1,
+  );
+
+  private readonly _laserTrailSignal: Atom<LaserTrailState | null> =
+    atom<LaserTrailState | null>("editor.laserTrail", null);
+  readonly laserTrailSignal: Signal<LaserTrailState | null> =
+    this._laserTrailSignal;
+  readonly laserTrailActiveSignal = computed<boolean>(
+    "editor.laserTrailActive",
+    () => this._laserTrailSignal.get() !== null,
+  );
+  private nextLaserSessionId = 1;
+
+  private readonly _bindingPreviewSignal: Atom<ArrowBindingPreviewState | null> =
+    atom<ArrowBindingPreviewState | null>("editor.bindingPreview", null);
+  readonly bindingPreviewSignal: Signal<ArrowBindingPreviewState | null> =
+    this._bindingPreviewSignal;
+  readonly bindingPreviewActiveSignal = computed<boolean>(
+    "editor.bindingPreviewActive",
+    () => this._bindingPreviewSignal.get() !== null,
+  );
+
+  private readonly _dropTargetShapeIdSignal: Atom<ShapeId | null> =
+    atom<ShapeId | null>("editor.dropTargetShapeId", null);
+  readonly dropTargetShapeIdSignal: Signal<ShapeId | null> =
+    this._dropTargetShapeIdSignal;
+
+  private arrowTerminalBindingResolver: ArrowTerminalBindingResolver =
+    (_editor, input) => getFreeArrowTerminalBinding(input);
+
+  constructor(private readonly editor: Editor) {}
+
+  setBrushBox(brushBox: Box | null): void {
+    const current = this._brushBoxSignal.get();
+    if (areBoxesEqual(current, brushBox)) {
+      return;
+    }
+    this._brushBoxSignal.set(brushBox ? brushBox.clone() : null);
+  }
+
+  getErasingShapeIds(): ShapeId[] {
+    return [...this._erasingShapeIdsSignal.get()];
+  }
+
+  setErasingShapeIds(shapeIds: readonly ShapeId[]): void {
+    const uniqueIds = Array.from(new Set(shapeIds));
+    if (areShapeIdArraysEqual(this._erasingShapeIdsSignal.get(), uniqueIds)) {
+      return;
+    }
+    this._erasingShapeIdsSignal.set(uniqueIds);
+  }
+
+  clearErasingShapeIds(): void {
+    this.setErasingShapeIds([]);
+  }
+
+  getEraserTrail(): Vec[] {
+    return this._eraserTrailSignal.get().map((point) => point.clone());
+  }
+
+  setEraserTrail(points: readonly Vec[]): void {
+    const current = this._eraserTrailSignal.get();
+    if (areVecArraysEqual(current, points)) {
+      return;
+    }
+    this._eraserTrailSignal.set(points.map((point) => point.clone()));
+  }
+
+  clearEraserTrail(): void {
+    this.setEraserTrail([]);
+  }
+
+  startLaserTrail(): number {
+    const sessionId = this.nextLaserSessionId++;
+    this._laserTrailSignal.set({ sessionId, phase: "active", points: [] });
+    return sessionId;
+  }
+
+  setLaserTrail(sessionId: number, points: readonly Vec[]): void {
+    const current = this._laserTrailSignal.get();
+    if (!current || current.sessionId !== sessionId) {
+      return;
+    }
+    if (current.phase === "active" && areVecArraysEqual(current.points, points)) {
+      return;
+    }
+    this._laserTrailSignal.set({
+      sessionId,
+      phase: "active",
+      points: points.map((point) => point.clone()),
+    });
+  }
+
+  finishLaserTrail(sessionId: number): void {
+    const current = this._laserTrailSignal.get();
+    if (!current || current.sessionId !== sessionId || current.phase === "ending") {
+      return;
+    }
+    this._laserTrailSignal.set({ ...current, phase: "ending" });
+  }
+
+  clearLaserTrail(sessionId: number): void {
+    const current = this._laserTrailSignal.get();
+    if (!current || current.sessionId !== sessionId) {
+      return;
+    }
+    this._laserTrailSignal.set(null);
+  }
+
+  setBindingPreview(preview: ArrowBindingPreviewState | null): void {
+    const current = this._bindingPreviewSignal.get();
+    if (areBindingPreviewStatesEqual(current, preview)) {
+      return;
+    }
+    this._bindingPreviewSignal.set(
+      preview
+        ? {
+            ...preview,
+            rawPagePoint: preview.rawPagePoint.clone(),
+            resolvedPagePoint: preview.resolvedPagePoint.clone(),
+          }
+        : null,
+    );
+  }
+
+  setDropTargetShapeId(shapeId: ShapeId | null): void {
+    if (this._dropTargetShapeIdSignal.get() === shapeId) {
+      return;
+    }
+    this._dropTargetShapeIdSignal.set(shapeId);
+  }
+
+  setSnapIndicators(indicators: SnapIndicatorState[] | null): void {
+    if (indicators) {
+      this.editor.snaps.setIndicators(indicators);
+    } else {
+      this.editor.snaps.clearIndicators();
+    }
+  }
+
+  setArrowTerminalBindingResolver(
+    resolver: ArrowTerminalBindingResolver,
+  ): void {
+    this.arrowTerminalBindingResolver = resolver;
+  }
+
+  resolveArrowTerminalBinding(
+    input: ArrowTerminalBindingResolverInput,
+  ): ResolvedArrowTerminalBinding {
+    return this.arrowTerminalBindingResolver(this.editor, input);
+  }
+
+  clearSelectionTransients(): void {
+    this.setBrushBox(null);
+    this.clearErasingShapeIds();
+    this.clearEraserTrail();
+    this.setBindingPreview(null);
+    this.setDropTargetShapeId(null);
+    this.setSnapIndicators(null);
+  }
+}