@react-three/drei 7.24.0 → 7.25.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-three/drei",
-  "version": "7.24.0",
+  "version": "7.25.3",
   "private": false,
   "description": "useful add-ons for react-three-fiber",
   "keywords": [
@@ -40,7 +40,7 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.11.2",
-    "detect-gpu": "^3.1.25",
+    "detect-gpu": "^3.1.28",
     "glsl-noise": "^0.0.0",
     "lodash.omit": "^4.5.0",
     "lodash.pick": "^4.4.0",
@@ -48,8 +48,8 @@
     "react-merge-refs": "^1.1.0",
     "stats.js": "^0.17.0",
     "three-mesh-bvh": "^0.5.2",
-    "three-stdlib": "^2.5.9",
-    "troika-three-text": "^0.43.0",
+    "three-stdlib": "^2.6.0",
+    "troika-three-text": "^0.44.0",
     "use-asset": "^1.0.4",
     "utility-types": "^3.10.0",
     "zustand": "^3.5.13"

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"),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;
+"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,style:f={},children:u}){const{gl:d,size:h,invalidate:m,events:v,raycaster:y}=s.useThree(),[g]=a.useState((()=>document.createElement("div"))),[w]=a.useState((()=>document.createElement("div"))),[x]=a.useState((()=>document.createElement("div"))),E=d.domElement.parentNode,b=a.useRef(0),L=a.useMemo((()=>({el:g,eps:e,fill:w,fixed:x,horizontal:o,damping:i,offset:0,delta:0,scroll:b,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((()=>{g.style.position="absolute",g.style.width="100%",g.style.height="100%",g.style[o?"overflowX":"overflowY"]="auto",g.style[o?"overflowY":"overflowX"]="hidden",g.style.top="0px",g.style.left="0px";for(const e in f)g.style[e]=f[e];x.style.position="sticky",x.style.top="0px",x.style.left="0px",x.style.width="100%",x.style.height="100%",x.style.overflow="hidden",g.appendChild(x),w.style.height=o?"100%":n*l*100+"%",w.style.width=o?n*l*100+"%":"100%",w.style.pointerEvents="none",g.appendChild(w),E.appendChild(g),g[o?"scrollLeft":"scrollTop"]=1;const e="boolean"!=typeof v.connected?v.connected:d.domElement;requestAnimationFrame((()=>null==v.connect?void 0:v.connect(g)));const t=y.computeOffsets;return y.computeOffsets=({clientX:e,clientY:t})=>({offsetX:e-E.offsetLeft,offsetY:t-E.offsetTop}),()=>{E.removeChild(g),y.computeOffsets=t,null==v.connect||v.connect(e)}}),[n,l,o,g,w,x,E]),a.useEffect((()=>{const e=h[o?"width":"height"],s=g[o?"scrollWidth":"scrollHeight"],n=s-e;let l=0,i=!0,f=!0;const c=e=>{if(t&&!f&&(m(),l=g[o?"scrollLeft":"scrollTop"],b.current=l/n,r)){if(!i)if(l>=n){const e=1-L.offset;g[o?"scrollLeft":"scrollTop"]=1,b.current=L.offset=-e,i=!0}else if(l<=0){const e=1+L.offset;g[o?"scrollLeft":"scrollTop"]=s,b.current=L.offset=e,i=!0}i&&setTimeout((()=>i=!1),40)}};g.addEventListener("scroll",c,{passive:!0}),requestAnimationFrame((()=>f=!1));const a=e=>g.scrollLeft+=e.deltaY/2;return o&&g.addEventListener("wheel",a,{passive:!0}),()=>{g.removeEventListener("scroll",c),o&&g.removeEventListener("wheel",a)}}),[g,h,r,L,m,o]);let O=0;return s.useFrame(((t,r)=>{L.offset=c.MathUtils.damp(O=L.offset,b.current,i,r),L.delta=c.MathUtils.damp(L.delta,Math.abs(O-L.offset),i,r),L.delta>e&&m()})),a.createElement(p.Provider,{value:L},u)},exports.useScroll=h;

package/web/ScrollControls.d.ts

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

package/web/ScrollControls.js

@@ -17,6 +17,7 @@ function ScrollControls({
   pages = 1,
   distance = 1,
   damping = 4,
+  style = {},
   children
 }) {
   const {
@@ -74,6 +75,11 @@ function ScrollControls({
     el.style[horizontal ? 'overflowY' : 'overflowX'] = 'hidden';
     el.style.top = '0px';
     el.style.left = '0px';
+
+    for (const key in style) {
+      el.style[key] = style[key];
+    }
+
     fixed.style.position = 'sticky';
     fixed.style.top = '0px';
     fixed.style.left = '0px';