fix: use Document as ownerDocument for renderer node that does not have ownerDocument yet

Author: nartc

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

@@ -1,3 +1,4 @@
+import { DOCUMENT } from '@angular/common';
 import { ChangeDetectorRef, inject, Injectable, Renderer2, RendererFactory2, RendererType2 } from '@angular/core';
 import { NGT_CATALOGUE } from '../di/catalogue';
 import { NgtStore } from '../stores/store';
@@ -15,6 +16,7 @@ export class NgtRendererFactory implements RendererFactory2 {
     private readonly store = inject(NgtStore);
     private readonly catalogue = inject(NGT_CATALOGUE);
     private readonly compoundPrefixes = inject(NGT_COMPOUND_PREFIXES);
+    private readonly document = inject(DOCUMENT);
 
     private rendererMap = new Map<string, Renderer2>();
 
@@ -30,6 +32,7 @@ export class NgtRendererFactory implements RendererFactory2 {
                 store: this.store,
                 cdr: this.cdr,
                 compoundPrefixes: this.compoundPrefixes,
+                document: this.document,
             });
             renderer = new NgtRenderer(delegateRenderer, store, this.catalogue, true);
             this.rendererMap.set(type.id, renderer);
@@ -40,6 +43,7 @@ export class NgtRendererFactory implements RendererFactory2 {
                 store: this.store,
                 cdr: this.cdr,
                 compoundPrefixes: this.compoundPrefixes,
+                document: this.document,
             });
             renderer = new NgtRenderer(delegateRenderer, store, this.catalogue);
             this.rendererMap.set(type.id, renderer);
@@ -318,6 +322,11 @@ export class NgtRenderer implements Renderer2 {
     }
 
     listen(target: NgtRendererNode, eventName: string, callback: (event: any) => boolean | void): () => void {
+        // if target is Document (DOM), then we pass that to delegate Renderer
+        if (this.store.isDocument(target)) {
+            return this.delegate.listen(target, eventName, callback);
+        }
+
         if (
             target.__ngt_renderer__[NgtRendererClassId.type] === 'three' ||
             (target.__ngt_renderer__[NgtRendererClassId.type] === 'compound' &&

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

@@ -12,6 +12,7 @@ export type NgtRendererRootState = {
     store: NgtStore;
     cdr: ChangeDetectorRef;
     compoundPrefixes: string[];
+    document: Document;
 };
 
 export type NgtQueueOp = [type: 'op' | 'cleanUp', op: () => void, done?: true];
@@ -63,6 +64,11 @@ export class NgtRendererStore {
 
         const rendererNode = Object.assign(node, { __ngt_renderer__: state });
 
+        // assign ownerDocument to node so we can use HostListener in Component
+        if (!rendererNode['ownerDocument']) {
+            rendererNode['ownerDocument'] = this.root.document;
+        }
+
         if (state[NgtRendererClassId.type] === 'comment') {
             state[NgtRendererClassId.injectorFactory] = () => getDebugNode(rendererNode)!.injector;
             // we attach an arrow function to the Comment node
@@ -241,6 +247,10 @@ export class NgtRendererStore {
         return this.root.compoundPrefixes.some((prefix) => name.startsWith(prefix));
     }
 
+    isDocument(node: NgtAnyRecord) {
+      return node === this.root.document;
+    }
+
     get rootScene() {
         return this.root.store.get('scene');
     }