angular-three 3.2.4 → 3.4.0

package/fesm2022/angular-three.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { untracked, computed, signal, ElementRef, input, inject, ViewContainerRef, TemplateRef, effect, DestroyRef, Directive, InjectionToken, DebugNode, RendererFactory2, Injectable, makeEnvironmentProviders, EnvironmentInjector, InjectFlags, runInInjectionContext, Component, NgZone, Injector, booleanAttribute, output, viewChild, afterNextRender, createEnvironmentInjector, ChangeDetectionStrategy, Pipe, CUSTOM_ELEMENTS_SCHEMA, contentChild, model, Renderer2 } from '@angular/core';
+import { untracked, computed, signal, ElementRef, input, inject, ViewContainerRef, TemplateRef, effect, DestroyRef, Directive, InjectionToken, DebugNode, RendererFactory2, Injectable, makeEnvironmentProviders, EnvironmentInjector, InjectFlags, runInInjectionContext, createEnvironmentInjector, Component, NgZone, Injector, booleanAttribute, output, viewChild, afterNextRender, ChangeDetectionStrategy, Pipe, CUSTOM_ELEMENTS_SCHEMA, contentChild, model, Renderer2 } from '@angular/core';
 import { outputFromObservable } from '@angular/core/rxjs-interop';
 import { provideResizeOptions, NgxResize } from 'ngxtension/resize';
 import { MathUtils, WebGLRenderer, OrthographicCamera, PerspectiveCamera, Vector3, Vector2, Clock, Layers, Color, ColorManagement, Texture, RGBAFormat, UnsignedByteType, EventDispatcher, Raycaster, Scene, PCFSoftShadowMap, BasicShadowMap, PCFShadowMap, VSMShadowMap, NoToneMapping, ACESFilmicToneMapping, Vector4 } from 'three';
@@ -751,6 +751,7 @@ const ROUTED_SCENE = '__ngt_renderer_is_routed_scene__';
 const HTML = '__ngt_renderer_is_html';
 const NON_ROOT = '__ngt_renderer_is_non_root__';
 const SPECIAL_INTERNAL_ADD_COMMENT = '__ngt_renderer_add_comment__';
