@react-three/fiber 8.7.0 → 8.7.3

package/dist/{index-846c69c6.cjs.prod.js → index-5350eaac.cjs.prod.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;

package/dist/react-three-fiber.cjs.dev.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var index = require('./index-b3d1f4d2.cjs.dev.js');
+var index = require('./index-407f3d70.cjs.dev.js');
 var _extends = require('@babel/runtime/helpers/extends');
 var React = require('react');
 var THREE = require('three');
@@ -187,7 +187,7 @@ const Canvas = /*#__PURE__*/React__namespace.forwardRef(function Canvas({
       onPointerMissed: (...args) => handlePointerMissed.current == null ? void 0 : handlePointerMissed.current(...args),
       onCreated: state => {
         // Connect to event source
-        state.events.connect == null ? void 0 : state.events.connect(eventSource ? eventSource : divRef.current); // Set up compute function
+        state.events.connect == null ? void 0 : state.events.connect(eventSource ? index.isRef(eventSource) ? eventSource.current : eventSource : divRef.current); // Set up compute function
 
         if (eventPrefix) {
           state.setEvents({
@@ -218,7 +218,10 @@ const Canvas = /*#__PURE__*/React__namespace.forwardRef(function Canvas({
   }, []);
   React__namespace.useEffect(() => {
     if (canvas) return () => index.unmountComponentAtNode(canvas);
-  }, [canvas]);
+  }, [canvas]); // When the event source is not this div, we need to set pointer-events to none
+  // Or else the canvas will block events from reaching the event source
+
+  const pointerEvents = eventSource ? 'none' : 'auto';
   return /*#__PURE__*/React__namespace.createElement("div", _extends({
     ref: divRef,
     style: {
@@ -226,6 +229,7 @@ const Canvas = /*#__PURE__*/React__namespace.forwardRef(function Canvas({
       width: '100%',
       height: '100%',
       overflow: 'hidden',
+      pointerEvents,
       ...style
     }
   }, props), /*#__PURE__*/React__namespace.createElement("div", {

package/dist/react-three-fiber.cjs.prod.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var index = require('./index-846c69c6.cjs.prod.js');
+var index = require('./index-5350eaac.cjs.prod.js');
 var _extends = require('@babel/runtime/helpers/extends');
 var React = require('react');
 var THREE = require('three');
@@ -187,7 +187,7 @@ const Canvas = /*#__PURE__*/React__namespace.forwardRef(function Canvas({
       onPointerMissed: (...args) => handlePointerMissed.current == null ? void 0 : handlePointerMissed.current(...args),
       onCreated: state => {
         // Connect to event source
-        state.events.connect == null ? void 0 : state.events.connect(eventSource ? eventSource : divRef.current); // Set up compute function
+        state.events.connect == null ? void 0 : state.events.connect(eventSource ? index.isRef(eventSource) ? eventSource.current : eventSource : divRef.current); // Set up compute function
 
         if (eventPrefix) {
           state.setEvents({
@@ -218,7 +218,10 @@ const Canvas = /*#__PURE__*/React__namespace.forwardRef(function Canvas({
   }, []);
   React__namespace.useEffect(() => {
     if (canvas) return () => index.unmountComponentAtNode(canvas);
-  }, [canvas]);
+  }, [canvas]); // When the event source is not this div, we need to set pointer-events to none
+  // Or else the canvas will block events from reaching the event source
+
+  const pointerEvents = eventSource ? 'none' : 'auto';
   return /*#__PURE__*/React__namespace.createElement("div", _extends({
     ref: divRef,
     style: {
@@ -226,6 +229,7 @@ const Canvas = /*#__PURE__*/React__namespace.forwardRef(function Canvas({
       width: '100%',
       height: '100%',
       overflow: 'hidden',
+      pointerEvents,
       ...style
     }
   }, props), /*#__PURE__*/React__namespace.createElement("div", {

package/dist/react-three-fiber.esm.js

@@ -1,5 +1,5 @@
-import { c as createEvents, e as extend, u as useMutableCallback, a as createRoot, E as ErrorBoundary, B as Block, b as useIsomorphicLayoutEffect, d as unmountComponentAtNode } from './index-3b3bed95.esm.js';
-export { t as ReactThreeFiber, s as _roots, q as act, n as addAfterEffect, m as addEffect, o as addTail, l as advance, i as applyProps, f as context, c as createEvents, g as createPortal, a as createRoot, j as dispose, e as extend, p as getRootState, k as invalidate, h as reconciler, r as render, d as unmountComponentAtNode, y as useFrame, z as useGraph, v as useInstanceHandle, A as useLoader, w as useStore, x as useThree } from './index-3b3bed95.esm.js';
+import { c as createEvents, e as extend, u as useMutableCallback, a as createRoot, i as isRef, E as ErrorBoundary, B as Block, b as useIsomorphicLayoutEffect, d as unmountComponentAtNode } from './index-05f8627d.esm.js';
+export { t as ReactThreeFiber, v as _roots, s as act, o as addAfterEffect, n as addEffect, p as addTail, m as advance, j as applyProps, f as context, c as createEvents, g as createPortal, a as createRoot, k as dispose, e as extend, q as getRootState, l as invalidate, h as reconciler, r as render, d as unmountComponentAtNode, z as useFrame, A as useGraph, w as useInstanceHandle, C as useLoader, x as useStore, y as useThree } from './index-05f8627d.esm.js';
 import _extends from '@babel/runtime/helpers/esm/extends';
 import * as React from 'react';
 import * as THREE from 'three';
@@ -160,7 +160,7 @@ const Canvas = /*#__PURE__*/React.forwardRef(function Canvas({
       onPointerMissed: (...args) => handlePointerMissed.current == null ? void 0 : handlePointerMissed.current(...args),
       onCreated: state => {
         // Connect to event source
-        state.events.connect == null ? void 0 : state.events.connect(eventSource ? eventSource : divRef.current); // Set up compute function
+        state.events.connect == null ? void 0 : state.events.connect(eventSource ? isRef(eventSource) ? eventSource.current : eventSource : divRef.current); // Set up compute function
 
         if (eventPrefix) {
           state.setEvents({
@@ -191,7 +191,10 @@ const Canvas = /*#__PURE__*/React.forwardRef(function Canvas({
   }, []);
   React.useEffect(() => {
     if (canvas) return () => unmountComponentAtNode(canvas);
-  }, [canvas]);
+  }, [canvas]); // When the event source is not this div, we need to set pointer-events to none
+  // Or else the canvas will block events from reaching the event source
+
+  const pointerEvents = eventSource ? 'none' : 'auto';
   return /*#__PURE__*/React.createElement("div", _extends({
     ref: divRef,
     style: {
@@ -199,6 +202,7 @@ const Canvas = /*#__PURE__*/React.forwardRef(function Canvas({
       width: '100%',
       height: '100%',
       overflow: 'hidden',
+      pointerEvents,
       ...style
     }
   }, props), /*#__PURE__*/React.createElement("div", {

package/native/dist/react-three-fiber-native.cjs.dev.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var index = require('../../dist/index-b3d1f4d2.cjs.dev.js');
+var index = require('../../dist/index-407f3d70.cjs.dev.js');
 var _extends = require('@babel/runtime/helpers/extends');
 var React = require('react');
 var THREE = require('three');

package/native/dist/react-three-fiber-native.cjs.prod.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var index = require('../../dist/index-846c69c6.cjs.prod.js');
+var index = require('../../dist/index-5350eaac.cjs.prod.js');
 var _extends = require('@babel/runtime/helpers/extends');
 var React = require('react');
 var THREE = require('three');

package/native/dist/react-three-fiber-native.esm.js

@@ -1,5 +1,5 @@
-import { c as createEvents, e as extend, u as useMutableCallback, a as createRoot, E as ErrorBoundary, B as Block, d as unmountComponentAtNode } from '../../dist/index-3b3bed95.esm.js';
-export { t as ReactThreeFiber, s as _roots, q as act, n as addAfterEffect, m as addEffect, o as addTail, l as advance, i as applyProps, f as context, g as createPortal, a as createRoot, j as dispose, e as extend, p as getRootState, k as invalidate, h as reconciler, r as render, d as unmountComponentAtNode, y as useFrame, z as useGraph, v as useInstanceHandle, A as useLoader, w as useStore, x as useThree } from '../../dist/index-3b3bed95.esm.js';
+import { c as createEvents, e as extend, u as useMutableCallback, a as createRoot, E as ErrorBoundary, B as Block, d as unmountComponentAtNode } from '../../dist/index-05f8627d.esm.js';
+export { t as ReactThreeFiber, v as _roots, s as act, o as addAfterEffect, n as addEffect, p as addTail, m as advance, j as applyProps, f as context, g as createPortal, a as createRoot, k as dispose, e as extend, q as getRootState, l as invalidate, h as reconciler, r as render, d as unmountComponentAtNode, z as useFrame, A as useGraph, w as useInstanceHandle, C as useLoader, x as useStore, y as useThree } from '../../dist/index-05f8627d.esm.js';
 import _extends from '@babel/runtime/helpers/esm/extends';
 import * as React from 'react';
 import * as THREE from 'three';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-three/fiber",
-  "version": "8.7.0",
+  "version": "8.7.3",
   "description": "A React renderer for Threejs",
   "keywords": [
     "react",