angular-three 1.6.10 → 1.7.0

package/fesm2020/angular-three.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { ElementRef, Injectable, inject, InjectionToken, ViewContainerRef, TemplateRef, Directive, Input, EventEmitter, getDebugNode, RendererFactory2, ChangeDetectorRef, makeEnvironmentProviders, EnvironmentInjector, createEnvironmentInjector, Component, HostBinding, Output, ViewChild, Injector, Pipe, SkipSelf, ContentChild } from '@angular/core';
+import { inject, ChangeDetectorRef, ElementRef, Injectable, InjectionToken, ViewContainerRef, TemplateRef, Directive, Input, EventEmitter, getDebugNode, RendererFactory2, makeEnvironmentProviders, EnvironmentInjector, createEnvironmentInjector, Component, HostBinding, Output, ViewChild, Injector, Pipe, SkipSelf, ContentChild } from '@angular/core';
 import { provideNgxResizeOptions, NgxResize } from 'ngx-resize';
 import { isObservable, of, map, from, tap, retry, catchError, share, ReplaySubject, switchMap, forkJoin, take, BehaviorSubject, startWith, combineLatest, distinctUntilChanged, filter, takeUntil, merge } from 'rxjs';
 import * as THREE from 'three';
@@ -59,6 +59,7 @@ function makeObjectGraph(object) {
 const cached = new Map();
 function injectLoader(loaderConstructorFactory, input, extensions, onProgress) {
     const urls$ = isObservable(input) ? input : of(input);
+    const cdr = inject(ChangeDetectorRef);
     return urls$.pipe(map((inputs) => {
         const loaderConstructor = loaderConstructorFactory(inputs);
         const loader = new loaderConstructor();
@@ -91,6 +92,8 @@ function injectLoader(loaderConstructorFactory, input, extensions, onProgress) {
                 result[key] = results[keys.indexOf(key)];
                 return result;
             }, {});
+        }), tap(() => {
+            requestAnimationFrame(() => cdr.detectChanges());
         }));
     }));
 }
