@galacean/engine-ui 1.5.14 → 1.6.0-alpha.0

package/dist/browser.js

@@ -516,20 +516,46 @@
         return ResolutionAdaptationMode;
     }({});
 
+    /** Horizontal alignment mode. */ var HorizontalAlignmentMode = /*#__PURE__*/ function(HorizontalAlignmentMode) {
+        /** No horizontal alignment. */ HorizontalAlignmentMode[HorizontalAlignmentMode["None"] = 0] = "None";
+        /** Left-aligned, `alignLeft` drives `position.x`. */ HorizontalAlignmentMode[HorizontalAlignmentMode["Left"] = 1] = "Left";
+        /** Right-aligned, `alignRight` drives `position.x`. */ HorizontalAlignmentMode[HorizontalAlignmentMode["Right"] = 2] = "Right";
+        /** Horizontal stretch, `alignLeft` and `alignRight` drive `position.x` and `size.x`. */ HorizontalAlignmentMode[HorizontalAlignmentMode["LeftAndRight"] = 3] = "LeftAndRight";
+        /** Center-aligned, `alignCenter` drives `position.x`. */ HorizontalAlignmentMode[HorizontalAlignmentMode["Center"] = 4] = "Center";
+        return HorizontalAlignmentMode;
+    }({});
+
+    /** Vertical alignment mode. */ var VerticalAlignmentMode = /*#__PURE__*/ function(VerticalAlignmentMode) {
+        /** No vertical alignment. */ VerticalAlignmentMode[VerticalAlignmentMode["None"] = 0] = "None";
+        /** Top-aligned, `alignTop` drives `position.y`. */ VerticalAlignmentMode[VerticalAlignmentMode["Top"] = 1] = "Top";
+        /** Bottom-aligned, `alignBottom` drives `position.y`. */ VerticalAlignmentMode[VerticalAlignmentMode["Bottom"] = 2] = "Bottom";
+        /** Vertical stretch, `alignTop` and `alignBottom` drive `position.y` and `size.y`. */ VerticalAlignmentMode[VerticalAlignmentMode["TopAndBottom"] = 3] = "TopAndBottom";
+        /** Middle-aligned, `alignMiddle` drives `position.y`. */ VerticalAlignmentMode[VerticalAlignmentMode["Middle"] = 4] = "Middle";
+        return VerticalAlignmentMode;
+    }({});
+
     /**
      * The Transform component exclusive to the UI element.
      */ var UITransform = /*#__PURE__*/ function(Transform) {
         _inherits(UITransform, Transform);
         function UITransform(entity) {
             var _this;
-            _this = Transform.call(this, entity) || this, _this._size = new engine.Vector2(100, 100), _this._pivot = new engine.Vector2(0.5, 0.5);
+            _this = Transform.call(this, entity) || this, _this._size = new engine.Vector2(100, 100), _this._pivot = new engine.Vector2(0.5, 0.5), _this._rect = new engine.Rect(-50, -50, 100, 100), _this._alignLeft = 0, _this._alignRight = 0, _this._alignCenter = 0, _this._alignTop = 0, _this._alignBottom = 0, _this._alignMiddle = 0, _this._horizontalAlignment = HorizontalAlignmentMode.None, _this._verticalAlignment = VerticalAlignmentMode.None;
+            _this._onSizeChanged = _this._onSizeChanged.bind(_this);
+            _this._onPivotChanged = _this._onPivotChanged.bind(_this);
             // @ts-ignore
-            _this._size._onValueChanged = _this._onSizeChange.bind(_this);
+            _this._size._onValueChanged = _this._onSizeChanged;
             // @ts-ignore
-            _this._pivot._onValueChanged = _this._onPivotChange.bind(_this);
+            _this._pivot._onValueChanged = _this._onPivotChanged;
             return _this;
         }
         var _proto = UITransform.prototype;
+        /**
+       * @internal
+       */ _proto._parentChange = function _parentChange() {
+            this._isParentDirty = true;
+            this._updateWorldFlagWithParentRectChange(engine.TransformModifyFlags.WmWpWeWqWsWus);
+        };
         // @ts-ignore
         _proto._cloneTo = function _cloneTo(target, srcRoot, targetRoot) {
             // @ts-ignore
@@ -537,14 +563,139 @@
             target.size.copyFrom(this._size);
             target.pivot.copyFrom(this._pivot);
         };
-        _proto._onSizeChange = function _onSizeChange() {
+        _proto._onLocalMatrixChanging = function _onLocalMatrixChanging() {
+            this._updatePositionByAlignment();
+        };
+        _proto._onWorldMatrixChange = function _onWorldMatrixChange() {
+            !this._horizontalAlignment && !this._verticalAlignment && Transform.prototype._onWorldMatrixChange.call(this);
+        };
+        _proto._onPositionChanged = function _onPositionChanged() {
+            (this._horizontalAlignment || this._verticalAlignment) && this._updatePositionByAlignment();
+            Transform.prototype._onPositionChanged.call(this);
+        };
+        _proto._onWorldPositionChanged = function _onWorldPositionChanged() {
+            Transform.prototype._onWorldPositionChanged.call(this);
+            if (this._horizontalAlignment || this._verticalAlignment) {
+                this._setDirtyFlagTrue(engine.TransformModifyFlags.WorldPosition);
+            }
+        };
+        _proto._updatePositionByAlignment = function _updatePositionByAlignment() {
+            var _this__getParentTransform;
+            var parentRect = (_this__getParentTransform = this._getParentTransform()) == null ? void 0 : _this__getParentTransform._rect;
+            if (parentRect) {
+                var position = this.position;
+                // @ts-ignore
+                position._onValueChanged = null;
+                var rect = this._rect;
+                switch(this._horizontalAlignment){
+                    case HorizontalAlignmentMode.Left:
+                    case HorizontalAlignmentMode.LeftAndRight:
+                        position.x = parentRect.x - rect.x + this._alignLeft;
+                        break;
+                    case HorizontalAlignmentMode.Center:
+                        position.x = parentRect.x + parentRect.width * 0.5 - rect.x - rect.width * 0.5 + this._alignCenter;
+                        break;
+                    case HorizontalAlignmentMode.Right:
+                        position.x = parentRect.x + parentRect.width - rect.x - rect.width - this._alignRight;
+                        break;
+                }
+                switch(this._verticalAlignment){
+                    case VerticalAlignmentMode.Top:
+                        position.y = parentRect.y + parentRect.height - rect.y - rect.height - this._alignTop;
+                        break;
+                    case VerticalAlignmentMode.Middle:
+                        position.y = parentRect.y + parentRect.height * 0.5 - rect.y - rect.height * 0.5 + this._alignMiddle;
+                        break;
+                    case VerticalAlignmentMode.Bottom:
+                    case VerticalAlignmentMode.TopAndBottom:
+                        position.y = parentRect.y - rect.y + this._alignBottom;
+                        break;
+                }
+                // @ts-ignore
+                position._onValueChanged = this._onPositionChanged;
+            }
+        };
+        _proto._updateSizeByAlignment = function _updateSizeByAlignment() {
+            var _this__getParentTransform;
+            var parentRect = (_this__getParentTransform = this._getParentTransform()) == null ? void 0 : _this__getParentTransform._rect;
+            if (parentRect) {
+                var size = this._size;
+                // @ts-ignore
+                size._onValueChanged = null;
+                // The values of size must be greater than 0
+                if (this._horizontalAlignment === HorizontalAlignmentMode.LeftAndRight) {
+                    size.x = Math.max(parentRect.width - this._alignLeft - this._alignRight, 0);
+                }
+                if (this._verticalAlignment === VerticalAlignmentMode.TopAndBottom) {
+                    size.y = Math.max(parentRect.height - this._alignTop - this._alignBottom, 0);
+                }
+                // @ts-ignore
+                size._onValueChanged = this._onSizeChanged;
+            }
+        };
+        _proto._updateRectByPivot = function _updateRectByPivot() {
+            var _this = this, size = _this.size, pivot = _this._pivot;
+            var x = -pivot.x * size.x;
+            var y = -pivot.y * size.y;
+            this._rect.set(x, y, size.x, size.y);
+        };
+        _proto._onSizeChanged = function _onSizeChanged() {
+            if (this._horizontalAlignment === HorizontalAlignmentMode.LeftAndRight || this._verticalAlignment === VerticalAlignmentMode.TopAndBottom) {
+                this._updateSizeByAlignment();
+            }
+            this._updateRectByPivot();
+            this._updateWorldFlagWithSelfRectChange();
             // @ts-ignore
             this._entity._updateFlagManager.dispatch(512);
         };
-        _proto._onPivotChange = function _onPivotChange() {
+        _proto._onPivotChanged = function _onPivotChanged() {
+            this._updateRectByPivot();
+            this._updateWorldFlagWithSelfRectChange();
             // @ts-ignore
             this._entity._updateFlagManager.dispatch(1024);
         };
+        _proto._updateWorldFlagWithSelfRectChange = function _updateWorldFlagWithSelfRectChange() {
+            var worldFlags = 0;
+            if (this._horizontalAlignment || this._verticalAlignment) {
+                this._updatePositionByAlignment();
+                this._setDirtyFlagTrue(engine.TransformModifyFlags.LocalMatrix);
+                worldFlags = engine.TransformModifyFlags.WmWp;
+                !this._isContainDirtyFlags(worldFlags) && this._worldAssociatedChange(worldFlags);
+            }
+            var children = this.entity.children;
+            for(var i = 0, n = children.length; i < n; i++){
+                var _children_i_transform__updateWorldFlagWithParentRectChange, _children_i_transform;
+                (_children_i_transform = children[i].transform) == null ? void 0 : (_children_i_transform__updateWorldFlagWithParentRectChange = _children_i_transform._updateWorldFlagWithParentRectChange) == null ? void 0 : _children_i_transform__updateWorldFlagWithParentRectChange.call(_children_i_transform, worldFlags);
+            }
+        };
+        _proto._updateWorldFlagWithParentRectChange = function _updateWorldFlagWithParentRectChange(flags, parentChange) {
+            if (parentChange === void 0) parentChange = true;
+            var selfChange = false;
+            if (parentChange) {
+                var _this = this, horizontalAlignment = _this._horizontalAlignment, verticalAlignment = _this._verticalAlignment;
+                if (horizontalAlignment || verticalAlignment) {
+                    if (horizontalAlignment === HorizontalAlignmentMode.LeftAndRight || verticalAlignment === VerticalAlignmentMode.TopAndBottom) {
+                        this._updateSizeByAlignment();
+                        this._updateRectByPivot();
+                        selfChange = true;
+                    }
+                    this._updatePositionByAlignment();
+                    this._setDirtyFlagTrue(engine.TransformModifyFlags.LocalMatrix);
+                    flags |= engine.TransformModifyFlags.WmWp;
+                }
+            }
+            var containDirtyFlags = this._isContainDirtyFlags(flags);
+            !containDirtyFlags && this._worldAssociatedChange(flags);
+            if (selfChange || !containDirtyFlags) {
+                var children = this.entity.children;
+                for(var i = 0, n = children.length; i < n; i++){
+                    var _children_i_transform__updateWorldFlagWithParentRectChange, _children_i_transform;
+                    (_children_i_transform = children[i].transform) == null ? void 0 : (_children_i_transform__updateWorldFlagWithParentRectChange = _children_i_transform._updateWorldFlagWithParentRectChange) == null ? void 0 : _children_i_transform__updateWorldFlagWithParentRectChange.call(_children_i_transform, flags, selfChange);
+                }
+            }
+            // @ts-ignore
+            selfChange && this._entity._updateFlagManager.dispatch(512);
+        };
         _create_class(UITransform, [
             {
                 key: "size",
@@ -571,6 +722,178 @@
                     if (pivot === value) return;
                     (pivot.x !== value.x || pivot.y !== value.y) && pivot.copyFrom(value);
                 }
+            },
+            {
+                key: "horizontalAlignment",
+                get: /**
+       * Horizontal alignment mode.
+       *
+       * @remarks
+       * Controls how the element aligns horizontally within its parent:
+       * - `Left` - Align to parent's left edge
+       * - `Center` - Align to parent's horizontal center
+       * - `Right` - Align to parent's right edge
+       * - `LeftAndRight` - Align to both left and right edges (stretch to fill width)
+       */ function get() {
+                    return this._horizontalAlignment;
+                },
+                set: function set(value) {
+                    if (this._horizontalAlignment === value) return;
+                    this._horizontalAlignment = value;
+                    switch(value){
+                        case HorizontalAlignmentMode.Left:
+                        case HorizontalAlignmentMode.Right:
+                        case HorizontalAlignmentMode.Center:
+                            this._onPositionChanged();
+                            break;
+                        case HorizontalAlignmentMode.LeftAndRight:
+                            this._onPositionChanged();
+                            this._onSizeChanged();
+                            break;
+                    }
+                }
+            },
+            {
+                key: "alignLeft",
+                get: /**
+       * Left margin when horizontalAlignment is Left or LeftAndRight.
+       *
+       * @remarks
+       * Only effective when horizontalAlignment includes Left mode.
+       * Distance from the parent's left edge to the element's left edge.
+       */ function get() {
+                    return this._alignLeft;
+                },
+                set: function set(value) {
+                    if (!Number.isFinite(value)) return;
+                    if (engine.MathUtil.equals(value, this._alignLeft)) return;
+                    this._alignLeft = value;
+                    if (this._horizontalAlignment & HorizontalAlignmentMode.Left) {
+                        this._onPositionChanged();
+                        this._horizontalAlignment & HorizontalAlignmentMode.Right && this._onSizeChanged();
+                    }
+                }
+            },
+            {
+                key: "alignRight",
+                get: /**
+       * Right margin when horizontalAlignment is Right or LeftAndRight.
+       *
+       * @remarks
+       * Only effective when horizontalAlignment includes Right mode.
+       * Distance from the parent's right edge to the element's right edge.
+       */ function get() {
+                    return this._alignRight;
+                },
+                set: function set(value) {
+                    if (!Number.isFinite(value)) return;
+                    if (engine.MathUtil.equals(value, this._alignRight)) return;
+                    this._alignRight = value;
+                    if (this._horizontalAlignment & HorizontalAlignmentMode.Right) {
+                        this._onPositionChanged();
+                        this._horizontalAlignment & HorizontalAlignmentMode.Left && this._onSizeChanged();
+                    }
+                }
+            },
+            {
+                key: "alignCenter",
+                get: /**
+       * Horizontal center offset when horizontalAlignment is Center.
+       *
+       * @remarks
+       * Only effective when horizontalAlignment is Center mode.
+       * Positive values move the element to the right, negative values to the left.
+       */ function get() {
+                    return this._alignCenter;
+                },
+                set: function set(value) {
+                    if (!Number.isFinite(value)) return;
+                    if (engine.MathUtil.equals(value, this._alignCenter)) return;
+                    this._alignCenter = value;
+                    this._horizontalAlignment & HorizontalAlignmentMode.Center && this._onPositionChanged();
+                }
+            },
+            {
+                key: "verticalAlignment",
+                get: /**
+       * Vertical alignment mode.
+       *
+       * @remarks
+       * Controls how the element aligns vertically within its parent:
+       * - `Top` - Align to parent's top edge
+       * - `Middle` - Align to parent's vertical center
+       * - `Bottom` - Align to parent's bottom edge
+       * - `TopAndBottom` - Align to both top and bottom edges (stretch to fill height)
+       */ function get() {
+                    return this._verticalAlignment;
+                },
+                set: function set(value) {
+                    if (this._verticalAlignment === value) return;
+                    this._verticalAlignment = value;
+                    switch(value){
+                        case VerticalAlignmentMode.Top:
+                        case VerticalAlignmentMode.Bottom:
+                        case VerticalAlignmentMode.Middle:
+                            this._onPositionChanged();
+                            break;
+                        case VerticalAlignmentMode.TopAndBottom:
+                            this._onPositionChanged();
+                            this._onSizeChanged();
+                            break;
+                    }
+                }
+            },
+            {
+                key: "alignTop",
+                get: /**
+       * Top margin when verticalAlignment is Top or TopAndBottom.
+       *
+       * @remarks
+       * Only effective when verticalAlignment includes Top mode.
+       * Used to offset the element from the parent's top edge.
+       */ function get() {
+                    return this._alignTop;
+                },
+                set: function set(value) {
+                    if (!Number.isFinite(value)) return;
+                    if (engine.MathUtil.equals(value, this._alignTop)) return;
+                    this._alignTop = value;
+                    if (this._verticalAlignment & VerticalAlignmentMode.Top) {
+                        this._onPositionChanged();
+                        this._verticalAlignment & VerticalAlignmentMode.Bottom && this._onSizeChanged();
+                    }
+                }
+            },
+            {
+                key: "alignBottom",
+                get: /**
+       * Bottom inset used in vertical alignment formulas.
+       */ function get() {
+                    return this._alignBottom;
+                },
+                set: function set(value) {
+                    if (!Number.isFinite(value)) return;
+                    if (engine.MathUtil.equals(value, this._alignBottom)) return;
+                    this._alignBottom = value;
+                    if (this._verticalAlignment & VerticalAlignmentMode.Bottom) {
+                        this._onPositionChanged();
+                        this._verticalAlignment & VerticalAlignmentMode.Top && this._onSizeChanged();
+                    }
+                }
+            },
+            {
+                key: "alignMiddle",
+                get: /**
+       * Vertical middle offset relative to parent's middle.
+       */ function get() {
+                    return this._alignMiddle;
+                },
+                set: function set(value) {
+                    if (!Number.isFinite(value)) return;
+                    if (engine.MathUtil.equals(value, this._alignMiddle)) return;
+                    this._alignMiddle = value;
+                    this._verticalAlignment & VerticalAlignmentMode.Middle && this._onPositionChanged();
+                }
             }
         ]);
         return UITransform;
@@ -583,16 +906,25 @@
     ], UITransform.prototype, "_pivot", void 0);
     __decorate([
         engine.ignoreClone
-    ], UITransform.prototype, "_onSizeChange", null);
+    ], UITransform.prototype, "_rect", void 0);
     __decorate([
         engine.ignoreClone
-    ], UITransform.prototype, "_onPivotChange", null);
+    ], UITransform.prototype, "_onPositionChanged", null);
+    __decorate([
+        engine.ignoreClone
+    ], UITransform.prototype, "_onWorldPositionChanged", null);
+    __decorate([
+        engine.ignoreClone
+    ], UITransform.prototype, "_onSizeChanged", null);
+    __decorate([
+        engine.ignoreClone
+    ], UITransform.prototype, "_onPivotChanged", null);
     /**
      * @internal
      * extends TransformModifyFlags
      */ var UITransformModifyFlags = /*#__PURE__*/ function(UITransformModifyFlags) {
-        /** Size. */ UITransformModifyFlags[UITransformModifyFlags["Size"] = 512] = "Size";
-        /** Pivot. */ UITransformModifyFlags[UITransformModifyFlags["Pivot"] = 1024] = "Pivot";
+        UITransformModifyFlags[UITransformModifyFlags["Size"] = 512] = "Size";
+        UITransformModifyFlags[UITransformModifyFlags["Pivot"] = 1024] = "Pivot";
         return UITransformModifyFlags;
     }({});
 
