@yuzhouu/canvas-kit 0.1.2

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

@@ -0,0 +1,354 @@
+import { computed, type Signal } from "@land/signals";
+import { Box } from "../../geometry/Box";
+import { Vec } from "../../geometry/Vec";
+import type { PageId, ShapeRecord } from "../../schema/records";
+import type { Editor } from "../Editor";
+import { pagePointToShapePositionedPoint } from "../queries/shapeTransforms";
+import type { QueryManager } from "./QueryManager";
+
+interface SpatialIndexEntry {
+  shapeId: ShapeRecord["id"];
+  bounds: Box;
+}
+
+interface SpatialIndexBackend<TEntry> {
+  search(bounds: Box): TEntry[];
+}
+
+const DEFAULT_GRID_CELL_SIZE = 256;
+const MIN_GRID_CELL_SIZE = 16;
+
+function computeGridCellSize(entries: readonly { bounds: Box }[]): number {
+  if (entries.length === 0) {
+    return DEFAULT_GRID_CELL_SIZE;
+  }
+
+  let total = 0;
+  for (const entry of entries) {
+    total += Math.max(entry.bounds.w, entry.bounds.h);
+  }
+  const average = total / entries.length;
+  // Cells sized a little larger than the average shape keep most shapes inside
+  // one or two cells while bounding the per-query cell scan.
+  return Math.max(MIN_GRID_CELL_SIZE, Math.round(average) || DEFAULT_GRID_CELL_SIZE);
+}
+
+/**
+ * Uniform grid spatial index. Buckets entries into fixed-size cells so a bounds
+ * query only scans entries in overlapping cells instead of every entry. Search
+ * results preserve the original entry order (back-to-front z-order) that hit-test
+ * callers depend on.
+ */
+class UniformGridSpatialIndex<
+  TEntry extends { bounds: Box },
+> implements SpatialIndexBackend<TEntry> {
+  private readonly cellSize: number;
+  private readonly cells = new Map<string, TEntry[]>();
+  private readonly order = new Map<TEntry, number>();
+
+  constructor(private readonly entries: TEntry[]) {
+    this.cellSize = computeGridCellSize(entries);
+    for (let index = 0; index < entries.length; index += 1) {
+      const entry = entries[index];
+      if (!entry) continue;
+      this.order.set(entry, index);
+      this.insert(entry);
+    }
+  }
+
+  private cellKey(col: number, row: number): string {
+    return `${col}:${row}`;
+  }
+
+  private insert(entry: TEntry): void {
+    const minCol = Math.floor(entry.bounds.minX / this.cellSize);
+    const minRow = Math.floor(entry.bounds.minY / this.cellSize);
+    const maxCol = Math.floor(entry.bounds.maxX / this.cellSize);
+    const maxRow = Math.floor(entry.bounds.maxY / this.cellSize);
+
+    for (let row = minRow; row <= maxRow; row += 1) {
+      for (let col = minCol; col <= maxCol; col += 1) {
+        const key = this.cellKey(col, row);
+        const bucket = this.cells.get(key);
+        if (bucket) {
+          bucket.push(entry);
+        } else {
+          this.cells.set(key, [entry]);
+        }
+      }
+    }
+  }
+
+  search(bounds: Box): TEntry[] {
+    const minCol = Math.floor(bounds.minX / this.cellSize);
+    const minRow = Math.floor(bounds.minY / this.cellSize);
+    const maxCol = Math.floor(bounds.maxX / this.cellSize);
+    const maxRow = Math.floor(bounds.maxY / this.cellSize);
+    const cellCount = (maxCol - minCol + 1) * (maxRow - minRow + 1);
+
+    // When the query spans more cells than there are entries, scanning every
+    // entry once is cheaper than walking the grid.
+    if (cellCount > this.entries.length) {
+      return this.entries.filter((entry) => entry.bounds.intersects(bounds));
+    }
+
+    const seen = new Set<TEntry>();
+    const result: TEntry[] = [];
+    for (let row = minRow; row <= maxRow; row += 1) {
+      for (let col = minCol; col <= maxCol; col += 1) {
+        const bucket = this.cells.get(this.cellKey(col, row));
+        if (!bucket) continue;
+        for (const entry of bucket) {
+          if (seen.has(entry)) continue;
+          seen.add(entry);
+          if (entry.bounds.intersects(bounds)) {
+            result.push(entry);
+          }
+        }
+      }
+    }
+
+    if (result.length > 1) {
+      result.sort(
+        (a, b) => (this.order.get(a) ?? 0) - (this.order.get(b) ?? 0),
+      );
+    }
+    return result;
+  }
+}
+
+export interface SpatialQueryOptions {
+  pageId?: PageId;
+}
+
+export interface ShapeAtPointOptions extends SpatialQueryOptions {
+  filter?: (shape: ShapeRecord) => boolean;
+}
+
+export interface ShapeLineSegmentHitTestOptions extends SpatialQueryOptions {
+  margin?: number;
+  filter?: (shape: ShapeRecord) => boolean;
+}
+
+function createPointQueryBounds(point: Vec): Box {
+  return new Box(point.x - 0.5, point.y - 0.5, 1, 1);
+}
+
+function createLineSegmentQueryBounds(start: Vec, end: Vec, margin: number): Box {
+  return Box.FromPoints([start, end]).expand(Math.max(0.5, margin));
+}
+
+function getSegmentIntersectionParameter(
+  start: Vec,
+  end: Vec,
+  edgeStart: Vec,
+  edgeEnd: Vec,
+): number | null {
+  const segment = end.sub(start);
+  const edge = edgeEnd.sub(edgeStart);
+  const denominator = segment.x * edge.y - segment.y * edge.x;
+  if (Math.abs(denominator) < 1e-8) {
+    return null;
+  }
+
+  const delta = edgeStart.sub(start);
+  const t = (delta.x * edge.y - delta.y * edge.x) / denominator;
+  const u = (delta.x * segment.y - delta.y * segment.x) / denominator;
+
+  return t >= 0 && t <= 1 && u >= 0 && u <= 1 ? t : null;
+}
+
+function doesLineSegmentIntersectBox(start: Vec, end: Vec, bounds: Box): boolean {
+  if (bounds.containsPoint(start) || bounds.containsPoint(end)) {
+    return true;
+  }
+
+  const corners = [
+    new Vec(bounds.minX, bounds.minY),
+    new Vec(bounds.maxX, bounds.minY),
+    new Vec(bounds.maxX, bounds.maxY),
+    new Vec(bounds.minX, bounds.maxY),
+  ];
+
+  for (let index = 0; index < corners.length; index += 1) {
+    const edgeStart = corners[index];
+    const edgeEnd = corners[(index + 1) % corners.length];
+    if (
+      edgeStart &&
+      edgeEnd &&
+      getSegmentIntersectionParameter(start, end, edgeStart, edgeEnd) !== null
+    ) {
+      return true;
+    }
+  }
+
+  return false;
+}
+
+export class SpatialIndexManager {
+  private readonly pageIndexSignals = new Map<
+    PageId,
+    Signal<SpatialIndexBackend<SpatialIndexEntry>>
+  >();
+
+  constructor(
+    private readonly editor: Editor,
+    private readonly queries: QueryManager,
+  ) {}
+
+  getShapesInBounds(bounds: Box, options?: SpatialQueryOptions): ShapeRecord[] {
+    return this.getShapeIdsInBounds(bounds, options)
+      .map((shapeId) => this.editor.getShape(shapeId))
+      .filter((shape): shape is ShapeRecord => !!shape);
+  }
+
+  getShapeIdsInBounds(bounds: Box, options?: SpatialQueryOptions): ShapeRecord["id"][] {
+    return this.getPageIndex(options?.pageId)
+      .search(bounds)
+      .map((entry) => entry.shapeId);
+  }
+
+  getShapesInViewport(
+    bounds: Box,
+    options?: SpatialQueryOptions,
+  ): ShapeRecord[] {
+    return this.getShapesInBounds(bounds, options);
+  }
+
+  getShapeIdsInViewport(
+    bounds: Box,
+    options?: SpatialQueryOptions,
+  ): ShapeRecord["id"][] {
+    return this.getShapeIdsInBounds(bounds, options);
+  }
+
+  getShapeAtPoint(
+    point: Vec,
+    options?: ShapeAtPointOptions,
+  ): ShapeRecord | null {
+    return this.getShapesAtPoint(point, options)[0] ?? null;
+  }
+
+  getShapesAtPoint(
+    point: Vec,
+    options?: ShapeAtPointOptions,
+  ): ShapeRecord[] {
+    const candidates = this.getPageIndex(options?.pageId).search(
+      createPointQueryBounds(point),
+    );
+    const hits: ShapeRecord[] = [];
+
+    for (let index = candidates.length - 1; index >= 0; index -= 1) {
+      const candidate = candidates[index];
+      if (!candidate?.bounds.containsPoint(point)) {
+        continue;
+      }
+
+      const shape = this.editor.getShape(candidate.shapeId);
+      if (!shape) {
+        continue;
+      }
+      if (options?.filter && !options.filter(shape)) {
+        continue;
+      }
+
+      const util = this.editor.getShapeUtil(shape);
+      const positionedPoint = pagePointToShapePositionedPoint(
+        shape,
+        point,
+        util,
+      );
+      if (util.hitTest(shape, positionedPoint)) {
+        hits.push(shape);
+      }
+    }
+
+    return hits;
+  }
+
+  getShapesHitByLineSegment(
+    start: Vec,
+    end: Vec,
+    options?: ShapeLineSegmentHitTestOptions,
+  ): ShapeRecord[] {
+    const margin = options?.margin ?? 0;
+    const queryBounds = createLineSegmentQueryBounds(start, end, margin);
+    const candidates = this.getPageIndex(options?.pageId).search(queryBounds);
+    const hits: ShapeRecord[] = [];
+
+    for (let index = candidates.length - 1; index >= 0; index -= 1) {
+      const candidate = candidates[index];
+      if (!candidate) {
+        continue;
+      }
+
+      const clippedBounds = this.queries.getShapeClippedPageBounds(
+        candidate.shapeId,
+      );
+      if (
+        !clippedBounds ||
+        !doesLineSegmentIntersectBox(start, end, clippedBounds.expand(margin))
+      ) {
+        continue;
+      }
+
+      const shape = this.editor.getShape(candidate.shapeId);
+      if (!shape) {
+        continue;
+      }
+      if (options?.filter && !options.filter(shape)) {
+        continue;
+      }
+
+      const util = this.editor.getShapeUtil(shape);
+      const positionedStart = pagePointToShapePositionedPoint(shape, start, util);
+      const positionedEnd = pagePointToShapePositionedPoint(shape, end, util);
+      if (
+        util.hitTestLineSegment(shape, {
+          pageStart: start,
+          pageEnd: end,
+          positionedStart,
+          positionedEnd,
+          margin,
+        })
+      ) {
+        hits.push(shape);
+      }
+    }
+
+    return hits;
+  }
+
+  private getPageIndexSignal(
+    pageId: PageId,
+  ): Signal<SpatialIndexBackend<SpatialIndexEntry>> {
+    let signal = this.pageIndexSignals.get(pageId);
+    if (!signal) {
+      signal = computed(`editor.spatialIndex.page.${pageId}`, () => {
+        const shapeIds =
+          this.queries.stateSignal.get().pageShapeIdsByPage.get(pageId) ?? [];
+        const entries: SpatialIndexEntry[] = [];
+
+        for (const shapeId of shapeIds) {
+          const bounds = this.queries.getShapePageBoundsSignal(shapeId).get();
+          if (!bounds) {
+            continue;
+          }
+
+          entries.push({ shapeId, bounds });
+        }
+
+        return new UniformGridSpatialIndex(entries);
+      });
+      this.pageIndexSignals.set(pageId, signal);
+    }
+
+    return signal;
+  }
+
+  private getPageIndex(
+    pageId: PageId = this.editor.getCurrentPageId(),
+  ): SpatialIndexBackend<SpatialIndexEntry> {
+    return this.getPageIndexSignal(pageId).get();
+  }
+}

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

