feat: add parent directive to add "parent" slot to a 3d object

Author: nartc

libs/angular-three/src/index.ts

@@ -5,6 +5,7 @@ export * from './lib/di/destroy';
 export * from './lib/di/ref';
 export * from './lib/di/run-in-context';
 export * from './lib/directives/args';
+export * from './lib/directives/parent';
 export * from './lib/directives/repeat';
 export * from './lib/loader';
 export * from './lib/loop';

libs/angular-three/src/lib/directives/parent.ts

@@ -0,0 +1,27 @@
+import { Directive, Input } from '@angular/core';
+import { NgtInjectedRef } from '../di/ref';
+import { NgtCommonDirective } from './common';
+
+@Directive({ selector: '[parent]', standalone: true })
+export class NgtParent extends NgtCommonDirective {
+    private injectedParent: string | THREE.Object3D | NgtInjectedRef<THREE.Object3D> = null!;
+
+    @Input() set parent(parent: string | THREE.Object3D | NgtInjectedRef<THREE.Object3D>) {
+        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(): boolean {
+        return !this.injected && !!this.injectedParent;
+    }
+}

libs/angular-three/src/lib/renderer/enums.ts

@@ -1,6 +1,7 @@
 export const enum NgtRendererClassId {
     type,
     parent,
+    injectedParent,
     children,
     destroyed,
     compound,

libs/angular-three/src/lib/renderer/renderer.ts

@@ -8,14 +8,15 @@ import {
     RendererFactory2,
     RendererType2,
 } from '@angular/core';
+import { take } from 'rxjs';
 import { NGT_CATALOGUE } from '../di/catalogue';
 import { NgtStore } from '../stores/store';
 import { NgtAnyRecord } from '../types';
 import { getLocalState, prepare } from '../utils/instance';
 import { is } from '../utils/is';
 import { NGT_COMPOUND_PREFIXES } from './di';
 import { NgtRendererClassId } from './enums';
-import { NgtRendererNode, NgtRendererStore } from './state';
+import { NgtRendererNode, NgtRendererState, NgtRendererStore } from './state';
 import { attachThreeChild, kebabToPascal, processThreeEvent, removeThreeChild, SPECIAL_DOM_TAG } from './utils';
 
 @Injectable()
@@ -99,7 +100,14 @@ export class NgtRenderer implements Renderer2 {
             );
         }
 
-        const { injectedArgs, store } = this.store.getCreationState();
+        const { injectedArgs, injectedParent, store } = this.store.getCreationState();
+
+        let parent = injectedParent as NgtRendererState[NgtRendererClassId.injectedParent];
+        if (typeof injectedParent === 'string') {
+            parent = store
+                .get('scene')
+                .getObjectByName(injectedParent) as unknown as NgtRendererState[NgtRendererClassId.injectedParent];
+        }
 
         // handle primitive
         if (name === SPECIAL_DOM_TAG.NGT_PRIMITIVE) {
@@ -111,7 +119,11 @@ export class NgtRenderer implements Renderer2 {
                 localState = getLocalState(object);
             }
             if (!localState.store) localState.store = store;
-            return this.store.createNode('three', object);
+            const node = this.store.createNode('three', object);
+            if (parent) {
+                node.__ngt_renderer__[NgtRendererClassId.injectedParent] = parent;
+            }
+            return node;
         }
 
         const threeTag = name.startsWith('ngt') ? name.slice(4) : name;
@@ -127,6 +139,11 @@ export class NgtRenderer implements Renderer2 {
             } else if (is.material(instance)) {
                 localState.attach = ['material'];
             }
+
+            if (parent) {
+                node.__ngt_renderer__[NgtRendererClassId.injectedParent] = parent;
+            }
+
             return node;
         }
 
@@ -148,6 +165,17 @@ export class NgtRenderer implements Renderer2 {
             return;
         }
 
+        if (cRS[NgtRendererClassId.injectedParent]) {
+            if (is.ref(cRS[NgtRendererClassId.injectedParent])) {
+                cRS[NgtRendererClassId.injectedParent].$.pipe(take(1)).subscribe((val) => {
+                    this.appendChild(val, newChild);
+                });
+            } else {
+                this.appendChild(cRS[NgtRendererClassId.injectedParent], newChild);
+            }
+            return;
+        }
+
         this.store.setParent(newChild, parent);
         this.store.addChild(parent, newChild);
 
@@ -234,7 +262,7 @@ export class NgtRenderer implements Renderer2 {
         // refChild: NgtRendererNode
         // isMove?: boolean | undefined
     ): void {
-        if (!parent.__ngt_renderer__ || parent === newChild) return;
+        if (parent == null || !parent.__ngt_renderer__ || parent === newChild) return;
         this.appendChild(parent, newChild);
     }
 

libs/angular-three/src/lib/renderer/state.ts

@@ -1,6 +1,8 @@
 import { ChangeDetectorRef, getDebugNode, Injector, Type } from '@angular/core';
+import { NgtInjectedRef } from '../di/ref';
 import { NgtArgs } from '../directives/args';
 import { NgtCommonDirective } from '../directives/common';
+import { NgtParent } from '../directives/parent';
 import { NgtStore } from '../stores/store';
 import type { NgtAnyRecord } from '../types';
 import { applyProps } from '../utils/apply-props';
@@ -22,6 +24,7 @@ export type NgtQueueOp = [type: 'op' | 'cleanUp', op: () => void, done?: true];
 export type NgtRendererState = [
     type: 'three' | 'compound' | 'portal' | 'comment' | 'dom',
     parent: NgtRendererNode | null,
+    injectedParent: NgtRendererNode | NgtInjectedRef<NgtRendererNode> | null,
     children: NgtRendererNode[],
     destroyed: boolean,
     compound: [applyFirst: boolean, props: Record<string, any>],
@@ -49,6 +52,7 @@ export class NgtRendererStore {
         const state = [
             type,
             null,
+            null,
             [],
             false,
             undefined!,
@@ -326,8 +330,9 @@ export class NgtRendererStore {
 
     getCreationState() {
         const injectedArgs = this.firstNonInjectedDirective(NgtArgs)?.args || [];
+        const injectedParent = this.firstNonInjectedDirective(NgtParent)?.parent || null;
         const store = this.tryGetPortalStore();
-        return { injectedArgs, store };
+        return { injectedArgs, injectedParent, store };
     }
 
     destroy(node: NgtRendererNode, parent?: NgtRendererNode) {