@react-three/fiber 8.0.0-beta.5 → 8.0.0-beta.8

package/dist/{index-5dc2de40.cjs.dev.js → index-2056f0b6.cjs.dev.js}

@@ -44,6 +44,15 @@ const isDiffSet = def => def && !!def.memoized && !!def.changes;
 function calculateDpr(dpr) {
   return Array.isArray(dpr) ? Math.min(Math.max(dpr[0], window.devicePixelRatio), dpr[1]) : dpr;
 }
+/**
+ * Returns instance root state
+ */
+
+const getRootState = obj => {
+  var _r3f;
+
+  return (_r3f = obj.__r3f) == null ? void 0 : _r3f.root.getState();
+};
 /**
  * Picks or omits keys from an object
  * `omit` will filter out keys, and otherwise cherry-pick them.
@@ -53,11 +62,7 @@ function filterKeys(obj, omit, ...keys) {
   const keysToSelect = new Set(keys);
   return Object.entries(obj).reduce((acc, [key, value]) => {
     const shouldInclude = !omit;
-
-    if (keysToSelect.has(key) === shouldInclude) {
-      acc[key] = value;
-    }
-
+    if (keysToSelect.has(key) === shouldInclude) acc[key] = value;
     return acc;
   }, {});
 }
@@ -411,6 +416,7 @@ function releaseInternalPointerCapture(capturedMap, obj, captures, pointerId) {
 
 function removeInteractivity(store, object) {
   const {
+    events,
     internal
   } = store.getState(); // Removes every trace of an object from the data store
 
@@ -418,6 +424,7 @@ function removeInteractivity(store, object) {
   internal.initialHits = internal.initialHits.filter(o => o !== object);
   internal.hovered.forEach((value, key) => {
     if (value.eventObject === object || value.object === object) {
+      // Clear out intersects, they are outdated by now
       internal.hovered.delete(key);
     }
   });
@@ -427,31 +434,8 @@ function removeInteractivity(store, object) {
 }
 function createEvents(store) {
   const temp = new THREE__namespace.Vector3();
-  /** Sets up defaultRaycaster */
-
-  function prepareRay(event) {
-    var _customOffsets$offset, _customOffsets$offset2, _customOffsets$width, _customOffsets$height;
-
-    const state = store.getState();
-    const {
-      raycaster,
-      mouse,
-      camera,
-      size
-    } = state; // https://github.com/pmndrs/react-three-fiber/pull/782
-    // Events trigger outside of canvas when moved
-
-    const customOffsets = raycaster.computeOffsets == null ? void 0 : raycaster.computeOffsets(event, state);
-    const offsetX = (_customOffsets$offset = customOffsets == null ? void 0 : customOffsets.offsetX) != null ? _customOffsets$offset : event.offsetX;
-    const offsetY = (_customOffsets$offset2 = customOffsets == null ? void 0 : customOffsets.offsetY) != null ? _customOffsets$offset2 : event.offsetY;
-    const width = (_customOffsets$width = customOffsets == null ? void 0 : customOffsets.width) != null ? _customOffsets$width : size.width;
-    const height = (_customOffsets$height = customOffsets == null ? void 0 : customOffsets.height) != null ? _customOffsets$height : size.height;
-    mouse.set(offsetX / width * 2 - 1, -(offsetY / height) * 2 + 1);
-    raycaster.setFromCamera(mouse, camera);
-  }
   /** Calculates delta */
 
-
   function calculateDistance(event) {
     const {
       internal
@@ -471,55 +455,70 @@ function createEvents(store) {
     }));
   }
 
