framer-motion-theatre - npm Package Compare versions

Comparing version 0.2.2 to 0.2.3

dist/main.d.ts

@@ -15,2 +15,6 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
 };
+type GizmoOptions = Partial<{
+    zIndex: number;
+    ignoreComputedZIndex?: boolean;
+}>;
 
@@ -33,5 +37,3 @@ declare const TheatreProvider: ({ project, studio: userStudio, children, theme, }: {
         select: () => void;
-        createGizmo: (options?: {
-            zIndex?: number;
-        }) => (element: HTMLElement | null) => void;
+        createGizmo: (options?: GizmoOptions) => (element: HTMLElement | null) => void;
     };
@@ -38,0 +40,0 @@ };

dist/main.js

@@ -1,2 +0,2 @@
-import{useCallback as G,useContext as M,useEffect as v,useMemo as V,useState as j}from"react";import{cancelFrame as w,frame as E,useAnimationFrame as R,useMotionValue as C}from"framer-motion";import{createContext as T}from"react";var l=T(null);import{createRafDriver as k}from"@theatre/core";var g=k({name:"framer-motion-theatre"});import{motion as H}from"framer-motion";import{jsx as O,jsxs as K}from"react/jsx-runtime";function L(n){let r="";for(let s of Object.values(n.address))r+=s;return r}var A=({project:n,studio:r,children:s,theme:u})=>{let d={normalColor:"rgb(60, 140, 219)",selectedColor:"rgb(31, 121, 210)",fillOpacity:.2,width:3};v(()=>{let e=({timestamp:t})=>{g.tick(t)};return E.update(e,!0),()=>w(e)},[]);let c=V(()=>{if(r!=="auto"&&r)return r;process.env.NODE_ENV},[r]),[m,f]=j([]),[i,h]=j(!1),[a,p]=j(null),b=G(e=>(f(t=>[...t,e]),()=>{f(t=>t.filter(o=>o!==e))}),[]);return v(()=>{c?(p(c.selection.filter(e=>e.type==="Theatre_SheetObject_PublicAPI")[0]??null),c.onSelectionChange(e=>{let t=e.filter(o=>o.type==="Theatre_SheetObject_PublicAPI")[0];p(t??null)})):p(null)},[c]),v(()=>{if(!c)return;let e=o=>{o.altKey===!0&&h(!0)},t=o=>{o.altKey===!1&&h(!1)};return document.addEventListener("keydown",e),document.addEventListener("keyup",t),()=>{document.removeEventListener("keydown",e),document.removeEventListener("keyup",t)}},[c]),K(l.Provider,{value:{project:n,studio:c,gizmoTheme:u??d,registerGizmoTarget:b,selectedObject:a},children:[i&&O("div",{style:{position:"fixed",top:0,left:0,zIndex:999999999},children:m.map(e=>O(D,{gizmoTarget:e},L(e.sheetObject)))}),s]})};function D({gizmoTarget:n}){let{gizmoTheme:r,studio:s,selectedObject:u}=M(l),[d,c]=j(!1),m=u===n.sheetObject,f=n.target,i=n.options,h=m?r.selectedColor:r.normalColor,a=C(i.zIndex??0),p=C(0),b=C(0),e=C(0),t=C(0);return R(()=>{let o=f.getBoundingClientRect();i.ignoreComputedZIndex||a.set((i.zIndex??0)+Number(getComputedStyle(f).zIndex)),p.set(o.x),b.set(o.y),e.set(o.width),t.set(o.height)}),O(H.div,{style:{position:"absolute",top:0,left:0,borderWidth:r.width,borderStyle:m?"solid":"dashed",borderColor:h,backgroundColor:`rgb(from ${h} r g b / ${d&&!m?r.fillOpacity:0})`,boxSizing:"border-box",contain:"strict",x:p,y:b,width:e,height:t,zIndex:a},onHoverStart:()=>c(!0),onHoverEnd:()=>c(!1),onClick:()=>{s&&s.setSelection([n.sheetObject])}})}import{useContext as N}from"react";import{createContext as U}from"react";var x=U(null);function W(){let{sheet:n}=N(x);return n.sequence}import{useContext as y,useEffect as S,useMemo as _,useState as P}from"react";import{onChange as F}from"@theatre/core";import{motionValue as z}from"framer-motion";function $(n,r){let{sheet:s}=y(x),{studio:u,selectedObject:d,registerGizmoTarget:c}=y(l),[m,f]=P(null),[i,h]=P(()=>s.object(n,r,{reconfigure:!0})),[a,p]=P(()=>{let e={};for(let t in i.value)e[t]=z(i.value[t]);return e}),b=_(()=>({...a,$studio:{isSelected:d===i,select:()=>{u&&u.setSelection([i])},createGizmo:(e={})=>t=>{t&&f({element:t,options:e})}}}),[a,i,d,u]);return S(()=>{if(m)return c({sheetObject:i,target:m.element,options:m.options})},[i,c,m]),S(()=>{p(e=>{let t={};for(let o in i.value)e[o]?t[o]=e[o]:t[o]=z(i.value[o]);for(let o in e)t[o]||e[o].destroy();return t})},[i]),S(()=>F(i.props,t=>{for(let o in t)a[o]&&a[o].set(t[o])},g),[i,a]),S(()=>{h(s.object(n,r,{reconfigure:!0}))},[r,n,s]),b}import{useContext as q}from"react";function B(){let{project:n,studio:r}=q(l);return{project:n,studio:r}}import{useContext as Z,useState as J}from"react";import{jsx as I}from"react/jsx-runtime";function Q(n,r){return s=>{let{project:u}=Z(l),[d]=J(()=>u.sheet(n,s.animationId));return I(x.Provider,{value:{sheet:d},children:I(r,{...s})})}}export{A as TheatreProvider,W as useControls,$ as useSheetObject,B as useTheatre,Q as withTheatre};
+import{useCallback as G,useContext as M,useEffect as v,useMemo as V,useState as j}from"react";import{cancelFrame as w,frame as E,useAnimationFrame as R,useMotionValue as g}from"framer-motion";import{createContext as I}from"react";var l=I(null);import{createRafDriver as k}from"@theatre/core";var x=k({name:"framer-motion-theatre"});import{motion as H}from"framer-motion";import{jsx as O,jsxs as K}from"react/jsx-runtime";function L(n){let r="";for(let s of Object.values(n.address))r+=s;return r}var A=({project:n,studio:r,children:s,theme:u})=>{let d={normalColor:"rgb(60, 140, 219)",selectedColor:"rgb(31, 121, 210)",fillOpacity:.2,width:3};v(()=>{let e=({timestamp:t})=>{x.tick(t)};return E.update(e,!0),()=>w(e)},[]);let c=V(()=>{if(r!=="auto"&&r)return r;process.env.NODE_ENV},[r]),[m,f]=j([]),[i,h]=j(!1),[a,p]=j(null),b=G(e=>(f(t=>[...t,e]),()=>{f(t=>t.filter(o=>o!==e))}),[]);return v(()=>{c?(p(c.selection.filter(e=>e.type==="Theatre_SheetObject_PublicAPI")[0]??null),c.onSelectionChange(e=>{let t=e.filter(o=>o.type==="Theatre_SheetObject_PublicAPI")[0];p(t??null)})):p(null)},[c]),v(()=>{if(!c)return;let e=o=>{o.altKey===!0&&h(!0)},t=o=>{o.altKey===!1&&h(!1)};return document.addEventListener("keydown",e),document.addEventListener("keyup",t),()=>{document.removeEventListener("keydown",e),document.removeEventListener("keyup",t)}},[c]),K(l.Provider,{value:{project:n,studio:c,gizmoTheme:u??d,registerGizmoTarget:b,selectedObject:a},children:[i&&O("div",{style:{position:"fixed",top:0,left:0,zIndex:999999999},children:m.map(e=>O(D,{gizmoTarget:e},L(e.sheetObject)))}),s]})};function D({gizmoTarget:n}){let{gizmoTheme:r,studio:s,selectedObject:u}=M(l),[d,c]=j(!1),m=u===n.sheetObject,f=n.target,i=n.options,h=m?r.selectedColor:r.normalColor,a=g(i.zIndex??0),p=g(0),b=g(0),e=g(0),t=g(0);return R(()=>{let o=f.getBoundingClientRect();i.ignoreComputedZIndex||a.set((i.zIndex??0)+Number(getComputedStyle(f).zIndex)),p.set(o.x),b.set(o.y),e.set(o.width),t.set(o.height)}),O(H.div,{style:{position:"absolute",top:0,left:0,borderWidth:r.width,borderStyle:m?"solid":"dashed",borderColor:h,backgroundColor:`rgb(from ${h} r g b / ${d&&!m?r.fillOpacity:0})`,boxSizing:"border-box",contain:"strict",x:p,y:b,width:e,height:t,zIndex:a},onHoverStart:()=>c(!0),onHoverEnd:()=>c(!1),onClick:()=>{s&&s.setSelection([n.sheetObject])}})}import{useContext as N}from"react";import{createContext as U}from"react";var C=U(null);function W(){let{sheet:n}=N(C);return n.sequence}import{useContext as y,useEffect as S,useMemo as _,useState as P}from"react";import{onChange as F}from"@theatre/core";import{motionValue as z}from"framer-motion";function $(n,r){let{sheet:s}=y(C),{studio:u,selectedObject:d,registerGizmoTarget:c}=y(l),[m,f]=P(null),[i,h]=P(()=>s.object(n,r,{reconfigure:!0})),[a,p]=P(()=>{let e={};for(let t in i.value)e[t]=z(i.value[t]);return e}),b=_(()=>({...a,$studio:{isSelected:d===i,select:()=>{u&&u.setSelection([i])},createGizmo:(e={})=>t=>{t&&f({element:t,options:e})}}}),[a,i,d,u]);return S(()=>{if(m)return c({sheetObject:i,target:m.element,options:m.options})},[i,c,m]),S(()=>{p(e=>{let t={};for(let o in i.value)e[o]?t[o]=e[o]:t[o]=z(i.value[o]);for(let o in e)t[o]||e[o].destroy();return t})},[i]),S(()=>F(i.props,t=>{for(let o in t)a[o]&&a[o].set(t[o])},x),[i,a]),S(()=>{h(s.object(n,r,{reconfigure:!0}))},[r,n,s]),b}import{useContext as q}from"react";function B(){let{project:n,studio:r}=q(l);return{project:n,studio:r}}import{useContext as Z,useState as J}from"react";import{jsx as T}from"react/jsx-runtime";function Q(n,r){return s=>{let{project:u}=Z(l),[d]=J(()=>u.sheet(n,s.animationId));return T(C.Provider,{value:{sheet:d},children:T(r,{...s})})}}export{A as TheatreProvider,W as useControls,$ as useSheetObject,B as useTheatre,Q as withTheatre};
 //# sourceMappingURL=main.js.map

package.json

@@ -18,3 +18,3 @@ {
   "homepage": "https://github.com/AndrewPrifer/framer-motion-theatre",
-  "version": "0.2.2",
+  "version": "0.2.3",
   "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

Improved metrics

Total package byte prevSize

58161

increased by0.19%

Lines of code

76

increased by2.7%

No dependency changes