@opendata-ai/openchart-vanilla 8.0.0-rc.9 → 8.0.0

package/src/index.ts

@@ -1,76 +0,0 @@
-/**
- * @opendata-ai/openchart-vanilla
- *
- * Vanilla JS adapter for openchart. Renders ChartLayout and TableLayout
- * objects into real DOM elements using imperative SVG/HTML creation.
- *
- * Provides createChart() for mounting visualizations, ResizeObserver integration
- * for responsive behavior, tooltip management, and SVG/PNG/CSV export.
- */
-
-// Re-export core types for convenience
-export type {
-  ChartLayout,
-  ChartSpec,
-  CompileOptions,
-  TableLayout,
-  TableSpec,
-  VizSpec,
-} from '@opendata-ai/openchart-engine';
-export type { BarListInstance, BarListMountOptions } from './barlist-mount';
-// BarList mount API
-export { createBarList } from './barlist-mount';
-export type { JPGExportOptions, PNGExportOptions, SVGExportOptions } from './export';
-// Export utilities
-export { exportCSV, exportJPG, exportPNG, exportSVG, exportSVGWithFonts } from './export';
-// Graph simulation worker
-export { createSimulationWorker } from './graph/simulation-worker-url';
-export type { GraphInstance, GraphMountOptions } from './graph-mount';
-// Graph mount API
-export { createGraph } from './graph-mount';
-export type { Camera, MapCameraOptions } from './map-camera';
-export type { MapInstance, MapMarkEvent, MapMountOptions } from './map-mount';
-// Map mount API
-export { createMap } from './map-mount';
-export type { ChartInstance, ExportOptions, MountOptions, UpdateOptions } from './mount';
-// Main mount API
-export { createChart } from './mount';
-// Geometry helpers for mark path reconstruction
-export { rectPathWithCorners } from './renderers/marks';
-// Cell renderers
-export {
-  renderBarCell,
-  renderCategoryCell,
-  renderCell,
-  renderFlagCell,
-  renderHeatmapCell,
-  renderImageCell,
-  renderSparklineCell,
-  renderTextCell,
-} from './renderers/table-cells';
-// Resize observer
-export { observeResize } from './resize-observer';
-export type { SankeyInstance, SankeyMountOptions } from './sankey-mount';
-// Sankey mount API
-export { createSankey } from './sankey-mount';
-// SVG renderer (for advanced usage / custom rendering)
-export { registerMarkRenderer, renderChartSVG } from './svg-renderer';
-export type { KeyboardNavOptions } from './table-keyboard';
-// Table keyboard navigation
-export { attachKeyboardNav } from './table-keyboard';
-export type { TableInstance, TableMountOptions, TableState } from './table-mount';
-// Table mount API
-export { createTable } from './table-mount';
-// Table renderer (for advanced usage / custom rendering)
-export { renderTable } from './table-renderer';
-export type { TextEditOverlayConfig } from './text-edit-overlay';
-export { createTextEditOverlay } from './text-edit-overlay';
-export type { TileMapInstance, TileMapMountOptions } from './tilemap-mount';
-// TileMap mount API
-export { createTileMap } from './tilemap-mount';
-export type { TooltipManager } from './tooltip';
-// Tooltip
-export { createTooltipManager } from './tooltip';
-export type { YouDrawItController, YouDrawItOptions } from './you-draw-it';
-// You draw it (interactive draw-then-reveal)
-export { createYouDrawIt } from './you-draw-it';

package/src/interactions/chart-events.ts

