@opendata-ai/openchart-vanilla 2.1.0 → 2.2.0

package/dist/index.d.ts

@@ -27,6 +27,22 @@ interface PNGExportOptions {
  * @returns A Promise resolving to the PNG Blob.
  */
 declare function exportPNG(svgElement: SVGElement, options?: PNGExportOptions): Promise<Blob>;
+interface JPGExportOptions extends PNGExportOptions {
+    /** JPEG quality from 0 to 1. Defaults to 0.92. */
+    quality?: number;
+}
+/**
+ * Render an SVG element to a JPEG Blob via a canvas.
+ *
+ * Same pipeline as exportPNG but outputs JPEG with configurable quality.
+ * The canvas is filled with white before drawing to avoid transparent
+ * backgrounds rendering as black in JPEG format.
+ *
+ * @param svgElement - The rendered SVG element.
+ * @param options - Optional DPI scaling and JPEG quality.
+ * @returns A Promise resolving to the JPEG Blob.
+ */
+declare function exportJPG(svgElement: SVGElement, options?: JPGExportOptions): Promise<Blob>;
 /**
  * Convert an array of data objects to a CSV string.
  *
@@ -74,10 +90,14 @@ interface GraphMountOptions {
     responsive?: boolean;
     onNodeClick?: (node: Record<string, unknown>) => void;
     onNodeDoubleClick?: (node: Record<string, unknown>) => void;
+    onNodeHover?: (node: Record<string, unknown> | null) => void;
+    onEdgeHover?: (edge: Record<string, unknown> | null) => void;
     onSelectionChange?: (nodeIds: string[]) => void;
 }
 interface GraphInstance {
     update(spec: GraphSpec): void;
+    /** Re-compile encoding/legend/chrome without restarting the simulation. Preserves node positions. */
+    updateVisuals(spec: GraphSpec): void;
     search(query: string): void;
     clearSearch(): void;
     zoomToFit(): void;
@@ -116,7 +136,7 @@ interface MountOptions extends ChartEventHandlers {
     /** Enable responsive resizing. Defaults to true. */
     responsive?: boolean;
 }
-interface ExportOptions extends PNGExportOptions {
+interface ExportOptions extends JPGExportOptions {
 }
 interface ChartInstance {
     /** Re-compile and re-render with a new spec. */
@@ -126,8 +146,9 @@ interface ChartInstance {
     /** Export the chart. */
     export(format: 'svg'): string;
     export(format: 'png', options?: ExportOptions): Promise<Blob>;
+    export(format: 'jpg', options?: ExportOptions): Promise<Blob>;
     export(format: 'csv'): string;
-    export(format: 'svg' | 'png' | 'csv', options?: ExportOptions): string | Promise<Blob>;
+    export(format: 'svg' | 'png' | 'jpg' | 'csv', options?: ExportOptions): string | Promise<Blob>;
     /** Remove all DOM elements and disconnect observers. */
     destroy(): void;
     /** The current compiled layout (for hooks / debugging). */
@@ -324,4 +345,4 @@ interface TooltipManager {
  */
 declare function createTooltipManager(container: HTMLElement): TooltipManager;
 
-export { type ChartInstance, type ExportOptions, type GraphInstance, type GraphMountOptions, type KeyboardNavOptions, type MountOptions, type PNGExportOptions, type TableInstance, type TableMountOptions, type TableState, type TooltipManager, attachKeyboardNav, createChart, createGraph, createSimulationWorker, createTable, createTooltipManager, exportCSV, exportPNG, exportSVG, observeResize, registerMarkRenderer, renderBarCell, renderCategoryCell, renderCell, renderChartSVG, renderFlagCell, renderHeatmapCell, renderImageCell, renderSparklineCell, renderTable, renderTextCell };
+export { type ChartInstance, type ExportOptions, type GraphInstance, type GraphMountOptions, type JPGExportOptions, type KeyboardNavOptions, type MountOptions, type PNGExportOptions, type TableInstance, type TableMountOptions, type TableState, type TooltipManager, attachKeyboardNav, createChart, createGraph, createSimulationWorker, createTable, createTooltipManager, exportCSV, exportJPG, exportPNG, exportSVG, observeResize, registerMarkRenderer, renderBarCell, renderCategoryCell, renderCell, renderChartSVG, renderFlagCell, renderHeatmapCell, renderImageCell, renderSparklineCell, renderTable, renderTextCell };

package/dist/index.js

@@ -38,6 +38,48 @@ async function exportPNG(svgElement, options) {
     img.src = url;
   });
 }
+async function exportJPG(svgElement, options) {
+  const dpi = options?.dpi ?? 2;
+  const quality = options?.quality ?? 0.92;
+  const svgString = exportSVG(svgElement);
+  const width = parseFloat(svgElement.getAttribute("width") || "600");
+  const height = parseFloat(svgElement.getAttribute("height") || "400");
+  const canvas = document.createElement("canvas");
+  canvas.width = width * dpi;
+  canvas.height = height * dpi;
+  const ctx = canvas.getContext("2d");
+  if (!ctx) {
+    throw new Error("Canvas 2D context not available");
+  }
+  ctx.fillStyle = "#ffffff";
+  ctx.fillRect(0, 0, canvas.width, canvas.height);
+  ctx.scale(dpi, dpi);
+  const img = new Image();
+  const blob = new Blob([svgString], { type: "image/svg+xml;charset=utf-8" });
+  const url = URL.createObjectURL(blob);
+  return new Promise((resolve, reject) => {
+    img.onload = () => {
+      ctx.drawImage(img, 0, 0);
+      URL.revokeObjectURL(url);
+      canvas.toBlob(
+        (result) => {
+          if (result) {
+            resolve(result);
+          } else {
+            reject(new Error("Canvas toBlob returned null"));
+          }
+        },
+        "image/jpeg",
+        quality
+      );
+    };
+    img.onerror = () => {
+      URL.revokeObjectURL(url);
+      reject(new Error("Failed to load SVG as image"));
+    };
+    img.src = url;
+  });
+}
 function exportCSV(data) {
   if (data.length === 0) return "";
   const headers = Object.keys(data[0]);
@@ -132,6 +174,7 @@ var GraphCanvasRenderer = class {
       edges,
       transform,
       hoveredNodeId,
+      hoveredEdgeId,
       selectedNodeIds,
       adjacencyMap,
       theme,
@@ -169,7 +212,8 @@ var GraphCanvasRenderer = class {
       visibleEdges,
       hasActiveNode,
       connectedNodeIds,
-      isGesturing ? null : searchMatches
+      isGesturing ? null : searchMatches,
+      hoveredEdgeId
     );
     this.drawNodesBatched(
       ctx,
@@ -218,11 +262,17 @@ var GraphCanvasRenderer = class {
   // -------------------------------------------------------------------------
   // Batched edge drawing
   // -------------------------------------------------------------------------
-  drawEdgesBatched(ctx, edges, hasActiveNode, connectedNodeIds, searchMatches) {
+  drawEdgesBatched(ctx, edges, hasActiveNode, connectedNodeIds, searchMatches, hoveredEdgeId) {
     const dimmedEdges = [];
     const defaultEdges = [];
     const connectedEdges = [];
+    let hoveredEdge = null;
     for (const edge of edges) {
+      const edgeId = `${edge.source}->${edge.target}`;
+      if (edgeId === hoveredEdgeId) {
+        hoveredEdge = edge;
+        continue;
+      }
       const isConnected = hasActiveNode && connectedNodeIds.has(edge.source) && connectedNodeIds.has(edge.target);
       const isDimmed = hasActiveNode && !isConnected;
       if (isConnected) {
@@ -236,6 +286,19 @@ var GraphCanvasRenderer = class {
     this.drawEdgeGroupBatched(ctx, dimmedEdges, EDGE_ALPHA_DIMMED, searchMatches);
     this.drawEdgeGroupBatched(ctx, defaultEdges, EDGE_ALPHA_DEFAULT, searchMatches);
     this.drawEdgeGroupBatched(ctx, connectedEdges, EDGE_ALPHA_CONNECTED, searchMatches);
+    if (hoveredEdge) {
+      const dash = DASH_PATTERNS[hoveredEdge.style] ?? DASH_PATTERNS.solid;
+      ctx.setLineDash(dash);
+      ctx.strokeStyle = hoveredEdge.stroke;
+      ctx.lineWidth = hoveredEdge.strokeWidth * 2;
+      ctx.globalAlpha = EDGE_ALPHA_CONNECTED;
+      ctx.beginPath();
+      ctx.moveTo(hoveredEdge.sourceX, hoveredEdge.sourceY);
+      ctx.lineTo(hoveredEdge.targetX, hoveredEdge.targetY);
+      ctx.stroke();
+      ctx.setLineDash([]);
+      ctx.globalAlpha = 1;
+    }
   }
   /**
    * Draw a group of edges at a given alpha, batched by (stroke, strokeWidth, style).
@@ -718,6 +781,10 @@ var GraphInteractionManager = class {
     }
     const hitId = this.hitTest(x, y);
     this.callbacks.onHoverChange(hitId);
+    if (!hitId) {
+      const graph = this.transform.screenToGraph(x, y);
+      this.callbacks.onBackgroundHover?.(graph.x, graph.y, x, y);
+    }
     this.canvas.style.cursor = hitId ? "pointer" : "default";
   }
   onMouseUp(e) {
@@ -1216,13 +1283,18 @@ var SimulationManager = class _SimulationManager {
       community: n.community
     }));
     this.syncNodeMap = new Map(this.syncNodes.map((n) => [n.id, n]));
-    this.syncSim = forceSimulation(this.syncNodes).force(
-      "link",
-      forceLink(edges.map((e) => ({ ...e }))).id((d) => d.id).distance(config.linkDistance)
-    ).force("charge", forceManyBody().strength(config.chargeStrength)).force("center", forceCenter(0, 0)).force(
+    const linkForce = forceLink(edges.map((e) => ({ ...e }))).id((d) => d.id).distance(config.linkDistance);
+    if (config.linkStrength != null) {
+      linkForce.strength(config.linkStrength);
+    }
+    const padding = config.collisionPadding ?? 2;
+    this.syncSim = forceSimulation(this.syncNodes).force("link", linkForce).force("charge", forceManyBody().strength(config.chargeStrength)).force(
       "collide",
-      forceCollide().radius((d) => d.radius + 1)
+      forceCollide().radius((d) => d.radius + padding)
     ).force("gravityX", forceX(0).strength(0.05)).force("gravityY", forceY(0).strength(0.05)).alphaDecay(config.alphaDecay).velocityDecay(config.velocityDecay).stop();
+    if (config.centerForce !== false) {
+      this.syncSim.force("center", forceCenter(0, 0));
+    }
     if (config.clustering) {
       const clusterFn = forceCluster(this.syncNodes, config.clustering.strength);
       this.syncSim.force("cluster", clusterFn);
@@ -1467,6 +1539,7 @@ function createGraph(container, spec, options) {
   let positionedEdges = [];
   let adjacencyMap = /* @__PURE__ */ new Map();
   let hoveredNodeId = null;
+  let hoveredEdgeId = null;
   let selectedNodeIds = /* @__PURE__ */ new Set();
   let animFrameId = null;
   let needsRender = false;
@@ -1527,6 +1600,38 @@ function createGraph(container, spec, options) {
     const node = compilation.nodes.find((n) => n.id === nodeId);
     return node?.data ?? {};
   }
+  function pointToSegmentDist(px, py, ax, ay, bx, by) {
+    const dx = bx - ax;
+    const dy = by - ay;
+    const lenSq = dx * dx + dy * dy;
+    if (lenSq === 0) return Math.hypot(px - ax, py - ay);
+    const t = Math.max(0, Math.min(1, ((px - ax) * dx + (py - ay) * dy) / lenSq));
+    return Math.hypot(px - (ax + t * dx), py - (ay + t * dy));
+  }
+  function hitTestEdge(graphX, graphY, threshold) {
+    let bestDist = threshold;
+    let bestEdgeId = null;
+    for (const edge of positionedEdges) {
+      const dist = pointToSegmentDist(
+        graphX,
+        graphY,
+        edge.sourceX,
+        edge.sourceY,
+        edge.targetX,
+        edge.targetY
+      );
+      if (dist < bestDist) {
+        bestDist = dist;
+        bestEdgeId = `${edge.source}->${edge.target}`;
+      }
+    }
+    return bestEdgeId;
+  }
+  function edgeDataById(edgeId) {
+    const [source, target] = edgeId.split("->");
+    const edge = compilation.edges.find((e) => e.source === source && e.target === target);
+    return edge?.data ?? null;
+  }
   function createDOM() {
     const { width, height } = getContainerDimensions();
     const isDark = resolveDarkMode(options?.darkMode);
@@ -1601,7 +1706,10 @@ function createGraph(container, spec, options) {
       clustering: config.clustering,
       alphaDecay: config.alphaDecay,
       velocityDecay: config.velocityDecay,
-      collisionRadius: config.collisionRadius
+      collisionRadius: config.collisionRadius,
+      collisionPadding: config.collisionPadding,
+      linkStrength: config.linkStrength,
+      centerForce: config.centerForce
     });
     simulation.onTick((positions, _alpha) => {
       if (destroyed) return;
@@ -1661,6 +1769,7 @@ function createGraph(container, spec, options) {
         edges: positionedEdges,
         transform: { x: transform.x, y: transform.y, k: transform.k },
         hoveredNodeId,
+        hoveredEdgeId,
         selectedNodeIds,
         adjacencyMap,
         theme: compilation.theme,
@@ -1683,7 +1792,16 @@ function createGraph(container, spec, options) {
         hoveredNodeId = nodeId;
         needsRender = true;
         scheduleRender();
+        if (nodeId) {
+          options?.onNodeHover?.(nodeDataById(nodeId));
+        } else {
+          options?.onNodeHover?.(null);
+        }
         if (nodeId && tooltipManager) {
+          if (hoveredEdgeId) {
+            hoveredEdgeId = null;
+            options?.onEdgeHover?.(null);
+          }
           const content = compilation.tooltipDescriptors.get(nodeId);
           if (content) {
             const node = positionedNodes.find((n) => n.id === nodeId);
@@ -1692,10 +1810,35 @@ function createGraph(container, spec, options) {
               tooltipManager.show(content, screen.x, screen.y);
             }
           }
-        } else {
+        } else if (!nodeId) {
           tooltipManager?.hide();
         }
       },
+      onBackgroundHover(graphX, graphY, screenX, screenY) {
+        const transform = interactionManager?.getTransform();
+        const threshold = 5 / (transform?.k ?? 1);
+        const edgeId = hitTestEdge(graphX, graphY, threshold);
+        if (edgeId !== hoveredEdgeId) {
+          hoveredEdgeId = edgeId;
+          needsRender = true;
+          scheduleRender();
+          if (edgeId) {
+            const data = edgeDataById(edgeId);
+            options?.onEdgeHover?.(data);
+            if (tooltipManager && data) {
+              const fields = Object.entries(data).filter(([key]) => key !== "source" && key !== "target").filter(([, value]) => value != null).map(([key, value]) => ({
+                label: key,
+                value: typeof value === "number" ? value.toLocaleString() : String(value)
+              }));
+              const [source, target] = edgeId.split("->");
+              tooltipManager.show({ title: `${source} \u2192 ${target}`, fields }, screenX, screenY);
+            }
+          } else {
+            options?.onEdgeHover?.(null);
+            tooltipManager?.hide();
+          }
+        }
+      },
       onSelectionChange(nodeIds) {
         selectedNodeIds = new Set(nodeIds);
         needsRender = true;
@@ -1821,9 +1964,40 @@ function createGraph(container, spec, options) {
     initSimulation();
     initInteraction();
     hoveredNodeId = null;
+    hoveredEdgeId = null;
     selectedNodeIds = /* @__PURE__ */ new Set();
     searchManager.clearSearch();
   }
+  function updateVisuals(newSpec) {
+    if (destroyed) return;
+    currentSpec = newSpec;
+    const posMap = /* @__PURE__ */ new Map();
+    for (const node of positionedNodes) {
+      posMap.set(node.id, { x: node.x, y: node.y });
+    }
+    compilation = compile();
+    adjacencyMap = buildAdjacencyMap(compilation.edges);
+    positionedNodes = compilation.nodes.map((node) => {
+      const pos = posMap.get(node.id) ?? { x: 0, y: 0 };
+      return { ...node, x: pos.x, y: pos.y };
+    });
+    positionedEdges = compilation.edges.map((edge) => {
+      const src = posMap.get(edge.source) ?? { x: 0, y: 0 };
+      const tgt = posMap.get(edge.target) ?? { x: 0, y: 0 };
+      return {
+        ...edge,
+        sourceX: src.x,
+        sourceY: src.y,
+        targetX: tgt.x,
+        targetY: tgt.y
+      };
+    });
+    spatialIndex.rebuild(positionedNodes);
+    renderChrome2();
+    renderLegend2();
+    needsRender = true;
+    scheduleRender();
+  }
   function teardownSubsystems() {
     if (animFrameId !== null) {
       cancelAnimationFrame(animFrameId);
@@ -1873,6 +2047,8 @@ function createGraph(container, spec, options) {
     return {
       update() {
       },
+      updateVisuals() {
+      },
       search() {
       },
       clearSearch() {
@@ -1897,6 +2073,7 @@ function createGraph(container, spec, options) {
   }
   return {
     update,
+    updateVisuals,
     search,
     clearSearch,
     zoomToFit,
@@ -3343,7 +3520,7 @@ function wireSeriesLabelDrag(svg, spec, onEdit, setDragging) {
     }
   };
 }
-function wireLegendInteraction(svg, _layout, onLegendToggle) {
+function wireLegendInteraction(svg, _layout, onLegendToggle, onEdit) {
   const legendEntries = svg.querySelectorAll("[data-legend-index]");
   const cleanups = [];
   const hiddenSeries = /* @__PURE__ */ new Set();
@@ -3356,11 +3533,13 @@ function wireLegendInteraction(svg, _layout, onLegendToggle) {
         entry.setAttribute("opacity", "1");
         entry.setAttribute("aria-label", `${label}: visible`);
         onLegendToggle?.(label, true);
+        onEdit?.({ type: "legend-toggle", series: label, hidden: false });
       } else {
         hiddenSeries.add(label);
         entry.setAttribute("opacity", "0.3");
         entry.setAttribute("aria-label", `${label}: hidden`);
         onLegendToggle?.(label, false);
+        onEdit?.({ type: "legend-toggle", series: label, hidden: true });
       }
       const marks = svg.querySelectorAll(".viz-mark");
       for (const mark of marks) {
@@ -3593,7 +3772,12 @@ function createChart(container, spec, options) {
       tooltipManager,
       currentLayout
     );
-    cleanupLegend = wireLegendInteraction(svgElement, currentLayout, options?.onLegendToggle);
+    cleanupLegend = wireLegendInteraction(
+      svgElement,
+      currentLayout,
+      options?.onLegendToggle,
+      options?.onEdit
+    );
     if (options?.onMarkClick || options?.onMarkHover || options?.onMarkLeave || options?.onAnnotationClick) {
       const specAnnotations = "annotations" in currentSpec && Array.isArray(currentSpec.annotations) ? currentSpec.annotations : [];
       cleanupChartEvents = wireChartEvents(svgElement, currentLayout, specAnnotations, options);
@@ -3659,6 +3843,8 @@ function createChart(container, spec, options) {
         return exportSVG(svgElement);
       case "png":
         return exportPNG(svgElement, exportOptions);
+      case "jpg":
+        return exportJPG(svgElement, exportOptions);
       case "csv":
         return exportCSV(
           "data" in currentSpec && Array.isArray(currentSpec.data) ? currentSpec.data : []
@@ -4828,6 +5014,7 @@ export {
   createTable,
   createTooltipManager,
   exportCSV,
+  exportJPG,
   exportPNG,
   exportSVG,
   observeResize,