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

package/dist/module.js

@@ -1,4 +1,4 @@
-import { EntityModifyFlags, ignoreClone, assignmentClone, DisorderedArray, Component, Transform, deepClone, Vector2, Vector3, Matrix, Plane, ShaderProperty, dependentComponents, DependentMode, BatchUtils, ShaderMacroCollection, Renderer, Vector4, Color, RendererUpdateFlags, Entity, Script, Camera, MathUtil, CameraModifyFlags, Logger, SafeLoopArray, SpriteDrawMode, RenderQueueFlags, SpriteModifyFlags, SpriteTileMode, TiledSpriteAssembler, SlicedSpriteAssembler, SimpleSpriteAssembler, BoundingBox, ShaderData, ShaderDataGroup, TextUtils, Engine, TextVerticalAlignment, TextHorizontalAlignment, OverflowMode, CharRenderInfo, FontStyle, ReferResource, registerPointerEventEmitter, PointerEventEmitter, CameraClearFlags, ReflectionParser, Shader, ShaderPass, PipelineStage, Material, BlendFactor, BlendOperation, CullMode, RenderQueueType, Loader, Font } from '@galacean/engine';
+import { EntityModifyFlags, ignoreClone, assignmentClone, DisorderedArray, Component, TransformModifyFlags, Transform, deepClone, Vector2, Rect, MathUtil, Vector3, Matrix, Plane, ShaderProperty, dependentComponents, DependentMode, BatchUtils, ShaderMacroCollection, Renderer, Vector4, Color, RendererUpdateFlags, Entity, Script, Camera, CameraModifyFlags, Logger, SafeLoopArray, SpriteDrawMode, RenderQueueFlags, SpriteModifyFlags, SpriteTileMode, TiledSpriteAssembler, SlicedSpriteAssembler, SimpleSpriteAssembler, BoundingBox, ShaderData, ShaderDataGroup, TextUtils, Engine, TextVerticalAlignment, TextHorizontalAlignment, OverflowMode, CharRenderInfo, FontStyle, ReferResource, registerPointerEventEmitter, PointerEventEmitter, CameraClearFlags, ReflectionParser, Shader, ShaderPass, PipelineStage, Material, BlendFactor, BlendOperation, CullMode, RenderQueueType, Loader, Font } from '@galacean/engine';
 
 function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
     try {
@@ -512,20 +512,46 @@ var Utils = /*#__PURE__*/ function() {
     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 Vector2(100, 100), _this._pivot = new Vector2(0.5, 0.5);
+        _this = Transform.call(this, entity) || this, _this._size = new Vector2(100, 100), _this._pivot = new Vector2(0.5, 0.5), _this._rect = new 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(TransformModifyFlags.WmWpWeWqWsWus);
+    };
     // @ts-ignore
     _proto._cloneTo = function _cloneTo(target, srcRoot, targetRoot) {
         // @ts-ignore
@@ -533,14 +559,139 @@ var Utils = /*#__PURE__*/ function() {
         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(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(TransformModifyFlags.LocalMatrix);
+            worldFlags = 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(TransformModifyFlags.LocalMatrix);
+                flags |= 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",
@@ -567,6 +718,178 @@ var Utils = /*#__PURE__*/ function() {
                 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 (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 (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 (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 (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 (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 (MathUtil.equals(value, this._alignMiddle)) return;
+                this._alignMiddle = value;
+                this._verticalAlignment & VerticalAlignmentMode.Middle && this._onPositionChanged();
+            }
         }
     ]);
     return UITransform;
@@ -579,16 +902,25 @@ __decorate([
 ], UITransform.prototype, "_pivot", void 0);
 __decorate([
     ignoreClone
-], UITransform.prototype, "_onSizeChange", null);
+], UITransform.prototype, "_rect", void 0);
+__decorate([
+    ignoreClone
+], UITransform.prototype, "_onPositionChanged", null);
+__decorate([
+    ignoreClone
+], UITransform.prototype, "_onWorldPositionChanged", null);
+__decorate([
+    ignoreClone
+], UITransform.prototype, "_onSizeChanged", null);
 __decorate([
     ignoreClone
-], UITransform.prototype, "_onPivotChange", null);
+], 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;
 }({});
 
@@ -3279,5 +3611,5 @@ ReflectionParser.registerCustomParseComponent("Text", /*#__PURE__*/ _async_to_ge
     }
 }
 
-export { Button, CanvasRenderMode, ColorTransition, EngineExtension, EntityExtension, Image, ResolutionAdaptationMode, ScaleTransition, SpriteTransition, Text, Transition, UICanvas, UIGroup, UIPointerEventEmitter, UIRenderer, UITransform, registerGUI };
+export { Button, CanvasRenderMode, ColorTransition, EngineExtension, EntityExtension, HorizontalAlignmentMode, Image, ResolutionAdaptationMode, ScaleTransition, SpriteTransition, Text, Transition, UICanvas, UIGroup, UIPointerEventEmitter, UIRenderer, UITransform, VerticalAlignmentMode, registerGUI };
 //# sourceMappingURL=module.js.map