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

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

@@ -1,24 +1,48 @@
+import { Behaviour } from "../Component";
 import { IComponent } from "../../engine/engine_types";
 
 export interface ICanvas {
-    get screenspace() : boolean;
+    get isCanvas(): boolean;
+    get screenspace(): boolean;
+    registerTransform(rt: IRectTransform);
+    unregisterTransform(rt: IRectTransform);
 }
 
 export interface ICanvasGroup {
-    get isCanvasGroup() : boolean;
+    get isCanvasGroup(): boolean;
     blocksRaycasts: boolean;
     interactable: boolean;
 }
 
 export interface IGraphic extends IComponent {
-    get isGraphic() : boolean;
+    get isGraphic(): boolean;
     raycastTarget: boolean;
 }
 
 export interface IRectTransform extends IComponent {
-
+    get isDirty(): boolean;
+    markDirty();
+    updateTransform();
 }
 
 export interface IRectTransformChangedReceiver {
-    onParentRectTransformChanged(comp : IRectTransform) : void;
-}
+    onParentRectTransformChanged(comp: IRectTransform): void;
+}
+
+export interface ILayoutGroup extends IComponent {
+    get isLayoutGroup(): boolean;
+    get isDirty(): boolean;
+    updateLayout();
+}
+
+// export abstract class LayoutGroup extends Behaviour implements IRectTransformChangedReceiver, ILayoutGroup {
+//     get isLayoutGroup(): boolean {
+//         return true;
+//     }
+//     updateLayout() {
+//         throw new Error("Method not implemented.");
+//     }
+//     onParentRectTransformChanged(comp: IRectTransform): void {
+//         throw new Error("Method not implemented.");
+//     }
+// }

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

@@ -1,17 +1,316 @@
-import { Behaviour } from "../Component";
+import { ILayoutGroup, IRectTransform, IRectTransformChangedReceiver } from "./Interfaces";
+import { Behaviour, GameObject } from "../Component";
+import { serializable } from "../../engine/engine_serialization";
+import { Canvas } from "./Canvas";
+import { RectTransform } from "./RectTransform";
+import { getParam } from "../../engine/engine_utils";
 
