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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@galacean/engine-ui",
-  "version": "1.5.14",
+  "version": "1.6.0-alpha.0",
   "publishConfig": {
     "access": "public",
     "registry": "https://registry.npmjs.org"
@@ -26,10 +26,10 @@
     "types/**/*"
   ],
   "devDependencies": {
-    "@galacean/engine": "1.5.14"
+    "@galacean/engine": "1.6.0-alpha.0"
   },
   "peerDependencies": {
-    "@galacean/engine": "1.5.14"
+    "@galacean/engine": "1.6.0-alpha.0"
   },
   "scripts": {
     "b:types": "tsc"

package/types/component/UITransform.d.ts

@@ -1,10 +1,21 @@
 import { Entity, Transform, Vector2 } from "@galacean/engine";
+import { HorizontalAlignmentMode } from "../enums/HorizontalAlignmentMode";
+import { VerticalAlignmentMode } from "../enums/VerticalAlignmentMode";
 /**
  * The Transform component exclusive to the UI element.
  */
 export declare class UITransform extends Transform {
     private _size;
     private _pivot;
+    private _rect;
+    private _alignLeft;
+    private _alignRight;
+    private _alignCenter;
+    private _alignTop;
+    private _alignBottom;
+    private _alignMiddle;
+    private _horizontalAlignment;
+    private _verticalAlignment;
     /**
      * Width and height of UI element.
      */
@@ -15,7 +26,86 @@ export declare class UITransform extends Transform {
      */
     get pivot(): Vector2;
     set pivot(value: Vector2);
+    /**
+     * 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)
+     */
+    get horizontalAlignment(): HorizontalAlignmentMode;
+    set horizontalAlignment(value: HorizontalAlignmentMode);
+    /**
+     * 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.
+     */
+    get alignLeft(): number;
+    set alignLeft(value: number);
+    /**
+     * 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.
+     */
+    get alignRight(): number;
+    set alignRight(value: number);
+    /**
+     * 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.
+     */
+    get alignCenter(): number;
+    set alignCenter(value: number);
+    /**
+     * 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)
+     */
+    get verticalAlignment(): VerticalAlignmentMode;
+    set verticalAlignment(value: VerticalAlignmentMode);
+    /**
+     * 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.
+     */
+    get alignTop(): number;
+    set alignTop(value: number);
+    /**
+     * Bottom inset used in vertical alignment formulas.
+     */
+    get alignBottom(): number;
+    set alignBottom(value: number);
+    /**
+     * Vertical middle offset relative to parent's middle.
+     */
+    get alignMiddle(): number;
+    set alignMiddle(value: number);
     _cloneTo(target: UITransform, srcRoot: Entity, targetRoot: Entity): void;
-    private _onSizeChange;
-    private _onPivotChange;
+    protected _onLocalMatrixChanging(): void;
+    protected _onWorldMatrixChange(): void;
+    protected _onPositionChanged(): void;
+    protected _onWorldPositionChanged(): void;
+    private _updatePositionByAlignment;
+    private _updateSizeByAlignment;
+    private _updateRectByPivot;
+    private _onSizeChanged;
+    private _onPivotChanged;
+    private _updateWorldFlagWithSelfRectChange;
+    private _updateWorldFlagWithParentRectChange;
 }

package/types/enums/HorizontalAlignmentMode.d.ts

@@ -0,0 +1,13 @@
+/** Horizontal alignment mode. */
+export declare enum HorizontalAlignmentMode {
+    /** No horizontal alignment. */
+    None = 0,
+    /** Left-aligned, `alignLeft` drives `position.x`. */
+    Left = 1,
+    /** Right-aligned, `alignRight` drives `position.x`. */
+    Right = 2,
+    /** Horizontal stretch, `alignLeft` and `alignRight` drive `position.x` and `size.x`. */
+    LeftAndRight = 3,
+    /** Center-aligned, `alignCenter` drives `position.x`. */
+    Center = 4
+}

package/types/enums/VerticalAlignmentMode.d.ts

@@ -0,0 +1,13 @@
+/** Vertical alignment mode. */
+export declare enum VerticalAlignmentMode {
+    /** No vertical alignment. */
+    None = 0,
+    /** Top-aligned, `alignTop` drives `position.y`. */
+    Top = 1,
+    /** Bottom-aligned, `alignBottom` drives `position.y`. */
+    Bottom = 2,
+    /** Vertical stretch, `alignTop` and `alignBottom` drive `position.y` and `size.y`. */
+    TopAndBottom = 3,
+    /** Middle-aligned, `alignMiddle` drives `position.y`. */
+    Middle = 4
+}

package/types/index.d.ts

@@ -3,6 +3,8 @@ export * from "./component";
 export { CanvasRenderMode } from "./enums/CanvasRenderMode";
 export { ResolutionAdaptationMode } from "./enums/ResolutionAdaptationMode";
 export { UIPointerEventEmitter } from "./input/UIPointerEventEmitter";
+export { HorizontalAlignmentMode } from "./enums/HorizontalAlignmentMode";
+export { VerticalAlignmentMode } from "./enums/VerticalAlignmentMode";
 export declare class EngineExtension {
     _uiDefaultMaterial: Material;
     _getUIDefaultMaterial(): Material;