@@ -1,139 +0,0 @@
-import type { Annotation, ChartEventHandlers, ChartLayout } from '@opendata-ai/openchart-core';
-
-/**
- * Build a map from data-mark-id to { datum, series } so event handlers
- * can look up the data row associated with a clicked/hovered mark element.
- */
-function buildMarkDataMap(
-  layout: ChartLayout,
-): Map<string, { datum: Record<string, unknown>; series?: string }> {
-  const map = new Map<string, { datum: Record<string, unknown>; series?: string }>();
-
-  for (let i = 0; i < layout.marks.length; i++) {
-    const mark = layout.marks[i];
-    switch (mark.type) {
-      case 'line':
-        map.set(`line-${mark.seriesKey ?? i}`, {
-          datum: mark.data[0] ?? {},
-          series: mark.seriesKey,
-        });
-        break;
-      case 'area':
-        map.set(`area-${mark.seriesKey ?? i}`, {
-          datum: mark.data[0] ?? {},
-          series: mark.seriesKey,
-        });
-        break;
-      case 'rect':
-        map.set(`rect-${i}`, { datum: mark.data });
-        break;
-      case 'arc':
-        map.set(`arc-${i}`, { datum: mark.data });
-        break;
-      case 'point':
-        map.set(`point-${i}`, { datum: mark.data });
-        break;
-    }
-  }
-
-  return map;
-}
-
-/**
- * Wire chart event handlers (onMarkClick, onMarkHover, onMarkLeave) to mark
- * elements, onLegendToggle to legend entries, and onAnnotationClick to annotation
- * elements inside an SVG.
- *
- * Returns a cleanup function to remove all listeners.
- */
-export function wireChartEvents(
-  svg: SVGElement,
-  layout: ChartLayout,
-  specAnnotations: Annotation[],
-  handlers: ChartEventHandlers,
-): () => void {
-  const cleanups: Array<() => void> = [];
-  const markDataMap = buildMarkDataMap(layout);
-
-  if (handlers.onMarkClick || handlers.onMarkHover || handlers.onMarkLeave) {
-    const markElements = svg.querySelectorAll('[data-mark-id]');
-
-    for (const el of markElements) {
-      const markId = el.getAttribute('data-mark-id');
-      if (!markId) continue;
-
-      const markInfo = markDataMap.get(markId);
-      if (!markInfo) continue;
-
-      const series = markInfo.series ?? el.getAttribute('data-series') ?? undefined;
-
-      if (handlers.onMarkClick) {
-        const handleClick = (e: Event) => {
-          const mouseEvent = e as MouseEvent;
-          const svgRect = svg.getBoundingClientRect();
-          handlers.onMarkClick!({
-            datum: markInfo.datum,
-            series,
-            position: {
-              x: mouseEvent.clientX - svgRect.left,
-              y: mouseEvent.clientY - svgRect.top,
-            },
-            event: mouseEvent,
-          });
-        };
-        el.addEventListener('click', handleClick);
-        cleanups.push(() => el.removeEventListener('click', handleClick));
-      }
-
-      if (handlers.onMarkHover) {
-        const handleEnter = (e: Event) => {
-          const mouseEvent = e as MouseEvent;
-          const svgRect = svg.getBoundingClientRect();
-          handlers.onMarkHover!({
-            datum: markInfo.datum,
-            series,
-            position: {
-              x: mouseEvent.clientX - svgRect.left,
-              y: mouseEvent.clientY - svgRect.top,
-            },
-            event: mouseEvent,
-          });
-        };
-        el.addEventListener('mouseenter', handleEnter);
-        cleanups.push(() => el.removeEventListener('mouseenter', handleEnter));
-      }
-
-      if (handlers.onMarkLeave) {
-        const handleLeave = () => {
-          handlers.onMarkLeave!();
-        };
-        el.addEventListener('mouseleave', handleLeave);
-        cleanups.push(() => el.removeEventListener('mouseleave', handleLeave));
-      }
-    }
-  }
-
-  if (handlers.onAnnotationClick) {
-    const annotationElements = svg.querySelectorAll('.oc-annotation');
-
-    for (let i = 0; i < annotationElements.length; i++) {
-      const el = annotationElements[i];
-      const specAnnotation = specAnnotations[i];
-      if (!specAnnotation) continue;
-
-      const handleClick = (e: Event) => {
-        const mouseEvent = e as MouseEvent;
-        handlers.onAnnotationClick!(specAnnotation, mouseEvent);
-      };
-
-      el.addEventListener('click', handleClick);
-      cleanups.push(() => el.removeEventListener('click', handleClick));
-    }
-  }
-
-  return () => {
-    for (const cleanup of cleanups) {
-      cleanup();
-    }
-  };
-}