-export class LayoutGroup extends Behaviour {
+const debug = getParam("debuguilayout");
+
+export class Padding {
+    @serializable()
+    left: number = 0;
+    @serializable()
+    right: number = 0;
+    @serializable()
+    top: number = 0;
+    @serializable()
+    bottom: number = 0;
+
+    get vertical() {
+        return this.top + this.bottom;
+    }
+    get horizontal() {
+        return this.left + this.right;
+    }
+}
+
+export enum TextAnchor {
+    UpperLeft = 0,
+    UpperCenter = 1,
+    UpperRight = 2,
+    MiddleLeft = 3,
+    MiddleCenter = 4,
+    MiddleRight = 5,
+    LowerLeft = 6,
+    LowerCenter = 7,
+    LowerRight = 8,
+    Custom = 9
+}
+
+enum Axis {
+    Horizontal = "x",
+    Vertical = "y"
+}
+
+export abstract class LayoutGroup extends Behaviour implements ILayoutGroup {
+
+    private _rectTransform: RectTransform | null = null;
+    private get rectTransform() {
+        return this._rectTransform;
+    }
+
+    onParentRectTransformChanged(_comp: IRectTransform): void {
+        this._needsUpdate = true;
+    }
+
+    private _needsUpdate: boolean = false;
+    get isDirty(): boolean {
+        return this._needsUpdate;
+    }
+
+    get isLayoutGroup(): boolean {
+        return true;
+    }
+
+    updateLayout() {
+        if (!this._rectTransform) return;
+        if (debug)
+            console.warn("Layout Update", this.context.time.frame, this.name);
+        this._needsUpdate = false;
+        this.onCalculateLayout(this._rectTransform);
+    }
+
+    // onBeforeRender(): void {
+    //     this.updateLayout();
+    // }
+
+    @serializable()
+    childAlignment: TextAnchor = TextAnchor.UpperLeft;
+
+    @serializable()
     reverseArrangement: boolean = false;
+
+    @serializable()
+    spacing: number = 0;
+    @serializable(Padding)
+    padding!: Padding;
+
+    @serializable()
+    minWidth: number = 0;
+    @serializable()
+    minHeight: number = 0;
+
+    @serializable()
+    flexibleHeight: number = 0;
+    @serializable()
+    flexibleWidth: number = 0;
+
+    @serializable()
+    preferredHeight: number = 0;
+    @serializable()
+    preferredWidth: number = 0;
+
+    start() {
+        this._needsUpdate = true;
+    }
+
+    onEnable(): void {
+        if(debug) console.log(this.name, this);
+        this._rectTransform = this.gameObject.getComponent(RectTransform);
+        const canvas = this.gameObject.getComponentInParent(Canvas);
+        if (canvas) {
+            canvas.registerLayoutGroup(this);
+        }
+        this._needsUpdate = true;
+    }
+
+    onDisable(): void {
+        const canvas = this.gameObject.getComponentInParent(Canvas);
+        if (canvas) {
+            canvas.unregisterLayoutGroup(this);
+        }
+    }
+
+    protected abstract onCalculateLayout(rt: RectTransform);
+
+
+
+    // for animation:
+    private set m_Spacing(val) {
+        if (val === this.spacing) return;
+        this._needsUpdate = true;
+        this.spacing = val;
+    }
+    get m_Spacing() {
+        return this.spacing;
+    }
 }
 
-export class VerticalLayoutGroup extends LayoutGroup {
+export abstract class HorizontalOrVerticalLayoutGroup extends LayoutGroup {
+
+    @serializable()
+    childControlHeight: boolean = true;
+    @serializable()
+    childControlWidth: boolean = true;
+    @serializable()
+    childForceExpandHeight: boolean = false;
+    @serializable()
+    childForceExpandWidth: boolean = false;
+    @serializable()
+    childScaleHeight: boolean = false;
+    @serializable()
+    childScaleWidth: boolean = false;
+
+    protected abstract get primaryAxis(): Axis;
+
+    protected onCalculateLayout(rect: RectTransform) {
+        const axis = this.primaryAxis;
+
+        const totalWidth = rect.width;
+        let actualWidth = totalWidth;
+        const totalHeight = rect.height;
+        let actualHeight = totalHeight;
+        actualWidth -= this.padding.horizontal;
+        actualHeight -= this.padding.vertical;
+
+        // console.log(rt.name, "width=" + totalWidth + ", height=" + totalHeight)
+
+        const paddingAxis = axis === Axis.Horizontal ? this.padding.horizontal : this.padding.vertical;
+        const isHorizontal = axis === Axis.Horizontal;
+        const isVertical = !isHorizontal;
+        const otherAxis = isHorizontal ? "y" : "x";
+        const controlSize = isHorizontal ? this.childControlWidth : this.childControlHeight;
+        const controlSizeOtherAxis = isHorizontal ? this.childControlHeight : this.childControlWidth;
+        const forceExpandSize = isHorizontal ? this.childForceExpandWidth : this.childForceExpandHeight;
+        const forceExpandSizeOtherAxis = isHorizontal ? this.childForceExpandHeight : this.childForceExpandWidth;
+        const actualExpandSize = isHorizontal ? actualHeight : actualWidth;
+        const totalSpace = isHorizontal ? totalWidth : totalHeight;
+        // 0 is left/top, 0.5 is middle, 1 is right/bottom
+        const alignmentOnAxis = 0.5 * (isHorizontal ? this.childAlignment % 3 : Math.floor(this.childAlignment / 3));
+
+        let start = 0;
+        if (isHorizontal) {
+            start += this.padding.left;
+        }
+        else
+            start += this.padding.top;
+
+
+        // Calculate total size of the elements
+        let totalChildSize = 0;
+        let actualRectTransformChildCount = 0;
+        for (let i = 0; i < this.gameObject.children.length; i++) {
+            const ch = this.gameObject.children[i];
+            const rt = GameObject.getComponent(ch, RectTransform);
+            if (rt?.activeAndEnabled) {
+                actualRectTransformChildCount += 1;
+                if (isHorizontal) {
+                    totalChildSize += rt.width;
+                }
+                else {
+                    totalChildSize += rt.height;
+                }
+            }
+        }
+
+        let sizePerChild = 0;
+        const totalSpacing = this.spacing * (actualRectTransformChildCount - 1)
+        if (forceExpandSize || controlSize) {
+            let size = 0;
+            if (isHorizontal) {
+                size = actualWidth -= totalSpacing;
+            }
+            else {
+                size = actualHeight -= totalSpacing;
+            }
+            if (actualRectTransformChildCount > 0)
+                sizePerChild = size / actualRectTransformChildCount;
+        }
+
+        let leftOffset = 0;
+        leftOffset += this.padding.left;
+        leftOffset -= this.padding.right;
+
+        if (alignmentOnAxis !== 0) {
+            start = totalSpace - totalChildSize;
+            start *= alignmentOnAxis;
+            start -= totalSpacing * alignmentOnAxis;
+            if (isHorizontal) {
+                start -= this.padding.right * alignmentOnAxis;
+                start += this.padding.left * (1 - alignmentOnAxis);
+                if (start < this.padding.left) {
+                    start = this.padding.left;
+                }
+            }
+            else {
+                start -= this.padding.bottom * alignmentOnAxis;
+                start += this.padding.top * (1 - alignmentOnAxis);
+                if (start < this.padding.top) {
+                    start = this.padding.top;
+                }
+            }
+        }
+
+        // Apply layout
+        let k = 0;
+        for (let i = 0; i < this.gameObject.children.length; i++) {
+            const ch = this.gameObject.children[i];
+            const rt = GameObject.getComponent(ch, RectTransform);
+            if (rt?.activeAndEnabled) {
+                rt.pivot?.set(.5, .5);
+                // Horizontal padding
+                const x = totalWidth * .5 + leftOffset * .5;
+                if (rt.anchoredPosition.x !== x)
+                    rt.anchoredPosition.x = x;
+                const y = totalHeight * -.5
+                if (rt.anchoredPosition.y !== y)
+                    rt.anchoredPosition.y = y;
+                // Set the size for the secondary axis (e.g. height for a horizontal layout group)
+                if (forceExpandSizeOtherAxis && controlSizeOtherAxis && rt.sizeDelta[otherAxis] !== actualExpandSize) {
+                    rt.sizeDelta[otherAxis] = actualExpandSize;
+                }
+                // Set the size for the primary axis (e.g. width for a horizontal layout group)
+                if (forceExpandSize && controlSize && rt.sizeDelta[axis] !== sizePerChild) {
+                    rt.sizeDelta[axis] = sizePerChild
+                }
+
+                const size = isHorizontal ? rt.width : rt.height;
+                let halfSize = size * .5;
+                start += halfSize;
+
+                if (forceExpandSize) {
+                    let preferredStart = sizePerChild * (k + 1) - sizePerChild * .5;
+                    if (preferredStart > start)
+                        start = preferredStart;
+                }
+
+                let value = start;
+                if (axis === Axis.Vertical)
+                    value = -value;
+                // Only set the position if it's not already the correct one to avoid triggering the rectTransform dirty event
+                if (rt.anchoredPosition[axis] !== value) {
+                    rt.anchoredPosition[axis] = value
+                }
+
+                start += halfSize;
+                start += this.spacing;
+                k += 1;
+            }
+        }
+    }
+
+
+}
+
+export class VerticalLayoutGroup extends HorizontalOrVerticalLayoutGroup {
+
+    protected get primaryAxis() {
+        return Axis.Vertical;
+    }
 
 }
 
-export class HorizontalLayoutGroup extends LayoutGroup {
+export class HorizontalLayoutGroup extends HorizontalOrVerticalLayoutGroup {
+
+    protected get primaryAxis() {
+        return Axis.Horizontal;
+    }
 
 }
 
 export class GridLayoutGroup extends LayoutGroup {
+    protected onCalculateLayout() {
+    }
 
 }

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

@@ -7,10 +7,11 @@ 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 { ICanvas, IRectTransform, IRectTransformChangedReceiver, ILayoutGroup } from "./Interfaces";
 import { GameObject } from '../Component';
 
 const debug = getParam("debugui");
+const debugLayout = getParam("debuguilayout");
 
 export class Size {
     width!: number;
@@ -30,7 +31,7 @@ const tempQuaternion = new Quaternion();
 
 export class RectTransform extends BaseUIComponent implements IRectTransform, IRectTransformChangedReceiver {
 
-    offset: number = 0.05;
+    offset: number = 0.1;
 
     // @serializable(Object3D)
     // root? : Object3D;
@@ -94,14 +95,13 @@ export class RectTransform extends BaseUIComponent implements IRectTransform, IR
         return this.sizeDelta.y;
     }
 
-    private lastMatrixWorld!: Matrix4;
+    // 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;
@@ -112,9 +112,10 @@ export class RectTransform extends BaseUIComponent implements IRectTransform, IR
 
         // 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; });
+        // 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
@@ -135,28 +136,67 @@ export class RectTransform extends BaseUIComponent implements IRectTransform, IR
         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) {
+    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);
+    }
+
+    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;
-        this.applyTransform();
+        // 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;
 
-    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());
+        this._transformNeedsUpdate = false;
+        this.lastMatrix.copy(this.gameObject.matrix);
+
+        if (debugLayout) console.warn("RectTransform → ApplyTransform", this.name + " because " + reason);
 
         if (!this.isRoot()) {
             // Reset temp matrix
@@ -183,8 +223,7 @@ export class RectTransform extends BaseUIComponent implements IRectTransform, IR
             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);
+            uiobject.matrix.scale(this.gameObject.scale);
         }
         else {
             // We have to rotate the canvas when it's in worldspace
@@ -192,42 +231,28 @@ export class RectTransform extends BaseUIComponent implements IRectTransform, IR
             if (!canvas.screenspace) uiobject.rotation.y = Math.PI;
         }
 
