@react-three/drei 7.17.1 → 7.17.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-three/drei",
-  "version": "7.17.1",
+  "version": "7.17.2",
   "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"),l=require("react-merge-refs");function n(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=n(e),c=i(t),a=i(r),u=i(s),d=n(l);const h=a.createContext(null);function p(){return a.useContext(h)}const m=a.forwardRef((({children:e},t)=>{const r=a.useRef(null),s=p(),{width:l,height:n}=o.useThree((e=>e.viewport));return o.useFrame((()=>{r.current.position.x=s.horizontal?-l*(s.pages-1)*s.offset:0,r.current.position.y=s.horizontal?0:n*(s.pages-1)*s.offset})),a.createElement("group",{ref:d.default([t,r])},e)})),v=a.forwardRef((({children:e,style:t,...r},s)=>{const l=p(),n=a.useRef(null),{width:i,height:c}=o.useThree((e=>e.size)),m=a.useContext(o.context);return o.useFrame((()=>{l.delta>l.eps&&(n.current.style.transform=`translate3d(${l.horizontal?-i*(l.pages-1)*l.offset:0}px,${l.horizontal?0:c*(l.pages-1)*-l.offset}px,0)`)})),u.render(a.createElement("div",f.default({ref:d.default([s,n]),style:{...t,position:"absolute",top:0,left:0,willChange:"transform"}},r),a.createElement(h.Provider,{value:l},a.createElement(o.context.Provider,{value:m},e))),l.fixed),null})),y=a.forwardRef((({html:e,...t},r)=>{const s=e?v:m;return a.createElement(s,f.default({ref:r},t))}));exports.Scroll=y,exports.ScrollControls=function({eps:e=1e-5,infinite:t,horizontal:r,pages:s=1,distance:l=1,damping:n=4,children:i}){const{gl:f,size:u,invalidate:d,events:p,raycaster:m}=o.useThree(),[v]=a.useState((()=>document.createElement("div"))),[y]=a.useState((()=>document.createElement("div"))),[g]=a.useState((()=>document.createElement("div"))),w=f.domElement.parentNode,x=a.useRef(0),E=a.useMemo((()=>({el:v,eps:e,fill:y,fixed:g,horizontal:r,damping:n,offset:0,delta:0,scroll:x,pages:s,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,n,r,s]);a.useEffect((()=>{v.style.position="absolute",v.style.width="100%",v.style.height="100%",v.style[r?"overflowX":"overflowY"]="auto",v.style[r?"overflowY":"overflowX"]="hidden",v.style.top="0px",v.style.left="0px",g.style.position="sticky",g.style.top="0px",g.style.left="0px",g.style.width="100%",g.style.height="100%",g.style.overflow="hidden",v.appendChild(g),y.style.height=r?"100%":s*l*100+"%",y.style.width=r?s*l*100+"%":"100%",y.style.pointerEvents="none",v.appendChild(y),w.appendChild(v),v[r?"scrollLeft":"scrollTop"]=1;const e=p.connected;requestAnimationFrame((()=>null==p.connect?void 0:p.connect(v)));const t=m.computeOffsets;return m.computeOffsets=({clientX:e,clientY:t})=>({offsetX:e,offsetY:t}),()=>{w.removeChild(v),m.computeOffsets=t,null==p.connect||p.connect(e)}}),[s,l,r,v,y,g,w]),a.useEffect((()=>{const e=u[r?"width":"height"],s=v[r?"scrollWidth":"scrollHeight"],o=s-e;let l=0,n=!1;const i=e=>{if(d(),l=v[r?"scrollLeft":"scrollTop"],x.current=l/o,t){if(!n)if(l>=o){const e=1-E.offset;v[r?"scrollLeft":"scrollTop"]=1,x.current=E.offset=-e,n=!0}else if(l<=0){const e=1+E.offset;v[r?"scrollLeft":"scrollTop"]=s,x.current=E.offset=e,n=!0}n&&setTimeout((()=>n=!1),40)}};v.addEventListener("scroll",i,{passive:!0});const f=e=>v.scrollLeft+=e.deltaY/2;return r&&v.addEventListener("wheel",f,{passive:!0}),()=>{v.removeEventListener("scroll",i),r&&v.removeEventListener("wheel",f)}}),[v,u,t,E,d,r]);let b=0;return o.useFrame(((t,r)=>{E.offset=c.MathUtils.damp(b=E.offset,x.current,n,r),E.delta=c.MathUtils.damp(E.delta,Math.abs(b-E.offset),n,r),E.delta>e&&d()})),a.createElement(h.Provider,{value:E},i)},exports.useScroll=p;
+"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;

package/web/ScrollControls.d.ts

@@ -6,6 +6,7 @@ export declare type ScrollControlsProps = {
     pages?: number;
     distance?: number;
     damping?: number;
+    enabled?: boolean;
     children: React.ReactNode;
 };
 export declare type ScrollControlsState = {
@@ -23,7 +24,7 @@ export declare type ScrollControlsState = {
     visible(from: number, distance: number, margin?: number): boolean;
 };
 export declare function useScroll(): ScrollControlsState;
-export declare function ScrollControls({ eps, infinite, horizontal, pages, distance, damping, children, }: ScrollControlsProps): JSX.Element;
+export declare function ScrollControls({ eps, enabled, infinite, horizontal, pages, distance, damping, children, }: ScrollControlsProps): JSX.Element;
 declare type ScrollProps = {
     html?: boolean;
     children?: React.ReactNode;

package/web/ScrollControls.js

@@ -11,6 +11,7 @@ function useScroll() {
 }
 function ScrollControls({
   eps = 0.00001,
+  enabled = true,
   infinite,
   horizontal,
   pages = 1,
@@ -110,9 +111,12 @@ function ScrollControls({
     const scrollLength = el[horizontal ? 'scrollWidth' : 'scrollHeight'];
     const scrollThreshold = scrollLength - containerLength;
     let current = 0;
-    let disableScroll = false;
+    let disableScroll = true;
+    let firstRun = true;
 
     const onScroll = e => {
+      // Prevent first scroll because it is indirectly caused by the one pixel offset
+      if (!enabled || firstRun) return;
       invalidate();
       current = el[horizontal ? 'scrollLeft' : 'scrollTop'];
       scroll.current = current / scrollThreshold;
@@ -139,6 +143,7 @@ function ScrollControls({
     el.addEventListener('scroll', onScroll, {
       passive: true
     });
+    requestAnimationFrame(() => firstRun = false);
 
     const onWheel = e => el.scrollLeft += e.deltaY / 2;