@opendata-ai/openchart-vanilla 8.0.0-rc.2 → 8.0.0-rc.21

package/src/graph/interaction.ts

@@ -1,367 +0,0 @@
-/**
- * Graph interaction manager.
- *
- * Handles mouse/touch events on the canvas and translates them into
- * high-level graph interactions: pan, zoom, hover, select, drag nodes.
- * Uses the spatial index for hit testing and ZoomTransform for coordinate
- * conversion.
- */
-
-import type { SpatialIndex } from './spatial-index';
-import { ZoomTransform } from './zoom';
-
-// ---------------------------------------------------------------------------
-// Constants
-// ---------------------------------------------------------------------------
-
-const ZOOM_MIN = 0.05;
-const ZOOM_MAX = 15;
-const ZOOM_STEP = -0.001;
-const HIT_DISTANCE = 5;
-
-// ---------------------------------------------------------------------------
-// Callback interface
-// ---------------------------------------------------------------------------
-
-export interface InteractionCallbacks {
-  onTransformChange(transform: ZoomTransform): void;
-  onHoverChange(nodeId: string | null): void;
-  /** Called during mouse move when no node is hit, with graph-space coordinates for edge hit testing. */
-  onBackgroundHover?(graphX: number, graphY: number, screenX: number, screenY: number): void;
-  onSelectionChange(nodeIds: string[]): void;
-  onNodeDragStart(nodeId: string): void;
-  onNodeDrag(nodeId: string, x: number, y: number): void;
-  onNodeDragEnd(nodeId: string): void;
-  onDoubleClick(nodeId: string): void;
-}
-
-// ---------------------------------------------------------------------------
-// Internal state
-// ---------------------------------------------------------------------------
-
-interface DragState {
-  nodeId: string;
-  started: boolean;
-}
-
-interface PanState {
-  startX: number;
-  startY: number;
-}
-
-// ---------------------------------------------------------------------------
-// GraphInteractionManager
-// ---------------------------------------------------------------------------
-
-export class GraphInteractionManager {
-  private canvas: HTMLCanvasElement;
-  private spatialIndex: SpatialIndex;
-  private callbacks: InteractionCallbacks;
-  private transform = ZoomTransform.identity();
-
-  private dragState: DragState | null = null;
-  private panState: PanState | null = null;
-  private mousedownNodeId: string | null = null;
-  private selectedIds: Set<string> = new Set();
-
-  // Touch state
-  private lastTouchDist: number | null = null;
-  private lastTouchCenter: { x: number; y: number } | null = null;
-
-  // Bound handlers for cleanup
-  private boundWheel: (e: WheelEvent) => void;
-  private boundMouseDown: (e: MouseEvent) => void;
-  private boundMouseMove: (e: MouseEvent) => void;
-  private boundMouseUp: (e: MouseEvent) => void;
-  private boundDblClick: (e: MouseEvent) => void;
-  private boundTouchStart: (e: TouchEvent) => void;
-  private boundTouchMove: (e: TouchEvent) => void;
-  private boundTouchEnd: (e: TouchEvent) => void;
-  private boundMouseLeave: (e: MouseEvent) => void;
-
-  constructor(
-    canvas: HTMLCanvasElement,
-    spatialIndex: SpatialIndex,
-    callbacks: InteractionCallbacks,
-  ) {
-    this.canvas = canvas;
-    this.spatialIndex = spatialIndex;
-    this.callbacks = callbacks;
-
-    // Bind handlers
-    this.boundWheel = this.onWheel.bind(this);
-    this.boundMouseDown = this.onMouseDown.bind(this);
-    this.boundMouseMove = this.onMouseMove.bind(this);
-    this.boundMouseUp = this.onMouseUp.bind(this);
-    this.boundMouseLeave = this.onMouseLeave.bind(this);
-    this.boundDblClick = this.onDblClick.bind(this);
-    this.boundTouchStart = this.onTouchStart.bind(this);
-    this.boundTouchMove = this.onTouchMove.bind(this);
-    this.boundTouchEnd = this.onTouchEnd.bind(this);
-
-    // Attach event listeners
-    canvas.addEventListener('wheel', this.boundWheel, { passive: false });
-    canvas.addEventListener('mousedown', this.boundMouseDown);
-    canvas.addEventListener('mousemove', this.boundMouseMove);
-    canvas.addEventListener('mouseup', this.boundMouseUp);
-    canvas.addEventListener('mouseleave', this.boundMouseLeave);
-    canvas.addEventListener('dblclick', this.boundDblClick);
-    canvas.addEventListener('touchstart', this.boundTouchStart, {
-      passive: false,
-    });
-    canvas.addEventListener('touchmove', this.boundTouchMove, {
-      passive: false,
-    });
-    canvas.addEventListener('touchend', this.boundTouchEnd);
-  }
-
-  setTransform(transform: ZoomTransform): void {
-    this.transform = transform;
-  }
-
-  getTransform(): ZoomTransform {
-    return this.transform;
-  }
-
-  destroy(): void {
-    this.canvas.removeEventListener('wheel', this.boundWheel);
-    this.canvas.removeEventListener('mousedown', this.boundMouseDown);
-    this.canvas.removeEventListener('mousemove', this.boundMouseMove);
-    this.canvas.removeEventListener('mouseup', this.boundMouseUp);
-    this.canvas.removeEventListener('mouseleave', this.boundMouseLeave);
-    this.canvas.removeEventListener('dblclick', this.boundDblClick);
-    this.canvas.removeEventListener('touchstart', this.boundTouchStart);
-    this.canvas.removeEventListener('touchmove', this.boundTouchMove);
-    this.canvas.removeEventListener('touchend', this.boundTouchEnd);
-  }
-
-  // -------------------------------------------------------------------------
-  // Mouse handlers
-  // -------------------------------------------------------------------------
-
-  private canvasXY(e: MouseEvent): { x: number; y: number } {
-    const rect = this.canvas.getBoundingClientRect();
-    return { x: e.clientX - rect.left, y: e.clientY - rect.top };
-  }
-
-  private hitTest(screenX: number, screenY: number): string | null {
-    const graph = this.transform.screenToGraph(screenX, screenY);
-    const node = this.spatialIndex.findNearest(graph.x, graph.y, HIT_DISTANCE / this.transform.k);
-    return node?.id ?? null;
-  }
-
-  private onWheel(e: WheelEvent): void {
-    e.preventDefault();
-    const { x, y } = this.canvasXY(e);
-    const factor = e.deltaY * ZOOM_STEP;
-    const newK = Math.max(ZOOM_MIN, Math.min(ZOOM_MAX, this.transform.k * (1 + factor)));
-    this.transform = this.transform.zoomAt(newK, x, y);
-    this.callbacks.onTransformChange(this.transform);
-  }
-
-  private onMouseDown(e: MouseEvent): void {
-    const { x, y } = this.canvasXY(e);
-    const hitId = this.hitTest(x, y);
-
-    if (hitId) {
-      // Start potential node drag
-      this.dragState = { nodeId: hitId, started: false };
-      this.mousedownNodeId = hitId;
-    } else {
-      // Start pan
-      this.panState = { startX: x, startY: y };
-      this.mousedownNodeId = null;
-    }
-  }
-
-  private onMouseMove(e: MouseEvent): void {
-    const { x, y } = this.canvasXY(e);
-
-    if (this.dragState) {
-      const graph = this.transform.screenToGraph(x, y);
-      if (!this.dragState.started) {
-        this.dragState.started = true;
-        this.callbacks.onNodeDragStart(this.dragState.nodeId);
-      }
-      this.callbacks.onNodeDrag(this.dragState.nodeId, graph.x, graph.y);
-      return;
-    }
-
-    if (this.panState) {
-      const dx = x - this.panState.startX;
-      const dy = y - this.panState.startY;
-      this.transform = this.transform.pan(dx, dy);
-      this.panState = { startX: x, startY: y };
-      this.callbacks.onTransformChange(this.transform);
-      return;
-    }
-
-    // Hover detection
-    const hitId = this.hitTest(x, y);
-    this.callbacks.onHoverChange(hitId);
-
-    // If no node hit, check edges via callback
-    if (!hitId) {
-      const graph = this.transform.screenToGraph(x, y);
-      this.callbacks.onBackgroundHover?.(graph.x, graph.y, x, y);
-    }
-
-    // Update cursor
-    this.canvas.style.cursor = hitId ? 'pointer' : 'default';
-  }
-
-  private onMouseUp(e: MouseEvent): void {
-    const { x, y } = this.canvasXY(e);
-
-    if (this.dragState) {
-      if (this.dragState.started) {
-        this.callbacks.onNodeDragEnd(this.dragState.nodeId);
-      } else {
-        // Was a click on a node (no drag movement)
-        this.handleNodeClick(this.dragState.nodeId, e.shiftKey);
-      }
-      this.dragState = null;
-      return;
-    }
-
-    if (this.panState) {
-      this.panState = null;
-
-      // If mouse up is on background (no node), treat as background click
-      if (!this.mousedownNodeId) {
-        const hitId = this.hitTest(x, y);
-        if (!hitId) {
-          // Background click: clear selection
-          this.selectedIds.clear();
-          this.callbacks.onSelectionChange([]);
-        }
-      }
-      return;
-    }
-  }
-
-  private onDblClick(e: MouseEvent): void {
-    const { x, y } = this.canvasXY(e);
-    const hitId = this.hitTest(x, y);
-    if (hitId) {
-      this.callbacks.onDoubleClick(hitId);
-    }
-  }
-
-  private onMouseLeave(_e: MouseEvent): void {
-    this.callbacks.onHoverChange(null);
-    this.canvas.style.cursor = 'default';
-
-    // Cancel any in-progress pan
-    if (this.panState) {
-      this.panState = null;
-    }
-  }
-
-  private handleNodeClick(nodeId: string, shiftKey: boolean): void {
-    if (shiftKey) {
-      // Toggle node in multi-select
-      if (this.selectedIds.has(nodeId)) {
-        this.selectedIds.delete(nodeId);
-      } else {
-        this.selectedIds.add(nodeId);
-      }
-    } else {
-      // Single select
-      this.selectedIds.clear();
-      this.selectedIds.add(nodeId);
-    }
-
-    this.callbacks.onSelectionChange([...this.selectedIds]);
-  }
-
-  // -------------------------------------------------------------------------
-  // Touch handlers
-  // -------------------------------------------------------------------------
-
-  private onTouchStart(e: TouchEvent): void {
-    e.preventDefault();
-
-    if (e.touches.length === 2) {
-      // Pinch-zoom start
-      const [t0, t1] = [e.touches[0], e.touches[1]];
-      this.lastTouchDist = Math.hypot(t1.clientX - t0.clientX, t1.clientY - t0.clientY);
-      this.lastTouchCenter = {
-        x: (t0.clientX + t1.clientX) / 2,
-        y: (t0.clientY + t1.clientY) / 2,
-      };
-    } else if (e.touches.length === 1) {
-      const touch = e.touches[0];
-      const rect = this.canvas.getBoundingClientRect();
-      const x = touch.clientX - rect.left;
-      const y = touch.clientY - rect.top;
-
-      const hitId = this.hitTest(x, y);
-      if (hitId) {
-        this.mousedownNodeId = hitId;
-      } else {
-        this.panState = { startX: x, startY: y };
-        this.mousedownNodeId = null;
-      }
-    }
-  }
-
-  private onTouchMove(e: TouchEvent): void {
-    e.preventDefault();
-
-    if (e.touches.length === 2 && this.lastTouchDist !== null) {
-      const [t0, t1] = [e.touches[0], e.touches[1]];
-      const newDist = Math.hypot(t1.clientX - t0.clientX, t1.clientY - t0.clientY);
-      const rect = this.canvas.getBoundingClientRect();
-      const centerX = (t0.clientX + t1.clientX) / 2 - rect.left;
-      const centerY = (t0.clientY + t1.clientY) / 2 - rect.top;
-
-      const scale = newDist / this.lastTouchDist;
-      const newK = Math.max(ZOOM_MIN, Math.min(ZOOM_MAX, this.transform.k * scale));
-      this.transform = this.transform.zoomAt(newK, centerX, centerY);
-
-      // Pan from center movement
-      if (this.lastTouchCenter) {
-        const dx = centerX - (this.lastTouchCenter.x - rect.left);
-        const dy = centerY - (this.lastTouchCenter.y - rect.top);
-        this.transform = this.transform.pan(dx, dy);
-      }
-
-      this.lastTouchDist = newDist;
-      this.lastTouchCenter = {
-        x: (t0.clientX + t1.clientX) / 2,
-        y: (t0.clientY + t1.clientY) / 2,
-      };
-      this.callbacks.onTransformChange(this.transform);
-    } else if (e.touches.length === 1 && this.panState) {
-      const touch = e.touches[0];
-      const rect = this.canvas.getBoundingClientRect();
-      const x = touch.clientX - rect.left;
-      const y = touch.clientY - rect.top;
-
-      const dx = x - this.panState.startX;
-      const dy = y - this.panState.startY;
-      this.transform = this.transform.pan(dx, dy);
-      this.panState = { startX: x, startY: y };
-      this.callbacks.onTransformChange(this.transform);
-    }
-  }
-
-  private onTouchEnd(e: TouchEvent): void {
-    if (e.touches.length === 0) {
-      // Tap-select
-      if (this.mousedownNodeId && !this.panState) {
-        this.handleNodeClick(this.mousedownNodeId, false);
-      } else if (!this.mousedownNodeId && this.panState) {
-        // Background tap: clear selection
-        this.selectedIds.clear();
-        this.callbacks.onSelectionChange([]);
-      }
-
-      this.panState = null;
-      this.mousedownNodeId = null;
-      this.lastTouchDist = null;
-      this.lastTouchCenter = null;
-    }
-  }
-}

