add first iteration of NgtTestBed

Author: nartc

libs/core/package.json

@@ -56,5 +56,8 @@
 			"angular-three-rapier"
 		]
 	},
-	"web-types": "./web-types.json"
+	"web-types": [
+    "./web-types.json",
+    "../../node_modules/angular-three/web-types.json"
+  ]
 }

libs/core/project.json

@@ -64,7 +64,7 @@
 			"executor": "@nx/jest:jest",
 			"outputs": ["{workspaceRoot}/coverage/{projectRoot}"],
 			"options": {
-				"jestConfig": "libs/core/jest.config.mts"
+				"jestConfig": "libs/core/jest.config.ts"
 			}
 		},
 		"lint": {

libs/core/src/index.ts

@@ -1,13 +1,13 @@
 export * from './lib/canvas';
-export * from './lib/canvas-handler';
 export * from './lib/directives/args';
-export { NgtCamera, NgtComputeFunction, NgtDomEvent, NgtThreeEvent } from './lib/events';
+export { NgtCamera, NgtComputeFunction, NgtDomEvent, NgtEventHandlers, NgtThreeEvent } from './lib/events';
 export * from './lib/html';
 export * from './lib/instance';
 export * from './lib/loader';
 export { addAfterEffect, addEffect, addTail } from './lib/loop';
 export { NgtPortal, NgtPortalContent } from './lib/portal';
 export * from './lib/renderer';
+export { injectCanvasRootInitializer } from './lib/roots';
 export * from './lib/routed-scene';
 export * from './lib/store';
 export * from './lib/utils/apply-props';

libs/core/src/lib/canvas-handler.ts

@@ -1,17 +1,115 @@
 import {
+	afterNextRender,
+	booleanAttribute,
 	ChangeDetectionStrategy,
 	Component,
-	afterNextRender,
+	ComponentRef,
+	computed,
 	createEnvironmentInjector,
+	DestroyRef,
+	ElementRef,
+	EnvironmentInjector,
+	inject,
+	Injector,
+	input,
+	NgZone,
+	output,
 	signal,
+	Type,
 	untracked,
+	viewChild,
+	ViewContainerRef,
 } from '@angular/core';
-import { NgxResize, ResizeOptions, ResizeResult, provideResizeOptions } from 'ngxtension/resize';
-import { NgtCanvasHandler } from './canvas-handler';
-import { NgtDomEvent } from './events';
+import { outputFromObservable } from '@angular/core/rxjs-interop';
+import { injectAutoEffect } from 'ngxtension/auto-effect';
+import { NgxResize, provideResizeOptions, ResizeOptions, ResizeResult } from 'ngxtension/resize';
+import {
+	Camera,
+	OrthographicCamera,
+	PerspectiveCamera,
+	Raycaster,
+	Scene,
+	Vector3,
+	WebGLRenderer,
+	WebGLRendererParameters,
+	WebGLShadowMap,
+} from 'three';
+import { createPointerEvents } from './dom/events';
+import { NgtCamera, NgtDomEvent, NgtEventManager } from './events';
 import { provideNgtRenderer } from './renderer';
-import { provideStore } from './store';
+import { injectCanvasRootInitializer, NgtCanvasConfigurator, NgtCanvasElement } from './roots';
+import { NgtRoutedScene } from './routed-scene';
+import { injectStore, NgtDpr, NgtPerformance, NgtRendererLike, NgtSize, NgtState, provideStore } from './store';
+import { NgtObject3DNode } from './three-types';
+import { NgtProperties } from './types';
 import { is } from './utils/is';
+import { NgtSignalStore } from './utils/signal-store';
+
+export type NgtGLOptions =
+	| NgtRendererLike
+	| ((canvas: NgtCanvasElement) => NgtRendererLike)
+	| Partial<NgtProperties<WebGLRenderer> | WebGLRendererParameters>
+	| undefined;
+
+export interface NgtCanvasOptions {
+	/** A threejs renderer instance or props that go into the default renderer */
+	gl?: NgtGLOptions;
+	/** Dimensions to fit the renderer to. Will measure canvas dimensions if omitted */
+	size?: NgtSize;
+	/**
+	 * Enables shadows (by default PCFsoft). Can accept `gl.shadowMap` options for fine-tuning,
+	 * but also strings: 'basic' | 'percentage' | 'soft' | 'variance'.
+	 * @see https://threejs.org/docs/#api/en/renderers/WebGLRenderer.shadowMap
+	 */
+	shadows?: boolean | 'basic' | 'percentage' | 'soft' | 'variance' | Partial<WebGLShadowMap>;
+	/**
+	 * Disables three r139 color management.
+	 * @see https://threejs.org/docs/#manual/en/introduction/Color-management
+	 */
+	legacy?: boolean;
+	/** Switch off automatic sRGB color space and gamma correction */
+	linear?: boolean;
+	/** Use `THREE.NoToneMapping` instead of `THREE.ACESFilmicToneMapping` */
+	flat?: boolean;
+	/** Creates an orthographic camera */
+	orthographic?: boolean;
+	/**
+	 * R3F's render mode. Set to `demand` to only render on state change or `never` to take control.
+	 * @see https://docs.pmnd.rs/react-three-fiber/advanced/scaling-performance#on-demand-rendering
+	 */
+	frameloop?: 'always' | 'demand' | 'never';
+	/**
+	 * R3F performance options for adaptive performance.
+	 * @see https://docs.pmnd.rs/react-three-fiber/advanced/scaling-performance#movement-regression
+	 */
+	performance?: Partial<Omit<NgtPerformance, 'regress'>>;
+	/** Target pixel ratio. Can clamp between a range: `[min, max]` */
+	dpr?: NgtDpr;
+	/** Props that go into the default raycaster */
+	raycaster?: Partial<Raycaster>;
+	/** A `Scene` instance or props that go into the default scene */
+	scene?: Scene | Partial<Scene>;
+	/** A `Camera` instance or props that go into the default camera */
+	camera?: (
+		| NgtCamera
+		| Partial<
+				NgtObject3DNode<Camera, typeof Camera> &
+					NgtObject3DNode<PerspectiveCamera, typeof PerspectiveCamera> &
+					NgtObject3DNode<OrthographicCamera, typeof OrthographicCamera>
+		  >
+	) & {
+		/** Flags the camera as manual, putting projection into your own hands */
+		manual?: boolean;
+	};
+	/** An R3F event manager to manage elements' pointer events */
+	events?: (store: NgtSignalStore<NgtState>) => NgtEventManager<HTMLElement>;
+	/** The target where events are being subscribed to, default: the div that wraps canvas */
+	eventSource?: HTMLElement | ElementRef<HTMLElement>;
+	/** The event prefix that is cast into canvas pointer x/y events, default: "offset" */
+	eventPrefix?: 'offset' | 'client' | 'page' | 'layer' | 'screen';
+	/** Default coordinate for the camera to look at */
+	lookAt?: Vector3 | Parameters<Vector3['set']>;
+}
 
 @Component({
 	selector: 'ngt-canvas',
@@ -36,18 +134,73 @@ import { is } from './utils/is';
 	},
 	changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class NgtCanvas extends NgtCanvasHandler {
+export class NgtCanvas {
+	private store = injectStore();
+	private initRoot = injectCanvasRootInitializer();
+	private autoEffect = injectAutoEffect();
+
+	private host = inject<ElementRef<HTMLElement>>(ElementRef);
+	private viewContainerRef = inject(ViewContainerRef);
+	private zone = inject(NgZone);
+	private environmentInjector = inject(EnvironmentInjector);
+	private injector = inject(Injector);
+
+	sceneGraph = input.required<Type<any>, Type<any> | 'routed'>({
+		transform: (value) => {
+			if (value === 'routed') return NgtRoutedScene;
+			return value;
+		},
+	});
+	gl = input<NgtGLOptions>();
+	size = input<NgtSize>();
+	shadows = input(false, {
+		transform: (value) => {
+			if (value === '') return booleanAttribute(value);
+			return value as NonNullable<NgtCanvasOptions['shadows']>;
+		},
+	});
+	legacy = input(false, { transform: booleanAttribute });
+	linear = input(false, { transform: booleanAttribute });
+	flat = input(false, { transform: booleanAttribute });
+	orthographic = input(false, { transform: booleanAttribute });
+	frameloop = input<NonNullable<NgtCanvasOptions['frameloop']>>('always');
+	performance = input<Partial<Omit<NgtPerformance, 'regress'>>>();
+	dpr = input<NgtDpr>([1, 2]);
+	raycaster = input<Partial<Raycaster>>();
+	scene = input<Scene | Partial<Scene>>();
+	camera = input<NonNullable<NgtCanvasOptions['camera']>>();
+	events = input(createPointerEvents);
+	eventSource = input<HTMLElement | ElementRef<HTMLElement>>();
+	eventPrefix = input<NonNullable<NgtCanvasOptions['eventPrefix']>>('offset');
+	lookAt = input<Vector3 | Parameters<Vector3['set']>>();
+	created = output<NgtState>();
+	pointerMissed = outputFromObservable(this.store.get('pointerMissed$'));
+
+	glCanvas = viewChild.required<ElementRef<HTMLCanvasElement>>('glCanvas');
+	glCanvasViewContainerRef = viewChild.required('glCanvas', { read: ViewContainerRef });
+
+	protected hbPointerEvents = computed(() => (this.eventSource() ? 'none' : 'auto'));
+
 	// NOTE: this signal is updated outside of Zone
 	protected resizeResult = signal<ResizeResult>({} as ResizeResult, { equal: Object.is });
 
+	private configurator?: NgtCanvasConfigurator;
+	private glEnvironmentInjector?: EnvironmentInjector;
+	private glRef?: ComponentRef<unknown>;
+
 	constructor() {
-		super();
 		afterNextRender(() => {
 			this.zone.runOutsideAngular(() => {
 				this.configurator = this.initRoot(this.glCanvas().nativeElement);
 				this.noZoneResizeEffect();
 			});
 		});
+
+		inject(DestroyRef).onDestroy(() => {
+			this.glRef?.destroy();
+			this.glEnvironmentInjector?.destroy();
+			this.configurator?.destroy();
+		});
 	}
 
 	private noZoneResizeEffect() {