@react-three/fiber 8.7.0 → 8.7.3

package/dist/declarations/src/web/Canvas.d.ts

@@ -1,11 +1,11 @@
-import * as React from 'react';
-import type { Options as ResizeOptions } from 'react-use-measure';
-import { RenderProps } from '../core';
-export interface Props extends Omit<RenderProps<HTMLCanvasElement>, 'size'>, React.HTMLAttributes<HTMLDivElement> {
-    children: React.ReactNode;
-    fallback?: React.ReactNode;
-    resize?: ResizeOptions;
-    eventSource?: HTMLElement;
-    eventPrefix?: 'offset' | 'client' | 'page' | 'layer' | 'screen';
-}
-export declare const Canvas: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLCanvasElement>>;
+import * as React from 'react';
+import type { Options as ResizeOptions } from 'react-use-measure';
+import { RenderProps } from '../core';
+export interface Props extends Omit<RenderProps<HTMLCanvasElement>, 'size'>, React.HTMLAttributes<HTMLDivElement> {
+    children: React.ReactNode;
+    fallback?: React.ReactNode;
+    resize?: ResizeOptions;
+    eventSource?: HTMLElement | React.MutableRefObject<HTMLElement>;
+    eventPrefix?: 'offset' | 'client' | 'page' | 'layer' | 'screen';
+}
+export declare const Canvas: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLCanvasElement>>;

package/dist/declarations/src/web/events.d.ts

@@ -1,4 +1,4 @@
-import { UseBoundStore } from 'zustand';
-import { RootState } from '../core/store';
-import { EventManager } from '../core/events';
-export declare function createPointerEvents(store: UseBoundStore<RootState>): EventManager<HTMLElement>;
+import { UseBoundStore } from 'zustand';
+import { RootState } from '../core/store';
+import { EventManager } from '../core/events';
+export declare function createPointerEvents(store: UseBoundStore<RootState>): EventManager<HTMLElement>;

package/dist/{index-3b3bed95.esm.js → index-05f8627d.esm.js}

