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

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

@@ -11,6 +11,7 @@ import { EventSystem } from "./EventSystem";
 import * as ThreeMeshUI from 'three-mesh-ui'
 import { getParam } from "../../engine/engine_utils";
 import { LayoutGroup } from "./Layout";
+import { Mathf } from "../../engine/engine_math";
 
 export enum RenderMode {
     ScreenSpaceOverlay = 0,
@@ -127,6 +128,9 @@ export class Canvas extends UIRootComponent implements ICanvas {
     awake() {
         //@ts-ignore
         this.shadowComponent = this.gameObject;
+        this.previousParent = this.gameObject.parent;
+        if (debugLayout)
+            console.log("Canvas.Awake()", this.previousParent?.name + "/" + this.gameObject.name)
         super.awake();
     }
 
@@ -137,7 +141,8 @@ export class Canvas extends UIRootComponent implements ICanvas {
     onEnable() {
         super.onEnable();
         this._updateRenderSettingsRoutine = undefined;
-        this.onRenderSettingsChanged();
+        this._lastMatrixWorld = new Matrix4();
+        this.onUpdateRenderMode();
         document.addEventListener("resize", this._boundRenderSettingsChanged);
         // We want to run AFTER all regular onBeforeRender callbacks
         this.context.pre_render_callbacks.push(this.onBeforeRenderRoutine);
@@ -185,9 +190,11 @@ export class Canvas extends UIRootComponent implements ICanvas {
     }
 
     onBeforeRenderRoutine = () => {
+        this.previousParent = this.gameObject.parent;
+        // console.log(this.previousParent?.name + "/" + this.gameObject.name);
+
         if (this.renderOnTop) {
             // This is just a test but in reality it should be combined with all world canvases with render on top in one render pass
-            this.previousParent = this.gameObject.parent;
             this.gameObject.removeFromParent();
         }
         else {
@@ -201,8 +208,13 @@ export class Canvas extends UIRootComponent implements ICanvas {
     }
 
     onAfterRenderRoutine = () => {
-        if (this.renderOnTop && this.previousParent && this.context.mainCamera) {
-            this.previousParent.add(this.gameObject);
+        if ((this.screenspace || this.renderMode) && this.previousParent && this.context.mainCamera) {
+            if (this.screenspace) {
+                const camObj = this.context.mainCamera;
+                camObj?.add(this.gameObject);
+            } else {
+                this.previousParent.add(this.gameObject);
+            }
             this.context.renderer.autoClear = false;
             this.context.renderer.clearDepth();
             this.onUpdateRenderMode(true);
@@ -212,6 +224,7 @@ export class Canvas extends UIRootComponent implements ICanvas {
             EventSystem.ensureUpdateMeshUI(ThreeMeshUI, this.context);
             this.context.renderer.render(this.gameObject, this.context.mainCamera);
             this.context.renderer.autoClear = true;
+            this.previousParent.add(this.gameObject);
         }
         this._lastMatrixWorld?.copy(this.gameObject.matrixWorld);
     }
@@ -278,7 +291,10 @@ export class Canvas extends UIRootComponent implements ICanvas {
         }
         this._activeRenderMode = this._renderMode;
         let camera = this.context.mainCameraComponent;
-        let planeDistance: number = camera?.farClipPlane ?? 100;
+        let planeDistance: number = 10;
+        if (camera && camera.nearClipPlane > 0 && camera.farClipPlane > 0) {
+            planeDistance = Mathf.lerp(camera.nearClipPlane, camera.farClipPlane, .5);
+        }
         if (this._renderMode === RenderMode.ScreenSpaceCamera) {
             if (this.worldCamera)
                 camera = this.worldCamera as Camera;
@@ -295,15 +311,12 @@ export class Canvas extends UIRootComponent implements ICanvas {
                 // showBalloonWarning("Screenspace Canvas is not supported yet. Please use worldspace");
                 if (!camera) return;
 
-                const canvas = this.gameObject;
-                const camObj = camera.gameObject;
-                camObj?.add(canvas);
                 // we move the plane SLIGHTLY closer to be sure not to cull the canvas
-                const plane = planeDistance - .1;
-                canvas.position.x = 0;
-                canvas.position.y = 0;
-                canvas.position.z = -plane;
-                canvas.quaternion.identity();
+                const plane = planeDistance + .01;
+                this.gameObject.position.x = 0;
+                this.gameObject.position.y = 0;
+                this.gameObject.position.z = -plane;
+                this.gameObject.quaternion.identity();
 
                 const rect = this.gameObject.getComponent(RectTransform)!;
                 let hasChanged = false;
@@ -316,10 +329,10 @@ export class Canvas extends UIRootComponent implements ICanvas {
 
                 const vFOV = camera.fieldOfView! * Math.PI / 180;
                 const h = 2 * Math.tan(vFOV / 2) * Math.abs(plane);
-                canvas.scale.x = h / this.context.domHeight;
-                canvas.scale.y = h / this.context.domHeight;
+                this.gameObject.scale.x = h / this.context.domHeight;
+                this.gameObject.scale.y = h / this.context.domHeight;
                 // Set scale.z, otherwise small offsets in screenspace mode have different visual results based on export scale and other settings
-                canvas.scale.z = .01;
+                this.gameObject.scale.z = .01;
 
                 if (hasChanged) {
                     rect.sizeDelta.x = this.context.domWidth;

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

@@ -164,7 +164,8 @@ export abstract class HorizontalOrVerticalLayoutGroup extends LayoutGroup {
         actualWidth -= this.padding.horizontal;
         actualHeight -= this.padding.vertical;
 
-        // console.log(rt.name, "width=" + totalWidth + ", height=" + totalHeight)
+        // if (rect.name === "Title")
+        //     console.log(rect.name, "width=" + totalWidth + ", height=" + totalHeight, rect.anchoredPosition.x)
 
         const paddingAxis = axis === Axis.Horizontal ? this.padding.horizontal : this.padding.vertical;
         const isHorizontal = axis === Axis.Horizontal;
@@ -243,7 +244,7 @@ export abstract class HorizontalOrVerticalLayoutGroup extends LayoutGroup {
         }
 
         // Apply layout
-        let k = 0;
+        let k = 1;
         for (let i = 0; i < this.gameObject.children.length; i++) {
             const ch = this.gameObject.children[i];
             const rt = GameObject.getComponent(ch, RectTransform);
@@ -269,10 +270,14 @@ export abstract class HorizontalOrVerticalLayoutGroup extends LayoutGroup {
                 let halfSize = size * .5;
                 start += halfSize;
 
+                // TODO: this isnt correct yet!
                 if (forceExpandSize) {
-                    let preferredStart = sizePerChild * (k + 1) - sizePerChild * .5;
-                    if (preferredStart > start)
-                        start = preferredStart;
+                    // this is the center of the cell
+                    let preferredStart = sizePerChild * k - sizePerChild * .5;
+                    if (preferredStart > start) {
+                        start = preferredStart - sizePerChild * .5 + size + this.padding.left;
+                        start -= halfSize;
+                    }
                 }
 
                 let value = start;

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

@@ -31,7 +31,7 @@ const tempQuaternion = new Quaternion();
 
 export class RectTransform extends BaseUIComponent implements IRectTransform, IRectTransformChangedReceiver {
 
-    offset: number = 0.1;
+    offset: number = .01;
 
     // @serializable(Object3D)
     // root? : Object3D;
@@ -103,7 +103,8 @@ export class RectTransform extends BaseUIComponent implements IRectTransform, IR
     awake() {
         super.awake();
         this.lastMatrix = new Matrix4();
-        this.rectBlock = new Object3D();;
+        this.rectBlock = new Object3D();
+        // Is this legacy? Not sure if this is still needed
         this.rectBlock.position.z = .1;
         this.rectBlock.name = this.name;
 
@@ -116,6 +117,8 @@ export class RectTransform extends BaseUIComponent implements IRectTransform, IR
         onChange(this, "_anchoredPosition", () => { this.markDirty(); });
         onChange(this, "sizeDelta", () => { this.markDirty(); });
         onChange(this, "pivot", () => { this.markDirty(); });
+        onChange(this, "anchorMin", () => { this.markDirty(); });
+        onChange(this, "anchorMax", () => { 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
@@ -191,8 +194,10 @@ export class RectTransform extends BaseUIComponent implements IRectTransform, IR
 
         const uiobject = this.shadowComponent;
         if (!uiobject) return;
-        this._parentRectTransform = GameObject.getComponentInParent(this.gameObject.parent!, RectTransform) as RectTransform;
-
+        if (this.gameObject.parent)
+            this._parentRectTransform = GameObject.getComponentInParent(this.gameObject.parent, RectTransform) as RectTransform;
+        else
+            this._parentRectTransform = undefined;
         this._transformNeedsUpdate = false;
         this.lastMatrix.copy(this.gameObject.matrix);