package/src/graph/keyboard.ts

@@ -1,208 +0,0 @@
-/**
- * Keyboard navigation for the graph canvas.
- *
- * Provides accessible keyboard control: Tab to focus, arrow keys to
- * navigate between adjacent nodes (following edges), Enter to select,
- * Escape to clear, +/- to zoom, Home to fit all, / to focus search.
- */
-
-import type { PositionedNode } from './types';
-
-// ---------------------------------------------------------------------------
-// Options
-// ---------------------------------------------------------------------------
-
-export interface KeyboardNavOptions {
-  canvas: HTMLCanvasElement;
-  getNodes(): PositionedNode[];
-  getSelectedIds(): string[];
-  getAdjacency(): Map<string, Set<string>>;
-  onSelect(nodeId: string): void;
-  onDeselect(): void;
-  onZoom(direction: 'in' | 'out'): void;
-  onFitAll(): void;
-  onFocusSearch?(): void;
-}
-
-// ---------------------------------------------------------------------------
-// Implementation
-// ---------------------------------------------------------------------------
-
-/**
- * Attach keyboard navigation to a graph canvas.
- * Returns a cleanup function that removes all listeners.
- */
-export function attachGraphKeyboardNav(options: KeyboardNavOptions): () => void {
-  const {
-    canvas,
-    getNodes,
-    getSelectedIds,
-    getAdjacency,
-    onSelect,
-    onDeselect,
-    onZoom,
-    onFitAll,
-    onFocusSearch,
-  } = options;
-
-  let focusedNodeId: string | null = null;
-
-  // Make canvas focusable
-  if (!canvas.hasAttribute('tabindex')) {
-    canvas.setAttribute('tabindex', '0');
-  }
-
-  function findNodeById(id: string): PositionedNode | undefined {
-    return getNodes().find((n) => n.id === id);
-  }
-
-  /**
-   * Given a set of neighbor node ids, pick the one that best matches
-   * the arrow key direction relative to the current focused node.
-   */
-  function pickDirectionalNeighbor(
-    fromNode: PositionedNode,
-    neighborIds: Set<string>,
-    direction: 'up' | 'down' | 'left' | 'right',
-  ): string | null {
-    const nodes = getNodes();
-    const candidates = nodes.filter((n) => neighborIds.has(n.id));
-    if (candidates.length === 0) return null;
-
-    // Score each candidate by how well it matches the desired direction
-    let best: PositionedNode | null = null;
-    let bestScore = -Infinity;
-
-    for (const c of candidates) {
-      const dx = c.x - fromNode.x;
-      const dy = c.y - fromNode.y;
-      let score: number;
-
-      switch (direction) {
-        case 'right':
-          score = dx - Math.abs(dy) * 0.5;
-          break;
-        case 'left':
-          score = -dx - Math.abs(dy) * 0.5;
-          break;
-        case 'down':
-          score = dy - Math.abs(dx) * 0.5;
-          break;
-        case 'up':
-          score = -dy - Math.abs(dx) * 0.5;
-          break;
-      }
-
-      if (score > bestScore) {
-        bestScore = score;
-        best = c;
-      }
-    }
-
-    return best?.id ?? null;
-  }
-
-  function onKeyDown(e: KeyboardEvent): void {
-    switch (e.key) {
-      case 'Tab': {
-        // Focus first/selected node
-        const selected = getSelectedIds();
-        const nodes = getNodes();
-        if (nodes.length === 0) return;
-
-        if (selected.length > 0) {
-          focusedNodeId = selected[0];
-        } else if (!focusedNodeId || !findNodeById(focusedNodeId)) {
-          focusedNodeId = nodes[0].id;
-        }
-
-        e.preventDefault();
-        break;
-      }
-
-      case 'ArrowUp':
-      case 'ArrowDown':
-      case 'ArrowLeft':
-      case 'ArrowRight': {
-        if (!focusedNodeId) return;
-        e.preventDefault();
-
-        const focusedNode = findNodeById(focusedNodeId);
-        if (!focusedNode) return;
-
-        const adjacency = getAdjacency();
-        const neighbors = adjacency.get(focusedNodeId);
-        if (!neighbors || neighbors.size === 0) return;
-
-        const dirMap: Record<string, 'up' | 'down' | 'left' | 'right'> = {
-          ArrowUp: 'up',
-          ArrowDown: 'down',
-          ArrowLeft: 'left',
-          ArrowRight: 'right',
-        };
-
-        const nextId = pickDirectionalNeighbor(focusedNode, neighbors, dirMap[e.key]);
-        if (nextId) {
-          focusedNodeId = nextId;
-          onSelect(nextId);
-        }
-        break;
-      }
-
-      case 'Enter': {
-        if (focusedNodeId) {
-          e.preventDefault();
-          const selected = getSelectedIds();
-          if (selected.includes(focusedNodeId)) {
-            onDeselect();
-          } else {
-            onSelect(focusedNodeId);
-          }
-        }
-        break;
-      }
-
-      case 'Escape': {
-        e.preventDefault();
-        focusedNodeId = null;
-        onDeselect();
-        break;
-      }
-
-      case '+':
-      case '=': {
-        e.preventDefault();
-        onZoom('in');
-        break;
-      }
-
-      case '-':
-      case '_': {
-        e.preventDefault();
-        onZoom('out');
-        break;
-      }
-
-      case 'Home': {
-        e.preventDefault();
-        onFitAll();
-        break;
-      }
-
-      case '/': {
-        if (onFocusSearch) {
-          e.preventDefault();
-          onFocusSearch();
-        }
-        break;
-      }
-    }
-  }
-
-  canvas.addEventListener('keydown', onKeyDown);
-
-  // Return cleanup function
-  return () => {
-    canvas.removeEventListener('keydown', onKeyDown);
-  };
-}

