feat: try using ref directive

Author: nartc

libs/angular-three/src/index.ts

@@ -4,6 +4,7 @@ export * from './lib/di/catalogue';
 export * from './lib/di/destroy';
 export * from './lib/di/ref';
 export * from './lib/directives/args';
+export * from './lib/directives/ref';
 export * from './lib/directives/repeat';
 export * from './lib/loader';
 export * from './lib/loop';

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

@@ -1,21 +1,9 @@
-import { Directive, EmbeddedViewRef, inject, Input, TemplateRef, ViewContainerRef } from '@angular/core';
+import { Directive, Input } from '@angular/core';
+import { NgtCommonDirective } from './common';
 
 @Directive({ selector: '[args]', standalone: true })
-export class NgtArgs {
-    private readonly vcr = inject(ViewContainerRef);
-    private readonly template = inject(TemplateRef);
-
-    constructor() {
-        const commentNode = this.vcr.element.nativeElement;
-        if (commentNode['__ngt_renderer_add_comment__']) {
-            commentNode['__ngt_renderer_add_comment__']();
-            delete commentNode['__ngt_renderer_add_comment__'];
-        }
-    }
-
+export class NgtArgs extends NgtCommonDirective {
     private injectedArgs: any[] = [];
-    private injected = false;
-    private view?: EmbeddedViewRef<unknown>;
 
     @Input() set args(args: any[] | null) {
         if (args == null || !Array.isArray(args)) return;
@@ -36,12 +24,4 @@ export class NgtArgs {
     validate() {
         return !this.injected && !!this.injectedArgs.length;
     }
-
-    private createView() {
-        if (this.view && !this.view.destroyed) {
-            this.view.destroy();
-        }
-        this.view = this.vcr.createEmbeddedView(this.template);
-        this.view.detectChanges();
-    }
 }

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

@@ -0,0 +1,31 @@
+import { Directive, EmbeddedViewRef, inject, TemplateRef, ViewContainerRef } from '@angular/core';
+
+@Directive()
+export abstract class NgtCommonDirective {
+    protected readonly vcr = inject(ViewContainerRef);
+    protected readonly template = inject(TemplateRef);
+
+    protected injected = false;
+    protected shouldCreateView = true;
+    private view?: EmbeddedViewRef<unknown>;
+
+    constructor() {
+        const commentNode = this.vcr.element.nativeElement;
+        if (commentNode['__ngt_renderer_add_comment__']) {
+            commentNode['__ngt_renderer_add_comment__']();
+            delete commentNode['__ngt_renderer_add_comment__'];
+        }
+    }
+
+    abstract validate(): boolean;
+
+    protected createView() {
+        if (this.shouldCreateView) {
+            if (this.view && !this.view.destroyed) {
+                this.view.destroy();
+            }
+            this.view = this.vcr.createEmbeddedView(this.template);
+            this.view.detectChanges();
+        }
+    }
+}

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

@@ -0,0 +1,27 @@
+import { Directive, Input } from '@angular/core';
+import { NgtInjectedRef } from '../di/ref';
+import { NgtCommonDirective } from './common';
+
+@Directive({ selector: '[ref]', standalone: true })
+export class NgtRef<T> extends NgtCommonDirective {
+    private injectedRef?: NgtInjectedRef<T>;
+
+    @Input() set ref(ref: NgtInjectedRef<T> | null) {
+        if (!ref || ref == null) return;
+        this.injected = false;
+        this.injectedRef = ref;
+        this.createView();
+    }
+
+    get ref(): NgtInjectedRef<T> | null {
+        if (this.validate()) {
+            this.injected = true;
+            return this.injectedRef as NgtInjectedRef<T>;
+        }
+        return null;
+    }
+
+    override validate(): boolean {
+        return !this.injected && !!this.injectedRef && !this.injectedRef.nativeElement;
+    }
+}

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

@@ -105,7 +105,7 @@ export class NgtRenderer implements Renderer2 {
             );
         }
 
-        const { injectedArgs, store } = this.store.getCreationState();
+        const { injectedArgs, injectedRef, store } = this.store.getCreationState();
 
         // handle primitive
         if (name === SPECIAL_DOM_TAG.NGT_PRIMITIVE) {
@@ -117,7 +117,9 @@ export class NgtRenderer implements Renderer2 {
                 localState = getLocalState(object);
             }
             if (!localState.store) localState.store = store;
-            return this.store.createNode('three', object);
+            const primitiveNode = this.store.createNode('three', object);
+            if (injectedRef) injectedRef.nativeElement = primitiveNode;
+            return primitiveNode;
         }
 
         const threeTag = name.startsWith('ngt') ? name.slice(4) : name;
@@ -134,6 +136,11 @@ export class NgtRenderer implements Renderer2 {
                 localState.attach = ['material'];
             }
 
+            if (injectedRef) {
+                injectedRef.nativeElement = node;
+                node.__ngt_renderer__[NgtRendererClassId.ref] = injectedRef;
+            }
+
             return node;
         }
 

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

@@ -1,10 +1,11 @@
 import { ChangeDetectorRef, getDebugNode, Injector, Type } from '@angular/core';
 import { NgtArgs } from '../directives/args';
+import { NgtCommonDirective } from '../directives/common';
+import { NgtRef } from '../directives/ref';
 import { NgtStore } from '../stores/store';
 import type { NgtAnyRecord } from '../types';
 import { applyProps } from '../utils/apply-props';
 import { getLocalState } from '../utils/instance';
-import { is } from '../utils/is';
 import { NgtCompoundClassId, NgtQueueOpClassId, NgtRendererClassId } from './enums';
 import { attachThreeChild, removeThreeChild, SPECIAL_PROPERTIES } from './utils';
 
@@ -210,11 +211,11 @@ export class NgtRendererStore {
         if (node.__ngt_renderer__[NgtRendererClassId.destroyed]) return;
         // setup [ref] here
         // ref should never change
-        if (name === SPECIAL_PROPERTIES.REF && is.ref(value)) {
-            node.__ngt_renderer__[NgtRendererClassId.ref] = value;
-            value.nativeElement = node;
-            return;
-        }
+        // if (name === SPECIAL_PROPERTIES.REF && is.ref(value)) {
+        // node.__ngt_renderer__[NgtRendererClassId.ref] = value;
+        // value.nativeElement = node;
+        // return;
+        // }
 
         const parent = getLocalState(node).parent || node.__ngt_renderer__[NgtRendererClassId.parent];
 
@@ -318,8 +319,9 @@ export class NgtRendererStore {
 
     getCreationState() {
         const injectedArgs = this.firstNonInjectedDirective(NgtArgs)?.args || [];
+        const injectedRef = this.firstNonInjectedDirective(NgtRef)?.ref || null;
         const store = this.tryGetPortalStore();
-        return { injectedArgs, store };
+        return { injectedArgs, injectedRef, store };
     }
 
     destroy(node: NgtRendererNode, parent?: NgtRendererNode) {
@@ -405,8 +407,8 @@ export class NgtRendererStore {
         }
     }
 
-    private firstNonInjectedDirective(dir: Type<NgtArgs>) {
-        let directive: NgtArgs | undefined;
+    private firstNonInjectedDirective<T extends NgtCommonDirective>(dir: Type<T>) {
+        let directive: T | undefined;
 
         let i = this.comments.length - 1;
         while (i >= 0) {