angular-three 4.0.0-next.11 → 4.0.0-next.13

package/fesm2022/angular-three.mjs

@@ -19,7 +19,7 @@ const NGT_GET_NODE_ATTRIBUTE_FLAG = '__ngt_get_node_attribute__';
 const NGT_DOM_PARENT_FLAG = '__ngt_dom_parent__';
 const NGT_DELEGATE_RENDERER_DESTROY_NODE_PATCHED_FLAG = '__ngt_delegate_renderer_destroy_node_patched__';
 const NGT_HTML_FLAG = '__ngt_html__';
-const THREE_NATIVE_EVENTS = ['added', 'removed', 'childadded', 'childremoved', 'disposed'];
+const THREE_NATIVE_EVENTS = ['added', 'removed', 'childadded', 'childremoved', 'change', 'disposed'];
 
 const is = {
     obj: (a) => a === Object(a) && !Array.isArray(a) && typeof a !== 'function',
@@ -1733,9 +1733,9 @@ function createEvents(store) {
 
 // This function prepares a set of changes to be applied to the instance
 function diffProps(instance, props) {
-    const propsEntries = Object.entries(props);
     const changes = [];
-    for (const [propKey, propValue] of propsEntries) {
+    for (const propKey in props) {
+        const propValue = props[propKey];
         let key = propKey;
         if (is.colorSpaceExist(instance)) {
             if (propKey === 'encoding') {
@@ -1771,6 +1771,19 @@ function getMemoizedPrototype(root) {
     }
     return ctor;
 }
+function resolve(instance, key) {
+    let targetProp = instance[key];
+    if (!key.includes('.'))
+        return { root: instance, targetKey: key, targetProp };
+    // Resolve pierced target
+    const chain = key.split('.');
+    targetProp = chain.reduce((acc, part) => acc[part], instance);
+    const targetKey = chain.pop();
+    // Switch root if atomic
+    if (!targetProp?.set)
+        instance = chain.reduce((acc, part) => acc[part], instance);
+    return { root: instance, targetKey, targetProp };
+}
 // This function applies a set of changes to the instance
 function applyProps(instance, props) {
     // if props is empty
@@ -1800,8 +1813,11 @@ function applyProps(instance, props) {
         // 		value = value === sRGBEncoding ? SRGBColorSpace : LinearSRGBColorSpace;
         // 	}
         // }
-        const currentInstance = instance;
-        const targetProp = currentInstance[key];
+        const { root, targetKey, targetProp } = resolve(instance, key);
+        // we have switched due to pierced props
+        if (root !== instance) {
+            return applyProps(root, { [targetKey]: value });
+        }
         // Copy if properties match signatures
         if (targetProp?.copy &&
             value?.constructor &&
@@ -1809,15 +1825,15 @@ function applyProps(instance, props) {
             // If both are geometries, we should assign the value directly instead of copying
             if (is.three(targetProp, 'isBufferGeometry') &&
                 is.three(value, 'isBufferGeometry')) {
-                Object.assign(currentInstance, { [key]: value });
+                Object.assign(root, { [targetKey]: value });
             }
             else {
                 // fetch the default state of the target
-                const ctor = getMemoizedPrototype(currentInstance);
+                const ctor = getMemoizedPrototype(root);
                 // The target key was originally null or undefined, which indicates that the object which
                 // is now present was externally set by the user, we should therefore assign the value directly
-                if (ctor !== undefined && ctor[key] == null)
-                    Object.assign(currentInstance, { [key]: value });
+                if (ctor !== undefined && ctor[targetKey] == null)
+                    Object.assign(root, { [targetKey]: value });
                 // Otherwise copy is correct
                 else
                     targetProp.copy(value);
@@ -1846,22 +1862,22 @@ function applyProps(instance, props) {
         }
         // Else, just overwrite the value
         else {
-            Object.assign(currentInstance, { [key]: value });
+            Object.assign(root, { [targetKey]: value });
             // Auto-convert sRGB texture parameters for built-in materials
             // https://github.com/pmndrs/react-three-fiber/issues/344
             // https://github.com/mrdoob/three.js/pull/25857
             if (rootState &&
                 !rootState.linear &&
-                colorMaps.includes(key) &&
-                currentInstance[key]?.isTexture &&
+                colorMaps.includes(targetKey) &&
+                root[targetKey]?.isTexture &&
                 // sRGB textures must be RGBA8 since r137 https://github.com/mrdoob/three.js/pull/23129
-                currentInstance[key].format === THREE.RGBAFormat &&
-                currentInstance[key].type === THREE.UnsignedByteType) {
+                root[targetKey].format === THREE.RGBAFormat &&
+                root[targetKey].type === THREE.UnsignedByteType) {
                 // NOTE: this cannot be set from the renderer (e.g. sRGB source textures rendered to P3)
-                currentInstance[key].colorSpace = THREE.SRGBColorSpace;
+                root[targetKey].colorSpace = THREE.SRGBColorSpace;
             }
         }
-        checkUpdate(currentInstance[key]);
+        checkUpdate(root[targetKey]);
         checkUpdate(targetProp);
         invalidateInstance(instance);
     }
@@ -2522,24 +2538,23 @@ class NgtRenderer2 {
                     if (instanceState)
                         instanceState.attach = paths;
                 }
+                return;
+            }
+            // coercion for primitive values
+            let maybeCoerced = value;
+            if (maybeCoerced === '' || maybeCoerced === 'true' || maybeCoerced === 'false') {
+                maybeCoerced = maybeCoerced === 'true' || maybeCoerced === '';
             }
             else {
-                // coercion for primitive values
-                let maybeCoerced = value;
-                if (maybeCoerced === '' || maybeCoerced === 'true' || maybeCoerced === 'false') {
-                    maybeCoerced = maybeCoerced === 'true' || maybeCoerced === '';
-                }
-                else {
-                    const maybeNumber = Number(maybeCoerced);
-                    if (!isNaN(maybeNumber))
-                        maybeCoerced = maybeNumber;
-                }
-                if (name === 'rawValue') {
-                    rS[2 /* NgtRendererClassId.rawValue */] = maybeCoerced;
-                }
-                else {
-                    applyProps(el, { [name]: maybeCoerced });
-                }
+                const maybeNumber = Number(maybeCoerced);
+                if (!isNaN(maybeNumber))
+                    maybeCoerced = maybeNumber;
+            }
+            if (name === 'rawValue') {
+                rS[2 /* NgtRendererClassId.rawValue */] = maybeCoerced;
+            }
+            else {
+                applyProps(el, { [name]: maybeCoerced });
             }
             return;
         }