@@ -2369,7 +2701,6 @@
         };
         _proto._buildChunk = function _buildChunk(textChunk, count) {
             var _this_color = this.color, r = _this_color.r, g = _this_color.g, b = _this_color.b, a = _this_color.a;
-            var finalAlpha = a * this._getGlobalAlpha();
             var tempIndices = engine.CharRenderInfo.triangles;
             var tempIndicesLength = tempIndices.length;
             var subChunk = textChunk.subChunk = this._getChunkManager().allocateSubChunk(count * 4);
@@ -2390,7 +2721,7 @@
                     vertices[vo + 2] = r;
                     vertices[vo + 3] = g;
                     vertices[vo + 4] = b;
-                    vertices[vo + 5] = finalAlpha;
+                    vertices[vo + 5] = a;
                 }
             }
             return subChunk;
@@ -3289,6 +3620,7 @@
     exports.ColorTransition = ColorTransition;
     exports.EngineExtension = EngineExtension;
     exports.EntityExtension = EntityExtension;
+    exports.HorizontalAlignmentMode = HorizontalAlignmentMode;
     exports.Image = Image;
     exports.ResolutionAdaptationMode = ResolutionAdaptationMode;
     exports.ScaleTransition = ScaleTransition;
@@ -3297,6 +3629,7 @@
     exports.Transition = Transition;
     exports.UIGroup = UIGroup;
     exports.UITransform = UITransform;
+    exports.VerticalAlignmentMode = VerticalAlignmentMode;
     exports.registerGUI = registerGUI;
 
     Object.defineProperty(exports, '__esModule', { value: true });