@needle-tools/engine 3.2.15-alpha → 3.4.0-alpha

package/src/engine-components/ui/RectTransform.ts

@@ -1,13 +1,17 @@
-import { Behaviour } from "../Component";
 import * as ThreeMeshUI from 'three-mesh-ui'
 import { BaseUIComponent } from "./BaseUIComponent";
+import { DocumentedOptions as ThreeMeshUIEveryOptions } from "three-mesh-ui/build/types/core/elements/MeshUIBaseElement";
 import { serializable } from "../../engine/engine_serialization_decorator";
-import { Color, Matrix4, Object3D, Vector2, Vector3 } from "three";
+import { Color, Matrix4, Object3D, Quaternion, Vector2, Vector3 } from "three";
 import { EventSystem } from "./EventSystem";
 import { getParam } from "../../engine/engine_utils";
 import { onChange } from "./Utils";
+import { foreachComponentEnumerator } from "../../engine/engine_gameobject";
+import { ICanvas, IRectTransform, IRectTransformChangedReceiver, ILayoutGroup } from "./Interfaces";
+import { GameObject } from '../Component';
 
 const debug = getParam("debugui");
+const debugLayout = getParam("debuguilayout");
 
 export class Size {
     width!: number;
@@ -21,32 +25,77 @@ export class Rect {
     height!: number;
 }
 
-export class RectTransform extends BaseUIComponent {
+const tempVec = new Vector3();
+const tempMatrix = new Matrix4();
+const tempQuaternion = new Quaternion();
 
-    offset: number = 0.01;
+export class RectTransform extends BaseUIComponent implements IRectTransform, IRectTransformChangedReceiver {
+
+    offset: number = 0.1;
 
     // @serializable(Object3D)
     // root? : Object3D;
 
     get translation() { return this.gameObject.position; }
     get rotation() { return this.gameObject.quaternion; }
-    get scale(): THREE.Vector3 { return this.gameObject.scale; }
+    get scale(): Vector3 { return this.gameObject.scale; }
 
     private _anchoredPosition!: Vector3;
-    private get anchoredPosition() {
+
+    @serializable(Vector3)
+    get anchoredPosition() {
         if (!this._anchoredPosition) this._anchoredPosition = new Vector3();
         return this._anchoredPosition;
     }
+    private set anchoredPosition(value: Vector3) {
+        this._anchoredPosition = value;
+    }
 
     @serializable(Rect)
-    rect?: Rect;
+    private rect?: Rect; // TODO: should we use the rect or sizeDelta?
+
     @serializable(Vector2)
-    sizeDelta!: THREE.Vector2;
-    @serializable(Vector3)
-    anchoredPosition3D?: THREE.Vector3;
+    sizeDelta!: Vector2;
+
+    @serializable(Vector2)
+    pivot?: Vector2;
+
+    @serializable(Vector2)
+    anchorMin!: Vector2;
+    @serializable(Vector2)
+    anchorMax!: Vector2;
+
     @serializable(Vector2)
-    pivot?: THREE.Vector2;
+    offsetMin!: Vector2;
+    @serializable(Vector2)
+    offsetMax!: Vector2;
+
+    get width() {
+        if (this.anchorMin.x !== this.anchorMax.x) {
+            if (this._parentRectTransform) {
+                const parentWidth = this._parentRectTransform.width;
+                const anchorWidth = this.anchorMax.x - this.anchorMin.x;
+                let width = parentWidth * anchorWidth;
+                width += this.sizeDelta.x;
+                return width;
+            }
+        }
+        return this.sizeDelta.x;
+    }
+    get height() {
+        if (this.anchorMin.y !== this.anchorMax.y) {
+            if (this._parentRectTransform) {
+                const parentHeight = this._parentRectTransform.height;
+                const anchorHeight = this.anchorMax.y - this.anchorMin.y;
+                let height = parentHeight * anchorHeight;
+                height += this.sizeDelta.y;
+                return height
+            }
+        }
+        return this.sizeDelta.y;
+    }
 
+    // private lastMatrixWorld!: Matrix4;
     private lastMatrix!: Matrix4;
     private rectBlock!: Object3D;
     private _transformNeedsUpdate: boolean = false;
@@ -60,89 +109,192 @@ export class RectTransform extends BaseUIComponent {
 
         // this is required if an animator animated the transform anchoring
         if (!this._anchoredPosition) this._anchoredPosition = new Vector3();
-        onChange(this, "_anchoredPosition", () => { this._transformNeedsUpdate = true; });
+
+        // TODO: we need to replace this with the watch that e.g. Rigibody is using (or the one in utils?)
+        // perhaps we can also just manually check the few properties in the update loops?
+        // TODO: check if value actually changed, this is called on assignment
+        onChange(this, "_anchoredPosition", () => { this.markDirty(); });
+        onChange(this, "sizeDelta", () => { this.markDirty(); });
+        onChange(this, "pivot", () => { this.markDirty(); });
+
+        // When exported with an anchored position offset we remove it here 
+        // because it would otherwise be applied twice when the anchoring is animated
+        // Maybe we can get rid of this workaround if we just set the mesh ui position from the
+        // anchored position value but then we would have to make sure if a user/the engine updates
+        // "position" the change would also land in anchoredPosition
+        // Another solution would perhaps be to get rid of the extra "anchoredPosition" vector3 
+        // and instead use the same vector3 instance on both "position" and "anchoredPosition"
+        // But I'm also not sure if this will not cause issues elsewhere later / be confusing?
+        // (that being said we can make anchoredPosition hidden)
+        if (!this.isRoot()) {
+            this.gameObject.position.x += this.anchoredPosition.x;
+            this.gameObject.position.y -= this.anchoredPosition.y;
+        }
     }
 
     onEnable() {
         super.onEnable();
         this.addShadowComponent(this.rectBlock);
         this._transformNeedsUpdate = true;
+        this.Canvas?.registerTransform(this);
     }
 
     onDisable() {
         super.onDisable();
         this.removeShadowComponent();
+        this.Canvas?.unregisterTransform(this);
+    }
+
+    onParentRectTransformChanged(comp: IRectTransform) {
+        if (this._transformNeedsUpdate) return;
+        // When the parent rect transform changes we have to to recalculate our transform
+        this.onApplyTransform(debugLayout ? `${comp.name} changed` : undefined);
     }
 
-    private applyTransform() {
+    get isDirty() {
+        if(!this._transformNeedsUpdate) this._transformNeedsUpdate = !this.lastMatrix.equals(this.gameObject.matrix);
+        return this._transformNeedsUpdate;
+    }
+
+    // private _copyMatrixAfterRender: boolean = false;
+
+    markDirty() {
+        if (this._transformNeedsUpdate) return;
+        if (debugLayout) console.warn("RectTransform markDirty()", this.name)
+        this._transformNeedsUpdate = true;
+        // If mark dirty is called explictly we want to allow updating the transform again when updateTransform is called
+        // if we dont reset it here we get delayed layout updates
+        this._lastUpdateFrame = -1;
+    }
+
+
+    /** Will update the transforms if it changed or is dirty */
+    updateTransform() {
+        // TODO: instead of checking matrix again it would perhaps be better to test if position, rotation or scale have changed individually?
+        const transformChanged = this._transformNeedsUpdate || !this.lastMatrix.equals(this.gameObject.matrix);// || !this.lastMatrixWorld.equals(this.gameObject.matrixWorld);
+        if (transformChanged && this.canUpdate()) {
+            this.onApplyTransform(this._transformNeedsUpdate ? "Marked dirty" : "Matrix changed");
+        }
+    }
+
+    private _parentRectTransform?: RectTransform;
+    private _lastUpdateFrame: number = -1;
+
+    private canUpdate() {
+        return this._transformNeedsUpdate && this.activeAndEnabled && this._lastUpdateFrame !== this.context.time.frame;
+    }
+
+    private onApplyTransform(reason?: string) {
+        // TODO: need to improve the update logic, with this UI updates have some frame delay but dont happen exponentially per hierarchy
+        if (this.context.time.frameCount === this._lastUpdateFrame) return;
+        this._lastUpdateFrame = this.context.time.frameCount;
+
         const uiobject = this.shadowComponent;
         if (!uiobject) return;
+        this._parentRectTransform = GameObject.getComponentInParent(this.gameObject.parent!, RectTransform) as RectTransform;
+
         this._transformNeedsUpdate = false;
+        this.lastMatrix.copy(this.gameObject.matrix);
+
+        if (debugLayout) console.warn("RectTransform → ApplyTransform", this.name + " because " + reason);
 
         if (!this.isRoot()) {
-            // this.gameObject transform has authority over three mesh ui shadow components
-            // so we keep copy the transform to the threemesh ui components
-            uiobject.position.copy(this.gameObject.position);
-            uiobject.position.x *= -1;
-            uiobject.position.z *= -1;
-            // move slightly forward to avoid z fighting
-            uiobject.position.z -= this.offset;
-
-            uiobject.quaternion.copy(this.gameObject.quaternion);
-            uiobject.rotation.x *= -1;
-            // flip images
-            uiobject.rotation.z *= -1;
-
-            uiobject.scale.copy(this.gameObject.scale);
+            // Reset temp matrix
+            uiobject.matrix.identity();
+            uiobject.matrixAutoUpdate = false;
+            // calc pivot and apply
+            tempVec.set(0, 0, 0);
+            this.applyPivot(tempVec);
+            uiobject.matrix.setPosition(tempVec.x, tempVec.y, 0);
+            // calc rotation matrix and apply (we can skip this if it's not rotated)
+            if (this.gameObject.quaternion.x || this.gameObject.quaternion.y || this.gameObject.quaternion.z) {
+                tempQuaternion.copy(this.gameObject.quaternion);
+                tempQuaternion.x *= -1;
+                tempQuaternion.z *= -1;
+                tempMatrix.makeRotationFromQuaternion(tempQuaternion);
+                uiobject.matrix.premultiply(tempMatrix);
+            }
+            // calc anchors and offset and apply
+            tempVec.set(0, 0, 0);
+            this.applyAnchoring(tempVec);
+            tempVec.z += this.offset;
+            tempVec.z -= this.gameObject.position.z;
+            tempMatrix.identity();
+            tempMatrix.setPosition(tempVec.x, tempVec.y, tempVec.z);
+            uiobject.matrix.premultiply(tempMatrix);
+            // apply scale if necessary
+            uiobject.matrix.scale(this.gameObject.scale);
         }
         else {
-            uiobject.rotation.y = Math.PI;
+            // We have to rotate the canvas when it's in worldspace
+            const canvas = this.Root as any as ICanvas;
+            if (!canvas.screenspace) uiobject.rotation.y = Math.PI;
         }
 
-        this.applyAnchoring(uiobject.position);
-        this.lastMatrix.copy(this.gameObject.matrix);
-    }
+        // iterate other components on this object that might need to know about the transform change
+        // e.g. Graphic components should update their width and height
+        const includeChildren = true;
+        for (const comp of foreachComponentEnumerator(this.gameObject, BaseUIComponent, includeChildren, 1)) {
+            if (comp === this) continue;
+            if (!comp.activeAndEnabled) continue;
+            const callback = comp as any as IRectTransformChangedReceiver;
+            if (callback.onParentRectTransformChanged) {
+                // if (debugLayout) console.log(`RectTransform ${this.name} → call`, comp.name + "/" + comp.constructor.name)
+                callback.onParentRectTransformChanged(this);
+            }
+        }
 
-    markDirty() {
-        this._transformNeedsUpdate = true;
+        // const layout = GameObject.getComponentInParent(this.gameObject, ILayoutGroup);
     }
 
-    onBeforeRender() {
-        // only handle update here if this is not the canvas
-        // the canvas component does inherit from this class but it only serves as a root
-        // it does not emit any UI elements and therefor we dont want to change its transform
-        // if (this._parentComponent) 
-        // {
-        const transformChanged = this._transformNeedsUpdate || this.lastMatrix.equals(this.gameObject.matrix) === false;
-        if (transformChanged) {
-            if (debug)
-                console.log("updating", this.name);
-            this.applyTransform();
+    // onAfterRender() {
+    //     if (this._copyMatrixAfterRender) {
+    //         // can we only have this event when the transform changed in this frame? Otherwise all RectTransforms will be iterated. Not sure what is better
+    //         this.lastMatrixWorld.copy(this.gameObject.matrixWorld);
+    //     }
+    // }
+
+    /** applies the position offset to the passed in vector */
+    private applyAnchoring(pos: Vector3) {
+        pos.x += this.anchoredPosition.x;
+        pos.y += this.anchoredPosition.y;
+
+        const parent = this._parentRectTransform;
+        if (parent) {
+            // Calculate vertical offset
+            let oy = 0;
+            const vert = 1 - this.anchorMax.y - this.anchorMin.y;
+            oy -= (parent.height * .5) * vert;
+            pos.y += oy;
+
+            // calculate horizontal offset
+            let ox = 0;
+            const horz = 1 - this.anchorMax.x - this.anchorMin.x;
+            ox -= (parent.width * .5) * horz;
+            pos.x += ox;
         }
-        // }
-        EventSystem.ensureUpdateMeshUI(ThreeMeshUI, this.context);
-    }
-
-    private applyAnchoring(pos: THREE.Vector3) {
-        if (this.pivot && this.sizeDelta) {
-            let tx = (this.pivot.x * 2 - 1);
-            let ty = (this.pivot.y * 2 - 1);
-            tx -= this.anchoredPosition.x;// * .05;
-            ty -= this.anchoredPosition.y;// * .05;
-            const offx = tx;
-            const offy = ty;
-            // console.log(this.name, this.pivot, tx, ty, "offset", offx, offy);
-            pos.x -= offx;
-            pos.y -= offy;
-            
-            // TODO update size from anchoring, width, height, sizeDelta
-            if (this.shadowComponent)
-            // console.log(this.shadowComponent)
-                 this.set({ width: this.sizeDelta.x, height: this.sizeDelta.y });
+    }
+
+    /** applies the pivot offset to the passed in vector */
+    private applyPivot(vec: Vector3) {
+        if (this.pivot && !this.isRoot()) {
+            const pv = this.pivot.x - .5;
+            vec.x -= pv * this.sizeDelta.x * this.gameObject.scale.x;
+            const ph = this.pivot.y - .5;
+            vec.y -= ph * this.sizeDelta.y * this.gameObject.scale.y;
         }
     }
 
-    getBasicOptions(): ThreeMeshUI.BlockOptions {
+    getBasicOptions(): ThreeMeshUIEveryOptions {
+
+        // @TODO : instead of getBasicOptions for each component we could use once needleEngine initialized
+        // ThreeMeshUI.DefaultValues.set({
+        //     backgroundOpacity: 1,
+        //     borderWidth: 0, // if we dont specify width here a border will automatically propagated to child blocks
+        //     borderRadius: 0,
+        //     borderOpacity: 0,
+        // })
+
         const opts = {
             width: this.rect!.width,
             height: this.rect!.height,// * this.context.mainCameraComponent!.aspect,
@@ -151,6 +303,7 @@ export class RectTransform extends BaseUIComponent {
             borderWidth: 0, // if we dont specify width here a border will automatically propagated to child blocks
             borderRadius: 0,
             borderOpacity: 0,
+            letterSpacing: -0.03,
             // justifyContent: 'center',
             // alignItems: 'center',
             // alignContent: 'center',
@@ -169,17 +322,32 @@ export class RectTransform extends BaseUIComponent {
         return opts;
     }
 
-    private _createdBlocks : ThreeMeshUI.Block[] = [];
+    private _createdBlocks: ThreeMeshUI.Block[] = [];
+    private _createdTextBlocks: ThreeMeshUI.Text[] = [];
 
-    createNewBlock(opts?: ThreeMeshUI.BlockOptions | object): ThreeMeshUI.Block {
+    createNewBlock(opts?: ThreeMeshUIEveryOptions | object): ThreeMeshUI.Block {
         opts = {
             ...this.getBasicOptions(),
             ...opts
         };
         if (debug)
             console.log(this.name, opts);
-        const block = new ThreeMeshUI.Block(opts as ThreeMeshUI.BlockOptions);
+        const block = new ThreeMeshUI.Block(opts as ThreeMeshUIEveryOptions);
         this._createdBlocks.push(block);
         return block;
     }
+
+    createNewText(opts?: ThreeMeshUIEveryOptions | object): ThreeMeshUI.Block {
+        if (debug)
+            console.log(opts)
+        opts = {
+            ...this.getBasicOptions(),
+            ...opts,
+        };
+        if (debug)
+            console.log(this.name, opts);
+        const block = new ThreeMeshUI.Text(opts as ThreeMeshUIEveryOptions);
+        this._createdTextBlocks.push(block);
+        return block;
+    }
 }