@react-three/drei 9.56.5 → 9.56.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-three/drei",
-  "version": "9.56.5",
+  "version": "9.56.7",
   "private": false,
   "description": "useful add-ons for react-three-fiber",
   "keywords": [
@@ -41,7 +41,7 @@
   "dependencies": {
     "@babel/runtime": "^7.11.2",
     "@react-spring/three": "^9.3.1",
-    "@use-gesture/react": "^10.2.0",
+    "@use-gesture/react": "^10.2.24",
     "camera-controls": "^2.0.0",
     "detect-gpu": "^5.0.8",
     "glsl-noise": "^0.0.0",

package/web/PresentationControls.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),t=require("react"),r=require("three"),o=require("@react-three/fiber"),n=require("@react-spring/three"),a=require("@use-gesture/react");function i(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 o=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,o.get?o:{enumerable:!0,get:function(){return e[r]}})}})),t.default=e,Object.freeze(t)}var u=i(e),l=s(t);exports.PresentationControls=function({enabled:e=!0,snap:t,global:i,cursor:s=!0,children:c,speed:f=1,rotation:m=[0,0,0],zoom:d=1,polar:g=[0,Math.PI/2],azimuth:b=[-1/0,1/0],config:p={mass:1,tension:170,friction:26}}){const{size:h,gl:M}=o.useThree(),y=l.useMemo((()=>[m[0]+g[0],m[0]+g[1]]),[m[0],g[0],g[1]]),E=l.useMemo((()=>[m[1]+b[0],m[1]+b[1]]),[m[1],b[0],b[1]]),v=l.useMemo((()=>[r.MathUtils.clamp(m[0],...y),r.MathUtils.clamp(m[1],...E),m[2]]),[m[0],m[1],m[2],y,E]),[j,O]=n.useSpring((()=>({scale:1,rotation:v,config:p})));l.useEffect((()=>{O.start({scale:1,rotation:v,config:p})}),[v]),l.useEffect((()=>(i&&s&&e&&(M.domElement.style.cursor="grab"),()=>{M.domElement.style.cursor="default"})),[i,s,M.domElement,e]);const P=a.useGesture({onHover:({last:t})=>{s&&!i&&e&&(M.domElement.style.cursor=t?"auto":"grab")},onDrag:({down:o,delta:[n,a],memo:[i,u]=j.rotation.animation.to||v})=>{if(!e)return[a,n];s&&(M.domElement.style.cursor=o?"grabbing":"grab"),n=r.MathUtils.clamp(u+n/h.width*Math.PI*f,...E),a=r.MathUtils.clamp(i+a/h.height*Math.PI*f,...y);const l=t&&!o&&"boolean"!=typeof t?t:p;return O.start({scale:o&&a>y[1]/2?d:1,rotation:t&&!o?v:[a,n,0],config:e=>"scale"===e?{...l,friction:3*l.friction}:l}),[a,n]}},{target:i?M.domElement:void 0});return l.createElement(n.a.group,u.default({},null==P?void 0:P(),j),c)};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),t=require("react"),r=require("three"),o=require("@react-three/fiber"),n=require("@react-spring/three"),a=require("@use-gesture/react");function s(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function u(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(r){if("default"!==r){var o=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,o.get?o:{enumerable:!0,get:function(){return e[r]}})}})),t.default=e,Object.freeze(t)}var i=s(e),c=u(t);exports.PresentationControls=function({enabled:e=!0,snap:t,global:s,domElement:u,cursor:l=!0,children:f,speed:d=1,rotation:m=[0,0,0],zoom:g=1,polar:h=[0,Math.PI/2],azimuth:b=[-1/0,1/0],config:p={mass:1,tension:170,friction:26}}){const y=o.useThree((e=>e.events)),M=o.useThree((e=>e.gl)),v=u||y.connected||M.domElement,{size:E}=o.useThree(),j=c.useMemo((()=>[m[0]+h[0],m[0]+h[1]]),[m[0],h[0],h[1]]),O=c.useMemo((()=>[m[1]+b[0],m[1]+b[1]]),[m[1],b[0],b[1]]),P=c.useMemo((()=>[r.MathUtils.clamp(m[0],...j),r.MathUtils.clamp(m[1],...O),m[2]]),[m[0],m[1],m[2],j,O]),[q,z]=n.useSpring((()=>({scale:1,rotation:P,config:p})));c.useEffect((()=>{z.start({scale:1,rotation:P,config:p})}),[P]),c.useEffect((()=>(s&&l&&e&&(v.style.cursor="grab",M.domElement.style.cursor=""),()=>{v.style.cursor="default",M.domElement.style.cursor="default"})),[s,l,v,e]);const U=a.useGesture({onHover:({last:t})=>{l&&!s&&e&&(v.style.cursor=t?"auto":"grab")},onDrag:({down:o,delta:[n,a],memo:[s,u]=q.rotation.animation.to||P})=>{if(!e)return[a,n];l&&(v.style.cursor=o?"grabbing":"grab"),n=r.MathUtils.clamp(u+n/E.width*Math.PI*d,...O),a=r.MathUtils.clamp(s+a/E.height*Math.PI*d,...j);const i=t&&!o&&"boolean"!=typeof t?t:p;return z.start({scale:o&&a>j[1]/2?g:1,rotation:t&&!o?P:[a,n,0],config:e=>"scale"===e?{...i,friction:3*i.friction}:i}),[a,n]}},{target:s?v:void 0});return c.createElement(n.a.group,i.default({},null==U?void 0:U(),q),f)};

