wip

nartc · nartc · commit bc67fe5aca16 · 2023-11-20T20:15:33.000-06:00
diff --git a/apps/examples/src/app/pages/cubes/index.html b/apps/examples/src/app/pages/cubes/index.html
@@ -1 +1,4 @@
-<ngt-canvas [sceneGraph]="sceneGraph" />
+<button (click)="active.set(!active())" class="px-4 py-2 bg-gray-800 text-white rounded">
+	Click me outside Canvas
+</button>
+<ngt-canvas [sceneGraph]="sceneGraph" [camera]="{position: [0, 3, 10]}" />
diff --git a/apps/examples/src/app/pages/cubes/index.page.ts b/apps/examples/src/app/pages/cubes/index.page.ts
@@ -1,17 +1,42 @@
+import { NgIf } from '@angular/common';
 import { Component, signal } from '@angular/core';
 import { NgtArgs, NgtCanvas } from 'angular-three';
 import { NgtsOrbitControls } from 'angular-three-soba/controls';
+import { NgtsHtml } from 'angular-three-soba/misc';
+import { NgtsSobaContent } from 'angular-three-soba/utils';
+
+const active = signal(false);
+
+@Component({
+	selector: 'cubes-html-button',
+	standalone: true,
+	template: `
+		<button
+			(click)="active.set(!active())"
+			type="button"
+			class="transition-colors duration-1000  text-white px-2 py-1 rounded shadow"
+			[class]="active() ? ['bg-red-400', 'hover:bg-red-600'] : ['bg-blue-400', 'hover:bg-blue-600']"
+		>
+			Click me
+		</button>
+		<div *ngIf="active()">Extra content under ngIf</div>
+	`,
+	imports: [NgIf],
+})
+export class Button {
+	active = active;
+}
 
 @Component({
 	standalone: true,
 	templateUrl: './scene.html',
-	imports: [NgtsOrbitControls, NgtArgs],
+	imports: [NgtsOrbitControls, NgtArgs, NgtsHtml, NgtsSobaContent, Button],
 })
-class Scene {
+export class Scene {
 	hover = signal(false);
 
 	onBeforeRender(cube: THREE.Mesh) {
-		cube.rotation.x += 0.01;
+		cube.rotation.y += 0.01;
 	}
 }
 
@@ -22,4 +47,5 @@ class Scene {
 })
 export default class Cubes {
 	sceneGraph = Scene;
+	active = active;
 }
diff --git a/apps/examples/src/app/pages/cubes/scene.html b/apps/examples/src/app/pages/cubes/scene.html
@@ -1,5 +1,5 @@
 <ngt-spot-light #light [position]="[0, 1.5, 1.5]" [intensity]="5" />
-<ngt-spot-light-helper *args="[light, 'red']" />
+<!-- <ngt-spot-light-helper *args="[light, 'red']" /> -->
 
 <ngt-mesh
 	(beforeRender)="onBeforeRender($event.object)"
@@ -8,6 +8,9 @@
 >
 	<ngt-box-geometry />
 	<ngt-mesh-lambert-material [color]="hover() ? 'hotpink' : 'orange'" />
+	<ngts-html [position]="[0, 2, 0]" [transform]="true">
+		<cubes-html-button *ngtsSobaContent />
+	</ngts-html>
 </ngt-mesh>
 
 <ngts-orbit-controls />
