fix(soba): ensure effect that emit centered output allow signal writes

Author: Chau Tran

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

@@ -1,5 +1,11 @@
 import { Component, computed, CUSTOM_ELEMENTS_SCHEMA, effect, EventEmitter, Input, Output } from '@angular/core';
-import { extend, injectNgtRef, NgtSignalStore, requestAnimationInInjectionContext, type NgtGroup } from 'angular-three';
+import {
+    extend,
+    injectNgtRef,
+    NgtSignalStore,
+    requestAnimationFrameInInjectionContext,
+    type NgtGroup,
+} from 'angular-three';
 import { Box3, Group, Sphere, Vector3 } from 'three';
 
 export type NgtsCenterState = {
@@ -111,7 +117,7 @@ export class NgtsCenter extends NgtSignalStore<NgtsCenterState> {
 
     constructor() {
         super({ precise: true });
-        requestAnimationInInjectionContext(() => {
+        requestAnimationFrameInInjectionContext(() => {
             this.#setPosition();
         });
     }
@@ -125,47 +131,50 @@ export class NgtsCenter extends NgtSignalStore<NgtsCenterState> {
             return { center, outer, inner, innerChildren: innerChildren() };
         });
 
-        effect(() => {
-            const { center: centerGroup, outer, inner } = trigger();
-            if (!outer || !inner) return;
-            const { precise, top, left, front, disable, disableX, disableY, disableZ, back, bottom, right } =
-                this.get();
-            outer.matrixWorld.identity();
-            const box3 = new Box3().setFromObject(inner, precise);
-            const center = new Vector3();
-            const sphere = new Sphere();
-            const width = box3.max.x - box3.min.x;
-            const height = box3.max.y - box3.min.y;
-            const depth = box3.max.z - box3.min.z;
-
-            box3.getCenter(center);
-            box3.getBoundingSphere(sphere);
-
-            const vAlign = top ? height / 2 : bottom ? -height / 2 : 0;
-            const hAlign = left ? -width / 2 : right ? width / 2 : 0;
-            const dAlign = front ? depth / 2 : back ? -depth / 2 : 0;
-
-            outer.position.set(
-                disable || disableX ? 0 : -center.x + hAlign,
-                disable || disableY ? 0 : -center.y + vAlign,
-                disable || disableZ ? 0 : -center.z + dAlign
-            );
-
-            if (this.centered.observed) {
-                this.centered.emit({
-                    parent: centerGroup.parent!,
-                    container: centerGroup,
-                    width,
-                    height,
-                    depth,
-                    boundingBox: box3,
-                    boundingSphere: sphere,
-                    center: center,
-                    verticalAlignment: vAlign,
-                    horizontalAlignment: hAlign,
-                    depthAlignment: dAlign,
-                });
-            }
-        });
+        effect(
+            () => {
+                const { center: centerGroup, outer, inner } = trigger();
+                if (!outer || !inner) return;
+                const { precise, top, left, front, disable, disableX, disableY, disableZ, back, bottom, right } =
+                    this.get();
+                outer.matrixWorld.identity();
+                const box3 = new Box3().setFromObject(inner, precise);
+                const center = new Vector3();
+                const sphere = new Sphere();
+                const width = box3.max.x - box3.min.x;
+                const height = box3.max.y - box3.min.y;
+                const depth = box3.max.z - box3.min.z;
+
+                box3.getCenter(center);
+                box3.getBoundingSphere(sphere);
+
+                const vAlign = top ? height / 2 : bottom ? -height / 2 : 0;
+                const hAlign = left ? -width / 2 : right ? width / 2 : 0;
+                const dAlign = front ? depth / 2 : back ? -depth / 2 : 0;
+
+                outer.position.set(
+                    disable || disableX ? 0 : -center.x + hAlign,
+                    disable || disableY ? 0 : -center.y + vAlign,
+                    disable || disableZ ? 0 : -center.z + dAlign
+                );
+
+                if (this.centered.observed) {
+                    this.centered.emit({
+                        parent: centerGroup.parent!,
+                        container: centerGroup,
+                        width,
+                        height,
+                        depth,
+                        boundingBox: box3,
+                        boundingSphere: sphere,
+                        center: center,
+                        verticalAlignment: vAlign,
+                        horizontalAlignment: hAlign,
+                        depthAlignment: dAlign,
+                    });
+                }
+            },
+            { allowSignalWrites: true }
+        );
     }
 }