@react-three/fiber 9.5.0 → 9.6.1

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @react-three/fiber
 
+## 9.6.1
+
+### Patch Changes
+
+- b645741874486417727ea75a0704d48e9f21d623: fix: Seamlessly transfer interactivity state when swapping instances
+
+## 9.6.0
+
+### Minor Changes
+
+- 26e4716412b11a189dd9ac4b3033d0e504f1d7df: Fix uniforms refs so they remain stable for ShaderMaterial
+
 ## 9.5.0
 
 ### Minor Changes

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

@@ -86,6 +86,8 @@ export interface PointerCaptureTarget {
     intersection: Intersection;
     target: Element;
 }
+/** This function transfers all interactivity state from one object instance to another. Used when swapping instances due to reconstruction. */
+export declare function swapInteractivity(store: RootStore, object: THREE.Object3D, newObject: THREE.Object3D): void;
 export declare function removeInteractivity(store: RootStore, object: THREE.Object3D): void;
 export declare function createEvents(store: RootStore): {
     handlePointer: (name: string) => (event: DomEvent) => void;

package/dist/{events-238e0986.cjs.prod.js → events-583399dd.cjs.prod.js}

@@ -449,6 +449,19 @@ function applyProps(object, props) {
       // Otherwise just set single value
       else target.set(value);
     }
+    // ShaderMaterial uniforms must keep a stable target reference
+    else if (root instanceof THREE__namespace.ShaderMaterial && key === 'uniforms' && is.obj(value)) {
+      if (!is.obj(root.uniforms)) root.uniforms = {};
+      const uniforms = root.uniforms;
+      const nextUniforms = value;
+      for (const name in nextUniforms) {
+        const uniform = nextUniforms[name];
+        const targetUniform = uniforms[name];
+        if (targetUniform) Object.assign(targetUniform, uniform);else uniforms[name] = {
+          ...uniform
+        };
+      }
+    }
     // Else, just overwrite the value
     else {
       var _root$key;
@@ -529,6 +542,37 @@ function releaseInternalPointerCapture(capturedMap, obj, captures, pointerId) {
     }
   }
 }
