@opendata-ai/openchart-vanilla 2.1.0 → 2.2.1

package/dist/simulation-worker.js

@@ -1130,7 +1130,15 @@
           }));
           nodeMap = new Map(internalNodes.map((n) => [n.id, n]));
           const { config } = msg;
-          simulation = simulation_default(internalNodes).force("link", link_default(msg.edges.map((e) => ({ ...e }))).id((d) => d.id).distance(config.linkDistance)).force("charge", manyBody_default().strength(config.chargeStrength)).force("center", center_default(0, 0)).force("collide", collide_default().radius((d) => d.radius + 1)).force("gravityX", x_default2(0).strength(0.05)).force("gravityY", y_default2(0).strength(0.05)).alphaDecay(config.alphaDecay).velocityDecay(config.velocityDecay);
+          const linkForce = link_default(msg.edges.map((e) => ({ ...e }))).id((d) => d.id).distance(config.linkDistance);
+          if (config.linkStrength != null) {
+            linkForce.strength(config.linkStrength);
+          }
+          const padding = config.collisionPadding ?? 2;
+          simulation = simulation_default(internalNodes).force("link", linkForce).force("charge", manyBody_default().strength(config.chargeStrength)).force("collide", collide_default().radius((d) => d.radius + padding)).force("gravityX", x_default2(0).strength(0.05)).force("gravityY", y_default2(0).strength(0.05)).alphaDecay(config.alphaDecay).velocityDecay(config.velocityDecay);
+          if (config.centerForce !== false) {
+            simulation.force("center", center_default(0, 0));
+          }
           if (config.clustering) {
             const clusterFn = forceCluster(internalNodes, config.clustering.strength);
             simulation.force("cluster", clusterFn);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opendata-ai/openchart-vanilla",
-  "version": "2.1.0",
+  "version": "2.2.1",
   "description": "Vanilla JS renderer for openchart: SVG charts, HTML tables, force-directed graphs",
   "license": "Apache-2.0",
   "author": "Riley Hilliard",
@@ -46,8 +46,8 @@
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
-    "@opendata-ai/openchart-core": "2.1.0",
-    "@opendata-ai/openchart-engine": "2.1.0",
+    "@opendata-ai/openchart-core": "2.2.1",
+    "@opendata-ai/openchart-engine": "2.2.1",
     "d3-force": "^3.0.0",
     "d3-quadtree": "^3.0.1"
   },

package/src/__tests__/export.test.ts

@@ -1,8 +1,8 @@
 /**
  * Export utility tests.
  *
- * Tests exportSVG and exportCSV functions directly, verifying SVG string
- * validity and CSV formatting with headers and proper escaping.
+ * Tests exportSVG, exportCSV, and exportJPG functions directly, verifying SVG string
+ * validity, CSV formatting with headers and proper escaping, and JPG export interface.
  */
 
 import type { CompileOptions } from '@opendata-ai/openchart-engine';
@@ -10,7 +10,7 @@ import { compileChart } from '@opendata-ai/openchart-engine';
 import { afterEach, describe, expect, it } from 'vitest';
 import { createContainer } from '../__test-fixtures__/dom';
 import { barSpec, lineSpec } from '../__test-fixtures__/specs';
-import { exportCSV, exportSVG } from '../export';
+import { exportCSV, exportJPG, exportSVG } from '../export';
 import { renderChartSVG } from '../svg-renderer';
 
 // ---------------------------------------------------------------------------
@@ -148,3 +148,29 @@ describe('exportCSV', () => {
     expect(result.split('\n')[0]).toBe('x,y,z');
   });
 });
+
+// ---------------------------------------------------------------------------
+// exportJPG
+// ---------------------------------------------------------------------------
+
+describe('exportJPG', () => {
+  it('is a function that accepts an SVG element and options', () => {
+    expect(typeof exportJPG).toBe('function');
+    expect(exportJPG.length).toBeGreaterThanOrEqual(1);
+  });
+
+  it('returns a Promise when called with a rendered SVG element', () => {
+    const svg = renderToSVG();
+    const result = exportJPG(svg);
+    expect(result).toBeInstanceOf(Promise);
+    // Clean up: catch any rejection from happy-dom canvas limitations
+    result.catch(() => {});
+  });
+
+  it('accepts quality option between 0 and 1', () => {
+    const svg = renderToSVG();
+    const result = exportJPG(svg, { quality: 0.5, dpi: 1 });
+    expect(result).toBeInstanceOf(Promise);
+    result.catch(() => {});
+  });
+});

package/src/export.ts

@@ -74,6 +74,76 @@ export async function exportPNG(svgElement: SVGElement, options?: PNGExportOptio
   });
 }
 
