@needle-tools/engine 3.2.14-alpha → 3.3.0-alpha

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

@@ -1,11 +1,14 @@
-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 } from "./Interfaces";
+import { GameObject } from '../Component';
 
 const debug = getParam("debugui");
 
@@ -21,38 +24,84 @@ 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.05;
 
     // @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)
+    offsetMin!: Vector2;
     @serializable(Vector2)
-    pivot?: THREE.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;
 
     awake() {
         super.awake();
+        this.lastMatrixWorld = new Matrix4();
         this.lastMatrix = new Matrix4();
         this.rectBlock = new Object3D();;
         this.rectBlock.position.z = .1;
@@ -60,7 +109,26 @@ export class RectTransform extends BaseUIComponent {
 
         // this is required if an animator animated the transform anchoring
         if (!this._anchoredPosition) this._anchoredPosition = new Vector3();
+
+        // 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?
         onChange(this, "_anchoredPosition", () => { this._transformNeedsUpdate = true; });
+        onChange(this, "sizeDelta", () => { this._transformNeedsUpdate = true; });
+        onChange(this, "pivot", () => { this._transformNeedsUpdate = true; });
+
+        // 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() {
@@ -74,75 +142,134 @@ export class RectTransform extends BaseUIComponent {
         this.removeShadowComponent();
     }
 
+    onParentRectTransformChanged(_comp: IRectTransform) {
+        // When the parent rect transform changes we have to to recalculate our transform
+        this._transformNeedsUpdate = true;
+        this.applyTransform();
+    }
+
+    private _parentRectTransform?: RectTransform;
+
     private applyTransform() {
         const uiobject = this.shadowComponent;
         if (!uiobject) return;
         this._transformNeedsUpdate = false;
+        this._parentRectTransform = GameObject.getComponentInParent(this.gameObject.parent!, RectTransform) as RectTransform;
+
+        if (debug) console.log("RectTransform ApplyTransform", this.name, this.isRoot());
 
         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
+            if (this.gameObject.scale.x || this.gameObject.scale.y || this.gameObject.scale.z)
+                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._copyMatrixAfterRender = true;
         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)) {
+            if (comp === this) continue;
+            const callback = comp as any as IRectTransformChangedReceiver;
+            if (callback.onParentRectTransformChanged)
+                callback.onParentRectTransformChanged(this);
+        }
     }
 
+    private _copyMatrixAfterRender: boolean = false;
+
     markDirty() {
         this._transformNeedsUpdate = true;
     }
 
+
     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);
+        // TODO: instead of checking matrix again it would perhaps be better to test if position, rotation or scale have changed individually?
+        const transformChanged = this.gameObject.matrixWorldNeedsUpdate || this._transformNeedsUpdate || !this.lastMatrixWorld.equals(this.gameObject.matrixWorld) || !this.lastMatrix.equals(this.gameObject.matrix);
+        if (transformChanged) 
+        {
             this.applyTransform();
         }
-        // }
-        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 });
+    }
+
+    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;
+        }
+    }
+
+    /** 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 +278,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 +297,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;
+    }
 }