angular-three 1.8.0 → 1.9.0

package/fesm2015/angular-three.mjs

@@ -6,7 +6,8 @@ import * as THREE from 'three';
 import { __rest, __classPrivateFieldGet } from 'tslib';
 import { DOCUMENT, NgForOf, NgIf } from '@angular/common';
 import { RxState, selectSlice } from '@rx-angular/state';
-import { RouterOutlet } from '@angular/router';
+import * as i1 from '@angular/router';
+import { ActivationEnd, RouterOutlet } from '@angular/router';
 
 const idCache = {};
 function makeId(event) {
@@ -1021,6 +1022,38 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.3", ngImpor
                 type: Input
             }] } });
 
+class NgtParent extends NgtCommonDirective {
+    constructor() {
+        super(...arguments);
+        this.injectedParent = null;
+    }
+    set parent(parent) {
+        if (!parent)
+            return;
+        this.injected = false;
+        this.injectedParent = parent;
+        this.createView();
+    }
+    get parent() {
+        if (this.validate()) {
+            this.injected = true;
+            return this.injectedParent;
+        }
+        return null;
+    }
+    validate() {
+        return !this.injected && !!this.injectedParent;
+    }
+}
+NgtParent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.3", ngImport: i0, type: NgtParent, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+NgtParent.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.1.3", type: NgtParent, isStandalone: true, selector: "[parent]", inputs: { parent: "parent" }, usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.3", ngImport: i0, type: NgtParent, decorators: [{
+            type: Directive,
+            args: [{ selector: '[parent]', standalone: true }]
+        }], propDecorators: { parent: [{
+                type: Input
+            }] } });
+
 function releaseInternalPointerCapture(capturedMap, obj, captures, pointerId) {
     const captureData = captures.get(obj);
     if (captureData) {
@@ -1442,9 +1475,9 @@ function attachThreeChild(parent, child) {
             if (cLS.isRaw) {
                 cLS.parent = parent;
                 // at this point we don't have rawValue yet, so we bail and wait until the Renderer recalls attach
-                if (child.__ngt_renderer__[10 /* NgtRendererClassId.rawValue */] === undefined)
+                if (child.__ngt_renderer__[11 /* NgtRendererClassId.rawValue */] === undefined)
                     return;
-                attach(parent, child.__ngt_renderer__[10 /* NgtRendererClassId.rawValue */], attachProp);
+                attach(parent, child.__ngt_renderer__[11 /* NgtRendererClassId.rawValue */], attachProp);
             }
             else {
                 attach(parent, child, attachProp);
@@ -1570,6 +1603,7 @@ class NgtRendererStore {
         const state = [
             type,
             null,
+            null,
             [],
             false,
             undefined,
@@ -1591,7 +1625,7 @@ class NgtRendererStore {
         // assign injectorFactory on non-three type since
         // rendererNode is an instance of DOM Node
         if (state[0 /* NgtRendererClassId.type */] !== 'three') {
-            state[13 /* NgtRendererClassId.injectorFactory */] = () => getDebugNode(rendererNode).injector;
+            state[14 /* NgtRendererClassId.injectorFactory */] = () => getDebugNode(rendererNode).injector;
         }
         if (state[0 /* NgtRendererClassId.type */] === 'comment') {
             // we attach an arrow function to the Comment node
@@ -1608,9 +1642,9 @@ class NgtRendererStore {
             return rendererNode;
         }
         if (state[0 /* NgtRendererClassId.type */] === 'compound') {
-            state[7 /* NgtRendererClassId.queueOps */] = new Set();
-            state[8 /* NgtRendererClassId.attributes */] = {};
-            state[9 /* NgtRendererClassId.properties */] = {};
+            state[8 /* NgtRendererClassId.queueOps */] = new Set();
+            state[9 /* NgtRendererClassId.attributes */] = {};
+            state[10 /* NgtRendererClassId.properties */] = {};
             return rendererNode;
         }
         return rendererNode;
@@ -1621,50 +1655,50 @@ class NgtRendererStore {
         }
     }
     addChild(node, child) {
-        if (!node.__ngt_renderer__[2 /* NgtRendererClassId.children */].includes(child)) {
-            node.__ngt_renderer__[2 /* NgtRendererClassId.children */].push(child);
+        if (!node.__ngt_renderer__[3 /* NgtRendererClassId.children */].includes(child)) {
+            node.__ngt_renderer__[3 /* NgtRendererClassId.children */].push(child);
         }
     }
     removeChild(node, child) {
-        const index = node.__ngt_renderer__[2 /* NgtRendererClassId.children */].findIndex((c) => child === c);
+        const index = node.__ngt_renderer__[3 /* NgtRendererClassId.children */].findIndex((c) => child === c);
         if (index >= 0) {
-            node.__ngt_renderer__[2 /* NgtRendererClassId.children */].splice(index, 1);
+            node.__ngt_renderer__[3 /* NgtRendererClassId.children */].splice(index, 1);
         }
     }
     setCompound(compound, instance) {
         const rS = compound.__ngt_renderer__;
-        rS[6 /* NgtRendererClassId.compounded */] = instance;
-        const attributes = Object.keys(rS[8 /* NgtRendererClassId.attributes */]);
-        const properties = Object.keys(rS[9 /* NgtRendererClassId.properties */]);
+        rS[7 /* NgtRendererClassId.compounded */] = instance;
+        const attributes = Object.keys(rS[9 /* NgtRendererClassId.attributes */]);
+        const properties = Object.keys(rS[10 /* NgtRendererClassId.properties */]);
         if (attributes.length) {
             for (const key of attributes) {
-                this.applyAttribute(instance, key, rS[8 /* NgtRendererClassId.attributes */][key]);
+                this.applyAttribute(instance, key, rS[9 /* NgtRendererClassId.attributes */][key]);
             }
         }
         if (properties.length) {
             for (const key of properties) {
-                this.applyProperty(instance, key, rS[9 /* NgtRendererClassId.properties */][key]);
+                this.applyProperty(instance, key, rS[10 /* NgtRendererClassId.properties */][key]);
             }
         }
         this.executeOperation(compound);
     }
     queueOperation(node, op) {
-        node.__ngt_renderer__[7 /* NgtRendererClassId.queueOps */].add(op);
+        node.__ngt_renderer__[8 /* NgtRendererClassId.queueOps */].add(op);
     }
     executeOperation(node, type = 'op') {
         var _a;
         const rS = node.__ngt_renderer__;
-        if ((_a = rS[7 /* NgtRendererClassId.queueOps */]) === null || _a === void 0 ? void 0 : _a.size) {
-            rS[7 /* NgtRendererClassId.queueOps */].forEach((op) => {
+        if ((_a = rS[8 /* NgtRendererClassId.queueOps */]) === null || _a === void 0 ? void 0 : _a.size) {
+            rS[8 /* NgtRendererClassId.queueOps */].forEach((op) => {
                 if (op[0 /* NgtQueueOpClassId.type */] === type) {
                     op[1 /* NgtQueueOpClassId.op */]();
-                    rS[7 /* NgtRendererClassId.queueOps */].delete(op);
+                    rS[8 /* NgtRendererClassId.queueOps */].delete(op);
                 }
             });
         }
     }
     processPortalContainer(portal) {
-        const injectorFactory = portal.__ngt_renderer__[13 /* NgtRendererClassId.injectorFactory */];
+        const injectorFactory = portal.__ngt_renderer__[14 /* NgtRendererClassId.injectorFactory */];
         const injector = injectorFactory === null || injectorFactory === void 0 ? void 0 : injectorFactory();
         if (!injector)
             return;
@@ -1674,11 +1708,11 @@ class NgtRendererStore {
         const portalContainer = portalStore.get('scene');
         if (!portalContainer)
             return;
-        portal.__ngt_renderer__[12 /* NgtRendererClassId.portalContainer */] = this.createNode('three', portalContainer);
+        portal.__ngt_renderer__[13 /* NgtRendererClassId.portalContainer */] = this.createNode('three', portalContainer);
     }
     applyAttribute(node, name, value) {
         const rS = node.__ngt_renderer__;
-        if (rS[3 /* NgtRendererClassId.destroyed */])
+        if (rS[4 /* NgtRendererClassId.destroyed */])
             return;
         if (name === SPECIAL_PROPERTIES.RENDER_PRIORITY) {
             // priority needs to be set as an attribute string so that they can be set as early as possible
@@ -1692,7 +1726,7 @@ class NgtRendererStore {
         }
         if (name === SPECIAL_PROPERTIES.COMPOUND) {
             // we set the compound property on instance node now so we know that this instance is being compounded
-            rS[4 /* NgtRendererClassId.compound */] = [value === '' || value === 'first', {}];
+            rS[5 /* NgtRendererClassId.compound */] = [value === '' || value === 'first', {}];
             return;
         }
         if (name === SPECIAL_PROPERTIES.ATTACH) {
@@ -1711,25 +1745,25 @@ class NgtRendererStore {
             else if (!isNaN(Number(maybeCoerced))) {
                 maybeCoerced = Number(maybeCoerced);
             }
-            rS[10 /* NgtRendererClassId.rawValue */] = maybeCoerced;
+            rS[11 /* NgtRendererClassId.rawValue */] = maybeCoerced;
             return;
         }
         applyProps(node, { [name]: value });
     }
     applyProperty(node, name, value) {
         const rS = node.__ngt_renderer__;
-        if (rS[3 /* NgtRendererClassId.destroyed */])
+        if (rS[4 /* NgtRendererClassId.destroyed */])
             return;
         // [ref]
         if (name === SPECIAL_PROPERTIES.REF && is.ref(value)) {
-            rS[11 /* NgtRendererClassId.ref */] = value;
+            rS[12 /* NgtRendererClassId.ref */] = value;
             value.nativeElement = node;
             return;
         }
         const parent = getLocalState(node).parent || rS[1 /* NgtRendererClassId.parent */];
         // [rawValue]
         if (getLocalState(node).isRaw && name === SPECIAL_PROPERTIES.VALUE) {
-            rS[10 /* NgtRendererClassId.rawValue */] = value;
+            rS[11 /* NgtRendererClassId.rawValue */] = value;
             if (parent)
                 attachThreeChild(parent, node);
             return;
@@ -1741,7 +1775,7 @@ class NgtRendererStore {
                 attachThreeChild(parent, node);
             return;
         }
-        const compound = rS[4 /* NgtRendererClassId.compound */];
+        const compound = rS[5 /* NgtRendererClassId.compound */];
         if ((compound === null || compound === void 0 ? void 0 : compound[1 /* NgtCompoundClassId.props */]) &&
             name in compound[1 /* NgtCompoundClassId.props */] &&
             !compound[0 /* NgtCompoundClassId.applyFirst */]) {
@@ -1770,52 +1804,53 @@ class NgtRendererStore {
     getClosestParentWithInstance(node) {
         let parent = node.__ngt_renderer__[1 /* NgtRendererClassId.parent */];
         while (parent && parent.__ngt_renderer__[0 /* NgtRendererClassId.type */] !== 'three') {
-            parent = parent.__ngt_renderer__[12 /* NgtRendererClassId.portalContainer */]
-                ? parent.__ngt_renderer__[12 /* NgtRendererClassId.portalContainer */]
+            parent = parent.__ngt_renderer__[13 /* NgtRendererClassId.portalContainer */]
+                ? parent.__ngt_renderer__[13 /* NgtRendererClassId.portalContainer */]
                 : parent.__ngt_renderer__[1 /* NgtRendererClassId.parent */];
         }
         return parent;
     }
     getClosestParentWithCompound(node) {
-        if (node.__ngt_renderer__[5 /* NgtRendererClassId.compoundParent */]) {
-            return node.__ngt_renderer__[5 /* NgtRendererClassId.compoundParent */];
+        if (node.__ngt_renderer__[6 /* NgtRendererClassId.compoundParent */]) {
+            return node.__ngt_renderer__[6 /* NgtRendererClassId.compoundParent */];
         }
         let parent = node.__ngt_renderer__[1 /* NgtRendererClassId.parent */];
         if (parent &&
             parent.__ngt_renderer__[0 /* NgtRendererClassId.type */] === 'compound' &&
-            !parent.__ngt_renderer__[6 /* NgtRendererClassId.compounded */]) {
+            !parent.__ngt_renderer__[7 /* NgtRendererClassId.compounded */]) {
             return parent;
         }
         while (parent &&
             (parent.__ngt_renderer__[0 /* NgtRendererClassId.type */] === 'three' ||
-                !parent.__ngt_renderer__[5 /* NgtRendererClassId.compoundParent */] ||
+                !parent.__ngt_renderer__[6 /* NgtRendererClassId.compoundParent */] ||
                 parent.__ngt_renderer__[0 /* NgtRendererClassId.type */] !== 'compound')) {
             parent = parent.__ngt_renderer__[1 /* NgtRendererClassId.parent */];
         }
         if (!parent)
             return;
         if (parent.__ngt_renderer__[0 /* NgtRendererClassId.type */] === 'three' &&
-            parent.__ngt_renderer__[5 /* NgtRendererClassId.compoundParent */]) {
-            return parent.__ngt_renderer__[5 /* NgtRendererClassId.compoundParent */];
+            parent.__ngt_renderer__[6 /* NgtRendererClassId.compoundParent */]) {
+            return parent.__ngt_renderer__[6 /* NgtRendererClassId.compoundParent */];
         }
-        if (!parent.__ngt_renderer__[6 /* NgtRendererClassId.compounded */]) {
+        if (!parent.__ngt_renderer__[7 /* NgtRendererClassId.compounded */]) {
             return parent;
         }
         return null;
     }
     getCreationState() {
-        var _a;
+        var _a, _b;
         const injectedArgs = ((_a = this.firstNonInjectedDirective(NgtArgs)) === null || _a === void 0 ? void 0 : _a.args) || [];
+        const injectedParent = ((_b = this.firstNonInjectedDirective(NgtParent)) === null || _b === void 0 ? void 0 : _b.parent) || null;
         const store = this.tryGetPortalStore();
-        return { injectedArgs, store };
+        return { injectedArgs, injectedParent, store };
     }
     destroy(node, parent) {
         const rS = node.__ngt_renderer__;
-        if (rS[3 /* NgtRendererClassId.destroyed */])
+        if (rS[4 /* NgtRendererClassId.destroyed */])
             return;
         if (rS[0 /* NgtRendererClassId.type */] === 'three') {
-            rS[4 /* NgtRendererClassId.compound */] = undefined;
-            rS[5 /* NgtRendererClassId.compoundParent */] = undefined;
+            rS[5 /* NgtRendererClassId.compound */] = undefined;
+            rS[6 /* NgtRendererClassId.compoundParent */] = undefined;
             const localState = getLocalState(node);
             if (localState.objects) {
                 localState.objects.value.forEach((obj) => this.destroy(obj, parent));
@@ -1842,7 +1877,7 @@ class NgtRendererStore {
             }
         }
         if (rS[0 /* NgtRendererClassId.type */] === 'comment') {
-            rS[13 /* NgtRendererClassId.injectorFactory */] = null;
+            rS[14 /* NgtRendererClassId.injectorFactory */] = null;
             delete node['__ngt_renderer_add_comment__'];
             const index = this.comments.findIndex((comment) => comment === node);
             if (index > -1) {
@@ -1850,35 +1885,35 @@ class NgtRendererStore {
             }
         }
         if (rS[0 /* NgtRendererClassId.type */] === 'portal') {
-            rS[13 /* NgtRendererClassId.injectorFactory */] = null;
+            rS[14 /* NgtRendererClassId.injectorFactory */] = null;
             const index = this.portals.findIndex((portal) => portal === node);
             if (index > -1) {
                 this.portals.splice(index, 1);
             }
         }
         if (rS[0 /* NgtRendererClassId.type */] === 'compound') {
-            rS[6 /* NgtRendererClassId.compounded */] = undefined;
-            rS[8 /* NgtRendererClassId.attributes */] = null;
-            rS[9 /* NgtRendererClassId.properties */] = null;
+            rS[7 /* NgtRendererClassId.compounded */] = undefined;
+            rS[9 /* NgtRendererClassId.attributes */] = null;
+            rS[10 /* NgtRendererClassId.properties */] = null;
             this.executeOperation(node, 'cleanUp');
-            rS[7 /* NgtRendererClassId.queueOps */].clear();
-            rS[7 /* NgtRendererClassId.queueOps */] = null;
+            rS[8 /* NgtRendererClassId.queueOps */].clear();
+            rS[8 /* NgtRendererClassId.queueOps */] = null;
         }
-        if (rS[11 /* NgtRendererClassId.ref */]) {
+        if (rS[12 /* NgtRendererClassId.ref */]) {
             // nullify ref
-            rS[11 /* NgtRendererClassId.ref */].nativeElement = null;
-            rS[11 /* NgtRendererClassId.ref */] = undefined;
+            rS[12 /* NgtRendererClassId.ref */].nativeElement = null;
+            rS[12 /* NgtRendererClassId.ref */] = undefined;
         }
         // nullify parent
         rS[1 /* NgtRendererClassId.parent */] = null;
-        for (const renderChild of rS[2 /* NgtRendererClassId.children */] || []) {
+        for (const renderChild of rS[3 /* NgtRendererClassId.children */] || []) {
             if (renderChild.__ngt_renderer__[0 /* NgtRendererClassId.type */] === 'three' && parent) {
                 removeThreeChild(parent, renderChild, true);
             }
             this.destroy(renderChild, parent);
         }
-        rS[2 /* NgtRendererClassId.children */] = [];
-        rS[3 /* NgtRendererClassId.destroyed */] = true;
+        rS[3 /* NgtRendererClassId.children */] = [];
+        rS[4 /* NgtRendererClassId.destroyed */] = true;
         if (parent) {
             this.removeChild(parent, node);
         }
@@ -1888,11 +1923,11 @@ class NgtRendererStore {
         let i = this.comments.length - 1;
         while (i >= 0) {
             const comment = this.comments[i];
-            if (comment.__ngt_renderer__[3 /* NgtRendererClassId.destroyed */]) {
+            if (comment.__ngt_renderer__[4 /* NgtRendererClassId.destroyed */]) {
                 i--;
                 continue;
             }
-            const injector = comment.__ngt_renderer__[13 /* NgtRendererClassId.injectorFactory */]();
+            const injector = comment.__ngt_renderer__[14 /* NgtRendererClassId.injectorFactory */]();
             if (!injector) {
                 i--;
                 continue;
@@ -1913,11 +1948,11 @@ class NgtRendererStore {
         while (i >= 0) {
             // loop through the portal state backwards to find the closest NgtStore
             const portal = this.portals[i];
-            if (portal.__ngt_renderer__[3 /* NgtRendererClassId.destroyed */]) {
+            if (portal.__ngt_renderer__[4 /* NgtRendererClassId.destroyed */]) {
                 i--;
                 continue;
             }
-            const injector = portal.__ngt_renderer__[13 /* NgtRendererClassId.injectorFactory */]();
+            const injector = portal.__ngt_renderer__[14 /* NgtRendererClassId.injectorFactory */]();
             if (!injector) {
                 i--;
                 continue;
@@ -2002,7 +2037,7 @@ class NgtRenderer {
         if (this.root) {
             this.root = false;
             const node = this.store.createNode('three', this.store.rootScene);
-            node.__ngt_renderer__[13 /* NgtRendererClassId.injectorFactory */] = () => getDebugNode(element).injector;
+            node.__ngt_renderer__[14 /* NgtRendererClassId.injectorFactory */] = () => getDebugNode(element).injector;
             return node;
         }
         // handle compound
@@ -2017,7 +2052,13 @@ class NgtRenderer {
         if (name === SPECIAL_DOM_TAG.NGT_VALUE) {
             return this.store.createNode('three', Object.assign({ __ngt_renderer__: { rawValue: undefined } }, { __ngt__: { isRaw: true } }));
         }
-        const { injectedArgs, store } = this.store.getCreationState();
+        const { injectedArgs, injectedParent, store } = this.store.getCreationState();
+        let parent = injectedParent;
+        if (typeof injectedParent === 'string') {
+            parent = store
+                .get('scene')
+                .getObjectByName(injectedParent);
+        }
         // handle primitive
         if (name === SPECIAL_DOM_TAG.NGT_PRIMITIVE) {
             if (!injectedArgs[0])
@@ -2030,7 +2071,11 @@ class NgtRenderer {
             }
             if (!localState.store)
                 localState.store = store;
-            return this.store.createNode('three', object);
+            const node = this.store.createNode('three', object);
+            if (parent) {
+                node.__ngt_renderer__[2 /* NgtRendererClassId.injectedParent */] = parent;
+            }
+            return node;
         }
         const threeTag = name.startsWith('ngt') ? name.slice(4) : name;
         const threeName = kebabToPascal(threeTag);
@@ -2046,6 +2091,9 @@ class NgtRenderer {
             else if (is.material(instance)) {
                 localState.attach = ['material'];
             }
+            if (parent) {
+                node.__ngt_renderer__[2 /* NgtRendererClassId.injectedParent */] = parent;
+            }
             return node;
         }
         return this.store.createNode('dom', element);
@@ -2063,21 +2111,32 @@ class NgtRenderer {
             this.store.setParent(newChild, parent);
             return;
         }
+        if (cRS[2 /* NgtRendererClassId.injectedParent */]) {
+            if (is.ref(cRS[2 /* NgtRendererClassId.injectedParent */])) {
+                cRS[2 /* NgtRendererClassId.injectedParent */].$.pipe(take(1)).subscribe((val) => {
+                    this.appendChild(val, newChild);
+                });
+            }
+            else {
+                this.appendChild(cRS[2 /* NgtRendererClassId.injectedParent */], newChild);
+            }
+            return;
+        }
         this.store.setParent(newChild, parent);
         this.store.addChild(parent, newChild);
         // if new child is a portal
         if (cRS[0 /* NgtRendererClassId.type */] === 'portal') {
             this.store.processPortalContainer(newChild);
-            if (cRS[12 /* NgtRendererClassId.portalContainer */]) {
-                this.appendChild(parent, cRS[12 /* NgtRendererClassId.portalContainer */]);
+            if (cRS[13 /* NgtRendererClassId.portalContainer */]) {
+                this.appendChild(parent, cRS[13 /* NgtRendererClassId.portalContainer */]);
             }
             return;
         }
         // if parent is a portal
         if (pRS[0 /* NgtRendererClassId.type */] === 'portal') {
             this.store.processPortalContainer(parent);
-            if (pRS[12 /* NgtRendererClassId.portalContainer */]) {
-                this.appendChild(pRS[12 /* NgtRendererClassId.portalContainer */], newChild);
+            if (pRS[13 /* NgtRendererClassId.portalContainer */]) {
+                this.appendChild(pRS[13 /* NgtRendererClassId.portalContainer */], newChild);
             }
             return;
         }
@@ -2089,7 +2148,7 @@ class NgtRenderer {
             // attach THREE child
             attachThreeChild(parent, newChild);
             // here, we handle the special case of if the parent has a compoundParent, which means this child is part of a compound parent template
-            if (!cRS[4 /* NgtRendererClassId.compound */])
+            if (!cRS[5 /* NgtRendererClassId.compound */])
                 return;
             const closestGrandparentWithCompound = this.store.getClosestParentWithCompound(parent);
             if (!closestGrandparentWithCompound)
@@ -2099,26 +2158,26 @@ class NgtRenderer {
         }
         // if only the parent is the THREE instance
         if (pRS[0 /* NgtRendererClassId.type */] === 'three') {
-            for (const renderChild of cRS[2 /* NgtRendererClassId.children */]) {
+            for (const renderChild of cRS[3 /* NgtRendererClassId.children */]) {
                 this.appendChild(parent, renderChild);
             }
         }
         // if parent is a compound
         if (pRS[0 /* NgtRendererClassId.type */] === 'compound') {
             // if compound doesn't have a THREE instance set yet
-            if (!pRS[6 /* NgtRendererClassId.compounded */] && cRS[0 /* NgtRendererClassId.type */] === 'three') {
+            if (!pRS[7 /* NgtRendererClassId.compounded */] && cRS[0 /* NgtRendererClassId.type */] === 'three') {
                 // if child is indeed an ngtCompound
-                if (cRS[4 /* NgtRendererClassId.compound */])
+                if (cRS[5 /* NgtRendererClassId.compound */])
                     this.store.setCompound(parent, newChild);
                 // if not, we track the parent (that is supposedly the compound component) on this three instance
-                else if (!cRS[5 /* NgtRendererClassId.compoundParent */])
-                    cRS[5 /* NgtRendererClassId.compoundParent */] = parent;
+                else if (!cRS[6 /* NgtRendererClassId.compoundParent */])
+                    cRS[6 /* NgtRendererClassId.compoundParent */] = parent;
             }
             // reset the compound if it's changed
-            if (pRS[6 /* NgtRendererClassId.compounded */] &&
+            if (pRS[7 /* NgtRendererClassId.compounded */] &&
                 cRS[0 /* NgtRendererClassId.type */] === 'three' &&
-                cRS[4 /* NgtRendererClassId.compound */] &&
-                pRS[6 /* NgtRendererClassId.compounded */] !== newChild) {
+                cRS[5 /* NgtRendererClassId.compound */] &&
+                pRS[7 /* NgtRendererClassId.compounded */] !== newChild) {
                 this.store.setCompound(parent, newChild);
             }
         }
@@ -2127,9 +2186,9 @@ class NgtRenderer {
         (cRS[0 /* NgtRendererClassId.type */] === 'three' && !getLocalState(newChild).parent) ||
             // or both parent and child are DOM elements
             ((pRS[0 /* NgtRendererClassId.type */] === 'dom' ||
-                (pRS[0 /* NgtRendererClassId.type */] === 'compound' && !pRS[6 /* NgtRendererClassId.compounded */])) &&
+                (pRS[0 /* NgtRendererClassId.type */] === 'compound' && !pRS[7 /* NgtRendererClassId.compounded */])) &&
                 (cRS[0 /* NgtRendererClassId.type */] === 'dom' ||
-                    (cRS[0 /* NgtRendererClassId.type */] === 'compound' && !cRS[6 /* NgtRendererClassId.compounded */])));
+                    (cRS[0 /* NgtRendererClassId.type */] === 'compound' && !cRS[7 /* NgtRendererClassId.compounded */])));
         if (shouldFindGrandparentInstance) {
             // we'll try to get the grandparent instance here so that we can run appendChild with both instances
             const closestGrandparentInstance = this.store.getClosestParentWithInstance(parent);
@@ -2142,7 +2201,7 @@ class NgtRenderer {
     // refChild: NgtRendererNode
     // isMove?: boolean | undefined
     ) {
-        if (!parent.__ngt_renderer__ || parent === newChild)
+        if (parent == null || !parent.__ngt_renderer__ || parent === newChild)
             return;
         this.appendChild(parent, newChild);
     }
@@ -2177,12 +2236,12 @@ class NgtRenderer {
         const rS = el.__ngt_renderer__;
         if (rS[0 /* NgtRendererClassId.type */] === 'compound') {
             // we don't have the compound instance yet
-            rS[8 /* NgtRendererClassId.attributes */][name] = value;
-            if (!rS[6 /* NgtRendererClassId.compounded */]) {
+            rS[9 /* NgtRendererClassId.attributes */][name] = value;
+            if (!rS[7 /* NgtRendererClassId.compounded */]) {
                 this.store.queueOperation(el, ['op', () => this.setAttribute(el, name, value, namespace)]);
                 return;
             }
-            this.setAttribute(rS[6 /* NgtRendererClassId.compounded */], name, value, namespace);
+            this.setAttribute(rS[7 /* NgtRendererClassId.compounded */], name, value, namespace);
             return;
         }
         if (rS[0 /* NgtRendererClassId.type */] === 'three')
@@ -2192,17 +2251,17 @@ class NgtRenderer {
         const rS = el.__ngt_renderer__;
         if (rS[0 /* NgtRendererClassId.type */] === 'compound') {
             // we don't have the compound instance yet
-            rS[9 /* NgtRendererClassId.properties */][name] = value;
-            if (!rS[6 /* NgtRendererClassId.compounded */]) {
+            rS[10 /* NgtRendererClassId.properties */][name] = value;
+            if (!rS[7 /* NgtRendererClassId.compounded */]) {
                 this.store.queueOperation(el, ['op', () => this.setProperty(el, name, value)]);
                 return;
             }
-            if (rS[6 /* NgtRendererClassId.compounded */].__ngt_renderer__[4 /* NgtRendererClassId.compound */]) {
-                Object.assign(rS[6 /* NgtRendererClassId.compounded */].__ngt_renderer__[4 /* NgtRendererClassId.compound */], {
-                    props: Object.assign(Object.assign({}, rS[6 /* NgtRendererClassId.compounded */].__ngt_renderer__[4 /* NgtRendererClassId.compound */]), { [name]: value }),
+            if (rS[7 /* NgtRendererClassId.compounded */].__ngt_renderer__[5 /* NgtRendererClassId.compound */]) {
+                Object.assign(rS[7 /* NgtRendererClassId.compounded */].__ngt_renderer__[5 /* NgtRendererClassId.compound */], {
+                    props: Object.assign(Object.assign({}, rS[7 /* NgtRendererClassId.compounded */].__ngt_renderer__[5 /* NgtRendererClassId.compound */]), { [name]: value }),
                 });
             }
-            this.setProperty(rS[6 /* NgtRendererClassId.compounded */], name, value);
+            this.setProperty(rS[7 /* NgtRendererClassId.compounded */], name, value);
             return;
         }
         if (rS[0 /* NgtRendererClassId.type */] === 'three')
@@ -2211,7 +2270,7 @@ class NgtRenderer {
     listen(target, eventName, callback) {
         var _a;
         const rS = target.__ngt_renderer__;
-        const targetCdr = (_a = rS === null || rS === void 0 ? void 0 : rS[13 /* NgtRendererClassId.injectorFactory */]) === null || _a === void 0 ? void 0 : _a.call(rS).get(ChangeDetectorRef, null);
+        const targetCdr = (_a = rS === null || rS === void 0 ? void 0 : rS[14 /* NgtRendererClassId.injectorFactory */]) === null || _a === void 0 ? void 0 : _a.call(rS).get(ChangeDetectorRef, null);
         // if target is DOM node, then we pass that to delegate Renderer
         const callbackWithCdr = (event) => {
             const value = callback(event);
@@ -2236,12 +2295,12 @@ class NgtRenderer {
             return this.delegate.listen(eventTarget, event, callbackWithCdr);
         }
         if (rS[0 /* NgtRendererClassId.type */] === 'three' ||
-            (rS[0 /* NgtRendererClassId.type */] === 'compound' && rS[6 /* NgtRendererClassId.compounded */])) {
-            const instance = rS[6 /* NgtRendererClassId.compounded */] || target;
+            (rS[0 /* NgtRendererClassId.type */] === 'compound' && rS[7 /* NgtRendererClassId.compounded */])) {
+            const instance = rS[7 /* NgtRendererClassId.compounded */] || target;
             const priority = getLocalState(target).priority;
             return processThreeEvent(instance, priority || 0, eventName, callback, this.store.rootCdr, targetCdr);
         }
-        if (rS[0 /* NgtRendererClassId.type */] === 'compound' && !rS[6 /* NgtRendererClassId.compounded */]) {
+        if (rS[0 /* NgtRendererClassId.type */] === 'compound' && !rS[7 /* NgtRendererClassId.compounded */]) {
             this.store.queueOperation(target, [
                 'op',
                 () => this.store.queueOperation(target, ['cleanUp', this.listen(target, eventName, callback)]),
@@ -2982,9 +3041,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.3", ngImpor
             }] } });
 
 class NgtRoutedScene {
+    constructor(router) {
+        const { destroy$, cdr } = injectNgtDestroy();
+        router.events
+            .pipe(filter((event) => event instanceof ActivationEnd), takeUntil(destroy$))
+            .subscribe(() => {
+            cdr.detectChanges();
+        });
+    }
 }
 NgtRoutedScene.isRoutedScene = true;
-NgtRoutedScene.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.3", ngImport: i0, type: NgtRoutedScene, deps: [], target: i0.ɵɵFactoryTarget.Component });
+NgtRoutedScene.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.3", ngImport: i0, type: NgtRoutedScene, deps: [{ token: i1.Router }], target: i0.ɵɵFactoryTarget.Component });
 NgtRoutedScene.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.3", type: NgtRoutedScene, isStandalone: true, selector: "ngt-routed-scene", ngImport: i0, template: `<router-outlet />`, isInline: true, dependencies: [{ kind: "directive", type: RouterOutlet, selector: "router-outlet", inputs: ["name"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.3", ngImport: i0, type: NgtRoutedScene, decorators: [{
             type: Component,
@@ -2994,11 +3061,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.3", ngImpor
                     template: `<router-outlet />`,
                     imports: [RouterOutlet],
                 }]
-        }] });
+        }], ctorParameters: function () { return [{ type: i1.Router }]; } });
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { NGT_CATALOGUE, NgtArgs, NgtCanvas, NgtPortal, NgtPortalBeforeRender, NgtPortalContent, NgtPush, NgtRepeat, NgtRoutedScene, NgtRxStore, NgtStore, addAfterEffect, addEffect, addTail, applyProps, checkNeedsUpdate, checkUpdate, createAttachFunction, createLoop, createRunInContext, extend, flushGlobalEffects, getLocalState, injectBeforeRender, injectNgtDestroy, injectNgtLoader, injectNgtRef, invalidateInstance, is, makeDefaultCamera, makeDefaultRenderer, makeDpr, makeId, makeObjectGraph, prepare, rootStateMap, safeDetectChanges, startWithUndefined, tapEffect, updateCamera };
+export { NGT_CATALOGUE, NgtArgs, NgtCanvas, NgtParent, NgtPortal, NgtPortalBeforeRender, NgtPortalContent, NgtPush, NgtRepeat, NgtRoutedScene, NgtRxStore, NgtStore, addAfterEffect, addEffect, addTail, applyProps, checkNeedsUpdate, checkUpdate, createAttachFunction, createLoop, createRunInContext, extend, flushGlobalEffects, getLocalState, injectBeforeRender, injectNgtDestroy, injectNgtLoader, injectNgtRef, invalidateInstance, is, makeDefaultCamera, makeDefaultRenderer, makeDpr, makeId, makeObjectGraph, prepare, rootStateMap, safeDetectChanges, startWithUndefined, tapEffect, updateCamera };
 //# sourceMappingURL=angular-three.mjs.map