feat(core): add parent directive for special attach case

Author: nartc

libs/core/src/index.ts

@@ -1,5 +1,6 @@
 export * from './lib/canvas';
 export * from './lib/directives/args';
+export * from './lib/directives/parent';
 export * from './lib/directives/selection';
 export * from './lib/html';
 export * from './lib/instance';

libs/core/src/lib/directives/parent.ts

@@ -0,0 +1,82 @@
+import {
+	computed,
+	DestroyRef,
+	Directive,
+	effect,
+	ElementRef,
+	EmbeddedViewRef,
+	inject,
+	input,
+	TemplateRef,
+	ViewContainerRef,
+} from '@angular/core';
+import { Object3D } from 'three';
+import { SPECIAL_INTERNAL_ADD_COMMENT, SPECIAL_INTERNAL_SET_PARENT_COMMENT } from '../renderer/constants';
+import { NgtNullish } from '../types';
+
+@Directive({ selector: 'ng-template[parent]' })
+export class NgtParent {
+	parent = input.required<
+		string | Object3D | ElementRef<Object3D> | (() => NgtNullish<ElementRef<Object3D> | Object3D | string>)
+	>();
+
+	private vcr = inject(ViewContainerRef);
+	private template = inject(TemplateRef);
+
+	protected injected = false;
+	protected injectedParent: NgtNullish<ElementRef<Object3D> | Object3D | string> = null;
+	private view?: EmbeddedViewRef<unknown>;
+
+	private _parent = computed(() => {
+		const parent = this.parent();
+		if (typeof parent === 'function') {
+			return parent();
+		}
+		return parent;
+	});
+
+	constructor() {
+		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;
+	}
+
+	private 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();
+	}
+}

libs/core/src/lib/renderer/constants.ts

@@ -2,6 +2,7 @@ export const ROUTED_SCENE = '__ngt_renderer_is_routed_scene__';
 export const HTML = '__ngt_renderer_is_html';
 export const NON_ROOT = '__ngt_renderer_is_non_root__';
 export const SPECIAL_INTERNAL_ADD_COMMENT = '__ngt_renderer_add_comment__';
+export const SPECIAL_INTERNAL_SET_PARENT_COMMENT = '__ngt_renderer_set_parent_comment__';
 export const DOM_PARENT = '__ngt_dom_parent__';
 
 export const SPECIAL_DOM_TAG = {

libs/core/src/lib/renderer/index.ts

@@ -1,15 +1,19 @@
 import { DOCUMENT } from '@angular/common';
 import {
 	DebugNode,
+	ElementRef,
 	Injectable,
 	Renderer2,
 	RendererFactory2,
 	RendererType2,
+	Type,
 	inject,
 	makeEnvironmentProviders,
 	untracked,
 } from '@angular/core';
+import { Object3D } from 'three';
 import { NgtArgs } from '../directives/args';
+import { NgtParent } from '../directives/parent';
 import { getLocalState, prepare } from '../instance';
 import { NGT_STORE, injectStore, provideStore } from '../store';
 import { NgtAnyRecord, NgtLocalState, NgtState } from '../types';
@@ -24,6 +28,7 @@ import {
 	ROUTED_SCENE,
 	SPECIAL_DOM_TAG,
 	SPECIAL_INTERNAL_ADD_COMMENT,
+	SPECIAL_INTERNAL_SET_PARENT_COMMENT,
 	SPECIAL_PROPERTIES,
 } from './constants';
 import {
@@ -87,6 +92,7 @@ export class NgtRendererFactory implements RendererFactory2 {
 
 export class NgtRenderer implements Renderer2 {
 	private argsCommentNodes: Array<NgtRendererNode> = [];
+	private parentCommentNodes: Array<NgtRendererNode> = [];
 
 	constructor(
 		private delegate: Renderer2,
@@ -130,17 +136,31 @@ export class NgtRenderer implements Renderer2 {
 			);
 		}
 
-		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);
 			}
-			return createNode('three', object, this.document);
+
+			const primitiveNode = createNode('three', object, this.document);
+
+			if (injectedParent) {
+				const resolvedParent = this.getParentFromNgtParent(injectedParent, this.rootStore);
+				if (resolvedParent) {
+					primitiveNode.__ngt_renderer__[NgtRendererClassId.parent] = resolvedParent as unknown as NgtRendererNode;
+				}
+			}
+
+			return primitiveNode;
 		}
 
 		const threeName = kebabToPascal(name.startsWith('ngt-') ? name.slice(4) : name);
@@ -159,6 +179,13 @@ export class NgtRenderer implements Renderer2 {
 				localState.attach = ['material'];
 			}
 
+			if (injectedParent) {
+				const resolvedParent = this.getParentFromNgtParent(injectedParent, this.rootStore);
+				if (resolvedParent) {
+					node.__ngt_renderer__[NgtRendererClassId.parent] = resolvedParent as unknown as NgtRendererNode;
+				}
+			}
+
 			return node;
 		}
 