-  function intersect(filter) {
+  function intersect(event, filter) {
     const state = store.getState();
-    const {
-      raycaster,
-      internal
-    } = state; // Skip event handling when noEvents is set
-
-    if (!raycaster.enabled) return [];
-    const seen = new Set();
+    const duplicates = new Set();
     const intersections = []; // Allow callers to eliminate event objects
 
-    const eventsObjects = filter ? filter(internal.interaction) : internal.interaction; // Intersect known handler objects and filter against duplicates
+    const eventsObjects = filter ? filter(state.internal.interaction) : state.internal.interaction; // Reset all raycaster cameras to undefined
+
+    eventsObjects.forEach(obj => {
+      const state = getRootState(obj);
+
+      if (state) {
+        state.raycaster.camera = undefined;
+      }
+    }); // Collect events
+
+    let hits = eventsObjects // Intersect objects
+    .flatMap(obj => {
+      const state = getRootState(obj); // Skip event handling when noEvents is set, or when the raycasters camera is null
+
+      if (!state || !state.events.enabled || state.raycaster.camera === null) return []; // When the camera is undefined we have to call the event layers update function
+
+      if (state.raycaster.camera === undefined) {
+        var _state$previousRoot;
+
+        state.events.compute == null ? void 0 : state.events.compute(event, state, (_state$previousRoot = state.previousRoot) == null ? void 0 : _state$previousRoot.getState()); // If the camera is still undefined we have to skip this layer entirely
+
+        if (state.raycaster.camera === undefined) state.raycaster.camera = null;
+      } // Intersect object by object
 
-    let intersects = raycaster.intersectObjects(eventsObjects, true).filter(item => {
+
+      return state.raycaster.camera ? state.raycaster.intersectObject(obj, true) : [];
+    }) // Sort by event priority and distance
+    .sort((a, b) => {
+      const aState = getRootState(a.object);
+      const bState = getRootState(b.object);
+      if (!aState || !bState) return 0;
+      return bState.events.priority - aState.events.priority || a.distance - b.distance;
+    }) // Filter out duplicates
+    .filter(item => {
       const id = makeId(item);
-      if (seen.has(id)) return false;
-      seen.add(id);
+      if (duplicates.has(id)) return false;
+      duplicates.add(id);
       return true;
     }); // https://github.com/mrdoob/three.js/issues/16031
-    // Allow custom userland intersect sort order
+    // Allow custom userland intersect sort order, this likely only makes sense on the root filter
 
-    if (raycaster.filter) intersects = raycaster.filter(intersects, state);
+    if (state.events.filter) hits = state.events.filter(hits, state); // Bubble up the events, find the event source (eventObject)
 
-    for (const intersect of intersects) {
-      let eventObject = intersect.object; // Bubble event up
+    for (const hit of hits) {
+      let eventObject = hit.object; // Bubble event up
 
       while (eventObject) {
         var _r3f2;
 
-        if ((_r3f2 = eventObject.__r3f) != null && _r3f2.eventCount) intersections.push({ ...intersect,
+        if ((_r3f2 = eventObject.__r3f) != null && _r3f2.eventCount) intersections.push({ ...hit,
           eventObject
         });
         eventObject = eventObject.parent;
       }
-    }
-
-    return intersections;
-  }
-  /**  Creates filtered intersects and returns an array of positive hits */
+    } // If the interaction is captured, make all capturing targets part of the intersect.
 
 
-  function patchIntersects(intersections, event) {
-    const {
-      internal
-    } = store.getState(); // If the interaction is captured, make all capturing targets  part of the
-    // intersect.
-
-    if ('pointerId' in event && internal.capturedMap.has(event.pointerId)) {
-      for (let captureData of internal.capturedMap.get(event.pointerId).values()) {
+    if ('pointerId' in event && state.internal.capturedMap.has(event.pointerId)) {
+      for (let captureData of state.internal.capturedMap.get(event.pointerId).values()) {
         intersections.push(captureData.intersection);
       }
     }
@@ -532,13 +531,13 @@ function createEvents(store) {
   function handleIntersects(intersections, event, delta, callback) {
     const {
       raycaster,
-      mouse,
+      pointer,
       camera,
       internal
     } = store.getState(); // If anything has been found, forward it to the event listeners
 
     if (intersections.length) {
-      const unprojectedPoint = temp.set(mouse.x, mouse.y, 0).unproject(camera);
+      const unprojectedPoint = temp.set(pointer.x, pointer.y, 0).unproject(camera);
       const localState = {
         stopped: false
       };
@@ -589,8 +588,7 @@ function createEvents(store) {
 
         let raycastEvent = { ...hit,
           ...extractEventProps,
-          spaceX: mouse.x,
-          spaceY: mouse.y,
+          pointer,
           intersections,
           stopped: localState.stopped,
           delta,
@@ -627,8 +625,6 @@ function createEvents(store) {
             setPointerCapture,
             releasePointerCapture
           },
-          sourceEvent: event,
-          // deprecated
           nativeEvent: event
         }; // Call subscribers
 
@@ -693,14 +689,15 @@ function createEvents(store) {
       const {
         onPointerMissed,
         internal
-      } = store.getState();
-      prepareRay(event);
+      } = store.getState(); //prepareRay(event)
+
       internal.lastEvent.current = event; // Get fresh intersects
 
       const isPointerMove = name === 'onPointerMove';
       const isClickEvent = name === 'onClick' || name === 'onContextMenu' || name === 'onDoubleClick';
-      const filter = isPointerMove ? filterPointerEvents : undefined;
-      const hits = patchIntersects(intersect(filter), event);
+      const filter = isPointerMove ? filterPointerEvents : undefined; //const hits = patchIntersects(intersect(filter), event)
+
+      const hits = intersect(event, filter);
       const delta = isClickEvent ? calculateDistance(event) : 0; // Save initial coordinates on pointer-down
 
       if (name === 'onPointerDown') {
@@ -1179,17 +1176,20 @@ const createStore = (invalidate, advance) => {
       }
     }));
 
+    const pointer = new THREE__namespace.Vector2();
     return {
+      set,
+      get,
       // Mock objects that have to be configured
       gl: null,
       camera: null,
       raycaster: null,
       events: {
+        priority: 1,
+        enabled: true,
         connected: false
       },
       xr: null,
-      set,
-      get,
       invalidate: () => invalidate(get()),
       advance: (timestamp, runGlobalEffects) => advance(timestamp, runGlobalEffects, get()),
       linear: false,
@@ -1197,7 +1197,8 @@ const createStore = (invalidate, advance) => {
       scene: prepare(new THREE__namespace.Scene()),
       controls: null,
       clock: new THREE__namespace.Clock(),
-      mouse: new THREE__namespace.Vector2(),
+      pointer,
+      mouse: pointer,
       frameloop: 'always',
       onPointerMissed: undefined,
       performance: {
@@ -1229,6 +1230,11 @@ const createStore = (invalidate, advance) => {
         factor: 0,
         getCurrentViewport
       },
+      setEvents: events => set(state => ({ ...state,
+        events: { ...state.events,
+          events
+        }
+      })),
       setSize: (width, height) => {
         const camera = get().camera;
         const size = {
@@ -1266,6 +1272,7 @@ const createStore = (invalidate, advance) => {
           frameloop
         }));
       },
+      previousRoot: undefined,
       internal: {
         active: false,
         priority: 0,
@@ -1467,43 +1474,6 @@ function useStore() {
 function useThree(selector = state => state, equalityFn) {
   return useStore()(selector, equalityFn);
 }
-function useInject(state) {
-  const useOriginalStore = useStore();
-  const useInjectStore = React__namespace.useMemo(() => {
-    const useInjected = (sel = state => state) => {
-      // Execute the useStore hook with the selector once, to maintain reactivity, result doesn't matter
-      useOriginalStore(sel); // Inject data and return the result, either selected or raw
-
-      return sel({ ...useOriginalStore.getState(),
-        ...state
-      });
-    };
-
-    useInjected.setState = useOriginalStore.setState;
-    useInjected.destroy = useOriginalStore.destroy; // Patch getState
-
-    useInjected.getState = () => {
-      return { ...useOriginalStore.getState(),
-        ...state
-      };
-    }; // Patch subscribe
-
-
-    useInjected.subscribe = listener => {
-      return useOriginalStore.subscribe((current, previous) => listener({ ...current,
-        ...state
-      }, previous));
-    };
-
-    return useInjected;
-  }, [useOriginalStore, state]); // Return the patched store and a provider component
-
-  return React__namespace.useMemo(() => [({
-    children
-  }) => /*#__PURE__*/React__namespace.createElement(context.Provider, {
-    value: useInjectStore
-  }, children), useInjectStore], [useInjectStore]);
-}
 function useFrame(callback, renderPriority = 0) {
   const subscribe = useStore().getState().internal.subscribe; // Update ref
 
@@ -1530,6 +1500,11 @@ function loadingFn(extensions, onProgress) {
   };
 }
 
+function useMemoizedFn(fn) {
+  const fnRef = React__namespace.useRef(fn);
+  React__namespace.useLayoutEffect(() => void (fnRef.current = fn), [fn]);
+  return (...args) => fnRef.current == null ? void 0 : fnRef.current(...args);
+}
 function useLoader(Proto, input, extensions, onProgress) {
   // Use suspense to load async assets
   const keys = Array.isArray(input) ? input : [input];
@@ -1629,9 +1604,7 @@ function createRoot(canvas) {
         params,
         ...options
       } = raycastOptions || {};
-      if (!is.equ(options, raycaster, shallowLoose)) applyProps(raycaster, {
-        enabled: true,
-        ...options
+      if (!is.equ(options, raycaster, shallowLoose)) applyProps(raycaster, { ...options
       });
       if (!is.equ(params, raycaster.params, shallowLoose)) applyProps(raycaster, {
         params: { ...raycaster.params,
@@ -1746,14 +1719,14 @@ function createRoot(canvas) {
       return this;
     },
 
-    render(element) {
+    render(children) {
       // The root has to be configured before it can be rendered
       if (!configured) this.configure();
       reconciler.updateContainer( /*#__PURE__*/React__namespace.createElement(Provider, {
         store: store,
-        element: element,
+        children: children,
         onCreated: onCreated,
-        target: canvas
+        rootElement: canvas
       }), fiber, null, () => undefined);
       return store;
     },
@@ -1765,35 +1738,36 @@ function createRoot(canvas) {
   };
 }
 
-function render(element, canvas, config = {}) {
+function render(children, canvas, config) {
   console.warn('R3F.render is no longer supported in React 18. Use createRoot instead!');
   const root = createRoot(canvas);
   root.configure(config);
-  return root.render(element);
+  return root.render(children);
 }
 
 function Provider({
   store,
-  element,
+  children,
   onCreated,
-  target
+  rootElement
 }) {
-  React__namespace.useEffect(() => {
+  React__namespace.useLayoutEffect(() => {
     const state = store.getState(); // Flag the canvas active, rendering will now begin
 
     state.set(state => ({
       internal: { ...state.internal,
         active: true
       }
-    })); // Connect events
+    })); // Notifiy that init is completed, the scene graph exists, but nothing has yet rendered
 
-    state.events.connect == null ? void 0 : state.events.connect(target); // Notifiy that init is completed, the scene graph exists, but nothing has yet rendered
+    if (onCreated) onCreated(state); // Connect events to the targets parent, this is done to ensure events are registered on
+    // a shared target, and not on the canvas itself
 
-    if (onCreated) onCreated(state); // eslint-disable-next-line react-hooks/exhaustive-deps
+    if (!store.getState().events.connected) state.events.connect == null ? void 0 : state.events.connect(rootElement); // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
   return /*#__PURE__*/React__namespace.createElement(context.Provider, {
     value: store
-  }, element);
+  }, children);
 }
 
 function unmountComponentAtNode(canvas, callback) {
@@ -1834,20 +1808,58 @@ function createPortal(children, container, state) {
 }
 
 function Portal({
-  state,
+  state = {},
   children,
   container
 }) {
   /** This has to be a component because it would not be able to call useThree/useStore otherwise since
-   *  if this is our environment, then we are in in r3f's renderer but in react-dom, it would trigger
+   *  if this is our environment, then we are not in r3f's renderer but in react-dom, it would trigger
    *  the "R3F hooks can only be used within the Canvas component!" warning:
    *  <Canvas>
    *    {createPortal(...)} */
-  const portalState = React__namespace.useMemo(() => ({ ...state,
-    scene: container
-  }), [state, container]);
-  const [PortalProvider, portalRoot] = useInject(portalState);
-  return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, reconciler.createPortal( /*#__PURE__*/React__namespace.createElement(PortalProvider, null, children), portalRoot, null));
+  const {
+    events,
+    ...rest
+  } = state;
+  const previousRoot = useStore();
+  const [raycaster] = React__namespace.useState(() => new THREE__namespace.Raycaster());
+  const inject = React__namespace.useCallback((state, injectState) => {
+    const intersect = { ...state
+    };
+
+    if (injectState) {
+      // Only the fields of "state" that do not differ from injectState
+      Object.keys(state).forEach(key => {
+        if ( // Some props should be off-limits
+        !['size', 'viewport', 'internal', 'performance'].includes(key) && // Otherwise filter out the props that are different and let the inject layer take precedence
+        state[key] !== injectState[key]) delete intersect[key];
+      });
+    }
+
+    return { ...intersect,
+      scene: container,
+      previousRoot,
+      raycaster,
+      events: { ...state.events,
+        ...events
+      },
+      ...rest
+    };
+  }, [state]);
+  const [useInjectStore] = React__namespace.useState(() => {
+    const store = create__default['default']((set, get) => ({ ...inject(previousRoot.getState()),
+      set,
+      get
+    }));
+    previousRoot.subscribe(state => useInjectStore.setState(injectState => inject(state, injectState)));
+    return store;
+  });
+  React__namespace.useEffect(() => {
+    useInjectStore.setState(injectState => inject(previousRoot.getState(), injectState));
+  }, [inject]);
+  return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, reconciler.createPortal( /*#__PURE__*/React__namespace.createElement(context.Provider, {
+    value: useInjectStore
+  }, children), useInjectStore, null));
 }
 
 reconciler.injectIntoDevTools({
@@ -1869,6 +1881,7 @@ exports.createPortal = createPortal;
 exports.createRoot = createRoot;
 exports.dispose = dispose;
 exports.extend = extend;
+exports.getRootState = getRootState;
 exports.invalidate = invalidate;
 exports.omit = omit;
 exports.pick = pick;
@@ -1879,7 +1892,7 @@ exports.threeTypes = threeTypes;
 exports.unmountComponentAtNode = unmountComponentAtNode;
 exports.useFrame = useFrame;
 exports.useGraph = useGraph;
-exports.useInject = useInject;
 exports.useLoader = useLoader;
+exports.useMemoizedFn = useMemoizedFn;
 exports.useStore = useStore;
 exports.useThree = useThree;