@react-three/fiber 8.0.9 → 8.0.12

package/dist/{index-4dae9cc6.cjs.prod.js → index-e322e5c8.cjs.prod.js}

@@ -19,14 +19,12 @@ function _interopNamespace(e) {
         var d = Object.getOwnPropertyDescriptor(e, k);
         Object.defineProperty(n, k, d.get ? d : {
           enumerable: true,
-          get: function () {
-            return e[k];
-          }
+          get: function () { return e[k]; }
         });
       }
     });
   }
-  n['default'] = e;
+  n["default"] = e;
   return Object.freeze(n);
 }
 
@@ -39,9 +37,10 @@ var threeTypes = /*#__PURE__*/Object.freeze({
   __proto__: null
 });
 
-// React currently throws a warning when using useLayoutEffect on the server.
+const isOrthographicCamera = def => def && def.isOrthographicCamera; // React currently throws a warning when using useLayoutEffect on the server.
 // To get around it, we can conditionally useEffect on the server (no-op) and
 // useLayoutEffect on the client.
+
 const isSSR = typeof window === 'undefined' || !window.navigator || /ServerSideRendering|^Deno\//.test(window.navigator.userAgent);
 const useIsomorphicLayoutEffect = isSSR ? React__namespace.useEffect : React__namespace.useLayoutEffect;
 function useMutableCallback(fn) {
@@ -94,29 +93,6 @@ const getRootState = obj => {
 
   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.
- */
-
-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;
-    return acc;
-  }, {});
-}
-/**
- * Clones an object and cherry-picks keys.
- */
-
-const pick = (obj, keys) => filterKeys(obj, false, ...keys);
-/**
- * Clones an object and prunes or omits keys.
- */
-
-const omit = (obj, keys) => filterKeys(obj, true, ...keys);
 // A collection of compare functions
 const is = {
   obj: a => a === Object(a) && !is.arr(a) && typeof a !== 'function',
@@ -342,12 +318,16 @@ function applyProps$1(instance, data) {
 
     if (value === DEFAULT + 'remove') {
       if (targetProp && targetProp.constructor) {
+        var _memoized$args;
+
         // use the prop constructor to find the default it should be
-        value = new targetProp.constructor(...memoized.args);
+        value = new targetProp.constructor(...((_memoized$args = memoized.args) != null ? _memoized$args : []));
       } else if (currentInstance.constructor) {
+        var _currentInstance$__r;
+
         // create a blank slate of the instance and copy the particular parameter.
         // @ts-ignore
-        const defaultClassCall = new currentInstance.constructor(...currentInstance.__r3f.memoizedProps.args);
+        const defaultClassCall = new currentInstance.constructor(...((_currentInstance$__r = currentInstance.__r3f.memoizedProps.args) != null ? _currentInstance$__r : []));
         value = defaultClassCall[targetProp]; // destory the instance
 
         if (defaultClassCall.dispose) defaultClassCall.dispose(); // instance does not have constructor, just set it to 0
@@ -362,35 +342,35 @@ function applyProps$1(instance, data) {
       localState.eventCount = Object.keys(localState.handlers).length;
     } // Special treatment for objects with support for set/copy, and layers
     else if (targetProp && targetProp.set && (targetProp.copy || targetProp instanceof THREE__namespace.Layers)) {
-        // If value is an array
-        if (Array.isArray(value)) {
-          if (targetProp.fromArray) targetProp.fromArray(value);else targetProp.set(...value);
-        } // Test again target.copy(class) next ...
-        else if (targetProp.copy && value && value.constructor && targetProp.constructor.name === value.constructor.name) {
-            targetProp.copy(value);
-          } // If nothing else fits, just set the single value, ignore undefined
-          // https://github.com/pmndrs/react-three-fiber/issues/274
-          else if (value !== undefined) {
-              const isColor = targetProp instanceof THREE__namespace.Color; // Allow setting array scalars
-
-              if (!isColor && targetProp.setScalar) targetProp.setScalar(value); // Layers have no copy function, we must therefore copy the mask property
-              else if (targetProp instanceof THREE__namespace.Layers && value instanceof THREE__namespace.Layers) targetProp.mask = value.mask; // Otherwise just set ...
-                else targetProp.set(value); // For versions of three which don't support THREE.ColorManagement,
-              // Auto-convert sRGB colors
-              // https://github.com/pmndrs/react-three-fiber/issues/344
-
-              const supportsColorManagement = THREE__namespace.ColorManagement;
-              if (!supportsColorManagement && !rootState.linear && isColor) targetProp.convertSRGBToLinear();
-            } // Else, just overwrite the value
-
-      } else {
-        currentInstance[key] = value; // Auto-convert sRGB textures, for now ...
+      // If value is an array
+      if (Array.isArray(value)) {
+        if (targetProp.fromArray) targetProp.fromArray(value);else targetProp.set(...value);
+      } // Test again target.copy(class) next ...
+      else if (targetProp.copy && value && value.constructor && targetProp.constructor.name === value.constructor.name) {
+        targetProp.copy(value);
+      } // If nothing else fits, just set the single value, ignore undefined
+      // https://github.com/pmndrs/react-three-fiber/issues/274
+      else if (value !== undefined) {
+        const isColor = targetProp instanceof THREE__namespace.Color; // Allow setting array scalars
+
+        if (!isColor && targetProp.setScalar) targetProp.setScalar(value); // Layers have no copy function, we must therefore copy the mask property
+        else if (targetProp instanceof THREE__namespace.Layers && value instanceof THREE__namespace.Layers) targetProp.mask = value.mask; // Otherwise just set ...
+        else targetProp.set(value); // For versions of three which don't support THREE.ColorManagement,
+        // Auto-convert sRGB colors
         // https://github.com/pmndrs/react-three-fiber/issues/344
 
-        if (!rootState.linear && currentInstance[key] instanceof THREE__namespace.Texture) {
-          currentInstance[key].encoding = THREE__namespace.sRGBEncoding;
-        }
+        const supportsColorManagement = THREE__namespace.ColorManagement;
+        if (!supportsColorManagement && !rootState.linear && isColor) targetProp.convertSRGBToLinear();
+      } // Else, just overwrite the value
+
+    } else {
+      currentInstance[key] = value; // Auto-convert sRGB textures, for now ...
+      // https://github.com/pmndrs/react-three-fiber/issues/344
+
+      if (!rootState.linear && currentInstance[key] instanceof THREE__namespace.Texture) {
+        currentInstance[key].encoding = THREE__namespace.sRGBEncoding;
       }
+    }
 
     invalidateInstance(instance);
   });
@@ -416,6 +396,25 @@ function invalidateInstance(instance) {
 function updateInstance(instance) {
   instance.onUpdate == null ? void 0 : instance.onUpdate(instance);
 }
+function updateCamera(camera, size) {
+  // https://github.com/pmndrs/react-three-fiber/issues/92
+  // Do not mess with the camera if it belongs to the user
+  if (!camera.manual) {
+    if (isOrthographicCamera(camera)) {
+      camera.left = size.width / -2;
+      camera.right = size.width / 2;
+      camera.top = size.height / 2;
+      camera.bottom = size.height / -2;
+    } else {
+      camera.aspect = size.width / size.height;
+    }
+
+    camera.updateProjectionMatrix(); // https://github.com/pmndrs/react-three-fiber/issues/178
+    // Update matrix world since the renderer is a frame late
+
+    camera.updateMatrixWorld();
+  }
+}
 
 function makeId(event) {
   return (event.eventObject || event.object).uuid + '/' + event.index + event.instanceId;
@@ -1055,7 +1054,7 @@ function createRenderer(roots, getEventPriority) {
     });
   }
 
-  const reconciler = Reconciler__default['default']({
+  const reconciler = Reconciler__default["default"]({
     createInstance,
     removeChild,
     appendChild,
@@ -1188,12 +1187,12 @@ function createRenderer(roots, getEventPriority) {
   };
 }
 
+const privateKeys = ['set', 'get', 'setSize', 'setFrameloop', 'setDpr', 'events', 'invalidate', 'advance', 'size', 'viewport'];
 const isRenderer = def => !!(def != null && def.render);
-const isOrthographicCamera = def => def && def.isOrthographicCamera;
 const context = /*#__PURE__*/React__namespace.createContext(null);
 
 const createStore = (invalidate, advance) => {
-  const rootState = create__default['default']((set, get) => {
+  const rootState = create__default["default"]((set, get) => {
     const position = new THREE__namespace.Vector3();
     const defaultTarget = new THREE__namespace.Vector3();
     const tempTarget = new THREE__namespace.Vector3();
@@ -1396,24 +1395,7 @@ const createStore = (invalidate, advance) => {
     } = rootState.getState();
 
     if (size !== oldSize || viewport.dpr !== oldDpr) {
-      // https://github.com/pmndrs/react-three-fiber/issues/92
-      // Do not mess with the camera if it belongs to the user
-      if (!camera.manual) {
-        if (isOrthographicCamera(camera)) {
-          camera.left = size.width / -2;
-          camera.right = size.width / 2;
-          camera.top = size.height / 2;
-          camera.bottom = size.height / -2;
-        } else {
-          camera.aspect = size.width / size.height;
-        }
-
-        camera.updateProjectionMatrix(); // https://github.com/pmndrs/react-three-fiber/issues/178
-        // Update matrix world since the renderer is a frame late
-
-        camera.updateMatrixWorld();
-      } // Update renderer
-
+      updateCamera(camera, size); // Update renderer
 
       gl.setPixelRatio(viewport.dpr);
       gl.setSize(size.width, size.height);
@@ -1952,56 +1934,101 @@ function Portal({
    *    {createPortal(...)} */
   const {
     events,
+    size,
     ...rest
   } = state;
   const previousRoot = useStore();
   const [raycaster] = React__namespace.useState(() => new THREE__namespace.Raycaster());
   const [pointer] = React__namespace.useState(() => new THREE__namespace.Vector2());
-  const inject = React__namespace.useCallback((state, injectState) => {
-    const intersect = { ...state
-    };
+  const inject = React__namespace.useCallback((rootState, injectState) => {
+    const intersect = { ...rootState
+    }; // all prev state props
+    // Only the fields of "rootState" that do not differ from injectState
+    // Some props should be off-limits
+    // Otherwise filter out the props that are different and let the inject layer take precedence
+
+    Object.keys(rootState).forEach(key => {
+      if ( // Some props should be off-limits
+      privateKeys.includes(key) || // Otherwise filter out the props that are different and let the inject layer take precedence
+      rootState[key] !== injectState[key]) {
+        delete intersect[key];
+      }
+    });
+    let viewport = undefined;
 
-    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];
-      });
+    if (injectState && size) {
+      const camera = injectState.camera; // Calculate the override viewport, if present
+
+      viewport = rootState.viewport.getCurrentViewport(camera, new THREE__namespace.Vector3(), size); // Update the portal camera, if it differs from the previous layer
+
+      if (camera !== rootState.camera) updateCamera(camera, size);
     }
 
-    return { ...intersect,
+    return { // The intersect consists of the previous root state
+      ...intersect,
+      // Portals have their own scene, which forms the root, a raycaster and a pointer
       scene: container,
-      previousRoot,
       raycaster,
-      events: { ...state.events,
+      pointer,
+      mouse: pointer,
+      // Their previous root is the layer before it
+      previousRoot,
+      // Events, size and viewport can be overridden by the inject layer
+      events: { ...rootState.events,
         ...(injectState == null ? void 0 : injectState.events),
-        pointer,
-        mouse: pointer,
         ...events
       },
+      size: { ...rootState.size,
+        ...size
+      },
+      viewport: { ...rootState.viewport,
+        ...viewport
+      },
       ...rest
     };
   }, [state]);
-  const [useInjectStore] = React__namespace.useState(() => {
-    const store = create__default['default']((set, get) => ({ ...inject(previousRoot.getState()),
+  const [usePortalStore] = React__namespace.useState(() => {
+    // Create a mirrored store, based on the previous root with a few overrides ...
+    const previousState = previousRoot.getState();
+    const store = create__default["default"]((set, get) => ({ ...previousState,
+      scene: container,
+      raycaster,
+      pointer,
+      mouse: pointer,
+      previousRoot,
+      events: { ...previousState.events,
+        ...events
+      },
+      size: { ...previousState.size,
+        ...size
+      },
+      ...rest,
+      // Set and get refer to this root-state
       set,
       get,
+      // Layers are allowed to override events
       setEvents: events => set(state => ({ ...state,
         events: { ...state.events,
           ...events
         }
       }))
     }));
-    previousRoot.subscribe(state => useInjectStore.setState(injectState => inject(state, injectState)));
     return store;
   });
   React__namespace.useEffect(() => {
-    useInjectStore.setState(injectState => inject(previousRoot.getState(), injectState));
+    // Subscribe to previous root-state and copy changes over to the mirrored portal-state
+    const unsub = previousRoot.subscribe(prev => usePortalStore.setState(state => inject(prev, state)));
+    return () => {
+      unsub();
+      usePortalStore.destroy();
+    };
+  }, []);
+  React__namespace.useEffect(() => {
+    usePortalStore.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));
+    value: usePortalStore
+  }, children), usePortalStore, null));
 }
 
 reconciler.injectIntoDevTools({
@@ -2027,8 +2054,6 @@ exports.dispose = dispose;
 exports.extend = extend;
 exports.getRootState = getRootState;
 exports.invalidate = invalidate;
-exports.omit = omit;
-exports.pick = pick;
 exports.reconciler = reconciler;
 exports.render = render;
 exports.roots = roots;