fix(core): adjust effect usage in core canvas

Author: nartc

libs/core/src/lib/canvas.ts

@@ -105,65 +105,72 @@ export class NgtCanvas {
 
 	// NOTE: this signal is updated outside of Zone
 	protected resizeResult = signal<ResizeResult>({} as ResizeResult, { equal: Object.is });
+	private configurator = signal<NgtCanvasConfigurator | null>(null);
 
-	private configurator?: NgtCanvasConfigurator;
 	private glEnvironmentInjector?: EnvironmentInjector;
 	private glRef?: ComponentRef<unknown>;
 
 	constructor() {
+		// 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 canvasElement = this.glCanvas().nativeElement;
 			this.zone.runOutsideAngular(() => {
-				this.configurator = this.initRoot(this.glCanvas().nativeElement);
-				effect(
-					() => {
-						this.noZoneResizeEffect();
-					},
-					{ injector: this.injector },
-				);
+				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);
+
+						untracked(() => {
+							if (this.glRef) {
+								this.glRef.changeDetectorRef.detectChanges();
+							} else {
+								this.noZoneRender();
+							}
+						});
+					});
+				},
+				{ injector: this.injector },
+			);
 		});
 
 		inject(DestroyRef).onDestroy(() => {
 			this.glRef?.destroy();
 			this.glEnvironmentInjector?.destroy();
-			this.configurator?.destroy();
+			this.configurator()?.destroy();
 		});
 	}
 
-	private noZoneResizeEffect() {
-		const resizeResult = this.resizeResult();
-		if (resizeResult.width > 0 && resizeResult.height > 0) {
-			if (!this.configurator) this.configurator = this.initRoot(this.glCanvas().nativeElement);
-			this.configurator.configure({
-				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,
-			});
-
-			untracked(() => {
-				if (this.glRef) {
-					this.glRef.changeDetectorRef.detectChanges();
-				} else {
-					this.noZoneRender();
-				}
-			});
-		}
-	}
-
 	private noZoneRender() {
 		// NOTE: destroy previous instances if existed
 		this.glEnvironmentInjector?.destroy();

libs/core/src/lib/instance.ts

@@ -15,6 +15,7 @@ export function invalidateInstance<TInstance extends object>(instance: TInstance
 		while (store.snapshot.previousRoot) {
 			store = store.snapshot.previousRoot;
 		}
+
 		if (store.snapshot.internal.frames === 0) {
 			store.snapshot.invalidate();
 		}

libs/core/src/lib/loader.ts

@@ -133,16 +133,16 @@ function _injectLoader<
 			NgtBranchingReturn<TReturn, NgtGLTFLike, NgtGLTFLike & NgtObjectMap>
 		> | null>(null);
 
-		const effector = load(loaderConstructorFactory, inputs, {
+		const cachedResultPromisesEffect = load(loaderConstructorFactory, inputs, {
 			extensions,
 			onProgress,
 			onLoad: onLoad as (data: unknown) => void,
 		});
 
 		effect(() => {
 			const originalUrls = inputs();
-			const cachedEffect = effector();
-			Promise.all(cachedEffect).then((results) => {
+			const cachedResultPromises = cachedResultPromisesEffect();
+			Promise.all(cachedResultPromises).then((results) => {
 				response.update(() => {
 					if (Array.isArray(originalUrls)) return results;
 					if (typeof originalUrls === 'string') return results[0];

libs/core/src/lib/portal.ts

@@ -130,7 +130,7 @@ export type NgtPortalInjectableState = Partial<
 	template: `
 		<ng-container #anchor />
 
-		@if (renderAutoBeforeRender()) {
+		@if (shouldAutoRender()) {
 			<ngt-portal-before-render
 				[renderPriority]="autoRenderPriority()"
 				[parentScene]="parentScene()"
@@ -166,7 +166,7 @@ export class NgtPortal {
 	private pointer = new Vector2();
 	private portalRendered = signal(false);
 
-	protected renderAutoBeforeRender = computed(() => this.portalRendered() && this.autoRender());
+	protected shouldAutoRender = computed(() => this.portalRendered() && this.autoRender());
 
 	private portalView?: EmbeddedViewRef<unknown>;
 

libs/core/src/lib/roots.ts

@@ -260,8 +260,8 @@ export function injectCanvasRootInitializer(injector?: Injector) {
 					if (gl.setClearAlpha) {
 						gl.setClearAlpha(0);
 					}
-					gl.setPixelRatio(makeDpr(state.viewport.dpr));
-					gl.setSize(state.size.width, state.size.height);
+					gl.setPixelRatio(makeDpr(state.viewport.dpr ?? dpr));
+					gl.setSize(sizeOptions?.width ?? state.size.width, sizeOptions?.height ?? state.size.height);
 
 					if (
 						is.obj(glOptions) &&