@react-three/drei 9.30.2 → 9.31.0

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

package/core/pivotControls/index.d.ts

@@ -15,6 +15,7 @@ declare type PivotControlsProps = {
     disableAxes?: boolean;
     disableSliders?: boolean;
     disableRotations?: boolean;
+    translationLimits?: [[number, number] | undefined, [number, number] | undefined, [number, number] | undefined];
     rotationLimits?: [[number, number] | undefined, [number, number] | undefined, [number, number] | undefined];
     axisColors?: [string | number, string | number, string | number];
     hoveredColor?: string | number;
@@ -23,6 +24,7 @@ declare type PivotControlsProps = {
     onDrag?: (l: THREE.Matrix4, deltaL: THREE.Matrix4, w: THREE.Matrix4, deltaW: THREE.Matrix4) => void;
     onDragEnd?: () => void;
     depthTest?: boolean;
+    displayValues?: boolean;
     opacity?: number;
     visible?: boolean;
     userData?: {

package/core/pivotControls/index.js

@@ -72,10 +72,12 @@ const PivotControls = /*#__PURE__*/React.forwardRef(({
   scale = 1,
   lineWidth = 4,
   fixed = false,
+  translationLimits,
   rotationLimits,
   depthTest = true,
   axisColors = ['#ff2060', '#20df80', '#2080ff'],
   hoveredColor = '#ffff40',
+  displayValues = true,
   opacity = 1,
   visible = true,
   userData,
@@ -90,6 +92,7 @@ const PivotControls = /*#__PURE__*/React.forwardRef(({
   const ref = React.useRef(null);
   const gizmoRef = React.useRef(null);
   const childrenRef = React.useRef(null);
+  const translation = React.useRef([0, 0, 0]);
   React.useLayoutEffect(() => {
     if (!anchor) return;
     childrenRef.current.updateWorldMatrix(true, true);
@@ -133,6 +136,8 @@ const PivotControls = /*#__PURE__*/React.forwardRef(({
       if (onDragEnd) onDragEnd();
       invalidate();
     },
+    translation,
+    translationLimits,
     rotationLimits,
     axisColors,
     hoveredColor,
@@ -140,9 +145,10 @@ const PivotControls = /*#__PURE__*/React.forwardRef(({
     scale,
     lineWidth,
     fixed,
+    displayValues,
     depthTest,
     userData
-  }), [onDragStart, onDrag, onDragEnd, rotationLimits, depthTest, scale, lineWidth, fixed, ...axisColors, hoveredColor, opacity, userData, autoTransform]);
+  }), [onDragStart, onDrag, onDragEnd, translation, translationLimits, rotationLimits, depthTest, scale, lineWidth, fixed, ...axisColors, hoveredColor, opacity, displayValues, userData, autoTransform]);
   const vec = new THREE.Vector3();
   useFrame(state => {
     if (fixed) {