graphane/dist/plugins/animateto.js

Data Visualization Microframework

/* graphane - 1.0.1 [plugin.animateto] */ (()=>{var B="function";var H="object",J="string";var g=(r,l)=>typeof r===l;var w=r=>g(r,H),x=r=>g(r,J),$=r=>g(r,B);var b=r=>Array.isArray(r);var j=r=>r.replace(/-([a-z0-9])/g,(l,p)=>p.toUpperCase());var N="animate",P="path",_="d",I="transform",k="rotate",a="translate",D="inherit",L="finished",W=[k,"skewX","skewY"],Y=[a,"width","height","x","y","cx","cy","r","rx","ry","dx","dy"],Z=(r,l)=>["text","tspan"].includes(r)&&["x","y"].includes(l),A=!1;if(window.matchMedia){let r=window.matchMedia("(prefers-reduced-motion: reduce)");A=r.matches,r.addEventListener("change",()=>{A=r.matches})}var q=r=>r.replace(/([A-Z])/g,"-$1").toLowerCase();function K(r,l={duration:200},p=null,S=null){let C=this.gSVG,M=t=>{let e=w(t)?{...t}:{duration:t};return A&&(e.duration=0),e.fill="none",e},R=t=>{t=b(t)?t:[t];let e=window.getComputedStyle(this._el),n=[],i=new Set;for(let c of t){let s={};for(let f in c){let o=j(f);s[o]=u(c[f],o),!(o in e)||Z(this.tagName(),o)?i.add(o):o===_?s.d=`${P}("${s.d}")`:o===I&&(s.transform=F(s.transform))}n.push(s)}return G(i,n),n},O=[],G=(t,e)=>{if(t.size){let n=new KeyframeEffect(null,e).getKeyframes();for(let i of t){let c=C(N).attributeName(i).dur(h.duration+"ms").fill("freeze");if(e.length===1)c.to(e[0][i]);else{let s=[],f=[];for(let o in n){let z=n[o];i in e[o]&&(s.push(z.computedOffset),f.push(e[o][i]))}s[0]!==0&&(s.unshift(0),f.unshift(this[i]()||D)),s[s.length-1]!==1&&(s.push(1),f.push(this[i]()||D)),c.keyTimes(s.join(";")).values(f.join(";"))}O.push(c),c.attachTo(this),c.beginElementAt(h.delay||0)}}},F=t=>{x(t)&&(t=JSON.parse("{"+t.replace(/\s*\(\s*/g,":[").replace(/\s*\)\s*/g,"],").split(/\s*,\s*|\s.*/).join(",").replace(/(\w+):/g,'"$1":').replace(/,$/,"")+"}"));let e="";for(let n in t)if(n===k){let i=T(t[n]);i.length>1&&(e+=`${a}(${u(i[1],a)},${u(i[2],a)}) `),e+=`${n}(${u(i[0],n)}) `,i.length>1&&(e+=`${a}(-${u(i[1],a)},-${u(i[2],a)}) `)}else e+=`${n}(${T(t[n]).map(i=>u(i,n)).join(",")}) `;return e},T=t=>b(t)?t:String(t).split(/\s+|,/),u=(t,e)=>W.includes(e)?t+"deg":Y.includes(e)?t+"px":t,E=t=>x(t)?t.replace(/(deg)|(px)/g,"").trim():t,U=t=>t.replace(/(path\s*\(\s*["'])|(["']\s*\)\s*$)/g,"").trim().replace(/([a-zA-Z])\s*/g,"$1").replace(/\s+/g,","),V=t=>{let e=/translate\((.*)px,(.*)px\) rotate\((.*)deg\) translate\((.*)px,(.*)px\)\s+/,n=e.exec(t);return n&&Number(n[1])===Number(n[4])*-1&&Number(n[2])===Number(n[5])*-1?t=t.replace(e,`rotate(${n[3]}, ${n[1]}, ${n[2]})`):t=E(t),t},h=M(l),m=R(r),d=this._el.animate(m,h);return d.ready.then(()=>$(p)&&p.call(this,d)),d.finished.then(()=>{let t=m[m.length-1];for(let e in t){let n=q(e);n.startsWith("text-")?this._el.style[e]=t[e]:e!=="offset"&&e in t&&this._el.setAttribute(n,n===_?U(t[e]):n===I?V(t[e]):E(t[e]))}O.forEach(e=>{e[L](!0);let n=this._el.querySelectorAll(N),i=this._el.querySelectorAll(`${N}[${L}]`);n.length===i.length&&n.forEach(c=>c.remove())}),$(S)&&S.call(this,d)}),this}function Q(r){r.extendInstance({animateTo:K})}var y=Q;globalThis.gSVG&&globalThis.gSVG.install(y);customElements.whenDefined("g-composer").then(r=>{r.install(y)});})();