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

package/src/table-renderer.ts

@@ -1,414 +0,0 @@
-/**
- * Table renderer: produces semantic HTML from a TableLayout.
- *
- * renderTable() creates the full DOM structure: chrome, search bar,
- * scrollable table with sticky column support, pagination, and footer.
- * The returned element replaces or appends to the given container.
- */
-
-import type { ResolvedColumn, TableLayout, TableRow } from '@opendata-ai/openchart-core';
-import { BRAND_FONT_SIZE } from '@opendata-ai/openchart-core';
-import { clampStaggerDelay } from '@opendata-ai/openchart-engine';
-import { stampAnimationVars } from './animation-vars';
-import { applySrOnlyStyles } from './dom-helpers';
-import { renderCell } from './renderers/table-cells';
-
-/** Options for renderTable(). */
-export interface TableRenderOptions {
-  /** Whether to apply entrance animation on this render. */
-  animate?: boolean;
-}
-
-// ---------------------------------------------------------------------------
-// Constants
-// ---------------------------------------------------------------------------
-
-const BRAND_URL = 'https://tryopendata.ai';
-
-// ---------------------------------------------------------------------------
-// Chrome rendering
-// ---------------------------------------------------------------------------
-
-/** Create chrome (title/subtitle or source/footer) block. */
-function renderChromeBlock(
-  layout: TableLayout,
-  position: 'header' | 'footer',
-): HTMLDivElement | null {
-  const chrome = layout.chrome;
-
-  if (position === 'header') {
-    if (!chrome.title && !chrome.subtitle) return null;
-
-    const div = document.createElement('div');
-    div.className = 'oc-chrome';
-
-    if (chrome.title) {
-      const h = document.createElement('div');
-      h.className = 'oc-table-title';
-      h.textContent = chrome.title.text;
-      div.appendChild(h);
-    }
-    if (chrome.subtitle) {
-      const sub = document.createElement('div');
-      sub.className = 'oc-table-subtitle';
-      sub.textContent = chrome.subtitle.text;
-      div.appendChild(sub);
-    }
-
-    return div;
-  }
-
-  // Footer position
-  if (!chrome.source && !chrome.footer) return null;
-
-  const div = document.createElement('div');
-  div.className = 'oc-chrome oc-chrome-footer';
-
-  if (chrome.source) {
-    const src = document.createElement('div');
-    src.className = 'oc-table-source';
-    src.textContent = chrome.source.text;
-    div.appendChild(src);
-  }
-  if (chrome.footer) {
-    const foot = document.createElement('div');
-    foot.className = 'oc-table-footer-text';
-    foot.textContent = chrome.footer.text;
-    div.appendChild(foot);
-  }
-
-  return div;
-}
-
-// ---------------------------------------------------------------------------
-// Table head
-// ---------------------------------------------------------------------------
-
-function renderThead(
-  columns: ResolvedColumn[],
-  sort: TableLayout['sort'],
-): HTMLTableSectionElement {
-  const thead = document.createElement('thead');
-  const tr = document.createElement('tr');
-  tr.setAttribute('role', 'row');
-
-  for (const col of columns) {
-    const th = document.createElement('th');
-    th.setAttribute('scope', 'col');
-    th.setAttribute('role', 'columnheader');
-    th.style.textAlign = col.align;
-    th.style.width = `${col.width}px`;
-
-    // Sort state: use 'ascending'/'descending' per WAI-ARIA spec
-    let ariaSortValue: string = 'none';
-    if (sort && sort.column === col.key) {
-      ariaSortValue = sort.direction === 'asc' ? 'ascending' : 'descending';
-    }
-    th.setAttribute('aria-sort', ariaSortValue);
-    th.setAttribute('data-column', col.key);
-
-    // Label
-    const labelSpan = document.createTextNode(col.label);
-    th.appendChild(labelSpan);
-
-    // Sort button
-    if (col.sortable) {
-      const btn = document.createElement('button');
-      btn.className = 'oc-table-sort-btn';
-      btn.setAttribute('aria-label', `Sort by ${col.label}`);
-      btn.setAttribute('data-sort-column', col.key);
-      btn.type = 'button';
-      th.appendChild(btn);
-    }
-
-    tr.appendChild(th);
-  }
-
-  thead.appendChild(tr);
-  return thead;
-}
-
-// ---------------------------------------------------------------------------
-// Table body
-// ---------------------------------------------------------------------------
-
-function renderTbody(rows: TableRow[], columns: ResolvedColumn[]): HTMLTableSectionElement {
-  const tbody = document.createElement('tbody');
-
-  for (let r = 0; r < rows.length; r++) {
-    const row = rows[r];
-    const tr = document.createElement('tr');
-    tr.setAttribute('role', 'row');
-    tr.setAttribute('data-row-id', row.id);
-    tr.style.setProperty('--oc-row-index', String(r));
-
-    for (let c = 0; c < columns.length; c++) {
-      const cell = row.cells[c];
-      if (!cell) continue;
-
-      const td = renderCell(cell);
-      td.setAttribute('role', 'gridcell');
-      td.style.textAlign = columns[c].align;
-      tr.appendChild(td);
-    }
-
-    tbody.appendChild(tr);
-  }
-
-  return tbody;
-}
-
-// ---------------------------------------------------------------------------
-// Search bar
-// ---------------------------------------------------------------------------
-
-function renderSearchBar(layout: TableLayout): HTMLDivElement | null {
-  if (!layout.search.enabled) return null;
-
-  const div = document.createElement('div');
-  div.className = 'oc-table-search';
-
-  const input = document.createElement('input');
-  input.type = 'search';
-  input.placeholder = layout.search.placeholder;
-  input.setAttribute('aria-label', 'Search table');
-  input.value = layout.search.query;
-
-  div.appendChild(input);
-  return div;
-}
-
-// ---------------------------------------------------------------------------
-// Pagination
-// ---------------------------------------------------------------------------
-
-function renderPagination(layout: TableLayout): HTMLDivElement | null {
-  if (!layout.pagination) return null;
-
-  const { page, pageSize, totalRows, totalPages } = layout.pagination;
-
-  const div = document.createElement('div');
-  div.className = 'oc-table-pagination';
-
-  const info = document.createElement('span');
-  info.className = 'oc-table-pagination-info';
-
-  if (totalRows === 0) {
-    info.textContent = 'No results';
-  } else {
-    const start = page * pageSize + 1;
-    const end = Math.min((page + 1) * pageSize, totalRows);
-    info.textContent = `Showing ${start}-${end} of ${totalRows}`;
-  }
-
-  div.appendChild(info);
-
-  const btnGroup = document.createElement('span');
-  btnGroup.className = 'oc-table-pagination-btns';
-
-  const prevBtn = document.createElement('button');
-  prevBtn.setAttribute('aria-label', 'Previous page');
-  prevBtn.setAttribute('data-page-action', 'prev');
-  prevBtn.textContent = 'Prev';
-  prevBtn.disabled = page <= 0;
-  btnGroup.appendChild(prevBtn);
-
-  const nextBtn = document.createElement('button');
-  nextBtn.setAttribute('aria-label', 'Next page');
-  nextBtn.setAttribute('data-page-action', 'next');
-  nextBtn.textContent = 'Next';
-  nextBtn.disabled = page >= totalPages - 1;
-  btnGroup.appendChild(nextBtn);
-
-  div.appendChild(btnGroup);
-  return div;
-}
-
-// ---------------------------------------------------------------------------
-// Empty state
-// ---------------------------------------------------------------------------
-
-function renderEmptyState(message: string): HTMLDivElement {
-  const div = document.createElement('div');
-  div.className = 'oc-table-empty';
-  div.setAttribute('aria-live', 'polite');
-  div.textContent = message;
-  return div;
-}
-
-// ---------------------------------------------------------------------------
-// Main render
-// ---------------------------------------------------------------------------
-
-/**
- * Render a TableLayout into a full DOM structure.
- *
- * @param layout - The compiled table layout.
- * @param container - The container element to render into.
- * @returns The wrapper element that was created.
- */
-export function renderTable(
-  layout: TableLayout,
-  container: HTMLElement,
-  opts?: TableRenderOptions,
-): HTMLElement {
-  const wrapper = document.createElement('div');
-  wrapper.className = 'oc-table-wrapper';
-
-  // Apply theme colors as CSS custom properties so table CSS picks them up.
-  // Without this, dark-background themes show invisible text since the
-  // CSS defaults (--oc-text etc.) are light-mode values.
-  const { theme, chrome } = layout;
-  if (theme) {
-    const s = wrapper.style;
-    s.setProperty('--oc-bg', theme.colors.background);
-    s.setProperty('--oc-text', theme.colors.text);
-    s.setProperty('--oc-text-secondary', theme.colors.axis ?? theme.colors.text);
-    s.setProperty('--oc-text-muted', theme.colors.axis ?? theme.colors.text);
-    s.setProperty('--oc-gridline', theme.colors.gridline);
-    s.setProperty('--oc-border', theme.colors.gridline);
-    s.setProperty('--oc-font-family', theme.fonts.family);
-    s.fontFamily = theme.fonts.family;
-  }
-
-  // Set computed chrome CSS custom properties so chrome elements pick up
-  // theme-resolved values via CSS fallbacks (e.g. --oc-title-computed-size).
-  {
-    const s = wrapper.style;
-    if (chrome.title) {
-      s.setProperty('--oc-title-computed-size', `${chrome.title.style.fontSize}px`);
-      s.setProperty('--oc-title-computed-weight', String(chrome.title.style.fontWeight));
-      s.setProperty('--oc-title-computed-color', chrome.title.style.fill);
-    }
-    if (chrome.subtitle) {
-      s.setProperty('--oc-subtitle-computed-size', `${chrome.subtitle.style.fontSize}px`);
-      s.setProperty('--oc-subtitle-computed-weight', String(chrome.subtitle.style.fontWeight));
-      s.setProperty('--oc-subtitle-computed-color', chrome.subtitle.style.fill);
-    }
-    if (chrome.source) {
-      s.setProperty('--oc-source-computed-size', `${chrome.source.style.fontSize}px`);
-      s.setProperty('--oc-source-computed-color', chrome.source.style.fill);
-    }
-    if (chrome.footer) {
-      s.setProperty('--oc-footer-computed-size', `${chrome.footer.style.fontSize}px`);
-      s.setProperty('--oc-footer-computed-color', chrome.footer.style.fill);
-    }
-  }
-
-  // Apply class modifiers
-  if (layout.compact) {
-    wrapper.classList.add('oc-table--compact');
-  }
-
-  // Header chrome
-  const headerChrome = renderChromeBlock(layout, 'header');
-  if (headerChrome) {
-    wrapper.appendChild(headerChrome);
-  }
-
-  // Search bar
-  const searchBar = renderSearchBar(layout);
-  if (searchBar) {
-    wrapper.appendChild(searchBar);
-  }
-
-  // Handle empty data
-  if (layout.rows.length === 0) {
-    const message = layout.search.query ? 'No results found' : 'No data';
-    wrapper.appendChild(renderEmptyState(message));
-  } else {
-    // Scroll container
-    const scroll = document.createElement('div');
-    scroll.className = 'oc-table-scroll';
-
-    // Table
-    const table = document.createElement('table');
-    table.setAttribute('role', 'grid');
-    table.setAttribute('aria-label', layout.a11y.caption);
-
-    if (layout.stickyFirstColumn) {
-      table.classList.add('oc-table--sticky');
-    }
-
-    // Caption (screen reader only – inline styles ensure hiding even without
-    // the external stylesheet, e.g. CDN / esm.sh usage)
-    const caption = document.createElement('caption');
-    caption.className = 'oc-sr-only';
-    applySrOnlyStyles(caption);
-    caption.textContent = layout.a11y.summary;
-    table.appendChild(caption);
-
-    // Thead
-    table.appendChild(renderThead(layout.columns, layout.sort));
-
-    // Tbody
-    table.appendChild(renderTbody(layout.rows, layout.columns));
-
-    scroll.appendChild(table);
-    wrapper.appendChild(scroll);
-  }
-
-  // Pagination
-  const pagination = renderPagination(layout);
-  if (pagination) {
-    wrapper.appendChild(pagination);
-  }
-
-  // Footer row: source/footer chrome on the left, brand watermark on the
-  // right, laid out on a single line via flex. Built up here and appended
-  // after the live region so source text and watermark share a baseline.
-  const footerRow = document.createElement('div');
-  footerRow.className = 'oc-table-footer-row';
-
-  const footerChrome = renderChromeBlock(layout, 'footer');
-  if (footerChrome) {
-    footerRow.appendChild(footerChrome);
-  }
-
-  // Live region for screen reader announcements (sort changes, search results)
-  const liveRegion = document.createElement('div');
-  liveRegion.className = 'oc-table-live-region oc-sr-only';
-  applySrOnlyStyles(liveRegion);
-  liveRegion.setAttribute('aria-live', 'polite');
-  liveRegion.setAttribute('aria-atomic', 'true');
-  liveRegion.setAttribute('role', 'status');
-  wrapper.appendChild(liveRegion);
-
-  // Brand watermark — joins the footer row, pushed to the right by the
-  // flex container so it sits on the same line as the source text.
-  if (layout.watermark) {
-    const brandColor = theme ? theme.colors.axis : '#999999';
-    const brand = document.createElement('div');
-    brand.className = 'oc-table-ref';
-    const brandLink = document.createElement('a');
-    brandLink.href = BRAND_URL;
-    brandLink.target = '_blank';
-    brandLink.rel = 'noopener';
-    brandLink.style.cssText = `font-size: ${BRAND_FONT_SIZE}px; font-weight: 600; color: ${brandColor}; opacity: 0.55; text-decoration: none; font-family: ${theme ? theme.fonts.family : 'sans-serif'};`;
-    brandLink.textContent = 'tryOpenData.ai';
-    brand.appendChild(brandLink);
-    footerRow.appendChild(brand);
-  }
-
-  // Append the footer row only when it has content (source/footer/watermark).
-  if (footerRow.childElementCount > 0) {
-    wrapper.appendChild(footerRow);
-  }
-
-  // Animation: stamp CSS custom properties and add oc-animate class BEFORE
-  // DOM insertion to avoid a flash of final state.
-  if (opts?.animate && layout.animation?.enter) {
-    const enterPhase = layout.animation.enter;
-    const rowCount = layout.rows.length;
-    const stagger = clampStaggerDelay(enterPhase.staggerDelay, rowCount);
-    stampAnimationVars(wrapper, {
-      duration: enterPhase.duration,
-      stagger,
-      ease: enterPhase.ease,
-    });
-    wrapper.classList.add('oc-animate');
-  }
-
-  container.appendChild(wrapper);
-  return wrapper;
-}