-        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)) {
+        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 (callback.onParentRectTransformChanged) {
+                // if (debugLayout) console.log(`RectTransform ${this.name} → call`, comp.name + "/" + comp.constructor.name)
                 callback.onParentRectTransformChanged(this);
+            }
         }
-    }
-
-    private _copyMatrixAfterRender: boolean = false;
-
-    markDirty() {
-        this._transformNeedsUpdate = true;
-    }
-
 
-    onBeforeRender() {
-        // 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();
-        }
+        // const layout = GameObject.getComponentInParent(this.gameObject, ILayoutGroup);
     }
 
-    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);
-        }
-    }
+    // 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) {

package/src/engine-components/utils/LookAt.ts

@@ -1,9 +1,13 @@
 import { serializable } from "../../engine/engine_serialization";
 import { Behaviour } from "../Component";
-import { Object3D } from "three";
-import { getWorldPosition, lookAtInverse } from "../../engine/engine_three_utils";
+import { Matrix4, Object3D, Quaternion, Vector3 } from "three";
+import { getWorldPosition, getWorldQuaternion, setWorldQuaternion } from "../../engine/engine_three_utils";
 
-export class LookAt extends Behaviour {
+import { USDObject } from "../../engine-components/export/usdz/ThreeUSDZExporter";
+import { UsdzBehaviour } from "../../engine-components/export/usdz/extensions/behavior/Behaviour";
+import { ActionBuilder, BehaviorModel, TriggerBuilder, USDVec3 } from "../../engine-components/export/usdz/extensions/behavior/BehavioursBuilder";
+
+export class LookAt extends Behaviour implements UsdzBehaviour {
 
     @serializable(Object3D)
     target?: Object3D;
@@ -11,11 +15,60 @@ export class LookAt extends Behaviour {
     @serializable()
     invertForward: boolean = false;
 
+    @serializable()
+    keepUpDirection: boolean = true;
+
+    @serializable()
+    copyTargetRotation: boolean = false;
+
+    private static flipYQuat: Quaternion = new Quaternion().setFromAxisAngle(new Vector3(0, 1, 0), Math.PI);
+
     onBeforeRender(): void {
-        if (!this.target) return;
-        if (!this.invertForward)
-            this.gameObject.lookAt(getWorldPosition(this.target!));
+        let target: Object3D | null | undefined = this.target;
+        if (!target) target = this.context.mainCamera;
+        if (!target) return;
+        
+        const lookTarget = getWorldPosition(target);
+        const lookFrom = getWorldPosition(this.gameObject);
+        
+        if (this.keepUpDirection)
+            lookTarget.y = lookFrom.y;
+        
+        if (this.copyTargetRotation)
+            setWorldQuaternion(this.gameObject, getWorldQuaternion(target));
         else
-            lookAtInverse(this.gameObject, getWorldPosition(this.target!));
+            this.gameObject.lookAt(lookTarget);
+        
+        if (this.invertForward)
+            this.gameObject.quaternion.multiply(LookAt.flipYQuat);
+    }
+
+    createBehaviours(ext, model: USDObject, _context) {
+        if (model.uuid === this.gameObject.uuid) {
+            let alignmentTarget = model;
+            
+            // not entirely sure why we need to do this - looks like LookAt with up vector doesn't work properly in
+            // QuickLook, so we need to introduce an empty parent and rotate the model by 90° around Y
+            if (this.keepUpDirection) {
+                const parent = USDObject.createEmptyParent(model);
+                alignmentTarget = parent;
+
+                // rotate by 90° - counter-rotation on the parent makes sure 
+                // that without Preliminary Behaviours it still looks right
+                parent.matrix.multiply(new Matrix4().makeRotationZ(Math.PI / 2));
+                model.matrix.multiply(new Matrix4().makeRotationZ(-Math.PI / 2));
+            }
+
+            const lookAt = new BehaviorModel("lookat " + this.name,
+                TriggerBuilder.sceneStartTrigger(),
+                ActionBuilder.lookAtCameraAction(
+                    alignmentTarget, 
+                    undefined, 
+                    this.invertForward ? USDVec3.back : USDVec3.forward, 
+                    this.keepUpDirection ? USDVec3.up : USDVec3.zero
+                ),
+            );
+            ext.addBehavior(lookAt);
+        }
     }
 }