framer-motion-theatre - npm Package Compare versions

Comparing version 0.1.9 to 0.2.0

dist/main.d.ts

@@ -0,7 +1,8 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import React, { ReactNode } from 'react';
 import * as _theatre_core from '@theatre/core';
 import { IProject, UnknownShorthandCompoundProps, ISheetObject } from '@theatre/core';
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import React, { ReactNode } from 'react';
+import * as _theatre_studio from '@theatre/studio';
+import { IStudio } from '@theatre/studio';
 import { MotionValue } from 'framer-motion';
-import { IStudio } from '@theatre/studio';
 
@@ -14,2 +15,3 @@ type GizmoTheme = {
 };
+
 declare const TheatreProvider: ({ project, studio: userStudio, children, theme, }: {
@@ -21,9 +23,5 @@ project: IProject;
 }) => react_jsx_runtime.JSX.Element;
-declare function useTheatre(): {
-    project: IProject;
-    studio: IStudio | undefined;
-};
-declare function withTheatre<P>(componentId: string, Component: React.FC<P>): (props: P & {
-    animationId: string;
-}) => react_jsx_runtime.JSX.Element;
+
+declare function useControls(): _theatre_core.ISequence;
+
 type MotionValueObject<Props extends UnknownShorthandCompoundProps> = {
@@ -36,8 +34,16 @@ [K in keyof ISheetObject<Props>["value"]]: MotionValue<ISheetObject<Props>["value"][K]>;
         select: () => void;
-        setSelectionTarget: (element: HTMLElement | null) => void;
+        createGizmo: () => (element: HTMLElement | null) => void;
     };
 };
 declare function useSheetObject<Props extends UnknownShorthandCompoundProps = UnknownShorthandCompoundProps>(objectId: string, initial: Props): MotionValueObjectWithStudio<Props>;
-declare function useControls(): _theatre_core.ISequence;
 
+declare function useTheatre(): {
+    project: _theatre_core.IProject;
+    studio: _theatre_studio.IStudio | undefined;
+};
+
+declare function withTheatre<P>(componentId: string, Component: React.FC<P>): (props: P & {
+    animationId: string;
+}) => react_jsx_runtime.JSX.Element;
+
 export { TheatreProvider, useControls, useSheetObject, useTheatre, withTheatre };

dist/main.js

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

package.json

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

README.md

@@ -80,3 +80,3 @@ # Framer Motion 🤝 Theatre
       // Besides the motion values, useSheetObject also returns a function to enable selection tools for this element.
-      ref={div.$studio.setSelectionTarget}
+      ref={div.$studio.createGizmo()}
       onClick={() => {
@@ -97,3 +97,3 @@ controls.position = 0;
     >
-      <motion.span ref={text.$studio.setSelectionTarget} style={{ ...text }}>
+      <motion.span ref={text.$studio.createGizmo()} style={{ ...text }}>
         {/* You can also keyframe text by directly passing it as children. */}
@@ -138,3 +138,3 @@ {text.content}
 
-Animate motion values using Theatre.js. Returns an object of motion values you can plug into `motion.*` elements. Accepts an object of Theatre.js' [prop types](https://www.theatrejs.com/docs/latest/api/core#prop-types).
+Animate motion values using Theatre.js. Returns an object of motion values you can plug into `motion.*` elements. Accepts an object of Theatre.js' [prop types](https://www.theatrejs.com/docs/latest/api/core#prop-types). Additionally, it returns an object with a `$studio` property that allows you to enable selection tools for this element.
 
@@ -147,2 +147,13 @@ ```tsx
 });
+
+return (
+  <motion.div
+    ref={div.$studio.createGizmo()}
+    style={{
+      ...div,
+    }}
+  >
+    {/* ... */}
+  </motion.div>
+);
 ```
@@ -149,0 +160,0 @@

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

55741

increased by12.42%

Lines of code

70

increased by4.48%

Number of lines in readme file

180

increased by6.51%

No dependency changes