@react-three/drei 7.19.1 → 7.19.6

package/package.json

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

package/web/ScrollControls.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"),s=require("react-dom"),o=require("@react-three/fiber"),n=require("react-merge-refs");function l(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function i(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(r){if("default"!==r){var s=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,s.get?s:{enumerable:!0,get:function(){return e[r]}})}})),t.default=e,Object.freeze(t)}var f=l(e),a=i(t),c=i(r),u=i(s),d=l(n);const h=c.createContext(null);function p(){return c.useContext(h)}const m=c.forwardRef((({children:e},t)=>{const r=c.useRef(null),s=p(),{width:n,height:l}=o.useThree((e=>e.viewport));return o.useFrame((()=>{r.current.position.x=s.horizontal?-n*(s.pages-1)*s.offset:0,r.current.position.y=s.horizontal?0:l*(s.pages-1)*s.offset})),c.createElement("group",{ref:d.default([t,r])},e)})),v=c.forwardRef((({children:e,style:t,...r},s)=>{const n=p(),l=c.useRef(null),{width:i,height:a}=o.useThree((e=>e.size)),m=c.useContext(o.context);return o.useFrame((()=>{n.delta>n.eps&&(l.current.style.transform=`translate3d(${n.horizontal?-i*(n.pages-1)*n.offset:0}px,${n.horizontal?0:a*(n.pages-1)*-n.offset}px,0)`)})),u.render(c.createElement("div",f.default({ref:d.default([s,l]),style:{...t,position:"absolute",top:0,left:0,willChange:"transform"}},r),c.createElement(h.Provider,{value:n},c.createElement(o.context.Provider,{value:m},e))),n.fixed),null})),y=c.forwardRef((({html:e,...t},r)=>{const s=e?v:m;return c.createElement(s,f.default({ref:r},t))}));exports.Scroll=y,exports.ScrollControls=function({eps:e=1e-5,enabled:t=!0,infinite:r,horizontal:s,pages:n=1,distance:l=1,damping:i=4,children:f}){const{gl:u,size:d,invalidate:p,events:m,raycaster:v}=o.useThree(),[y]=c.useState((()=>document.createElement("div"))),[g]=c.useState((()=>document.createElement("div"))),[w]=c.useState((()=>document.createElement("div"))),x=u.domElement.parentNode,E=c.useRef(0),b=c.useMemo((()=>({el:y,eps:e,fill:g,fixed:w,horizontal:s,damping:i,offset:0,delta:0,scroll:E,pages:n,range(e,t,r=0){const s=e-r,o=s+t+2*r;return this.offset<s?0:this.offset>o?1:(this.offset-s)/(o-s)},curve(e,t,r=0){return Math.sin(this.range(e,t,r)*Math.PI)},visible(e,t,r=0){const s=e-r,o=s+t+2*r;return this.offset>=s&&this.offset<=o}})),[e,i,s,n]);c.useEffect((()=>{y.style.position="absolute",y.style.width="100%",y.style.height="100%",y.style[s?"overflowX":"overflowY"]="auto",y.style[s?"overflowY":"overflowX"]="hidden",y.style.top="0px",y.style.left="0px",w.style.position="sticky",w.style.top="0px",w.style.left="0px",w.style.width="100%",w.style.height="100%",w.style.overflow="hidden",y.appendChild(w),g.style.height=s?"100%":n*l*100+"%",g.style.width=s?n*l*100+"%":"100%",g.style.pointerEvents="none",y.appendChild(g),x.appendChild(y),y[s?"scrollLeft":"scrollTop"]=1;const e=m.connected;requestAnimationFrame((()=>null==m.connect?void 0:m.connect(y)));const t=v.computeOffsets;return v.computeOffsets=({clientX:e,clientY:t})=>({offsetX:e,offsetY:t}),()=>{x.removeChild(y),v.computeOffsets=t,null==m.connect||m.connect(e)}}),[n,l,s,y,g,w,x]),c.useEffect((()=>{const e=d[s?"width":"height"],o=y[s?"scrollWidth":"scrollHeight"],n=o-e;let l=0,i=!0,f=!0;const a=e=>{if(t&&!f&&(p(),l=y[s?"scrollLeft":"scrollTop"],E.current=l/n,r)){if(!i)if(l>=n){const e=1-b.offset;y[s?"scrollLeft":"scrollTop"]=1,E.current=b.offset=-e,i=!0}else if(l<=0){const e=1+b.offset;y[s?"scrollLeft":"scrollTop"]=o,E.current=b.offset=e,i=!0}i&&setTimeout((()=>i=!1),40)}};y.addEventListener("scroll",a,{passive:!0}),requestAnimationFrame((()=>f=!1));const c=e=>y.scrollLeft+=e.deltaY/2;return s&&y.addEventListener("wheel",c,{passive:!0}),()=>{y.removeEventListener("scroll",a),s&&y.removeEventListener("wheel",c)}}),[y,d,r,b,p,s]);let O=0;return o.useFrame(((t,r)=>{b.offset=a.MathUtils.damp(O=b.offset,E.current,i,r),b.delta=a.MathUtils.damp(b.delta,Math.abs(O-b.offset),i,r),b.delta>e&&p()})),c.createElement(h.Provider,{value:b},f)},exports.useScroll=p;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),t=require("three"),r=require("react"),o=require("react-dom"),s=require("@react-three/fiber"),n=require("react-merge-refs");function l(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function i(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 f=l(e),c=i(t),a=i(r),u=i(o),d=l(n);const p=a.createContext(null);function h(){return a.useContext(p)}const m=a.forwardRef((({children:e},t)=>{const r=a.useRef(null),o=h(),{width:n,height:l}=s.useThree((e=>e.viewport));return s.useFrame((()=>{r.current.position.x=o.horizontal?-n*(o.pages-1)*o.offset:0,r.current.position.y=o.horizontal?0:l*(o.pages-1)*o.offset})),a.createElement("group",{ref:d.default([t,r])},e)})),v=a.forwardRef((({children:e,style:t,...r},o)=>{const n=h(),l=a.useRef(null),{width:i,height:c}=s.useThree((e=>e.size)),m=a.useContext(s.context);return s.useFrame((()=>{n.delta>n.eps&&(l.current.style.transform=`translate3d(${n.horizontal?-i*(n.pages-1)*n.offset:0}px,${n.horizontal?0:c*(n.pages-1)*-n.offset}px,0)`)})),u.render(a.createElement("div",f.default({ref:d.default([o,l]),style:{...t,position:"absolute",top:0,left:0,willChange:"transform"}},r),a.createElement(p.Provider,{value:n},a.createElement(s.context.Provider,{value:m},e))),n.fixed),null})),y=a.forwardRef((({html:e,...t},r)=>{const o=e?v:m;return a.createElement(o,f.default({ref:r},t))}));exports.Scroll=y,exports.ScrollControls=function({eps:e=1e-5,enabled:t=!0,infinite:r,horizontal:o,pages:n=1,distance:l=1,damping:i=4,children:f}){const{gl:u,size:d,invalidate:h,events:m,raycaster:v}=s.useThree(),[y]=a.useState((()=>document.createElement("div"))),[g]=a.useState((()=>document.createElement("div"))),[w]=a.useState((()=>document.createElement("div"))),x=u.domElement.parentNode,E=a.useRef(0),b=a.useMemo((()=>({el:y,eps:e,fill:g,fixed:w,horizontal:o,damping:i,offset:0,delta:0,scroll:E,pages:n,range(e,t,r=0){const o=e-r,s=o+t+2*r;return this.offset<o?0:this.offset>s?1:(this.offset-o)/(s-o)},curve(e,t,r=0){return Math.sin(this.range(e,t,r)*Math.PI)},visible(e,t,r=0){const o=e-r,s=o+t+2*r;return this.offset>=o&&this.offset<=s}})),[e,i,o,n]);a.useEffect((()=>{y.style.position="absolute",y.style.width="100%",y.style.height="100%",y.style[o?"overflowX":"overflowY"]="auto",y.style[o?"overflowY":"overflowX"]="hidden",y.style.top="0px",y.style.left="0px",w.style.position="sticky",w.style.top="0px",w.style.left="0px",w.style.width="100%",w.style.height="100%",w.style.overflow="hidden",y.appendChild(w),g.style.height=o?"100%":n*l*100+"%",g.style.width=o?n*l*100+"%":"100%",g.style.pointerEvents="none",y.appendChild(g),x.appendChild(y),y[o?"scrollLeft":"scrollTop"]=1;const e="boolean"!=typeof m.connected?m.connected:u.domElement;requestAnimationFrame((()=>null==m.connect?void 0:m.connect(y)));const t=v.computeOffsets;return v.computeOffsets=({clientX:e,clientY:t})=>({offsetX:e-x.offsetLeft,offsetY:t-x.offsetTop}),()=>{x.removeChild(y),v.computeOffsets=t,null==m.connect||m.connect(e)}}),[n,l,o,y,g,w,x]),a.useEffect((()=>{const e=d[o?"width":"height"],s=y[o?"scrollWidth":"scrollHeight"],n=s-e;let l=0,i=!0,f=!0;const c=e=>{if(t&&!f&&(h(),l=y[o?"scrollLeft":"scrollTop"],E.current=l/n,r)){if(!i)if(l>=n){const e=1-b.offset;y[o?"scrollLeft":"scrollTop"]=1,E.current=b.offset=-e,i=!0}else if(l<=0){const e=1+b.offset;y[o?"scrollLeft":"scrollTop"]=s,E.current=b.offset=e,i=!0}i&&setTimeout((()=>i=!1),40)}};y.addEventListener("scroll",c,{passive:!0}),requestAnimationFrame((()=>f=!1));const a=e=>y.scrollLeft+=e.deltaY/2;return o&&y.addEventListener("wheel",a,{passive:!0}),()=>{y.removeEventListener("scroll",c),o&&y.removeEventListener("wheel",a)}}),[y,d,r,b,h,o]);let L=0;return s.useFrame(((t,r)=>{b.offset=c.MathUtils.damp(L=b.offset,E.current,i,r),b.delta=c.MathUtils.damp(b.delta,Math.abs(L-b.offset),i,r),b.delta>e&&h()})),a.createElement(p.Provider,{value:b},f)},exports.useScroll=h;

package/web/ScrollControls.js

@@ -88,7 +88,7 @@ function ScrollControls({
     target.appendChild(el); // Init scroll one pixel in to allow upward/leftward scroll
 
     el[horizontal ? 'scrollLeft' : 'scrollTop'] = 1;
-    const oldTarget = events.connected;
+    const oldTarget = typeof events.connected !== 'boolean' ? events.connected : gl.domElement;
     requestAnimationFrame(() => events.connect == null ? void 0 : events.connect(el));
     const oldCompute = raycaster.computeOffsets;
 
@@ -96,8 +96,8 @@ function ScrollControls({
       clientX,
       clientY
     }) => ({
-      offsetX: clientX,
-      offsetY: clientY
+      offsetX: clientX - target.offsetLeft,
+      offsetY: clientY - target.offsetTop
     });
 
     return () => {