package/src/interactions/crosshair.ts

@@ -1,233 +0,0 @@
-import type { ChartLayout, TooltipContent } from '@opendata-ai/openchart-core';
-import { getRepresentativeColor } from '@opendata-ai/openchart-core';
-import type { TooltipManager } from '../tooltip';
-
-interface SeriesPoint {
-  x: number;
-  y: number;
-  datum: Record<string, unknown>;
-  tooltip?: TooltipContent;
-}
-
-interface SeriesGroup {
-  seriesKey: string;
-  color: string;
-  pointsByX: Map<number, SeriesPoint>;
-}
-
-function snapKey(x: number): number {
-  return Math.round(x);
-}
-
-function collectSeriesGroups(layout: ChartLayout): SeriesGroup[] {
-  // Dedupe by seriesKey: area charts emit BOTH an AreaMark and a derived
-  // LineMark per series. Without dedupe, single-series area charts show
-  // "line-0" / "area-1" in the tooltip instead of the actual data fields.
-  // Prefer the line mark (same logic as endpoint-labels).
-  const byKey = new Map<string, SeriesGroup>();
-  const markTypeByKey = new Map<string, 'line' | 'area'>();
-  for (let i = 0; i < layout.marks.length; i++) {
-    const mark = layout.marks[i];
-    if ((mark.type === 'line' || mark.type === 'area') && mark.dataPoints?.length) {
-      const key = mark.seriesKey ?? '__default__';
-      const existingType = markTypeByKey.get(key);
-      if (existingType === 'line' && mark.type === 'area') continue;
-      const color = mark.type === 'line' ? mark.stroke : getRepresentativeColor(mark.fill);
-      const pointsByX = new Map<number, SeriesPoint>();
-      for (const dp of mark.dataPoints) {
-        pointsByX.set(snapKey(dp.x), { ...dp });
-      }
-      byKey.set(key, { seriesKey: key, color, pointsByX });
-      markTypeByKey.set(key, mark.type);
-    }
-  }
-  return Array.from(byKey.values());
-}
-
-function collectSnapXs(groups: SeriesGroup[]): number[] {
-  const seen = new Set<number>();
-  for (const g of groups) {
-    for (const k of g.pointsByX.keys()) seen.add(k);
-  }
-  return Array.from(seen).sort((a, b) => a - b);
-}
-
-function findNearestX(sortedXs: number[], x: number): number | null {
-  if (sortedXs.length === 0) return null;
-  let lo = 0;
-  let hi = sortedXs.length - 1;
-  while (lo < hi) {
-    const mid = (lo + hi) >> 1;
-    if (sortedXs[mid] < x) lo = mid + 1;
-    else hi = mid;
-  }
-  const candidate = sortedXs[lo];
-  if (lo > 0) {
-    const prev = sortedXs[lo - 1];
-    if (Math.abs(prev - x) < Math.abs(candidate - x)) return prev;
-  }
-  return candidate;
-}
-
-function buildSliceTooltip(
-  hits: Array<{ group: SeriesGroup; point: SeriesPoint }>,
-): TooltipContent | null {
-  if (hits.length === 0) return null;
-
-  const title = hits[0].point.tooltip?.title;
-  const fields: Array<{ label: string; value: string; color?: string }> = [];
-
-  const isMulti = hits.length > 1;
-  for (const { group, point } of hits) {
-    const tip = point.tooltip;
-    if (!tip) continue;
-    if (isMulti) {
-      const yField =
-        tip.fields.find((f) => !f.color && f.label !== title) ??
-        tip.fields[tip.fields.length - 1] ??
-        null;
-      if (!yField) continue;
-      fields.push({
-        label: group.seriesKey,
-        value: yField.value,
-        color: group.color,
-      });
-    } else {
-      for (const f of tip.fields) {
-        fields.push({ ...f, color: f.color ?? group.color });
-      }
-    }
-  }
-
-  if (fields.length === 0) return null;
-  return { title, fields };
-}
-
-/**
- * Wire snap-to-x multi-series tooltip events for line/area charts.
- * On mousemove over the chart area we find the nearest x in the union of all
- * series, render one snap dot per series at that x, and show one merged
- * tooltip listing every series' value.
- */
-export function wireVoronoiTooltipEvents(
-  svg: SVGElement,
-  layout: ChartLayout,
-  tooltipManager: TooltipManager,
-): () => void {
-  const overlay = svg.querySelector('[data-voronoi-overlay]');
-  if (!overlay) return () => {};
-
-  const groups = collectSeriesGroups(layout);
-  if (groups.length === 0) return () => {};
-
-  const snapXs = collectSnapXs(groups);
-  if (snapXs.length === 0) return () => {};
-
-  const crosshair = svg.querySelector('[data-crosshair]') as SVGLineElement | null;
-  const dotsLayer = svg.querySelector('[data-snap-dots]') as SVGGElement | null;
-
-  const dots: SVGCircleElement[] = [];
-  if (dotsLayer) {
-    while (dotsLayer.firstChild) dotsLayer.removeChild(dotsLayer.firstChild);
-    for (const group of groups) {
-      const circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
-      circle.setAttribute('r', '4');
-      circle.setAttribute('fill', layout.theme.colors.background);
-      circle.setAttribute('stroke', group.color);
-      circle.setAttribute('stroke-width', '2');
-      circle.setAttribute('pointer-events', 'none');
-      circle.style.display = 'none';
-      dotsLayer.appendChild(circle);
-      dots.push(circle);
-    }
-  }
-
-  const positionAt = (svgX: number, _svgY: number, viewBoxToContainer: number): boolean => {
-    const snappedX = findNearestX(snapXs, svgX);
-    if (snappedX === null) return false;
-
-    const hits: Array<{ group: SeriesGroup; point: SeriesPoint }> = [];
-    let anchorY = 0;
-    let anchorCount = 0;
-    for (let i = 0; i < groups.length; i++) {
-      const group = groups[i];
-      const point = group.pointsByX.get(snappedX);
-      const dot = dots[i];
-      if (point) {
-        hits.push({ group, point });
-        anchorY += point.y;
-        anchorCount += 1;
-        if (dot) {
-          dot.setAttribute('cx', String(point.x));
-          dot.setAttribute('cy', String(point.y));
-          dot.style.display = '';
-        }
-      } else if (dot) {
-        dot.style.display = 'none';
-      }
-    }
-
-    if (crosshair) {
-      crosshair.setAttribute('x1', String(snappedX));
-      crosshair.setAttribute('x2', String(snappedX));
-      crosshair.style.display = '';
-    }
-
-    const tooltip = buildSliceTooltip(hits);
-    if (!tooltip) return false;
-
-    const containerAnchorX = snappedX * viewBoxToContainer;
-    const containerAnchorY = anchorCount > 0 ? (anchorY / anchorCount) * viewBoxToContainer : 0;
-    tooltipManager.show(tooltip, containerAnchorX, containerAnchorY, {
-      placement: 'right',
-    });
-    return true;
-  };
-
-  const toSvgCoords = (clientX: number, clientY: number) => {
-    const svgEl = svg as unknown as SVGSVGElement;
-    const svgRect = svgEl.getBoundingClientRect();
-    const viewBox = svgEl.viewBox?.baseVal;
-    const scaleX = viewBox?.width && svgRect.width ? viewBox.width / svgRect.width : 1;
-    const scaleY = viewBox?.height && svgRect.height ? viewBox.height / svgRect.height : 1;
-    const svgX = (clientX - svgRect.left) * scaleX;
-    const svgY = (clientY - svgRect.top) * scaleY;
-    const viewBoxToContainer = scaleX > 0 ? 1 / scaleX : 1;
-    return { svgX, svgY, viewBoxToContainer };
-  };
-
-  const handleMouseMove = (e: Event) => {
-    const me = e as MouseEvent;
-    const { svgX, svgY, viewBoxToContainer } = toSvgCoords(me.clientX, me.clientY);
-    positionAt(svgX, svgY, viewBoxToContainer);
-  };
-
-  const hideAll = () => {
-    if (crosshair) crosshair.style.display = 'none';
-    for (const dot of dots) dot.style.display = 'none';
-    tooltipManager.hide();
-  };
-
-  const handleTouch = (e: Event) => {
-    const te = e as TouchEvent;
-    if (te.touches.length === 0) return;
-    const t = te.touches[0];
-    const { svgX, svgY, viewBoxToContainer } = toSvgCoords(t.clientX, t.clientY);
-    if (te.cancelable) te.preventDefault();
-    positionAt(svgX, svgY, viewBoxToContainer);
-  };
-
-  overlay.addEventListener('mousemove', handleMouseMove);
-  overlay.addEventListener('mouseleave', hideAll);
-  overlay.addEventListener('touchstart', handleTouch, { passive: false });
-  overlay.addEventListener('touchmove', handleTouch, { passive: false });
-  overlay.addEventListener('touchend', hideAll);
-
-  return () => {
-    overlay.removeEventListener('mousemove', handleMouseMove);
-    overlay.removeEventListener('mouseleave', hideAll);
-    overlay.removeEventListener('touchstart', handleTouch);
-    overlay.removeEventListener('touchmove', handleTouch);
-    overlay.removeEventListener('touchend', hideAll);
-  };
-}

