grapper/dist/plugins/animateto.js

Data Visualization Microframework

/* grapper - 1.1.0-beta.3 [plugin.animateto] */ (()=>{var B="function";var H="object",P="string";var g=(r,l)=>typeof r===l;var w=r=>g(r,H),x=r=>g(r,P),$=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",Y="path",_="d",I="transform",L="rotate",a="translate",M="inherit",C="finished",J=[L,"skewX","skewY"],W=[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,y=null){let D=this.gSVG,R=t=>{let n=w(t)?{...t}:{duration:t};return A&&(n.duration=0),n.fill="none",n},k=t=>{t=b(t)?t:[t];let n=window.getComputedStyle(this._el),i=[],e=new Set;for(let o of t){let s={};for(let f in o){let c=j(f);s[c]=u(o[f],c),!(c in n)||Z(this.tagName(),c)?e.add(c):c===_?s.d=`${Y}("${s.d}")`:c===I&&(s.transform=F(s.transform))}i.push(s)}return G(e,i),i},O=[],G=(t,n)=>{if(t.size){let i=new KeyframeEffect(null,n).getKeyframes();for(let e of t){let o=D(N).attributeName(e).dur(h.duration+"ms").fill("freeze").begin("indefinite");if(n.length===1)o.to(n[0][e]);else{let s=[],f=[];for(let c in i){let z=i[c];e in n[c]&&(s.push(z.computedOffset),f.push(n[c][e]))}s[0]!==0&&(s.unshift(0),f.unshift(this[e]()||M)),s[s.length-1]!==1&&(s.push(1),f.push(this[e]()||M)),o.keyTimes(s.join(";")).values(f.join(";"))}O.push(o),o.attachTo(this),o.beginElementAt((h.delay||0)/1e3)}}},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 n="";for(let i in t)if(i===L){let e=T(t[i]);e.length>1&&(n+=`${a}(${u(e[1],a)},${u(e[2],a)}) `),n+=`${i}(${u(e[0],i)}) `,e.length>1&&(n+=`${a}(-${u(e[1],a)},-${u(e[2],a)}) `)}else n+=`${i}(${T(t[i]).map(e=>u(e,i)).join(",")}) `;return n},T=t=>b(t)?t:String(t).split(/\s+|,/),u=(t,n)=>J.includes(n)?t+"deg":W.includes(n)?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 n=/translate\((.*)px,(.*)px\) rotate\((.*)deg\) translate\((.*)px,(.*)px\)\s+/,i=n.exec(t);return i&&Number(i[1])===Number(i[4])*-1&&Number(i[2])===Number(i[5])*-1?t=t.replace(n,`rotate(${i[3]}, ${i[1]}, ${i[2]})`):t=E(t),t},h=R(l),m=k(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 o=q(e);o.startsWith("text-")?this._el.style[e]=t[e]:e!=="offset"&&e in t&&this._el.setAttribute(o,o===_?U(t[e]):o===I?V(t[e]):E(t[e]))}O.forEach(e=>e[C](!0));let n=this._el.querySelectorAll(N),i=this._el.querySelectorAll(`${N}[${C}]`);n.length===i.length&&n.forEach(e=>e.remove()),$(y)&&y.call(this,d)}),this}function Q(r){r.extendInstance({animateTo:K})}var S=Q;globalThis.gSVG&&globalThis.gSVG.install(S);customElements.whenDefined("grapper-view").then(r=>{r.install(S)});})();