@@ -167,19 +194,28 @@ export class NgtRenderer implements Renderer2 {
 
 	createComment(value: string) {
 		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
-		comment[SPECIAL_INTERNAL_ADD_COMMENT] = (node: NgtRendererNode | 'args') => {
+		comment[SPECIAL_INTERNAL_ADD_COMMENT] = (node: NgtRendererNode | 'args' | 'parent') => {
 			if (node === 'args') {
 				this.argsCommentNodes.push(comment);
+			} else if (node === 'parent') {
+				this.parentCommentNodes.push(comment);
+				comment[SPECIAL_INTERNAL_SET_PARENT_COMMENT] = (ngtParent: Object3D | ElementRef<Object3D> | string) => {
+					commentNode.__ngt_renderer__[NgtRendererClassId.parent] = this.getParentFromNgtParent(
+						ngtParent,
+						this.rootStore,
+					) as unknown as NgtRendererNode;
+				};
 			} else if (typeof node === 'object') {
 				this.portalCommentsNodes.push(node);
 			}
 		};
 
-		return createNode('comment', comment, this.document);
+		return commentNode;
 	}
 
 	appendChild(parent: NgtRendererNode, newChild: NgtRendererNode): void {
@@ -627,6 +663,97 @@ export class NgtRenderer implements Renderer2 {
 		return isDanglingThreeChild || (isParentStillDOM && isChildStillDOM) || isParentStillDOM;
 	}
 
+	private getNgtDirective<TDirective>(directive: Type<TDirective>, commentNodes: Array<NgtRendererNode>) {
+		let directiveInstance: TDirective | undefined;
+
+		const destroyed = [];
+
+		let i = commentNodes.length - 1;
+		while (i >= 0) {
+			const comment = commentNodes[i];
+			if (comment.__ngt_renderer__[NgtRendererClassId.destroyed]) {
+				destroyed.push(i);
+				i--;
+				continue;
+			}
+			const injector = comment.__ngt_renderer__[NgtRendererClassId.debugNodeFactory]?.()?.injector;
+			if (!injector) {
+				i--;
+				continue;
+			}
+			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) => {
+			commentNodes.splice(index, 1);
+		});
+		return directiveInstance;
+	}
+
+	private getParentFromNgtParent(ngtParent: Object3D | ElementRef<Object3D> | string, store: NgtSignalStore<NgtState>) {
+		let topMostStore = store;
+
+		while (topMostStore.snapshot.previousRoot) {
+			topMostStore = topMostStore.snapshot.previousRoot;
+		}
+
+		const scene = topMostStore.snapshot.scene;
+
+		if (typeof ngtParent === 'string') {
+			return scene.getObjectByName(ngtParent);
+		}
+
+		if ('nativeElement' in ngtParent) {
+			return ngtParent.nativeElement;
+		}
+
+		return ngtParent;
+	}
+
+	private getNgtParent() {
+		let directive: NgtParent | undefined;
+
+		const destroyed = [];
+
+		let i = this.parentCommentNodes.length - 1;
+		while (i >= 0) {
+			const comment = this.parentCommentNodes[i];
+			if (comment.__ngt_renderer__[NgtRendererClassId.destroyed]) {
+				destroyed.push(i);
+				i--;
+				continue;
+			}
+			const injector = comment.__ngt_renderer__[NgtRendererClassId.debugNodeFactory]?.()?.injector;
+			if (!injector) {
+				i--;
+				continue;
+			}
+			const instance = injector.get(NgtParent, null);
+			if (instance && instance.validate()) {
+				directive = instance;
+				break;
+			}
+
+			i--;
+		}
+
+		destroyed.forEach((index) => {
+			this.parentCommentNodes.splice(index, 1);
+		});
+
+		return directive;
+	}
+
 	private getNgtArgs() {
 		let directive: NgtArgs | undefined;
 

libs/core/src/lib/types.ts

@@ -22,6 +22,7 @@ import { NgtSignalStore } from './utils/signal-store';
 
 export type NgtProperties<T> = { [K in keyof T as T[K] extends (...args: Array<any>) => any ? never : K]: T[K] };
 export type NgtAnyRecord = Record<string, any>;
+export type NgtNullish<T> = T | null | undefined;
 
 export type NgtEquConfig = {
 	/** Compare arrays by reference equality a === b (default), or by shallow equality */