package/src/graph/search.ts

@@ -1,50 +0,0 @@
-/**
- * Graph search manager.
- *
- * Provides case-insensitive substring matching against node labels/ids.
- * Returns a Set of matching node ids that the renderer uses to dim
- * non-matching nodes and edges.
- */
-
-export class GraphSearchManager {
-  private matchedIds: Set<string> | null = null;
-
-  /**
-   * Search for nodes matching the query string.
-   * Returns a Set of matching node ids, or an empty set if nothing matches.
-   */
-  search(query: string, nodes: Array<{ id: string; label?: string }>): Set<string> {
-    const q = query.toLowerCase().trim();
-
-    if (q === '') {
-      this.matchedIds = null;
-      return new Set();
-    }
-
-    const matches = new Set<string>();
-    for (const node of nodes) {
-      const label = (node.label ?? '').toLowerCase();
-      const id = node.id.toLowerCase();
-      if (label.includes(q) || id.includes(q)) {
-        matches.add(node.id);
-      }
-    }
-
-    this.matchedIds = matches;
-    return matches;
-  }
-
-  /**
-   * Clear the current search.
-   * Returns null to indicate no active search.
-   */
-  clearSearch(): Set<string> | null {
-    this.matchedIds = null;
-    return null;
-  }
-
-  /** Get the current set of matched ids, or null if no search is active. */
-  getMatches(): Set<string> | null {
-    return this.matchedIds;
-  }
-}

package/src/graph/simulation-worker-url.ts

@@ -1,12 +0,0 @@
-/**
- * Creates a Web Worker running the force simulation.
- *
- * References the built .js file via `new URL` + `import.meta.url`.
- * The consuming app's bundler resolves the worker path at build time.
- *
- * Note: SimulationManager handles .js/.ts fallback internally. This
- * helper is exported for consumers who want to manage the worker directly.
- */
-export function createSimulationWorker(): Worker {
-  return new Worker(new URL('./simulation-worker.js', import.meta.url), { type: 'module' });
-}