package/src/text-edit-overlay.ts

@@ -1,255 +0,0 @@
-/**
- * Text edit overlay: creates a positioned textarea over an SVG text element
- * for inline editing. Handles commit (Enter), cancel (Escape), and
- * click-outside-to-commit behavior.
- */
-
-export interface TextEditOverlayConfig {
-  /** The container div that holds the SVG. */
-  container: HTMLElement;
-  /** The root SVG element. */
-  svg: SVGSVGElement;
-  /** The SVG text element being edited. */
-  targetElement: SVGElement;
-  /** Current text content to populate the textarea. */
-  currentText: string;
-  /** Called when the user commits the edit (Enter or click outside). */
-  onCommit: (newText: string) => void;
-  /** Called when the user cancels the edit (Escape). */
-  onCancel: () => void;
-}
-
-/**
- * Get the viewBox-to-pixel scale factors for an SVG element.
- * Same approach used by the drag handlers in mount.ts.
- */
-function getScale(svg: SVGSVGElement): { scaleX: number; scaleY: number } {
-  const viewBox = svg.viewBox?.baseVal;
-  const svgRect = svg.getBoundingClientRect();
-  return {
-    scaleX: viewBox?.width && svgRect.width ? svgRect.width / viewBox.width : 1,
-    scaleY: viewBox?.height && svgRect.height ? svgRect.height / viewBox.height : 1,
-  };
-}
-
-/**
- * Read computed font styles from an SVG text element and map them to CSS.
- */
-function getTextStyles(
-  targetElement: SVGElement,
-  scale: { scaleX: number; scaleY: number },
-): {
-  fontFamily: string;
-  fontSize: string;
-  fontWeight: string;
-  color: string;
-  textAlign: string;
-  lineHeight: string;
-} {
-  const computed = window.getComputedStyle(targetElement);
-
-  // Font size needs to be scaled from SVG viewBox units to pixel units
-  const svgFontSize = parseFloat(
-    targetElement.getAttribute('font-size') ?? computed.fontSize ?? '14',
-  );
-  const pixelFontSize = svgFontSize * scale.scaleY;
-
-  const fontFamily = targetElement.getAttribute('font-family') ?? computed.fontFamily ?? 'inherit';
-  const fontWeight = targetElement.getAttribute('font-weight') ?? computed.fontWeight ?? '400';
-
-  // Get fill color from inline style or attribute
-  const fill =
-    (targetElement as SVGElement & ElementCSSInlineStyle).style.getPropertyValue('fill') ||
-    targetElement.getAttribute('fill') ||
-    computed.color ||
-    '#000';
-
-  // Map SVG text-anchor to CSS text-align
-  const textAnchor = targetElement.getAttribute('text-anchor') ?? 'start';
-  let textAlign = 'left';
-  if (textAnchor === 'middle') textAlign = 'center';
-  else if (textAnchor === 'end') textAlign = 'right';
-
-  return {
-    fontFamily,
-    fontSize: `${pixelFontSize}px`,
-    fontWeight,
-    color: fill,
-    textAlign,
-    lineHeight: '1.3',
-  };
-}
-
-/**
- * Compute the pixel position and size for the textarea based on the
- * target SVG element's bounding box.
- */
-function computePosition(
-  targetElement: SVGElement,
-  svg: SVGSVGElement,
-  container: HTMLElement,
-): { top: number; left: number; width: number; height: number } {
-  const bbox = (targetElement as SVGGraphicsElement).getBBox();
-  const scale = getScale(svg);
-  const svgRect = svg.getBoundingClientRect();
-  const containerRect = container.getBoundingClientRect();
-
-  // SVG viewBox coords -> pixel coords relative to the container
-  const padding = 4;
-  const left = bbox.x * scale.scaleX + (svgRect.left - containerRect.left) - padding;
-  const top = bbox.y * scale.scaleY + (svgRect.top - containerRect.top) - padding;
-  const width = bbox.width * scale.scaleX + padding * 2;
-  const height = bbox.height * scale.scaleY + padding * 2;
-
-  return {
-    top: Math.max(0, top),
-    left: Math.max(0, left),
-    width: Math.max(width, 60),
-    height: Math.max(height, 24),
-  };
-}
-
-/**
- * Create an inline text editing overlay positioned over an SVG text element.
- * Returns an object with a `destroy()` method to clean up.
- */
-export function createTextEditOverlay(config: TextEditOverlayConfig): { destroy: () => void } {
-  const { container, svg, targetElement, currentText, onCommit, onCancel } = config;
-
-  let destroyed = false;
-
-  // Hide the underlying SVG text element (not display:none to preserve layout)
-  const originalOpacity = targetElement.getAttribute('opacity');
-  targetElement.setAttribute('opacity', '0');
-
-  // Compute position and styles
-  const scale = getScale(svg);
-  const styles = getTextStyles(targetElement, scale);
-  const position = computePosition(targetElement, svg, container);
-
-  // Create the textarea
-  const textarea = document.createElement('textarea');
-  textarea.value = currentText;
-
-  // Ensure container is positioned so absolute children work
-  const containerPosition = window.getComputedStyle(container).position;
-  const containerWasStatic = containerPosition === 'static';
-  if (containerWasStatic) {
-    container.style.position = 'relative';
-  }
-
-  // Style the textarea to match the SVG text
-  Object.assign(textarea.style, {
-    position: 'absolute',
-    top: `${position.top}px`,
-    left: `${position.left}px`,
-    width: `${position.width}px`,
-    minHeight: `${position.height}px`,
-    fontFamily: styles.fontFamily,
-    fontSize: styles.fontSize,
-    fontWeight: styles.fontWeight,
-    color: styles.color,
-    textAlign: styles.textAlign,
-    lineHeight: styles.lineHeight,
-    padding: '2px 4px',
-    margin: '0',
-    border: '1px solid rgba(79, 70, 229, 0.4)', // intentionally 0.4, not --oc-editable-hover (0.35)
-    borderRadius: '3px',
-    background: 'rgba(255, 255, 255, 0.95)',
-    outline: 'none',
-    resize: 'none',
-    overflow: 'hidden',
-    boxSizing: 'border-box',
-    zIndex: '10000',
-    // Remove default textarea appearance
-    WebkitAppearance: 'none',
-    appearance: 'none',
-  } as Record<string, string>);
-
-  container.appendChild(textarea);
-
-  // Auto-select all text
-  textarea.focus();
-  textarea.select();
-
-  // Cleanup function
-  function destroy(): void {
-    if (destroyed) return;
-    destroyed = true;
-
-    // Restore SVG text visibility
-    if (originalOpacity !== null) {
-      targetElement.setAttribute('opacity', originalOpacity);
-    } else {
-      targetElement.removeAttribute('opacity');
-    }
-
-    // Remove event listeners
-    textarea.removeEventListener('keydown', handleKeyDown);
-    document.removeEventListener('mousedown', handleClickOutside);
-    resizeObserver.disconnect();
-
-    // Restore container position if we changed it
-    if (containerWasStatic) {
-      container.style.position = '';
-    }
-
-    // Remove the textarea
-    if (textarea.parentNode) {
-      textarea.parentNode.removeChild(textarea);
-    }
-  }
-
-  function commit(): void {
-    if (destroyed) return;
-    const newText = textarea.value;
-    destroy();
-    onCommit(newText);
-  }
-
-  function cancel(): void {
-    if (destroyed) return;
-    destroy();
-    onCancel();
-  }
-
-  // Keyboard handling
-  const handleKeyDown = (e: KeyboardEvent) => {
-    if (e.key === 'Enter' && !e.shiftKey) {
-      e.preventDefault();
-      commit();
-    } else if (e.key === 'Escape') {
-      e.preventDefault();
-      cancel();
-    }
-  };
-
-  textarea.addEventListener('keydown', handleKeyDown);
-
-  // Click outside to commit
-  const handleClickOutside = (e: MouseEvent) => {
-    if (!textarea.contains(e.target as Node)) {
-      commit();
-    }
-  };
-
-  // Delay attaching click-outside so the current click event doesn't trigger it
-  requestAnimationFrame(() => {
-    if (!destroyed) {
-      document.addEventListener('mousedown', handleClickOutside);
-    }
-  });
-
-  // Reposition on container resize
-  const resizeObserver = new ResizeObserver(() => {
-    if (destroyed) return;
-    const newPosition = computePosition(targetElement, svg, container);
-    textarea.style.top = `${newPosition.top}px`;
-    textarea.style.left = `${newPosition.left}px`;
-    textarea.style.width = `${newPosition.width}px`;
-    textarea.style.minHeight = `${newPosition.height}px`;
-  });
-  resizeObserver.observe(container);
-
-  return { destroy };
-}