@react-three/drei 8.0.0 → 8.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-three/drei",
-  "version": "8.0.0",
+  "version": "8.1.0",
   "private": false,
   "description": "useful add-ons for react-three-fiber",
   "keywords": [

package/web/Html.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),t=require("react"),r=require("react-dom"),n=require("three"),o=require("@react-three/fiber");function s(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function a(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(r){if("default"!==r){var n=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,n.get?n:{enumerable:!0,get:function(){return e[r]}})}})),t.default=e,Object.freeze(t)}var i=s(e),c=a(t),l=a(r);const u=new n.Vector3,d=new n.Vector3,f=new n.Vector3;function m(e,t,r){const n=u.setFromMatrixPosition(e.matrixWorld);n.project(t);const o=r.width/2,s=r.height/2;return[n.x*o+o,-n.y*s+s]}const p=e=>Math.abs(e)<1e-10?0:e;function h(e,t,r=""){let n="matrix3d(";for(let r=0;16!==r;r++)n+=p(t[r]*e.elements[r])+(15!==r?",":")");return r+n}const x=(y=[1,-1,1,1,1,-1,1,1,1,-1,1,1,1,-1,1,1],e=>h(e,y));var y;const v=(e,t)=>{return h(e,[1/(r=t),1/r,1/r,1,-1/r,-1/r,-1/r,-1,1/r,1/r,1/r,1,1,1,1,1],"translate(-50%,-50%)");var r},b=c.forwardRef((({children:e,eps:t=.001,style:r,className:s,prepend:a,center:h,fullscreen:y,portal:b,distanceFactor:g,sprite:M=!1,transform:P=!1,occlude:w,onOcclude:W,zIndexRange:$=[16777271,0],calculatePosition:E=m,as:O="div",pointerEvents:j="auto",...F},T)=>{var C;const R=o.useThree((({gl:e})=>e)),z=o.useThree((({camera:e})=>e)),I=o.useThree((({scene:e})=>e)),q=o.useThree((({size:e})=>e)),N=o.useThree((({raycaster:e})=>e)),[_]=c.useState((()=>document.createElement(O))),A=c.useRef(null),V=c.useRef(0),k=c.useRef([0,0]),D=c.useRef(null),S=c.useRef(null),H=null!==(C=null==b?void 0:b.current)&&void 0!==C?C:R.domElement.parentNode;c.useEffect((()=>{if(A.current){if(I.updateMatrixWorld(),P)_.style.cssText="position:absolute;top:0;left:0;pointer-events:none;overflow:hidden;";else{const e=E(A.current,z,q);_.style.cssText=`position:absolute;top:0;left:0;transform:translate3d(${e[0]}px,${e[1]}px,0);transform-origin:0 0;`}return H&&(a?H.prepend(_):H.appendChild(_)),()=>{H&&H.removeChild(_),l.unmountComponentAtNode(_)}}}),[H,P]);const L=c.useMemo((()=>P?{position:"absolute",top:0,left:0,width:q.width,height:q.height,transformStyle:"preserve-3d",pointerEvents:"none"}:{position:"absolute",transform:h?"translate3d(-50%,-50%,0)":"none",...y&&{top:-q.height/2,left:-q.width/2,width:q.width,height:q.height},...r}),[r,h,y,q,P]),Z=c.useMemo((()=>({position:"absolute",pointerEvents:j})),[j]);c.useLayoutEffect((()=>{P?l.render(c.createElement("div",{ref:D,style:L},c.createElement("div",{ref:S,style:Z},c.createElement("div",{ref:T,className:s,style:r,children:e}))),_):l.render(c.createElement("div",{ref:T,style:L,className:s,children:e}),_)}));const B=c.useRef(!0);return o.useFrame((()=>{if(A.current){z.updateMatrixWorld(),A.current.updateWorldMatrix(!0,!1);const e=P?k.current:E(A.current,z,q);if(P||Math.abs(V.current-z.zoom)>t||Math.abs(k.current[0]-e[0])>t||Math.abs(k.current[1]-e[1])>t){const t=function(e,t){const r=u.setFromMatrixPosition(e.matrixWorld),n=d.setFromMatrixPosition(t.matrixWorld),o=r.sub(n),s=t.getWorldDirection(f);return o.angleTo(s)>Math.PI/2}(A.current,z);let r=!1;"boolean"==typeof w?!0===w&&(r=[I]):Array.isArray(w)&&(r=w.map((e=>e.current)));const o=B.current;if(r){const e=function(e,t,r,n){const o=u.setFromMatrixPosition(e.matrixWorld),s=o.clone();s.project(t),r.setFromCamera(s,t);const a=r.intersectObjects(n,!0);if(a.length){const e=a[0].distance;return o.distanceTo(r.ray.origin)<e}return!0}(A.current,z,N,r);B.current=e&&!t}else B.current=!t;if(o!==B.current&&(W?W(!B.current):_.style.display=B.current?"block":"none"),_.style.zIndex=`${function(e,t,r){if(t instanceof n.PerspectiveCamera||t instanceof n.OrthographicCamera){const n=u.setFromMatrixPosition(e.matrixWorld),o=d.setFromMatrixPosition(t.matrixWorld),s=n.distanceTo(o),a=(r[1]-r[0])/(t.far-t.near),i=r[1]-a*t.far;return Math.round(a*s+i)}}(A.current,z,$)}`,P){const[e,t]=[q.width/2,q.height/2],r=z.projectionMatrix.elements[5]*t,{isOrthographicCamera:n,top:o,left:s,bottom:a,right:i}=z,c=x(z.matrixWorldInverse),l=n?`scale(${r})translate(${p(-(i+s)/2)}px,${p((o+a)/2)}px)`:`translateZ(${r}px)`;let u=A.current.matrixWorld;M&&(u=z.matrixWorldInverse.clone().transpose().copyPosition(u).scale(A.current.scale),u.elements[3]=u.elements[7]=u.elements[11]=0,u.elements[15]=1),_.style.width=q.width+"px",_.style.height=q.height+"px",_.style.perspective=n?"":`${r}px`,D.current&&S.current&&(D.current.style.transform=`${l}${c}translate(${e}px,${t}px)`,S.current.style.transform=v(u,1/((g||10)/400)))}else{const t=void 0===g?1:function(e,t){if(t instanceof n.OrthographicCamera)return t.zoom;if(t instanceof n.PerspectiveCamera){const r=u.setFromMatrixPosition(e.matrixWorld),n=d.setFromMatrixPosition(t.matrixWorld),o=t.fov*Math.PI/180,s=r.distanceTo(n);return 1/(2*Math.tan(o/2)*s)}return 1}(A.current,z)*g;_.style.transform=`translate3d(${e[0]}px,${e[1]}px,0) scale(${t})`}k.current=e,V.current=z.zoom}}})),c.createElement("group",i.default({},F,{ref:A}))}));exports.Html=b;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),t=require("react"),r=require("react-dom"),n=require("three"),o=require("@react-three/fiber");function s(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function a(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(r){if("default"!==r){var n=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,n.get?n:{enumerable:!0,get:function(){return e[r]}})}})),t.default=e,Object.freeze(t)}var i=s(e),c=a(t),l=a(r);const u=new n.Vector3,d=new n.Vector3,f=new n.Vector3;function m(e,t,r){const n=u.setFromMatrixPosition(e.matrixWorld);n.project(t);const o=r.width/2,s=r.height/2;return[n.x*o+o,-n.y*s+s]}const p=e=>Math.abs(e)<1e-10?0:e;function h(e,t,r=""){let n="matrix3d(";for(let r=0;16!==r;r++)n+=p(t[r]*e.elements[r])+(15!==r?",":")");return r+n}const x=(y=[1,-1,1,1,1,-1,1,1,1,-1,1,1,1,-1,1,1],e=>h(e,y));var y;const v=(e,t)=>{return h(e,[1/(r=t),1/r,1/r,1,-1/r,-1/r,-1/r,-1,1/r,1/r,1/r,1,1,1,1,1],"translate(-50%,-50%)");var r},b=c.forwardRef((({children:e,eps:t=.001,style:r,className:s,prepend:a,center:h,fullscreen:y,portal:b,distanceFactor:g,sprite:M=!1,transform:P=!1,occlude:w,onOcclude:W,zIndexRange:$=[16777271,0],calculatePosition:E=m,as:O="div",wrapperClass:j,pointerEvents:F="auto",...T},C)=>{var R;const z=o.useThree((({gl:e})=>e)),I=o.useThree((({camera:e})=>e)),N=o.useThree((({scene:e})=>e)),q=o.useThree((({size:e})=>e)),_=o.useThree((({raycaster:e})=>e)),[A]=c.useState((()=>document.createElement(O))),V=c.useRef(null),k=c.useRef(0),D=c.useRef([0,0]),L=c.useRef(null),S=c.useRef(null),H=null!==(R=null==b?void 0:b.current)&&void 0!==R?R:z.domElement.parentNode;c.useEffect((()=>{if(V.current){if(N.updateMatrixWorld(),P)A.style.cssText="position:absolute;top:0;left:0;pointer-events:none;overflow:hidden;";else{const e=E(V.current,I,q);A.style.cssText=`position:absolute;top:0;left:0;transform:translate3d(${e[0]}px,${e[1]}px,0);transform-origin:0 0;`}return H&&(a?H.prepend(A):H.appendChild(A)),()=>{H&&H.removeChild(A),l.unmountComponentAtNode(A)}}}),[H,P]),c.useLayoutEffect((()=>{j&&(A.className=j)}),[j]);const Z=c.useMemo((()=>P?{position:"absolute",top:0,left:0,width:q.width,height:q.height,transformStyle:"preserve-3d",pointerEvents:"none"}:{position:"absolute",transform:h?"translate3d(-50%,-50%,0)":"none",...y&&{top:-q.height/2,left:-q.width/2,width:q.width,height:q.height},...r}),[r,h,y,q,P]),B=c.useMemo((()=>({position:"absolute",pointerEvents:F})),[F]);c.useLayoutEffect((()=>{P?l.render(c.createElement("div",{ref:L,style:Z},c.createElement("div",{ref:S,style:B},c.createElement("div",{ref:C,className:s,style:r,children:e}))),A):l.render(c.createElement("div",{ref:C,style:Z,className:s,children:e}),A)}));const G=c.useRef(!0);return o.useFrame((()=>{if(V.current){I.updateMatrixWorld(),V.current.updateWorldMatrix(!0,!1);const e=P?D.current:E(V.current,I,q);if(P||Math.abs(k.current-I.zoom)>t||Math.abs(D.current[0]-e[0])>t||Math.abs(D.current[1]-e[1])>t){const t=function(e,t){const r=u.setFromMatrixPosition(e.matrixWorld),n=d.setFromMatrixPosition(t.matrixWorld),o=r.sub(n),s=t.getWorldDirection(f);return o.angleTo(s)>Math.PI/2}(V.current,I);let r=!1;"boolean"==typeof w?!0===w&&(r=[N]):Array.isArray(w)&&(r=w.map((e=>e.current)));const o=G.current;if(r){const e=function(e,t,r,n){const o=u.setFromMatrixPosition(e.matrixWorld),s=o.clone();s.project(t),r.setFromCamera(s,t);const a=r.intersectObjects(n,!0);if(a.length){const e=a[0].distance;return o.distanceTo(r.ray.origin)<e}return!0}(V.current,I,_,r);G.current=e&&!t}else G.current=!t;if(o!==G.current&&(W?W(!G.current):A.style.display=G.current?"block":"none"),A.style.zIndex=`${function(e,t,r){if(t instanceof n.PerspectiveCamera||t instanceof n.OrthographicCamera){const n=u.setFromMatrixPosition(e.matrixWorld),o=d.setFromMatrixPosition(t.matrixWorld),s=n.distanceTo(o),a=(r[1]-r[0])/(t.far-t.near),i=r[1]-a*t.far;return Math.round(a*s+i)}}(V.current,I,$)}`,P){const[e,t]=[q.width/2,q.height/2],r=I.projectionMatrix.elements[5]*t,{isOrthographicCamera:n,top:o,left:s,bottom:a,right:i}=I,c=x(I.matrixWorldInverse),l=n?`scale(${r})translate(${p(-(i+s)/2)}px,${p((o+a)/2)}px)`:`translateZ(${r}px)`;let u=V.current.matrixWorld;M&&(u=I.matrixWorldInverse.clone().transpose().copyPosition(u).scale(V.current.scale),u.elements[3]=u.elements[7]=u.elements[11]=0,u.elements[15]=1),A.style.width=q.width+"px",A.style.height=q.height+"px",A.style.perspective=n?"":`${r}px`,L.current&&S.current&&(L.current.style.transform=`${l}${c}translate(${e}px,${t}px)`,S.current.style.transform=v(u,1/((g||10)/400)))}else{const t=void 0===g?1:function(e,t){if(t instanceof n.OrthographicCamera)return t.zoom;if(t instanceof n.PerspectiveCamera){const r=u.setFromMatrixPosition(e.matrixWorld),n=d.setFromMatrixPosition(t.matrixWorld),o=t.fov*Math.PI/180,s=r.distanceTo(n);return 1/(2*Math.tan(o/2)*s)}return 1}(V.current,I)*g;A.style.transform=`translate3d(${e[0]}px,${e[1]}px,0) scale(${t})`}D.current=e,k.current=I.zoom}}})),c.createElement("group",i.default({},T,{ref:V}))}));exports.Html=b;

package/web/Html.d.ts

@@ -22,6 +22,7 @@ export interface HtmlProps extends Omit<Assign<React.HTMLAttributes<HTMLDivEleme
     onOcclude?: (visible: boolean) => null;
     calculatePosition?: CalculatePosition;
     as?: string;
+    wrapperClass?: string;
     pointerEvents?: PointerEventsProperties;
 }
 export declare const Html: React.ForwardRefExoticComponent<HtmlProps & React.RefAttributes<HTMLDivElement>>;

package/web/Html.js

@@ -105,6 +105,7 @@ const Html = /*#__PURE__*/React.forwardRef(({
   zIndexRange = [16777271, 0],
   calculatePosition = defaultCalculatePosition,
   as = 'div',
+  wrapperClass,
   pointerEvents = 'auto',
   ...props
 }, ref) => {
@@ -153,6 +154,9 @@ const Html = /*#__PURE__*/React.forwardRef(({
       };
     }
   }, [target, transform]);
+  React.useLayoutEffect(() => {
+    if (wrapperClass) el.className = wrapperClass;
+  }, [wrapperClass]);
   const styles = React.useMemo(() => {
     if (transform) {
       return {