@react-three/drei 7.16.0 → 7.16.4

package/package.json

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

package/web/ScrollControls.js

@@ -91,6 +91,14 @@ function ScrollControls({
     el.addEventListener('scroll', onScroll, {
       passive: true
     });
+
+    const onWheel = e => {
+      e.target.scrollLeft += e.deltaY / 2;
+    };
+
+    if (horizontal) el.addEventListener('wheel', onWheel, {
+      passive: true
+    });
     target.appendChild(el);
     requestAnimationFrame(() => events.connect == null ? void 0 : events.connect(el));
 
@@ -105,6 +113,7 @@ function ScrollControls({
     return () => {
       target.removeChild(el);
       el.removeEventListener('scroll', onScroll);
+      if (horizontal) el.removeEventListener('wheel', onWheel);
     };
   }, [infinite, state, invalidate, distance, damping, pages, horizontal]);
   let last = 0;