@@ -12,6 +12,7 @@ var threeTypes = /*#__PURE__*/Object.freeze({
 
 var _window$document, _window$navigator;
 const isOrthographicCamera = def => def && def.isOrthographicCamera;
+const isRef = obj => obj && obj.hasOwnProperty('current');
 /**
  * An SSR-friendly useLayoutEffect.
  *
@@ -476,9 +477,7 @@ function removeInteractivity(store, object) {
   });
 }
 function createEvents(store) {
-  const temp = new THREE.Vector3();
   /** Calculates delta */
-
   function calculateDistance(event) {
     const {
       internal
@@ -578,108 +577,113 @@ function createEvents(store) {
 
 
   function handleIntersects(intersections, event, delta, callback) {
-    const {
-      raycaster,
-      pointer,
-      camera,
-      internal
-    } = store.getState(); // If anything has been found, forward it to the event listeners
-
+    // If anything has been found, forward it to the event listeners
     if (intersections.length) {
-      const unprojectedPoint = temp.set(pointer.x, pointer.y, 0).unproject(camera);
       const localState = {
         stopped: false
       };
 
       for (const hit of intersections) {
-        const hasPointerCapture = id => {
-          var _internal$capturedMap, _internal$capturedMap2;
+        const state = getRootState(hit.object);
 
-          return (_internal$capturedMap = (_internal$capturedMap2 = internal.capturedMap.get(id)) == null ? void 0 : _internal$capturedMap2.has(hit.eventObject)) != null ? _internal$capturedMap : false;
-        };
+        if (state) {
+          const {
+            raycaster,
+            pointer,
+            camera,
+            internal
+          } = state;
+          const unprojectedPoint = new THREE.Vector3(pointer.x, pointer.y, 0).unproject(camera);
 
-        const setPointerCapture = id => {
-          const captureData = {
-            intersection: hit,
-            target: event.target
+          const hasPointerCapture = id => {
+            var _internal$capturedMap, _internal$capturedMap2;
+
+            return (_internal$capturedMap = (_internal$capturedMap2 = internal.capturedMap.get(id)) == null ? void 0 : _internal$capturedMap2.has(hit.eventObject)) != null ? _internal$capturedMap : false;
           };
 
-          if (internal.capturedMap.has(id)) {
-            // if the pointerId was previously captured, we add the hit to the
-            // event capturedMap.
-            internal.capturedMap.get(id).set(hit.eventObject, captureData);
-          } else {
-            // if the pointerId was not previously captured, we create a map
-            // containing the hitObject, and the hit. hitObject is used for
-            // faster access.
-            internal.capturedMap.set(id, new Map([[hit.eventObject, captureData]]));
-          } // Call the original event now
-          event.target.setPointerCapture(id);
-        };
+          const setPointerCapture = id => {
+            const captureData = {
+              intersection: hit,
+              target: event.target
+            };
+
+            if (internal.capturedMap.has(id)) {
+              // if the pointerId was previously captured, we add the hit to the
+              // event capturedMap.
+              internal.capturedMap.get(id).set(hit.eventObject, captureData);
+            } else {
+              // if the pointerId was not previously captured, we create a map
+              // containing the hitObject, and the hit. hitObject is used for
+              // faster access.
+              internal.capturedMap.set(id, new Map([[hit.eventObject, captureData]]));
+            } // Call the original event now
+            event.target.setPointerCapture(id);
+          };
 
-        const releasePointerCapture = id => {
-          const captures = internal.capturedMap.get(id);
+          const releasePointerCapture = id => {
+            const captures = internal.capturedMap.get(id);
 
-          if (captures) {
-            releaseInternalPointerCapture(internal.capturedMap, hit.eventObject, captures, id);
-          }
-        }; // Add native event props
+            if (captures) {
+              releaseInternalPointerCapture(internal.capturedMap, hit.eventObject, captures, id);
+            }
+          }; // Add native event props
 
 
-        let extractEventProps = {}; // This iterates over the event's properties including the inherited ones. Native PointerEvents have most of their props as getters which are inherited, but polyfilled PointerEvents have them all as their own properties (i.e. not inherited). We can't use Object.keys() or Object.entries() as they only return "own" properties; nor Object.getPrototypeOf(event) as that *doesn't* return "own" properties, only inherited ones.
+          let extractEventProps = {}; // This iterates over the event's properties including the inherited ones. Native PointerEvents have most of their props as getters which are inherited, but polyfilled PointerEvents have them all as their own properties (i.e. not inherited). We can't use Object.keys() or Object.entries() as they only return "own" properties; nor Object.getPrototypeOf(event) as that *doesn't* return "own" properties, only inherited ones.
 
-        for (let prop in event) {
-          let property = event[prop]; // Only copy over atomics, leave functions alone as these should be
-          // called as event.nativeEvent.fn()
+          for (let prop in event) {
+            let property = event[prop]; // Only copy over atomics, leave functions alone as these should be
+            // called as event.nativeEvent.fn()
 
-          if (typeof property !== 'function') extractEventProps[prop] = property;
-        }
+            if (typeof property !== 'function') extractEventProps[prop] = property;
+          }
 
-        let raycastEvent = { ...hit,
-          ...extractEventProps,
-          pointer,
-          intersections,
-          stopped: localState.stopped,
-          delta,
-          unprojectedPoint,
-          ray: raycaster.ray,
-          camera: camera,
-          // Hijack stopPropagation, which just sets a flag
-          stopPropagation: () => {
-            // https://github.com/pmndrs/react-three-fiber/issues/596
-            // Events are not allowed to stop propagation if the pointer has been captured
-            const capturesForPointer = 'pointerId' in event && internal.capturedMap.get(event.pointerId); // We only authorize stopPropagation...
-
-            if ( // ...if this pointer hasn't been captured
-            !capturesForPointer || // ... or if the hit object is capturing the pointer
-            capturesForPointer.has(hit.eventObject)) {
-              raycastEvent.stopped = localState.stopped = true; // Propagation is stopped, remove all other hover records
-              // An event handler is only allowed to flush other handlers if it is hovered itself
-
-              if (internal.hovered.size && Array.from(internal.hovered.values()).find(i => i.eventObject === hit.eventObject)) {
-                // Objects cannot flush out higher up objects that have already caught the event
-                const higher = intersections.slice(0, intersections.indexOf(hit));
-                cancelPointer([...higher, hit]);
+          let raycastEvent = { ...hit,
+            ...extractEventProps,
+            pointer,
+            intersections,
+            stopped: localState.stopped,
+            delta,
+            unprojectedPoint,
+            ray: raycaster.ray,
+            camera: camera,
+            // Hijack stopPropagation, which just sets a flag
+            stopPropagation: () => {
+              // https://github.com/pmndrs/react-three-fiber/issues/596
+              // Events are not allowed to stop propagation if the pointer has been captured
+              const capturesForPointer = 'pointerId' in event && internal.capturedMap.get(event.pointerId); // We only authorize stopPropagation...
+
+              if ( // ...if this pointer hasn't been captured
+              !capturesForPointer || // ... or if the hit object is capturing the pointer
+              capturesForPointer.has(hit.eventObject)) {
+                raycastEvent.stopped = localState.stopped = true; // Propagation is stopped, remove all other hover records
+                // An event handler is only allowed to flush other handlers if it is hovered itself
+
+                if (internal.hovered.size && Array.from(internal.hovered.values()).find(i => i.eventObject === hit.eventObject)) {
+                  // Objects cannot flush out higher up objects that have already caught the event
+                  const higher = intersections.slice(0, intersections.indexOf(hit));
+                  cancelPointer([...higher, hit]);
+                }
               }
-            }
-          },
-          // there should be a distinction between target and currentTarget
-          target: {
-            hasPointerCapture,
-            setPointerCapture,
-            releasePointerCapture
-          },
-          currentTarget: {
-            hasPointerCapture,
-            setPointerCapture,
-            releasePointerCapture
-          },
-          nativeEvent: event
-        }; // Call subscribers
-
-        callback(raycastEvent); // Event bubbling may be interrupted by stopPropagation
-
-        if (localState.stopped === true) break;
+            },
+            // there should be a distinction between target and currentTarget
+            target: {
+              hasPointerCapture,
+              setPointerCapture,
+              releasePointerCapture
+            },
+            currentTarget: {
+              hasPointerCapture,
+              setPointerCapture,
+              releasePointerCapture
+            },
+            nativeEvent: event
+          }; // Call subscribers
+
+          callback(raycastEvent); // Event bubbling may be interrupted by stopPropagation
+
+          if (localState.stopped === true) break;
+        }
       }
     }
 
@@ -2129,4 +2133,4 @@ reconciler.injectIntoDevTools({
 });
 const act = React.unstable_act;
 
-export { useLoader as A, Block as B, ErrorBoundary as E, createRoot as a, useIsomorphicLayoutEffect as b, createEvents as c, unmountComponentAtNode as d, extend as e, context as f, createPortal as g, reconciler as h, applyProps as i, dispose as j, invalidate as k, advance as l, addEffect as m, addAfterEffect as n, addTail as o, getRootState as p, act as q, render as r, roots as s, threeTypes as t, useMutableCallback as u, useInstanceHandle as v, useStore as w, useThree as x, useFrame as y, useGraph as z };
+export { useGraph as A, Block as B, useLoader as C, ErrorBoundary as E, createRoot as a, useIsomorphicLayoutEffect as b, createEvents as c, unmountComponentAtNode as d, extend as e, context as f, createPortal as g, reconciler as h, isRef as i, applyProps as j, dispose as k, invalidate as l, advance as m, addEffect as n, addAfterEffect as o, addTail as p, getRootState as q, render as r, act as s, threeTypes as t, useMutableCallback as u, roots as v, useInstanceHandle as w, useStore as x, useThree as y, useFrame as z };

package/dist/{index-b3d1f4d2.cjs.dev.js → index-407f3d70.cjs.dev.js}

@@ -39,6 +39,7 @@ var threeTypes = /*#__PURE__*/Object.freeze({
 
 var _window$document, _window$navigator;
 const isOrthographicCamera = def => def && def.isOrthographicCamera;
+const isRef = obj => obj && obj.hasOwnProperty('current');
 /**
  * An SSR-friendly useLayoutEffect.
  *
@@ -503,9 +504,7 @@ function removeInteractivity(store, object) {
   });
 }
 function createEvents(store) {
-  const temp = new THREE__namespace.Vector3();
   /** Calculates delta */
-
   function calculateDistance(event) {
     const {
       internal
@@ -605,108 +604,113 @@ function createEvents(store) {
 
 
   function handleIntersects(intersections, event, delta, callback) {
-    const {
-      raycaster,
-      pointer,
-      camera,
-      internal
-    } = store.getState(); // If anything has been found, forward it to the event listeners
-
+    // If anything has been found, forward it to the event listeners
     if (intersections.length) {
-      const unprojectedPoint = temp.set(pointer.x, pointer.y, 0).unproject(camera);
       const localState = {
         stopped: false
       };
 
       for (const hit of intersections) {
-        const hasPointerCapture = id => {
-          var _internal$capturedMap, _internal$capturedMap2;
+        const state = getRootState(hit.object);
 
-          return (_internal$capturedMap = (_internal$capturedMap2 = internal.capturedMap.get(id)) == null ? void 0 : _internal$capturedMap2.has(hit.eventObject)) != null ? _internal$capturedMap : false;
-        };
+        if (state) {
+          const {
+            raycaster,
+            pointer,
+            camera,
+            internal
+          } = state;
+          const unprojectedPoint = new THREE__namespace.Vector3(pointer.x, pointer.y, 0).unproject(camera);
 
-        const setPointerCapture = id => {
-          const captureData = {
-            intersection: hit,
-            target: event.target
+          const hasPointerCapture = id => {
+            var _internal$capturedMap, _internal$capturedMap2;
+
+            return (_internal$capturedMap = (_internal$capturedMap2 = internal.capturedMap.get(id)) == null ? void 0 : _internal$capturedMap2.has(hit.eventObject)) != null ? _internal$capturedMap : false;
           };
 
-          if (internal.capturedMap.has(id)) {
-            // if the pointerId was previously captured, we add the hit to the
-            // event capturedMap.
-            internal.capturedMap.get(id).set(hit.eventObject, captureData);
-          } else {
-            // if the pointerId was not previously captured, we create a map
-            // containing the hitObject, and the hit. hitObject is used for
-            // faster access.
-            internal.capturedMap.set(id, new Map([[hit.eventObject, captureData]]));
-          } // Call the original event now
-          event.target.setPointerCapture(id);
-        };
+          const setPointerCapture = id => {
+            const captureData = {
+              intersection: hit,
+              target: event.target
+            };
+
+            if (internal.capturedMap.has(id)) {
+              // if the pointerId was previously captured, we add the hit to the
+              // event capturedMap.
+              internal.capturedMap.get(id).set(hit.eventObject, captureData);
+            } else {
+              // if the pointerId was not previously captured, we create a map
+              // containing the hitObject, and the hit. hitObject is used for
+              // faster access.
+              internal.capturedMap.set(id, new Map([[hit.eventObject, captureData]]));
+            } // Call the original event now
+            event.target.setPointerCapture(id);
+          };
 
-        const releasePointerCapture = id => {
-          const captures = internal.capturedMap.get(id);
+          const releasePointerCapture = id => {
+            const captures = internal.capturedMap.get(id);
 
-          if (captures) {
-            releaseInternalPointerCapture(internal.capturedMap, hit.eventObject, captures, id);
-          }
-        }; // Add native event props
+            if (captures) {
+              releaseInternalPointerCapture(internal.capturedMap, hit.eventObject, captures, id);
+            }
+          }; // Add native event props
 
 
-        let extractEventProps = {}; // This iterates over the event's properties including the inherited ones. Native PointerEvents have most of their props as getters which are inherited, but polyfilled PointerEvents have them all as their own properties (i.e. not inherited). We can't use Object.keys() or Object.entries() as they only return "own" properties; nor Object.getPrototypeOf(event) as that *doesn't* return "own" properties, only inherited ones.
+          let extractEventProps = {}; // This iterates over the event's properties including the inherited ones. Native PointerEvents have most of their props as getters which are inherited, but polyfilled PointerEvents have them all as their own properties (i.e. not inherited). We can't use Object.keys() or Object.entries() as they only return "own" properties; nor Object.getPrototypeOf(event) as that *doesn't* return "own" properties, only inherited ones.
 
-        for (let prop in event) {
-          let property = event[prop]; // Only copy over atomics, leave functions alone as these should be
-          // called as event.nativeEvent.fn()
+          for (let prop in event) {
+            let property = event[prop]; // Only copy over atomics, leave functions alone as these should be
+            // called as event.nativeEvent.fn()
 
-          if (typeof property !== 'function') extractEventProps[prop] = property;
-        }
+            if (typeof property !== 'function') extractEventProps[prop] = property;
+          }
 
-        let raycastEvent = { ...hit,
-          ...extractEventProps,
-          pointer,
-          intersections,
-          stopped: localState.stopped,
-          delta,
-          unprojectedPoint,
-          ray: raycaster.ray,
-          camera: camera,
-          // Hijack stopPropagation, which just sets a flag
-          stopPropagation: () => {
-            // https://github.com/pmndrs/react-three-fiber/issues/596
-            // Events are not allowed to stop propagation if the pointer has been captured
-            const capturesForPointer = 'pointerId' in event && internal.capturedMap.get(event.pointerId); // We only authorize stopPropagation...
-
-            if ( // ...if this pointer hasn't been captured
-            !capturesForPointer || // ... or if the hit object is capturing the pointer
-            capturesForPointer.has(hit.eventObject)) {
-              raycastEvent.stopped = localState.stopped = true; // Propagation is stopped, remove all other hover records
-              // An event handler is only allowed to flush other handlers if it is hovered itself
-
-              if (internal.hovered.size && Array.from(internal.hovered.values()).find(i => i.eventObject === hit.eventObject)) {
-                // Objects cannot flush out higher up objects that have already caught the event
-                const higher = intersections.slice(0, intersections.indexOf(hit));
-                cancelPointer([...higher, hit]);
+          let raycastEvent = { ...hit,
+            ...extractEventProps,
+            pointer,
+            intersections,
+            stopped: localState.stopped,
+            delta,
+            unprojectedPoint,
+            ray: raycaster.ray,
+            camera: camera,
+            // Hijack stopPropagation, which just sets a flag
+            stopPropagation: () => {
+              // https://github.com/pmndrs/react-three-fiber/issues/596
+              // Events are not allowed to stop propagation if the pointer has been captured
+              const capturesForPointer = 'pointerId' in event && internal.capturedMap.get(event.pointerId); // We only authorize stopPropagation...
+
+              if ( // ...if this pointer hasn't been captured
+              !capturesForPointer || // ... or if the hit object is capturing the pointer
+              capturesForPointer.has(hit.eventObject)) {
+                raycastEvent.stopped = localState.stopped = true; // Propagation is stopped, remove all other hover records
+                // An event handler is only allowed to flush other handlers if it is hovered itself
+
+                if (internal.hovered.size && Array.from(internal.hovered.values()).find(i => i.eventObject === hit.eventObject)) {
+                  // Objects cannot flush out higher up objects that have already caught the event
+                  const higher = intersections.slice(0, intersections.indexOf(hit));
+                  cancelPointer([...higher, hit]);
+                }
               }
-            }
-          },
-          // there should be a distinction between target and currentTarget
-          target: {
-            hasPointerCapture,
-            setPointerCapture,
-            releasePointerCapture
-          },
-          currentTarget: {
-            hasPointerCapture,
-            setPointerCapture,
-            releasePointerCapture
-          },
-          nativeEvent: event
-        }; // Call subscribers
-
-        callback(raycastEvent); // Event bubbling may be interrupted by stopPropagation
-
-        if (localState.stopped === true) break;
+            },
+            // there should be a distinction between target and currentTarget
+            target: {
+              hasPointerCapture,
+              setPointerCapture,
+              releasePointerCapture
+            },
+            currentTarget: {
+              hasPointerCapture,
+              setPointerCapture,
+              releasePointerCapture
+            },
+            nativeEvent: event
+          }; // Call subscribers
+
+          callback(raycastEvent); // Event bubbling may be interrupted by stopPropagation
+
+          if (localState.stopped === true) break;
+        }
       }
     }
 
@@ -2172,6 +2176,7 @@ exports.dispose = dispose;
 exports.extend = extend;
 exports.getRootState = getRootState;
 exports.invalidate = invalidate;
+exports.isRef = isRef;
 exports.reconciler = reconciler;
 exports.render = render;
 exports.roots = roots;