@react-three/drei 9.52.6 → 9.53.1

package/package.json

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

package/web/pivotControls/index.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("three"),r=require("react"),t=require("@react-three/fiber"),i=require("./AxisArrow.cjs.js"),o=require("./PlaneSlider.cjs.js"),n=require("./AxisRotator.cjs.js"),a=require("./context.cjs.js");function c(e){if(e&&e.__esModule)return e;var r=Object.create(null);return e&&Object.keys(e).forEach((function(t){if("default"!==t){var i=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(r,t,i.get?i:{enumerable:!0,get:function(){return e[t]}})}})),r.default=e,Object.freeze(r)}require("../../core/Line.cjs.js"),require("@babel/runtime/helpers/extends"),require("three-stdlib"),require("../Html.cjs.js"),require("react-dom/client"),require("lodash.clamp");var s=c(e),l=c(r);const u=new s.Vector3,d=new s.Vector3,x=new s.Vector3,p=(e,r,t,i=1)=>{const o=u.set(e.x/t.width*2-1,-e.y/t.height*2+1,i);return o.unproject(r),o},m=(e,r,t,i)=>{const o=((e,r,t)=>{const i=t.width/2,o=t.height/2;r.updateMatrixWorld(!1);const n=e.project(r);return n.x=n.x*i+i,n.y=-n.y*o+o,n})(x.copy(e),t,i);let n=0;for(let a=0;a<2;++a){const c=d.copy(o).setComponent(a,o.getComponent(a)+r),s=p(c,t,i,c.z);n=Math.max(n,e.distanceTo(s))}return n},f=new s.Matrix4,y=new s.Matrix4,w=new s.Matrix4,g=new s.Matrix4,v=new s.Matrix4,h=new s.Matrix4,j=new s.Matrix4,b=new s.Matrix4,E=new s.Box3,A=new s.Box3,M=new s.Vector3,q=new s.Vector3,V=new s.Vector3,R=new s.Vector3,S=new s.Vector3(1,0,0),P=new s.Vector3(0,1,0),C=new s.Vector3(0,0,1),D=l.forwardRef((({matrix:e,onDragStart:r,onDrag:c,onDragEnd:u,autoTransform:d=!0,anchor:x,disableAxes:p=!1,disableSliders:D=!1,disableRotations:W=!1,activeAxes:O=[!0,!0,!0],offset:B=[0,0,0],rotation:L=[0,0,0],scale:T=1,lineWidth:z=4,fixed:_=!1,translationLimits:k,rotationLimits:F,depthTest:H=!0,axisColors:I=["#ff2060","#20df80","#2080ff"],hoveredColor:U="#ffff40",annotations:G=!1,annotationsClass:J,opacity:K=1,visible:N=!0,userData:Q,children:X},Y)=>{const Z=t.useThree((e=>e.invalidate)),$=l.useRef(null),ee=l.useRef(null),re=l.useRef(null),te=l.useRef(null),ie=l.useRef([0,0,0]);l.useLayoutEffect((()=>{x&&(te.current.updateWorldMatrix(!0,!0),g.copy(te.current.matrixWorld).invert(),E.makeEmpty(),te.current.traverse((e=>{e.geometry&&(e.geometry.boundingBox||e.geometry.computeBoundingBox(),h.copy(e.matrixWorld).premultiply(g),A.copy(e.geometry.boundingBox),A.applyMatrix4(h),E.union(A))})),M.copy(E.max).add(E.min).multiplyScalar(.5),q.copy(E.max).sub(E.min).multiplyScalar(.5),V.copy(q).multiply(new s.Vector3(...x)).add(M),R.set(...B).add(V),re.current.position.copy(R),Z())}));const oe=l.useMemo((()=>({onDragStart:e=>{f.copy(ee.current.matrix),y.copy(ee.current.matrixWorld),r&&r(e),Z()},onDrag:e=>{w.copy($.current.matrixWorld),g.copy(w).invert(),v.copy(y).premultiply(e),h.copy(v).premultiply(g),j.copy(f).invert(),b.copy(h).multiply(j),d&&ee.current.matrix.copy(h),c&&c(h,b,v,e),Z()},onDragEnd:()=>{u&&u(),Z()},translation:ie,translationLimits:k,rotationLimits:F,axisColors:I,hoveredColor:U,opacity:K,scale:T,lineWidth:z,fixed:_,depthTest:H,userData:Q,annotations:G,annotationsClass:J})),[r,c,u,ie,k,F,H,T,z,_,...I,U,K,Q,d,G,J]),ne=new s.Vector3;return t.useFrame((e=>{if(_){const o=m(re.current.getWorldPosition(ne),T,e.camera,e.size);var r,t,i;if(re.current)(null==(r=re.current)?void 0:r.scale.x)===o&&(null==(t=re.current)?void 0:t.scale.y)===o&&(null==(i=re.current)?void 0:i.scale.z)===o||(re.current.scale.setScalar(o),e.invalidate())}})),l.useImperativeHandle(Y,(()=>ee.current),[]),l.createElement(a.context.Provider,{value:oe},l.createElement("group",{ref:$},l.createElement("group",{ref:ee,matrix:e,matrixAutoUpdate:!1},l.createElement("group",{visible:N,ref:re,position:B,rotation:L},!p&&O[0]&&l.createElement(i.AxisArrow,{axis:0,direction:S}),!p&&O[1]&&l.createElement(i.AxisArrow,{axis:1,direction:P}),!p&&O[2]&&l.createElement(i.AxisArrow,{axis:2,direction:C}),!D&&O[0]&&O[1]&&l.createElement(o.PlaneSlider,{axis:2,dir1:S,dir2:P}),!D&&O[0]&&O[2]&&l.createElement(o.PlaneSlider,{axis:1,dir1:C,dir2:S}),!D&&O[2]&&O[1]&&l.createElement(o.PlaneSlider,{axis:0,dir1:P,dir2:C}),!W&&O[0]&&O[1]&&l.createElement(n.AxisRotator,{axis:2,dir1:S,dir2:P}),!W&&O[0]&&O[2]&&l.createElement(n.AxisRotator,{axis:1,dir1:C,dir2:S}),!W&&O[2]&&O[1]&&l.createElement(n.AxisRotator,{axis:0,dir1:P,dir2:C})),l.createElement("group",{ref:te},X))))}));exports.PivotControls=D,exports.calculateScaleFactor=m;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),r=require("three"),t=require("react"),i=require("@react-three/fiber"),o=require("./AxisArrow.cjs.js"),n=require("./PlaneSlider.cjs.js"),a=require("./AxisRotator.cjs.js"),c=require("./context.cjs.js");function s(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function l(e){if(e&&e.__esModule)return e;var r=Object.create(null);return e&&Object.keys(e).forEach((function(t){if("default"!==t){var i=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(r,t,i.get?i:{enumerable:!0,get:function(){return e[t]}})}})),r.default=e,Object.freeze(r)}require("../../core/Line.cjs.js"),require("three-stdlib"),require("../Html.cjs.js"),require("react-dom/client"),require("lodash.clamp");var u=s(e),d=l(r),x=l(t);const p=new d.Vector3,m=new d.Vector3,f=new d.Vector3,y=(e,r,t,i=1)=>{const o=p.set(e.x/t.width*2-1,-e.y/t.height*2+1,i);return o.unproject(r),o},w=(e,r,t,i)=>{const o=((e,r,t)=>{const i=t.width/2,o=t.height/2;r.updateMatrixWorld(!1);const n=e.project(r);return n.x=n.x*i+i,n.y=-n.y*o+o,n})(f.copy(e),t,i);let n=0;for(let a=0;a<2;++a){const c=m.copy(o).setComponent(a,o.getComponent(a)+r),s=y(c,t,i,c.z);n=Math.max(n,e.distanceTo(s))}return n},g=new d.Matrix4,v=new d.Matrix4,h=new d.Matrix4,j=new d.Matrix4,b=new d.Matrix4,E=new d.Matrix4,M=new d.Matrix4,A=new d.Matrix4,q=new d.Box3,V=new d.Box3,R=new d.Vector3,S=new d.Vector3,P=new d.Vector3,C=new d.Vector3,D=new d.Vector3(1,0,0),W=new d.Vector3(0,1,0),L=new d.Vector3(0,0,1),O=x.forwardRef((({matrix:e,onDragStart:r,onDrag:t,onDragEnd:s,autoTransform:l=!0,anchor:p,disableAxes:m=!1,disableSliders:f=!1,disableRotations:y=!1,activeAxes:O=[!0,!0,!0],offset:B=[0,0,0],rotation:T=[0,0,0],scale:z=1,lineWidth:_=4,fixed:k=!1,translationLimits:F,rotationLimits:H,depthTest:I=!0,axisColors:U=["#ff2060","#20df80","#2080ff"],hoveredColor:G="#ffff40",annotations:J=!1,annotationsClass:K,opacity:N=1,visible:Q=!0,userData:X,children:Y,...Z},$)=>{const ee=i.useThree((e=>e.invalidate)),re=x.useRef(null),te=x.useRef(null),ie=x.useRef(null),oe=x.useRef(null),ne=x.useRef([0,0,0]);x.useLayoutEffect((()=>{p&&(oe.current.updateWorldMatrix(!0,!0),j.copy(oe.current.matrixWorld).invert(),q.makeEmpty(),oe.current.traverse((e=>{e.geometry&&(e.geometry.boundingBox||e.geometry.computeBoundingBox(),E.copy(e.matrixWorld).premultiply(j),V.copy(e.geometry.boundingBox),V.applyMatrix4(E),q.union(V))})),R.copy(q.max).add(q.min).multiplyScalar(.5),S.copy(q.max).sub(q.min).multiplyScalar(.5),P.copy(S).multiply(new d.Vector3(...p)).add(R),C.set(...B).add(P),ie.current.position.copy(C),ee())}));const ae=x.useMemo((()=>({onDragStart:e=>{g.copy(te.current.matrix),v.copy(te.current.matrixWorld),r&&r(e),ee()},onDrag:e=>{h.copy(re.current.matrixWorld),j.copy(h).invert(),b.copy(v).premultiply(e),E.copy(b).premultiply(j),M.copy(g).invert(),A.copy(E).multiply(M),l&&te.current.matrix.copy(E),t&&t(E,A,b,e),ee()},onDragEnd:()=>{s&&s(),ee()},translation:ne,translationLimits:F,rotationLimits:H,axisColors:U,hoveredColor:G,opacity:N,scale:z,lineWidth:_,fixed:k,depthTest:I,userData:X,annotations:J,annotationsClass:K})),[r,t,s,ne,F,H,I,z,_,k,...U,G,N,X,l,J,K]),ce=new d.Vector3;return i.useFrame((e=>{if(k){const o=w(ie.current.getWorldPosition(ce),z,e.camera,e.size);var r,t,i;if(ie.current)(null==(r=ie.current)?void 0:r.scale.x)===o&&(null==(t=ie.current)?void 0:t.scale.y)===o&&(null==(i=ie.current)?void 0:i.scale.z)===o||(ie.current.scale.setScalar(o),e.invalidate())}})),x.useImperativeHandle($,(()=>te.current),[]),x.useLayoutEffect((()=>{e&&e instanceof d.Matrix4&&(te.current.matrix=e)}),[e]),x.createElement(c.context.Provider,{value:ae},x.createElement("group",{ref:re},x.createElement("group",u.default({ref:te,matrix:e,matrixAutoUpdate:!1},Z),x.createElement("group",{visible:Q,ref:ie,position:B,rotation:T},!m&&O[0]&&x.createElement(o.AxisArrow,{axis:0,direction:D}),!m&&O[1]&&x.createElement(o.AxisArrow,{axis:1,direction:W}),!m&&O[2]&&x.createElement(o.AxisArrow,{axis:2,direction:L}),!f&&O[0]&&O[1]&&x.createElement(n.PlaneSlider,{axis:2,dir1:D,dir2:W}),!f&&O[0]&&O[2]&&x.createElement(n.PlaneSlider,{axis:1,dir1:L,dir2:D}),!f&&O[2]&&O[1]&&x.createElement(n.PlaneSlider,{axis:0,dir1:W,dir2:L}),!y&&O[0]&&O[1]&&x.createElement(a.AxisRotator,{axis:2,dir1:D,dir2:W}),!y&&O[0]&&O[2]&&x.createElement(a.AxisRotator,{axis:1,dir1:L,dir2:D}),!y&&O[2]&&O[1]&&x.createElement(a.AxisRotator,{axis:0,dir1:W,dir2:L})),x.createElement("group",{ref:oe},Y))))}));exports.PivotControls=O,exports.calculateScaleFactor=w;

package/web/pivotControls/index.js

@@ -1,3 +1,4 @@
+import _extends from '@babel/runtime/helpers/esm/extends';
 import * as THREE from 'three';
 import * as React from 'react';
 import { useThree, useFrame } from '@react-three/fiber';
@@ -81,7 +82,8 @@ const PivotControls = /*#__PURE__*/React.forwardRef(({
   opacity = 1,
   visible = true,
   userData,
-  children
+  children,
+  ...props
 }, fRef) => {
   const invalidate = useThree(state => state.invalidate);
   const parentRef = React.useRef(null);
@@ -162,15 +164,20 @@ const PivotControls = /*#__PURE__*/React.forwardRef(({
     }
   });
   React.useImperativeHandle(fRef, () => ref.current, []);
+  React.useLayoutEffect(() => {
+    // If the matrix is a real matrix4 it means that the user wants to control the gizmo
+    // In that case it should just be set, as a bare prop update would merely copy it
+    if (matrix && matrix instanceof THREE.Matrix4) ref.current.matrix = matrix;
+  }, [matrix]);
   return /*#__PURE__*/React.createElement(context.Provider, {
     value: config
   }, /*#__PURE__*/React.createElement("group", {
     ref: parentRef
-  }, /*#__PURE__*/React.createElement("group", {
+  }, /*#__PURE__*/React.createElement("group", _extends({
     ref: ref,
     matrix: matrix,
     matrixAutoUpdate: false
-  }, /*#__PURE__*/React.createElement("group", {
+  }, props), /*#__PURE__*/React.createElement("group", {
     visible: visible,
     ref: gizmoRef,
     position: offset,