@react-three/drei 9.0.0-beta.4 → 9.0.1

package/web/CycleRaycast.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("@react-three/fiber");function r(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(r){if("default"!==r){var n=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,n.get?n:{enumerable:!0,get:function(){return e[r]}})}})),t.default=e,Object.freeze(t)}var n=r(e);exports.CycleRaycast=function({onChanged:e,portal:r,preventDefault:o=!0,scroll:l=!0,keyCode:u=9}){const c=n.useRef(0),a=t.useThree((e=>e.raycaster)),d=t.useThree((e=>e.get)),i=t.useThree((e=>e.gl));return n.useEffect((()=>{var t;let n,s=[];const v=a.filter,f=null!==(t=null==r?void 0:r.current)&&void 0!==t?t:i.domElement.parentNode,h=()=>f&&e&&e(s,Math.round(c.current)%s.length);a.filter=(e,t)=>{let r=[...e];r.length===s.length&&s.every((e=>r.map((e=>e.object.uuid)).includes(e.object.uuid)))||(c.current=0,s=r,h()),v&&(r=v(r,t));for(let e=0;e<Math.round(c.current)%r.length;e++){const e=r.shift();r=[...r,e]}return r};const m=e=>{var t,r;c.current=e(c.current),null==(t=d().events.handlers)||t.onPointerCancel(void 0),null==(r=d().events.handlers)||r.onPointerMove(n),h()},p=e=>{(e.keyCode||e.which===u)&&(o&&e.preventDefault(),s.length>1&&m((e=>e+1)))},g=e=>{o&&e.preventDefault();let t=0;e||(e=window.event),e.wheelDelta?t=e.wheelDelta/120:e.detail&&(t=-e.detail/3),s.length>1&&m((e=>Math.abs(e-t)))},y=e=>n=e;return document.addEventListener("pointermove",y,{passive:!0}),l&&document.addEventListener("wheel",g),void 0!==u&&document.addEventListener("keydown",p),()=>{a.filter=v,void 0!==u&&document.removeEventListener("keydown",p),l&&document.removeEventListener("wheel",g),document.removeEventListener("pointermove",y)}}),[i,d,a,o,l,u]),null};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("@react-three/fiber");function n(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(n){if("default"!==n){var r=Object.getOwnPropertyDescriptor(e,n);Object.defineProperty(t,n,r.get?r:{enumerable:!0,get:function(){return e[n]}})}})),t.default=e,Object.freeze(t)}var r=n(e);exports.CycleRaycast=function({onChanged:e,portal:n,preventDefault:o=!0,scroll:l=!0,keyCode:u=9}){const c=r.useRef(0),d=t.useThree((e=>e.setEvents)),i=t.useThree((e=>e.get)),a=t.useThree((e=>e.gl));return r.useEffect((()=>{var t;let r,s=[];const v=i().events.filter,f=null!==(t=null==n?void 0:n.current)&&void 0!==t?t:a.domElement.parentNode,h=()=>f&&e&&e(s,Math.round(c.current)%s.length);d({filter:(e,t)=>{let n=[...e];n.length===s.length&&s.every((e=>n.map((e=>e.object.uuid)).includes(e.object.uuid)))||(c.current=0,s=n,h()),v&&(n=v(n,t));for(let e=0;e<Math.round(c.current)%n.length;e++){const e=n.shift();n=[...n,e]}return n}});const m=e=>{var t,n;c.current=e(c.current),null==(t=i().events.handlers)||t.onPointerCancel(void 0),null==(n=i().events.handlers)||n.onPointerMove(r),h()},p=e=>{(e.keyCode||e.which===u)&&(o&&e.preventDefault(),s.length>1&&m((e=>e+1)))},g=e=>{o&&e.preventDefault();let t=0;e||(e=window.event),e.wheelDelta?t=e.wheelDelta/120:e.detail&&(t=-e.detail/3),s.length>1&&m((e=>Math.abs(e-t)))},b=e=>r=e;return document.addEventListener("pointermove",b,{passive:!0}),l&&document.addEventListener("wheel",g),void 0!==u&&document.addEventListener("keydown",p),()=>{d({filter:v}),void 0!==u&&document.removeEventListener("keydown",p),l&&document.removeEventListener("wheel",g),document.removeEventListener("pointermove",b)}}),[a,i,d,o,l,u]),null};

