@react-three/drei 9.56.5 → 9.56.7

package/README.md

@@ -362,6 +362,14 @@ type CameraControlsProps = {
   camera?: PerspectiveCamera | OrthographicCamera
   /** DOM element to connect to, default to the state's `gl` renderer */
   domElement?: HTMLElement
+  /** Reference this CameraControls instance as state's `controls` */
+  makeDefault?: boolean
+  /** Events callbacks, see: https://github.com/yomotsu/camera-controls#events */
+  onStart?: (e?: { type: 'controlstart' }) => void
+  onEnd?: (e?: { type: 'controlend' }) => void
+  onChange?: (e?: { type: 'update' }) => void
+  /** While "dragging", state's `events` are disabled by default(for performance). You can explicitly disable this optimisation, by setting this prop to true */
+  events?: boolean
 }
 ```
 
@@ -476,6 +484,7 @@ Semi-OrbitControls with spring-physics, polar zoom and snap-back, for presentati
   polar={[0, Math.PI / 2]} // Vertical limits
   azimuth={[-Infinity, Infinity]} // Horizontal limits
   config={{ mass: 1, tension: 170, friction: 26 }} // Spring config
+  domElement={events.connected} // The DOM element events for this controller will attach to
 >
   <mesh />
 </PresentationControls>

package/core/CameraControls.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),t=require("three"),r=require("react"),n=require("@react-three/fiber"),o=require("camera-controls");function a(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function s(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 u=a(e),c=s(t),l=s(r),d=a(o);const i=r.forwardRef(((e,t)=>{r.useMemo((()=>{d.default.install({THREE:c}),n.extend({CameraControlsImpl:d.default})}),[]);const{camera:o,domElement:a,onStart:s,onEnd:i,onChange:f,events:m,regress:v,...b}=e,E=n.useThree((e=>e.camera)),p=n.useThree((e=>e.gl)),h=n.useThree((e=>e.invalidate)),j=n.useThree((e=>e.events)),g=n.useThree((e=>e.setEvents)),O=n.useThree((e=>e.performance)),T=o||E,L=a||j.connected||p.domElement,q=r.useMemo((()=>new d.default(T)),[T]);return n.useFrame(((e,t)=>{q.enabled&&q.update(t)}),-1),r.useEffect((()=>(q.connect(L),()=>{q.disconnect()})),[L,q]),l.useEffect((()=>{m&&g({enabled:!0});const e=e=>{h(),v&&O.regress(),f&&f(e)},t=e=>{s&&s(e),m||g({enabled:!1})},r=e=>{i&&i(e),m||g({enabled:!0})};return q.addEventListener("control",e),q.addEventListener("controlstart",t),q.addEventListener("controlend",r),()=>{q.removeEventListener("control",e),q.removeEventListener("controlstart",t),q.removeEventListener("controlend",r)}}),[q,m,s,i,h,g,v,f]),l.createElement("primitive",u.default({ref:t,object:q},b))}));exports.CameraControls=i;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),t=require("three"),r=require("react"),n=require("@react-three/fiber"),o=require("camera-controls");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 u=s(e),c=a(t),l=a(r),d=s(o);const f=r.forwardRef(((e,t)=>{r.useMemo((()=>{d.default.install({THREE:c}),n.extend({CameraControlsImpl:d.default})}),[]);const{camera:o,domElement:s,makeDefault:a,onStart:f,onEnd:i,onChange:m,events:v,regress:E,...b}=e,p=n.useThree((e=>e.camera)),h=n.useThree((e=>e.gl)),T=n.useThree((e=>e.invalidate)),g=n.useThree((e=>e.events)),j=n.useThree((e=>e.setEvents)),O=n.useThree((e=>e.set)),L=n.useThree((e=>e.get)),q=n.useThree((e=>e.performance)),y=o||p,C=s||g.connected||h.domElement,x=r.useMemo((()=>new d.default(y)),[y]);return n.useFrame(((e,t)=>{x.enabled&&x.update(t)}),-1),r.useEffect((()=>(x.connect(C),()=>{x.disconnect()})),[C,x]),l.useEffect((()=>{v&&j({enabled:!0});const e=e=>{T(),E&&q.regress(),m&&m(e)},t=e=>{f&&f(e),v||j({enabled:!1})},r=e=>{i&&i(e),v||j({enabled:!0})};return x.addEventListener("update",e),x.addEventListener("controlstart",t),x.addEventListener("controlend",r),()=>{x.removeEventListener("update",e),x.removeEventListener("controlstart",t),x.removeEventListener("controlend",r)}}),[x,v,f,i,T,j,E,m]),r.useEffect((()=>{if(a){const e=L().controls;return O({controls:x}),()=>O({controls:e})}}),[a,x]),l.createElement("primitive",u.default({ref:t,object:x},b))}));exports.CameraControls=f;

package/core/CameraControls.d.ts

@@ -5,6 +5,7 @@ import CameraControlsImpl from 'camera-controls';
 export declare type CameraControlsProps = Omit<ReactThreeFiber.Overwrite<ReactThreeFiber.Node<CameraControlsImpl, typeof CameraControlsImpl>, {
     camera?: PerspectiveCamera | OrthographicCamera;
     domElement?: HTMLElement;
+    makeDefault?: boolean;
     onStart?: (e?: {
         type: 'controlstart';
     }) => void;
@@ -12,7 +13,7 @@ export declare type CameraControlsProps = Omit<ReactThreeFiber.Overwrite<ReactTh
         type: 'controlend';
     }) => void;
     onChange?: (e?: {
-        type: 'control';
+        type: 'update';
     }) => void;
     events?: boolean;
     regress?: boolean;

package/core/CameraControls.js

@@ -17,6 +17,7 @@ const CameraControls = /*#__PURE__*/forwardRef((props, ref) => {
   const {
     camera,
     domElement,
+    makeDefault,
     onStart,
     onEnd,
     onChange,
@@ -29,17 +30,19 @@ const CameraControls = /*#__PURE__*/forwardRef((props, ref) => {
   const invalidate = useThree(state => state.invalidate);
   const events = useThree(state => state.events);
   const setEvents = useThree(state => state.setEvents);
+  const set = useThree(state => state.set);
+  const get = useThree(state => state.get);
   const performance = useThree(state => state.performance);
   const explCamera = camera || defaultCamera;
   const explDomElement = domElement || events.connected || gl.domElement;
-  const cameraControls = useMemo(() => new CameraControlsImpl(explCamera), [explCamera]);
+  const controls = useMemo(() => new CameraControlsImpl(explCamera), [explCamera]);
   useFrame((state, delta) => {
-    if (cameraControls.enabled) cameraControls.update(delta);
+    if (controls.enabled) controls.update(delta);
   }, -1);
   useEffect(() => {
-    cameraControls.connect(explDomElement);
-    return () => void cameraControls.disconnect();
-  }, [explDomElement, cameraControls]);
+    controls.connect(explDomElement);
+    return () => void controls.disconnect();
+  }, [explDomElement, controls]);
   React.useEffect(() => {
     if (enableEvents) {
       setEvents({
@@ -67,18 +70,29 @@ const CameraControls = /*#__PURE__*/forwardRef((props, ref) => {
       });
     };
 
-    cameraControls.addEventListener('control', callback);
-    cameraControls.addEventListener('controlstart', onStartCb);
-    cameraControls.addEventListener('controlend', onEndCb);
+    controls.addEventListener('update', callback);
+    controls.addEventListener('controlstart', onStartCb);
+    controls.addEventListener('controlend', onEndCb);
     return () => {
-      cameraControls.removeEventListener('control', callback);
-      cameraControls.removeEventListener('controlstart', onStartCb);
-      cameraControls.removeEventListener('controlend', onEndCb);
+      controls.removeEventListener('update', callback);
+      controls.removeEventListener('controlstart', onStartCb);
+      controls.removeEventListener('controlend', onEndCb);
     };
-  }, [cameraControls, enableEvents, onStart, onEnd, invalidate, setEvents, regress, onChange]);
+  }, [controls, enableEvents, onStart, onEnd, invalidate, setEvents, regress, onChange]);
+  useEffect(() => {
+    if (makeDefault) {
+      const old = get().controls;
+      set({
+        controls: controls
+      });
+      return () => set({
+        controls: old
+      });
+    }
+  }, [makeDefault, controls]);
   return /*#__PURE__*/React.createElement("primitive", _extends({
     ref: ref,
-    object: cameraControls
+    object: controls
   }, restProps));
 });
 

package/core/MapControls.d.ts

@@ -11,4 +11,4 @@ export declare type MapControlsProps = ReactThreeFiber.Overwrite<ReactThreeFiber
     onEnd?: (e?: THREE.Event) => void;
     domElement?: HTMLElement;
 }>;
-export declare const MapControls: React.ForwardRefExoticComponent<Pick<MapControlsProps, "object" | "attach" | "args" | "children" | "key" | "onUpdate" | "position" | "up" | "scale" | "rotation" | "matrix" | "quaternion" | "layers" | "dispose" | "addEventListener" | "hasEventListener" | "removeEventListener" | "dispatchEvent" | "onChange" | keyof import("@react-three/fiber/dist/declarations/src/core/events").EventHandlers | "camera" | "reset" | "enabled" | "connect" | "update" | "target" | "onStart" | "keys" | "touches" | "domElement" | "makeDefault" | "minDistance" | "maxDistance" | "minZoom" | "maxZoom" | "minPolarAngle" | "maxPolarAngle" | "minAzimuthAngle" | "maxAzimuthAngle" | "enableDamping" | "dampingFactor" | "enableZoom" | "zoomSpeed" | "enableRotate" | "rotateSpeed" | "enablePan" | "panSpeed" | "screenSpacePanning" | "keyPanSpeed" | "autoRotate" | "autoRotateSpeed" | "reverseOrbit" | "mouseButtons" | "target0" | "position0" | "zoom0" | "_domElementKeyEvents" | "getPolarAngle" | "getAzimuthalAngle" | "setPolarAngle" | "setAzimuthalAngle" | "getDistance" | "listenToKeyEvents" | "saveState" | "onEnd"> & React.RefAttributes<MapControlsImpl>>;
+export declare const MapControls: React.ForwardRefExoticComponent<Pick<MapControlsProps, "object" | "attach" | "args" | "children" | "key" | "onUpdate" | "position" | "up" | "scale" | "rotation" | "matrix" | "quaternion" | "layers" | "dispose" | "addEventListener" | "hasEventListener" | "removeEventListener" | "dispatchEvent" | "onChange" | keyof import("@react-three/fiber/dist/declarations/src/core/events").EventHandlers | "camera" | "reset" | "enabled" | "connect" | "update" | "target" | "domElement" | "onStart" | "keys" | "touches" | "makeDefault" | "minDistance" | "maxDistance" | "minZoom" | "maxZoom" | "minPolarAngle" | "maxPolarAngle" | "minAzimuthAngle" | "maxAzimuthAngle" | "enableDamping" | "dampingFactor" | "enableZoom" | "zoomSpeed" | "enableRotate" | "rotateSpeed" | "enablePan" | "panSpeed" | "screenSpacePanning" | "keyPanSpeed" | "autoRotate" | "autoRotateSpeed" | "reverseOrbit" | "mouseButtons" | "target0" | "position0" | "zoom0" | "_domElementKeyEvents" | "getPolarAngle" | "getAzimuthalAngle" | "setPolarAngle" | "setAzimuthalAngle" | "getDistance" | "listenToKeyEvents" | "saveState" | "onEnd"> & React.RefAttributes<MapControlsImpl>>;

package/core/TrackballControls.d.ts

@@ -12,4 +12,4 @@ export declare type TrackballControlsProps = ReactThreeFiber.Overwrite<ReactThre
     onStart?: (e?: THREE.Event) => void;
     onEnd?: (e?: THREE.Event) => void;
 }>;
-export declare const TrackballControls: React.ForwardRefExoticComponent<Pick<TrackballControlsProps, "object" | "attach" | "args" | "children" | "key" | "onUpdate" | "position" | "up" | "scale" | "rotation" | "matrix" | "quaternion" | "layers" | "dispose" | "addEventListener" | "hasEventListener" | "removeEventListener" | "dispatchEvent" | "onChange" | keyof import("@react-three/fiber/dist/declarations/src/core/events").EventHandlers | "camera" | "screen" | "reset" | "enabled" | "connect" | "update" | "target" | "onStart" | "keys" | "domElement" | "makeDefault" | "minDistance" | "maxDistance" | "zoomSpeed" | "rotateSpeed" | "panSpeed" | "mouseButtons" | "onEnd" | "regress" | "noRotate" | "noZoom" | "noPan" | "staticMoving" | "dynamicDampingFactor" | "cursorZoom" | "handleResize"> & React.RefAttributes<TrackballControlsImpl>>;
+export declare const TrackballControls: React.ForwardRefExoticComponent<Pick<TrackballControlsProps, "object" | "attach" | "args" | "children" | "key" | "onUpdate" | "position" | "up" | "scale" | "rotation" | "matrix" | "quaternion" | "layers" | "dispose" | "addEventListener" | "hasEventListener" | "removeEventListener" | "dispatchEvent" | "onChange" | keyof import("@react-three/fiber/dist/declarations/src/core/events").EventHandlers | "camera" | "screen" | "reset" | "enabled" | "connect" | "update" | "target" | "domElement" | "onStart" | "keys" | "makeDefault" | "minDistance" | "maxDistance" | "zoomSpeed" | "rotateSpeed" | "panSpeed" | "mouseButtons" | "onEnd" | "regress" | "noRotate" | "noZoom" | "noPan" | "staticMoving" | "dynamicDampingFactor" | "cursorZoom" | "handleResize"> & React.RefAttributes<TrackballControlsImpl>>;

package/core/TransformControls.d.ts

@@ -24,4 +24,4 @@ export declare type TransformControlsProps = ReactThreeFiber.Object3DNode<Transf
     onObjectChange?: (e?: THREE.Event) => void;
     makeDefault?: boolean;
 };
-export declare const TransformControls: React.ForwardRefExoticComponent<Pick<TransformControlsProps, "object" | "visible" | "attach" | "args" | "children" | "key" | "onUpdate" | "position" | "up" | "scale" | "rotation" | "matrix" | "quaternion" | "layers" | "dispose" | "type" | "isGroup" | "id" | "uuid" | "name" | "parent" | "modelViewMatrix" | "normalMatrix" | "matrixWorld" | "matrixAutoUpdate" | "matrixWorldNeedsUpdate" | "castShadow" | "receiveShadow" | "frustumCulled" | "renderOrder" | "animations" | "userData" | "customDepthMaterial" | "customDistanceMaterial" | "isObject3D" | "onBeforeRender" | "onAfterRender" | "applyMatrix4" | "applyQuaternion" | "setRotationFromAxisAngle" | "setRotationFromEuler" | "setRotationFromMatrix" | "setRotationFromQuaternion" | "rotateOnAxis" | "rotateOnWorldAxis" | "rotateX" | "rotateY" | "rotateZ" | "translateOnAxis" | "translateX" | "translateY" | "translateZ" | "localToWorld" | "worldToLocal" | "lookAt" | "add" | "remove" | "removeFromParent" | "clear" | "getObjectById" | "getObjectByName" | "getObjectByProperty" | "getWorldPosition" | "getWorldQuaternion" | "getWorldScale" | "getWorldDirection" | "raycast" | "traverse" | "traverseVisible" | "traverseAncestors" | "updateMatrix" | "updateMatrixWorld" | "updateWorldMatrix" | "toJSON" | "clone" | "copy" | "addEventListener" | "hasEventListener" | "removeEventListener" | "dispatchEvent" | "onChange" | "onMouseDown" | "onMouseUp" | keyof import("@react-three/fiber/dist/declarations/src/core/events").EventHandlers | "camera" | "size" | "space" | "reset" | "enabled" | "connect" | "update" | "setSize" | "axis" | "domElement" | "makeDefault" | "isTransformControls" | "detach" | "getMode" | "setMode" | "setTranslationSnap" | "setRotationSnap" | "setScaleSnap" | "setSpace" | "onObjectChange" | "mode" | "translationSnap" | "rotationSnap" | "scaleSnap" | "showX" | "showY" | "showZ"> & React.RefAttributes<TransformControlsImpl<THREE.Camera>>>;
+export declare const TransformControls: React.ForwardRefExoticComponent<Pick<TransformControlsProps, "object" | "visible" | "attach" | "args" | "children" | "key" | "onUpdate" | "position" | "up" | "scale" | "rotation" | "matrix" | "quaternion" | "layers" | "dispose" | "type" | "isGroup" | "id" | "uuid" | "name" | "parent" | "modelViewMatrix" | "normalMatrix" | "matrixWorld" | "matrixAutoUpdate" | "matrixWorldNeedsUpdate" | "castShadow" | "receiveShadow" | "frustumCulled" | "renderOrder" | "animations" | "userData" | "customDepthMaterial" | "customDistanceMaterial" | "isObject3D" | "onBeforeRender" | "onAfterRender" | "applyMatrix4" | "applyQuaternion" | "setRotationFromAxisAngle" | "setRotationFromEuler" | "setRotationFromMatrix" | "setRotationFromQuaternion" | "rotateOnAxis" | "rotateOnWorldAxis" | "rotateX" | "rotateY" | "rotateZ" | "translateOnAxis" | "translateX" | "translateY" | "translateZ" | "localToWorld" | "worldToLocal" | "lookAt" | "add" | "remove" | "removeFromParent" | "clear" | "getObjectById" | "getObjectByName" | "getObjectByProperty" | "getWorldPosition" | "getWorldQuaternion" | "getWorldScale" | "getWorldDirection" | "raycast" | "traverse" | "traverseVisible" | "traverseAncestors" | "updateMatrix" | "updateMatrixWorld" | "updateWorldMatrix" | "toJSON" | "clone" | "copy" | "addEventListener" | "hasEventListener" | "removeEventListener" | "dispatchEvent" | "onChange" | "onMouseDown" | "onMouseUp" | keyof import("@react-three/fiber/dist/declarations/src/core/events").EventHandlers | "camera" | "size" | "space" | "reset" | "enabled" | "connect" | "update" | "setSize" | "domElement" | "axis" | "makeDefault" | "isTransformControls" | "detach" | "getMode" | "setMode" | "setTranslationSnap" | "setRotationSnap" | "setScaleSnap" | "setSpace" | "onObjectChange" | "mode" | "translationSnap" | "rotationSnap" | "scaleSnap" | "showX" | "showY" | "showZ"> & React.RefAttributes<TransformControlsImpl<THREE.Camera>>>;