@opendata-ai/openchart-vanilla 2.10.0 → 2.11.0

package/dist/index.d.ts

@@ -326,7 +326,8 @@ declare function renderTable(layout: TableLayout, container: HTMLElement): HTMLE
  * Tooltip manager: creates and positions a floating tooltip element.
  *
  * Shows tooltip content near the mouse/touch position with viewport
- * edge avoidance. Touch support via tap-to-show, tap-outside-to-hide.
+ * edge avoidance via @floating-ui/dom. Touch support via tap-to-show,
+ * tap-outside-to-hide.
  */
 
 interface TooltipManager {

package/dist/index.js

@@ -2383,6 +2383,7 @@ function observeResize(container, callback) {
 }
 
 // src/tooltip.ts
+import { computePosition, flip, offset, shift } from "@floating-ui/dom";
 var TOOLTIP_OFFSET = 12;
 function createTooltipManager(container) {
   const tooltip = document.createElement("div");
@@ -2390,6 +2391,8 @@ function createTooltipManager(container) {
   tooltip.setAttribute("role", "tooltip");
   container.style.position = container.style.position || "relative";
   container.appendChild(tooltip);
+  let lastContentKey = "";
+  let currentPositionId = 0;
   const handleDocumentTouch = (e) => {
     if (!container.contains(e.target)) {
       hide();
@@ -2397,45 +2400,60 @@ function createTooltipManager(container) {
   };
   document.addEventListener("touchstart", handleDocumentTouch);
   function show(content, x3, y3) {
-    let html = "";
-    if (content.title) {
-      const titleColor = content.fields.find((f) => f.color)?.color;
-      html += '<div class="viz-tooltip-header">';
-      if (titleColor) {
-        html += `<span class="viz-tooltip-dot" style="background:${esc(titleColor)}"></span>`;
+    const contentKey = `${content.title}|${content.fields.length}|${content.fields[0]?.value}|${content.fields[content.fields.length - 1]?.value}`;
+    if (contentKey !== lastContentKey) {
+      lastContentKey = contentKey;
+      let html = "";
+      if (content.title) {
+        const titleColor = content.fields.find((f) => f.color)?.color;
+        html += '<div class="viz-tooltip-header">';
+        if (titleColor) {
+          html += `<span class="viz-tooltip-dot" style="background:${esc(titleColor)}"></span>`;
+        }
+        html += `<span class="viz-tooltip-title">${esc(content.title)}</span>`;
+        html += "</div>";
       }
-      html += `<span class="viz-tooltip-title">${esc(content.title)}</span>`;
-      html += "</div>";
-    }
-    if (content.fields.length > 0) {
-      html += '<div class="viz-tooltip-body">';
-      for (const field of content.fields) {
-        html += '<div class="viz-tooltip-row">';
-        html += `<span class="viz-tooltip-label">${esc(field.label)}</span>`;
-        html += `<span class="viz-tooltip-value">${esc(field.value)}</span>`;
+      if (content.fields.length > 0) {
+        html += '<div class="viz-tooltip-body">';
+        for (const field of content.fields) {
+          html += '<div class="viz-tooltip-row">';
+          html += `<span class="viz-tooltip-label">${esc(field.label)}</span>`;
+          html += `<span class="viz-tooltip-value">${esc(field.value)}</span>`;
+          html += "</div>";
+        }
         html += "</div>";
       }
-      html += "</div>";
+      tooltip.innerHTML = html;
     }
-    tooltip.innerHTML = html;
     tooltip.style.display = "block";
-    const containerRect = container.getBoundingClientRect();
-    const tooltipRect = tooltip.getBoundingClientRect();
-    let left = x3 + TOOLTIP_OFFSET;
-    let top = y3 + TOOLTIP_OFFSET;
-    if (left + tooltipRect.width > containerRect.width) {
-      left = x3 - tooltipRect.width - TOOLTIP_OFFSET;
-    }
-    if (top + tooltipRect.height > containerRect.height) {
-      top = y3 - tooltipRect.height - TOOLTIP_OFFSET;
-    }
-    left = Math.max(0, Math.min(left, containerRect.width - tooltipRect.width));
-    top = Math.max(0, Math.min(top, containerRect.height - tooltipRect.height));
-    tooltip.style.left = `${left}px`;
-    tooltip.style.top = `${top}px`;
+    const positionId = ++currentPositionId;
+    const virtualRef = {
+      getBoundingClientRect() {
+        const rect = container.getBoundingClientRect();
+        return {
+          x: rect.left + x3,
+          y: rect.top + y3,
+          width: 0,
+          height: 0,
+          top: rect.top + y3,
+          left: rect.left + x3,
+          right: rect.left + x3,
+          bottom: rect.top + y3
+        };
+      }
+    };
+    computePosition(virtualRef, tooltip, {
+      placement: "bottom-start",
+      middleware: [offset(TOOLTIP_OFFSET), flip(), shift({ padding: 5 })]
+    }).then(({ x: fx, y: fy }) => {
+      if (positionId !== currentPositionId) return;
+      tooltip.style.left = `${fx}px`;
+      tooltip.style.top = `${fy}px`;
+    });
   }
   function hide() {
     tooltip.style.display = "none";
+    lastContentKey = "";
   }
   function destroy() {
     document.removeEventListener("touchstart", handleDocumentTouch);
@@ -2446,7 +2464,7 @@ function createTooltipManager(container) {
   return { show, hide, destroy };
 }
 function esc(str) {
-  return str.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
+  return str.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#x27;");
 }
 
 // src/graph-mount.ts
@@ -2477,6 +2495,8 @@ function createGraph(container, spec, options) {
   let positionedNodes = [];
   let positionedEdges = [];
   let adjacencyMap = /* @__PURE__ */ new Map();
+  let nodeDataMap = /* @__PURE__ */ new Map();
+  let edgeDataMap = /* @__PURE__ */ new Map();
   let hoveredNodeId = null;
   let hoveredEdgeId = null;
   let selectedNodeIds = /* @__PURE__ */ new Set();
@@ -2484,7 +2504,7 @@ function createGraph(container, spec, options) {
   let needsRender = false;
   let isGesturing = false;
   let gestureTimeout = null;
-  let selfResizing = false;
+  let lastEdgeHitTime = 0;
   function markGesture() {
     isGesturing = true;
     if (gestureTimeout !== null) clearTimeout(gestureTimeout);
@@ -2513,6 +2533,10 @@ function createGraph(container, spec, options) {
     };
     return compileGraph(currentSpec, compileOpts);
   }
+  function buildDataMaps() {
+    nodeDataMap = new Map(compilation.nodes.map((n) => [n.id, n.data ?? {}]));
+    edgeDataMap = new Map(compilation.edges.map((e) => [`${e.source}->${e.target}`, e.data ?? {}]));
+  }
   function buildAdjacencyMap(edges) {
     const map = /* @__PURE__ */ new Map();
     for (const edge of edges) {
@@ -2537,8 +2561,7 @@ function createGraph(container, spec, options) {
     }));
   }
   function nodeDataById(nodeId) {
-    const node = compilation.nodes.find((n) => n.id === nodeId);
-    return node?.data ?? {};
+    return nodeDataMap.get(nodeId) ?? {};
   }
   function pointToSegmentDist(px, py, ax, ay, bx, by) {
     const dx = bx - ax;
@@ -2568,9 +2591,7 @@ function createGraph(container, spec, options) {
     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;
+    return edgeDataMap.get(edgeId) ?? null;
   }
   function createDOM() {
     const { width, height } = getContainerDimensions();
@@ -2690,26 +2711,8 @@ function createGraph(container, spec, options) {
     simulation.onSettled(() => {
       if (canvas && positionedNodes.length > 0 && interactionManager && renderer) {
         const { width: cw, height: ch } = getCanvasDimensions();
-        const { transform: fitTransform, contentHeight } = ZoomTransform.fitBounds(
-          positionedNodes,
-          cw,
-          ch
-        );
+        const { transform: fitTransform } = 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();
       }
@@ -2786,6 +2789,18 @@ function createGraph(container, spec, options) {
         }
       },
       onBackgroundHover(graphX, graphY, screenX, screenY) {
+        const now2 = performance.now();
+        if (now2 - lastEdgeHitTime < 32) {
+          if (hoveredEdgeId) {
+            hoveredEdgeId = null;
+            needsRender = true;
+            scheduleRender();
+            options?.onEdgeHover?.(null);
+            tooltipManager?.hide();
+          }
+          return;
+        }
+        lastEdgeHitTime = now2;
         const transform = interactionManager?.getTransform();
         const threshold = 5 / (transform?.k ?? 1);
         const edgeId = hitTestEdge(graphX, graphY, threshold);
@@ -2916,8 +2931,7 @@ function createGraph(container, spec, options) {
     return [...selectedNodeIds];
   }
   function doResize() {
-    if (destroyed || !canvas || !renderer || !wrapper || selfResizing) return;
-    container.style.height = "";
+    if (destroyed || !canvas || !renderer || !wrapper) return;
     const { width, height } = getContainerDimensions();
     const chromeHeight = chromeEl?.getBoundingClientRect().height || 0;
     const canvasHeight = Math.max(height - chromeHeight, 200);
@@ -2931,6 +2945,7 @@ function createGraph(container, spec, options) {
     teardownSubsystems();
     compilation = compile();
     adjacencyMap = buildAdjacencyMap(compilation.edges);
+    buildDataMaps();
     renderChrome2();
     renderLegend2();
     initSimulation();
@@ -2949,6 +2964,7 @@ function createGraph(container, spec, options) {
     }
     compilation = compile();
     adjacencyMap = buildAdjacencyMap(compilation.edges);
+    buildDataMaps();
     positionedNodes = compilation.nodes.map((node) => {
       const pos = posMap.get(node.id) ?? { x: 0, y: 0 };
       return { ...node, x: pos.x, y: pos.y };
@@ -3011,6 +3027,7 @@ function createGraph(container, spec, options) {
   try {
     compilation = compile();
     adjacencyMap = buildAdjacencyMap(compilation.edges);
+    buildDataMaps();
     createDOM();
     initSimulation();
     initInteraction();
@@ -3705,6 +3722,18 @@ function renderLegend(parent, legend) {
   let offsetY = legend.bounds.y;
   for (let i = 0; i < legend.entries.length; i++) {
     const entry = legend.entries[i];
+    if (isHorizontal && i > 0) {
+      const labelWidth = estimateTextWidth(
+        entry.label,
+        legend.labelStyle.fontSize,
+        legend.labelStyle.fontWeight
+      );
+      const entryWidth = legend.swatchSize + legend.swatchGap + labelWidth + legend.entryGap;
+      if (offsetX + entryWidth > legend.bounds.x + legend.bounds.width) {
+        offsetX = legend.bounds.x;
+        offsetY += legend.swatchSize + 6;
+      }
+    }
     const entryG = createSVGElement("g");
     entryG.setAttribute("class", "viz-legend-entry");
     entryG.setAttribute("role", "listitem");
@@ -3782,10 +3811,6 @@ function renderLegend(parent, legend) {
       );
       const entryWidth = legend.swatchSize + legend.swatchGap + labelWidth + legend.entryGap;
       offsetX += entryWidth;
-      if (offsetX > legend.bounds.x + legend.bounds.width && i < legend.entries.length - 1) {
-        offsetX = legend.bounds.x;
-        offsetY += legend.swatchSize + 6;
-      }
     } else {
       offsetY += legend.swatchSize + legend.entryGap;
     }
@@ -4748,6 +4773,7 @@ function createChart(container, spec, options) {
   let destroyed = false;
   let isDragging = false;
   let pendingRender = false;
+  let resizeTimer = null;
   const measureText = createMeasureText();
   function compile() {
     const { width, height } = getContainerDimensions();
@@ -4906,6 +4932,10 @@ function createChart(container, spec, options) {
   function destroy() {
     if (destroyed) return;
     destroyed = true;
+    if (resizeTimer !== null) {
+      clearTimeout(resizeTimer);
+      resizeTimer = null;
+    }
     if (cleanupTooltipEvents) {
       cleanupTooltipEvents();
       cleanupTooltipEvents = null;
@@ -4952,7 +4982,11 @@ function createChart(container, spec, options) {
   render();
   if (options?.responsive !== false) {
     disconnectResize = observeResize(container, () => {
-      resize();
+      if (resizeTimer !== null) clearTimeout(resizeTimer);
+      resizeTimer = setTimeout(() => {
+        resizeTimer = null;
+        resize();
+      }, 100);
     });
   }
   return {