package/src/interactions/drag-handler.ts

@@ -1,175 +0,0 @@
-/**
- * Reusable drag handler for SVG elements.
- * Handles mouse and touch events, viewBox scaling, threshold detection,
- * click suppression after drag, and cursor state.
- */
-
-export interface DragConfig {
-  element: SVGElement;
-  svg: SVGSVGElement;
-  onMove: (dx: number, dy: number) => void;
-  onEnd: (dx: number, dy: number, moved: boolean) => void;
-  setDragging: (dragging: boolean) => void;
-  threshold?: number;
-}
-
-export function createDragHandler(config: DragConfig): () => void {
-  const { element, svg, onMove, onEnd, setDragging, threshold = 3 } = config;
-  const cleanups: Array<() => void> = [];
-
-  let activeDocMouseMove: ((e: MouseEvent) => void) | null = null;
-  let activeDocMouseUp: ((e: MouseEvent) => void) | null = null;
-  let activeDocTouchMove: ((e: TouchEvent) => void) | null = null;
-  let activeDocTouchEnd: ((e: TouchEvent) => void) | null = null;
-  let activeDocTouchCancel: ((e: TouchEvent) => void) | null = null;
-
-  function getScale(): { scaleX: number; scaleY: number } {
-    const viewBox = svg.viewBox?.baseVal;
-    const svgRect = svg.getBoundingClientRect();
-    return {
-      scaleX: viewBox?.width && svgRect.width ? viewBox.width / svgRect.width : 1,
-      scaleY: viewBox?.height && svgRect.height ? viewBox.height / svgRect.height : 1,
-    };
-  }
-
-  function startDrag(startX: number, startY: number): void {
-    setDragging(true);
-    const { scaleX, scaleY } = getScale();
-
-    element.style.cursor = 'grabbing';
-    svg.style.userSelect = 'none';
-
-    const handleMove = (clientX: number, clientY: number) => {
-      const dx = (clientX - startX) * scaleX;
-      const dy = (clientY - startY) * scaleY;
-      onMove(dx, dy);
-    };
-
-    const cleanupDocListeners = () => {
-      if (activeDocMouseMove) {
-        document.removeEventListener('mousemove', activeDocMouseMove);
-        activeDocMouseMove = null;
-      }
-      if (activeDocMouseUp) {
-        document.removeEventListener('mouseup', activeDocMouseUp);
-        activeDocMouseUp = null;
-      }
-      if (activeDocTouchMove) {
-        document.removeEventListener('touchmove', activeDocTouchMove);
-        activeDocTouchMove = null;
-      }
-      if (activeDocTouchEnd) {
-        document.removeEventListener('touchend', activeDocTouchEnd);
-        activeDocTouchEnd = null;
-      }
-      if (activeDocTouchCancel) {
-        document.removeEventListener('touchcancel', activeDocTouchCancel);
-        activeDocTouchCancel = null;
-      }
-    };
-
-    const handleEnd = (clientX: number, clientY: number) => {
-      const dx = (clientX - startX) * scaleX;
-      const dy = (clientY - startY) * scaleY;
-      const moved = Math.abs(dx) > threshold || Math.abs(dy) > threshold;
-
-      onEnd(dx, dy, moved);
-
-      if (moved) {
-        element.addEventListener(
-          'click',
-          (clickE) => {
-            clickE.stopPropagation();
-          },
-          { capture: true, once: true },
-        );
-      }
-
-      element.style.cursor = 'grab';
-      svg.style.userSelect = '';
-
-      cleanupDocListeners();
-      setDragging(false);
-    };
-
-    const onMouseMove = (moveEvent: MouseEvent) => {
-      handleMove(moveEvent.clientX, moveEvent.clientY);
-    };
-    const onMouseUp = (upEvent: MouseEvent) => {
-      handleEnd(upEvent.clientX, upEvent.clientY);
-    };
-    document.addEventListener('mousemove', onMouseMove);
-    document.addEventListener('mouseup', onMouseUp);
-    activeDocMouseMove = onMouseMove;
-    activeDocMouseUp = onMouseUp;
-
-    const onTouchMove = (moveEvent: TouchEvent) => {
-      if (moveEvent.touches.length > 0) {
-        moveEvent.preventDefault();
-        handleMove(moveEvent.touches[0].clientX, moveEvent.touches[0].clientY);
-      }
-    };
-    const onTouchEnd = (endEvent: TouchEvent) => {
-      const touch = endEvent.changedTouches[0];
-      if (touch) {
-        handleEnd(touch.clientX, touch.clientY);
-      } else {
-        handleEnd(startX, startY);
-      }
-    };
-    document.addEventListener('touchmove', onTouchMove, { passive: false });
-    document.addEventListener('touchend', onTouchEnd);
-    document.addEventListener('touchcancel', onTouchEnd);
-    activeDocTouchMove = onTouchMove;
-    activeDocTouchEnd = onTouchEnd;
-    activeDocTouchCancel = onTouchEnd;
-  }
-
-  const handleMouseDown = (e: Event) => {
-    const mouseEvent = e as MouseEvent;
-    mouseEvent.preventDefault();
-    startDrag(mouseEvent.clientX, mouseEvent.clientY);
-  };
-
-  const handleTouchStart = (e: Event) => {
-    const touchEvent = e as TouchEvent;
-    if (touchEvent.touches.length === 1) {
-      touchEvent.preventDefault();
-      startDrag(touchEvent.touches[0].clientX, touchEvent.touches[0].clientY);
-    }
-  };
-
-  element.addEventListener('mousedown', handleMouseDown);
-  element.addEventListener('touchstart', handleTouchStart, { passive: false });
-  cleanups.push(() => {
-    element.removeEventListener('mousedown', handleMouseDown);
-    element.removeEventListener('touchstart', handleTouchStart);
-  });
-
-  return () => {
-    for (const cleanup of cleanups) {
-      cleanup();
-    }
-    if (activeDocMouseMove) {
-      document.removeEventListener('mousemove', activeDocMouseMove);
-      activeDocMouseMove = null;
-    }
-    if (activeDocMouseUp) {
-      document.removeEventListener('mouseup', activeDocMouseUp);
-      activeDocMouseUp = null;
-    }
-    if (activeDocTouchMove) {
-      document.removeEventListener('touchmove', activeDocTouchMove);
-      activeDocTouchMove = null;
-    }
-    if (activeDocTouchEnd) {
-      document.removeEventListener('touchend', activeDocTouchEnd);
-      activeDocTouchEnd = null;
-    }
-    if (activeDocTouchCancel) {
-      document.removeEventListener('touchcancel', activeDocTouchCancel);
-      activeDocTouchCancel = null;
-    }
-    svg.style.userSelect = '';
-  };
-}