@timsctt/threed-cloud/dist/index.mjs

React module for create a cloud of React Nodes

import B, { useRef, useState, useEffect } from 'react';
import { jsxs, jsx, Fragment } from 'react/jsx-runtime';

function L({children:t,size:e=150,speed:s=1,radius:o=200,randomPosition:f=!0,isPausable:r=!0,iconOnHover:p=!1,mouseTracking:c=!0}){let d=B.Children.toArray(t),h=d.length,m=useRef(null),[n,y]=useState(!1),[u,P]=useState({x:-500,y:0,z:0}),x=-(Math.min(Math.max(-u.y,-e),e)/o)*s,v=Math.min(Math.max(-u.x,-e),e)/o*s,M=Math.PI/e,R=[Math.sin(x*M),Math.cos(x*M),Math.sin(v*M),Math.cos(v*M)],E=Array.from(d.keys());function X(i){f&&(i=D(Math.floor(Math.random()*(h+1))).valueOf());let a=Math.acos(-1+(2*i+1)/h),l=Math.sqrt((h+1)*Math.PI)*a;return {x:e*Math.sin(a)*Math.cos(l)/2,y:e*Math.sin(a)*Math.sin(l)/2,z:e*Math.cos(a)/2}}function D(i){let a=E.reduce((l,g)=>Math.abs(g.valueOf()-i)<Math.abs(l.valueOf()-i)?g:l);for(let l=0;l<E.length;l++)E[l]===a&&E.splice(l,1);return a}let k=d.map((i,a)=>({children:B.createElement(i.type,i.props,i.props.children),depth:o,position:X(a),size:e,speed:s,sc:R,pause:n})),$=()=>{r&&y(!n);},J=i=>{i.code==="Space"&&$();},w=i=>{if(m.current){let a=m.current.getBoundingClientRect(),l=(i.clientX-(a.left+a.width/2))/5,g=(i.clientY-(a.top+a.height/2))/5;P({x:l,y:g,z:0});}};return useEffect(()=>{if(c)return document.addEventListener("mousemove",w),()=>{document.removeEventListener("mousemove",w);}},[c]),{handlePause:$,pause:n,handlePauseByKey:J,isPausable:r,iconOnHover:p,radius:o,sc:R,elementsList:k,ref:m,updateMousePosition:w,mousePosition:u}}function z(t){let[e,s]=useState(1),[o,f]=useState(1),[r,p]=useState(t.position),[c,d]=useState({});function h(){let n=r.x,y=r.y*t.sc[1]+r.z*-t.sc[0],u=r.y*t.sc[0]+r.z*t.sc[1],P=n*t.sc[3]+u*t.sc[2],x=y,v=u*t.sc[3]-n*t.sc[2];p({x:P,y:x,z:v});}function m(){let n=o*o-.2;n=Math.abs(Math.round((n>1?1:n)*1e3)/1e3);let y=r.x.toFixed(2),u=r.y.toFixed(2);return {transform:`translate3d(calc(-50% + ${y}px), calc(-50% + ${u}px), 0) scale(${e})`,filter:`alpha(opacity=${Math.abs(100*n)})`,opacity:`${n}`}}return useEffect(()=>{if(!t.pause){let n=setInterval(()=>{h(),f(2*t.depth/(2*t.depth+r.z)),s(Math.round(o*1e3)/1e3),d(m());},15);return ()=>clearInterval(n)}return ()=>{}},[c,t.pause]),{style:c,scale:e}}var G=t=>{let{style:e,scale:s}=z(t);return jsx(Fragment,{children:jsx("span",{className:"three-d-item",style:{filter:e.filter,height:e.height,opacity:e.opacity,transform:e.transform,width:e.width,scale:s},children:t.children})})},H=G;function I(t,{insertAt:e}={}){if(!t||typeof document>"u")return;let s=document.head||document.getElementsByTagName("head")[0],o=document.createElement("style");o.type="text/css",e==="top"&&s.firstChild?s.insertBefore(o,s.firstChild):s.appendChild(o),o.styleSheet?o.styleSheet.cssText=t:o.appendChild(document.createTextNode(t));}I(`.threed-cloud-container{display:flex;align-items:center;justify-content:center;min-height:100%;position:relative}.three-d-item{will-change:transform,opacity,filter;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}.tdc-animation-icon{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:50px;opacity:0;transition:.3s}.threed-cloud-container:hover .tdc-animation-icon{opacity:.65}.tdcIsPausable{cursor:pointer}.threed-cloud-container span *{display:flex;justify-content:center;align-items:center}
`);var K=()=>jsx(Fragment,{children:jsxs("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24",children:[jsx("rect",{x:"6",y:"4",width:"4",height:"16",fill:"#000"}),jsx("rect",{x:"14",y:"4",width:"4",height:"16",fill:"#000"})]})});var O=()=>jsx(Fragment,{children:jsxs("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24",children:[jsx("path",{d:"M8 5v14l11-7z"}),jsx("path",{d:"M0 0h24v24H0z",fill:"none"})]})});var T=t=>{let{sc:e,radius:s,elementsList:o,handlePause:f,pause:r,handlePauseByKey:p,isPausable:c,iconOnHover:d,ref:h}=L(t);return jsxs("div",{className:`threed-cloud-container ${c?"tdcIsPausable":""}`,role:"button",onClick:f,onKeyDown:p,tabIndex:0,children:[c&&d&&jsx("span",{className:"tdc-animation-icon",children:r?jsx(O,{}):jsx(K,{})}),jsx("div",{className:t.className,style:{width:`${t.size}px`,height:`${t.size}px`},ref:h,children:o.map((m,n)=>jsx(H,{depth:s,sc:e,position:m.position,pause:r,children:m.children},n))})]})};

export { T as CloudContainer };
//# sourceMappingURL=out.js.map
//# sourceMappingURL=index.mjs.map