angular-three 1.2.1 → 1.2.2

package/fesm2020/angular-three.mjs

@@ -1,11 +1,10 @@
 import * as i0 from '@angular/core';
-import { ElementRef, Injectable, inject, InjectionToken, ViewContainerRef, TemplateRef, Directive, Input, EventEmitter, getDebugNode, ChangeDetectorRef, RendererFactory2, EnvironmentInjector, createEnvironmentInjector, Component, HostBinding, Output, ViewChild, Pipe, SkipSelf, ContentChild } from '@angular/core';
+import { ElementRef, Injectable, inject, InjectionToken, ViewContainerRef, TemplateRef, Directive, Input, EventEmitter, getDebugNode, RendererFactory2, ChangeDetectorRef, EnvironmentInjector, createEnvironmentInjector, Component, HostBinding, Output, ViewChild, Pipe, SkipSelf, ContentChild } from '@angular/core';
 import { provideNgxResizeOptions, NgxResize } from 'ngx-resize';
 import { isObservable, of, map, from, tap, retry, catchError, share, ReplaySubject, switchMap, forkJoin, take, BehaviorSubject, startWith, filter, distinctUntilChanged, takeUntil, merge } from 'rxjs';
 import * as THREE from 'three';
 import { DOCUMENT, NgForOf, NgIf } from '@angular/common';
 import { RxState, selectSlice } from '@rx-angular/state';
-import { ɵDomRendererFactory2 } from '@angular/platform-browser';
 import { __classPrivateFieldGet } from 'tslib';
 
 const idCache = {};
