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

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

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