react-three-flex/dist/index.js

`<Flex />` component for the 3D World.

import e from"@babel/runtime/helpers/esm/extends";import t,{createContext as r,useContext as n,useMemo as i,useRef as a,useLayoutEffect as s,useState as o,useCallback as c}from"react";import l from"yoga-layout-prebuilt";import{useFrame as g,useThree as d}from"react-three-fiber";import{Vector3 as m,Box3 as p}from"three";const u=e=>e[0].toUpperCase()+e.slice(1),f=e=>e.toUpperCase().replace("-","_"),h=(e,t,r)=>Object.keys(t).forEach(n=>{const i=t[n];if("string"==typeof i)switch(n){case"flexDir":case"dir":case"flexDirection":return e.setFlexDirection(l["FLEX_DIRECTION_"+f(i)]);case"align":case"alignItems":return e.setAlignItems(l["ALIGN_"+f(i)]);case"justify":case"justifyContent":return e.setJustifyContent(l["JUSTIFY_"+f(i)]);case"wrap":case"flexWrap":return e.setFlexWrap(l["WRAP_"+f(i)]);case"basis":case"flexBasis":return e.setFlexBasis(i);default:return e["set"+u(n)](i)}else if("number"==typeof i){const t=i*r;switch(n){case"basis":case"flexBasis":return e.setFlexBasis(t);case"grow":case"flexGrow":return e.setFlexGrow(t);case"shrink":case"flexShrink":return e.setFlexShrink(t);case"align":return e.setAlignItems(i);case"justify":return e.setJustifyContent(i);case"flexDir":case"dir":return e.setFlexDirection(i);case"wrap":return e.setFlexWrap(i);case"padding":case"p":return e.setPadding(l.EDGE_ALL,t);case"paddingLeft":case"pl":return e.setPadding(l.EDGE_LEFT,t);case"paddingRight":case"pr":return e.setPadding(l.EDGE_RIGHT,t);case"paddingTop":case"pt":return e.setPadding(l.EDGE_TOP,t);case"paddingBottom":case"pb":return e.setPadding(l.EDGE_BOTTOM,t);case"margin":case"m":return e.setMargin(l.EDGE_ALL,t);case"marginLeft":case"ml":return e.setMargin(l.EDGE_LEFT,t);case"marginRight":case"mr":return e.setMargin(l.EDGE_RIGHT,t);case"marginTop":case"mt":return e.setMargin(l.EDGE_TOP,t);case"marginBottom":case"mb":return e.setMargin(l.EDGE_BOTTOM,t);default:return e["set"+u(n)](t)}}});const x=e=>Object.keys(e).forEach(t=>void 0===e[t]?delete e[t]:{}),w=r({scaleFactor:100,requestReflow(){console.warn("Flex not initialized! Please report")},registerBox(){console.warn("Flex not initialized! Please report")},unregisterBox(){console.warn("Flex not initialized! Please report")}}),y=r({node:null,size:[0,0]});function E(e){let t=n(e);return t||console.warn("You must place this hook/component under a <Flex/> component!"),t}function b(){const{requestReflow:e}=E(w);return e}function D(){const{size:e}=E(y);return e}function B({children:r,centerAnchor:n,flexDirection:c,flexDir:d,dir:m,alignContent:p,alignItems:u,alignSelf:f,align:D,justifyContent:B,justify:T,flexBasis:C,basis:L,flexGrow:R,grow:F,flexShrink:G,shrink:I,flexWrap:W,wrap:_,margin:P,m:z,marginBottom:j,marginLeft:k,marginRight:O,marginTop:v,mb:H,ml:M,mr:S,mt:A,padding:N,p:q,paddingBottom:J,paddingLeft:U,paddingRight:Y,paddingTop:X,pb:K,pl:Q,pr:V,pt:Z,height:$,width:ee,maxHeight:te,maxWidth:re,minHeight:ne,minWidth:ie,...ae}){const se=i(()=>{const e={flexDirection:c,flexDir:d,dir:m,alignContent:p,alignItems:u,alignSelf:f,align:D,justifyContent:B,justify:T,flexBasis:C,basis:L,flexGrow:R,grow:F,flexShrink:G,shrink:I,flexWrap:W,wrap:_,margin:P,m:z,marginBottom:j,marginLeft:k,marginRight:O,marginTop:v,mb:H,ml:M,mr:S,mt:A,padding:N,p:q,paddingBottom:J,paddingLeft:U,paddingRight:Y,paddingTop:X,pb:K,pl:Q,pr:V,pt:Z,height:$,width:ee,maxHeight:te,maxWidth:re,minHeight:ne,minWidth:ie};return x(e),e},[D,p,u,f,m,C,L,d,c,R,F,G,I,W,$,T,B,z,P,j,k,O,v,te,re,H,ne,ie,M,S,A,q,N,J,U,Y,X,K,Q,V,Z,ee,_]),{registerBox:oe,unregisterBox:ce,scaleFactor:le}=E(w),{node:ge}=E(y),de=a(),me=i(()=>l.Node.create(),[]),pe=b();s(()=>{h(me,se,le)},[se,me,le]),s(()=>{if(de.current&&ge)return ge.insertChild(me,ge.getChildCount()),oe(me,de.current,se,n),()=>{ge.removeChild(me),ce(me)}},[me,ge,se,n,oe,ce]),s(()=>{pe()},[r,se,pe]);const[ue,fe]=o([0,0]),he=1/le;g(()=>{const e=("number"==typeof se.width?se.width:null)||me.getComputedWidth().valueOf()/le,t=("number"==typeof se.height?se.height:null)||me.getComputedHeight().valueOf()/le;(Math.abs(e-ue[0])>he||Math.abs(t-ue[1])>he)&&fe([e,t])});const xe=i(()=>({node:me,size:ue}),[me,ue]);return t.createElement("group",e({ref:de},ae),t.createElement(y.Provider,{value:xe},"function"==typeof r?r(ue[0],ue[1]):r))}function T({size:e=[1,1,1],yogaDirection:r="ltr",plane:n="xy",children:o,scaleFactor:u=100,onReflow:f,flexDirection:E,flexDir:b,dir:D,alignContent:B,alignItems:T,alignSelf:C,align:L,justifyContent:R,justify:F,flexBasis:G,basis:I,flexGrow:W,grow:_,flexShrink:P,shrink:z,flexWrap:j,wrap:k,margin:O,m:v,marginBottom:H,marginLeft:M,marginRight:S,marginTop:A,mb:N,ml:q,mr:J,mt:U,padding:Y,p:X,paddingBottom:K,paddingLeft:Q,paddingRight:V,paddingTop:Z,pb:$,pl:ee,pr:te,pt:re,height:ne,width:ie,maxHeight:ae,maxWidth:se,minHeight:oe,minWidth:ce,...le}){const ge=i(()=>{const e={flexDirection:E,flexDir:b,dir:D,alignContent:B,alignItems:T,alignSelf:C,align:L,justifyContent:R,justify:F,flexBasis:G,basis:I,flexGrow:W,grow:_,flexShrink:P,shrink:z,flexWrap:j,wrap:k,margin:O,m:v,marginBottom:H,marginLeft:M,marginRight:S,marginTop:A,mb:N,ml:q,mr:J,mt:U,padding:Y,p:X,paddingBottom:K,paddingLeft:Q,paddingRight:V,paddingTop:Z,pb:$,pl:ee,pr:te,pt:re,height:ne,width:ie,maxHeight:ae,maxWidth:se,minHeight:oe,minWidth:ce};return x(e),e},[L,B,T,C,D,G,I,b,E,W,_,P,z,j,ne,F,R,v,O,H,M,S,A,ae,se,N,oe,ce,q,J,U,X,Y,K,Q,V,Z,$,ee,te,re,ie,k]),de=a([]),me=c((e,t,r,n=!1)=>{const i=de.current.findIndex(t=>t.node===e);-1!==i&&de.current.splice(i,1),de.current.push({group:t,node:e,flexProps:r,centerAnchor:n})},[]),pe=c(e=>{const t=de.current.findIndex(t=>t.node===e);-1!==t&&de.current.splice(t,1)},[]),ue=i(()=>l.Node.create(),[]);s(()=>{h(ue,ge,u)},[ue,ge,u]);const{invalidate:fe}=d(),he=a(!0),xe=c(()=>{he.current=!0,fe()},[fe]);s(()=>{xe()},[o,ge,xe]);const we=i(()=>new p,[]),ye=i(()=>new m,[]),Ee=n[0],be=n[1],De=function(e){switch(e){case"xy":return"z";case"yz":return"x";case"xz":return"y"}}(n),[Be,Te]=function(e,t){switch(t){case"xy":return[e[0],e[1]];case"yz":return[e[1],e[2]];case"xz":return[e[0],e[2]]}}(e,n),Ce="ltr"===r?l.DIRECTION_LTR:"rtl"===r?l.DIRECTION_RTL:r,Le=i(()=>({requestReflow:xe,registerBox:me,unregisterBox:pe,scaleFactor:u}),[xe,me,pe,u]),Re=i(()=>({node:ue,size:[Be,Te]}),[ue,Be,Te]);function Fe(){de.current.forEach(({group:e,node:t,flexProps:r})=>{const n="number"==typeof r.width?r.width*u:r.width,i="number"==typeof r.height?r.height*u:r.height;void 0!==n&&void 0!==i?(t.setWidth(n),t.setHeight(i)):(we.setFromObject(e).getSize(ye),t.setWidth(n||ye[Ee]*u),t.setHeight(i||ye[be]*u))}),ue.calculateLayout(Be*u,Te*u,Ce);let e=0,t=0,r=0,n=0;de.current.forEach(({group:i,node:a,centerAnchor:s})=>{const{left:o,top:c,width:l,height:g}=a.getComputedLayout(),d=(({x:e,y:t,z:r})=>new m(e,t,r))({[Ee]:(o+(s?l/2:0))/u,[be]:-(c+(s?g/2:0))/u,[De]:0});e=Math.min(e,o),r=Math.min(r,c),t=Math.max(t,o+l),n=Math.max(n,c+g),i.position.copy(d)}),f&&f((t-e)/u,(n-r)/u),fe()}return g(()=>{he.current&&(he.current=!1,Fe())}),t.createElement("group",le,t.createElement(w.Provider,{value:Le},t.createElement(y.Provider,{value:Re},o)))}export{B as Box,T as Flex,E as useContext,D as useFlexSize,b as useReflow};