package/web/CycleRaycast.js

@@ -9,7 +9,7 @@ function CycleRaycast({
   keyCode = 9
 }) {
   const cycle = React.useRef(0);
-  const raycaster = useThree(state => state.raycaster);
+  const setEvents = useThree(state => state.setEvents);
   const get = useThree(state => state.get);
   const gl = useThree(state => state.gl);
   React.useEffect(() => {
@@ -17,33 +17,34 @@ function CycleRaycast({
 
     let hits = [];
     let lastEvent = undefined;
-    const prev = raycaster.filter;
+    const prev = get().events.filter;
     const target = (_portal$current = portal == null ? void 0 : portal.current) !== null && _portal$current !== void 0 ? _portal$current : gl.domElement.parentNode; // Render custom status
 
     const renderStatus = () => target && onChanged && onChanged(hits, Math.round(cycle.current) % hits.length); // Overwrite the raycasters custom filter (this only exists in r3f)
 
 
-    raycaster.filter = (intersections, state) => {
-      // Reset cycle when the intersections change
-      let clone = [...intersections];
+    setEvents({
+      filter: (intersections, state) => {
+        // Reset cycle when the intersections change
+        let clone = [...intersections];
 
-      if (clone.length !== hits.length || !hits.every(hit => clone.map(e => e.object.uuid).includes(hit.object.uuid))) {
-        cycle.current = 0;
-        hits = clone;
-        renderStatus();
-      } // Run custom filter if there is one
+        if (clone.length !== hits.length || !hits.every(hit => clone.map(e => e.object.uuid).includes(hit.object.uuid))) {
+          cycle.current = 0;
+          hits = clone;
+          renderStatus();
+        } // Run custom filter if there is one
 
 
-      if (prev) clone = prev(clone, state); // Cycle through the actual raycast intersects
+        if (prev) clone = prev(clone, state); // Cycle through the actual raycast intersects
 
-      for (let i = 0; i < Math.round(cycle.current) % clone.length; i++) {
-        const first = clone.shift();
-        clone = [...clone, first];
-      }
-
-      return clone;
-    }; // Cycle, refresh events and render status
+        for (let i = 0; i < Math.round(cycle.current) % clone.length; i++) {
+          const first = clone.shift();
+          clone = [...clone, first];
+        }
 
+        return clone;
+      }
+    }); // Cycle, refresh events and render status
 
     const refresh = fn => {
       var _get$events$handlers, _get$events$handlers2;
@@ -82,12 +83,14 @@ function CycleRaycast({
     if (keyCode !== undefined) document.addEventListener('keydown', tabEvent);
     return () => {
       // Clean up
-      raycaster.filter = prev;
+      setEvents({
+        filter: prev
+      });
       if (keyCode !== undefined) document.removeEventListener('keydown', tabEvent);
       if (scroll) document.removeEventListener('wheel', wheelEvent);
       document.removeEventListener('pointermove', moveEvent);
     };
-  }, [gl, get, raycaster, preventDefault, scroll, keyCode]);
+  }, [gl, get, setEvents, preventDefault, scroll, keyCode]);
   return null;
 }
 

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/client"),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 h=a.createContext(null);function p(){return a.useContext(h)}const m=a.forwardRef((({children:e},t)=>{const r=a.useRef(null),o=p(),{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=p(),l=a.useRef(null),{width:i,height:c}=s.useThree((e=>e.size)),m=a.useContext(s.context),v=a.useMemo((()=>u.createRoot(n.fixed)),[n.fixed]);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)`)})),v.render(a.createElement("div",f.default({ref:d.default([o,l]),style:{...t,position:"absolute",top:0,left:0,willChange:"transform"}},r),a.createElement(h.Provider,{value:n},a.createElement(s.context.Provider,{value:m},e)))),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:p,invalidate:m,events:v,raycaster:y}=s.useThree(),[g]=a.useState((()=>document.createElement("div"))),[x]=a.useState((()=>document.createElement("div"))),[w]=a.useState((()=>document.createElement("div"))),E=d.domElement.parentNode,b=a.useRef(0),L=a.useMemo((()=>({el:g,eps:e,fill:x,fixed:w,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];w.style.position="sticky",w.style.top="0px",w.style.left="0px",w.style.width="100%",w.style.height="100%",w.style.overflow="hidden",g.appendChild(w),x.style.height=o?"100%":n*l*100+"%",x.style.width=o?n*l*100+"%":"100%",x.style.pointerEvents="none",g.appendChild(x),E.appendChild(g),g[o?"scrollLeft":"scrollTop"]=1;const e=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,x,w,E]),a.useEffect((()=>{const e=p[o?"width":"height"],s=g[o?"scrollWidth":"scrollHeight"],n=s-e;let l=0,i=!0,f=!0;const c=()=>{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,p,r,L,m,o,t]);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(h.Provider,{value:L},u)},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/client"),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 a=l(e),c=i(t),f=i(r),u=i(o),d=l(n);const h=f.createContext(null);function p(){return f.useContext(h)}const m=f.forwardRef((({children:e},t)=>{const r=f.useRef(null),o=p(),{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})),f.createElement("group",{ref:d.default([t,r])},e)})),v=f.forwardRef((({children:e,style:t,...r},o)=>{const n=p(),l=f.useRef(null),{width:i,height:c}=s.useThree((e=>e.size)),m=f.useContext(s.context),v=f.useMemo((()=>u.createRoot(n.fixed)),[n.fixed]);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)`)})),v.render(f.createElement("div",a.default({ref:d.default([o,l]),style:{...t,position:"absolute",top:0,left:0,willChange:"transform"}},r),f.createElement(h.Provider,{value:n},f.createElement(s.context.Provider,{value:m},e)))),null})),y=f.forwardRef((({html:e,...t},r)=>{const o=e?v:m;return f.createElement(o,a.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:a={},children:u}){const{get:d,setEvents:p,gl:m,size:v,invalidate:y,events:g,raycaster:w}=s.useThree(),[x]=f.useState((()=>document.createElement("div"))),[E]=f.useState((()=>document.createElement("div"))),[b]=f.useState((()=>document.createElement("div"))),z=m.domElement.parentNode,L=f.useRef(0),C=f.useMemo((()=>{const t={el:x,eps:e,fill:E,fixed:b,horizontal:o,damping:i,offset:0,delta:0,scroll:L,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}};return t}),[e,i,o,n]);f.useEffect((()=>{x.style.position="absolute",x.style.width="100%",x.style.height="100%",x.style[o?"overflowX":"overflowY"]="auto",x.style[o?"overflowY":"overflowX"]="hidden",x.style.top="0px",x.style.left="0px";for(const e in a)x.style[e]=a[e];b.style.position="sticky",b.style.top="0px",b.style.left="0px",b.style.width="100%",b.style.height="100%",b.style.overflow="hidden",x.appendChild(b),E.style.height=o?"100%":n*l*100+"%",E.style.width=o?n*l*100+"%":"100%",E.style.pointerEvents="none",x.appendChild(E),z.appendChild(x),x[o?"scrollLeft":"scrollTop"]=1;const e=g.connected||m.domElement;requestAnimationFrame((()=>null==g.connect?void 0:g.connect(x)));const t=d().events.compute;return p({compute(e,t){const r=e.clientX-e.target.offsetLeft,o=e.clientX-e.target.offsetLeft;t.pointer.set(r/t.size.width*2-1,-o/t.size.height*2+1),t.raycaster.setFromCamera(t.pointer,t.camera)}}),()=>{z.removeChild(x),p({compute:t}),null==g.connect||g.connect(e)}}),[n,l,o,x,E,b,z]),f.useEffect((()=>{const e=v[o?"width":"height"],s=x[o?"scrollWidth":"scrollHeight"],n=s-e;let l=0,i=!0,a=!0;const c=()=>{if(t&&!a&&(y(),l=x[o?"scrollLeft":"scrollTop"],L.current=l/n,r)){if(!i)if(l>=n){const e=1-C.offset;x[o?"scrollLeft":"scrollTop"]=1,L.current=C.offset=-e,i=!0}else if(l<=0){const e=1+C.offset;x[o?"scrollLeft":"scrollTop"]=s,L.current=C.offset=e,i=!0}i&&setTimeout((()=>i=!1),40)}};x.addEventListener("scroll",c,{passive:!0}),requestAnimationFrame((()=>a=!1));const f=e=>x.scrollLeft+=e.deltaY/2;return o&&x.addEventListener("wheel",f,{passive:!0}),()=>{x.removeEventListener("scroll",c),o&&x.removeEventListener("wheel",f)}}),[x,v,r,C,y,o,t]);let M=0;return s.useFrame(((t,r)=>{C.offset=c.MathUtils.damp(M=C.offset,L.current,i,r),C.delta=c.MathUtils.damp(C.delta,Math.abs(M-C.offset),i,r),C.delta>e&&y()})),f.createElement(h.Provider,{value:C},u)},exports.useScroll=p;

package/web/ScrollControls.js

@@ -21,6 +21,8 @@ function ScrollControls({
   children
 }) {
   const {
+    get,
+    setEvents,
     gl,
     size,
     invalidate,
@@ -96,19 +98,21 @@ function ScrollControls({
     el[horizontal ? 'scrollLeft' : 'scrollTop'] = 1;
     const oldTarget = events.connected || gl.domElement;
     requestAnimationFrame(() => events.connect == null ? void 0 : events.connect(el));
-    const oldCompute = raycaster.computeOffsets;
-
-    raycaster.computeOffsets = ({
-      clientX,
-      clientY
-    }) => ({
-      offsetX: clientX - target.offsetLeft,
-      offsetY: clientY - target.offsetTop
-    });
+    const oldCompute = get().events.compute;
+    setEvents({
+      compute(event, state) {
+        const offsetX = event.clientX - event.target.offsetLeft;
+        const offsetY = event.clientX - event.target.offsetLeft;
+        state.pointer.set(offsetX / state.size.width * 2 - 1, -(offsetY / state.size.height) * 2 + 1);
+        state.raycaster.setFromCamera(state.pointer, state.camera);
+      }
 
+    });
     return () => {
       target.removeChild(el);
-      raycaster.computeOffsets = oldCompute;
+      setEvents({
+        compute: oldCompute
+      });
       events.connect == null ? void 0 : events.connect(oldTarget);
     };
   }, [pages, distance, horizontal, el, fill, fixed, target]);

package/web/Select.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),t=require("react"),n=require("three"),r=require("three-stdlib"),o=require("@react-three/fiber"),i=require("zustand/shallow");function l(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function s(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(n){if("default"!==n){var r=Object.getOwnPropertyDescriptor(e,n);Object.defineProperty(t,n,r.get?r:{enumerable:!0,get:function(){return e[n]}})}})),t.default=e,Object.freeze(t)}var u=l(e),c=s(t),a=s(n),d=l(i);const f=c.createContext([]);exports.Select=function({box:e,multiple:t,children:n,onChange:i,border:l="1px solid #55aaff",backgroundColor:s="rgba(75, 160, 255, 0.1)",filter:p=(e=>e),...v}){const{camera:b,raycaster:m,gl:y,controls:h,size:x,get:E}=o.useThree(),[g,j]=c.useState(!1),[w,O]=c.useReducer(((e,{object:t,shift:n})=>void 0===t?[]:Array.isArray(t)?t:n?e.includes(t)?e.filter((e=>e!==t)):[t,...e]:e[0]===t?[]:[t]),[]);c.useEffect((()=>{null==i||i(w)}),[w]);const C=c.useCallback((e=>{e.stopPropagation(),O({object:p([e.object])[0],shift:t&&e.shiftKey})}),[]),P=c.useCallback((e=>!g&&O({})),[g]),M=c.useRef(null);return c.useEffect((()=>{if(!e||!t)return;const n=new r.SelectionBox(b,M.current),o=document.createElement("div");o.style.pointerEvents="none",o.style.border=l,o.style.backgroundColor=s,o.style.position="fixed";const i=new a.Vector2,u=new a.Vector2,c=new a.Vector2,f=m.enabled,v=null==h?void 0:h.enabled;let g=!1;function j(e,t){var n;const{offsetX:r,offsetY:o}=null!==(n=null==m.computeOffsets?void 0:m.computeOffsets(e,E()))&&void 0!==n?n:e,{width:i,height:l}=x;t.set(r/i*2-1,-o/l*2+1)}function w(e){e.shiftKey&&(!function(e){var t;h&&(h.enabled=!1),m.enabled=!1,g=!0,null==(t=y.domElement.parentElement)||t.appendChild(o),o.style.left=`${e.clientX}px`,o.style.top=`${e.clientY}px`,o.style.width="0px",o.style.height="0px",i.x=e.clientX,i.y=e.clientY}(e),j(e,n.startPoint))}let C=[];function P(e){if(g){!function(e){c.x=Math.max(i.x,e.clientX),c.y=Math.max(i.y,e.clientY),u.x=Math.min(i.x,e.clientX),u.y=Math.min(i.y,e.clientY),o.style.left=`${u.x}px`,o.style.top=`${u.y}px`,o.style.width=c.x-u.x+"px",o.style.height=c.y-u.y+"px"}(e),j(e,n.endPoint);const t=n.select().sort((e=>e.uuid)).filter((e=>e.isMesh));d.default(t,C)||(C=t,O({object:p(t)}))}}function k(e){var t;g&&g&&(h&&(h.enabled=v),m.enabled=f,g=!1,null==(t=o.parentElement)||t.removeChild(o))}return document.addEventListener("pointerdown",w,{passive:!0}),document.addEventListener("pointermove",P,{passive:!0,capture:!0}),document.addEventListener("pointerup",k,{passive:!0}),()=>{document.removeEventListener("pointerdown",w),document.removeEventListener("pointermove",P),document.removeEventListener("pointerup",k)}}),[x,m,b,h,y]),c.createElement("group",u.default({ref:M,onClick:C,onPointerOver:()=>j(!0),onPointerOut:()=>j(!1),onPointerMissed:P},v),c.createElement(f.Provider,{value:w},n))},exports.useSelect=function(){return c.useContext(f)};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),t=require("react"),n=require("three"),r=require("three-stdlib"),o=require("@react-three/fiber"),i=require("zustand/shallow");function l(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function s(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(n){if("default"!==n){var r=Object.getOwnPropertyDescriptor(e,n);Object.defineProperty(t,n,r.get?r:{enumerable:!0,get:function(){return e[n]}})}})),t.default=e,Object.freeze(t)}var c=l(e),u=s(t),a=s(n),d=l(i);const f=u.createContext([]);exports.Select=function({box:e,multiple:t,children:n,onChange:i,border:l="1px solid #55aaff",backgroundColor:s="rgba(75, 160, 255, 0.1)",filter:p=(e=>e),...v}){const{setEvents:b,camera:y,raycaster:h,gl:m,controls:x,size:E,get:g}=o.useThree(),[j,w]=u.useState(!1),[C,P]=u.useReducer(((e,{object:t,shift:n})=>void 0===t?[]:Array.isArray(t)?t:n?e.includes(t)?e.filter((e=>e!==t)):[t,...e]:e[0]===t?[]:[t]),[]);u.useEffect((()=>{null==i||i(C)}),[C]);const O=u.useCallback((e=>{e.stopPropagation(),P({object:p([e.object])[0],shift:t&&e.shiftKey})}),[]),M=u.useCallback((e=>!j&&P({})),[j]),k=u.useRef(null);return u.useEffect((()=>{if(!e||!t)return;const n=new r.SelectionBox(y,k.current),o=document.createElement("div");o.style.pointerEvents="none",o.style.border=l,o.style.backgroundColor=s,o.style.position="fixed";const i=new a.Vector2,c=new a.Vector2,u=new a.Vector2,f=g().events.enabled,v=null==x?void 0:x.enabled;let h=!1;function j(e,t){const{offsetX:n,offsetY:r}=e,{width:o,height:i}=E;t.set(n/o*2-1,-r/i*2+1)}function w(e){e.shiftKey&&(!function(e){var t;x&&(x.enabled=!1),b({enabled:!1}),h=!0,null==(t=m.domElement.parentElement)||t.appendChild(o),o.style.left=`${e.clientX}px`,o.style.top=`${e.clientY}px`,o.style.width="0px",o.style.height="0px",i.x=e.clientX,i.y=e.clientY}(e),j(e,n.startPoint))}let C=[];function O(e){if(h){!function(e){u.x=Math.max(i.x,e.clientX),u.y=Math.max(i.y,e.clientY),c.x=Math.min(i.x,e.clientX),c.y=Math.min(i.y,e.clientY),o.style.left=`${c.x}px`,o.style.top=`${c.y}px`,o.style.width=u.x-c.x+"px",o.style.height=u.y-c.y+"px"}(e),j(e,n.endPoint);const t=n.select().sort((e=>e.uuid)).filter((e=>e.isMesh));d.default(t,C)||(C=t,P({object:p(t)}))}}function M(e){var t;h&&h&&(x&&(x.enabled=v),b({enabled:f}),h=!1,null==(t=o.parentElement)||t.removeChild(o))}return document.addEventListener("pointerdown",w,{passive:!0}),document.addEventListener("pointermove",O,{passive:!0,capture:!0}),document.addEventListener("pointerup",M,{passive:!0}),()=>{document.removeEventListener("pointerdown",w),document.removeEventListener("pointermove",O),document.removeEventListener("pointerup",M)}}),[E,h,y,x,m]),u.createElement("group",c.default({ref:k,onClick:O,onPointerOver:()=>w(!0),onPointerOut:()=>w(!1),onPointerMissed:M},v),u.createElement(f.Provider,{value:C},n))},exports.useSelect=function(){return u.useContext(f)};

package/web/Select.js

@@ -17,6 +17,7 @@ function Select({
   ...props
 }) {
   const {
+    setEvents,
     camera,
     raycaster,
     gl,
@@ -52,19 +53,15 @@ function Select({
     const startPoint = new THREE.Vector2();
     const pointTopLeft = new THREE.Vector2();
     const pointBottomRight = new THREE.Vector2();
-    const oldRaycasterEnabled = raycaster.enabled;
+    const oldRaycasterEnabled = get().events.enabled;
     const oldControlsEnabled = controls == null ? void 0 : controls.enabled;
     let isDown = false;
 
     function prepareRay(event, vec) {
-      var _raycaster$computeOff;
-
-      // https://github.com/pmndrs/react-three-fiber/pull/782
-      // Events trigger outside of canvas when moved
       const {
         offsetX,
         offsetY
-      } = (_raycaster$computeOff = raycaster.computeOffsets == null ? void 0 : raycaster.computeOffsets(event, get())) !== null && _raycaster$computeOff !== void 0 ? _raycaster$computeOff : event;
+      } = event;
       const {
         width,
         height
@@ -76,7 +73,9 @@ function Select({
       var _gl$domElement$parent;
 
       if (controls) controls.enabled = false;
-      raycaster.enabled = false;
+      setEvents({
+        enabled: false
+      });
       isDown = true;
       (_gl$domElement$parent = gl.domElement.parentElement) == null ? void 0 : _gl$domElement$parent.appendChild(element);
       element.style.left = `${event.clientX}px`;
@@ -103,7 +102,9 @@ function Select({
         var _element$parentElemen;
 
         if (controls) controls.enabled = oldControlsEnabled;
-        raycaster.enabled = oldRaycasterEnabled;
+        setEvents({
+          enabled: oldRaycasterEnabled
+        });
         isDown = false;
         (_element$parentElemen = element.parentElement) == null ? void 0 : _element$parentElemen.removeChild(element);
       }