vue-data-ui/dist/dom-to-png-WXGPkYro.js

A user-empowering data visualization Vue 3 components library for eloquent data storytelling

import { X as x } from "./lib-2iaAPQ_c.js";
async function F(n) {
  const i = n.querySelectorAll("img"), s = Array.from(i).map((t) => new Promise((o) => {
    if (!t.src || t.src.startsWith("data:")) return o();
    if (t.complete && t.naturalWidth !== 0) {
      try {
        const e = document.createElement("canvas");
        e.width = t.naturalWidth, e.height = t.naturalHeight, e.getContext("2d").drawImage(t, 0, 0), t.src = e.toDataURL();
      } catch {
      }
      return o();
    }
    const c = new window.Image();
    c.crossOrigin = "anonymous", c.onload = function() {
      try {
        const e = document.createElement("canvas");
        e.width = c.naturalWidth, e.height = c.naturalHeight, e.getContext("2d").drawImage(c, 0, 0), t.src = e.toDataURL();
      } catch {
      }
      o();
    }, c.onerror = function() {
      o();
    }, c.src = t.src;
  }));
  await Promise.all(s);
}
function E(n) {
  n.querySelectorAll("[data-dom-to-png-ignore]").forEach((s) => {
    s.remove();
  });
}
function v(n, i, s) {
  const t = window.getComputedStyle(i), o = i.getBoundingClientRect(), c = t.display.includes("flex");
  let e = {}, a = n.getAttribute("style");
  typeof a != "string" && (a = ""), a.split(";").forEach((l) => {
    if (typeof l == "string" && l.trim()) {
      const [f, d] = l.split(":");
      f && d !== void 0 && (e[f.trim()] = d.trim());
    }
  });
  for (let l = 0; l < t.length; l += 1) {
    const f = t[l], d = t.getPropertyValue(f);
    e[f] = d;
  }
  e.color = t.color, e["background-color"] = t.backgroundColor;
  let r = t.fontFamily || s || "";
  (!r || r.trim() === "" || r === "inherit" || r === "initial" || r.toLowerCase().startsWith("system-ui") || r.toLowerCase() === "sans-serif" || r.toLowerCase() === "serif" || r.toLowerCase() === "monospace") && (r = "Helvetica, Arial, sans-serif"), e["font-family"] = r, e["font-size"] = t.fontSize, e["font-weight"] = t.fontWeight, (c || t.display.includes("grid") || ["inline-block", "absolute", "fixed"].includes(t.position)) && (o.width > 0 && (e.width = o.width + "px"), o.height > 0 && (e.height = o.height + "px")), c && t.flexWrap === "nowrap" && (e["white-space"] = "nowrap"), ["box-sizing", "padding", "margin", "border"].forEach((l) => {
    e[l] = t.getPropertyValue(l);
  }), e.overflow = "visible", e["overflow-x"] = "visible", e["overflow-y"] = "visible";
  let u = "";
  for (const l in e)
    u += `${l}:${e[l]};`;
  n.setAttribute("style", u);
  const m = n.children || [], p = i.children || [];
  for (let l = 0; l < m.length; l++)
    m[l].nodeType === 1 && p[l] && v(m[l], p[l], r);
}
function $(n, i) {
  n.querySelectorAll("text").forEach((t) => {
    t.setAttribute("font-family", i), t.style.fontFamily = i;
  });
}
function W(n) {
  const i = new TextEncoder().encode(n);
  let s = "";
  return i.forEach((t) => s += String.fromCharCode(t)), btoa(s);
}
function P(n, i, s) {
  let o = new XMLSerializer().serializeToString(n);
  o.match(/^<svg[^>]+xmlns="http\:\/\/www\.w3\.org\/2000\/svg"/) || (o = o.replace(/^<svg/, '<svg xmlns="http://www.w3.org/2000/svg"'));
  const c = window.btoa(unescape(encodeURIComponent(o))), e = new window.Image();
  return e.src = `data:image/svg+xml;base64,${c}`, new Promise((a, r) => {
    e.onload = function() {
      const u = document.createElement("canvas");
      u.width = i, u.height = s, u.getContext("2d").drawImage(e, 0, 0, i, s), a(u.toDataURL("image/png", 1));
    }, e.onerror = (u) => r(u);
  });
}
function R(n) {
  if (n.nodeType !== 1) return;
  const i = window.getComputedStyle(n);
  let s = "";
  for (let t = 0; t < i.length; t++) {
    const o = i[t];
    s += `${o}:${i.getPropertyValue(o)};`;
  }
  n.setAttribute("style", s);
  for (let t = 0; t < n.children.length; t++)
    R(n.children[t]);
}
function z() {
  const n = [];
  for (const i of document.styleSheets)
    try {
      const s = i.cssRules;
      if (!s) continue;
      for (const t of s)
        (typeof CSSFontFaceRule < "u" && t instanceof CSSFontFaceRule || t.cssText.trim().startsWith("@font-face")) && n.push(t.cssText);
    } catch {
      continue;
    }
  return n;
}
function M(n) {
  const i = z();
  if (!i.length) return;
  const s = document.createElement("style");
  s.setAttribute("type", "text/css"), s.textContent = i.join(`
`);
  const t = n.querySelector("defs") || document.createElementNS(x, "defs");
  t.appendChild(s), n.querySelector("defs") || n.insertBefore(t, n.firstChild);
}
function H(n, i) {
  const s = n.querySelectorAll("foreignObject"), t = i.querySelectorAll("foreignObject");
  s.forEach((o, c) => {
    const e = t[c];
    if (!e) return;
    function a(r, u) {
      if (!r || !u) return;
      if (r.nodeType === 1 && u.nodeType === 1) {
        const l = window.getComputedStyle(u);
        let f = "";
        for (let d = 0; d < l.length; d++) {
          const C = l[d];
          f += `${C}:${l.getPropertyValue(C)};`;
        }
        r.setAttribute("style", f);
      }
      const m = r.children || [], p = u.children || [];
      for (let l = 0; l < m.length; l++)
        a(m[l], p[l]);
    }
    a(o, e);
  });
}
function D(n) {
  n.querySelectorAll("foreignObject").forEach((s) => {
    let t = "";
    const o = Array.from(s.querySelectorAll("*"));
    if (o.length !== 0) {
      for (const c of document.styleSheets) {
        let e;
        try {
          e = c.cssRules;
        } catch {
          continue;
        }
        if (e) {
          for (const a of e)
            if (!(typeof CSSStyleRule < "u" && !(a instanceof CSSStyleRule)))
              try {
                o.some((r) => r.matches(a.selectorText)) && (t += a.cssText + `
`);
              } catch {
                continue;
              }
        }
      }
      if (t) {
        const c = document.createElement("style");
        c.textContent = t, s.insertBefore(c, s.firstChild);
      }
    }
  });
}
function U(n) {
  n.querySelectorAll("foreignObject").forEach((s) => {
    const t = s.firstElementChild;
    t && t.tagName.toLowerCase() !== "svg" && t.setAttribute("xmlns", "http://www.w3.org/1999/xhtml");
  });
}
function B(n, i) {
  const s = n.querySelectorAll("foreignObject"), t = i.querySelectorAll("foreignObject");
  s.forEach((o, c) => {
    const e = t[c];
    if (!o || !e) return;
    const a = o.firstElementChild, r = e.firstElementChild;
    a && r && j(a, r);
  });
}
function j(n, i) {
  if (n.nodeType !== 1 || !i) return;
  v(n, i);
  const s = n.children || [], t = i.children || [];
  for (let o = 0; o < s.length; o++)
    j(s[o], t[o]);
}
function O(n, i) {
  const s = Array.from(i.querySelectorAll("img"));
  n.querySelectorAll("img").forEach((t) => {
    const o = t.getAttribute("src"), c = s.find((e) => e.getAttribute("src") === o);
    if (c) {
      const e = window.getComputedStyle(c);
      let a = "";
      for (let r = 0; r < e.length; r++) {
        const u = e[r];
        a += `${u}:${e.getPropertyValue(u)};`;
      }
      t.setAttribute("style", a);
    }
  });
}
async function k({ container: n, scale: i = 2, base64: s = !1 }) {
  if (!n) throw new Error("No container provided");
  await document.fonts.ready;
  let t = window.getComputedStyle(n).fontFamily || "Helvetica";
  t.toLowerCase().includes("helvetica") || (t += ", Helvetica");
  const o = n.cloneNode(!0), c = o.querySelectorAll("canvas"), e = n.querySelectorAll("canvas");
  for (let y = 0; y < e.length; y += 1) {
    const g = e[y], h = c[y];
    if (g && h) {
      const w = document.createElement("img");
      w.src = g.toDataURL("image/png"), w.width = g.width, w.height = g.height, w.style.width = g.style.width || g.width + "px", w.style.height = g.style.height || g.height + "px", h.replaceWith(w);
    }
  }
  const a = n.querySelector("svg[aria-label]"), r = o.querySelector("svg[aria-label]");
  if (a && r) {
    U(r), D(r), H(r, a), B(r, a), R(r), $(r, t), O(r, a), await F(r);
    const y = a.getBoundingClientRect(), g = y.width, h = y.height, w = Math.round(g * i), T = Math.round(h * i), I = await P(r, w, T), S = document.createElement("img");
    S.src = I, S.width = g, S.height = h, S.style.width = g + "px", S.style.height = h + "px", r.parentNode.replaceChild(S, r);
  }
  v(o, n, t), O(o, n), E(o), await F(o);
  const { width: u, height: m } = n.getBoundingClientRect(), p = Math.round(Math.max(o.scrollWidth, u) * i), l = Math.round(Math.max(o.scrollHeight, m) * 1.01 * i), f = document.createElementNS(x, "svg");
  f.setAttribute("viewBox", `0 0 ${p} ${l}`), f.setAttribute("width", p), f.setAttribute("height", l), f.setAttribute("style", `font-family:${t};`);
  const d = document.createElementNS(x, "foreignObject");
  d.setAttribute("x", 0), d.setAttribute("y", 0), d.setAttribute("width", p), d.setAttribute("height", l), d.setAttribute("style", `font-family:${t};`), o.style.transform = `scale(${i})`, o.style.transformOrigin = "top left", o.style.width = u + "px", o.style.height = m + "px", o.style.background = window.getComputedStyle(n).backgroundColor, d.appendChild(o), M(f), f.appendChild(d);
  const q = new XMLSerializer().serializeToString(f), L = W(q), b = new window.Image();
  b.crossOrigin = "anonymous";
  const A = `data:image/svg+xml;base64,${L}`;
  return b.src = A, s ? new Promise((y) => {
    y(A);
  }) : new Promise((y, g) => {
    b.onload = function() {
      try {
        const h = document.createElement("canvas");
        h.width = p, h.height = l, h.getContext("2d").drawImage(b, 0, 0, p, l), y(h.toDataURL("image/png", 1));
      } catch (h) {
        g("Failed to draw SVG on canvas: " + h);
      }
    }, b.onerror = function() {
      g("Failed to load SVG image for conversion");
    };
  });
}
export {
  k as d
};