@react-three/drei 9.58.0 → 9.58.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-three/drei",
-  "version": "9.58.0",
+  "version": "9.58.2",
   "private": false,
   "description": "useful add-ons for react-three-fiber",
   "keywords": [

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 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),...h}){const{setEvents:v,camera:b,raycaster:y,gl:m,controls:x,size:E,get:g}=o.useThree(),[w,j]=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=>!w&&P({})),[w]),k=u.useRef(null);return u.useEffect((()=>{if(!e||!t)return;const n=new r.SelectionBox(b,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,h=null==x?void 0:x.enabled;let y=!1;function w(e,t){const{offsetX:n,offsetY:r}=e,{width:o,height:i}=E;t.set(n/o*2-1,-r/i*2+1)}function j(e){e.shiftKey&&(!function(e){var t;x&&(x.enabled=!1),v({enabled:!1}),y=!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),w(e,n.startPoint))}let C=[];function O(e){if(y){!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),w(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;y&&y&&(x&&(x.enabled=h),v({enabled:f}),y=!1,null==(t=o.parentElement)||t.removeChild(o))}return document.addEventListener("pointerdown",j,{passive:!0}),document.addEventListener("pointermove",O,{passive:!0,capture:!0}),document.addEventListener("pointerup",M,{passive:!0}),()=>{document.removeEventListener("pointerdown",j),document.removeEventListener("pointermove",O),document.removeEventListener("pointerup",M)}}),[E.width,E.height,y,b,x,m]),u.createElement("group",c.default({ref:k,onClick:O,onPointerOver:()=>j(!0),onPointerOut:()=>j(!1),onPointerMissed:M},h),u.createElement(f.Provider,{value:C},n))},exports.useSelect=function(){return u.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 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,onChangePointerUp:l,border:s="1px solid #55aaff",backgroundColor:p="rgba(75, 160, 255, 0.1)",filter:h=(e=>e),...v}){const[b,y]=c.useState(!1),{setEvents:m,camera:x,raycaster:E,gl:g,controls:w,size:j,get:C}=o.useThree(),[P,O]=c.useState(!1),[M,k]=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((()=>{b?null==i||i(M):null==l||l(M)}),[M,b]);const q=c.useCallback((e=>{e.stopPropagation(),k({object:h([e.object])[0],shift:t&&e.shiftKey})}),[]),L=c.useCallback((e=>!P&&k({})),[P]),S=c.useRef(null);return c.useEffect((()=>{if(!e||!t)return;const n=new r.SelectionBox(x,S.current),o=document.createElement("div");o.style.pointerEvents="none",o.style.border=s,o.style.backgroundColor=p,o.style.position="fixed";const i=new a.Vector2,l=new a.Vector2,u=new a.Vector2,c=C().events.enabled,f=null==w?void 0:w.enabled;let v=!1;function b(e,t){const{offsetX:n,offsetY:r}=e,{width:o,height:i}=j;t.set(n/o*2-1,-r/i*2+1)}function E(e){e.shiftKey&&(!function(e){var t;w&&(w.enabled=!1),m({enabled:!1}),y(v=!0),null==(t=g.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),b(e,n.startPoint))}let P=[];function O(e){if(v){!function(e){u.x=Math.max(i.x,e.clientX),u.y=Math.max(i.y,e.clientY),l.x=Math.min(i.x,e.clientX),l.y=Math.min(i.y,e.clientY),o.style.left=`${l.x}px`,o.style.top=`${l.y}px`,o.style.width=u.x-l.x+"px",o.style.height=u.y-l.y+"px"}(e),b(e,n.endPoint);const t=n.select().sort((e=>e.uuid)).filter((e=>e.isMesh));d.default(t,P)||(P=t,k({object:h(t)}))}}function M(e){var t;v&&v&&(w&&(w.enabled=f),m({enabled:c}),y(v=!1),null==(t=o.parentElement)||t.removeChild(o))}return document.addEventListener("pointerdown",E,{passive:!0}),document.addEventListener("pointermove",O,{passive:!0,capture:!0}),document.addEventListener("pointerup",M,{passive:!0}),()=>{document.removeEventListener("pointerdown",E),document.removeEventListener("pointermove",O),document.removeEventListener("pointerup",M)}}),[j.width,j.height,E,x,w,g]),c.createElement("group",u.default({ref:S,onClick:q,onPointerOver:()=>O(!0),onPointerOut:()=>O(!1),onPointerMissed:L},v),c.createElement(f.Provider,{value:M},n))},exports.useSelect=function(){return c.useContext(f)};

package/web/Select.d.ts

@@ -6,8 +6,9 @@ declare type Props = JSX.IntrinsicElements['group'] & {
     border?: string;
     backgroundColor?: string;
     onChange?: (selected: THREE.Object3D[]) => void;
+    onChangePointerUp?: (selected: THREE.Object3D[]) => void;
     filter?: (selected: THREE.Object3D[]) => THREE.Object3D[];
 };
-export declare function Select({ box, multiple, children, onChange, border, backgroundColor, filter: customFilter, ...props }: Props): JSX.Element;
+export declare function Select({ box, multiple, children, onChange, onChangePointerUp, border, backgroundColor, filter: customFilter, ...props }: Props): JSX.Element;
 export declare function useSelect(): THREE.Object3D<THREE.Event>[];
 export {};

package/web/Select.js

@@ -11,11 +11,13 @@ function Select({
   multiple,
   children,
   onChange,
+  onChangePointerUp,
   border = '1px solid #55aaff',
   backgroundColor = 'rgba(75, 160, 255, 0.1)',
   filter: customFilter = item => item,
   ...props
 }) {
+  const [downed, down] = React.useState(false);
   const {
     setEvents,
     camera,
@@ -32,7 +34,9 @@ function Select({
   }) => {
     if (object === undefined) return [];else if (Array.isArray(object)) return object;else if (!shift) return state[0] === object ? [] : [object];else if (state.includes(object)) return state.filter(o => o !== object);else return [object, ...state];
   }, []);
-  React.useEffect(() => void (onChange == null ? void 0 : onChange(active)), [active]);
+  React.useEffect(() => {
+    if (downed) onChange == null ? void 0 : onChange(active);else onChangePointerUp == null ? void 0 : onChangePointerUp(active);
+  }, [active, downed]);
   const onClick = React.useCallback(e => {
     e.stopPropagation();
     dispatch({
@@ -76,7 +80,7 @@ function Select({
       setEvents({
         enabled: false
       });
-      isDown = true;
+      down(isDown = true);
       (_gl$domElement$parent = gl.domElement.parentElement) == null ? void 0 : _gl$domElement$parent.appendChild(element);
       element.style.left = `${event.clientX}px`;
       element.style.top = `${event.clientY}px`;
@@ -105,7 +109,7 @@ function Select({
         setEvents({
           enabled: oldRaycasterEnabled
         });
-        isDown = false;
+        down(isDown = false);
         (_element$parentElemen = element.parentElement) == null ? void 0 : _element$parentElemen.removeChild(element);
       }
     }