fix(soba): move effects into constructor

Author: Chau Tran

apps/demo/src/app/app.component.ts

@@ -1,6 +1,6 @@
-import { NgTemplateOutlet } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, ChangeDetectionStrategy, Component, signal } from '@angular/core';
 import { NgtCanvas, extend } from 'angular-three';
+import { NgtsOrbitControls } from 'angular-three-soba/controls';
 import * as THREE from 'three';
 
 extend(THREE);
@@ -39,8 +39,9 @@ export class Cube {
         <ngt-spot-light [position]="5" />
         <ngt-point-light [position]="-5" />
         <app-cube />
+        <ngts-orbit-controls />
     `,
-    imports: [Cube, NgTemplateOutlet],
+    imports: [Cube, NgtsOrbitControls],
     schemas: [CUSTOM_ELEMENTS_SCHEMA],
     changeDetection: ChangeDetectionStrategy.OnPush,
 })

libs/soba/abstractions/src/text-3d/text-3d.ts

@@ -134,6 +134,7 @@ export class NgtsText3D extends NgtSignalStore<NgtsText3DState> {
     readonly geometryArgs = computed(() => {
         const fontData = this.#fontData();
         if (!fontData) return null;
+
         const text = this.select('text');
         const size = this.select('size');
         const height = this.select('height');

libs/soba/abstractions/src/text/text.ts

@@ -5,7 +5,6 @@ import {
     EventEmitter,
     Injector,
     Input,
-    NgZone,
     Output,
     computed,
     effect,
@@ -216,7 +215,6 @@ export class NgtsText extends NgtSignalStore<NgtsTextState> {
 
     readonly troikaText = new Text();
 
-    readonly #zone = inject(NgZone);
     readonly #injector = inject(Injector);
     readonly #store = inject(NgtStore);
 
@@ -227,13 +225,8 @@ export class NgtsText extends NgtSignalStore<NgtsTextState> {
         inject(DestroyRef).onDestroy(() => {
             this.troikaText.dispose();
         });
-    }
-
-    ngOnInit() {
-        this.#zone.runOutsideAngular(() => {
-            this.#preloadFont();
-            this.#syncText();
-        });
+        this.#preloadFont();
+        this.#syncText();
     }
 
     #preloadFont() {

libs/soba/controls/src/orbit-controls/orbit-controls.ts

@@ -7,8 +7,6 @@ import {
     inject,
     Injector,
     Input,
-    NgZone,
-    OnInit,
     Output,
 } from '@angular/core';
 import { injectBeforeRender, injectNgtRef, NgtArgs, NgtSignalStore, NgtStore, NgtVector3 } from 'angular-three';
@@ -36,7 +34,7 @@ declare global {
     imports: [NgtArgs],
     schemas: [CUSTOM_ELEMENTS_SCHEMA],
 })
-export class NgtsOrbitControls extends NgtSignalStore<NgtsOrbitControlsState> implements OnInit {
+export class NgtsOrbitControls extends NgtSignalStore<NgtsOrbitControlsState> {
     @Input() controlsRef = injectNgtRef<OrbitControls>();
 
     @Input() set camera(camera: THREE.Camera) {
@@ -69,7 +67,6 @@ export class NgtsOrbitControls extends NgtSignalStore<NgtsOrbitControlsState> im
 
     readonly #store = inject(NgtStore);
     readonly #injector = inject(Injector);
-    readonly #zone = inject(NgZone);
 
     readonly args = computed(() => [this.controlsRef.nativeElement]);
     readonly damping = this.select('enableDamping');
@@ -85,15 +82,11 @@ export class NgtsOrbitControls extends NgtSignalStore<NgtsOrbitControlsState> im
             },
             { priority: -1 }
         );
-    }
 
-    ngOnInit() {
-        this.#zone.runOutsideAngular(() => {
-            this.#setControls();
-            this.#connectElement();
-            this.#makeControlsDefault();
-            this.#setEvents();
-        });
+        this.#setControls();
+        this.#connectElement();
+        this.#makeControlsDefault();
+        this.#setEvents();
     }
 
     #setControls() {

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

@@ -7,7 +7,6 @@ import {
     inject,
     Injector,
     Input,
-    OnInit,
     Output,
 } from '@angular/core';
 import { extend, injectNgtRef, NgtSignalStore, type NgtGroup } from 'angular-three';
@@ -54,7 +53,7 @@ declare global {
     `,
     schemas: [CUSTOM_ELEMENTS_SCHEMA],
 })
-export class NgtsCenter extends NgtSignalStore<NgtsCenterState> implements OnInit {
+export class NgtsCenter extends NgtSignalStore<NgtsCenterState> {
     @Input() centerRef = injectNgtRef<Group>();
 
     readonly outerRef = injectNgtRef<Group>();
@@ -124,9 +123,6 @@ export class NgtsCenter extends NgtSignalStore<NgtsCenterState> implements OnIni
 
     constructor() {
         super({ precise: true });
-    }
-
-    ngOnInit(): void {
         this.#setPosition();
     }
 

libs/soba/staging/src/float/float.ts

@@ -58,20 +58,21 @@ export class NgtsFloat extends NgtSignalStore<NgtsFloatState> {
 
     constructor() {
         super({ speed: 1, rotationIntensity: 1, floatIntensity: 1, floatingRange: [-0.1, 0.1], enabled: true });
-        injectBeforeRender(this.onBeforeRender.bind(this));
+        injectBeforeRender(this.#onBeforeRender.bind(this));
     }
 
-    private onBeforeRender({ clock }: NgtRenderState) {
-        if (!this.floatRef.untracked) return;
+    #onBeforeRender({ clock }: NgtRenderState) {
+        const float = this.floatRef.untracked;
+        if (!float) return;
         const { enabled, speed, floatingRange, floatIntensity, rotationIntensity } = this.get();
         if (!enabled || speed === 0) return;
 
         const t = this.#offset + clock.getElapsedTime();
-        this.floatRef.untracked.rotation.x = (Math.cos((t / 4) * speed) / 8) * rotationIntensity;
-        this.floatRef.untracked.rotation.y = (Math.sin((t / 4) * speed) / 8) * rotationIntensity;
-        this.floatRef.untracked.rotation.z = (Math.sin((t / 4) * speed) / 20) * rotationIntensity;
+        float.rotation.x = (Math.cos((t / 4) * speed) / 8) * rotationIntensity;
+        float.rotation.y = (Math.sin((t / 4) * speed) / 8) * rotationIntensity;
+        float.rotation.z = (Math.sin((t / 4) * speed) / 20) * rotationIntensity;
         let yPosition = Math.sin((t / 4) * speed) / 10;
         yPosition = THREE.MathUtils.mapLinear(yPosition, -0.1, 0.1, floatingRange[0] ?? -0.1, floatingRange[1] ?? 0.1);
-        this.floatRef.untracked.position.y = yPosition * floatIntensity;
+        float.position.y = yPosition * floatIntensity;
     }
 }