@opendata-ai/openchart-vanilla 2.2.0 → 2.3.0

package/dist/index.d.ts

@@ -88,6 +88,10 @@ interface GraphMountOptions {
     theme?: ThemeConfig;
     darkMode?: DarkMode;
     responsive?: boolean;
+    /** Show the built-in tooltip on node/edge hover. Defaults to true. */
+    tooltip?: boolean;
+    /** Show the built-in legend. Defaults to true. */
+    legend?: boolean;
     onNodeClick?: (node: Record<string, unknown>) => void;
     onNodeDoubleClick?: (node: Record<string, unknown>) => void;
     onNodeHover?: (node: Record<string, unknown> | null) => void;

package/dist/index.js

@@ -107,15 +107,15 @@ function createSimulationWorker() {
 import { compileGraph } from "@opendata-ai/openchart-engine";
 
 // src/graph/canvas-renderer.ts
-var LABEL_FONT_MIN = 10;
-var LABEL_FONT_MAX = 14;
+var LABEL_FONT_MIN = 8;
+var LABEL_FONT_MAX = 12;
 var EDGE_ALPHA_DEFAULT = 0.35;
 var EDGE_ALPHA_CONNECTED = 1;
 var EDGE_ALPHA_DIMMED = 0.05;
 var SEARCH_NON_MATCH_ALPHA = 0.15;
 var GLOW_NODE_THRESHOLD = 2e3;
-var GLOW_RADIUS_MULTIPLIER = 1.5;
-var GLOW_ALPHA = 0.2;
+var GLOW_RADIUS_MULTIPLIER = 1.3;
+var GLOW_ALPHA = 0.15;
 var CULL_MARGIN = 50;
 var TWO_PI = Math.PI * 2;
 var MIN_SCREEN_RADIUS = 2.5;
@@ -203,8 +203,10 @@ var GraphCanvasRenderer = class {
     ctx.save();
     ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
     ctx.clearRect(0, 0, cssWidth, cssHeight);
-    ctx.fillStyle = theme.colors.background;
-    ctx.fillRect(0, 0, cssWidth, cssHeight);
+    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);
     this.drawEdgesBatched(
@@ -542,7 +544,7 @@ var GraphCanvasRenderer = class {
   // Labels (drawn individually, skipped during gestures)
   // -------------------------------------------------------------------------
   drawLabels(ctx, nodes, threshold, hoveredNodeId, selectedNodeIds, searchMatches, zoom, theme) {
-    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}`;
     ctx.textAlign = "center";
@@ -556,7 +558,7 @@ var GraphCanvasRenderer = class {
       if (!forced && node.labelPriority < threshold) continue;
       ctx.globalAlpha = dimmed ? SEARCH_NON_MATCH_ALPHA : 1;
       const labelY = node.y + node.radius + 3;
-      ctx.strokeStyle = theme.colors.background;
+      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);
@@ -1653,10 +1655,12 @@ function createGraph(container, spec, options) {
       canvas.setAttribute("aria-label", compilation.a11y.altText);
     }
     wrapper.appendChild(canvas);
-    legendEl = document.createElement("div");
-    legendEl.className = "viz-graph-legend";
-    renderLegend2();
-    wrapper.appendChild(legendEl);
+    if (options?.legend !== false) {
+      legendEl = document.createElement("div");
+      legendEl.className = "viz-graph-legend";
+      renderLegend2();
+      wrapper.appendChild(legendEl);
+    }
     container.appendChild(wrapper);
     const chromeHeight = chromeEl.getBoundingClientRect().height || 0;
     const canvasHeight = Math.max(height - chromeHeight, 200);
@@ -1781,7 +1785,9 @@ function createGraph(container, spec, options) {
   }
   function initInteraction() {
     if (!canvas) return;
-    tooltipManager = createTooltipManager(wrapper);
+    if (options?.tooltip !== false) {
+      tooltipManager = createTooltipManager(wrapper);
+    }
     interactionManager = new GraphInteractionManager(canvas, spatialIndex, {
       onTransformChange(_transform) {
         markGesture();