UNPKG

motion-dom

Version:
3 lines (2 loc) • 11.2 kB
const t=new WeakMap,e=t=>t.startsWith("--"),s=t=>180*t/Math.PI,n=t=>{const e=s(Math.atan2(t[1],t[0]));return i(e)},r={x:4,y:5,translateX:4,translateY:5,scaleX:0,scaleY:3,scaleZ:()=>1,scale:t=>(Math.abs(t[0])+Math.abs(t[3]))/2,rotate:n,rotateZ:n,skewX:t=>s(Math.atan(t[1])),skewY:t=>s(Math.atan(t[2])),skew:t=>(Math.abs(t[1])+Math.abs(t[2]))/2},i=t=>((t%=360)<0&&(t+=360),t),a=t=>Math.hypot(t[0],t[1]),o=t=>Math.hypot(t[4],t[5]),c={x:12,y:13,z:14,translateX:12,translateY:13,translateZ:14,scaleX:a,scaleY:o,scaleZ:t=>Math.hypot(t[8],t[9],t[10]),scale:t=>(a(t)+o(t))/2,rotateX:t=>i(s(Math.atan2(t[6],t[5]))),rotateY:t=>i(s(Math.atan2(-t[2],t[0]))),rotateZ:n,rotate:n,skewX:t=>s(Math.atan(t[4])),skewY:t=>s(Math.atan(t[1])),skew:t=>(Math.abs(t[1])+Math.abs(t[4]))/2};function h(t){return t.includes("scale")?1:0}const d=(t,e)=>{const{transform:s="none"}=getComputedStyle(t);return function(t,e){if(!t||"none"===t)return h(e);const s=t.match(/^matrix(3d)?\(([-\d.e\s,]+)\)$/u);if(!s)return h(e);const n=(s[1]?c:r)[e],i=s[2].split(",").map(t=>parseFloat(t));return"function"==typeof n?n(i):i[n]}(s,e)},u=["transformPerspective","x","y","z","translateX","translateY","translateZ","scale","scaleX","scaleY","scaleZ","rotate","rotateX","rotateY","rotateZ","skew","skewX","skewY"],l=(()=>new Set([...u,"pathRotation"]))();const p={},f=t=>"object"==typeof t&&null!==t;class g{constructor(){this.subscriptions=[]}add(t){var e,s;return e=this.subscriptions,s=t,-1===e.indexOf(s)&&e.push(s),()=>this.remove(t)}remove(t){!function(t,e){const s=t.indexOf(e);s>-1&&t.splice(s,1)}(this.subscriptions,t)}notify(t,e,s){const n=this.subscriptions.length;if(n)if(1===n)this.subscriptions[0](t,e,s);else for(let r=0;r<n;r++){const n=this.subscriptions[r];n&&n(t,e,s)}}getSize(){return this.subscriptions.length}clear(){this.subscriptions.length=0}}function m(t){return f(t)&&"offsetHeight"in t&&!("ownerSVGElement"in t)}const v=["setup","read","resolveKeyframes","preUpdate","update","preRender","render","postRender"];function b(t,e,s={delta:0,timestamp:0,isProcessing:!1}){let n=!1,r=!0;const i=()=>n=!0,a=v.reduce((t,e)=>(t[e]=function(t){let e,s=new Set,n=new Set,r=!1,i=!1;const a=new Set;let o={delta:0,timestamp:0,isProcessing:!1};function c(s){a.has(s)&&(n.add(s),t()),(e=s)(o)}const h={schedule:(t,i=!1,o=!1)=>{const c=o&&r,h=c?s:n;return i&&a.add(t),c&&t!==e&&h.delete(t),h.add(t),t},cancel:t=>{n.delete(t),a.delete(t)},process:t=>{if(o=t,r)return void(i=!0);r=!0;const a=s;s=n,n=a,s.forEach(c),s.clear(),e=void 0,r=!1,i&&(i=!1,h.process(t))}};return h}(i),t),{}),{setup:o,read:c,resolveKeyframes:h,preUpdate:d,update:u,preRender:l,render:f,postRender:g}=a,m=()=>{const i=p.useManualTiming,a=i?s.timestamp:performance.now();n=!1,i||(s.delta=r?1e3/60:Math.max(Math.min(a-s.timestamp,40),1)),s.timestamp=a,s.isProcessing=!0,o.process(s),c.process(s),h.process(s),d.process(s),u.process(s),l.process(s),f.process(s),g.process(s),s.isProcessing=!1,n&&e&&(r=!1,t(m))};return{schedule:v.reduce((e,i)=>{const o=a[i];return e[i]=(e,i=!1,a=!1)=>(n||(n=!0,r=!0,s.isProcessing||t(m)),o.schedule(e,i,a)),e},{}),cancel:t=>{for(let e=0;e<v.length;e++)a[v[e]].cancel(t)},state:s,steps:a}}const y={delta:0,timestamp:0,isProcessing:!1},{schedule:w}=b("undefined"!=typeof requestAnimationFrame?requestAnimationFrame:t=>t,!0,y);let k;function S(){k=void 0}const P={now:()=>(void 0===k&&P.set(y.isProcessing||p.useManualTiming?y.timestamp:performance.now()),k),set:t=>{k=t,queueMicrotask(S)}};class M{constructor(t,e={}){this.canTrackVelocity=null,this.events={},this.updateAndNotify=t=>{const e=P.now();if(this.updatedAt!==e&&this.setPrevFrameValue(),this.prev=this.current,this.setCurrent(t),this.current!==this.prev&&(this.dirty(),this.dependents))for(const t of this.dependents)t.dirty()},this.hasAnimated=!1,this.setCurrent(t),this.owner=e.owner}setCurrent(t){var e;this.current=t,this.updatedAt=P.now(),null===this.canTrackVelocity&&void 0!==t&&(this.canTrackVelocity=(e=this.current,!isNaN(parseFloat(e))))}setPrevFrameValue(t=this.current){this.prevFrameValue=t,this.prevUpdatedAt=this.updatedAt}onChange(t){return this.on("change",t)}on(t,e){var s;return"change"===t?this.onChangeSubscribe(e):((s=this.events)[t]||(s[t]=new g)).add(e)}onChangeSubscribe(t){const{events:e}=this;return e.change||this.changeSubscriber?(e.change||(e.change=new g,e.change.add(this.changeSubscriber),this.changeSubscriber=void 0),e.change.add(t)):this.changeSubscriber=t,()=>{this.changeSubscriber===t?this.changeSubscriber=void 0:e.change?.remove(t),this.stopIfUnobserved()}}stopIfUnobserved(){w.read(()=>{this.changeSubscriber||this.events.change?.getSize()||this.stop()})}clearListeners(){this.changeSubscriber=void 0;for(const t in this.events)this.events[t].clear()}attach(t,e){this.passiveEffect=t,this.stopPassiveEffect=e}set(t){this.passiveEffect?this.passiveEffect(t,this.updateAndNotify):this.updateAndNotify(t)}setWithVelocity(t,e,s){this.set(e),this.prev=void 0,this.prevFrameValue=t,this.prevUpdatedAt=this.updatedAt-s}jump(t,e=!0){e&&(this.updatedAt=P.now(),this.stop()),this.updateAndNotify(t),this.prev=t,this.prevUpdatedAt=this.prevFrameValue=void 0,this.stopPassiveEffect?.()}dirty(){const{current:t,changeSubscriber:e}=this;e?e(t):this.events.change?.notify(t)}addDependent(t){(this.dependents||(this.dependents=new Set)).add(t)}removeDependent(t){this.dependents?.delete(t)}get(){const t=this.animation?.liveValue?.();return void 0===t?this.current:t}getCurrent(){return this.current}getPrevious(){return this.prev}getVelocity(){const t=P.now();if(!this.canTrackVelocity||void 0===this.prevFrameValue||t-this.updatedAt>30)return 0;const e=Math.min(this.updatedAt-this.prevUpdatedAt,30);return s=parseFloat(this.current)-parseFloat(this.prevFrameValue),(n=e)?s*(1e3/n):0;var s,n}start(t){return new Promise(e=>this.run(t,e))}run(t,e){this.stop(),this.hasAnimated=!0;let s,n=!1;s=t(()=>{n=!0,this.events.animationComplete?.notify(),this.animation===s&&(this.animation=void 0),e?.()}),n||(this.animation=s),this.events.animationStart?.notify()}stop(){this.animation&&(this.animation.stop(),this.events.animationCancel?.notify()),this.animation=void 0}isAnimating(){return!!this.animation}destroy(){this.dependents?.clear(),this.events.destroy?.notify(),this.clearListeners(),this.stop(),this.stopPassiveEffect?.()}}const A={test:t=>"number"==typeof t,parse:parseFloat,transform:t=>t},R={...A,transform:t=>((t,e,s)=>s>e?e:s<t?t:s)(0,1,t)},V={...A,default:1},X={...A,transform:Math.round},Y=t=>({test:e=>"string"==typeof e&&e.endsWith(t)&&1===e.split(" ").length,parse:parseFloat,transform:e=>`${e}${t}`}),x=Y("deg"),E=Y("%"),B=Y("px"),F=(()=>({...E,parse:t=>E.parse(t)/100,transform:t=>E.transform(100*t)}))(),Z={rotate:x,pathRotation:x,rotateX:x,rotateY:x,rotateZ:x,scale:V,scaleX:V,scaleY:V,scaleZ:V,skew:x,skewX:x,skewY:x,distance:B,translateX:B,translateY:B,translateZ:B,x:B,y:B,z:B,perspective:B,transformPerspective:B,opacity:R,originX:F,originY:F,originZ:B},C={borderWidth:B,borderTopWidth:B,borderRightWidth:B,borderBottomWidth:B,borderLeftWidth:B,borderRadius:B,borderTopLeftRadius:B,borderTopRightRadius:B,borderBottomRightRadius:B,borderBottomLeftRadius:B,width:B,maxWidth:B,height:B,maxHeight:B,top:B,right:B,bottom:B,left:B,inset:B,insetBlock:B,insetBlockStart:B,insetBlockEnd:B,insetInline:B,insetInlineStart:B,insetInlineEnd:B,padding:B,paddingTop:B,paddingRight:B,paddingBottom:B,paddingLeft:B,paddingBlock:B,paddingBlockStart:B,paddingBlockEnd:B,paddingInline:B,paddingInlineStart:B,paddingInlineEnd:B,margin:B,marginTop:B,marginRight:B,marginBottom:B,marginLeft:B,marginBlock:B,marginBlockStart:B,marginBlockEnd:B,marginInline:B,marginInlineStart:B,marginInlineEnd:B,fontSize:B,backgroundPositionX:B,backgroundPositionY:B,...Z,zIndex:X,fillOpacity:R,strokeOpacity:R,numOctaves:X},I=(t,e)=>e&&"number"==typeof t?e.transform(t):t,O={};function T(t){const{test:e,read:s,get:n,flush:r,state:i}=t;return Object.assign((e,s)=>{const n=function(t){if(null==t)return[];if(t instanceof EventTarget)return[t];if("string"==typeof t){const e=(O.current?.root||document).querySelectorAll(t);return e?Array.from(e):[]}return Array.from(t).filter(t=>null!=t)}(e),r=[];for(const e of n){const n=t(e,s);r.push(n)}return()=>{for(const t of r)t()}},{test:e,read:s,get:n,flush:r,state:i})}class W{constructor(t=w.render){this.step=t,this.values=new Map,this.pending=[],this.numPending=0,this.flush=()=>{const{pending:t,numPending:e}=this;this.numPending=0;for(let s=0;s<e;s++)t[s]()}}set(t,e,s,n){if(this.values.get(t)?.onRemove(),n)for(const t of this.values.values())t.value===n&&(s=t.render);const r=()=>s&&this.schedule(s);void 0!==e.get()&&r();const i=e.on("change",r),a=()=>{i(),s&&!n&&this.cancel(s),this.values.get(t)?.onRemove===a&&this.values.delete(t)};return this.values.set(t,{value:e,render:n?void 0:s,onRemove:a}),a}get(t){return this.values.get(t)?.value}release(){const t=new Map;return this.values.forEach((e,s)=>{t.set(s,e.value),e.onRemove()}),this.transformKeys=this.transformValues=void 0,t}schedule(t){const{pending:e,numPending:s}=this;for(let n=0;n<s;n++)if(e[n]===t)return;s||this.step(this.flush),e[this.numPending++]=t}cancel(t){const{pending:e}=this;for(let s=0;s<this.numPending;s++)if(e[s]===t)return void(e[s]=e[--this.numPending])}}function z(t,{step:e,...s}={}){const n=new WeakMap;return Object.assign((s,r)=>{const i=n.get(s)??new W(e);n.set(s,i);const a=[];for(const e in r){const n=r[e],o=t(s,i,e,n);a.push(o)}return()=>{for(const t of a)t()}},s,{get:(t,e)=>n.get(t)?.get(e),flush:t=>n.get(t)?.flush(),state:t=>n.get(t)})}const U={x:"translateX",y:"translateY",z:"translateZ",transformPerspective:"perspective"},L={},K=(t,e,s=I(e,Z[t]))=>(L[t]||(L[t]=(U[t]||t)+"("))+s+")",N=(t,e)=>("number"==typeof e?e:parseFloat(e))===(t.startsWith("scale")?1:0);const $=new Set(["originX","originY","originZ"]),j=(t,e)=>I(t.get(e)?.get(),C[e]),q=(s,n,r,i)=>{let a,o;if(l.has(r)){if("pathRotation"!==r){const t=n.transformKeys??(n.transformKeys=[]);(n.transformValues??(n.transformValues={}))[r]=i,t.includes(r)||(t.push(r),t.sort((t,e)=>u.indexOf(t)-u.indexOf(e)))}n.get("transform")||(m(s)||n.get("transformBox")||q(s,n,"transformBox",new M("fill-box")),n.set("transform",new M("none"),()=>{t.get(s)?.check(),s.style.transform=function(t){let e="";const{transformKeys:s=[],transformValues:n={}}=t;for(let t=0;t<s.length;t++){const r=s[t],i=n[r].getCurrent();void 0!==i&&(N(r,i)||(e+=(e&&" ")+K(r,i)))}const r=t.get("pathRotation")?.get();return r&&(e+=(e&&" ")+K("rotate",r)),e||"none"}(n)})),o=n.get("transform")}else $.has(r)?(n.get("transformOrigin")||n.set("transformOrigin",new M(""),()=>{const t=j(n,"originX")??"50%",e=j(n,"originY")??"50%",r=j(n,"originZ")??0;s.style.transformOrigin=`${t} ${e} ${r}`}),o=n.get("transformOrigin")):a=e(r)?()=>{s.style.setProperty(r,i.getCurrent())}:()=>{s.style[r]=I(i.getCurrent(),C[r])};return n.set(r,i,a,o)},D=(t,s)=>{if(l.has(s))return d(t,s);const n=getComputedStyle(t),r=e(s)?n.getPropertyValue(s):n[s];return"string"==typeof r&&r.trim()||0},G=z(q,{test:t=>{return m(t)||f(e=t)&&"ownerSVGElement"in e;var e},read:D}),H=T(G);export{q as addStyleValue,$ as originProps,D as readStyleValue,H as styleEffect,G as styleSubjectEffect}; //# sourceMappingURL=size-rollup-style-effect.js.map