@opendata-ai/openchart-vanilla 6.12.0 → 6.15.0

package/dist/index.js

@@ -299,8 +299,6 @@ var GraphCanvasRenderer = class {
     this.cssHeight = height;
     this.canvas.width = width * this.dpr;
     this.canvas.height = height * this.dpr;
-    this.canvas.style.width = `${width}px`;
-    this.canvas.style.height = `${height}px`;
   }
   /** Clear canvas and render the full graph state. */
   render(state) {
@@ -796,20 +794,32 @@ var ZoomTransform = class _ZoomTransform {
       if (n.x + r > maxX) maxX = n.x + r;
       if (n.y + r > maxY) maxY = n.y + r;
     }
-    const graphW = maxX - minX;
-    const graphH = maxY - minY;
+    let graphW = maxX - minX;
+    let graphH = maxY - minY;
     if (graphW === 0 && graphH === 0) {
       return {
         transform: new _ZoomTransform(canvasW / 2 - minX, canvasH / 2 - minY, 1),
         contentHeight: padding * 2
       };
     }
+    if (nodes.length > 50) {
+      const spread = 1 + Math.sqrt(nodes.length) / 120;
+      const cx2 = (minX + maxX) / 2;
+      const cy2 = (minY + maxY) / 2;
+      graphW *= spread;
+      graphH *= spread;
+      minX = cx2 - graphW / 2;
+      maxX = cx2 + graphW / 2;
+      minY = cy2 - graphH / 2;
+      maxY = cy2 + graphH / 2;
+    }
     const availW = canvasW - padding * 2;
     const availH = canvasH - padding * 2;
-    const k = Math.min(availW / graphW, availH / graphH);
+    const k = Math.min(1, availW / graphW, availH / graphH);
     const cx = (minX + maxX) / 2;
+    const cy = (minY + maxY) / 2;
     const tx = canvasW / 2 - cx * k;
-    const ty = padding - minY * k;
+    const ty = canvasH / 2 - cy * k;
     const contentHeight = graphH * k + padding * 2;
     return {
       transform: new _ZoomTransform(tx, ty, k),
@@ -2811,8 +2821,7 @@ function createGraph(container, spec, options) {
       wrapper.appendChild(legendEl);
     }
     container.appendChild(wrapper);
-    const chromeHeight = chromeEl.getBoundingClientRect().height || 0;
-    const canvasHeight = Math.max(height - chromeHeight, 200);
+    const canvasHeight = Math.max(height, 200);
     renderer = new GraphCanvasRenderer(canvas);
     renderer.resize(width, canvasHeight);
   }
@@ -3118,8 +3127,7 @@ function createGraph(container, spec, options) {
   function doResize() {
     if (destroyed || !canvas || !renderer || !wrapper) return;
     const { width, height } = getContainerDimensions();
-    const chromeHeight = chromeEl?.getBoundingClientRect().height || 0;
-    const canvasHeight = Math.max(height - chromeHeight, 200);
+    const canvasHeight = Math.max(height, 200);
     renderer.resize(width, canvasHeight);
     needsRender = true;
     scheduleRender();
@@ -3447,14 +3455,33 @@ function applyTextStyle(el, style) {
     el.setAttribute("font-variant", style.fontVariant);
   }
 }
-function wrapText(text, fontSize, fontWeight, maxWidth) {
+function wrapText(text, fontSize, fontWeight, maxWidth, measureText) {
   if (maxWidth <= 0) return [text];
   const segments = text.split("\n");
   if (segments.length > 1) {
     return segments.flatMap(
-      (segment) => segment.length === 0 ? [""] : wrapText(segment, fontSize, fontWeight, maxWidth)
+      (segment) => segment.length === 0 ? [""] : wrapText(segment, fontSize, fontWeight, maxWidth, measureText)
     );
   }
+  if (measureText) {
+    const textWidth = measureText(text, fontSize, fontWeight).width;
+    if (textWidth <= maxWidth) return [text];
+    const words2 = text.split(" ");
+    const lines2 = [];
+    let current2 = "";
+    for (const word of words2) {
+      const candidate = current2 ? `${current2} ${word}` : word;
+      const candidateWidth = measureText(candidate, fontSize, fontWeight).width;
+      if (candidateWidth > maxWidth && current2) {
+        lines2.push(current2);
+        current2 = word;
+      } else {
+        current2 = candidate;
+      }
+    }
+    if (current2) lines2.push(current2);
+    return lines2;
+  }
   const AVG_CHAR_WIDTH = 0.55;
   const WEIGHT_FACTORS = {
     100: 0.9,
@@ -3486,7 +3513,7 @@ function wrapText(text, fontSize, fontWeight, maxWidth) {
   if (current) lines.push(current);
   return lines;
 }
-function renderChromeElement(parent, element, className, chromeKey) {
+function renderChromeElement(parent, element, className, chromeKey, measureText) {
   const text = createSVGElement("text");
   setAttrs(text, { x: element.x, y: element.y });
   applyTextStyle(text, element.style);
@@ -3496,7 +3523,8 @@ function renderChromeElement(parent, element, className, chromeKey) {
     element.text,
     element.style.fontSize,
     element.style.fontWeight,
-    element.maxWidth
+    element.maxWidth,
+    measureText
   );
   if (lines.length === 1) {
     text.textContent = element.text;
@@ -3514,12 +3542,12 @@ function renderChromeElement(parent, element, className, chromeKey) {
 function renderChrome(parent, layout) {
   const g = createSVGElement("g");
   g.setAttribute("class", "oc-chrome");
-  const { chrome } = layout;
+  const { chrome, measureText } = layout;
   if (chrome.title) {
-    renderChromeElement(g, chrome.title, "oc-title", "title");
+    renderChromeElement(g, chrome.title, "oc-title", "title", measureText);
   }
   if (chrome.subtitle) {
-    renderChromeElement(g, chrome.subtitle, "oc-subtitle", "subtitle");
+    renderChromeElement(g, chrome.subtitle, "oc-subtitle", "subtitle", measureText);
   }
   const xAxisExtent = computeXAxisExtent(layout);
   const bottomOffset = layout.area.y + layout.area.height + xAxisExtent;
@@ -3528,7 +3556,8 @@ function renderChrome(parent, layout) {
       g,
       { ...chrome.source, y: bottomOffset + chrome.source.y },
       "oc-source",
-      "source"
+      "source",
+      measureText
     );
   }
   if (chrome.byline) {
@@ -3536,7 +3565,8 @@ function renderChrome(parent, layout) {
       g,
       { ...chrome.byline, y: bottomOffset + chrome.byline.y },
       "oc-byline",
-      "byline"
+      "byline",
+      measureText
     );
   }
   if (chrome.footer) {
@@ -3544,7 +3574,8 @@ function renderChrome(parent, layout) {
       g,
       { ...chrome.footer, y: bottomOffset + chrome.footer.y },
       "oc-footer",
-      "footer"
+      "footer",
+      measureText
     );
   }
   parent.appendChild(g);
@@ -3967,8 +3998,9 @@ function renderAnnotations(parent, layout) {
   if (layout.annotations.length === 0) return;
   const g = createSVGElement("g");
   g.setAttribute("class", "oc-annotations");
+  const bgColor = layout.theme.colors.background;
   for (let i = 0; i < layout.annotations.length; i++) {
-    renderAnnotation(g, layout.annotations[i], i);
+    renderAnnotation(g, layout.annotations[i], i, bgColor);
   }
   parent.appendChild(g);
 }
@@ -4014,7 +4046,7 @@ function renderCurvedArrow(parent, from, to, stroke) {
   });
   parent.appendChild(arrow);
 }
-function renderAnnotation(parent, annotation, index2) {
+function renderAnnotation(parent, annotation, index2, bgColor) {
   const g = createSVGElement("g");
   g.setAttribute("class", `oc-annotation oc-annotation-${annotation.type}`);
   g.setAttribute("data-annotation-index", String(index2));
@@ -4108,6 +4140,11 @@ function renderAnnotation(parent, annotation, index2) {
         rx: 2
       });
       g.appendChild(bgRect);
+    } else if (bgColor) {
+      text.style.paintOrder = "stroke";
+      text.style.stroke = bgColor;
+      text.style.strokeWidth = `${Math.round(fontSize * 0.3)}px`;
+      text.style.strokeLinejoin = "round";
     }
     g.appendChild(text);
   }