@@ -1576,10 +1579,15 @@ class NgtRendererStore {
         if (!rendererNode['ownerDocument']) {
             rendererNode['ownerDocument'] = this.root.document;
         }
-        if (state[0 /* NgtRendererClassId.type */] === 'comment') {
+        // 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;
+        }
+        if (state[0 /* NgtRendererClassId.type */] === 'comment') {
             // we attach an arrow function to the Comment node
             // In our directives, we can call this function to then start tracking the RendererNode
+            // this is done to limit the amount of Nodes we need to process for getCreationState
             rendererNode['__ngt_renderer_add_comment__'] = (portalNode) => {
                 if (portalNode && portalNode.__ngt_renderer__[0 /* NgtRendererClassId.type */] === 'portal') {
                     this.portals.push(portalNode);
@@ -1590,10 +1598,6 @@ class NgtRendererStore {
             };
             return rendererNode;
         }
-        if (state[0 /* NgtRendererClassId.type */] === 'portal') {
-            state[13 /* NgtRendererClassId.injectorFactory */] = () => getDebugNode(rendererNode).injector;
-            return rendererNode;
-        }
         if (state[0 /* NgtRendererClassId.type */] === 'compound') {
             state[7 /* NgtRendererClassId.queueOps */] = new Set();
             state[8 /* NgtRendererClassId.attributes */] = {};
@@ -1619,17 +1623,18 @@ class NgtRendererStore {
         }
     }
     setCompound(compound, instance) {
-        compound.__ngt_renderer__[6 /* NgtRendererClassId.compounded */] = instance;
-        const attributes = Object.keys(compound.__ngt_renderer__[8 /* NgtRendererClassId.attributes */]);
-        const properties = Object.keys(compound.__ngt_renderer__[9 /* NgtRendererClassId.properties */]);
+        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 */]);
         if (attributes.length) {
             for (const key of attributes) {
-                this.applyAttribute(instance, key, compound.__ngt_renderer__[8 /* NgtRendererClassId.attributes */][key]);
+                this.applyAttribute(instance, key, rS[8 /* NgtRendererClassId.attributes */][key]);
             }
         }
         if (properties.length) {
             for (const key of properties) {
-                this.applyProperty(instance, key, compound.__ngt_renderer__[9 /* NgtRendererClassId.properties */][key]);
+                this.applyProperty(instance, key, rS[9 /* NgtRendererClassId.properties */][key]);
             }
         }
         this.executeOperation(compound);
@@ -1638,11 +1643,12 @@ class NgtRendererStore {
         node.__ngt_renderer__[7 /* NgtRendererClassId.queueOps */].add(op);
     }
     executeOperation(node, type = 'op') {
-        if (node.__ngt_renderer__[7 /* NgtRendererClassId.queueOps */]?.size) {
-            node.__ngt_renderer__[7 /* NgtRendererClassId.queueOps */].forEach((op) => {
+        const rS = node.__ngt_renderer__;
+        if (rS[7 /* NgtRendererClassId.queueOps */]?.size) {
+            rS[7 /* NgtRendererClassId.queueOps */].forEach((op) => {
                 if (op[0 /* NgtQueueOpClassId.type */] === type) {
                     op[1 /* NgtQueueOpClassId.op */]();
-                    node.__ngt_renderer__[7 /* NgtRendererClassId.queueOps */].delete(op);
+                    rS[7 /* NgtRendererClassId.queueOps */].delete(op);
                 }
             });
         }
@@ -1661,7 +1667,8 @@ class NgtRendererStore {
         portal.__ngt_renderer__[12 /* NgtRendererClassId.portalContainer */] = this.createNode('three', portalContainer);
     }
     applyAttribute(node, name, value) {
-        if (node.__ngt_renderer__[3 /* NgtRendererClassId.destroyed */])
+        const rS = node.__ngt_renderer__;
+        if (rS[3 /* 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
@@ -1675,7 +1682,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
-            node.__ngt_renderer__[4 /* NgtRendererClassId.compound */] = [value === '' || value === 'first', {}];
+            rS[4 /* NgtRendererClassId.compound */] = [value === '' || value === 'first', {}];
             return;
         }
         if (name === SPECIAL_PROPERTIES.ATTACH) {
@@ -1694,24 +1701,25 @@ class NgtRendererStore {
             else if (!isNaN(Number(maybeCoerced))) {
                 maybeCoerced = Number(maybeCoerced);
             }
-            node.__ngt_renderer__[10 /* NgtRendererClassId.rawValue */] = maybeCoerced;
+            rS[10 /* NgtRendererClassId.rawValue */] = maybeCoerced;
             return;
         }
         applyProps(node, { [name]: value });
     }
     applyProperty(node, name, value) {
-        if (node.__ngt_renderer__[3 /* NgtRendererClassId.destroyed */])
+        const rS = node.__ngt_renderer__;
+        if (rS[3 /* NgtRendererClassId.destroyed */])
             return;
         // [ref]
         if (name === SPECIAL_PROPERTIES.REF && is.ref(value)) {
-            node.__ngt_renderer__[11 /* NgtRendererClassId.ref */] = value;
+            rS[11 /* NgtRendererClassId.ref */] = value;
             value.nativeElement = node;
             return;
         }
-        const parent = getLocalState(node).parent || node.__ngt_renderer__[1 /* NgtRendererClassId.parent */];
+        const parent = getLocalState(node).parent || rS[1 /* NgtRendererClassId.parent */];
         // [rawValue]
         if (getLocalState(node).isRaw && name === SPECIAL_PROPERTIES.VALUE) {
-            node.__ngt_renderer__[10 /* NgtRendererClassId.rawValue */] = value;
+            rS[10 /* NgtRendererClassId.rawValue */] = value;
             if (parent)
                 attachThreeChild(parent, node);
             return;
@@ -1723,7 +1731,7 @@ class NgtRendererStore {
                 attachThreeChild(parent, node);
             return;
         }
-        const compound = node.__ngt_renderer__[4 /* NgtRendererClassId.compound */];
+        const compound = rS[4 /* NgtRendererClassId.compound */];
         if (compound?.[1 /* NgtCompoundClassId.props */] &&
             name in compound[1 /* NgtCompoundClassId.props */] &&
             !compound[0 /* NgtCompoundClassId.applyFirst */]) {
@@ -1735,9 +1743,9 @@ class NgtRendererStore {
         return this.root.compoundPrefixes.some((prefix) => name.startsWith(prefix));
     }
     isDOM(node) {
-        const rendererNode = node['__ngt_renderer__'];
-        return (!rendererNode ||
-            (rendererNode[0 /* NgtRendererClassId.type */] !== 'compound' &&
+        const rS = node['__ngt_renderer__'];
+        return (!rS ||
+            (rS[0 /* NgtRendererClassId.type */] !== 'compound' &&
                 (node instanceof Element || node instanceof Document || node instanceof Window)));
     }
     get rootScene() {
@@ -1791,12 +1799,12 @@ class NgtRendererStore {
         return { injectedArgs, store };
     }
     destroy(node, parent) {
-        const state = node.__ngt_renderer__;
-        if (state[3 /* NgtRendererClassId.destroyed */])
+        const rS = node.__ngt_renderer__;
+        if (rS[3 /* NgtRendererClassId.destroyed */])
             return;
-        if (state[0 /* NgtRendererClassId.type */] === 'three') {
-            state[4 /* NgtRendererClassId.compound */] = undefined;
-            state[5 /* NgtRendererClassId.compoundParent */] = undefined;
+        if (rS[0 /* NgtRendererClassId.type */] === 'three') {
+            rS[4 /* NgtRendererClassId.compound */] = undefined;
+            rS[5 /* NgtRendererClassId.compoundParent */] = undefined;
             const localState = getLocalState(node);
             if (localState.objects) {
                 localState.objects.value.forEach((obj) => this.destroy(obj, parent));
@@ -1822,44 +1830,44 @@ class NgtRendererStore {
                 delete node['__ngt__'];
             }
         }
-        if (state[0 /* NgtRendererClassId.type */] === 'comment') {
-            state[13 /* NgtRendererClassId.injectorFactory */] = null;
+        if (rS[0 /* NgtRendererClassId.type */] === 'comment') {
+            rS[13 /* NgtRendererClassId.injectorFactory */] = null;
             delete node['__ngt_renderer_add_comment__'];
             const index = this.comments.findIndex((comment) => comment === node);
             if (index > -1) {
                 this.comments.splice(index, 1);
             }
         }
-        if (state[0 /* NgtRendererClassId.type */] === 'portal') {
-            state[13 /* NgtRendererClassId.injectorFactory */] = null;
+        if (rS[0 /* NgtRendererClassId.type */] === 'portal') {
+            rS[13 /* NgtRendererClassId.injectorFactory */] = null;
             const index = this.portals.findIndex((portal) => portal === node);
             if (index > -1) {
                 this.portals.splice(index, 1);
             }
         }
-        if (state[0 /* NgtRendererClassId.type */] === 'compound') {
-            state[6 /* NgtRendererClassId.compounded */] = undefined;
-            state[8 /* NgtRendererClassId.attributes */] = null;
-            state[9 /* NgtRendererClassId.properties */] = null;
+        if (rS[0 /* NgtRendererClassId.type */] === 'compound') {
+            rS[6 /* NgtRendererClassId.compounded */] = undefined;
+            rS[8 /* NgtRendererClassId.attributes */] = null;
+            rS[9 /* NgtRendererClassId.properties */] = null;
             this.executeOperation(node, 'cleanUp');
-            state[7 /* NgtRendererClassId.queueOps */].clear();
-            state[7 /* NgtRendererClassId.queueOps */] = null;
+            rS[7 /* NgtRendererClassId.queueOps */].clear();
+            rS[7 /* NgtRendererClassId.queueOps */] = null;
         }
-        if (state[11 /* NgtRendererClassId.ref */]) {
+        if (rS[11 /* NgtRendererClassId.ref */]) {
             // nullify ref
-            state[11 /* NgtRendererClassId.ref */].nativeElement = null;
-            state[11 /* NgtRendererClassId.ref */] = undefined;
+            rS[11 /* NgtRendererClassId.ref */].nativeElement = null;
+            rS[11 /* NgtRendererClassId.ref */] = undefined;
         }
         // nullify parent
-        state[1 /* NgtRendererClassId.parent */] = null;
-        for (const renderChild of state[2 /* NgtRendererClassId.children */] || []) {
+        rS[1 /* NgtRendererClassId.parent */] = null;
+        for (const renderChild of rS[2 /* NgtRendererClassId.children */] || []) {
             if (renderChild.__ngt_renderer__[0 /* NgtRendererClassId.type */] === 'three' && parent) {
                 removeThreeChild(parent, renderChild, true);
             }
             this.destroy(renderChild, parent);
         }
-        state[2 /* NgtRendererClassId.children */] = [];
-        state[3 /* NgtRendererClassId.destroyed */] = true;
+        rS[2 /* NgtRendererClassId.children */] = [];
+        rS[3 /* NgtRendererClassId.destroyed */] = true;
         if (parent) {
             this.removeChild(parent, node);
         }
@@ -1941,7 +1949,7 @@ class NgtRendererFactory {
                 compoundPrefixes: this.compoundPrefixes,
                 document: this.document,
             });
-            renderer = new NgtRenderer(delegateRenderer, store, this.catalogue, true);
+            renderer = new NgtRenderer(delegateRenderer, store, this.catalogue);
             this.rendererMap.set(type.id, renderer);
         }
         if (!renderer) {
@@ -1952,7 +1960,7 @@ class NgtRendererFactory {
                 compoundPrefixes: this.compoundPrefixes,
                 document: this.document,
             });
-            renderer = new NgtRenderer(delegateRenderer, store, this.catalogue);
+            renderer = new NgtRenderer(delegateRenderer, store, this.catalogue, false);
             this.rendererMap.set(type.id, renderer);
         }
         return renderer;
@@ -1963,8 +1971,11 @@ NgtRendererFactory.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", v
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.3", ngImport: i0, type: NgtRendererFactory, decorators: [{
             type: Injectable
         }] });
+/**
+ * Anything abbreviated with rS/RS stands for RendererState
+ */
 class NgtRenderer {
-    constructor(delegate, store, catalogue, root = false) {
+    constructor(delegate, store, catalogue, root = true) {
         this.delegate = delegate;
         this.store = store;
         this.catalogue = catalogue;
@@ -1993,9 +2004,7 @@ class NgtRenderer {
         }
         // handle compound
         if (this.store.isCompound(name)) {
-            const compound = this.store.createNode('compound', element);
-            compound.__ngt_renderer__[13 /* NgtRendererClassId.injectorFactory */] = () => getDebugNode(element).injector;
-            return compound;
+            return this.store.createNode('compound', element);
         }
         // handle portal
         if (name === SPECIAL_DOM_TAG.NGT_PORTAL) {
@@ -2036,50 +2045,48 @@ class NgtRenderer {
             }
             return node;
         }
-        const domNode = this.store.createNode('dom', element);
-        domNode.__ngt_renderer__[13 /* NgtRendererClassId.injectorFactory */] = () => getDebugNode(element).injector;
-        return domNode;
+        return this.store.createNode('dom', element);
     }
     createComment(value) {
-        const comment = this.delegate.createComment(value);
-        return this.store.createNode('comment', comment);
+        return this.store.createNode('comment', this.delegate.createComment(value));
     }
     appendChild(parent, newChild) {
         // TODO: just ignore text node for now
         if (newChild instanceof Text)
             return;
-        if (newChild.__ngt_renderer__[0 /* NgtRendererClassId.type */] === 'comment') {
+        const cRS = newChild.__ngt_renderer__;
+        const pRS = parent.__ngt_renderer__;
+        if (cRS[0 /* NgtRendererClassId.type */] === 'comment') {
             this.store.setParent(newChild, parent);
             return;
         }
         this.store.setParent(newChild, parent);
         this.store.addChild(parent, newChild);
         // if new child is a portal
-        if (newChild.__ngt_renderer__[0 /* NgtRendererClassId.type */] === 'portal') {
+        if (cRS[0 /* NgtRendererClassId.type */] === 'portal') {
             this.store.processPortalContainer(newChild);
-            if (newChild.__ngt_renderer__[12 /* NgtRendererClassId.portalContainer */]) {
-                this.appendChild(parent, newChild.__ngt_renderer__[12 /* NgtRendererClassId.portalContainer */]);
+            if (cRS[12 /* NgtRendererClassId.portalContainer */]) {
+                this.appendChild(parent, cRS[12 /* NgtRendererClassId.portalContainer */]);
             }
             return;
         }
         // if parent is a portal
-        if (parent.__ngt_renderer__[0 /* NgtRendererClassId.type */] === 'portal') {
+        if (pRS[0 /* NgtRendererClassId.type */] === 'portal') {
             this.store.processPortalContainer(parent);
-            if (parent.__ngt_renderer__[12 /* NgtRendererClassId.portalContainer */]) {
-                this.appendChild(parent.__ngt_renderer__[12 /* NgtRendererClassId.portalContainer */], newChild);
+            if (pRS[12 /* NgtRendererClassId.portalContainer */]) {
+                this.appendChild(pRS[12 /* NgtRendererClassId.portalContainer */], newChild);
             }
             return;
         }
         // if both are three instances, straightforward case
-        if (parent.__ngt_renderer__[0 /* NgtRendererClassId.type */] === 'three' &&
-            newChild.__ngt_renderer__[0 /* NgtRendererClassId.type */] === 'three') {
+        if (pRS[0 /* NgtRendererClassId.type */] === 'three' && cRS[0 /* NgtRendererClassId.type */] === 'three') {
             // if child already attached to a parent, skip
             if (getLocalState(newChild).parent)
                 return;
             // 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 (!newChild.__ngt_renderer__[4 /* NgtRendererClassId.compound */])
+            if (!cRS[4 /* NgtRendererClassId.compound */])
                 return;
             const closestGrandparentWithCompound = this.store.getClosestParentWithCompound(parent);
             if (!closestGrandparentWithCompound)
@@ -2088,53 +2095,43 @@ class NgtRenderer {
             return;
         }
         // if only the parent is the THREE instance
-        if (parent.__ngt_renderer__[0 /* NgtRendererClassId.type */] === 'three') {
-            if (newChild.__ngt_renderer__[2 /* NgtRendererClassId.children */].length) {
-                for (const renderChild of newChild.__ngt_renderer__[2 /* NgtRendererClassId.children */]) {
-                    this.appendChild(parent, renderChild);
-                }
+        if (pRS[0 /* NgtRendererClassId.type */] === 'three') {
+            for (const renderChild of cRS[2 /* NgtRendererClassId.children */]) {
+                this.appendChild(parent, renderChild);
             }
         }
         // if parent is a compound
-        if (parent.__ngt_renderer__[0 /* NgtRendererClassId.type */] === 'compound') {
+        if (pRS[0 /* NgtRendererClassId.type */] === 'compound') {
             // if compound doesn't have a THREE instance set yet
-            if (!parent.__ngt_renderer__[6 /* NgtRendererClassId.compounded */] &&
-                newChild.__ngt_renderer__[0 /* NgtRendererClassId.type */] === 'three') {
+            if (!pRS[6 /* NgtRendererClassId.compounded */] && cRS[0 /* NgtRendererClassId.type */] === 'three') {
                 // if child is indeed an ngtCompound
-                if (newChild.__ngt_renderer__[4 /* NgtRendererClassId.compound */]) {
+                if (cRS[4 /* NgtRendererClassId.compound */])
                     this.store.setCompound(parent, newChild);
-                }
-                else {
-                    // if not, we track the parent (that is supposedly the compound component) on this three instance
-                    if (!newChild.__ngt_renderer__[5 /* NgtRendererClassId.compoundParent */]) {
-                        newChild.__ngt_renderer__[5 /* NgtRendererClassId.compoundParent */] = parent;
-                    }
-                }
+                // 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;
             }
             // reset the compound if it's changed
-            if (parent.__ngt_renderer__[6 /* NgtRendererClassId.compounded */] &&
-                newChild.__ngt_renderer__[0 /* NgtRendererClassId.type */] === 'three' &&
-                newChild.__ngt_renderer__[4 /* NgtRendererClassId.compound */] &&
-                parent.__ngt_renderer__[6 /* NgtRendererClassId.compounded */] !== newChild) {
+            if (pRS[6 /* NgtRendererClassId.compounded */] &&
+                cRS[0 /* NgtRendererClassId.type */] === 'three' &&
+                cRS[4 /* NgtRendererClassId.compound */] &&
+                pRS[6 /* NgtRendererClassId.compounded */] !== newChild) {
                 this.store.setCompound(parent, newChild);
             }
         }
         const shouldFindGrandparentInstance = 
         // if child is three but haven't been attached to a parent yet
-        (newChild.__ngt_renderer__[0 /* NgtRendererClassId.type */] === 'three' && !getLocalState(newChild).parent) ||
+        (cRS[0 /* NgtRendererClassId.type */] === 'three' && !getLocalState(newChild).parent) ||
             // or both parent and child are DOM elements
-            ((parent.__ngt_renderer__[0 /* NgtRendererClassId.type */] === 'dom' ||
-                (parent.__ngt_renderer__[0 /* NgtRendererClassId.type */] === 'compound' &&
-                    !parent.__ngt_renderer__[6 /* NgtRendererClassId.compounded */])) &&
-                (newChild.__ngt_renderer__[0 /* NgtRendererClassId.type */] === 'dom' ||
-                    (newChild.__ngt_renderer__[0 /* NgtRendererClassId.type */] === 'compound' &&
-                        !newChild.__ngt_renderer__[6 /* NgtRendererClassId.compounded */])));
+            ((pRS[0 /* NgtRendererClassId.type */] === 'dom' ||
+                (pRS[0 /* NgtRendererClassId.type */] === 'compound' && !pRS[6 /* NgtRendererClassId.compounded */])) &&
+                (cRS[0 /* NgtRendererClassId.type */] === 'dom' ||
+                    (cRS[0 /* NgtRendererClassId.type */] === 'compound' && !cRS[6 /* 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);
-            if (closestGrandparentInstance) {
+            if (closestGrandparentInstance)
                 this.appendChild(closestGrandparentInstance, newChild);
-            }
         }
     }
     insertBefore(parent, newChild
@@ -2147,72 +2144,73 @@ class NgtRenderer {
         this.appendChild(parent, newChild);
     }
     removeChild(parent, oldChild, isHostElement) {
-        if (parent.__ngt_renderer__[0 /* NgtRendererClassId.type */] === 'three' &&
-            oldChild.__ngt_renderer__[0 /* NgtRendererClassId.type */] === 'three') {
+        const pRS = parent.__ngt_renderer__;
+        const cRS = oldChild.__ngt_renderer__;
+        if (pRS[0 /* NgtRendererClassId.type */] === 'three' && cRS[0 /* NgtRendererClassId.type */] === 'three') {
             removeThreeChild(parent, oldChild, true);
             this.store.destroy(oldChild, parent);
             return;
         }
-        if (parent.__ngt_renderer__[0 /* NgtRendererClassId.type */] === 'compound' &&
-            parent.__ngt_renderer__[1 /* NgtRendererClassId.parent */]) {
-            this.removeChild(parent.__ngt_renderer__[1 /* NgtRendererClassId.parent */], oldChild, isHostElement);
+        if (pRS[0 /* NgtRendererClassId.type */] === 'compound' && pRS[1 /* NgtRendererClassId.parent */]) {
+            this.removeChild(pRS[1 /* NgtRendererClassId.parent */], oldChild, isHostElement);
             return;
         }
-        if (parent.__ngt_renderer__[0 /* NgtRendererClassId.type */] === 'three') {
+        if (pRS[0 /* NgtRendererClassId.type */] === 'three') {
             this.store.destroy(oldChild, parent);
             return;
         }
         const closestGrandparentInstance = this.store.getClosestParentWithInstance(parent);
-        if (closestGrandparentInstance) {
+        if (closestGrandparentInstance)
             this.removeChild(closestGrandparentInstance, oldChild, isHostElement);
-        }
         this.store.destroy(oldChild, closestGrandparentInstance);
     }
     parentNode(node) {
-        if (node.__ngt_renderer__?.[1 /* NgtRendererClassId.parent */])
-            return node.__ngt_renderer__[1 /* NgtRendererClassId.parent */];
+        const rS = node.__ngt_renderer__;
+        if (rS?.[1 /* NgtRendererClassId.parent */])
+            return rS[1 /* NgtRendererClassId.parent */];
         return this.delegate.parentNode(node);
     }
     setAttribute(el, name, value, namespace) {
-        if (el.__ngt_renderer__[0 /* NgtRendererClassId.type */] === 'compound') {
+        const rS = el.__ngt_renderer__;
+        if (rS[0 /* NgtRendererClassId.type */] === 'compound') {
             // we don't have the compound instance yet
-            el.__ngt_renderer__[8 /* NgtRendererClassId.attributes */][name] = value;
-            if (!el.__ngt_renderer__[6 /* NgtRendererClassId.compounded */]) {
+            rS[8 /* NgtRendererClassId.attributes */][name] = value;
+            if (!rS[6 /* NgtRendererClassId.compounded */]) {
                 this.store.queueOperation(el, ['op', () => this.setAttribute(el, name, value, namespace)]);
                 return;
             }
-            this.setAttribute(el.__ngt_renderer__[6 /* NgtRendererClassId.compounded */], name, value, namespace);
+            this.setAttribute(rS[6 /* NgtRendererClassId.compounded */], name, value, namespace);
             return;
         }
-        if (el.__ngt_renderer__[0 /* NgtRendererClassId.type */] === 'three') {
+        if (rS[0 /* NgtRendererClassId.type */] === 'three')
             this.store.applyAttribute(el, name, value);
-        }
     }
     setProperty(el, name, value) {
-        if (el.__ngt_renderer__[0 /* NgtRendererClassId.type */] === 'compound') {
+        const rS = el.__ngt_renderer__;
+        if (rS[0 /* NgtRendererClassId.type */] === 'compound') {
             // we don't have the compound instance yet
-            el.__ngt_renderer__[9 /* NgtRendererClassId.properties */][name] = value;
-            if (!el.__ngt_renderer__[6 /* NgtRendererClassId.compounded */]) {
+            rS[9 /* NgtRendererClassId.properties */][name] = value;
+            if (!rS[6 /* NgtRendererClassId.compounded */]) {
                 this.store.queueOperation(el, ['op', () => this.setProperty(el, name, value)]);
                 return;
             }
-            if (el.__ngt_renderer__[6 /* NgtRendererClassId.compounded */].__ngt_renderer__[4 /* NgtRendererClassId.compound */]) {
-                Object.assign(el.__ngt_renderer__[6 /* NgtRendererClassId.compounded */].__ngt_renderer__[4 /* NgtRendererClassId.compound */], {
+            if (rS[6 /* NgtRendererClassId.compounded */].__ngt_renderer__[4 /* NgtRendererClassId.compound */]) {
+                Object.assign(rS[6 /* NgtRendererClassId.compounded */].__ngt_renderer__[4 /* NgtRendererClassId.compound */], {
                     props: {
-                        ...el.__ngt_renderer__[6 /* NgtRendererClassId.compounded */].__ngt_renderer__[4 /* NgtRendererClassId.compound */],
+                        ...rS[6 /* NgtRendererClassId.compounded */].__ngt_renderer__[4 /* NgtRendererClassId.compound */],
                         [name]: value,
                     },
                 });
             }
-            this.setProperty(el.__ngt_renderer__[6 /* NgtRendererClassId.compounded */], name, value);
+            this.setProperty(rS[6 /* NgtRendererClassId.compounded */], name, value);
             return;
         }
-        if (el.__ngt_renderer__[0 /* NgtRendererClassId.type */] === 'three') {
+        if (rS[0 /* NgtRendererClassId.type */] === 'three')
             this.store.applyProperty(el, name, value);
-        }
     }
     listen(target, eventName, callback) {
-        const targetCdr = target.__ngt_renderer__?.[13 /* NgtRendererClassId.injectorFactory */]?.().get(ChangeDetectorRef, null);
+        const rS = target.__ngt_renderer__;
+        const targetCdr = rS?.[13 /* NgtRendererClassId.injectorFactory */]?.().get(ChangeDetectorRef, null);
         // if target is DOM node, then we pass that to delegate Renderer
         const callbackWithCdr = (event) => {
             const value = callback(event);
@@ -2236,15 +2234,13 @@ class NgtRenderer {
                 : target['ownerDocument'];
             return this.delegate.listen(eventTarget, event, callbackWithCdr);
         }
-        if (target.__ngt_renderer__[0 /* NgtRendererClassId.type */] === 'three' ||
-            (target.__ngt_renderer__[0 /* NgtRendererClassId.type */] === 'compound' &&
-                target.__ngt_renderer__[6 /* NgtRendererClassId.compounded */])) {
-            const instance = target.__ngt_renderer__[6 /* NgtRendererClassId.compounded */] || target;
+        if (rS[0 /* NgtRendererClassId.type */] === 'three' ||
+            (rS[0 /* NgtRendererClassId.type */] === 'compound' && rS[6 /* NgtRendererClassId.compounded */])) {
+            const instance = rS[6 /* NgtRendererClassId.compounded */] || target;
             const priority = getLocalState(target).priority;
             return processThreeEvent(instance, priority || 0, eventName, callback, this.store.rootCdr, targetCdr);
         }
-        if (target.__ngt_renderer__[0 /* NgtRendererClassId.type */] === 'compound' &&
-            !target.__ngt_renderer__[6 /* NgtRendererClassId.compounded */]) {
+        if (rS[0 /* NgtRendererClassId.type */] === 'compound' && !rS[6 /* NgtRendererClassId.compounded */]) {
             this.store.queueOperation(target, [
                 'op',
                 () => this.store.queueOperation(target, ['cleanUp', this.listen(target, eventName, callback)]),
@@ -2347,6 +2343,7 @@ class NgtCanvas extends NgtRxStore {
         this.host = inject(ElementRef);
         this.store = inject(NgtStore);
         this.hostClass = true;
+        this.sceneGraphInputs = {};
         this.compoundPrefixes = [];
         this.created = new EventEmitter();
         this.pointerMissed = new EventEmitter();
@@ -2411,6 +2408,11 @@ class NgtCanvas extends NgtRxStore {
     set performance(performance) {
         this.set({ performance });
     }
+    ngOnChanges(changes) {
+        if (changes['sceneGraphInputs'] && this.glRef) {
+            this.setSceneGraphInputs();
+        }
+    }
     ngOnInit() {
         if (!this.get('eventSource')) {
             // set default event source to the host element
@@ -2477,6 +2479,7 @@ class NgtCanvas extends NgtRxStore {
                 environmentInjector: this.glEnvInjector,
             });
             this.glRef.changeDetectorRef.detach();
+            this.setSceneGraphInputs();
             // here, we override the detectChanges to also call detectChanges on the ComponentRef
             this.overrideDetectChanges();
             this.cdr.detectChanges();
@@ -2497,9 +2500,15 @@ class NgtCanvas extends NgtRxStore {
             this.glRef?.changeDetectorRef.detectChanges();
         };
     }
+    setSceneGraphInputs() {
+        for (const key of Object.keys(this.sceneGraphInputs)) {
+            this.glRef?.setInput(key, this.sceneGraphInputs[key]);
+        }
+        this.cdr.detectChanges();
+    }
 }
 NgtCanvas.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.3", ngImport: i0, type: NgtCanvas, deps: null, target: i0.ɵɵFactoryTarget.Component });
-NgtCanvas.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.3", type: NgtCanvas, isStandalone: true, selector: "ngt-canvas", inputs: { sceneGraph: "sceneGraph", compoundPrefixes: "compoundPrefixes", linear: "linear", legacy: "legacy", flat: "flat", orthographic: "orthographic", frameloop: "frameloop", dpr: "dpr", raycaster: "raycaster", shadows: "shadows", camera: "camera", gl: "gl", eventSource: "eventSource", eventPrefix: "eventPrefix", lookAt: "lookAt", performance: "performance" }, outputs: { created: "created", pointerMissed: "pointerMissed" }, host: { properties: { "class.ngt-canvas": "this.hostClass", "style.pointerEvents": "this.pointerEvents" } }, providers: [NgtStore, provideNgxResizeOptions({ emitInZone: false })], viewQueries: [{ propertyName: "glCanvas", first: true, predicate: ["glCanvas"], descendants: true, static: true }, { propertyName: "glAnchor", first: true, predicate: ["glCanvas"], descendants: true, read: ViewContainerRef, static: true }], usesInheritance: true, ngImport: i0, template: `
+NgtCanvas.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.3", type: NgtCanvas, isStandalone: true, selector: "ngt-canvas", inputs: { sceneGraph: "sceneGraph", sceneGraphInputs: "sceneGraphInputs", compoundPrefixes: "compoundPrefixes", linear: "linear", legacy: "legacy", flat: "flat", orthographic: "orthographic", frameloop: "frameloop", dpr: "dpr", raycaster: "raycaster", shadows: "shadows", camera: "camera", gl: "gl", eventSource: "eventSource", eventPrefix: "eventPrefix", lookAt: "lookAt", performance: "performance" }, outputs: { created: "created", pointerMissed: "pointerMissed" }, host: { properties: { "class.ngt-canvas": "this.hostClass", "style.pointerEvents": "this.pointerEvents" } }, providers: [NgtStore, provideNgxResizeOptions({ emitInZone: false })], viewQueries: [{ propertyName: "glCanvas", first: true, predicate: ["glCanvas"], descendants: true, static: true }, { propertyName: "glAnchor", first: true, predicate: ["glCanvas"], descendants: true, read: ViewContainerRef, static: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: `
         <div (ngxResize)="onResize($event)" style="height: 100%; width: 100%;">
             <canvas #glCanvas style="display: block;"></canvas>
         </div>
@@ -2519,6 +2528,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.3", ngImpor
                 args: ['style.pointerEvents']
             }], sceneGraph: [{
                 type: Input
+            }], sceneGraphInputs: [{
+                type: Input
             }], compoundPrefixes: [{
                 type: Input
             }], linear: [{