@opendata-ai/openchart-vanilla 2.9.1 → 2.10.0

package/dist/index.js

@@ -640,10 +640,13 @@ var ZoomTransform = class _ZoomTransform {
   /**
    * Compute a transform that fits all nodes within the given canvas
    * dimensions with the specified padding.
+   *
+   * Returns the transform and the ideal content height (in screen pixels)
+   * so callers can shrink the canvas to eliminate dead space.
    */
   static fitBounds(nodes, canvasW, canvasH, padding = 40) {
     if (nodes.length === 0) {
-      return _ZoomTransform.identity();
+      return { transform: _ZoomTransform.identity(), contentHeight: canvasH };
     }
     let minX = Infinity;
     let minY = Infinity;
@@ -659,7 +662,10 @@ var ZoomTransform = class _ZoomTransform {
     const graphW = maxX - minX;
     const graphH = maxY - minY;
     if (graphW === 0 && graphH === 0) {
-      return new _ZoomTransform(canvasW / 2 - minX, canvasH / 2 - minY, 1);
+      return {
+        transform: new _ZoomTransform(canvasW / 2 - minX, canvasH / 2 - minY, 1),
+        contentHeight: padding * 2
+      };
     }
     const availW = canvasW - padding * 2;
     const availH = canvasH - padding * 2;
@@ -667,7 +673,11 @@ var ZoomTransform = class _ZoomTransform {
     const cx = (minX + maxX) / 2;
     const tx = canvasW / 2 - cx * k;
     const ty = padding - minY * k;
-    return new _ZoomTransform(tx, ty, k);
+    const contentHeight = graphH * k + padding * 2;
+    return {
+      transform: new _ZoomTransform(tx, ty, k),
+      contentHeight
+    };
   }
   /** Identity transform (no pan, no zoom). */
   static identity() {
@@ -2474,6 +2484,7 @@ function createGraph(container, spec, options) {
   let needsRender = false;
   let isGesturing = false;
   let gestureTimeout = null;
+  let selfResizing = false;
   function markGesture() {
     isGesturing = true;
     if (gestureTimeout !== null) clearTimeout(gestureTimeout);
@@ -2677,10 +2688,28 @@ function createGraph(container, spec, options) {
       scheduleRender();
     });
     simulation.onSettled(() => {
-      if (canvas && positionedNodes.length > 0 && interactionManager) {
+      if (canvas && positionedNodes.length > 0 && interactionManager && renderer) {
         const { width: cw, height: ch } = getCanvasDimensions();
-        const fitTransform = ZoomTransform.fitBounds(positionedNodes, cw, ch);
+        const { transform: fitTransform, contentHeight } = ZoomTransform.fitBounds(
+          positionedNodes,
+          cw,
+          ch
+        );
         interactionManager.setTransform(fitTransform);
+        const chromeH = chromeEl?.getBoundingClientRect().height || 0;
+        const totalContentHeight = Math.ceil(contentHeight) + chromeH;
+        const containerH = container.getBoundingClientRect().height;
+        if (totalContentHeight < containerH) {
+          selfResizing = true;
+          const targetCanvasH = Math.ceil(contentHeight);
+          renderer.resize(cw, targetCanvasH);
+          const refit = ZoomTransform.fitBounds(positionedNodes, cw, targetCanvasH);
+          interactionManager.setTransform(refit.transform);
+          container.style.height = "fit-content";
+          setTimeout(() => {
+            selfResizing = false;
+          }, 100);
+        }
         needsRender = true;
         scheduleRender();
       }
@@ -2858,7 +2887,7 @@ function createGraph(container, spec, options) {
   function zoomToFit() {
     if (destroyed || !interactionManager || positionedNodes.length === 0) return;
     const { width: cw, height: ch } = getCanvasDimensions();
-    const fitTransform = ZoomTransform.fitBounds(positionedNodes, cw, ch);
+    const { transform: fitTransform } = ZoomTransform.fitBounds(positionedNodes, cw, ch);
     interactionManager.setTransform(fitTransform);
     needsRender = true;
     scheduleRender();
@@ -2887,7 +2916,8 @@ function createGraph(container, spec, options) {
     return [...selectedNodeIds];
   }
   function doResize() {
-    if (destroyed || !canvas || !renderer || !wrapper) return;
+    if (destroyed || !canvas || !renderer || !wrapper || selfResizing) return;
+    container.style.height = "";
     const { width, height } = getContainerDimensions();
     const chromeHeight = chromeEl?.getBoundingClientRect().height || 0;
     const canvasHeight = Math.max(height - chromeHeight, 200);
@@ -3680,13 +3710,19 @@ function renderLegend(parent, legend) {
     entryG.setAttribute("role", "listitem");
     entryG.setAttribute("data-legend-index", String(i));
     entryG.setAttribute("data-legend-label", entry.label);
-    entryG.setAttribute(
-      "aria-label",
-      `${entry.label}: ${entry.active !== false ? "visible" : "hidden"}`
-    );
-    entryG.setAttribute("style", "cursor: pointer");
-    if (entry.active === false) {
-      entryG.setAttribute("opacity", "0.3");
+    if (entry.overflow) {
+      entryG.setAttribute("data-legend-overflow", "true");
+      entryG.setAttribute("aria-label", entry.label);
+      entryG.setAttribute("opacity", "0.5");
+    } else {
+      entryG.setAttribute(
+        "aria-label",
+        `${entry.label}: ${entry.active !== false ? "visible" : "hidden"}`
+      );
+      entryG.setAttribute("style", "cursor: pointer");
+      if (entry.active === false) {
+        entryG.setAttribute("opacity", "0.3");
+      }
     }
     if (entry.shape === "circle") {
       const circle = createSVGElement("circle");
@@ -4538,6 +4574,7 @@ function wireLegendInteraction(svg, _layout, onLegendToggle, onEdit) {
   const cleanups = [];
   const hiddenSeries = /* @__PURE__ */ new Set();
   for (const entry of legendEntries) {
+    if (entry.getAttribute("data-legend-overflow") === "true") continue;
     const handleClick = () => {
       const label = entry.getAttribute("data-legend-label");
       if (!label) return;