@react-three/drei 7.16.5 → 7.17.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-three/drei",
-  "version": "7.16.5",
+  "version": "7.17.0",
   "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"),o=require("react-dom"),s=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 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=n(e),c=i(t),a=i(r),u=i(o),d=n(l);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:l,height:n}=s.useThree((e=>e.viewport));return s.useFrame((()=>{r.current.position.x=o.horizontal?-l*(o.pages-1)*o.offset:0,r.current.position.y=o.horizontal?0:n*(o.pages-1)*o.offset})),a.createElement("group",{ref:d.default([t,r])},e)})),v=a.forwardRef((({children:e,style:t,...r},o)=>{const l=h(),n=a.useRef(null),{width:i,height:c}=s.useThree((e=>e.size)),m=a.useContext(s.context);return s.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([o,n]),style:{...t,position:"absolute",top:0,left:0,willChange:"transform"}},r),a.createElement(p.Provider,{value:l},a.createElement(s.context.Provider,{value:m},e))),l.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,infinite:t,horizontal:r,pages:o=1,distance:l=1,damping:n=4,children:i}){const{gl:f,size:u,invalidate:d,events:h,raycaster:m}=s.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:o,range(e,t){const r=e+t;return this.offset<e?0:this.offset>r?1:(this.offset-e)/(r-e)},visible(e,t){const r=e+t;return this.offset>=e&&this.offset<=r}})),[e,n,r,o,v,y,g]);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%":o*l*100+"%",y.style.width=r?o*l*100+"%":"100%",y.style.pointerEvents="none",v.appendChild(y),w.appendChild(v),v[r?"scrollLeft":"scrollTop"]=1;const e=h.connected;requestAnimationFrame((()=>null==h.connect?void 0:h.connect(v)));const t=m.computeOffsets;return m.computeOffsets=({clientX:e,clientY:t})=>({offsetX:e,offsetY:t}),()=>{w.removeChild(v),m.computeOffsets=t,null==h.connect||h.connect(e)}}),[o,l,r,v,y,g,w,h,m]),a.useEffect((()=>{const e=u[r?"width":"height"],o=v[r?"scrollWidth":"scrollHeight"],s=o-e;let l=0,n=!1;const i=e=>{if(d(),l=v[r?"scrollLeft":"scrollTop"],x.current=l/s,t){if(!n)if(l>=s){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"]=o,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 s.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(p.Provider,{value:E},i)},exports.useScroll=h;
+"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;

package/web/ScrollControls.d.ts

@@ -18,11 +18,15 @@ export declare type ScrollControlsState = {
     offset: number;
     delta: number;
     pages: number;
-    range(start: number, range: number): number;
-    visible(start: number, range: number): boolean;
+    range(from: number, distance: number, margin?: number): number;
+    curve(from: number, distance: number, margin?: number): number;
+    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 const Scroll: React.ForwardRefExoticComponent<{
-    html?: boolean | undefined;
-} & React.RefAttributes<unknown>>;
+declare type ScrollProps = {
+    html?: boolean;
+    children?: React.ReactNode;
+};
+export declare const Scroll: React.ForwardRefExoticComponent<ScrollProps & React.RefAttributes<unknown>>;
+export {};

package/web/ScrollControls.js

@@ -43,21 +43,28 @@ function ScrollControls({
       scroll,
       pages,
 
-      // 0 - 1 for a range between start -> start + range
-      range(start, range) {
-        const end = start + range;
+      // 0-1 for a range between from -> from + distance
+      range(from, distance, margin = 0) {
+        const start = from - margin;
+        const end = start + distance + margin * 2;
         return this.offset < start ? 0 : this.offset > end ? 1 : (this.offset - start) / (end - start);
       },
 
-      // true/false for a range between start -> start + range
-      visible(start, range) {
-        const end = start + range;
+      // 0-1-0 for a range between from -> from + distance
+      curve(from, distance, margin = 0) {
+        return Math.sin(this.range(from, distance, margin) * Math.PI);
+      },
+
+      // true/false for a range between from -> from + distance
+      visible(from, distance, margin = 0) {
+        const start = from - margin;
+        const end = start + distance + margin * 2;
         return this.offset >= start && this.offset <= end;
       }
 
     };
     return state;
-  }, [eps, damping, horizontal, pages, el, fill, fixed]);
+  }, [eps, damping, horizontal, pages]);
   React.useEffect(() => {
     el.style.position = 'absolute';
     el.style.width = '100%';
@@ -97,7 +104,7 @@ function ScrollControls({
       raycaster.computeOffsets = oldCompute;
       events.connect == null ? void 0 : events.connect(oldTarget);
     };
-  }, [pages, distance, horizontal, el, fill, fixed, target, events, raycaster]);
+  }, [pages, distance, horizontal, el, fill, fixed, target]);
   React.useEffect(() => {
     const containerLength = size[horizontal ? 'width' : 'height'];
     const scrollLength = el[horizontal ? 'scrollWidth' : 'scrollHeight'];