feat(core): add timing in injection context functions

Author: Chau Tran

libs/angular-three/src/index.ts

@@ -21,4 +21,5 @@ export * from './lib/utils/is';
 export * from './lib/utils/make';
 export * from './lib/utils/safe-detect-changes';
 export * from './lib/utils/signal';
+export * from './lib/utils/timing';
 export * from './lib/utils/update';

libs/angular-three/src/lib/loader.ts

@@ -21,6 +21,7 @@ import type {
 import { assertInjectionContext } from './utils/assert-in-injection-context';
 import { makeObjectGraph } from './utils/make';
 import { safeDetectChanges } from './utils/safe-detect-changes';
+import { requestAnimationInInjectionContext } from './utils/timing';
 
 export type NgtLoaderResults<
     TInput extends string | string[] | Record<string, string>,
@@ -107,29 +108,26 @@ export function injectNgtLoader<
         const response = signal<NgtLoaderResults<TUrl, NgtBranchingReturn<TReturn, GLTF, GLTF & NgtObjectMap>>>(null!);
         const effector = load(loaderConstructorFactory, inputs, { extensions, onProgress });
 
-        requestAnimationFrame(() => {
-            effect(
-                () => {
-                    const originalUrls = untracked(inputs);
-                    Promise.all(effector())
-                        .then((results) => {
-                            if (Array.isArray(originalUrls)) return results;
-                            if (typeof originalUrls === 'string') return results[0];
-                            const keys = Object.keys(originalUrls);
-                            return keys.reduce((result, key) => {
-                                (result as NgtAnyRecord)[key] = results[keys.indexOf(key)];
-                                return result;
-                            }, {} as { [key in keyof TUrl]: NgtBranchingReturn<TReturn, GLTF, GLTF & NgtObjectMap> });
-                        })
-                        .then((value) => {
-                            response.set(
-                                value as NgtLoaderResults<TUrl, NgtBranchingReturn<TReturn, GLTF, GLTF & NgtObjectMap>>
-                            );
-                            safeDetectChanges(cdr);
-                        });
-                },
-                { injector }
-            );
+        requestAnimationInInjectionContext(() => {
+            effect(() => {
+                const originalUrls = untracked(inputs);
+                Promise.all(effector())
+                    .then((results) => {
+                        if (Array.isArray(originalUrls)) return results;
+                        if (typeof originalUrls === 'string') return results[0];
+                        const keys = Object.keys(originalUrls);
+                        return keys.reduce((result, key) => {
+                            (result as NgtAnyRecord)[key] = results[keys.indexOf(key)];
+                            return result;
+                        }, {} as { [key in keyof TUrl]: NgtBranchingReturn<TReturn, GLTF, GLTF & NgtObjectMap> });
+                    })
+                    .then((value) => {
+                        response.set(
+                            value as NgtLoaderResults<TUrl, NgtBranchingReturn<TReturn, GLTF, GLTF & NgtObjectMap>>
+                        );
+                        safeDetectChanges(cdr);
+                    });
+            });
         });
 
         return response.asReadonly();

libs/angular-three/src/lib/stores/signal.store.ts

@@ -106,6 +106,13 @@ export class NgtSignalStore<TState extends object> {
             ...(typeof state === 'function' ? state(previous) : state),
         }));
     }
+
+    patch(state: Partial<TState>) {
+        this.#state.update((previous) => ({
+            ...state,
+            ...previous,
+        }));
+    }
 }
 
 function parseOptions(keysAndOptions: any[]): [string[], CreateComputedOptions<any>?] {

libs/angular-three/src/lib/utils/timing.ts

@@ -0,0 +1,23 @@
+import { Injector, runInInjectionContext } from '@angular/core';
+import { assertInjectionContext } from './assert-in-injection-context';
+
+export function requestAnimationInInjectionContext(cb: () => void, injector?: Injector) {
+    injector = assertInjectionContext(requestAnimationInInjectionContext, injector);
+    return requestAnimationFrame(() => {
+        return runInInjectionContext(injector!, cb);
+    });
+}
+
+export function queueMicrotaskInInjectionContext(cb: () => void, injector?: Injector) {
+    injector = assertInjectionContext(requestAnimationInInjectionContext, injector);
+    return queueMicrotask(() => {
+        return runInInjectionContext(injector!, cb);
+    });
+}
+
+export function queueMacrotaskInInjectionContext(cb: () => void, injector?: Injector) {
+    injector = assertInjectionContext(requestAnimationInInjectionContext, injector);
+    return setTimeout(() => {
+        return runInInjectionContext(injector!, cb);
+    });
+}

libs/soba/src/staging/spot-light.stories.ts

@@ -179,7 +179,7 @@ export const Default = makeStoryObject(DefaultSpotLightStory, {
     argsOptions: { size: number(256), debug: false, volumetric: true },
 });
 
-// TODO: shadows doesn't seem to work due to some racing condition with map
+// TODO: shadow.map also needs to set size, shadow.mapSize isn't enough. investigate further?
 export const Shadows = makeStoryObject(ShadowsSpotLightStory, {
     canvasOptions: { lights: false },
     argsOptions: { wind: true, debug: false },

libs/soba/staging/src/center/center.ts

@@ -1,5 +1,5 @@
 import { Component, computed, CUSTOM_ELEMENTS_SCHEMA, effect, EventEmitter, Input, Output } from '@angular/core';
-import { extend, injectNgtRef, NgtSignalStore, type NgtGroup } from 'angular-three';
+import { extend, injectNgtRef, NgtSignalStore, requestAnimationInInjectionContext, type NgtGroup } from 'angular-three';
 import { Box3, Group, Sphere, Vector3 } from 'three';
 
 export type NgtsCenterState = {
@@ -111,7 +111,9 @@ export class NgtsCenter extends NgtSignalStore<NgtsCenterState> {
 
     constructor() {
         super({ precise: true });
-        this.#setPosition();
+        requestAnimationInInjectionContext(() => {
+            this.#setPosition();
+        });
     }
 
     #setPosition() {