package/web/PresentationControls.d.ts

@@ -12,5 +12,6 @@ export declare type PresentationControlProps = {
     config?: any;
     enabled?: boolean;
     children?: React.ReactNode;
+    domElement?: HTMLElement;
 };
-export declare function PresentationControls({ enabled, snap, global, cursor, children, speed, rotation, zoom, polar, azimuth, config, }: PresentationControlProps): JSX.Element;
+export declare function PresentationControls({ enabled, snap, global, domElement, cursor, children, speed, rotation, zoom, polar, azimuth, config, }: PresentationControlProps): JSX.Element;

package/web/PresentationControls.js

@@ -9,6 +9,7 @@ function PresentationControls({
   enabled = true,
   snap,
   global,
+  domElement,
   cursor = true,
   children,
   speed = 1,
@@ -22,9 +23,11 @@ function PresentationControls({
     friction: 26
   }
 }) {
+  const events = useThree(state => state.events);
+  const gl = useThree(state => state.gl);
+  const explDomElement = domElement || events.connected || gl.domElement;
   const {
-    size,
-    gl
+    size
   } = useThree();
   const rPolar = React.useMemo(() => [rotation[0] + polar[0], rotation[0] + polar[1]], [rotation[0], polar[0], polar[1]]);
   const rAzimuth = React.useMemo(() => [rotation[1] + azimuth[0], rotation[1] + azimuth[1]], [rotation[1], azimuth[0], azimuth[1]]);
@@ -40,14 +43,21 @@ function PresentationControls({
     config
   }), [rInitial]);
   React.useEffect(() => {
-    if (global && cursor && enabled) gl.domElement.style.cursor = 'grab';
-    return () => void (gl.domElement.style.cursor = 'default');
-  }, [global, cursor, gl.domElement, enabled]);
+    if (global && cursor && enabled) {
+      explDomElement.style.cursor = 'grab';
+      gl.domElement.style.cursor = '';
+    }
+
+    return () => {
+      explDomElement.style.cursor = 'default';
+      gl.domElement.style.cursor = 'default';
+    };
+  }, [global, cursor, explDomElement, enabled]);
   const bind = useGesture({
     onHover: ({
       last
     }) => {
-      if (cursor && !global && enabled) gl.domElement.style.cursor = last ? 'auto' : 'grab';
+      if (cursor && !global && enabled) explDomElement.style.cursor = last ? 'auto' : 'grab';
     },
     onDrag: ({
       down,
@@ -55,7 +65,7 @@ function PresentationControls({
       memo: [oldY, oldX] = spring.rotation.animation.to || rInitial
     }) => {
       if (!enabled) return [y, x];
-      if (cursor) gl.domElement.style.cursor = down ? 'grabbing' : 'grab';
+      if (cursor) explDomElement.style.cursor = down ? 'grabbing' : 'grab';
       x = MathUtils.clamp(oldX + x / size.width * Math.PI * speed, ...rAzimuth);
       y = MathUtils.clamp(oldY + y / size.height * Math.PI * speed, ...rPolar);
       const sConfig = snap && !down && typeof snap !== 'boolean' ? snap : config;
@@ -69,7 +79,7 @@ function PresentationControls({
       return [y, x];
     }
   }, {
-    target: global ? gl.domElement : undefined
+    target: global ? explDomElement : undefined
   });
   return /*#__PURE__*/React.createElement(a.group, _extends({}, bind == null ? void 0 : bind(), spring), children);
 }