feat(soba): migrate float

Author: Chau Tran

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

@@ -2,7 +2,7 @@ import { Component, CUSTOM_ELEMENTS_SCHEMA, Input } from '@angular/core';
 import { Meta, moduleMetadata, StoryObj } from '@storybook/angular';
 import { NgtsText3D } from 'angular-three-soba/abstractions';
 import { NgtsCenter, NgtsFloat } from 'angular-three-soba/staging';
-import { makeCanvasOptions, StorybookSetup } from '../setup-canvas';
+import { makeRenderFunction, StorybookSetup } from '../setup-canvas';
 
 @Component({
     standalone: true,
@@ -33,15 +33,6 @@ export default {
 } as Meta;
 
 export const Default: StoryObj = {
-    render: (args) => ({
-        props: {
-            options: makeCanvasOptions({ camera: { position: [0, 0, 10] } }),
-            story: DefaultText3DStory,
-            inputs: args,
-        },
-        template: `
-    <storybook-setup [options]="options" [story]="story" [inputs]="inputs" />
-        `,
-    }),
+    render: makeRenderFunction(DefaultText3DStory, { camera: { position: [0, 0, 10] } }),
     args: { text: 'Angular Three' },
 };

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

@@ -142,6 +142,7 @@ export class NgtsCenter extends NgtSignalStore<NgtsCenterState> implements OnIni
         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();

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

@@ -0,0 +1,77 @@
+import { Component, CUSTOM_ELEMENTS_SCHEMA, Input } from '@angular/core';
+import { extend, injectBeforeRender, injectNgtRef, NgtRenderState, NgtSignalStore, type NgtGroup } from 'angular-three';
+import * as THREE from 'three';
+import { Group } from 'three';
+
+extend({ Group });
+
+export type NgtsFloatState = {
+    enabled: boolean;
+    speed: number;
+    floatIntensity: number;
+    rotationIntensity: number;
+    floatingRange: [number?, number?];
+};
+
+declare global {
+    interface HTMLElementTagNameMap {
+        'ngts-float': NgtsFloatState & NgtGroup;
+    }
+}
+
+@Component({
+    selector: 'ngts-float',
+    standalone: true,
+    template: `
+        <ngt-group ngtCompound>
+            <ngt-group [ref]="floatRef">
+                <ng-content />
+            </ngt-group>
+        </ngt-group>
+    `,
+    schemas: [CUSTOM_ELEMENTS_SCHEMA],
+})
+export class NgtsFloat extends NgtSignalStore<NgtsFloatState> {
+    readonly #offset = Math.random() * 10000;
+
+    @Input() floatRef = injectNgtRef<THREE.Group>();
+
+    @Input() set enabled(enabled: boolean) {
+        this.set({ enabled });
+    }
+
+    @Input() set speed(speed: number) {
+        this.set({ speed });
+    }
+
+    @Input() set rotationIntensity(rotationIntensity: number) {
+        this.set({ rotationIntensity });
+    }
+
+    @Input() set floatIntensity(floatIntensity: number) {
+        this.set({ floatIntensity });
+    }
+
+    @Input() set floatingRange(floatingRange: [number?, number?]) {
+        this.set({ floatingRange });
+    }
+
+    constructor() {
+        super({ speed: 1, rotationIntensity: 1, floatIntensity: 1, floatingRange: [-0.1, 0.1], enabled: true });
+        injectBeforeRender(this.onBeforeRender.bind(this));
+    }
+
+    private onBeforeRender({ clock }: NgtRenderState) {
+        if (!this.floatRef.untracked) 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;
+        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;
+    }
+}

libs/soba/staging/src/index.ts

@@ -1 +1,2 @@
 export * from './center/center';
+export * from './float/float';