@bicharts/chart-host 0.6.83 → 0.6.85

package/dist/chunk-ZGQURBRJ.mjs

@@ -0,0 +1,265 @@
+/*! @bicharts/chart-host — Apache-2.0. Bundled reference data: GeoNames (https://www.geonames.org/) CC BY 4.0; Natural Earth and US Census/TIGER (public domain). Full text: NOTICE in this package. */
+import {
+  SNAPSHOT_SVG_ATTR
+} from "./chunk-MR6TL7QZ.mjs";
+
+// src/snapshot.ts
+var DEFAULT_TIMEOUT_MS = 2e3;
+var SVG_NS = "http://www.w3.org/2000/svg";
+var XHTML_NS = "http://www.w3.org/1999/xhtml";
+function toBase64(str) {
+  const bytes = new TextEncoder().encode(str);
+  let binary = "";
+  for (let i = 0; i < bytes.length; i++) binary += String.fromCharCode(bytes[i]);
+  return btoa(binary);
+}
+function viewOf(el) {
+  return el.ownerDocument && el.ownerDocument.defaultView || globalThis;
+}
+var MAX_STYLED_ELEMENTS = 4e3;
+var TEXT_FONT_PROPS = ["font-family", "font-size", "font-weight", "font-style"];
+function inlineTextFonts(original, clone) {
+  const view = viewOf(original);
+  if (!view || typeof view.getComputedStyle !== "function") return;
+  const src = original.querySelectorAll("text");
+  const dst = clone.querySelectorAll("text");
+  if (src.length !== dst.length) return;
+  const n = Math.min(src.length, MAX_STYLED_ELEMENTS);
+  for (let i = 0; i < n; i++) {
+    let cs;
+    try {
+      cs = view.getComputedStyle(src[i]);
+    } catch {
+      continue;
+    }
+    const style = dst[i].style;
+    if (!style) continue;
+    for (const prop of TEXT_FONT_PROPS) {
+      const v = cs.getPropertyValue(prop);
+      if (v && !style.getPropertyValue(prop)) style.setProperty(prop, v);
+    }
+  }
+}
+function svgToDataUrl(svg) {
+  const cloned = svg.cloneNode(true);
+  const w = svg.clientWidth || svg.getBoundingClientRect && svg.getBoundingClientRect().width || 600;
+  const h = svg.clientHeight || svg.getBoundingClientRect && svg.getBoundingClientRect().height || 400;
+  cloned.setAttribute("width", String(Math.round(w)));
+  cloned.setAttribute("height", String(Math.round(h)));
+  if (!cloned.getAttribute("xmlns")) cloned.setAttribute("xmlns", SVG_NS);
+  try {
+    inlineTextFonts(svg, cloned);
+  } catch {
+  }
+  return "data:image/svg+xml;base64," + toBase64(new XMLSerializer().serializeToString(cloned));
+}
+function tableHostOf(root) {
+  if (!root || typeof root.querySelector !== "function") return null;
+  if (root.namespaceURI === SVG_NS) return null;
+  const firstSvg = root.querySelector("svg");
+  for (const sel of [".lch-table-frame", "table"]) {
+    const host = root.querySelector(sel);
+    if (host && (!firstSvg || host.contains(firstSvg))) return host;
+  }
+  return null;
+}
+function chartSvgOf(root) {
+  if (!root || typeof root.querySelector !== "function") return null;
+  return root.querySelector(`svg[${SNAPSHOT_SVG_ATTR}]`) ?? root.querySelector("svg");
+}
+function inlinePx(v) {
+  const m = /^\s*([0-9.]+)px\s*$/.exec(v || "");
+  return m ? parseFloat(m[1]) : 0;
+}
+function htmlNaturalSize(el) {
+  const r = el.getBoundingClientRect ? el.getBoundingClientRect() : null;
+  const w = el.clientWidth || r && r.width || inlinePx(el.style && el.style.width) || 600;
+  const h = el.clientHeight || r && r.height || inlinePx(el.style && el.style.height) || 400;
+  return { width: Math.round(w), height: Math.round(h) };
+}
+var HTML_STYLE_PROPS = [
+  "display",
+  "box-sizing",
+  "width",
+  "height",
+  "margin-top",
+  "margin-right",
+  "margin-bottom",
+  "margin-left",
+  "padding-top",
+  "padding-right",
+  "padding-bottom",
+  "padding-left",
+  "border-top-width",
+  "border-right-width",
+  "border-bottom-width",
+  "border-left-width",
+  "border-top-style",
+  "border-right-style",
+  "border-bottom-style",
+  "border-left-style",
+  "border-top-color",
+  "border-right-color",
+  "border-bottom-color",
+  "border-left-color",
+  "border-collapse",
+  "border-spacing",
+  "background-color",
+  "color",
+  "opacity",
+  "font-family",
+  "font-size",
+  "font-weight",
+  "font-style",
+  "line-height",
+  "letter-spacing",
+  "text-align",
+  "vertical-align",
+  "white-space",
+  "text-overflow",
+  "text-decoration-line",
+  "flex-direction",
+  "flex-wrap",
+  "flex-grow",
+  "flex-shrink",
+  "flex-basis",
+  "align-items",
+  "justify-content",
+  "position",
+  "top",
+  "right",
+  "bottom",
+  "left"
+];
+function inlineHtmlStyles(original, clone) {
+  const view = viewOf(original);
+  if (!view || typeof view.getComputedStyle !== "function") return;
+  const src = [original, ...Array.from(original.querySelectorAll("*"))];
+  const dst = [clone, ...Array.from(clone.querySelectorAll("*"))];
+  if (src.length !== dst.length) return;
+  let styled = 0;
+  for (let i = 0; i < src.length && styled < MAX_STYLED_ELEMENTS; i++) {
+    const o = src[i], c = dst[i];
+    if (o.namespaceURI !== XHTML_NS || !c.style) continue;
+    let cs;
+    try {
+      cs = view.getComputedStyle(o);
+    } catch {
+      continue;
+    }
+    for (const prop of HTML_STYLE_PROPS) {
+      const v = cs.getPropertyValue(prop);
+      if (v) c.style.setProperty(prop, v);
+    }
+    c.style.setProperty("overflow", "hidden");
+    styled++;
+  }
+  try {
+    inlineTextFonts(original, clone);
+  } catch {
+  }
+}
+function htmlToSvgDataUrl(el) {
+  const { width, height } = htmlNaturalSize(el);
+  const clone = el.cloneNode(true);
+  inlineHtmlStyles(el, clone);
+  clone.style.setProperty("width", `${width}px`);
+  clone.style.setProperty("height", `${height}px`);
+  clone.style.setProperty("margin", "0");
+  let xhtml = new XMLSerializer().serializeToString(clone);
+  if (!/^<[^>]*\sxmlns=/.test(xhtml)) xhtml = xhtml.replace(/^<([a-zA-Z0-9-]+)/, `<$1 xmlns="${XHTML_NS}"`);
+  const svg = `<svg xmlns="${SVG_NS}" width="${width}" height="${height}" viewBox="0 0 ${width} ${height}"><foreignObject x="0" y="0" width="${width}" height="${height}">${xhtml}</foreignObject></svg>`;
+  return { url: "data:image/svg+xml;base64," + toBase64(svg), width, height };
+}
+function svgNaturalSize(svg) {
+  const w = svg.clientWidth || svg.getBoundingClientRect && svg.getBoundingClientRect().width || 600;
+  const h = svg.clientHeight || svg.getBoundingClientRect && svg.getBoundingClientRect().height || 400;
+  return { width: Math.round(w), height: Math.round(h) };
+}
+function rasterizeSvgToPngDataUrl(svgDataUrl, width, height, opts = {}) {
+  const timeoutMs = opts.timeoutMs ?? DEFAULT_TIMEOUT_MS;
+  return new Promise((resolve) => {
+    let img;
+    try {
+      img = new Image();
+    } catch (e) {
+      opts.onWarn?.("snapshot-no-image", e instanceof Error ? e.message : String(e));
+      resolve(null);
+      return;
+    }
+    const timer = setTimeout(() => {
+      opts.onWarn?.("snapshot-raster-timeout", { width, height, timeoutMs });
+      resolve(null);
+    }, timeoutMs);
+    img.onload = () => {
+      clearTimeout(timer);
+      try {
+        const cap = opts.maxSide && opts.maxSide > 0 ? opts.maxSide : Math.max(width, height);
+        const scale = Math.min(1, cap / Math.max(width, height));
+        const cw = Math.max(1, Math.round(width * scale));
+        const ch = Math.max(1, Math.round(height * scale));
+        const canvas = document.createElement("canvas");
+        canvas.width = cw;
+        canvas.height = ch;
+        const c2d = canvas.getContext("2d");
+        if (!c2d) {
+          resolve(null);
+          return;
+        }
+        c2d.fillStyle = "white";
+        c2d.fillRect(0, 0, cw, ch);
+        c2d.drawImage(img, 0, 0, cw, ch);
+        resolve(canvas.toDataURL("image/png"));
+      } catch (e) {
+        opts.onWarn?.("snapshot-raster-draw", e instanceof Error ? e.message : String(e));
+        resolve(null);
+      }
+    };
+    img.onerror = () => {
+      clearTimeout(timer);
+      opts.onWarn?.("snapshot-raster-decode", { width, height });
+      resolve(null);
+    };
+    img.src = svgDataUrl;
+  });
+}
+async function captureSvgSnapshot(root, opts = {}) {
+  if (!root) return null;
+  const table = root instanceof SVGSVGElement ? null : tableHostOf(root);
+  const svg = table ? null : root instanceof SVGSVGElement ? root : chartSvgOf(root);
+  if (!table && !svg) return null;
+  let svgUrl;
+  let width, height;
+  try {
+    if (table) {
+      const r = htmlToSvgDataUrl(table);
+      svgUrl = r.url;
+      width = r.width;
+      height = r.height;
+    } else {
+      svgUrl = svgToDataUrl(svg);
+      ({ width, height } = svgNaturalSize(svg));
+    }
+  } catch (e) {
+    opts.onWarn?.("snapshot-serialize", e instanceof Error ? e.message : String(e));
+    return null;
+  }
+  try {
+    const png = await rasterizeSvgToPngDataUrl(svgUrl, width, height, opts);
+    return png || svgUrl;
+  } catch (e) {
+    opts.onWarn?.("snapshot-raster-unexpected", e instanceof Error ? e.message : String(e));
+    return svgUrl;
+  }
+}
+
+export {
+  svgToDataUrl,
+  tableHostOf,
+  chartSvgOf,
+  htmlNaturalSize,
+  htmlToSvgDataUrl,
+  svgNaturalSize,
+  rasterizeSvgToPngDataUrl,
+  captureSvgSnapshot
+};