framer-motion-theatre - npm Package Compare versions

Comparing version 0.1.8 to 0.1.9

dist/main.js

@@ -1,2 +0,2 @@
-import{createContext as x,useContext as v,useEffect as c,useMemo as L,useState as d}from"react";import{onChange as K,createRafDriver as U}from"@theatre/core";import{cancelFrame as F,frame as D,motionValue as O}from"framer-motion";import T from"@theatre/studio";import{jsx as g}from"react/jsx-runtime";var V=U({name:"framer-motion-theatre"}),S=x(null),te=({project:s,studio:n,children:l,theme:e})=>{let a={normalColor:"rgb(173, 173, 173)",selectedColor:"rgb(79, 167, 255)",fillOpacity:.2,width:3};c(()=>{let p=({timestamp:f})=>{V.tick(f)};return D.update(p,!0),()=>F(p)},[]);let b=L(()=>{if(n!=="auto"&&n)return n;if(process.env.NODE_ENV==="development"&&n==="auto")return T.initialize(),T},[n]);return g(S.Provider,{value:{project:s,studio:b,gizmoTheme:e??a},children:l})};function oe(){let{project:s,studio:n}=v(S);return{project:s,studio:n}}var E=x(null);function ne(s,n){return l=>{let{project:e}=v(S),[a]=d(()=>e.sheet(s,l.animationId));return g(E.Provider,{value:{sheet:a},children:g(n,{...l})})}}var z=()=>{};function I(s,n){return()=>{n.setSelection([s])}}function re(s,n){let{sheet:l}=v(E),{studio:e,gizmoTheme:a}=v(S),[b,p]=d(!1),[f,C]=d(!1),[t,w]=d(null),[m,j]=d(),[y,k]=d(!1),[u,G]=d(()=>l.object(s,n,{reconfigure:!0})),[h,R]=d(()=>{let o={};for(let r in u.value)o[r]=O(u.value[r]);return o}),[P,M]=d(()=>e?I(u,e):z);c(()=>{e?(M(()=>I(u,e)),C(e.selection.includes(u)),e.onSelectionChange(o=>{C(o.includes(u))})):(M(z),C(!1))},[u,e]);let H=L(()=>({...h,$studio:{isSelected:f,select:P,setSelectionTarget:w}}),[h,P,f]);return c(()=>{R(o=>{let r={};for(let i in u.value)o[i]?r[i]=o[i]:r[i]=O(u.value[i]);return r})},[u]),c(()=>K(u.props,r=>{for(let i in r)h[i]&&h[i].set(r[i])},V),[u,h]),c(()=>{G(l.object(s,n,{reconfigure:!0}))},[n,s,l]),c(()=>{if(!t||!e)return;let o=document.createElement("div");return j(o),()=>{o.remove(),j(null)}},[t,e]),c(()=>{!m||!t||N(m,{isHovered:b,isSelected:f,theme:a})},[m,a,b,f,t]),c(()=>{if(!e)return;let o=i=>{i.altKey===!0&&k(!0)},r=i=>{i.altKey===!1&&k(!1)};return document.addEventListener("keydown",o),document.addEventListener("keyup",r),()=>{document.removeEventListener("keydown",o),document.removeEventListener("keyup",r)}},[e]),c(()=>{if(!y||!m||!t)return;t.appendChild(m);let o=t.style.position;return/static/.test(getComputedStyle(t).position)&&(t.style.position="relative"),()=>{try{t.removeChild(m)}catch{}t.style.position=o}},[y,m,t]),c(()=>{if(!t||!e)return;let o=()=>p(!0),r=()=>p(!1);return t.addEventListener("mouseenter",o),t.addEventListener("mouseleave",r),()=>{p(!1),t.removeEventListener("mouseenter",o),t.removeEventListener("mouseleave",r)}},[t,e]),c(()=>{if(!t||!e)return;let o=r=>{y&&(r.stopPropagation(),P(),e?.ui.restore())};return t.addEventListener("click",o),()=>{t.removeEventListener("click",o)}},[y,P,t,e]),H}function se(){let{sheet:s}=v(E);return s.sequence}function N(s,{isSelected:n,isHovered:l,theme:e}){let a=n||l?e.selectedColor:e.normalColor;Object.assign(s.style,{position:"absolute",inset:0,pointerEvents:"none",borderWidth:e.width,borderStyle:n?"solid":"dashed",borderColor:a,backgroundColor:`rgb(from ${a} r g b / ${e.fillOpacity})`,boxSizing:"border-box",zIndex:1e3})}export{te as TheatreProvider,se as useControls,re as useSheetObject,oe as useTheatre,ne as withTheatre};
+import{createContext as x,useContext as v,useEffect as u,useMemo as z,useState as d}from"react";import{onChange as H,createRafDriver as K}from"@theatre/core";import{cancelFrame as U,frame as F,motionValue as O}from"framer-motion";import{jsx as g}from"react/jsx-runtime";var L=K({name:"framer-motion-theatre"}),S=x(null),Y=({project:s,studio:n,children:l,theme:e})=>{let a={normalColor:"rgb(173, 173, 173)",selectedColor:"rgb(79, 167, 255)",fillOpacity:.2,width:3};u(()=>{let p=({timestamp:f})=>{L.tick(f)};return F.update(p,!0),()=>U(p)},[]);let b=z(()=>{if(n!=="auto"&&n)return n;process.env.NODE_ENV},[n]);return g(S.Provider,{value:{project:s,studio:b,gizmoTheme:e??a},children:l})};function Z(){let{project:s,studio:n}=v(S);return{project:s,studio:n}}var E=x(null);function ee(s,n){return l=>{let{project:e}=v(S),[a]=d(()=>e.sheet(s,l.animationId));return g(E.Provider,{value:{sheet:a},children:g(n,{...l})})}}var T=()=>{};function I(s,n){return()=>{n.setSelection([s])}}function te(s,n){let{sheet:l}=v(E),{studio:e,gizmoTheme:a}=v(S),[b,p]=d(!1),[f,C]=d(!1),[t,V]=d(null),[m,j]=d(),[y,k]=d(!1),[c,w]=d(()=>l.object(s,n,{reconfigure:!0})),[h,G]=d(()=>{let o={};for(let r in c.value)o[r]=O(c.value[r]);return o}),[P,M]=d(()=>e?I(c,e):T);u(()=>{e?(M(()=>I(c,e)),C(e.selection.includes(c)),e.onSelectionChange(o=>{C(o.includes(c))})):(M(T),C(!1))},[c,e]);let R=z(()=>({...h,$studio:{isSelected:f,select:P,setSelectionTarget:V}}),[h,P,f]);return u(()=>{G(o=>{let r={};for(let i in c.value)o[i]?r[i]=o[i]:r[i]=O(c.value[i]);return r})},[c]),u(()=>H(c.props,r=>{for(let i in r)h[i]&&h[i].set(r[i])},L),[c,h]),u(()=>{w(l.object(s,n,{reconfigure:!0}))},[n,s,l]),u(()=>{if(!t||!e)return;let o=document.createElement("div");return j(o),()=>{o.remove(),j(null)}},[t,e]),u(()=>{!m||!t||D(m,{isHovered:b,isSelected:f,theme:a})},[m,a,b,f,t]),u(()=>{if(!e)return;let o=i=>{i.altKey===!0&&k(!0)},r=i=>{i.altKey===!1&&k(!1)};return document.addEventListener("keydown",o),document.addEventListener("keyup",r),()=>{document.removeEventListener("keydown",o),document.removeEventListener("keyup",r)}},[e]),u(()=>{if(!y||!m||!t)return;t.appendChild(m);let o=t.style.position;return/static/.test(getComputedStyle(t).position)&&(t.style.position="relative"),()=>{try{t.removeChild(m)}catch{}t.style.position=o}},[y,m,t]),u(()=>{if(!t||!e)return;let o=()=>p(!0),r=()=>p(!1);return t.addEventListener("mouseenter",o),t.addEventListener("mouseleave",r),()=>{p(!1),t.removeEventListener("mouseenter",o),t.removeEventListener("mouseleave",r)}},[t,e]),u(()=>{if(!t||!e)return;let o=r=>{y&&(r.stopPropagation(),P(),e?.ui.restore())};return t.addEventListener("click",o),()=>{t.removeEventListener("click",o)}},[y,P,t,e]),R}function oe(){let{sheet:s}=v(E);return s.sequence}function D(s,{isSelected:n,isHovered:l,theme:e}){let a=n||l?e.selectedColor:e.normalColor;Object.assign(s.style,{position:"absolute",inset:0,pointerEvents:"none",borderWidth:e.width,borderStyle:n?"solid":"dashed",borderColor:a,backgroundColor:`rgb(from ${a} r g b / ${e.fillOpacity})`,boxSizing:"border-box",zIndex:1e3})}export{Y as TheatreProvider,oe as useControls,te as useSheetObject,Z as useTheatre,ee as withTheatre};
 //# sourceMappingURL=main.js.map

package.json

@@ -18,3 +18,3 @@ {
   "homepage": "https://github.com/AndrewPrifer/framer-motion-theatre",
-  "version": "0.1.8",
+  "version": "0.1.9",
   "type": "module",
@@ -21,0 +21,0 @@ "files": [

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Worsened metrics

Total package byte prevSize

49584

decreased by-1%

Lines of code

67

decreased by-1.47%

No dependency changes