+export 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.
+ */
+export async function exportJPG(svgElement: SVGElement, options?: JPGExportOptions): Promise<Blob> {
+  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');
+  }
+
+  // Fill white background since JPEG doesn't support transparency
+  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<Blob>((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;
+  });
+}
+
 /**
  * Convert an array of data objects to a CSV string.
  *

package/src/graph/canvas-renderer.ts

@@ -18,15 +18,15 @@ import type { GraphRenderState, PositionedEdge, PositionedNode } from './types';
 // Constants
 // ---------------------------------------------------------------------------
 
-const LABEL_FONT_MIN = 10;
-const LABEL_FONT_MAX = 14;
+const LABEL_FONT_MIN = 8;
+const LABEL_FONT_MAX = 12;
 const EDGE_ALPHA_DEFAULT = 0.35;
 const EDGE_ALPHA_CONNECTED = 1.0;
 const EDGE_ALPHA_DIMMED = 0.05;
 const SEARCH_NON_MATCH_ALPHA = 0.15;
 const GLOW_NODE_THRESHOLD = 2000;
-const GLOW_RADIUS_MULTIPLIER = 1.5;
-const GLOW_ALPHA = 0.2;
+const GLOW_RADIUS_MULTIPLIER = 1.3;
+const GLOW_ALPHA = 0.15;
 const CULL_MARGIN = 50;
 const TWO_PI = Math.PI * 2;
 
@@ -141,6 +141,7 @@ export class GraphCanvasRenderer {
       edges,
       transform,
       hoveredNodeId,
+      hoveredEdgeId,
       selectedNodeIds,
       adjacencyMap,
       theme,
@@ -179,9 +180,11 @@ export class GraphCanvasRenderer {
     ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
     ctx.clearRect(0, 0, cssWidth, cssHeight);
 
-    // Fill background
-    ctx.fillStyle = theme.colors.background;
-    ctx.fillRect(0, 0, cssWidth, cssHeight);
+    // Fill background (skip if transparent to let page background show through)
+    if (theme.colors.background !== 'transparent') {
+      ctx.fillStyle = theme.colors.background;
+      ctx.fillRect(0, 0, cssWidth, cssHeight);
+    }
 
     ctx.translate(transform.x, transform.y);
     ctx.scale(transform.k, transform.k);
@@ -193,6 +196,7 @@ export class GraphCanvasRenderer {
       hasActiveNode,
       connectedNodeIds,
       isGesturing ? null : searchMatches,
+      hoveredEdgeId,
     );
 
     // -- Draw nodes (batched by fill color) --
@@ -263,13 +267,21 @@ export class GraphCanvasRenderer {
     hasActiveNode: boolean,
     connectedNodeIds: Set<string>,
     searchMatches: Set<string> | null,
+    hoveredEdgeId: string | null,
   ): void {
     // Classify edges by alpha level, then batch by visual style within each level
     const dimmedEdges: PositionedEdge[] = [];
     const defaultEdges: PositionedEdge[] = [];
     const connectedEdges: PositionedEdge[] = [];
+    let hoveredEdge: PositionedEdge | null = null;
 
     for (const edge of edges) {
+      const edgeId = `${edge.source}->${edge.target}`;
+      if (edgeId === hoveredEdgeId) {
+        hoveredEdge = edge;
+        continue; // Draw hovered edge last, on top
+      }
+
       const isConnected =
         hasActiveNode && connectedNodeIds.has(edge.source) && connectedNodeIds.has(edge.target);
       const isDimmed = hasActiveNode && !isConnected;
@@ -287,6 +299,21 @@ export class GraphCanvasRenderer {
     this.drawEdgeGroupBatched(ctx, dimmedEdges, EDGE_ALPHA_DIMMED, searchMatches);
     this.drawEdgeGroupBatched(ctx, defaultEdges, EDGE_ALPHA_DEFAULT, searchMatches);
     this.drawEdgeGroupBatched(ctx, connectedEdges, EDGE_ALPHA_CONNECTED, searchMatches);
+
+    // Draw hovered edge on top with highlight
+    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;
+    }
   }
 
   /**
@@ -613,7 +640,7 @@ export class GraphCanvasRenderer {
     theme: GraphRenderState['theme'],
   ): void {
     // Font size inversely scaled by zoom, clamped to readable range
-    const rawSize = 12 / zoom;
+    const rawSize = 10 / zoom;
     const fontSize = Math.max(LABEL_FONT_MIN, Math.min(LABEL_FONT_MAX, rawSize));
 
     ctx.font = `${fontSize}px ${theme.fonts.family}`;
@@ -635,8 +662,9 @@ export class GraphCanvasRenderer {
 
       const labelY = node.y + node.radius + 3;
 
-      // Dark halo for readability
-      ctx.strokeStyle = theme.colors.background;
+      // Dark halo for readability (fall back to semi-transparent black when bg is transparent)
+      ctx.strokeStyle =
+        theme.colors.background === 'transparent' ? 'rgba(0, 0, 0, 0.7)' : theme.colors.background;
       ctx.lineWidth = 3;
       ctx.lineJoin = 'round';
       ctx.strokeText(node.label, node.x, labelY);

package/src/graph/interaction.ts

@@ -26,6 +26,8 @@ const HIT_DISTANCE = 5;
 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;
@@ -198,6 +200,12 @@ export class GraphInteractionManager {
     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';
   }

package/src/graph/simulation-worker.ts

@@ -60,6 +60,9 @@ interface SimConfig {
   alphaDecay: number;
   velocityDecay: number;
   collisionRadius: number;
+  collisionPadding?: number;
+  linkStrength?: number;
+  centerForce?: boolean;
 }
 
 type InMessage =
@@ -173,18 +176,21 @@ ctx.addEventListener('message', ((event: MessageEvent<InMessage>) => {
 
         const { config } = msg;
 
+        const linkForce = forceLink(msg.edges.map((e) => ({ ...e })))
+          .id((d) => (d as InternalNode).id)
+          .distance(config.linkDistance);
+        if (config.linkStrength != null) {
+          linkForce.strength(config.linkStrength);
+        }
+
+        const padding = config.collisionPadding ?? 2;
+
         simulation = forceSimulation<InternalNode>(internalNodes)
-          .force(
-            'link',
-            forceLink(msg.edges.map((e) => ({ ...e })))
-              .id((d) => (d as InternalNode).id)
-              .distance(config.linkDistance),
-          )
+          .force('link', linkForce)
           .force('charge', forceManyBody().strength(config.chargeStrength))
-          .force('center', forceCenter(0, 0))
           .force(
             'collide',
-            forceCollide<InternalNode>().radius((d) => d.radius + 1),
+            forceCollide<InternalNode>().radius((d) => d.radius + padding),
           )
           // Weak gravity keeps disconnected nodes from drifting far from center
           .force('gravityX', forceX<InternalNode>(0).strength(0.05))
@@ -192,6 +198,11 @@ ctx.addEventListener('message', ((event: MessageEvent<InMessage>) => {
           .alphaDecay(config.alphaDecay)
           .velocityDecay(config.velocityDecay);
 
+        // Center force (default true)
+        if (config.centerForce !== false) {
+          simulation.force('center', forceCenter(0, 0));
+        }
+
         // Add clustering force if configured
         if (config.clustering) {
           const clusterFn = forceCluster(internalNodes, config.clustering.strength);

package/src/graph/simulation.ts

@@ -278,18 +278,21 @@ export class SimulationManager {
 
     this.syncNodeMap = new Map(this.syncNodes.map((n) => [n.id, n]));
 
+    const linkForce = forceLink(edges.map((e) => ({ ...e })))
+      .id((d) => (d as SyncNode).id)
+      .distance(config.linkDistance);
+    if (config.linkStrength != null) {
+      linkForce.strength(config.linkStrength);
+    }
+
+    const padding = config.collisionPadding ?? 2;
+
     this.syncSim = forceSimulation<SyncNode>(this.syncNodes)
-      .force(
-        'link',
-        forceLink(edges.map((e) => ({ ...e })))
-          .id((d) => (d as SyncNode).id)
-          .distance(config.linkDistance),
-      )
+      .force('link', linkForce)
       .force('charge', forceManyBody().strength(config.chargeStrength))
-      .force('center', forceCenter(0, 0))
       .force(
         'collide',
-        forceCollide<SyncNode>().radius((d) => d.radius + 1),
+        forceCollide<SyncNode>().radius((d) => d.radius + padding),
       )
       // Weak gravity keeps disconnected nodes from drifting far from center
       .force('gravityX', forceX<SyncNode>(0).strength(0.05))
@@ -298,6 +301,11 @@ export class SimulationManager {
       .velocityDecay(config.velocityDecay)
       .stop(); // Don't auto-run; we tick manually
 
+    // Center force (default true)
+    if (config.centerForce !== false) {
+      this.syncSim.force('center', forceCenter(0, 0));
+    }
+
     // Add clustering force if configured
     if (config.clustering) {
       const clusterFn = forceCluster(this.syncNodes, config.clustering.strength);

package/src/graph/types.ts

@@ -35,6 +35,7 @@ export interface GraphRenderState {
   edges: PositionedEdge[];
   transform: { x: number; y: number; k: number };
   hoveredNodeId: string | null;
+  hoveredEdgeId: string | null;
   selectedNodeIds: Set<string>;
   adjacencyMap: Map<string, Set<string>>;
   theme: ResolvedTheme;

package/src/graph/worker-protocol.ts

@@ -34,6 +34,9 @@ export interface WorkerSimulationConfig {
   alphaDecay: number;
   velocityDecay: number;
   collisionRadius: number;
+  collisionPadding?: number;
+  linkStrength?: number;
+  centerForce?: boolean;
 }
 
 // ---------------------------------------------------------------------------