angular-three 3.7.0 → 4.0.0-next.2

package/dom/README.md

@@ -0,0 +1,3 @@
+# angular-three/dom
+
+Secondary entry point of `angular-three`. It can be used by importing from `angular-three/dom`.

package/dom/index.d.ts

@@ -0,0 +1,2 @@
+export * from './lib/canvas';
+export * from './lib/renderer';

package/dom/lib/canvas.d.ts

@@ -0,0 +1,49 @@
+import { ElementRef } from '@angular/core';
+import { NgtCamera, NgtCameraParameters, NgtDpr, NgtEventPrefix, NgtFrameloop, NgtGLOptions, NgtPerformance, NgtShadows, NgtSize, NgtState } from 'angular-three';
+import { ResizeResult } from 'ngxtension/resize';
+import * as THREE from 'three';
+import { createPointerEvents } from './events';
+import * as i0 from "@angular/core";
+export declare class NgtCanvasContent {
+    constructor();
+    static ɵfac: i0.ɵɵFactoryDeclaration<NgtCanvasContent, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<NgtCanvasContent, "ng-template[canvasContent]", never, {}, {}, never, never, true, never>;
+}
+export declare class NgtCanvas {
+    private store;
+    private initRoot;
+    private host;
+    private zone;
+    private injector;
+    gl: import("@angular/core").InputSignal<NgtGLOptions>;
+    size: import("@angular/core").InputSignal<NgtSize | undefined>;
+    shadows: import("@angular/core").InputSignalWithTransform<NgtShadows, unknown>;
+    legacy: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+    linear: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+    flat: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+    orthographic: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+    frameloop: import("@angular/core").InputSignal<NgtFrameloop>;
+    performance: import("@angular/core").InputSignal<Partial<Omit<NgtPerformance, "regress">> | undefined>;
+    dpr: import("@angular/core").InputSignal<NgtDpr>;
+    raycaster: import("@angular/core").InputSignal<Partial<THREE.Raycaster> | undefined>;
+    scene: import("@angular/core").InputSignal<THREE.Scene | Partial<THREE.Scene> | undefined>;
+    camera: import("@angular/core").InputSignal<NgtCamera | NgtCameraParameters | undefined>;
+    events: import("@angular/core").InputSignal<typeof createPointerEvents>;
+    eventSource: import("@angular/core").InputSignal<HTMLElement | ElementRef<HTMLElement> | undefined>;
+    eventPrefix: import("@angular/core").InputSignal<NgtEventPrefix>;
+    lookAt: import("@angular/core").InputSignal<number | THREE.Vector3 | [x: number, y: number, z: number] | undefined>;
+    created: import("@angular/core").OutputEmitterRef<NgtState>;
+    pointerMissed: import("@angular/core").OutputRef<MouseEvent>;
+    private glCanvas;
+    private glCanvasViewContainerRef;
+    private canvasContentRef;
+    protected hbPointerEvents: import("@angular/core").Signal<"none" | "auto">;
+    protected resizeResult: import("@angular/core").WritableSignal<ResizeResult>;
+    private configurator;
+    private glRef?;
+    constructor();
+    private noZoneRender;
+    static ɵfac: i0.ɵɵFactoryDeclaration<NgtCanvas, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<NgtCanvas, "ngt-canvas", never, { "gl": { "alias": "gl"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "shadows": { "alias": "shadows"; "required": false; "isSignal": true; }; "legacy": { "alias": "legacy"; "required": false; "isSignal": true; }; "linear": { "alias": "linear"; "required": false; "isSignal": true; }; "flat": { "alias": "flat"; "required": false; "isSignal": true; }; "orthographic": { "alias": "orthographic"; "required": false; "isSignal": true; }; "frameloop": { "alias": "frameloop"; "required": false; "isSignal": true; }; "performance": { "alias": "performance"; "required": false; "isSignal": true; }; "dpr": { "alias": "dpr"; "required": false; "isSignal": true; }; "raycaster": { "alias": "raycaster"; "required": false; "isSignal": true; }; "scene": { "alias": "scene"; "required": false; "isSignal": true; }; "camera": { "alias": "camera"; "required": false; "isSignal": true; }; "events": { "alias": "events"; "required": false; "isSignal": true; }; "eventSource": { "alias": "eventSource"; "required": false; "isSignal": true; }; "eventPrefix": { "alias": "eventPrefix"; "required": false; "isSignal": true; }; "lookAt": { "alias": "lookAt"; "required": false; "isSignal": true; }; }, { "created": "created"; "pointerMissed": "pointerMissed"; }, ["canvasContentRef"], ["*"], true, never>;
+}
+export declare const NgtCanvasDeclarations: readonly [typeof NgtCanvas, typeof NgtCanvasContent];

package/{lib/dom → dom/lib}/events.d.ts

@@ -1,4 +1,3 @@
-import { NgtEventManager, NgtState } from '../types';
-import { NgtSignalStore } from '../utils/signal-store';
+import { NgtEventManager, NgtState, SignalState } from 'angular-three';
 export declare const supportedEvents: readonly ["click", "contextmenu", "dblclick", "pointerup", "pointerdown", "pointerover", "pointerout", "pointerenter", "pointerleave", "pointermove", "pointermissed", "pointercancel", "wheel"];
-export declare function createPointerEvents(store: NgtSignalStore<NgtState>): NgtEventManager<HTMLElement>;
+export declare function createPointerEvents(store: SignalState<NgtState>): NgtEventManager<HTMLElement>;

package/dom/lib/renderer.d.ts

@@ -0,0 +1 @@
+export declare function provideNgtRenderer(): import("@angular/core").EnvironmentProviders;

package/fesm2022/angular-three-dom.mjs

@@ -0,0 +1,278 @@
+import * as i0 from '@angular/core';
+import { inject, ViewContainerRef, Directive, ElementRef, NgZone, Injector, input, booleanAttribute, output, viewChild, contentChild, TemplateRef, computed, signal, afterNextRender, effect, DestroyRef, untracked, Component, ChangeDetectionStrategy, makeEnvironmentProviders, RendererFactory2 } from '@angular/core';
+import { outputFromObservable } from '@angular/core/rxjs-interop';
+import { createEvents, injectStore, NGT_CANVAS_CONTENT_FLAG, injectCanvasRootInitializer, is, NGT_STORE, storeFactory, NgtRendererFactory2 } from 'angular-three';
+import { provideResizeOptions, NgxResize } from 'ngxtension/resize';
+import { ɵDomRendererFactory2 as _DomRendererFactory2 } from '@angular/platform-browser';
+
+const DOM_EVENTS = {
+    click: false,
+    contextmenu: false,
+    dblclick: false,
+    wheel: false, // passive wheel errors with OrbitControls
+    pointerdown: true,
+    pointerup: true,
+    pointerleave: true,
+    pointermove: true,
+    pointercancel: true,
+    lostpointercapture: true,
+};
+const supportedEvents = [
+    'click',
+    'contextmenu',
+    'dblclick',
+    'pointerup',
+    'pointerdown',
+    'pointerover',
+    'pointerout',
+    'pointerenter',
+    'pointerleave',
+    'pointermove',
+    'pointermissed',
+    'pointercancel',
+    'wheel',
+];
+function createPointerEvents(store) {
+    const { handlePointer } = createEvents(store);
+    return {
+        priority: 1,
+        enabled: true,
+        compute: (event, root) => {
+            const state = root.snapshot;
+            // https://github.com/pmndrs/react-three-fiber/pull/782
+            // Events trigger outside of canvas when moved, use offsetX/Y by default and allow overrides
+            state.pointer.set((event.offsetX / state.size.width) * 2 - 1, -(event.offsetY / state.size.height) * 2 + 1);
+            state.raycaster.setFromCamera(state.pointer, state.camera);
+        },
+        connected: undefined,
+        handlers: Object.keys(DOM_EVENTS).reduce((handlers, supportedEventName) => {
+            handlers[supportedEventName] = handlePointer(supportedEventName);
+            return handlers;
+        }, {}),
+        update: () => {
+            const { events, internal } = store.snapshot;
+            if (internal.lastEvent?.nativeElement && events.handlers)
+                events.handlers.pointermove(internal.lastEvent.nativeElement);
+        },
+        connect: (target) => {
+            const state = store.snapshot;
+            state.events.disconnect?.();
+            state.setEvents({ connected: target });
+            Object.entries(state.events.handlers ?? {}).forEach(([eventName, eventHandler]) => {
+                const passive = DOM_EVENTS[eventName];
+                target.addEventListener(eventName, eventHandler, { passive });
+            });
+        },
+        disconnect: () => {
+            const { events, setEvents } = store.snapshot;
+            if (events.connected) {
+                Object.entries(events.handlers ?? {}).forEach(([eventName, eventHandler]) => {
+                    if (events.connected instanceof HTMLElement) {
+                        events.connected.removeEventListener(eventName, eventHandler);
+                    }
+                });
+                setEvents({ connected: undefined });
+            }
+        },
+    };
+}
+
+class NgtCanvasContent {
+    constructor() {
+        const store = injectStore();
+        const vcr = inject(ViewContainerRef);
+        const commentNode = vcr.element.nativeElement;
+        // NOTE: flag this canvasContent ng-template comment node as the start
+        commentNode.data = NGT_CANVAS_CONTENT_FLAG;
+        commentNode[NGT_CANVAS_CONTENT_FLAG] = store;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: NgtCanvasContent, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.6", type: NgtCanvasContent, isStandalone: true, selector: "ng-template[canvasContent]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: NgtCanvasContent, decorators: [{
+            type: Directive,
+            args: [{ selector: 'ng-template[canvasContent]' }]
+        }], ctorParameters: () => [] });
+class NgtCanvas {
+    constructor() {
+        this.store = injectStore();
+        this.initRoot = injectCanvasRootInitializer();
+        this.host = inject(ElementRef);
+        this.zone = inject(NgZone);
+        this.injector = inject(Injector);
+        this.gl = input();
+        this.size = input();
+        this.shadows = input(false, {
+            transform: (value) => {
+                if (value === '')
+                    return booleanAttribute(value);
+                return value;
+            },
+        });
+        this.legacy = input(false, { transform: booleanAttribute });
+        this.linear = input(false, { transform: booleanAttribute });
+        this.flat = input(false, { transform: booleanAttribute });
+        this.orthographic = input(false, { transform: booleanAttribute });
+        this.frameloop = input('always');
+        this.performance = input();
+        this.dpr = input([1, 2]);
+        this.raycaster = input();
+        this.scene = input();
+        this.camera = input();
+        this.events = input(createPointerEvents);
+        this.eventSource = input();
+        this.eventPrefix = input('offset');
+        this.lookAt = input();
+        this.created = output();
+        this.pointerMissed = outputFromObservable(this.store.snapshot.pointerMissed$);
+        this.glCanvas = viewChild.required('glCanvas');
+        this.glCanvasViewContainerRef = viewChild.required('glCanvas', { read: ViewContainerRef });
+        this.canvasContentRef = contentChild.required(NgtCanvasContent, { read: TemplateRef });
+        this.hbPointerEvents = computed(() => (this.eventSource() ? 'none' : 'auto'));
+        // NOTE: this signal is updated outside of Zone
+        this.resizeResult = signal({}, { equal: Object.is });
+        this.configurator = signal(null);
+        // NOTE: this means that everything in NgtCanvas will be in afterNextRender.
+        // this allows the content of NgtCanvas to use effect instead of afterNextRender
+        afterNextRender(() => {
+            const [canvasVcr, canvasElement, canvasContent] = [
+                this.glCanvasViewContainerRef(),
+                this.glCanvas().nativeElement,
+                this.canvasContentRef(),
+            ];
+            this.zone.runOutsideAngular(() => {
+                this.configurator.set(this.initRoot(canvasElement));
+            });
+            effect(() => {
+                const resizeResult = this.resizeResult();
+                if (!resizeResult.width || resizeResult.width <= 0 || !resizeResult.height || resizeResult.height <= 0)
+                    return;
+                const configurator = this.configurator();
+                if (!configurator)
+                    return;
+                const canvasOptions = {
+                    gl: this.gl(),
+                    shadows: this.shadows(),
+                    legacy: this.legacy(),
+                    linear: this.linear(),
+                    flat: this.flat(),
+                    orthographic: this.orthographic(),
+                    frameloop: this.frameloop(),
+                    performance: this.performance(),
+                    dpr: this.dpr(),
+                    raycaster: this.raycaster(),
+                    scene: this.scene(),
+                    camera: this.camera(),
+                    events: this.events(),
+                    eventSource: this.eventSource(),
+                    eventPrefix: this.eventPrefix(),
+                    lookAt: this.lookAt(),
+                    size: resizeResult,
+                };
+                this.zone.runOutsideAngular(() => {
+                    configurator.configure(canvasOptions);
+                    if (this.glRef) {
+                        this.glRef.detectChanges();
+                    }
+                    else {
+                        this.noZoneRender(canvasElement, canvasVcr, canvasContent);
+                    }
+                });
+            }, { injector: this.injector });
+        });
+        inject(DestroyRef).onDestroy(() => {
+            this.glRef?.destroy();
+            this.configurator()?.destroy();
+        });
+    }
+    noZoneRender(canvasElement, canvasVcr, canvasContent) {
+        // NOTE: destroy previous instances if existed
+        this.glRef?.destroy();
+        // NOTE: Flag the canvas active, rendering will now begin
+        this.store.update((state) => ({ internal: { ...state.internal, active: true } }));
+        const [state, eventSource, eventPrefix] = [
+            this.store.snapshot,
+            untracked(this.eventSource),
+            untracked(this.eventPrefix),
+        ];
+        // connect to event source
+        state.events.connect?.(eventSource ? (is.ref(eventSource) ? eventSource.nativeElement : eventSource) : this.host.nativeElement);
+        // setup compute for eventPrefix
+        if (eventPrefix) {
+            state.setEvents({
+                compute: (event, store) => {
+                    const { pointer, raycaster, camera, size } = store.snapshot;
+                    const x = event[(eventPrefix + 'X')];
+                    const y = event[(eventPrefix + 'Y')];
+                    pointer.set((x / size.width) * 2 - 1, -(y / size.height) * 2 + 1);
+                    raycaster.setFromCamera(pointer, camera);
+                },
+            });
+        }
+        this.created.emit(this.store.snapshot);
+        if (!this.store.snapshot.events.connected) {
+            this.store.snapshot.events.connect?.(canvasElement);
+        }
+        this.glRef = canvasVcr.createEmbeddedView(canvasContent, {}, { injector: this.injector });
+        this.glRef.detectChanges();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: NgtCanvas, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.0.6", type: NgtCanvas, isStandalone: true, selector: "ngt-canvas", inputs: { gl: { classPropertyName: "gl", publicName: "gl", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, shadows: { classPropertyName: "shadows", publicName: "shadows", isSignal: true, isRequired: false, transformFunction: null }, legacy: { classPropertyName: "legacy", publicName: "legacy", isSignal: true, isRequired: false, transformFunction: null }, linear: { classPropertyName: "linear", publicName: "linear", isSignal: true, isRequired: false, transformFunction: null }, flat: { classPropertyName: "flat", publicName: "flat", isSignal: true, isRequired: false, transformFunction: null }, orthographic: { classPropertyName: "orthographic", publicName: "orthographic", isSignal: true, isRequired: false, transformFunction: null }, frameloop: { classPropertyName: "frameloop", publicName: "frameloop", isSignal: true, isRequired: false, transformFunction: null }, performance: { classPropertyName: "performance", publicName: "performance", isSignal: true, isRequired: false, transformFunction: null }, dpr: { classPropertyName: "dpr", publicName: "dpr", isSignal: true, isRequired: false, transformFunction: null }, raycaster: { classPropertyName: "raycaster", publicName: "raycaster", isSignal: true, isRequired: false, transformFunction: null }, scene: { classPropertyName: "scene", publicName: "scene", isSignal: true, isRequired: false, transformFunction: null }, camera: { classPropertyName: "camera", publicName: "camera", isSignal: true, isRequired: false, transformFunction: null }, events: { classPropertyName: "events", publicName: "events", isSignal: true, isRequired: false, transformFunction: null }, eventSource: { classPropertyName: "eventSource", publicName: "eventSource", isSignal: true, isRequired: false, transformFunction: null }, eventPrefix: { classPropertyName: "eventPrefix", publicName: "eventPrefix", isSignal: true, isRequired: false, transformFunction: null }, lookAt: { classPropertyName: "lookAt", publicName: "lookAt", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { created: "created", pointerMissed: "pointerMissed" }, host: { attributes: { "ngSkipHydration": "true" }, properties: { "style.pointerEvents": "hbPointerEvents()" }, styleAttribute: "display: block;position: relative;width: 100%;height: 100%;overflow: hidden;" }, providers: [
+            provideResizeOptions({
+                emitInZone: false,
+                emitInitialResult: true,
+                debounce: { scroll: 50, resize: 0 },
+            }),
+            { provide: NGT_STORE, useFactory: storeFactory },
+        ], queries: [{ propertyName: "canvasContentRef", first: true, predicate: NgtCanvasContent, descendants: true, read: TemplateRef, isSignal: true }], viewQueries: [{ propertyName: "glCanvas", first: true, predicate: ["glCanvas"], descendants: true, isSignal: true }, { propertyName: "glCanvasViewContainerRef", first: true, predicate: ["glCanvas"], descendants: true, read: ViewContainerRef, isSignal: true }], ngImport: i0, template: `
+		<div (ngxResize)="resizeResult.set($event)" style="height: 100%; width: 100%;">
+			<canvas #glCanvas style="display: block;"></canvas>
+			<ng-content />
+		</div>
+	`, isInline: true, dependencies: [{ kind: "directive", type: NgxResize, selector: "[ngxResize]", inputs: ["ngxResizeOptions"], outputs: ["ngxResize"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: NgtCanvas, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ngt-canvas',
+                    template: `
+		<div (ngxResize)="resizeResult.set($event)" style="height: 100%; width: 100%;">
+			<canvas #glCanvas style="display: block;"></canvas>
+			<ng-content />
+		</div>
+	`,
+                    imports: [NgxResize],
+                    providers: [
+                        provideResizeOptions({
+                            emitInZone: false,
+                            emitInitialResult: true,
+                            debounce: { scroll: 50, resize: 0 },
+                        }),
+                        { provide: NGT_STORE, useFactory: storeFactory },
+                    ],
+                    host: {
+                        style: 'display: block;position: relative;width: 100%;height: 100%;overflow: hidden;',
+                        '[style.pointerEvents]': 'hbPointerEvents()',
+                        ngSkipHydration: 'true',
+                    },
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], ctorParameters: () => [] });
+const NgtCanvasDeclarations = [NgtCanvas, NgtCanvasContent];
+
+function provideNgtRenderer() {
+    return makeEnvironmentProviders([
+        {
+            provide: RendererFactory2,
+            useFactory: (domRendererFactory) => new NgtRendererFactory2(domRendererFactory),
+            deps: [_DomRendererFactory2],
+        },
+    ]);
+}
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { NgtCanvas, NgtCanvasContent, NgtCanvasDeclarations, provideNgtRenderer };
+//# sourceMappingURL=angular-three-dom.mjs.map

package/fesm2022/angular-three-dom.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"angular-three-dom.mjs","sources":["../../../../libs/core/dom/src/lib/events.ts","../../../../libs/core/dom/src/lib/canvas.ts","../../../../libs/core/dom/src/lib/renderer.ts","../../../../libs/core/dom/src/angular-three-dom.ts"],"sourcesContent":["import {\n\tcreateEvents,\n\tNgtAnyRecord,\n\tNgtDomEvent,\n\tNgtEventManager,\n\tNgtEvents,\n\tNgtState,\n\tSignalState,\n} from 'angular-three';\n\nconst DOM_EVENTS = {\n\tclick: false,\n\tcontextmenu: false,\n\tdblclick: false,\n\twheel: false, // passive wheel errors with OrbitControls\n\tpointerdown: true,\n\tpointerup: true,\n\tpointerleave: true,\n\tpointermove: true,\n\tpointercancel: true,\n\tlostpointercapture: true,\n} as const;\n\nexport const supportedEvents = [\n\t'click',\n\t'contextmenu',\n\t'dblclick',\n\t'pointerup',\n\t'pointerdown',\n\t'pointerover',\n\t'pointerout',\n\t'pointerenter',\n\t'pointerleave',\n\t'pointermove',\n\t'pointermissed',\n\t'pointercancel',\n\t'wheel',\n] as const;\n\nexport function createPointerEvents(store: SignalState<NgtState>): NgtEventManager<HTMLElement> {\n\tconst { handlePointer } = createEvents(store);\n\n\treturn {\n\t\tpriority: 1,\n\t\tenabled: true,\n\t\tcompute: (event: NgtDomEvent, root: SignalState<NgtState>) => {\n\t\t\tconst state = root.snapshot;\n\t\t\t// https://github.com/pmndrs/react-three-fiber/pull/782\n\t\t\t// Events trigger outside of canvas when moved, use offsetX/Y by default and allow overrides\n\t\t\tstate.pointer.set((event.offsetX / state.size.width) * 2 - 1, -(event.offsetY / state.size.height) * 2 + 1);\n\t\t\tstate.raycaster.setFromCamera(state.pointer, state.camera);\n\t\t},\n\t\tconnected: undefined,\n\t\thandlers: Object.keys(DOM_EVENTS).reduce((handlers: NgtAnyRecord, supportedEventName) => {\n\t\t\thandlers[supportedEventName] = handlePointer(supportedEventName);\n\t\t\treturn handlers;\n\t\t}, {}) as NgtEvents,\n\t\tupdate: () => {\n\t\t\tconst { events, internal } = store.snapshot;\n\t\t\tif (internal.lastEvent?.nativeElement && events.handlers)\n\t\t\t\tevents.handlers.pointermove(internal.lastEvent.nativeElement);\n\t\t},\n\t\tconnect: (target: HTMLElement) => {\n\t\t\tconst state = store.snapshot;\n\t\t\tstate.events.disconnect?.();\n\n\t\t\tstate.setEvents({ connected: target });\n\n\t\t\tObject.entries(state.events.handlers ?? {}).forEach(([eventName, eventHandler]: [string, EventListener]) => {\n\t\t\t\tconst passive = DOM_EVENTS[eventName as keyof typeof DOM_EVENTS];\n\t\t\t\ttarget.addEventListener(eventName, eventHandler, { passive });\n\t\t\t});\n\t\t},\n\t\tdisconnect: () => {\n\t\t\tconst { events, setEvents } = store.snapshot;\n\t\t\tif (events.connected) {\n\t\t\t\tObject.entries(events.handlers ?? {}).forEach(([eventName, eventHandler]: [string, EventListener]) => {\n\t\t\t\t\tif (events.connected instanceof HTMLElement) {\n\t\t\t\t\t\tevents.connected.removeEventListener(eventName, eventHandler);\n\t\t\t\t\t}\n\t\t\t\t});\n\n\t\t\t\tsetEvents({ connected: undefined });\n\t\t\t}\n\t\t},\n\t};\n}\n","import {\n\tafterNextRender,\n\tbooleanAttribute,\n\tChangeDetectionStrategy,\n\tComponent,\n\tcomputed,\n\tcontentChild,\n\tDestroyRef,\n\tDirective,\n\teffect,\n\tElementRef,\n\tEmbeddedViewRef,\n\tinject,\n\tInjector,\n\tinput,\n\tNgZone,\n\toutput,\n\tsignal,\n\tTemplateRef,\n\tuntracked,\n\tviewChild,\n\tViewContainerRef,\n} from '@angular/core';\nimport { outputFromObservable } from '@angular/core/rxjs-interop';\nimport {\n\tinjectCanvasRootInitializer,\n\tinjectStore,\n\tis,\n\tNGT_CANVAS_CONTENT_FLAG,\n\tNGT_STORE,\n\tNgtCamera,\n\tNgtCameraParameters,\n\tNgtCanvasConfigurator,\n\tNgtDomEvent,\n\tNgtDpr,\n\tNgtEventPrefix,\n\tNgtFrameloop,\n\tNgtGLOptions,\n\tNgtPerformance,\n\tNgtShadows,\n\tNgtSize,\n\tNgtState,\n\tNgtVector3,\n\tstoreFactory,\n} from 'angular-three';\nimport { NgxResize, provideResizeOptions, ResizeOptions, ResizeResult } from 'ngxtension/resize';\nimport * as THREE from 'three';\nimport { createPointerEvents } from './events';\n\n@Directive({ selector: 'ng-template[canvasContent]' })\nexport class NgtCanvasContent {\n\tconstructor() {\n\t\tconst store = injectStore();\n\t\tconst vcr = inject(ViewContainerRef);\n\t\tconst commentNode = vcr.element.nativeElement;\n\n\t\t// NOTE: flag this canvasContent ng-template comment node as the start\n\t\tcommentNode.data = NGT_CANVAS_CONTENT_FLAG;\n\t\tcommentNode[NGT_CANVAS_CONTENT_FLAG] = store;\n\t}\n}\n\n@Component({\n\tselector: 'ngt-canvas',\n\ttemplate: `\n\t\t<div (ngxResize)=\"resizeResult.set($event)\" style=\"height: 100%; width: 100%;\">\n\t\t\t<canvas #glCanvas style=\"display: block;\"></canvas>\n\t\t\t<ng-content />\n\t\t</div>\n\t`,\n\timports: [NgxResize],\n\tproviders: [\n\t\tprovideResizeOptions({\n\t\t\temitInZone: false,\n\t\t\temitInitialResult: true,\n\t\t\tdebounce: { scroll: 50, resize: 0 },\n\t\t} as ResizeOptions),\n\t\t{ provide: NGT_STORE, useFactory: storeFactory },\n\t],\n\thost: {\n\t\tstyle: 'display: block;position: relative;width: 100%;height: 100%;overflow: hidden;',\n\t\t'[style.pointerEvents]': 'hbPointerEvents()',\n\t\tngSkipHydration: 'true',\n\t},\n\tchangeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class NgtCanvas {\n\tprivate store = injectStore();\n\tprivate initRoot = injectCanvasRootInitializer();\n\n\tprivate host = inject<ElementRef<HTMLElement>>(ElementRef);\n\tprivate zone = inject(NgZone);\n\tprivate injector = inject(Injector);\n\n\tgl = input<NgtGLOptions>();\n\tsize = input<NgtSize>();\n\tshadows = input(false, {\n\t\ttransform: (value) => {\n\t\t\tif (value === '') return booleanAttribute(value);\n\t\t\treturn value as NgtShadows;\n\t\t},\n\t});\n\tlegacy = input(false, { transform: booleanAttribute });\n\tlinear = input(false, { transform: booleanAttribute });\n\tflat = input(false, { transform: booleanAttribute });\n\torthographic = input(false, { transform: booleanAttribute });\n\tframeloop = input<NgtFrameloop>('always');\n\tperformance = input<Partial<Omit<NgtPerformance, 'regress'>>>();\n\tdpr = input<NgtDpr>([1, 2]);\n\traycaster = input<Partial<THREE.Raycaster>>();\n\tscene = input<THREE.Scene | Partial<THREE.Scene>>();\n\tcamera = input<NgtCamera | NgtCameraParameters>();\n\tevents = input(createPointerEvents);\n\teventSource = input<HTMLElement | ElementRef<HTMLElement>>();\n\teventPrefix = input<NgtEventPrefix>('offset');\n\tlookAt = input<NgtVector3>();\n\n\tcreated = output<NgtState>();\n\tpointerMissed = outputFromObservable(this.store.snapshot.pointerMissed$);\n\n\tprivate glCanvas = viewChild.required<ElementRef<HTMLCanvasElement>>('glCanvas');\n\tprivate glCanvasViewContainerRef = viewChild.required('glCanvas', { read: ViewContainerRef });\n\tprivate canvasContentRef = contentChild.required(NgtCanvasContent, { read: TemplateRef });\n\n\tprotected hbPointerEvents = computed(() => (this.eventSource() ? 'none' : 'auto'));\n\n\t// NOTE: this signal is updated outside of Zone\n\tprotected resizeResult = signal<ResizeResult>({} as ResizeResult, { equal: Object.is });\n\tprivate configurator = signal<NgtCanvasConfigurator | null>(null);\n\n\tprivate glRef?: EmbeddedViewRef<unknown>;\n\n\tconstructor() {\n\t\t// NOTE: this means that everything in NgtCanvas will be in afterNextRender.\n\t\t// this allows the content of NgtCanvas to use effect instead of afterNextRender\n\t\tafterNextRender(() => {\n\t\t\tconst [canvasVcr, canvasElement, canvasContent] = [\n\t\t\t\tthis.glCanvasViewContainerRef(),\n\t\t\t\tthis.glCanvas().nativeElement,\n\t\t\t\tthis.canvasContentRef(),\n\t\t\t];\n\n\t\t\tthis.zone.runOutsideAngular(() => {\n\t\t\t\tthis.configurator.set(this.initRoot(canvasElement));\n\t\t\t});\n\n\t\t\teffect(\n\t\t\t\t() => {\n\t\t\t\t\tconst resizeResult = this.resizeResult();\n\t\t\t\t\tif (!resizeResult.width || resizeResult.width <= 0 || !resizeResult.height || resizeResult.height <= 0)\n\t\t\t\t\t\treturn;\n\n\t\t\t\t\tconst configurator = this.configurator();\n\t\t\t\t\tif (!configurator) return;\n\n\t\t\t\t\tconst canvasOptions = {\n\t\t\t\t\t\tgl: this.gl(),\n\t\t\t\t\t\tshadows: this.shadows(),\n\t\t\t\t\t\tlegacy: this.legacy(),\n\t\t\t\t\t\tlinear: this.linear(),\n\t\t\t\t\t\tflat: this.flat(),\n\t\t\t\t\t\torthographic: this.orthographic(),\n\t\t\t\t\t\tframeloop: this.frameloop(),\n\t\t\t\t\t\tperformance: this.performance(),\n\t\t\t\t\t\tdpr: this.dpr(),\n\t\t\t\t\t\traycaster: this.raycaster(),\n\t\t\t\t\t\tscene: this.scene(),\n\t\t\t\t\t\tcamera: this.camera(),\n\t\t\t\t\t\tevents: this.events(),\n\t\t\t\t\t\teventSource: this.eventSource(),\n\t\t\t\t\t\teventPrefix: this.eventPrefix(),\n\t\t\t\t\t\tlookAt: this.lookAt(),\n\t\t\t\t\t\tsize: resizeResult,\n\t\t\t\t\t};\n\n\t\t\t\t\tthis.zone.runOutsideAngular(() => {\n\t\t\t\t\t\tconfigurator.configure(canvasOptions);\n\n\t\t\t\t\t\tif (this.glRef) {\n\t\t\t\t\t\t\tthis.glRef.detectChanges();\n\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\tthis.noZoneRender(canvasElement, canvasVcr, canvasContent);\n\t\t\t\t\t\t}\n\t\t\t\t\t});\n\t\t\t\t},\n\t\t\t\t{ injector: this.injector },\n\t\t\t);\n\t\t});\n\n\t\tinject(DestroyRef).onDestroy(() => {\n\t\t\tthis.glRef?.destroy();\n\t\t\tthis.configurator()?.destroy();\n\t\t});\n\t}\n\n\tprivate noZoneRender(\n\t\tcanvasElement: HTMLCanvasElement,\n\t\tcanvasVcr: ViewContainerRef,\n\t\tcanvasContent: TemplateRef<unknown>,\n\t) {\n\t\t// NOTE: destroy previous instances if existed\n\t\tthis.glRef?.destroy();\n\n\t\t// NOTE: Flag the canvas active, rendering will now begin\n\t\tthis.store.update((state) => ({ internal: { ...state.internal, active: true } }));\n\n\t\tconst [state, eventSource, eventPrefix] = [\n\t\t\tthis.store.snapshot,\n\t\t\tuntracked(this.eventSource),\n\t\t\tuntracked(this.eventPrefix),\n\t\t];\n\n\t\t// connect to event source\n\t\tstate.events.connect?.(\n\t\t\teventSource ? (is.ref(eventSource) ? eventSource.nativeElement : eventSource) : this.host.nativeElement,\n\t\t);\n\n\t\t// setup compute for eventPrefix\n\t\tif (eventPrefix) {\n\t\t\tstate.setEvents({\n\t\t\t\tcompute: (event, store) => {\n\t\t\t\t\tconst { pointer, raycaster, camera, size } = store.snapshot;\n\t\t\t\t\tconst x = event[(eventPrefix + 'X') as keyof NgtDomEvent] as number;\n\t\t\t\t\tconst y = event[(eventPrefix + 'Y') as keyof NgtDomEvent] as number;\n\t\t\t\t\tpointer.set((x / size.width) * 2 - 1, -(y / size.height) * 2 + 1);\n\t\t\t\t\traycaster.setFromCamera(pointer, camera);\n\t\t\t\t},\n\t\t\t});\n\t\t}\n\n\t\tthis.created.emit(this.store.snapshot);\n\n\t\tif (!this.store.snapshot.events.connected) {\n\t\t\tthis.store.snapshot.events.connect?.(canvasElement);\n\t\t}\n\n\t\tthis.glRef = canvasVcr.createEmbeddedView(canvasContent, {}, { injector: this.injector });\n\t\tthis.glRef.detectChanges();\n\t}\n}\n\nexport const NgtCanvasDeclarations = [NgtCanvas, NgtCanvasContent] as const;\n","import { makeEnvironmentProviders, RendererFactory2 } from '@angular/core';\nimport { ɵDomRendererFactory2 as DomRendererFactory2 } from '@angular/platform-browser';\nimport { NgtRendererFactory2 } from 'angular-three';\n\nexport function provideNgtRenderer() {\n\treturn makeEnvironmentProviders([\n\t\t{\n\t\t\tprovide: RendererFactory2,\n\t\t\tuseFactory: (domRendererFactory: RendererFactory2) => new NgtRendererFactory2(domRendererFactory),\n\t\t\tdeps: [DomRendererFactory2],\n\t\t},\n\t]);\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":["DomRendererFactory2"],"mappings":"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"}

package/fesm2022/angular-three-testing.mjs

@@ -1,44 +1,54 @@
 import * as i0 from '@angular/core';
-import { input, inject, ViewContainerRef, EnvironmentInjector, Injector, afterNextRender, effect, createEnvironmentInjector, DestroyRef, Component, ChangeDetectionStrategy, provideEnvironmentInitializer, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { input, viewChild, ViewContainerRef, effect, inject, DestroyRef, Component, ChangeDetectionStrategy, RendererFactory2, provideEnvironmentInitializer, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import { TestBed } from '@angular/core/testing';
-import { extend, injectStore, provideNgtRenderer, provideStore, injectCanvasRootInitializer, NGT_STORE, getLocalState } from 'angular-three';
+import { ɵDomRendererFactory2 as _DomRendererFactory2 } from '@angular/platform-browser';
+import { injectStore, extend, NGT_CANVAS_CONTENT_FLAG, NGT_RENDERER_NODE_FLAG, NgtRendererFactory2, NGT_STORE, storeFactory, injectCanvasRootInitializer, getInstanceState } from 'angular-three';
 import * as THREE from 'three';
 
 class NgtTestCanvas {
     constructor() {
         this.sceneGraph = input.required();
+        this.sceneGraphInputs = input({});
+        this.anchorRef = viewChild.required('anchor', { read: ViewContainerRef });
+        this.store = injectStore();
         extend(THREE);
-        const vcr = inject(ViewContainerRef);
-        const parentEnvironmentInjector = inject(EnvironmentInjector);
-        const parentInjector = inject(Injector);
-        const store = injectStore();
-        afterNextRender(() => {
-            effect(() => {
-                const sceneGraph = this.sceneGraph();
-                this.environmentInjector = createEnvironmentInjector([provideNgtRenderer(store)], parentEnvironmentInjector);
-                this.ref = vcr.createComponent(sceneGraph, {
-                    environmentInjector: this.environmentInjector,
-                    injector: parentInjector,
-                });
-                this.ref.changeDetectorRef.detectChanges();
-            }, { injector: parentInjector });
+        effect(() => {
+            const anchor = this.anchorRef();
+            const sceneGraph = this.sceneGraph();
+            if (!sceneGraph)
+                return;
+            const sceneGraphInputs = this.sceneGraphInputs();
+            const anchorComment = anchor.element.nativeElement;
+            anchorComment.data = NGT_CANVAS_CONTENT_FLAG;
+            anchorComment[NGT_CANVAS_CONTENT_FLAG] = this.store;
+            if (anchorComment[NGT_RENDERER_NODE_FLAG]) {
+                anchorComment[NGT_RENDERER_NODE_FLAG][5] = this.store.snapshot.scene;
+            }
+            this.sceneRef = anchor.createComponent(sceneGraph);
+            for (const key in sceneGraphInputs) {
+                this.sceneRef.setInput(key, sceneGraphInputs[key]);
+            }
+            this.sceneRef.changeDetectorRef.detectChanges();
         });
         inject(DestroyRef).onDestroy(() => {
             this.destroy();
         });
     }
     destroy() {
-        this.environmentInjector?.destroy();
-        this.ref?.destroy();
+        this.sceneRef?.destroy();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: NgtTestCanvas, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.6", type: NgtTestCanvas, isStandalone: true, selector: "ngt-test-canvas", inputs: { sceneGraph: { classPropertyName: "sceneGraph", publicName: "sceneGraph", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.0.6", type: NgtTestCanvas, isStandalone: true, selector: "ngt-test-canvas", inputs: { sceneGraph: { classPropertyName: "sceneGraph", publicName: "sceneGraph", isSignal: true, isRequired: true, transformFunction: null }, sceneGraphInputs: { classPropertyName: "sceneGraphInputs", publicName: "sceneGraphInputs", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "anchorRef", first: true, predicate: ["anchor"], descendants: true, read: ViewContainerRef, isSignal: true }], ngImport: i0, template: `
+		<ng-container #anchor />
+	`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: NgtTestCanvas, decorators: [{
             type: Component,
             args: [{
                     selector: 'ngt-test-canvas',
-                    template: '',
+                    template: `
+		<ng-container #anchor />
+	`,
                     changeDetection: ChangeDetectionStrategy.OnPush,
                 }]
         }], ctorParameters: () => [] });
@@ -832,17 +842,24 @@ function createMockCanvas({ width = 1280, height = 800, beforeReturn, }) {
 }
 
 class NgtTestBed {
-    static create(sceneGraph, { mockCanvasOptions = {}, canvasConfiguration = {}, errorOnUnknownElements, providers, declarations, imports, teardown, deferBlockBehavior, } = {}) {
+    static create(sceneGraph, { sceneGraphInputs = {}, mockCanvasOptions = {}, canvasConfiguration = {}, errorOnUnknownElements, providers, declarations, imports, teardown, deferBlockBehavior, } = {}) {
         const mockedCanvas = createMockCanvas(mockCanvasOptions);
         const fixture = TestBed.configureTestingModule({
             providers: [
-                provideStore(),
+                {
+                    provide: RendererFactory2,
+                    useFactory: (delegate) => new NgtRendererFactory2(delegate),
+                    deps: [_DomRendererFactory2],
+                },
+                { provide: NGT_STORE, useFactory: storeFactory },
                 provideEnvironmentInitializer(() => {
                     const initializerFn = (() => {
                         const initRoot = injectCanvasRootInitializer();
                         return () => {
                             const configurator = initRoot(mockedCanvas);
                             configurator.configure({
+                                ...canvasConfiguration,
+                                events: undefined,
                                 frameloop: 'never',
                                 size: {
                                     width: mockCanvasOptions.width ?? mockedCanvas.width ?? 1280,
@@ -850,8 +867,6 @@ class NgtTestBed {
                                     top: 0,
                                     left: 0,
                                 },
-                                ...canvasConfiguration,
-                                events: undefined,
                             });
                         };
                     })();
@@ -867,14 +882,16 @@ class NgtTestBed {
             deferBlockBehavior,
         }).createComponent(NgtTestCanvas);
         fixture.componentRef.setInput('sceneGraph', sceneGraph);
+        fixture.componentRef.setInput('sceneGraphInputs', sceneGraphInputs);
         fixture.detectChanges();
         const store = TestBed.inject(NGT_STORE);
         TestBed.flushEffects();
         return {
             store,
             fixture,
+            sceneGraphComponentRef: fixture.componentInstance.sceneRef,
             scene: store.snapshot.scene,
-            sceneInstanceNode: getLocalState(store.snapshot.scene),
+            sceneInstanceNode: getInstanceState(store.snapshot.scene),
             canvas: mockedCanvas,
             destroy: fixture.componentInstance.destroy.bind(fixture.componentInstance),
             fireEvent: this.createEventFirer(store, fixture),
@@ -921,12 +938,12 @@ class NgtTestBed {
     static createEventFirer(store, fixture) {
         let autoDetectChanges = true;
         async function fireEvent(el, eventName, eventData = {}) {
-            const localState = getLocalState(el);
-            if (!localState) {
+            const instanceState = getInstanceState(el);
+            if (!instanceState) {
                 console.warn(`[NGT Test] ${el} has no local state`);
                 return;
             }
-            const handler = localState.handlers[eventName];
+            const handler = instanceState.handlers[eventName];
             if (!handler) {
                 console.warn(`[NGT Test] ${el} has no ${eventName} handler`);
                 return;