+
+/** This function transfers all interactivity state from one object instance to another. Used when swapping instances due to reconstruction. */
+function swapInteractivity(store, object, newObject) {
+  const {
+    internal
+  } = store.getState();
+  for (let i = 0; i < internal.interaction.length; i++) {
+    if (internal.interaction[i] === object) internal.interaction[i] = newObject;
+  }
+  for (let i = 0; i < internal.initialHits.length; i++) {
+    if (internal.initialHits[i] === object) internal.initialHits[i] = newObject;
+  }
+  internal.hovered.forEach((value, key) => {
+    if (value.eventObject === object || value.object === object) {
+      internal.hovered.delete(key);
+      const next = {
+        ...value,
+        eventObject: value.eventObject === object ? newObject : value.eventObject,
+        object: value.object === object ? newObject : value.object
+      };
+      internal.hovered.set(makeId(next), next);
+    }
+  });
+  internal.capturedMap.forEach(captures => {
+    const captureData = captures.get(object);
+    if (captureData) {
+      captures.delete(object);
+      captures.set(newObject, captureData);
+    }
+  });
+}
 function removeInteractivity(store, object) {
   const {
     internal
@@ -770,7 +814,7 @@ function createEvents(store) {
       internal
     } = store.getState();
     for (const hoveredObj of internal.hovered.values()) {
-      // When no objects were hit or the the hovered object wasn't found underneath the cursor
+      // When no objects were hit or the hovered object wasn't found underneath the cursor
       // we call onPointerOut and delete the object from the hovered-elements map
       if (!intersections.length || !intersections.find(hit => hit.object === hoveredObj.object && hit.index === hoveredObj.index && hit.instanceId === hoveredObj.instanceId)) {
         const eventObject = hoveredObj.eventObject;
@@ -1296,7 +1340,7 @@ useLoader.clear = function (loader, input) {
 
 var packageData = {
 	name: "@react-three/fiber",
-	version: "9.5.0",
+	version: "9.6.1",
 	description: "A React renderer for Threejs",
 	keywords: [
 		"react",
@@ -7065,11 +7109,11 @@ function swapInstances() {
       const target = catalogue[toPascalCase(instance.type)];
 
       // Create object
+      const prevObject = instance.object;
       instance.object = (_instance$props$objec = instance.props.object) != null ? _instance$props$objec : new target(...((_instance$props$args = instance.props.args) != null ? _instance$props$args : []));
       instance.object.__r3f = instance;
       setFiberRef(fiber, instance.object);
-
-      // Set initial props
+      swapInteractivity(findInitialRoot(instance), prevObject, instance.object);
       applyProps(instance.object, instance.props);
       if (instance.props.attach) {
         attach(parent, instance);
@@ -7904,7 +7948,7 @@ function invalidate(state, frames = 1) {
       //called from within a useFrame, it means the user wants an additional frame
       state.internal.frames = 2;
     } else {
-      //the user need a new frame, no need to increment further than 1
+      //the user needs a new frame, no need to increment further than 1
       state.internal.frames = 1;
     }
   }

package/dist/{events-5a94e5eb.esm.js → events-b389eeca.esm.js}

@@ -424,6 +424,19 @@ function applyProps(object, props) {
       // Otherwise just set single value
       else target.set(value);
     }
+    // ShaderMaterial uniforms must keep a stable target reference
+    else if (root instanceof THREE.ShaderMaterial && key === 'uniforms' && is.obj(value)) {
+      if (!is.obj(root.uniforms)) root.uniforms = {};
+      const uniforms = root.uniforms;
+      const nextUniforms = value;
+      for (const name in nextUniforms) {
+        const uniform = nextUniforms[name];
+        const targetUniform = uniforms[name];
+        if (targetUniform) Object.assign(targetUniform, uniform);else uniforms[name] = {
+          ...uniform
+        };
+      }
+    }
     // Else, just overwrite the value
     else {
       var _root$key;
@@ -504,6 +517,37 @@ function releaseInternalPointerCapture(capturedMap, obj, captures, pointerId) {
     }
   }
 }
+
+/** This function transfers all interactivity state from one object instance to another. Used when swapping instances due to reconstruction. */
+function swapInteractivity(store, object, newObject) {
+  const {
+    internal
+  } = store.getState();
+  for (let i = 0; i < internal.interaction.length; i++) {
+    if (internal.interaction[i] === object) internal.interaction[i] = newObject;
+  }
+  for (let i = 0; i < internal.initialHits.length; i++) {
+    if (internal.initialHits[i] === object) internal.initialHits[i] = newObject;
+  }
+  internal.hovered.forEach((value, key) => {
+    if (value.eventObject === object || value.object === object) {
+      internal.hovered.delete(key);
+      const next = {
+        ...value,
+        eventObject: value.eventObject === object ? newObject : value.eventObject,
+        object: value.object === object ? newObject : value.object
+      };
+      internal.hovered.set(makeId(next), next);
+    }
+  });
+  internal.capturedMap.forEach(captures => {
+    const captureData = captures.get(object);
+    if (captureData) {
+      captures.delete(object);
+      captures.set(newObject, captureData);
+    }
+  });
+}
 function removeInteractivity(store, object) {
   const {
     internal
@@ -745,7 +789,7 @@ function createEvents(store) {
       internal
     } = store.getState();
     for (const hoveredObj of internal.hovered.values()) {
-      // When no objects were hit or the the hovered object wasn't found underneath the cursor
+      // When no objects were hit or the hovered object wasn't found underneath the cursor
       // we call onPointerOut and delete the object from the hovered-elements map
       if (!intersections.length || !intersections.find(hit => hit.object === hoveredObj.object && hit.index === hoveredObj.index && hit.instanceId === hoveredObj.instanceId)) {
         const eventObject = hoveredObj.eventObject;
@@ -1271,7 +1315,7 @@ useLoader.clear = function (loader, input) {
 
 var packageData = {
 	name: "@react-three/fiber",
-	version: "9.5.0",
+	version: "9.6.1",
 	description: "A React renderer for Threejs",
 	keywords: [
 		"react",
@@ -15237,11 +15281,11 @@ function swapInstances() {
       const target = catalogue[toPascalCase(instance.type)];
 
       // Create object
+      const prevObject = instance.object;
       instance.object = (_instance$props$objec = instance.props.object) != null ? _instance$props$objec : new target(...((_instance$props$args = instance.props.args) != null ? _instance$props$args : []));
       instance.object.__r3f = instance;
       setFiberRef(fiber, instance.object);
-
-      // Set initial props
+      swapInteractivity(findInitialRoot(instance), prevObject, instance.object);
       applyProps(instance.object, instance.props);
       if (instance.props.attach) {
         attach(parent, instance);
@@ -16076,7 +16120,7 @@ function invalidate(state, frames = 1) {
       //called from within a useFrame, it means the user wants an additional frame
       state.internal.frames = 2;
     } else {
-      //the user need a new frame, no need to increment further than 1
+      //the user needs a new frame, no need to increment further than 1
       state.internal.frames = 1;
     }
   }

package/dist/{events-358c3764.cjs.dev.js → events-f19bcc32.cjs.dev.js}

@@ -449,6 +449,19 @@ function applyProps(object, props) {
       // Otherwise just set single value
       else target.set(value);
     }
+    // ShaderMaterial uniforms must keep a stable target reference
+    else if (root instanceof THREE__namespace.ShaderMaterial && key === 'uniforms' && is.obj(value)) {
+      if (!is.obj(root.uniforms)) root.uniforms = {};
+      const uniforms = root.uniforms;
+      const nextUniforms = value;
+      for (const name in nextUniforms) {
+        const uniform = nextUniforms[name];
+        const targetUniform = uniforms[name];
+        if (targetUniform) Object.assign(targetUniform, uniform);else uniforms[name] = {
+          ...uniform
+        };
+      }
+    }
     // Else, just overwrite the value
     else {
       var _root$key;
@@ -529,6 +542,37 @@ function releaseInternalPointerCapture(capturedMap, obj, captures, pointerId) {
     }
   }
 }
+
+/** This function transfers all interactivity state from one object instance to another. Used when swapping instances due to reconstruction. */
+function swapInteractivity(store, object, newObject) {
+  const {
+    internal
+  } = store.getState();
+  for (let i = 0; i < internal.interaction.length; i++) {
+    if (internal.interaction[i] === object) internal.interaction[i] = newObject;
+  }
+  for (let i = 0; i < internal.initialHits.length; i++) {
+    if (internal.initialHits[i] === object) internal.initialHits[i] = newObject;
+  }
+  internal.hovered.forEach((value, key) => {
+    if (value.eventObject === object || value.object === object) {
+      internal.hovered.delete(key);
+      const next = {
+        ...value,
+        eventObject: value.eventObject === object ? newObject : value.eventObject,
+        object: value.object === object ? newObject : value.object
+      };
+      internal.hovered.set(makeId(next), next);
+    }
+  });
+  internal.capturedMap.forEach(captures => {
+    const captureData = captures.get(object);
+    if (captureData) {
+      captures.delete(object);
+      captures.set(newObject, captureData);
+    }
+  });
+}
 function removeInteractivity(store, object) {
   const {
     internal
@@ -770,7 +814,7 @@ function createEvents(store) {
       internal
     } = store.getState();
     for (const hoveredObj of internal.hovered.values()) {
-      // When no objects were hit or the the hovered object wasn't found underneath the cursor
+      // When no objects were hit or the hovered object wasn't found underneath the cursor
       // we call onPointerOut and delete the object from the hovered-elements map
       if (!intersections.length || !intersections.find(hit => hit.object === hoveredObj.object && hit.index === hoveredObj.index && hit.instanceId === hoveredObj.instanceId)) {
         const eventObject = hoveredObj.eventObject;
@@ -1296,7 +1340,7 @@ useLoader.clear = function (loader, input) {
 
 var packageData = {
 	name: "@react-three/fiber",
-	version: "9.5.0",
+	version: "9.6.1",
 	description: "A React renderer for Threejs",
 	keywords: [
 		"react",
@@ -15262,11 +15306,11 @@ function swapInstances() {
       const target = catalogue[toPascalCase(instance.type)];
 
       // Create object
+      const prevObject = instance.object;
       instance.object = (_instance$props$objec = instance.props.object) != null ? _instance$props$objec : new target(...((_instance$props$args = instance.props.args) != null ? _instance$props$args : []));
       instance.object.__r3f = instance;
       setFiberRef(fiber, instance.object);
-
-      // Set initial props
+      swapInteractivity(findInitialRoot(instance), prevObject, instance.object);
       applyProps(instance.object, instance.props);
       if (instance.props.attach) {
         attach(parent, instance);
@@ -16101,7 +16145,7 @@ function invalidate(state, frames = 1) {
       //called from within a useFrame, it means the user wants an additional frame
       state.internal.frames = 2;
     } else {
-      //the user need a new frame, no need to increment further than 1
+      //the user needs a new frame, no need to increment further than 1
       state.internal.frames = 1;
     }
   }

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var events = require('./events-358c3764.cjs.dev.js');
+var events = require('./events-f19bcc32.cjs.dev.js');
 var React = require('react');
 var THREE = require('three');
 var useMeasure = require('react-use-measure');

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var events = require('./events-238e0986.cjs.prod.js');
+var events = require('./events-583399dd.cjs.prod.js');
 var React = require('react');
 var THREE = require('three');
 var useMeasure = require('react-use-measure');

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

@@ -1,5 +1,5 @@
-import { e as extend, u as useBridge, a as useMutableCallback, b as useIsomorphicLayoutEffect, c as createRoot, i as isRef, E as ErrorBoundary, B as Block, d as unmountComponentAtNode, f as createPointerEvents } from './events-5a94e5eb.esm.js';
-export { t as ReactThreeFiber, _ as _roots, x as act, k as addAfterEffect, j as addEffect, l as addTail, n as advance, s as applyProps, y as buildGraph, q as context, g as createEvents, o as createPortal, c as createRoot, w as dispose, f as events, e as extend, h as flushGlobalEffects, p as flushSync, v as getRootState, m as invalidate, r as reconciler, d as unmountComponentAtNode, D as useFrame, F as useGraph, z as useInstanceHandle, G as useLoader, A as useStore, C as useThree } from './events-5a94e5eb.esm.js';
+import { e as extend, u as useBridge, a as useMutableCallback, b as useIsomorphicLayoutEffect, c as createRoot, i as isRef, E as ErrorBoundary, B as Block, d as unmountComponentAtNode, f as createPointerEvents } from './events-b389eeca.esm.js';
+export { t as ReactThreeFiber, _ as _roots, x as act, k as addAfterEffect, j as addEffect, l as addTail, n as advance, s as applyProps, y as buildGraph, q as context, g as createEvents, o as createPortal, c as createRoot, w as dispose, f as events, e as extend, h as flushGlobalEffects, p as flushSync, v as getRootState, m as invalidate, r as reconciler, d as unmountComponentAtNode, D as useFrame, F as useGraph, z as useInstanceHandle, G as useLoader, A as useStore, C as useThree } from './events-b389eeca.esm.js';
 import * as React from 'react';
 import * as THREE from 'three';
 import useMeasure from 'react-use-measure';

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var events = require('../../dist/events-358c3764.cjs.dev.js');
+var events = require('../../dist/events-f19bcc32.cjs.dev.js');
 var React = require('react');
 var THREE = require('three');
 var reactNative = require('react-native');

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var events = require('../../dist/events-238e0986.cjs.prod.js');
+var events = require('../../dist/events-583399dd.cjs.prod.js');
 var React = require('react');
 var THREE = require('three');
 var reactNative = require('react-native');

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

@@ -1,5 +1,5 @@
-import { e as extend, u as useBridge, a as useMutableCallback, c as createRoot, b as useIsomorphicLayoutEffect, E as ErrorBoundary, B as Block, d as unmountComponentAtNode, f as createPointerEvents, g as createEvents } from '../../dist/events-5a94e5eb.esm.js';
-export { t as ReactThreeFiber, _ as _roots, x as act, k as addAfterEffect, j as addEffect, l as addTail, n as advance, s as applyProps, y as buildGraph, q as context, g as createEvents, o as createPortal, c as createRoot, w as dispose, e as extend, h as flushGlobalEffects, p as flushSync, v as getRootState, m as invalidate, r as reconciler, d as unmountComponentAtNode, D as useFrame, F as useGraph, z as useInstanceHandle, G as useLoader, A as useStore, C as useThree } from '../../dist/events-5a94e5eb.esm.js';
+import { e as extend, u as useBridge, a as useMutableCallback, c as createRoot, b as useIsomorphicLayoutEffect, E as ErrorBoundary, B as Block, d as unmountComponentAtNode, f as createPointerEvents, g as createEvents } from '../../dist/events-b389eeca.esm.js';
+export { t as ReactThreeFiber, _ as _roots, x as act, k as addAfterEffect, j as addEffect, l as addTail, n as advance, s as applyProps, y as buildGraph, q as context, g as createEvents, o as createPortal, c as createRoot, w as dispose, e as extend, h as flushGlobalEffects, p as flushSync, v as getRootState, m as invalidate, r as reconciler, d as unmountComponentAtNode, D as useFrame, F as useGraph, z as useInstanceHandle, G as useLoader, A as useStore, C as useThree } from '../../dist/events-b389eeca.esm.js';
 import * as React from 'react';
 import * as THREE from 'three';
 import { PanResponder, PixelRatio, StyleSheet, View, Platform, Image, NativeModules } from 'react-native';

package/package.json

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