+const SPECIAL_INTERNAL_SET_PARENT_COMMENT = '__ngt_renderer_set_parent_comment__';
 const DOM_PARENT = '__ngt_dom_parent__';
 const SPECIAL_DOM_TAG = {
     NGT_PORTAL: 'ngt-portal',
@@ -1132,6 +1133,74 @@ function injectStore(options) {
     return inject(NGT_STORE, options);
 }
 
+class NgtParent {
+    constructor() {
+        this.parent = input.required();
+        this.vcr = inject(ViewContainerRef);
+        this.template = inject(TemplateRef);
+        this.store = injectStore();
+        this.scene = this.store.select('scene');
+        this.injected = false;
+        this.injectedParent = null;
+        this._parent = computed(() => {
+            const parent = this.parent();
+            const rawParent = typeof parent === 'function' ? parent() : parent;
+            if (!rawParent)
+                return null;
+            const scene = this.scene();
+            if (typeof rawParent === 'string') {
+                return scene.getObjectByName(rawParent);
+            }
+            if ('nativeElement' in rawParent) {
+                return rawParent.nativeElement;
+            }
+            return rawParent;
+        });
+        const commentNode = this.vcr.element.nativeElement;
+        if (commentNode[SPECIAL_INTERNAL_ADD_COMMENT]) {
+            commentNode[SPECIAL_INTERNAL_ADD_COMMENT]('parent');
+            delete commentNode[SPECIAL_INTERNAL_ADD_COMMENT];
+        }
+        effect(() => {
+            const parent = this._parent();
+            if (!parent)
+                return;
+            this.injected = false;
+            this.injectedParent = parent;
+            this.createView();
+        });
+        inject(DestroyRef).onDestroy(() => {
+            this.view?.destroy();
+        });
+    }
+    get value() {
+        if (this.validate()) {
+            this.injected = true;
+            return this.injectedParent;
+        }
+        return null;
+    }
+    validate() {
+        return !this.injected && !!this.injectedParent;
+    }
+    createView() {
+        if (this.view && !this.view.destroyed)
+            this.view.destroy();
+        const comment = this.vcr.element.nativeElement;
+        if (comment[SPECIAL_INTERNAL_SET_PARENT_COMMENT]) {
+            comment[SPECIAL_INTERNAL_SET_PARENT_COMMENT](this.injectedParent);
+        }
+        this.view = this.vcr.createEmbeddedView(this.template);
+        this.view.detectChanges();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: NgtParent, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.0.5", type: NgtParent, isStandalone: true, selector: "ng-template[parent]", inputs: { parent: { classPropertyName: "parent", publicName: "parent", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: NgtParent, decorators: [{
+            type: Directive,
+            args: [{ selector: 'ng-template[parent]' }]
+        }], ctorParameters: () => [] });
+
 // This function prepares a set of changes to be applied to the instance
 function diffProps(instance, props) {
     const propsEntries = Object.entries(props);
@@ -1338,7 +1407,7 @@ function detach(parent, child, attachProp) {
         if (Array.isArray(attachProp))
             attach(parent, childLocalState.previousAttach, attachProp, childLocalState.isRaw);
         else
-            childLocalState.previousAttach();
+            childLocalState.previousAttach?.();
     }
 }
 function assignEmpty(obj, base, shouldAssignStoreForApplyProps = false) {
@@ -1623,6 +1692,7 @@ class NgtRenderer {
         this.catalogue = catalogue;
         this.isRoot = isRoot;
         this.argsCommentNodes = [];
+        this.parentCommentNodes = [];
         this.createText = this.delegate.createText.bind(this.delegate);
         this.destroy = this.delegate.destroy.bind(this.delegate);
         this.destroyNode = null;
@@ -1658,17 +1728,25 @@ class NgtRenderer {
         if (name === SPECIAL_DOM_TAG.NGT_VALUE) {
             return createNode('three', prepare({ __ngt_renderer__: { rawValue: undefined } }, { store: this.rootStore, isRaw: true }), this.document);
         }
-        const [injectedArgs] = [this.getNgtArgs()?.value || []];
+        const [injectedArgs, injectedParent] = [
+            this.getNgtDirective(NgtArgs, this.argsCommentNodes)?.value || [],
+            this.getNgtDirective(NgtParent, this.parentCommentNodes)?.value,
+        ];
         if (name === SPECIAL_DOM_TAG.NGT_PRIMITIVE) {
             if (!injectedArgs[0])
                 throw new Error(`[NGT] ngt-primitive without args is invalid`);
             const object = injectedArgs[0];
-            const localState = getLocalState(object);
+            let localState = getLocalState(object);
             if (!localState) {
                 // NOTE: if an object isn't already "prepared", we prepare it
                 prepare(object, { store: this.rootStore, primitive: true });
+                localState = getLocalState(object);
+            }
+            const primitiveNode = createNode('three', object, this.document);
+            if (injectedParent) {
+                primitiveNode.__ngt_renderer__[1 /* NgtRendererClassId.parent */] = injectedParent;
             }
-            return createNode('three', object, this.document);
+            return primitiveNode;
         }
         const threeName = kebabToPascal(name.startsWith('ngt-') ? name.slice(4) : name);
         const threeTarget = this.catalogue[threeName];
@@ -1684,12 +1762,16 @@ class NgtRenderer {
             else if (is.material(instance)) {
                 localState.attach = ['material'];
             }
+            if (injectedParent) {
+                node.__ngt_renderer__[1 /* NgtRendererClassId.parent */] = injectedParent;
+            }
             return node;
         }
         return createNode('dom', element, this.document);
     }
     createComment(value) {
         const comment = this.delegate.createComment(value);
+        const commentNode = createNode('comment', comment, this.document);
         // NOTE: 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
@@ -1697,11 +1779,17 @@ class NgtRenderer {
             if (node === 'args') {
                 this.argsCommentNodes.push(comment);
             }
+            else if (node === 'parent') {
+                this.parentCommentNodes.push(comment);
+                comment[SPECIAL_INTERNAL_SET_PARENT_COMMENT] = (ngtParent) => {
+                    commentNode.__ngt_renderer__[1 /* NgtRendererClassId.parent */] = ngtParent;
+                };
+            }
             else if (typeof node === 'object') {
                 this.portalCommentsNodes.push(node);
             }
         };
-        return createNode('comment', comment, this.document);
+        return commentNode;
     }
     appendChild(parent, newChild) {
         const pRS = parent.__ngt_renderer__;
@@ -2074,12 +2162,12 @@ class NgtRenderer {
         const isChildStillDOM = cType === 'dom';
         return isDanglingThreeChild || (isParentStillDOM && isChildStillDOM) || isParentStillDOM;
     }
-    getNgtArgs() {
-        let directive;
+    getNgtDirective(directive, commentNodes) {
+        let directiveInstance;
         const destroyed = [];
-        let i = this.argsCommentNodes.length - 1;
+        let i = commentNodes.length - 1;
         while (i >= 0) {
-            const comment = this.argsCommentNodes[i];
+            const comment = commentNodes[i];
             if (comment.__ngt_renderer__[3 /* NgtRendererClassId.destroyed */]) {
                 destroyed.push(i);
                 i--;
@@ -2090,17 +2178,21 @@ class NgtRenderer {
                 i--;
                 continue;
             }
-            const instance = injector.get(NgtArgs, null);
-            if (instance && instance.validate()) {
-                directive = instance;
+            const instance = injector.get(directive, null);
+            if (instance &&
+                typeof instance === 'object' &&
+                'validate' in instance &&
+                typeof instance.validate === 'function' &&
+                instance.validate()) {
+                directiveInstance = instance;
                 break;
             }
             i--;
         }
         destroyed.forEach((index) => {
-            this.argsCommentNodes.splice(index, 1);
+            commentNodes.splice(index, 1);
         });
-        return directive;
+        return directiveInstance;
     }
     get data() {
         return this.delegate.data;
@@ -2433,7 +2525,10 @@ class NgtRouterOutlet extends RouterOutlet {
         this.environmentInjector = inject(EnvironmentInjector);
     }
     activateWith(activatedRoute, environmentInjector) {
-        return super.activateWith(activatedRoute, new NgtOutletEnvironmentInjector(environmentInjector, this.environmentInjector));
+        const activateWithEnvInjector = this.environmentInjector === environmentInjector
+            ? environmentInjector
+            : createEnvironmentInjector([], new NgtOutletEnvironmentInjector(environmentInjector, this.environmentInjector));
+        return super.activateWith(activatedRoute, activateWithEnvInjector);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: NgtRouterOutlet, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.5", type: NgtRouterOutlet, isStandalone: true, selector: "ngt-router-outlet", usesInheritance: true, ngImport: i0 }); }
@@ -3339,5 +3434,5 @@ const vector4 = createVectorComputed(Vector4);
  * Generated bundle index. Do not edit.
  */
 
-export { HTML, NGT_APPLY_PROPS, NGT_STORE, NON_ROOT, NgtArgs, NgtCanvas, NgtHTML, NgtHexify, NgtObjectEvents, NgtPortal, NgtPortalBeforeRender, NgtPortalContent, NgtRenderer, NgtRendererFactory, NgtRoutedScene, NgtRouterOutlet, NgtSelect, NgtSelection, ROUTED_SCENE, addAfterEffect, addEffect, addTail, applyProps, attach, checkNeedsUpdate, checkUpdate, createAttachFunction, detach, dispose, extend, flushGlobalEffects, getEmitter, getLocalState, hasListener, injectBeforeRender, injectCanvasRootInitializer, injectLoader, injectLoop, injectObjectEvents, injectStore, invalidateInstance, is, makeCameraInstance, makeDpr, makeId, makeObjectGraph, makeRendererInstance, merge, omit, pick, prepare, privateKeys, provideHTMLDomElement, provideNgtRenderer, provideStore, resolveRef, roots, signalStore, updateCamera, vector2, vector3, vector4 };
+export { HTML, NGT_APPLY_PROPS, NGT_STORE, NON_ROOT, NgtArgs, NgtCanvas, NgtHTML, NgtHexify, NgtObjectEvents, NgtParent, NgtPortal, NgtPortalBeforeRender, NgtPortalContent, NgtRenderer, NgtRendererFactory, NgtRoutedScene, NgtRouterOutlet, NgtSelect, NgtSelection, ROUTED_SCENE, addAfterEffect, addEffect, addTail, applyProps, attach, checkNeedsUpdate, checkUpdate, createAttachFunction, detach, dispose, extend, flushGlobalEffects, getEmitter, getLocalState, hasListener, injectBeforeRender, injectCanvasRootInitializer, injectLoader, injectLoop, injectObjectEvents, injectStore, invalidateInstance, is, makeCameraInstance, makeDpr, makeId, makeObjectGraph, makeRendererInstance, merge, omit, pick, prepare, privateKeys, provideHTMLDomElement, provideNgtRenderer, provideStore, resolveRef, roots, signalStore, updateCamera, vector2, vector3, vector4 };
 //# sourceMappingURL=angular-three.mjs.map