@@ -1537,6 +1536,10 @@ class NgtRendererStore {
             undefined,
         ];
         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[0 /* NgtRendererClassId.type */] === 'comment') {
             state[13 /* NgtRendererClassId.injectorFactory */] = () => getDebugNode(rendererNode).injector;
             // we attach an arrow function to the Comment node
@@ -1694,6 +1697,9 @@ class NgtRendererStore {
     isCompound(name) {
         return this.root.compoundPrefixes.some((prefix) => name.startsWith(prefix));
     }
+    isDocument(node) {
+        return node === this.root.document;
+    }
     get rootScene() {
         return this.root.store.get('scene');
     }
@@ -1868,17 +1874,18 @@ class NgtRendererStore {
 
 class NgtRendererFactory {
     constructor() {
-        this.domRendererFactory = inject(ɵDomRendererFactory2);
+        this.delegateRendererFactory = inject(RendererFactory2, { skipSelf: true });
         this.cdr = inject(ChangeDetectorRef);
         this.store = inject(NgtStore);
         this.catalogue = inject(NGT_CATALOGUE);
         this.compoundPrefixes = inject(NGT_COMPOUND_PREFIXES);
+        this.document = inject(DOCUMENT);
         this.rendererMap = new Map();
     }
     createRenderer(hostElement, type) {
-        const domRenderer = this.domRendererFactory.createRenderer(hostElement, type);
+        const delegateRenderer = this.delegateRendererFactory.createRenderer(hostElement, type);
         if (!type)
-            return domRenderer;
+            return delegateRenderer;
         let renderer = this.rendererMap.get(type.id);
         if (renderer)
             return renderer;
@@ -1887,8 +1894,9 @@ class NgtRendererFactory {
                 store: this.store,
                 cdr: this.cdr,
                 compoundPrefixes: this.compoundPrefixes,
+                document: this.document,
             });
-            renderer = new NgtRenderer(domRenderer, store, this.catalogue, true);
+            renderer = new NgtRenderer(delegateRenderer, store, this.catalogue, true);
             this.rendererMap.set(type.id, renderer);
         }
         if (!renderer) {
@@ -1896,8 +1904,9 @@ class NgtRendererFactory {
                 store: this.store,
                 cdr: this.cdr,
                 compoundPrefixes: this.compoundPrefixes,
+                document: this.document,
             });
-            renderer = new NgtRenderer(domRenderer, store, this.catalogue);
+            renderer = new NgtRenderer(delegateRenderer, store, this.catalogue);
             this.rendererMap.set(type.id, renderer);
         }
         return renderer;
@@ -1909,26 +1918,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.2", ngImpor
             type: Injectable
         }] });
 class NgtRenderer {
-    constructor(domRenderer, store, catalogue, root = false) {
-        this.domRenderer = domRenderer;
+    constructor(delegate, store, catalogue, root = false) {
+        this.delegate = delegate;
         this.store = store;
         this.catalogue = catalogue;
         this.root = root;
         this.first = false;
-        this.createText = this.domRenderer.createText.bind(this.domRenderer);
-        this.destroy = this.domRenderer.destroy.bind(this.domRenderer);
+        this.createText = this.delegate.createText.bind(this.delegate);
+        this.destroy = this.delegate.destroy.bind(this.delegate);
         this.destroyNode = null;
-        this.selectRootElement = this.domRenderer.selectRootElement.bind(this.domRenderer);
-        this.nextSibling = this.domRenderer.nextSibling.bind(this.domRenderer);
-        this.removeAttribute = this.domRenderer.removeAttribute.bind(this.domRenderer);
-        this.addClass = this.domRenderer.addClass.bind(this.domRenderer);
-        this.removeClass = this.domRenderer.removeClass.bind(this.domRenderer);
-        this.setStyle = this.domRenderer.setStyle.bind(this.domRenderer);
-        this.removeStyle = this.domRenderer.removeStyle.bind(this.domRenderer);
-        this.setValue = this.domRenderer.setValue.bind(this.domRenderer);
+        this.selectRootElement = this.delegate.selectRootElement.bind(this.delegate);
+        this.nextSibling = this.delegate.nextSibling.bind(this.delegate);
+        this.removeAttribute = this.delegate.removeAttribute.bind(this.delegate);
+        this.addClass = this.delegate.addClass.bind(this.delegate);
+        this.removeClass = this.delegate.removeClass.bind(this.delegate);
+        this.setStyle = this.delegate.setStyle.bind(this.delegate);
+        this.removeStyle = this.delegate.removeStyle.bind(this.delegate);
+        this.setValue = this.delegate.setValue.bind(this.delegate);
     }
     createElement(name, namespace) {
-        const element = this.domRenderer.createElement(name, namespace);
+        const element = this.delegate.createElement(name, namespace);
         // on first pass, we return the Root Scene as the root node
         if (this.root && !this.first) {
             this.first = true;
@@ -1979,7 +1988,7 @@ class NgtRenderer {
         return this.store.createNode('dom', element);
     }
     createComment(value) {
-        const comment = this.domRenderer.createComment(value);
+        const comment = this.delegate.createComment(value);
         return this.store.createNode('comment', comment);
     }
     appendChild(parent, newChild) {
@@ -2101,7 +2110,7 @@ class NgtRenderer {
     parentNode(node) {
         if (node.__ngt_renderer__?.[1 /* NgtRendererClassId.parent */])
             return node.__ngt_renderer__[1 /* NgtRendererClassId.parent */];
-        return this.domRenderer.parentNode(node);
+        return this.delegate.parentNode(node);
     }
     setAttribute(el, name, value, namespace) {
         if (el.__ngt_renderer__[0 /* NgtRendererClassId.type */] === 'compound') {
@@ -2142,6 +2151,10 @@ class NgtRenderer {
         }
     }
     listen(target, eventName, callback) {
+        // 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__[0 /* NgtRendererClassId.type */] === 'three' ||
             (target.__ngt_renderer__[0 /* NgtRendererClassId.type */] === 'compound' &&
                 target.__ngt_renderer__[6 /* NgtRendererClassId.compounded */])) {
@@ -2159,7 +2172,7 @@ class NgtRenderer {
         return () => { };
     }
     get data() {
-        return this.domRenderer.data;
+        return this.delegate.data;
     }
 }
 
@@ -2862,5 +2875,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.2", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { NGT_CATALOGUE, NgtArgs, NgtCanvas, NgtPortal, NgtPortalBeforeRender, NgtPortalContent, NgtPush, NgtRepeat, NgtRxStore, NgtStore, checkNeedsUpdate, checkUpdate, createAttachFunction, extend, getLocalState, injectBeforeRender, injectNgtDestroy, injectNgtLoader, injectNgtRef, invalidateInstance, is, makeDefaultCamera, makeDefaultRenderer, makeDpr, makeId, makeObjectGraph, prepare, rootStateMap, startWithUndefined, tapEffect, updateCamera };
+export { NGT_CATALOGUE, NgtArgs, NgtCanvas, NgtPortal, NgtPortalBeforeRender, NgtPortalContent, NgtPush, NgtRepeat, NgtRxStore, NgtStore, applyProps, checkNeedsUpdate, checkUpdate, createAttachFunction, extend, getLocalState, injectBeforeRender, injectNgtDestroy, injectNgtLoader, injectNgtRef, invalidateInstance, is, makeDefaultCamera, makeDefaultRenderer, makeDpr, makeId, makeObjectGraph, prepare, rootStateMap, startWithUndefined, tapEffect, updateCamera };
 //# sourceMappingURL=angular-three.mjs.map