framer-motion-theatre - npm Package Compare versions

Comparing version 0.1.4 to 0.1.5

dist/main.js

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

package.json

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

No alert changes

Improved metrics

Total package byte prevSize

48108

increased by0.84%

Lines of code

63

increased by1.61%

No dependency changes