vue-data-ui/dist/dom-to-png-CNF-s1oi.cjs

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

"use strict";const x=require("./index-B7zOq_yO.cjs");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 M(){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 W(n){const i=M();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.XMLNS,"defs");t.appendChild(o),n.querySelector("defs")||n.insertBefore(t,n.firstChild)}function P(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 z(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 U({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),z(c),P(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.XMLNS,"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.XMLNS,"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),W(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")}})}exports.domToPng=U;