@@ -0,0 +1,81 @@
+import { atom } from "@land/signals";
+import type { Editor } from "../Editor";
+import type { CancelEditorEvent, EditorEvent } from "../events";
+import type { StateNode } from "../StateNode";
+
+type ToolFactory = (editor: Editor) => StateNode;
+
+export interface ToolRegistrationOptions {
+  shortcut?: string;
+}
+
+export class ToolManager {
+  readonly activeToolId = atom<string>("tools.activeToolId", "select");
+  readonly isToolLocked = atom<boolean>("tools.isToolLocked", false);
+
+  private readonly registry = new Map<string, ToolFactory>();
+  private readonly shortcutToolIds = new Map<string, string>();
+  private activeTool: StateNode | null = null;
+
+  constructor(private readonly editor: Editor) {}
+
+  register(
+    id: string,
+    factory: ToolFactory,
+    options: ToolRegistrationOptions = {},
+  ): void {
+    this.registry.set(id, factory);
+    if (options.shortcut) {
+      this.shortcutToolIds.set(options.shortcut.toLowerCase(), id);
+    }
+  }
+
+  hasTool(id: string): boolean {
+    return this.registry.has(id);
+  }
+
+  getToolIdForShortcut(key: string): string | null {
+    return this.shortcutToolIds.get(key.toLowerCase()) ?? null;
+  }
+
+  setActiveTool(
+    id: string,
+    reason: CancelEditorEvent["reason"] = "tool_switch",
+  ): void {
+    const factory = this.registry.get(id);
+    if (!factory) {
+      throw new Error(`Unknown tool \"${id}\"`);
+    }
+
+    if (this.activeTool && this.activeToolId.get() === id) {
+      return;
+    }
+
+    if (this.activeTool) {
+      this.activeTool.dispatch({ type: "cancel", reason });
+      this.activeTool.exit({ reason });
+      this.editor.inputs.resetPointer();
+      this.editor.clearSelectionTransients();
+    }
+
+    this.activeToolId.set(id);
+    this.activeTool = factory(this.editor);
+    this.activeTool.enter();
+  }
+
+  dispatch(event: EditorEvent): void {
+    this.activeTool?.dispatch(event);
+  }
+
+  cancel(reason: CancelEditorEvent["reason"]): void {
+    this.activeTool?.dispatch({ type: "cancel", reason });
+  }
+
+  setToolLocked(locked: boolean): void {
+    this.isToolLocked.set(locked);
+  }
+
+  isActiveToolInInitialState(): boolean {
+    return this.activeTool?.isInInitialState() ?? true;
+  }
+}