diff --git a/libs/core/src/lib/canvas.ts b/libs/core/src/lib/canvas.ts
@@ -255,18 +255,22 @@ export class NgtCanvas implements OnInit, OnChanges {
 
 			const inputs = this.inputs.select();
 			// TODO: Double-check when effect is made not depended on zone
-			this.resizeEffectRef = effect(
-				() => {
-					if (!this.configurator) this.configurator = this.initRoot(this.glCanvas.nativeElement);
-					this.configurator.configure({ ...inputs(), size: result });
-
-					if (this.glRef) {
-						safeDetectChanges(this.cdr);
-					} else {
-						this.render();
-					}
-				},
-				{ manualCleanup: true, injector: this.injector },
+			this.resizeEffectRef = this.zone.run(() =>
+				effect(
+					() => {
+						this.zone.runOutsideAngular(() => {
+							if (!this.configurator) this.configurator = this.initRoot(this.glCanvas.nativeElement);
+							this.configurator.configure({ ...inputs(), size: result });
+
+							if (this.glRef) {
+								safeDetectChanges(this.cdr);
+							} else {
+								this.render();
+							}
+						});
+					},
+					{ manualCleanup: true, injector: this.injector },
+				),
 			);
 		}
 	}
diff --git a/libs/core/src/lib/renderer/index.ts b/libs/core/src/lib/renderer/index.ts
@@ -19,6 +19,7 @@ import type { NgtInjectedRef } from '../ref';
 import { injectNgtStore, provideNgtStore, type NgtStore } from '../store';
 import type { NgtAnyRecord } from '../types';
 import { is } from '../utils/is';
+import { safeDetectChanges } from '../utils/safe-detect-changes';
 import { injectNgtCatalogue, type NgtAnyConstructor } from './catalogue';
 import { HTML, ROUTED_SCENE, SPECIAL_DOM_TAG } from './constants';
 import { NGT_COMPOUND_PREFIXES, NgtRendererStore, type NgtRendererNode, type NgtRendererState } from './store';
@@ -428,7 +429,13 @@ class NgtRenderer implements Renderer2 {
 		// if the target doesn't have __ngt_renderer__, we delegate
 		// if target is DOM node, then we pass that to delegate Renderer
 		if (!rS || this.store.isDOM(target)) {
-			return this.delegate.listen(target, eventName, callback);
+			const targetCdr = getDebugNode(target)?.injector.get(ChangeDetectorRef, null);
+			const updatedCallback = (event: any) => {
+				const callbackValue = callback(event);
+				safeDetectChanges(targetCdr || this.cdr);
+				return callbackValue;
+			};
+			return this.delegate.listen(target, eventName, updatedCallback);
 		}
 
 		if (
diff --git a/libs/core/src/lib/roots.ts b/libs/core/src/lib/roots.ts
@@ -1,4 +1,4 @@
-import { DestroyRef, effect, inject, type EffectRef, type Injector } from '@angular/core';
+import { DestroyRef, Injector, effect, inject, type EffectRef } from '@angular/core';
 import { assertInjector } from 'ngxtension/assert-injector';
 import * as THREE from 'three';
 import type { NgtCanvasInputs } from './canvas';
@@ -18,6 +18,7 @@ export const roots = new Map<HTMLCanvasElement, NgtSignalStore<NgtState>>();
 
 export function injectCanvasRootInitializer(injector?: Injector) {
 	return assertInjector(injectCanvasRootInitializer, injector, () => {
+		const assertedInjector = inject(Injector);
 		const injectedStore = injectNgtStore();
 		const loop = injectNgtLoop();
 		const destroyRef = inject(DestroyRef);
@@ -263,7 +264,7 @@ export function injectCanvasRootInitializer(injector?: Injector) {
 						invalidateRef?.destroy();
 						invalidateRef = effect(() => void store.state().invalidate(), {
 							manualCleanup: true,
-							injector,
+							injector: assertedInjector,
 						});
 					});
 				},
diff --git a/libs/core/src/lib/utils/create-api-token.ts b/libs/core/src/lib/utils/create-api-token.ts
@@ -8,10 +8,6 @@ export function createApiToken<TObject extends { api: any }, TApi = TObject exte
 		return obj.api;
 	}
 
-	const object = forwardedObject();
-
-	apiFactory.name = `API for ${object.name || object}`;
-
 	const [injectFn, provideFn] = createInjectionToken(apiFactory, {
 		isRoot: false,
 		deps: [forwardRef(forwardedObject)],
