@infinityfx/lively 4.0.0-beta.7 → 4.0.0-beta.9
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/animatable.js +1 -1
- package/dist/core/cache.js +1 -1
- package/dist/core/cache.js.map +1 -1
- package/dist/layout/layout-group.js +1 -1
- package/dist/layout/morph.js +1 -1
- package/dist/types/animatable.d.ts +1 -1
- package/dist/types/layout/layout-group.d.ts +2 -5
- package/dist/types/layout/morph.d.ts +6 -0
- package/package.json +1 -1
package/dist/animatable.js
CHANGED
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import{__rest as e}from"tslib";import{jsx as n}from"react/jsx-runtime";import{createContext as r,useRef as t,use as i,useMemo as
|
|
2
|
+
import{__rest as e}from"tslib";import{jsx as n}from"react/jsx-runtime";import{createContext as r,useRef as t,use as i,useMemo as o,useCallback as a,useImperativeHandle as s,useEffect as u,Children as l,isValidElement as c,cloneElement as d}from"react";import m from"./core/clip.js";import f from"./core/timeline.js";import{merge as p,pick as h,combineRefs as v}from"./core/utils.js";import g from"./hooks/use-mount-effect.js";const y=r(null);function b(r){const b=t(null),j=t([]),x=i(y),w=r.inherit&&x?p({},r,h(x,["group","animations","triggers","animate","initial","stagger","staggerLimit","deform","disabled","paused"])):r,{id:O="",inherit:k,triggers:L=[],disabled:E,adaptive:z=!1,manual:A=!1,paused:C}=w,M=void 0!==r.order?r.order:(k&&(null==x?void 0:x.index)||0)+1,D=t([]),T=o((()=>{const e={animate:m.from(w.animate,w.initial)};for(const n in w.animations)e[n]=m.from(w.animations[n],w.initial);return e}),[]),V=t(new f(Object.assign(Object.assign({},w),{mountClips:L.reduce(((e,{name:n,on:r})=>("mount"===r&&e.push(T[n||"animate"]),e)),[])}))),q=a(((e,n={},t=1)=>{var i;const o=T[e];if(E||M>1&&t<2)return 0;p(n,{reverse:null==o?void 0:o.reverse});let a=0,s=n.delay||0,u=o?V.current.time(o):0;for(const r of j.current)(null===(i=r.current)||void 0===i?void 0:i.inherit)&&(a=Math.max(r.current.play(e,p({delay:s+u},n),t+1),a));const l=(n.reverse?a:s)*(M/t);return o&&V.current.add(o,p({delay:l},n)),r.onAnimationEnd&&setTimeout(r.onAnimationEnd.bind({},e),1e3*(u+l)),u+l}),[E,M]);function B(n,r={}){let t=0;for(let i of L){const{name:o,on:a}=i,s=e(i,["name","on"]);a===n&&(t=Math.max(q(o||"animate",p(s,r)),t))}return t}return s(v(b,r.ref),(()=>({play:q,trigger:B,timeline:V.current,children:j.current,inherit:k,adaptive:z,group:w.group,id:O})),[L]),u((()=>V.current.pause(!(!C&&!E))),[C,E]),u((()=>{for(let n=0;n<L.length;n++){let r=L[n],{name:t,on:i}=r,o=e(r,["name","on"]);if("string"==typeof i)continue;const a="boolean"==typeof i?i:i.called,s=D.current[n];void 0!==s&&a&&a!==s&&q(t||"animate",o),D.current[n]=a}}),[L]),g((()=>{const e=()=>V.current.cache();return V.current.link(w.animate),window.addEventListener("resize",e),null==x||x.add(b),document.fonts.ready.then((()=>{A||V.current.mounted||B("mount"),V.current.mounted=!0})),()=>{window.removeEventListener("resize",e),V.current.unlink(),null==x||x.remove(b)}}),[]),n(y,{value:Object.assign(Object.assign({},r.passthrough?x:Object.assign({index:M},w)),{add:e=>{r.passthrough&&(null==x||x.add(e)),j.current.includes(e)||j.current.push(e)},remove:e=>{r.passthrough&&(null==x||x.remove(e));const n=j.current.indexOf(e)||-1;n>=0&&j.current.splice(n,1)}}),children:l.map(r.children,(e=>c(e)?d(e,{ref:v((e=>V.current.insert(e)),e.props.ref),pathLength:1,style:p({backfaceVisibility:"hidden",willChange:"transform"},e.props.style,T.animate.initial,{strokeDasharray:1}),"data-lively-offset-boundary":!(!["x","y"].some((e=>{var n;return null===(n=r.cachable)||void 0===n?void 0:n.includes(e)}))&&void 0!==r.cachable)||void 0}):e))})}b.isLively=!0;export{y as AnimatableContext,b as default};
|
|
3
3
|
//# sourceMappingURL=animatable.js.map
|
package/dist/core/cache.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import e from"./clip.js";class t{constructor(e,t=["x","y","sx","sy","borderRadius","backgroundColor","color","rotate"
|
|
1
|
+
import e from"./clip.js";class t{constructor(e,t=["x","y","sx","sy","borderRadius","backgroundColor","color","rotate"]){this.element=e,this.include=t.map((e=>"strokeLength"===e?"strokeDashoffset":e)),this.computed=getComputedStyle(e),this.data=this.read()}read(){const e={};for(const t of this.include)e[t]=this.computed[t];if(this.element instanceof SVGElement)return e;e.sx=this.element.offsetWidth,e.sy=this.element.offsetHeight,e.x=e.sx/2,e.y=e.sy/2;let t=this.element;for(;t&&(e.x+=t.offsetLeft,e.y+=t.offsetTop,t=t.offsetParent,!(null==t?void 0:t.dataset.livelyOffsetBoundary)););return e}update(){this.data=this.read()}difference(t=this.data,{duration:s=.5,easing:o="ease",reverse:i=!1}){const a=this.read(),r=[[1,1],[1,1]],n=[["0px","0px"],["0px","0px"]],c={duration:s,easing:o,reverse:i,composite:"combine"},d=Object.assign(Object.assign({},c),{composite:"override"});for(const e of this.include)switch(e){case"x":case"y":n[0]["x"==e?0:1]=t[e]-a[e]+"px";break;case"sx":case"sy":r[0]["sx"==e?0:1]=0===a[e]?1:t[e]/a[e];break;default:d[e]=[t[e],a[e]]}return c.scale=r.map((e=>e.join(" "))),c.translate=n.map((e=>e.join(" "))),[new e(c),new e(d)]}}export{t as StyleCache};
|
|
2
2
|
//# sourceMappingURL=cache.js.map
|
package/dist/core/cache.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"cache.js","sources":["../../src/core/cache.ts"],"sourcesContent":[null],"names":["StyleCache","constructor","element","include","this","map","key","computed","getComputedStyle","data","read","prop","SVGElement","sx","offsetWidth","sy","offsetHeight","x","y","parent","offsetLeft","offsetTop","offsetParent","dataset","livelyOffsetBoundary","update","difference","from","duration","easing","reverse","to","scale","translate","keyframes1","composite","keyframes2","Object","assign","val","join","Clip"],"mappings":"+BAeaA,EAOT,WAAAC,CAAYC,EAAmCC,EAAyB,CAAC,IAAK,IAAK,KAAM,KAAM,eAAgB,kBAAmB,QAAS,
|
|
1
|
+
{"version":3,"file":"cache.js","sources":["../../src/core/cache.ts"],"sourcesContent":[null],"names":["StyleCache","constructor","element","include","this","map","key","computed","getComputedStyle","data","read","prop","SVGElement","sx","offsetWidth","sy","offsetHeight","x","y","parent","offsetLeft","offsetTop","offsetParent","dataset","livelyOffsetBoundary","update","difference","from","duration","easing","reverse","to","scale","translate","keyframes1","composite","keyframes2","Object","assign","val","join","Clip"],"mappings":"+BAeaA,EAOT,WAAAC,CAAYC,EAAmCC,EAAyB,CAAC,IAAK,IAAK,KAAM,KAAM,eAAgB,kBAAmB,QAAS,WACvIC,KAAKF,QAAUA,EACfE,KAAKD,QAAUA,EAAQE,KAAIC,GAAe,iBAARA,EAAyB,mBAAqBA,IAChFF,KAAKG,SAAWC,iBAAiBN,GACjCE,KAAKK,KAAOL,KAAKM,MACpB,CAED,IAAAA,GACI,MAAMD,EAAO,CAAA,EAGb,IAAK,MAAME,KAAQP,KAAKD,QAASM,EAAKE,GAAQP,KAAKG,SAASI,GAE5D,GAAIP,KAAKF,mBAAmBU,WAAY,OAAOH,EAC/CA,EAAKI,GAAKT,KAAKF,QAAQY,YACvBL,EAAKM,GAAKX,KAAKF,QAAQc,aACvBP,EAAKQ,EAAIR,EAAKI,GAAK,EACnBJ,EAAKS,EAAIT,EAAKM,GAAK,EAEnB,IAAII,EAA6Bf,KAAKF,QACtC,KAAOiB,IACHV,EAAKQ,GAAKE,EAAOC,WACjBX,EAAKS,GAAKC,EAAOE,UAEjBF,EAASA,EAAOG,eACZH,aAAM,EAANA,EAAQI,QAAQC,yBAGxB,OAAOf,CACV,CAED,MAAAgB,GACIrB,KAAKK,KAAOL,KAAKM,MACpB,CAED,UAAAgB,CAAWC,EAAkBvB,KAAKK,MAAMmB,SAAEA,EAAW,GAAGC,OAAEA,EAAS,OAAMC,QAAEA,GAAU,IACjF,MAAMC,EAAK3B,KAAKM,OAEVsB,EAAQ,CAAC,CAAC,EAAG,GAAI,CAAC,EAAG,IACvBC,EAAY,CAAC,CAAC,MAAO,OAAQ,CAAC,MAAO,QACnCC,EAA6B,CAAEN,WAAUC,SAAQC,UAASK,UAAW,WACvEC,EAAkCC,OAAAC,OAAAD,OAAAC,OAAA,GAAAJ,IAAYC,UAAW,aAE7D,IAAK,MAAM7B,KAAOF,KAAKD,QACnB,OAAQG,GACJ,IAAK,IACL,IAAK,IACD2B,EAAU,GAAU,KAAP3B,EAAa,EAAI,GAAKqB,EAAKrB,GAAOyB,EAAGzB,GAAO,KACzD,MACJ,IAAK,KACL,IAAK,KACD0B,EAAM,GAAU,MAAP1B,EAAc,EAAI,GAAiB,IAAZyB,EAAGzB,GAAa,EAAIqB,EAAKrB,GAAOyB,EAAGzB,GACnE,MACJ,QAAS8B,EAAW9B,GAAO,CAACqB,EAAKrB,GAAeyB,EAAGzB,IAO3D,OAHA4B,EAAWF,MAAQA,EAAM3B,KAAIkC,GAAOA,EAAIC,KAAK,OAC7CN,EAAWD,UAAYA,EAAU5B,KAAIkC,GAAOA,EAAIC,KAAK,OAE9C,CAAC,IAAIC,EAAKP,GAAa,IAAIO,EAAKL,GAC1C"}
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import{jsx as r}from"react/jsx-runtime";import{
|
|
2
|
+
import{jsx as r}from"react/jsx-runtime";import{Children as e,isValidElement as t,useRef as n,useState as c}from"react";import i from"../animatable.js";import u from"../hooks/use-mount-effect.js";import{Groups as o}from"./morph.js";function d({children:d,transition:a}){var s;const l=e.toArray(d).filter((r=>t(r))),m=n(null),[f,h]=c({}),p=new Set,v=n([]),y=n(new Map),g=n(void 0),k=n(0),x=n(new Set);for(let r=0;r<l.length;r++){const e=l[r],t=e.type.isLively&&"id"in e.props?e.props.id:`__${r}`,n=v.current.findIndex((({key:r})=>r===t));n<0?y.current.set(t,{child:e,index:r}):v.current[n]={child:e,key:t},p.add(t)}y.current.forEach(((r,e)=>{p.has(e)||y.current.delete(e)}));for(const{key:r}of v.current)p.has(r)||x.current.add(r);if(x.current.size&&m.current){for(const r of m.current.children){const e=null===(s=r.current)||void 0===s?void 0:s.id,t=x.current.has(e);if(r.current&&(t&&p.has(e)&&(r.current.timeline.mounted=!0,x.current.delete(e)),t&&r.current.timeline.mounted)){const e=Date.now()+1e3*r.current.trigger("unmount",{immediate:!0});if(k.current=Math.max(k.current,e),r.current.group){const e=o[r.current.group].get(r.current.timeline);e&&(e.state="unmounted")}r.current.timeline.mounted=!1}}const r=k.current-Date.now();clearTimeout(g.current);const e=(r=!0)=>{x.current.forEach((r=>{const e=v.current.findIndex((({key:e})=>e===r));v.current.splice(e,1)})),x.current.clear(),r&&h({})};r>0?g.current=setTimeout(e,r):e(!1)}return x.current.size||(y.current.forEach((({child:r,index:e},t)=>{v.current.splice(e,0,{child:r,key:t})})),y.current.clear()),u((()=>{var r;if(m.current)for(const e of m.current.children)(null===(r=e.current)||void 0===r?void 0:r.id)&&e.current.timeline.mounted&&e.current.adaptive&&v.current.some((({key:r})=>r===e.current.id))&&e.current.timeline.transition(void 0,a)})),r(i,{ref:m,passthrough:!0,cachable:[],children:v.current.map((({child:r})=>r))})}export{d as default};
|
|
3
3
|
//# sourceMappingURL=layout-group.js.map
|
package/dist/layout/morph.js
CHANGED
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import{__rest as t}from"tslib";import{jsx as e}from"react/jsx-runtime";import{use as o,useRef as r}from"react";import n,{AnimatableContext as i}from"../animatable.js";import{combineRefs as s}from"../core/utils.js";import u from"../hooks/use-mount-effect.js";const m={};function a(a){var{children:l,group:c,transition:d}=a,f=t(a,["children","group","transition"]);const p=o(i),g=(null==p?void 0:p.group)?`${p.group}.${c}`:c;g in m||(m[g]=new Map);const v=r(null);return u((()=>{var t,e;const o=null===(t=v.current)||void 0===t?void 0:t.timeline;if(!o)return;if(m[g].has(o)){m[g].get(o).state="mounted"}else m[g].set(o,{state:"mounted"});const r=Array.from(m[g].entries()).find((([t,e])=>"unmounted"===e.state));return r&&!o.mounted?(o.transition(r[0],d),r[1].state="collected"):o.mounted||null===(e=v.current)||void 0===e||e.trigger("mount"),o.mounted=!0,()=>{const t=m[g].get(o);t.state="unmounted",setTimeout((()=>t.state="collected"),1)}}),[]),e(n,Object.assign({},f,{group:g,manual:!0,ref:s(v,f.ref),children:l}))}a.isLively=!0;export{a as default};
|
|
2
|
+
import{__rest as t}from"tslib";import{jsx as e}from"react/jsx-runtime";import{use as o,useRef as r}from"react";import n,{AnimatableContext as i}from"../animatable.js";import{combineRefs as s}from"../core/utils.js";import u from"../hooks/use-mount-effect.js";const m={};function a(a){var{children:l,group:c,transition:d}=a,f=t(a,["children","group","transition"]);const p=o(i),g=(null==p?void 0:p.group)?`${p.group}.${c}`:c;g in m||(m[g]=new Map);const v=r(null);return u((()=>{var t,e;const o=null===(t=v.current)||void 0===t?void 0:t.timeline;if(!o)return;if(m[g].has(o)){m[g].get(o).state="mounted"}else m[g].set(o,{state:"mounted"});const r=Array.from(m[g].entries()).find((([t,e])=>"unmounted"===e.state));return r&&!o.mounted?(o.transition(r[0],d),r[1].state="collected"):o.mounted||null===(e=v.current)||void 0===e||e.trigger("mount"),o.mounted=!0,()=>{const t=m[g].get(o);t.state="unmounted",setTimeout((()=>t.state="collected"),1)}}),[]),e(n,Object.assign({},f,{group:g,manual:!0,ref:s(v,f.ref),children:l}))}a.isLively=!0;export{m as Groups,a as default};
|
|
3
3
|
//# sourceMappingURL=morph.js.map
|
|
@@ -11,7 +11,7 @@ export type AnimatableType<T extends string = any> = {
|
|
|
11
11
|
children: React.RefObject<AnimatableType | null>[];
|
|
12
12
|
inherit: boolean | undefined;
|
|
13
13
|
adaptive: boolean;
|
|
14
|
-
|
|
14
|
+
group: string | undefined;
|
|
15
15
|
id: string;
|
|
16
16
|
};
|
|
17
17
|
type SharedProps<T extends string = any> = {
|
|
@@ -1,9 +1,6 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
-
import {
|
|
2
|
+
import type { TransitionOptions } from "../core/track";
|
|
3
3
|
export default function LayoutGroup({ children, transition }: {
|
|
4
4
|
children: React.ReactNode;
|
|
5
|
-
transition?:
|
|
6
|
-
duration?: number;
|
|
7
|
-
easing?: Easing;
|
|
8
|
-
};
|
|
5
|
+
transition?: Omit<TransitionOptions, 'reverse'>;
|
|
9
6
|
}): import("react/jsx-runtime").JSX.Element;
|
|
@@ -1,5 +1,11 @@
|
|
|
1
1
|
import { AnimatableProps } from "../animatable";
|
|
2
|
+
import Timeline from "../core/timeline";
|
|
2
3
|
import { TransitionOptions } from "../core/track";
|
|
4
|
+
export declare const Groups: {
|
|
5
|
+
[key: string]: Map<Timeline, {
|
|
6
|
+
state: 'mounted' | 'unmounted' | 'collected';
|
|
7
|
+
}>;
|
|
8
|
+
};
|
|
3
9
|
declare function Morph({ children, group, transition, ...props }: {
|
|
4
10
|
group: string;
|
|
5
11
|
transition?: Omit<TransitionOptions, 'reverse'>;
|