chore(core): testing new renderer

Author: nartc

apps/kitchen-sink-new/src/app/app.config.ts

@@ -1,6 +1,6 @@
 import { ApplicationConfig, provideExperimentalZonelessChangeDetection } from '@angular/core';
 import { provideRouter, withComponentInputBinding } from '@angular/router';
-import { provideNgtRenderer } from 'angular-three';
+import { provideNgtRenderer } from 'angular-three/dom';
 import { appRoutes } from './app.routes';
 
 export const appConfig: ApplicationConfig = {

apps/kitchen-sink-new/src/app/app.routes.ts

@@ -31,12 +31,12 @@ export const appRoutes: Route[] = [
 		loadChildren: () => import('./misc/misc.routes'),
 		title: 'Misc - Angular Three Demo',
 	},
-	// {
-	// 	path: 'routed',
-	// 	loadComponent: () => import('./routed/routed'),
-	// 	loadChildren: () => import('./routed/routed.routes'),
-	// 	title: 'Routed - Angular Three Demo',
-	// },
+	{
+		path: 'routed',
+		loadComponent: () => import('./routed/routed'),
+		loadChildren: () => import('./routed/routed.routes'),
+		title: 'Routed - Angular Three Demo',
+	},
 	// {
 	// 	path: 'routed-rocks',
 	// 	loadComponent: () => import('./routed-rocks/routed-rocks'),

apps/kitchen-sink-new/src/app/misc/basic/basic.ts

@@ -1,5 +1,5 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core';
-import { NgtCanvasDeclarations } from 'angular-three';
+import { NgtCanvasDeclarations } from 'angular-three/dom';
 import { Scene } from './scene';
 
 @Component({

apps/kitchen-sink-new/src/app/routed/blue.ts

@@ -0,0 +1,25 @@
+import { ChangeDetectionStrategy, Component, CUSTOM_ELEMENTS_SCHEMA, ElementRef, viewChild } from '@angular/core';
+import { injectBeforeRender } from 'angular-three';
+import * as THREE from 'three';
+
+@Component({
+	template: `
+		<ngt-mesh #mesh>
+			<ngt-box-geometry />
+			<ngt-mesh-basic-material color="blue" />
+		</ngt-mesh>
+	`,
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	schemas: [CUSTOM_ELEMENTS_SCHEMA],
+})
+export default class BlueScene {
+	private meshRef = viewChild.required<ElementRef<THREE.Mesh>>('mesh');
+
+	constructor() {
+		injectBeforeRender(() => {
+			const mesh = this.meshRef().nativeElement;
+			mesh.rotation.x += 0.01;
+			mesh.rotation.y += 0.01;
+		});
+	}
+}

apps/kitchen-sink-new/src/app/routed/red.ts

@@ -0,0 +1,25 @@
+import { ChangeDetectionStrategy, Component, CUSTOM_ELEMENTS_SCHEMA, ElementRef, viewChild } from '@angular/core';
+import { injectBeforeRender } from 'angular-three';
+import * as THREE from 'three';
+
+@Component({
+	template: `
+		<ngt-mesh #mesh>
+			<ngt-box-geometry />
+			<ngt-mesh-basic-material color="red" />
+		</ngt-mesh>
+	`,
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	schemas: [CUSTOM_ELEMENTS_SCHEMA],
+})
+export default class RedScene {
+	private meshRef = viewChild.required<ElementRef<THREE.Mesh>>('mesh');
+
+	constructor() {
+		injectBeforeRender(() => {
+			const mesh = this.meshRef().nativeElement;
+			mesh.rotation.x += 0.01;
+			mesh.rotation.y += 0.01;
+		});
+	}
+}

apps/kitchen-sink-new/src/app/routed/routed.routes.ts

@@ -0,0 +1,19 @@
+import { Routes } from '@angular/router';
+
+const routes: Routes = [
+	{
+		path: 'red',
+		loadComponent: () => import('./red'),
+	},
+	{
+		path: 'blue',
+		loadComponent: () => import('./blue'),
+	},
+	{
+		path: '',
+		redirectTo: 'red',
+		pathMatch: 'full',
+	},
+];
+
+export default routes;

apps/kitchen-sink-new/src/app/routed/routed.ts

@@ -0,0 +1,44 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { RouterLink, RouterLinkActive } from '@angular/router';
+import { extend, NgtRoutedScene } from 'angular-three';
+import { NgtCanvasDeclarations } from 'angular-three/dom';
+import * as THREE from 'three';
+
+extend(THREE);
+
+@Component({
+	template: `
+		<div class="h-svh">
+			<ngt-canvas>
+				<ngt-routed-scene *canvasContent />
+			</ngt-canvas>
+		</div>
+
+		<ul class="absolute bottom-0 left-0 flex items-center gap-2">
+			<li>
+				<a
+					routerLink="red"
+					class="underline"
+					routerLinkActive="text-blue-500"
+					[routerLinkActiveOptions]="{ exact: true }"
+				>
+					red
+				</a>
+			</li>
+			<li>
+				<a
+					routerLink="blue"
+					class="underline"
+					routerLinkActive="text-blue-500"
+					[routerLinkActiveOptions]="{ exact: true }"
+				>
+					blue
+				</a>
+			</li>
+		</ul>
+	`,
+	imports: [NgtRoutedScene, RouterLink, RouterLinkActive, NgtCanvasDeclarations],
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	host: { class: 'routed' },
+})
+export default class Routed {}

libs/core/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`.

libs/core/dom/ng-package.json

@@ -0,0 +1,5 @@
+{
+	"lib": {
+		"entryFile": "src/index.ts"
+	}
+}

libs/core/dom/src/index.ts

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

libs/core/src/lib/canvas.ts renamed to libs/core/dom/src/lib/canvas.ts

@@ -22,16 +22,14 @@ import {
 	ViewContainerRef,
 } from '@angular/core';
 import { outputFromObservable } from '@angular/core/rxjs-interop';
-import { NgxResize, provideResizeOptions, ResizeOptions, ResizeResult } from 'ngxtension/resize';
-import * as THREE from 'three';
-import { createPointerEvents } from './dom/events';
-import { CANVAS_CONTENT_FLAG } from './renderer/constants';
-import { injectCanvasRootInitializer, NgtCanvasConfigurator } from './roots';
-import { injectStore, provideStore } from './store';
-import type { NgtVector3 } from './three-types';
-import type {
+import {
+	CANVAS_CONTENT_FLAG,
+	injectCanvasRootInitializer,
+	injectStore,
+	is,
 	NgtCamera,
 	NgtCameraParameters,
+	NgtCanvasConfigurator,
 	NgtDomEvent,
 	NgtDpr,
 	NgtEventPrefix,
@@ -41,8 +39,12 @@ import type {
 	NgtShadows,
 	NgtSize,
 	NgtState,
-} from './types';
-import { is } from './utils/is';
+	NgtVector3,
+	provideStore,
+} from 'angular-three';
+import { NgxResize, provideResizeOptions, ResizeOptions, ResizeResult } from 'ngxtension/resize';
+import * as THREE from 'three';
+import { createPointerEvents } from './events';
 
 @Directive({ selector: 'ng-template[canvasContent]' })
 export class NgtCanvasContent {

libs/core/src/lib/dom/events.ts renamed to libs/core/dom/src/lib/events.ts

@@ -1,6 +1,12 @@
-import { createEvents } from '../events';
-import type { NgtAnyRecord, NgtDomEvent, NgtEventManager, NgtEvents, NgtState } from '../types';
-import { SignalState } from '../utils/signal-state';
+import {
+	createEvents,
+	NgtAnyRecord,
+	NgtDomEvent,
+	NgtEventManager,
+	NgtEvents,
+	NgtState,
+	SignalState,
+} from 'angular-three';
 
 const DOM_EVENTS = {
 	click: false,

libs/core/dom/src/lib/renderer.ts

@@ -0,0 +1,13 @@
+import { makeEnvironmentProviders, RendererFactory2 } from '@angular/core';
+import { ɵDomRendererFactory2 as DomRendererFactory2 } from '@angular/platform-browser';
+import { NgtRendererFactory2 } from 'angular-three';
+
+export function provideNgtRenderer() {
+	return makeEnvironmentProviders([
+		{
+			provide: RendererFactory2,
+			useFactory: (domRendererFactory: RendererFactory2) => new NgtRendererFactory2(domRendererFactory),
+			deps: [DomRendererFactory2],
+		},
+	]);
+}

libs/core/src/index.ts

@@ -1,4 +1,3 @@
-export * from './lib/canvas';
 export * from './lib/directives/args';
 export * from './lib/directives/parent';
 export * from './lib/directives/selection';
@@ -9,7 +8,9 @@ export * from './lib/loop';
 export * from './lib/pipes/hexify';
 export * from './lib/portal';
 // export * from './lib/renderer-old';
+export * from './lib/events';
 export * from './lib/renderer/catalogue';
+export * from './lib/renderer/constants';
 export * from './lib/renderer/renderer';
 export * from './lib/roots';
 export * from './lib/routed-scene';

libs/core/src/lib/directives/args.ts

@@ -45,7 +45,6 @@ export class NgtArgs {
 		});
 
 		inject(DestroyRef).onDestroy(() => {
-			console.log('destroy args');
 			this.view?.destroy();
 		});
 	}

libs/core/src/lib/renderer/constants.ts

@@ -2,5 +2,6 @@ export const NGT_RENDERER_NODE_FLAG = '__ngt_renderer__';
 export const CANVAS_CONTENT_FLAG = '__ngt_renderer_canvas_content_flag__';
 export const SPECIAL_INTERNAL_ADD_COMMENT_FLAG = '__ngt_renderer_add_comment__';
 export const SPECIAL_INTERNAL_SET_PARENT_COMMENT_FLAG = '__ngt_renderer_set_parent_comment__';
+export const NGT_MANUAL_INJECTED_STORE = '__ngt_manual_injected_store__';
 
 export const THREE_NATIVE_EVENTS = ['added', 'removed', 'childadded', 'childremoved', 'disposed'];