@galacean/engine-ui 0.0.0-experimental-2.0-spine.1 → 0.0.0-experimental-2.0-migrate.1

package/dist/browser.js

@@ -4,24 +4,6 @@
     (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.Galacean = global.Galacean || {}, global.Galacean.UI = {}), global.Galacean));
 })(this, (function (exports, engine) { 'use strict';
 
-    function _defineProperties(target, props) {
-        for (var i = 0; i < props.length; i++) {
-            var descriptor = props[i];
-            descriptor.enumerable = descriptor.enumerable || false;
-            descriptor.configurable = true;
-
-            if ("value" in descriptor) descriptor.writable = true;
-
-            Object.defineProperty(target, descriptor.key, descriptor);
-        }
-    }
-    function _create_class(Constructor, protoProps, staticProps) {
-        if (protoProps) _defineProperties(Constructor.prototype, protoProps);
-        if (staticProps) _defineProperties(Constructor, staticProps);
-
-        return Constructor;
-    }
-
     function _set_prototype_of(o, p) {
         _set_prototype_of = Object.setPrototypeOf || function setPrototypeOf(o, p) {
             o.__proto__ = p;
@@ -42,10 +24,22 @@
         if (superClass) _set_prototype_of(subClass, superClass);
     }
 
-    function _instanceof(left, right) {
-        if (right != null && typeof Symbol !== "undefined" && right[Symbol.hasInstance]) {
-            return !!right[Symbol.hasInstance](left);
-        } else return left instanceof right;
+    function _defineProperties(target, props) {
+        for (var i = 0; i < props.length; i++) {
+            var descriptor = props[i];
+            descriptor.enumerable = descriptor.enumerable || false;
+            descriptor.configurable = true;
+
+            if ("value" in descriptor) descriptor.writable = true;
+
+            Object.defineProperty(target, descriptor.key, descriptor);
+        }
+    }
+    function _create_class(Constructor, protoProps, staticProps) {
+        if (protoProps) _defineProperties(Constructor.prototype, protoProps);
+        if (staticProps) _defineProperties(Constructor, staticProps);
+
+        return Constructor;
     }
 
     /******************************************************************************
@@ -75,957 +69,944 @@
       return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
     };
 
-    var UIGroup = /*#__PURE__*/ function(Component) {
-        _inherits(UIGroup, Component);
-        function UIGroup(entity) {
-            var _this;
-            _this = Component.call(this, entity) || this, /** @internal */ _this._indexInGroup = -1, /** @internal */ _this._indexInRootCanvas = -1, /** @internal */ _this._disorderedElements = new engine.DisorderedArray(), /** @internal */ _this._globalAlpha = 1, /** @internal */ _this._globalInteractive = true, _this._alpha = 1, _this._interactive = true, _this._ignoreParentGroup = false, /** @internal */ _this._rootCanvasListeningEntities = [], /** @internal */ _this._groupListeningEntities = [], /** @internal */ _this._isRootCanvasDirty = false, /** @internal */ _this._isGroupDirty = false, /** @internal */ _this._groupDirtyFlags = 0;
-            _this._rootCanvasListener = _this._rootCanvasListener.bind(_this);
-            _this._groupListener = _this._groupListener.bind(_this);
-            return _this;
-        }
-        var _proto = UIGroup.prototype;
+    function _instanceof(left, right) {
+        if (right != null && typeof Symbol !== "undefined" && right[Symbol.hasInstance]) {
+            return !!right[Symbol.hasInstance](left);
+        } else return left instanceof right;
+    }
+
+    /**
+     * @internal
+     * Visual-layering driven UI batching: solve visual correctness first, batching falls out for free.
+     *
+     * Think of it as stacking elements onto numbered shelves (depths):
+     *   - Non-overlapping elements share shelf 0  — free to cluster regardless of material.
+     *   - Overlapping + batch-compatible          — share the same shelf, still cluster.
+     *   - Overlapping + batch-incompatible        — bumped one shelf higher (drawn on top).
+     *
+     * `depth` is a global tag, not a spatial group: distant elements at the same visual layer
+     * share the same depth and get clustered together. Once depth is assigned, sort by
+     * (depth, material, texture, hierarchyIndex) — visual order is locked, batching is the
+     * by-product of materials clustering within each depth band.
+     *
+     * Overlap detection is accelerated by a 10×10 spatial grid. Grid origin and cell size
+     * are derived from the union AABB of input elements (the bounds transform itself is the
+     * work the loop must do anyway, so the union accumulation just piggybacks). This stays
+     * correct across SS/WS canvases, any pivot, and any element distribution — no dependency
+     * on canvas configuration.
+     */ var UIBatchSorter = /*#__PURE__*/ function() {
+        function UIBatchSorter() {}
         /**
-       * @internal
-       */ _proto._getGlobalAlpha = function _getGlobalAlpha() {
-            if (this._isContainDirtyFlag(1)) {
-                if (this._ignoreParentGroup) {
-                    this._globalAlpha = this._alpha;
-                } else {
-                    var parentGroup = this._getGroup();
-                    this._globalAlpha = this._alpha * (parentGroup ? parentGroup._getGlobalAlpha() : 1);
+       * Reorders `elements` in place for optimal batching.
+       * @param elements - in hierarchy order (depth-first traversal); mutated in place
+       * @param canvasWorldMatrix - reduces world bounds to canvas-local for precise overlap
+       */ UIBatchSorter.sort = function sort(elements, canvasWorldMatrix) {
+            var count = elements.length;
+            if (count <= 1) return;
+            var gridDim = this._gridDim;
+            var entries = this._entries;
+            var grid = this._grid;
+            var dirtyCells = this._dirtyCells;
+            var localBoundsPool = this._localBoundsPool;
+            var worldToLocal = this._worldToLocal;
+            engine.Matrix.invert(canvasWorldMatrix, worldToLocal);
+            while(entries.length < count)entries.push(new SortEntry());
+            // Allocate grid once, reuse forever (each cell must be a real [], not a sparse hole)
+            if (grid.length < gridDim) {
+                while(grid.length < gridDim)grid.push([]);
+                for(var i = 0; i < gridDim; i++){
+                    var row = grid[i];
+                    while(row.length < gridDim)row.push([]);
                 }
-                this._setDirtyFlagFalse(1);
             }
-            return this._globalAlpha;
-        };
-        /**
-       * @internal
-       */ _proto._getGlobalInteractive = function _getGlobalInteractive() {
-            if (this._isContainDirtyFlag(2)) {
-                if (this._ignoreParentGroup) {
-                    this._globalInteractive = this._interactive;
-                } else {
-                    var parentGroup = this._getGroup();
-                    this._globalInteractive = this._interactive && (!parentGroup || parentGroup._getGlobalInteractive());
+            // Clear only previously-used cells (no full sweep)
+            for(var k = 0, n = dirtyCells.length; k < n; k += 2){
+                grid[dirtyCells[k]][dirtyCells[k + 1]].length = 0;
+            }
+            dirtyCells.length = 0;
+            // Pass 1: transform world bounds to canvas-local + accumulate the union AABB.
+            // Transform is already required to do precise overlap, so the union accumulation
+            // is essentially free — just a few minmax compares riding on the existing pass
+            var unionMinX = Infinity;
+            var unionMinY = Infinity;
+            var unionMaxX = -Infinity;
+            var unionMaxY = -Infinity;
+            for(var i1 = 0; i1 < count; i1++){
+                var _localBoundsPool, _i;
+                var localBounds = (_localBoundsPool = localBoundsPool)[_i = i1] || (_localBoundsPool[_i] = new engine.BoundingBox());
+                engine.BoundingBox.transform(elements[i1].component.bounds, worldToLocal, localBounds);
+                var min = localBounds.min, max = localBounds.max;
+                if (min.x < unionMinX) unionMinX = min.x;
+                if (min.y < unionMinY) unionMinY = min.y;
+                if (max.x > unionMaxX) unionMaxX = max.x;
+                if (max.y > unionMaxY) unionMaxY = max.y;
+            }
+            // Guard against a degenerate union (all elements collapsed onto a single point /
+            // axis); the grid then collapses to cell 0 which is semantically correct
+            var cellSizeX = Math.max(1e-6, unionMaxX - unionMinX) / gridDim;
+            var cellSizeY = Math.max(1e-6, unionMaxY - unionMinY) / gridDim;
+            var maxCell = gridDim - 1;
+            // Pass 2: register each element into grid cells and compute its depth
+            for(var i2 = 0; i2 < count; i2++){
+                var element = elements[i2];
+                var localBounds1 = localBoundsPool[i2];
+                var materialId = element.material.instanceId;
+                var textureId = element.texture ? element.texture.instanceId : 0;
+                // Floor + clamp guards floating-point edge cases (a `max` exactly on the union
+                // boundary would otherwise produce `gridDim`)
+                var minCellX = Math.min(maxCell, Math.max(0, Math.floor((localBounds1.min.x - unionMinX) / cellSizeX)));
+                var maxCellX = Math.min(maxCell, Math.max(0, Math.floor((localBounds1.max.x - unionMinX) / cellSizeX)));
+                var minCellY = Math.min(maxCell, Math.max(0, Math.floor((localBounds1.min.y - unionMinY) / cellSizeY)));
+                var maxCellY = Math.min(maxCell, Math.max(0, Math.floor((localBounds1.max.y - unionMinY) / cellSizeY)));
+                // Find the deepest overlapping prior, and whether that shelf has any incompatible occupant
+                var maxDepth = -1;
+                var maxDepthIncompatible = false;
+                for(var cellY = minCellY; cellY <= maxCellY; cellY++){
+                    for(var cellX = minCellX; cellX <= maxCellX; cellX++){
+                        var cell = grid[cellX][cellY];
+                        for(var j = 0, m = cell.length; j < m; j++){
+                            var other = cell[j];
+                            if (!UIBatchSorter._rectOverlap(localBounds1, other.bounds)) continue;
+                            var otherDepth = other.depth;
+                            var otherIncompatible = other.materialId !== materialId || other.textureId !== textureId;
+                            if (otherDepth > maxDepth) {
+                                maxDepth = otherDepth;
+                                maxDepthIncompatible = otherIncompatible;
+                            } else if (otherDepth === maxDepth && otherIncompatible) {
+                                maxDepthIncompatible = true;
+                            }
+                        }
+                    }
+                }
+                var entry = entries[i2];
+                entry.element = element;
+                entry.hierarchyIndex = i2;
+                // Share the deepest shelf if compatible; bump up one if blocked by an incompatible occupant
+                entry.depth = maxDepth < 0 ? 0 : maxDepth + (maxDepthIncompatible ? 1 : 0);
+                entry.materialId = materialId;
+                entry.textureId = textureId;
+                entry.bounds = localBounds1;
+                for(var cellY1 = minCellY; cellY1 <= maxCellY; cellY1++){
+                    for(var cellX1 = minCellX; cellX1 <= maxCellX; cellX1++){
+                        var cell1 = grid[cellX1][cellY1];
+                        if (cell1.length === 0) dirtyCells.push(cellX1, cellY1);
+                        cell1.push(entry);
+                    }
                 }
-                this._setDirtyFlagFalse(2);
             }
-            return this._globalInteractive;
+            // @ts-ignore — Utils._quickSort is @internal
+            engine.Utils._quickSort(entries, 0, count, UIBatchSorter._compareEntries);
+            for(var i3 = 0; i3 < count; i3++)elements[i3] = entries[i3].element;
         };
-        // @ts-ignore
-        _proto._onEnableInScene = function _onEnableInScene() {
-            Utils.setRootCanvasDirty(this);
-            Utils.setGroupDirty(this);
-            // @ts-ignore
-            this.entity._dispatchModify(EntityUIModifyFlags.GroupEnableInScene);
+        UIBatchSorter._rectOverlap = function _rectOverlap(a, b) {
+            return a.min.x < b.max.x && a.max.x > b.min.x && a.min.y < b.max.y && a.max.y > b.min.y;
         };
-        // @ts-ignore
-        _proto._onDisableInScene = function _onDisableInScene() {
-            Utils.cleanRootCanvas(this);
-            Utils.cleanGroup(this);
-            var disorderedElements = this._disorderedElements;
-            disorderedElements.forEach(function(element) {
-                Utils.setGroupDirty(element);
-            });
-            disorderedElements.length = 0;
-            disorderedElements.garbageCollection();
-            this._isRootCanvasDirty = this._isGroupDirty = false;
+        UIBatchSorter._compareEntries = function _compareEntries(a, b) {
+            return a.depth - b.depth || a.materialId - b.materialId || a.textureId - b.textureId || a.hierarchyIndex - b.hierarchyIndex;
         };
+        return UIBatchSorter;
+    }();
+    // Spatial-hash is fastest when cell size ≈ typical element size (one element per cell).
+    // UI elements typically span ~10% of the canvas → 10×10 grid.
+    UIBatchSorter._gridDim = 10;
+    UIBatchSorter._entries = new Array();
+    UIBatchSorter._grid = [];
+    // Interleaved (x, y) cell coords touched in the previous frame
+    UIBatchSorter._dirtyCells = new Array();
+    UIBatchSorter._localBoundsPool = new Array();
+    UIBatchSorter._worldToLocal = new engine.Matrix();
+    // materialId/textureId/bounds are flattened from RenderElement to avoid
+    // multi-hop property access in the hot inner loop and the sort comparator.
+    var SortEntry = function SortEntry() {
+        this.hierarchyIndex = 0;
+        this.depth = 0;
+        this.materialId = 0;
+        this.textureId = 0;
+    };
+
+    /**
+     * Render mode for ui canvas.
+     */ var CanvasRenderMode = /*#__PURE__*/ function(CanvasRenderMode) {
         /**
-       * @internal
-       */ _proto._getRootCanvas = function _getRootCanvas() {
-            this._isRootCanvasDirty && Utils.setRootCanvas(this, Utils.searchRootCanvasInParents(this));
-            return this._rootCanvas;
-        };
+       * The UI canvas will be rendered directly onto the screen and adapted to screen space,
+       * overlaying other rendering elements in the same scene.
+       * @remarks if the `engine.canvas` size change, the UI canvas will automatically adapt.
+       */ CanvasRenderMode[CanvasRenderMode["ScreenSpaceOverlay"] = 0] = "ScreenSpaceOverlay";
         /**
-       * @internal
-       */ _proto._getGroup = function _getGroup() {
-            this._isGroupDirty && Utils.setGroup(this, Utils.searchGroupInParents(this));
-            return this._group;
-        };
+       * The UI canvas is placed at a specified distance in front of the camera and adapted to screen space,
+       * with all objects rendered by the camera.
+       * @remarks if the camera's properties or the `engine.canvas` size change, the UI canvas will automatically adapt.
+       * @remarks if set `ScreenSpaceCamera` but no corresponding camera is assigned, the actual rendering mode defaults to `ScreenSpaceOverlay`.
+       */ CanvasRenderMode[CanvasRenderMode["ScreenSpaceCamera"] = 1] = "ScreenSpaceCamera";
+        /**
+       * The UI canvas is placed in the 3D world space and rendered by every camera in the same scene.
+       */ CanvasRenderMode[CanvasRenderMode["WorldSpace"] = 2] = "WorldSpace";
+        return CanvasRenderMode;
+    }({});
+
+    /**
+     * Resolution adaptation mode.
+     * @remarks Only effective in screen space.
+     */ var ResolutionAdaptationMode = /*#__PURE__*/ function(ResolutionAdaptationMode) {
+        /** Adapt based on width.(`referenceResolution.x`) */ ResolutionAdaptationMode[ResolutionAdaptationMode["WidthAdaptation"] = 0] = "WidthAdaptation";
+        /** Adapt based on height.(`referenceResolution.y`) */ ResolutionAdaptationMode[ResolutionAdaptationMode["HeightAdaptation"] = 1] = "HeightAdaptation";
+        /** Adapt based on both width and height.(`referenceResolution`) */ ResolutionAdaptationMode[ResolutionAdaptationMode["BothAdaptation"] = 2] = "BothAdaptation";
+        /** Adapt to the side with a larger ratio. */ ResolutionAdaptationMode[ResolutionAdaptationMode["ExpandAdaptation"] = 3] = "ExpandAdaptation";
+        /** Adapt to the side with smaller ratio. */ ResolutionAdaptationMode[ResolutionAdaptationMode["ShrinkAdaptation"] = 4] = "ShrinkAdaptation";
+        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._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._onSizeChanged;
+            // @ts-ignore
+            _this._pivot._onValueChanged = _this._onPivotChanged;
+            return _this;
+        }
+        var _proto = UITransform.prototype;
         /**
        * @internal
-       */ _proto._groupListener = function _groupListener(flag) {
-            if (flag === engine.EntityModifyFlags.Parent || flag === EntityUIModifyFlags.GroupEnableInScene) {
-                Utils.setGroupDirty(this);
+       */ _proto._parentChange = function _parentChange() {
+            this._isParentDirty = true;
+            this._updateWorldFlagWithParentRectChange(engine.TransformModifyFlags.WmWpWeWqWsWus);
+        };
+        // @ts-ignore
+        _proto._cloneTo = function _cloneTo(target) {
+            // @ts-ignore
+            Transform.prototype._cloneTo.call(this, target);
+            var size = target._size, pivot = target._pivot;
+            // @ts-ignore
+            size._onValueChanged = pivot._onValueChanged = null;
+            size.copyFrom(this._size);
+            pivot.copyFrom(this._pivot);
+            // @ts-ignore
+            size._onValueChanged = target._onSizeChanged;
+            // @ts-ignore
+            pivot._onValueChanged = target._onPivotChanged;
+        };
+        _proto._onLocalMatrixChanging = function _onLocalMatrixChanging() {
+            // `super._onLocalMatrixChanging()` will set `LocalMatrix` dirty flag `false`
+            // If there is an alignment, `position` and `localMatrix` will be reset again
+            if (this._horizontalAlignment || this._verticalAlignment) {
+                this._updatePositionByAlignment();
+                this._setDirtyFlagTrue(engine.TransformModifyFlags.LocalMatrix);
+            } else {
+                Transform.prototype._onLocalMatrixChanging.call(this);
             }
         };
-        /**
-       * @internal
-       */ _proto._rootCanvasListener = function _rootCanvasListener(flag) {
-            if (flag === engine.EntityModifyFlags.Parent || flag === EntityUIModifyFlags.CanvasEnableInScene) {
-                Utils.setRootCanvasDirty(this);
-                Utils.setGroupDirty(this);
+        _proto._onWorldMatrixChanging = function _onWorldMatrixChanging() {
+            // `super._onWorldMatrixChanging()` will set `WorldMatrix` dirty flag `false`
+            // If there is an alignment, `position` and `worldMatrix` will be reset again(`worldMatrix` dirty flag is already `true`)
+            !this._horizontalAlignment && !this._verticalAlignment && Transform.prototype._onWorldMatrixChanging.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);
             }
         };
-        /**
-       * @internal
-       */ _proto._onGroupModify = function _onGroupModify(flags, isPass) {
-            if (isPass === void 0) isPass = false;
-            if (isPass && this._ignoreParentGroup) return;
-            if (this._isContainDirtyFlags(flags)) return;
-            this._setDirtyFlagTrue(flags);
-            this._disorderedElements.forEach(function(element) {
-                element._onGroupModify(flags, true);
-            });
+        _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._isContainDirtyFlags = function _isContainDirtyFlags(targetDirtyFlags) {
-            return (this._groupDirtyFlags & targetDirtyFlags) === targetDirtyFlags;
+        _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._isContainDirtyFlag = function _isContainDirtyFlag(type) {
-            return (this._groupDirtyFlags & type) != 0;
+        _proto._updateRectBySizeAndPivot = function _updateRectBySizeAndPivot() {
+            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._setDirtyFlagTrue = function _setDirtyFlagTrue(type) {
-            this._groupDirtyFlags |= type;
+        _proto._onSizeChanged = function _onSizeChanged() {
+            if (this._horizontalAlignment === HorizontalAlignmentMode.LeftAndRight || this._verticalAlignment === VerticalAlignmentMode.TopAndBottom) {
+                this._updateSizeByAlignment();
+            }
+            this._updateRectBySizeAndPivot();
+            this._updateWorldFlagWithSelfRectChange();
+            // @ts-ignore
+            this._entity._updateFlagManager.dispatch(512);
         };
-        _proto._setDirtyFlagFalse = function _setDirtyFlagFalse(type) {
-            this._groupDirtyFlags &= ~type;
+        _proto._onPivotChanged = function _onPivotChanged() {
+            this._updateRectBySizeAndPivot();
+            this._updateWorldFlagWithSelfRectChange();
+            // @ts-ignore
+            this._entity._updateFlagManager.dispatch(1024);
         };
-        _create_class(UIGroup, [
+        _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._updateRectBySizeAndPivot();
+                        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: "ignoreParentGroup",
+                key: "size",
                 get: /**
-       * Whether to ignore the parent group.
-       * @remarks If this parameter set to `true`,
-       * all settings of the parent group will be ignored.
+       * Width and height of UI element.
        */ function get() {
-                    return this._ignoreParentGroup;
+                    return this._size;
                 },
                 set: function set(value) {
-                    if (this._ignoreParentGroup !== value) {
-                        this._ignoreParentGroup = value;
-                        this._onGroupModify(3);
-                    }
+                    var _this = this, size = _this._size;
+                    if (size === value) return;
+                    (size.x !== value.x || size.y !== value.y) && size.copyFrom(value);
                 }
             },
             {
-                key: "interactive",
+                key: "pivot",
                 get: /**
-       * Whether the group is interactive.
+       * Pivot of UI element.
        */ function get() {
-                    return this._interactive;
+                    return this._pivot;
                 },
                 set: function set(value) {
-                    if (this._interactive !== value) {
-                        this._interactive = value;
-                        this._onGroupModify(2);
+                    var _this = this, pivot = _this._pivot;
+                    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: "alpha",
+                key: "alignLeft",
                 get: /**
-       * The alpha value of the group.
+       * 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._alpha;
+                    return this._alignLeft;
                 },
                 set: function set(value) {
-                    value = Math.max(0, Math.min(value, 1));
-                    if (this._alpha !== value) {
-                        this._alpha = value;
-                        this._onGroupModify(1);
+                    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 UIGroup;
-    }(engine.Component);
-    __decorate([
-        engine.ignoreClone
-    ], UIGroup.prototype, "_indexInGroup", void 0);
-    __decorate([
-        engine.ignoreClone
-    ], UIGroup.prototype, "_indexInRootCanvas", void 0);
-    __decorate([
-        engine.ignoreClone
-    ], UIGroup.prototype, "_disorderedElements", void 0);
-    __decorate([
-        engine.ignoreClone
-    ], UIGroup.prototype, "_globalAlpha", void 0);
-    __decorate([
-        engine.ignoreClone
-    ], UIGroup.prototype, "_globalInteractive", void 0);
-    __decorate([
-        engine.assignmentClone
-    ], UIGroup.prototype, "_alpha", void 0);
-    __decorate([
-        engine.assignmentClone
-    ], UIGroup.prototype, "_interactive", void 0);
-    __decorate([
-        engine.assignmentClone
-    ], UIGroup.prototype, "_ignoreParentGroup", void 0);
-    __decorate([
-        engine.ignoreClone
-    ], UIGroup.prototype, "_rootCanvasListeningEntities", void 0);
+        return UITransform;
+    }(engine.Transform);
     __decorate([
         engine.ignoreClone
-    ], UIGroup.prototype, "_groupListeningEntities", void 0);
+    ], UITransform.prototype, "_size", void 0);
     __decorate([
         engine.ignoreClone
-    ], UIGroup.prototype, "_isRootCanvasDirty", void 0);
+    ], UITransform.prototype, "_pivot", void 0);
     __decorate([
         engine.ignoreClone
-    ], UIGroup.prototype, "_isGroupDirty", void 0);
+    ], UITransform.prototype, "_onPositionChanged", null);
     __decorate([
         engine.ignoreClone
-    ], UIGroup.prototype, "_groupDirtyFlags", void 0);
+    ], UITransform.prototype, "_onWorldPositionChanged", null);
     __decorate([
         engine.ignoreClone
-    ], UIGroup.prototype, "_groupListener", null);
+    ], UITransform.prototype, "_onSizeChanged", null);
     __decorate([
         engine.ignoreClone
-    ], UIGroup.prototype, "_rootCanvasListener", null);
-    var GroupModifyFlags = /*#__PURE__*/ function(GroupModifyFlags) {
-        GroupModifyFlags[GroupModifyFlags["None"] = 0] = "None";
-        GroupModifyFlags[GroupModifyFlags["GlobalAlpha"] = 1] = "GlobalAlpha";
-        GroupModifyFlags[GroupModifyFlags["GlobalInteractive"] = 2] = "GlobalInteractive";
-        GroupModifyFlags[GroupModifyFlags["All"] = 3] = "All";
-        return GroupModifyFlags;
+    ], UITransform.prototype, "_onPivotChanged", null);
+    /**
+     * @internal
+     * extends TransformModifyFlags
+     */ var UITransformModifyFlags = /*#__PURE__*/ function(UITransformModifyFlags) {
+        UITransformModifyFlags[UITransformModifyFlags["Size"] = 512] = "Size";
+        UITransformModifyFlags[UITransformModifyFlags["Pivot"] = 1024] = "Pivot";
+        return UITransformModifyFlags;
     }({});
 
-    var Utils = /*#__PURE__*/ function() {
-        function Utils() {}
-        Utils.setRootCanvasDirty = function setRootCanvasDirty(element) {
-            if (element._isRootCanvasDirty) return;
-            element._isRootCanvasDirty = true;
-            this._registerRootCanvas(element, null);
-            element._onRootCanvasModify == null ? void 0 : element._onRootCanvasModify.call(element, RootCanvasModifyFlags.All);
+    exports.RectMask2D = /*#__PURE__*/ function(Component) {
+        _inherits(RectMask2D, Component);
+        function RectMask2D(entity) {
+            var _this;
+            _this = Component.call(this, entity) || this, _this._softness = new engine.Vector2(0, 0), _this._alphaClip = false;
+            _this._onSoftnessChanged = _this._onSoftnessChanged.bind(_this);
+            // @ts-ignore
+            _this._softness._onValueChanged = _this._onSoftnessChanged;
+            return _this;
+        }
+        var _proto = RectMask2D.prototype;
+        /**
+       * @internal
+       */ _proto._getWorldRect = function _getWorldRect(out) {
+            var transform = this.entity.transform;
+            var _transform_size = transform.size, width = _transform_size.x, height = _transform_size.y;
+            if (!width || !height) {
+                return false;
+            }
+            var _transform_pivot = transform.pivot, pivotX = _transform_pivot.x, pivotY = _transform_pivot.y;
+            var left = -width * pivotX;
+            var right = width * (1 - pivotX);
+            var bottom = -height * pivotY;
+            var top = height * (1 - pivotY);
+            var worldMatrix = transform.worldMatrix;
+            var corner0 = RectMask2D._tempCorner0;
+            var corner1 = RectMask2D._tempCorner1;
+            var corner2 = RectMask2D._tempCorner2;
+            var corner3 = RectMask2D._tempCorner3;
+            engine.Vector3.transformCoordinate(corner0.set(left, bottom, 0), worldMatrix, corner0);
+            engine.Vector3.transformCoordinate(corner1.set(left, top, 0), worldMatrix, corner1);
+            engine.Vector3.transformCoordinate(corner2.set(right, bottom, 0), worldMatrix, corner2);
+            engine.Vector3.transformCoordinate(corner3.set(right, top, 0), worldMatrix, corner3);
+            var minX = Math.min(corner0.x, corner1.x, corner2.x, corner3.x);
+            var minY = Math.min(corner0.y, corner1.y, corner2.y, corner3.y);
+            var maxX = Math.max(corner0.x, corner1.x, corner2.x, corner3.x);
+            var maxY = Math.max(corner0.y, corner1.y, corner2.y, corner3.y);
+            out.set(minX, minY, maxX, maxY);
+            return true;
         };
-        Utils.setRootCanvas = function setRootCanvas(element, rootCanvas) {
-            element._isRootCanvasDirty = false;
-            this._registerRootCanvas(element, rootCanvas);
-            var fromEntity = _instanceof(element, exports.UICanvas) ? element.entity.parent : element.entity;
-            var _rootCanvas_entity_parent;
-            var toEntity = (_rootCanvas_entity_parent = rootCanvas == null ? void 0 : rootCanvas.entity.parent) != null ? _rootCanvas_entity_parent : null;
-            this._registerListener(fromEntity, toEntity, element._rootCanvasListener, element._rootCanvasListeningEntities);
+        /**
+       * @internal
+       */ _proto._containsWorldPoint = function _containsWorldPoint(worldPoint) {
+            var worldRect = RectMask2D._tempRect;
+            if (!this._getWorldRect(worldRect)) {
+                return false;
+            }
+            var x = worldPoint.x, y = worldPoint.y;
+            return x >= worldRect.x && x <= worldRect.z && y >= worldRect.y && y <= worldRect.w;
         };
-        Utils.cleanRootCanvas = function cleanRootCanvas(element) {
-            this._registerRootCanvas(element, null);
-            this._unRegisterListener(element._rootCanvasListener, element._rootCanvasListeningEntities);
+        // @ts-ignore
+        _proto._onEnableInScene = function _onEnableInScene() {
+            this.entity._updateUIHierarchyVersion(exports.UICanvas._hierarchyCounter);
         };
-        Utils.searchRootCanvasInParents = function searchRootCanvasInParents(element) {
-            var entity = _instanceof(element, exports.UICanvas) ? element.entity.parent : element.entity;
-            while(entity){
-                // @ts-ignore
-                var components = entity._components;
-                for(var i = 0, n = components.length; i < n; i++){
-                    var component = components[i];
-                    if (component.enabled && _instanceof(component, exports.UICanvas) && component._isRootCanvas) {
-                        return component;
-                    }
-                }
-                entity = entity.parent;
-            }
-            return null;
-        };
-        Utils.setGroupDirty = function setGroupDirty(element) {
-            if (element._isGroupDirty) return;
-            element._isGroupDirty = true;
-            this._registerGroup(element, null);
-            element._onGroupModify(GroupModifyFlags.All);
-        };
-        Utils.setGroup = function setGroup(element, group) {
-            element._isGroupDirty = false;
-            this._registerGroup(element, group);
-            var rootCanvas = element._getRootCanvas();
-            if (rootCanvas) {
-                var fromEntity = _instanceof(element, UIGroup) ? element.entity.parent : element.entity;
-                var _group_entity;
-                var toEntity = (_group_entity = group == null ? void 0 : group.entity) != null ? _group_entity : rootCanvas.entity.parent;
-                this._registerListener(fromEntity, toEntity, element._groupListener, element._groupListeningEntities);
-            } else {
-                this._unRegisterListener(element._groupListener, element._groupListeningEntities);
-            }
-        };
-        Utils.cleanGroup = function cleanGroup(element) {
-            this._registerGroup(element, null);
-            this._unRegisterListener(element._groupListener, element._groupListeningEntities);
-        };
-        Utils.searchGroupInParents = function searchGroupInParents(element) {
-            var rootCanvas = element._getRootCanvas();
-            if (!rootCanvas) return null;
-            var entity = _instanceof(element, UIGroup) ? element.entity.parent : element.entity;
-            var rootCanvasParent = rootCanvas.entity.parent;
-            while(entity && entity !== rootCanvasParent){
-                // @ts-ignore
-                var components = entity._components;
-                for(var i = 0, n = components.length; i < n; i++){
-                    var component = components[i];
-                    if (component.enabled && _instanceof(component, UIGroup)) {
-                        return component;
-                    }
-                }
-                entity = entity.parent;
-            }
-            return null;
-        };
-        Utils._registerRootCanvas = function _registerRootCanvas(element, canvas) {
-            var preCanvas = element._rootCanvas;
-            if (preCanvas !== canvas) {
-                if (preCanvas) {
-                    var replaced = preCanvas._disorderedElements.deleteByIndex(element._indexInRootCanvas);
-                    replaced && (replaced._indexInRootCanvas = element._indexInRootCanvas);
-                    element._indexInRootCanvas = -1;
-                }
-                if (canvas) {
-                    var disorderedElements = canvas._disorderedElements;
-                    element._indexInRootCanvas = disorderedElements.length;
-                    disorderedElements.add(element);
-                }
-                element._rootCanvas = canvas;
-            }
-        };
-        Utils._registerGroup = function _registerGroup(element, group) {
-            var preGroup = element._group;
-            if (preGroup !== group) {
-                if (preGroup) {
-                    var replaced = preGroup._disorderedElements.deleteByIndex(element._indexInGroup);
-                    replaced && (replaced._indexInGroup = element._indexInGroup);
-                    element._indexInGroup = -1;
-                }
-                if (group) {
-                    var disorderedElements = group._disorderedElements;
-                    element._indexInGroup = disorderedElements.length;
-                    disorderedElements.add(element);
-                }
-                element._group = group;
-                element._onGroupModify(GroupModifyFlags.All);
-            }
-        };
-        Utils._registerListener = function _registerListener(entity, root, listener, listeningEntities) {
-            var count = 0;
-            while(entity && entity !== root){
-                var preEntity = listeningEntities[count];
-                if (preEntity !== entity) {
-                    // @ts-ignore
-                    preEntity == null ? void 0 : preEntity._unRegisterModifyListener(listener);
-                    listeningEntities[count] = entity;
-                    // @ts-ignore
-                    entity._registerModifyListener(listener);
-                }
-                entity = entity.parent;
-                count++;
-            }
-            listeningEntities.length = count;
-        };
-        Utils._unRegisterListener = function _unRegisterListener(listener, listeningEntities) {
-            for(var i = 0, n = listeningEntities.length; i < n; i++){
-                // @ts-ignore
-                listeningEntities[i]._unRegisterModifyListener(listener);
-            }
-            listeningEntities.length = 0;
-        };
-        return Utils;
-    }();
-
-    /**
-     * @internal
-     * Visual-layering driven UI batching: solve visual correctness first, batching falls out for free.
-     *
-     * Think of it as stacking elements onto numbered shelves (depths):
-     *   - Non-overlapping elements share shelf 0  — free to cluster regardless of material.
-     *   - Overlapping + batch-compatible          — share the same shelf, still cluster.
-     *   - Overlapping + batch-incompatible        — bumped one shelf higher (drawn on top).
-     *
-     * `depth` is a global tag, not a spatial group: distant elements at the same visual layer
-     * share the same depth and get clustered together. Once depth is assigned, sort by
-     * (depth, material, texture, hierarchyIndex) — visual order is locked, batching is the
-     * by-product of materials clustering within each depth band.
-     *
-     * Overlap detection is accelerated by a 10×10 spatial grid. Grid origin and cell size
-     * are derived from the union AABB of input elements (the bounds transform itself is the
-     * work the loop must do anyway, so the union accumulation just piggybacks). This stays
-     * correct across SS/WS canvases, any pivot, and any element distribution — no dependency
-     * on canvas configuration.
-     */ var UIBatchSorter = /*#__PURE__*/ function() {
-        function UIBatchSorter() {}
-        /**
-       * Reorders `elements` in place for optimal batching.
-       * @param elements - in hierarchy order (depth-first traversal); mutated in place
-       * @param canvasWorldMatrix - reduces world bounds to canvas-local for precise overlap
-       */ UIBatchSorter.sort = function sort(elements, canvasWorldMatrix) {
-            var count = elements.length;
-            if (count <= 1) return;
-            var gridDim = this._gridDim;
-            var entries = this._entries;
-            var grid = this._grid;
-            var dirtyCells = this._dirtyCells;
-            var localBoundsPool = this._localBoundsPool;
-            var worldToLocal = this._worldToLocal;
-            engine.Matrix.invert(canvasWorldMatrix, worldToLocal);
-            while(entries.length < count)entries.push(new SortEntry());
-            // Allocate grid once, reuse forever (each cell must be a real [], not a sparse hole)
-            if (grid.length < gridDim) {
-                while(grid.length < gridDim)grid.push([]);
-                for(var i = 0; i < gridDim; i++){
-                    var row = grid[i];
-                    while(row.length < gridDim)row.push([]);
-                }
-            }
-            // Clear only previously-used cells (no full sweep)
-            for(var k = 0, n = dirtyCells.length; k < n; k += 2){
-                grid[dirtyCells[k]][dirtyCells[k + 1]].length = 0;
-            }
-            dirtyCells.length = 0;
-            // Pass 1: transform world bounds to canvas-local + accumulate the union AABB.
-            // Transform is already required to do precise overlap, so the union accumulation
-            // is essentially free — just a few minmax compares riding on the existing pass
-            var unionMinX = Infinity;
-            var unionMinY = Infinity;
-            var unionMaxX = -Infinity;
-            var unionMaxY = -Infinity;
-            for(var i1 = 0; i1 < count; i1++){
-                var _localBoundsPool, _i;
-                var localBounds = (_localBoundsPool = localBoundsPool)[_i = i1] || (_localBoundsPool[_i] = new engine.BoundingBox());
-                engine.BoundingBox.transform(elements[i1].component.bounds, worldToLocal, localBounds);
-                var min = localBounds.min, max = localBounds.max;
-                if (min.x < unionMinX) unionMinX = min.x;
-                if (min.y < unionMinY) unionMinY = min.y;
-                if (max.x > unionMaxX) unionMaxX = max.x;
-                if (max.y > unionMaxY) unionMaxY = max.y;
-            }
-            // Guard against a degenerate union (all elements collapsed onto a single point /
-            // axis); the grid then collapses to cell 0 which is semantically correct
-            var cellSizeX = Math.max(1e-6, unionMaxX - unionMinX) / gridDim;
-            var cellSizeY = Math.max(1e-6, unionMaxY - unionMinY) / gridDim;
-            var maxCell = gridDim - 1;
-            // Pass 2: register each element into grid cells and compute its depth
-            for(var i2 = 0; i2 < count; i2++){
-                var element = elements[i2];
-                var localBounds1 = localBoundsPool[i2];
-                var materialId = element.material.instanceId;
-                var textureId = element.texture ? element.texture.instanceId : 0;
-                // Floor + clamp guards floating-point edge cases (a `max` exactly on the union
-                // boundary would otherwise produce `gridDim`)
-                var minCellX = Math.min(maxCell, Math.max(0, Math.floor((localBounds1.min.x - unionMinX) / cellSizeX)));
-                var maxCellX = Math.min(maxCell, Math.max(0, Math.floor((localBounds1.max.x - unionMinX) / cellSizeX)));
-                var minCellY = Math.min(maxCell, Math.max(0, Math.floor((localBounds1.min.y - unionMinY) / cellSizeY)));
-                var maxCellY = Math.min(maxCell, Math.max(0, Math.floor((localBounds1.max.y - unionMinY) / cellSizeY)));
-                // Find the deepest overlapping prior, and whether that shelf has any incompatible occupant
-                var maxDepth = -1;
-                var maxDepthIncompatible = false;
-                for(var cellY = minCellY; cellY <= maxCellY; cellY++){
-                    for(var cellX = minCellX; cellX <= maxCellX; cellX++){
-                        var cell = grid[cellX][cellY];
-                        for(var j = 0, m = cell.length; j < m; j++){
-                            var other = cell[j];
-                            if (!UIBatchSorter._rectOverlap(localBounds1, other.bounds)) continue;
-                            var otherDepth = other.depth;
-                            var otherIncompatible = other.materialId !== materialId || other.textureId !== textureId;
-                            if (otherDepth > maxDepth) {
-                                maxDepth = otherDepth;
-                                maxDepthIncompatible = otherIncompatible;
-                            } else if (otherDepth === maxDepth && otherIncompatible) {
-                                maxDepthIncompatible = true;
-                            }
-                        }
-                    }
-                }
-                var entry = entries[i2];
-                entry.element = element;
-                entry.hierarchyIndex = i2;
-                // Share the deepest shelf if compatible; bump up one if blocked by an incompatible occupant
-                entry.depth = maxDepth < 0 ? 0 : maxDepth + (maxDepthIncompatible ? 1 : 0);
-                entry.materialId = materialId;
-                entry.textureId = textureId;
-                entry.bounds = localBounds1;
-                for(var cellY1 = minCellY; cellY1 <= maxCellY; cellY1++){
-                    for(var cellX1 = minCellX; cellX1 <= maxCellX; cellX1++){
-                        var cell1 = grid[cellX1][cellY1];
-                        if (cell1.length === 0) dirtyCells.push(cellX1, cellY1);
-                        cell1.push(entry);
-                    }
-                }
-            }
-            // @ts-ignore — Utils._quickSort is @internal
-            engine.Utils._quickSort(entries, 0, count, UIBatchSorter._compareEntries);
-            for(var i3 = 0; i3 < count; i3++)elements[i3] = entries[i3].element;
-        };
-        UIBatchSorter._rectOverlap = function _rectOverlap(a, b) {
-            return a.min.x < b.max.x && a.max.x > b.min.x && a.min.y < b.max.y && a.max.y > b.min.y;
-        };
-        UIBatchSorter._compareEntries = function _compareEntries(a, b) {
-            return a.depth - b.depth || a.materialId - b.materialId || a.textureId - b.textureId || a.hierarchyIndex - b.hierarchyIndex;
-        };
-        return UIBatchSorter;
-    }();
-    // Spatial-hash is fastest when cell size ≈ typical element size (one element per cell).
-    // UI elements typically span ~10% of the canvas → 10×10 grid.
-    UIBatchSorter._gridDim = 10;
-    UIBatchSorter._entries = new Array();
-    UIBatchSorter._grid = [];
-    // Interleaved (x, y) cell coords touched in the previous frame
-    UIBatchSorter._dirtyCells = new Array();
-    UIBatchSorter._localBoundsPool = new Array();
-    UIBatchSorter._worldToLocal = new engine.Matrix();
-    // materialId/textureId/bounds are flattened from RenderElement to avoid
-    // multi-hop property access in the hot inner loop and the sort comparator.
-    var SortEntry = function SortEntry() {
-        this.hierarchyIndex = 0;
-        this.depth = 0;
-        this.materialId = 0;
-        this.textureId = 0;
-    };
-
-    /**
-     * Render mode for ui canvas.
-     */ var CanvasRenderMode = /*#__PURE__*/ function(CanvasRenderMode) {
-        /**
-       * The UI canvas will be rendered directly onto the screen and adapted to screen space,
-       * overlaying other rendering elements in the same scene.
-       * @remarks if the `engine.canvas` size change, the UI canvas will automatically adapt.
-       */ CanvasRenderMode[CanvasRenderMode["ScreenSpaceOverlay"] = 0] = "ScreenSpaceOverlay";
-        /**
-       * The UI canvas is placed at a specified distance in front of the camera and adapted to screen space,
-       * with all objects rendered by the camera.
-       * @remarks if the camera's properties or the `engine.canvas` size change, the UI canvas will automatically adapt.
-       * @remarks if set `ScreenSpaceCamera` but no corresponding camera is assigned, the actual rendering mode defaults to `ScreenSpaceOverlay`.
-       */ CanvasRenderMode[CanvasRenderMode["ScreenSpaceCamera"] = 1] = "ScreenSpaceCamera";
-        /**
-       * The UI canvas is placed in the 3D world space and rendered by every camera in the same scene.
-       */ CanvasRenderMode[CanvasRenderMode["WorldSpace"] = 2] = "WorldSpace";
-        return CanvasRenderMode;
-    }({});
-
-    /**
-     * Resolution adaptation mode.
-     * @remarks Only effective in screen space.
-     */ var ResolutionAdaptationMode = /*#__PURE__*/ function(ResolutionAdaptationMode) {
-        /** Adapt based on width.(`referenceResolution.x`) */ ResolutionAdaptationMode[ResolutionAdaptationMode["WidthAdaptation"] = 0] = "WidthAdaptation";
-        /** Adapt based on height.(`referenceResolution.y`) */ ResolutionAdaptationMode[ResolutionAdaptationMode["HeightAdaptation"] = 1] = "HeightAdaptation";
-        /** Adapt based on both width and height.(`referenceResolution`) */ ResolutionAdaptationMode[ResolutionAdaptationMode["BothAdaptation"] = 2] = "BothAdaptation";
-        /** Adapt to the side with a larger ratio. */ ResolutionAdaptationMode[ResolutionAdaptationMode["ExpandAdaptation"] = 3] = "ExpandAdaptation";
-        /** Adapt to the side with smaller ratio. */ ResolutionAdaptationMode[ResolutionAdaptationMode["ShrinkAdaptation"] = 4] = "ShrinkAdaptation";
-        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._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._onSizeChanged;
-            // @ts-ignore
-            _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._onDisableInScene = function _onDisableInScene() {
+            this.entity._updateUIHierarchyVersion(exports.UICanvas._hierarchyCounter);
         };
         // @ts-ignore
         _proto._cloneTo = function _cloneTo(target) {
+            // RectMask2D extends Component directly; Component.prototype 上没有 _cloneTo，
+            // 不能 super._cloneTo(target) — 会拿到 undefined 报 "Cannot read properties of undefined (reading 'call')"。
+            // (Image/Mask 走 Renderer 链路所以能 super；RectMask2D 不在 Renderer 链路里。)
+            var targetSoftness = target._softness;
             // @ts-ignore
-            Transform.prototype._cloneTo.call(this, target);
-            var size = target._size, pivot = target._pivot;
-            // @ts-ignore
-            size._onValueChanged = pivot._onValueChanged = null;
-            size.copyFrom(this._size);
-            pivot.copyFrom(this._pivot);
-            // @ts-ignore
-            size._onValueChanged = target._onSizeChanged;
-            // @ts-ignore
-            pivot._onValueChanged = target._onPivotChanged;
-        };
-        _proto._onLocalMatrixChanging = function _onLocalMatrixChanging() {
-            // `super._onLocalMatrixChanging()` will set `LocalMatrix` dirty flag `false`
-            // If there is an alignment, `position` and `localMatrix` will be reset again
-            if (this._horizontalAlignment || this._verticalAlignment) {
-                this._updatePositionByAlignment();
-                this._setDirtyFlagTrue(engine.TransformModifyFlags.LocalMatrix);
-            } else {
-                Transform.prototype._onLocalMatrixChanging.call(this);
-            }
-        };
-        _proto._onWorldMatrixChanging = function _onWorldMatrixChanging() {
-            // `super._onWorldMatrixChanging()` will set `WorldMatrix` dirty flag `false`
-            // If there is an alignment, `position` and `worldMatrix` will be reset again(`worldMatrix` dirty flag is already `true`)
-            !this._horizontalAlignment && !this._verticalAlignment && Transform.prototype._onWorldMatrixChanging.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._updateRectBySizeAndPivot = function _updateRectBySizeAndPivot() {
-            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._updateRectBySizeAndPivot();
-            this._updateWorldFlagWithSelfRectChange();
-            // @ts-ignore
-            this._entity._updateFlagManager.dispatch(512);
-        };
-        _proto._onPivotChanged = function _onPivotChanged() {
-            this._updateRectBySizeAndPivot();
-            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._updateRectBySizeAndPivot();
-                        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",
-                get: /**
-       * Width and height of UI element.
-       */ function get() {
-                    return this._size;
-                },
-                set: function set(value) {
-                    var _this = this, size = _this._size;
-                    if (size === value) return;
-                    (size.x !== value.x || size.y !== value.y) && size.copyFrom(value);
-                }
-            },
-            {
-                key: "pivot",
-                get: /**
-       * Pivot of UI element.
-       */ function get() {
-                    return this._pivot;
-                },
-                set: function set(value) {
-                    var _this = this, pivot = _this._pivot;
-                    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();
-                    }
-                }
-            },
+            targetSoftness._onValueChanged = null;
+            targetSoftness.copyFrom(this._softness);
+            target._clampSoftness();
+            // @ts-ignore
+            targetSoftness._onValueChanged = target._onSoftnessChanged;
+        };
+        _proto._onDestroy = function _onDestroy() {
+            // @ts-ignore
+            this._softness._onValueChanged = null;
+            this._softness = null;
+            Component.prototype._onDestroy.call(this);
+        };
+        _proto._onSoftnessChanged = function _onSoftnessChanged() {
+            this._clampSoftness();
+        };
+        _proto._clampSoftness = function _clampSoftness() {
+            var softness = this._softness;
+            if (softness.x < 0) {
+                softness.x = 0;
+            }
+            if (softness.y < 0) {
+                softness.y = 0;
+            }
+        };
+        _create_class(RectMask2D, [
             {
-                key: "alignCenter",
+                key: "softness",
                 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.
+       * Soft clipping width on X/Y axis in world space.
        */ function get() {
-                    return this._alignCenter;
+                    return this._softness;
                 },
                 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();
+                    var softness = this._softness;
+                    if (softness === value) {
+                        return;
+                    }
+                    if (softness.x !== value.x || softness.y !== value.y) {
+                        softness.copyFrom(value);
+                        this._clampSoftness();
+                    }
                 }
             },
             {
-                key: "verticalAlignment",
+                key: "alphaClip",
                 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)
+       * Whether to enable hard clip (discard) when outside the rect.
        */ function get() {
-                    return this._verticalAlignment;
+                    return this._alphaClip;
                 },
                 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;
-                    }
+                    this._alphaClip = value;
                 }
-            },
+            }
+        ]);
+        return RectMask2D;
+    }(engine.Component);
+    exports.RectMask2D._tempRect = new engine.Vector4();
+    exports.RectMask2D._tempCorner0 = new engine.Vector3();
+    exports.RectMask2D._tempCorner1 = new engine.Vector3();
+    exports.RectMask2D._tempCorner2 = new engine.Vector3();
+    exports.RectMask2D._tempCorner3 = new engine.Vector3();
+    exports.RectMask2D = __decorate([
+        engine.dependentComponents(UITransform, engine.DependentMode.AutoAdd)
+    ], exports.RectMask2D);
+
+    var UIGroup = /*#__PURE__*/ function(Component) {
+        _inherits(UIGroup, Component);
+        function UIGroup(entity) {
+            var _this;
+            _this = Component.call(this, entity) || this, /** @internal */ _this._indexInGroup = -1, /** @internal */ _this._indexInRootCanvas = -1, /** @internal */ _this._disorderedElements = new engine.DisorderedArray(), /** @internal */ _this._globalAlpha = 1, /** @internal */ _this._globalInteractive = true, _this._alpha = 1, _this._interactive = true, _this._ignoreParentGroup = false, /** @internal */ _this._rootCanvasListeningEntities = [], /** @internal */ _this._groupListeningEntities = [], /** @internal */ _this._isRootCanvasDirty = false, /** @internal */ _this._isGroupDirty = false, /** @internal */ _this._groupDirtyFlags = 0;
+            _this._rootCanvasListener = _this._rootCanvasListener.bind(_this);
+            _this._groupListener = _this._groupListener.bind(_this);
+            return _this;
+        }
+        var _proto = UIGroup.prototype;
+        /**
+       * @internal
+       */ _proto._getGlobalAlpha = function _getGlobalAlpha() {
+            if (this._isContainDirtyFlag(1)) {
+                if (this._ignoreParentGroup) {
+                    this._globalAlpha = this._alpha;
+                } else {
+                    var parentGroup = this._getGroup();
+                    this._globalAlpha = this._alpha * (parentGroup ? parentGroup._getGlobalAlpha() : 1);
+                }
+                this._setDirtyFlagFalse(1);
+            }
+            return this._globalAlpha;
+        };
+        /**
+       * @internal
+       */ _proto._getGlobalInteractive = function _getGlobalInteractive() {
+            if (this._isContainDirtyFlag(2)) {
+                if (this._ignoreParentGroup) {
+                    this._globalInteractive = this._interactive;
+                } else {
+                    var parentGroup = this._getGroup();
+                    this._globalInteractive = this._interactive && (!parentGroup || parentGroup._getGlobalInteractive());
+                }
+                this._setDirtyFlagFalse(2);
+            }
+            return this._globalInteractive;
+        };
+        // @ts-ignore
+        _proto._onEnableInScene = function _onEnableInScene() {
+            Utils.setRootCanvasDirty(this);
+            Utils.setGroupDirty(this);
+            // @ts-ignore
+            this.entity._dispatchModify(EntityUIModifyFlags.GroupEnableInScene);
+        };
+        // @ts-ignore
+        _proto._onDisableInScene = function _onDisableInScene() {
+            Utils.cleanRootCanvas(this);
+            Utils.cleanGroup(this);
+            var disorderedElements = this._disorderedElements;
+            disorderedElements.forEach(function(element) {
+                Utils.setGroupDirty(element);
+            });
+            disorderedElements.length = 0;
+            disorderedElements.garbageCollection();
+            this._isRootCanvasDirty = this._isGroupDirty = false;
+        };
+        /**
+       * @internal
+       */ _proto._getRootCanvas = function _getRootCanvas() {
+            this._isRootCanvasDirty && Utils.setRootCanvas(this, Utils.searchRootCanvasInParents(this));
+            return this._rootCanvas;
+        };
+        /**
+       * @internal
+       */ _proto._getGroup = function _getGroup() {
+            this._isGroupDirty && Utils.setGroup(this, Utils.searchGroupInParents(this));
+            return this._group;
+        };
+        /**
+       * @internal
+       */ _proto._groupListener = function _groupListener(flag) {
+            if (flag === engine.EntityModifyFlags.Parent || flag === EntityUIModifyFlags.GroupEnableInScene) {
+                Utils.setGroupDirty(this);
+            }
+        };
+        /**
+       * @internal
+       */ _proto._rootCanvasListener = function _rootCanvasListener(flag) {
+            if (flag === engine.EntityModifyFlags.Parent || flag === EntityUIModifyFlags.CanvasEnableInScene) {
+                Utils.setRootCanvasDirty(this);
+                Utils.setGroupDirty(this);
+            }
+        };
+        /**
+       * @internal
+       */ _proto._onGroupModify = function _onGroupModify(flags, isPass) {
+            if (isPass === void 0) isPass = false;
+            if (isPass && this._ignoreParentGroup) return;
+            if (this._isContainDirtyFlags(flags)) return;
+            this._setDirtyFlagTrue(flags);
+            this._disorderedElements.forEach(function(element) {
+                element._onGroupModify(flags, true);
+            });
+        };
+        _proto._isContainDirtyFlags = function _isContainDirtyFlags(targetDirtyFlags) {
+            return (this._groupDirtyFlags & targetDirtyFlags) === targetDirtyFlags;
+        };
+        _proto._isContainDirtyFlag = function _isContainDirtyFlag(type) {
+            return (this._groupDirtyFlags & type) != 0;
+        };
+        _proto._setDirtyFlagTrue = function _setDirtyFlagTrue(type) {
+            this._groupDirtyFlags |= type;
+        };
+        _proto._setDirtyFlagFalse = function _setDirtyFlagFalse(type) {
+            this._groupDirtyFlags &= ~type;
+        };
+        _create_class(UIGroup, [
             {
-                key: "alignTop",
+                key: "ignoreParentGroup",
                 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.
+       * Whether to ignore the parent group.
+       * @remarks If this parameter set to `true`,
+       * all settings of the parent group will be ignored.
        */ function get() {
-                    return this._alignTop;
+                    return this._ignoreParentGroup;
                 },
                 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();
+                    if (this._ignoreParentGroup !== value) {
+                        this._ignoreParentGroup = value;
+                        this._onGroupModify(3);
                     }
                 }
             },
             {
-                key: "alignBottom",
+                key: "interactive",
                 get: /**
-       * Bottom inset used in vertical alignment formulas.
+       * Whether the group is interactive.
        */ function get() {
-                    return this._alignBottom;
+                    return this._interactive;
                 },
                 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();
+                    if (this._interactive !== value) {
+                        this._interactive = value;
+                        this._onGroupModify(2);
                     }
                 }
             },
             {
-                key: "alignMiddle",
+                key: "alpha",
                 get: /**
-       * Vertical middle offset relative to parent's middle.
+       * The alpha value of the group.
        */ function get() {
-                    return this._alignMiddle;
+                    return this._alpha;
                 },
                 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();
+                    value = Math.max(0, Math.min(value, 1));
+                    if (this._alpha !== value) {
+                        this._alpha = value;
+                        this._onGroupModify(1);
+                    }
                 }
             }
         ]);
-        return UITransform;
-    }(engine.Transform);
+        return UIGroup;
+    }(engine.Component);
     __decorate([
         engine.ignoreClone
-    ], UITransform.prototype, "_size", void 0);
+    ], UIGroup.prototype, "_indexInGroup", void 0);
     __decorate([
         engine.ignoreClone
-    ], UITransform.prototype, "_pivot", void 0);
+    ], UIGroup.prototype, "_indexInRootCanvas", void 0);
     __decorate([
-        engine.deepClone
-    ], UITransform.prototype, "_rect", void 0);
+        engine.ignoreClone
+    ], UIGroup.prototype, "_globalAlpha", void 0);
     __decorate([
         engine.ignoreClone
-    ], UITransform.prototype, "_onPositionChanged", null);
+    ], UIGroup.prototype, "_globalInteractive", void 0);
     __decorate([
         engine.ignoreClone
-    ], UITransform.prototype, "_onWorldPositionChanged", null);
+    ], UIGroup.prototype, "_rootCanvasListeningEntities", void 0);
     __decorate([
         engine.ignoreClone
-    ], UITransform.prototype, "_onSizeChanged", null);
+    ], UIGroup.prototype, "_groupListeningEntities", void 0);
     __decorate([
         engine.ignoreClone
-    ], UITransform.prototype, "_onPivotChanged", null);
-    /**
-     * @internal
-     * extends TransformModifyFlags
-     */ var UITransformModifyFlags = /*#__PURE__*/ function(UITransformModifyFlags) {
-        UITransformModifyFlags[UITransformModifyFlags["Size"] = 512] = "Size";
-        UITransformModifyFlags[UITransformModifyFlags["Pivot"] = 1024] = "Pivot";
-        return UITransformModifyFlags;
+    ], UIGroup.prototype, "_isRootCanvasDirty", void 0);
+    __decorate([
+        engine.ignoreClone
+    ], UIGroup.prototype, "_isGroupDirty", void 0);
+    __decorate([
+        engine.ignoreClone
+    ], UIGroup.prototype, "_groupDirtyFlags", void 0);
+    __decorate([
+        engine.ignoreClone
+    ], UIGroup.prototype, "_groupListener", null);
+    __decorate([
+        engine.ignoreClone
+    ], UIGroup.prototype, "_rootCanvasListener", null);
+    var GroupModifyFlags = /*#__PURE__*/ function(GroupModifyFlags) {
+        GroupModifyFlags[GroupModifyFlags["None"] = 0] = "None";
+        GroupModifyFlags[GroupModifyFlags["GlobalAlpha"] = 1] = "GlobalAlpha";
+        GroupModifyFlags[GroupModifyFlags["GlobalInteractive"] = 2] = "GlobalInteractive";
+        GroupModifyFlags[GroupModifyFlags["All"] = 3] = "All";
+        return GroupModifyFlags;
     }({});
 
     exports.UIRenderer = /*#__PURE__*/ function(Renderer) {
@@ -1035,13 +1016,16 @@
             _this = Renderer.call(this, entity) || this, /**
        * Custom boundary for raycast detection.
        * @remarks this is based on `this.entity.transform`.
-       */ _this.raycastPadding = new engine.Vector4(0, 0, 0, 0), /** @internal */ _this._indexInRootCanvas = -1, /** @internal */ _this._isRootCanvasDirty = false, /** @internal */ _this._rootCanvasListeningEntities = [], /** @internal */ _this._indexInGroup = -1, /** @internal */ _this._isGroupDirty = false, /** @internal */ _this._groupListeningEntities = [], _this._raycastEnabled = true, _this._color = new engine.Color(1, 1, 1, 1);
+       */ _this.raycastPadding = new engine.Vector4(0, 0, 0, 0), /** @internal */ _this._indexInRootCanvas = -1, /** @internal */ _this._isRootCanvasDirty = false, /** @internal */ _this._rootCanvasListeningEntities = [], /** @internal */ _this._indexInGroup = -1, /** @internal */ _this._isGroupDirty = false, /** @internal */ _this._groupListeningEntities = [], /** @internal */ _this._rectMasks = [], /** @internal */ _this._rectMaskRect = new engine.Vector4(), /** @internal */ _this._rectMaskEnabled = false, /** @internal */ _this._rectMaskSoftness = new engine.Vector4(), /** @internal */ _this._rectMaskHardClip = false, _this._raycastEnabled = false, _this._color = new engine.Color(1, 1, 1, 1);
             _this._dirtyUpdateFlag = engine.RendererUpdateFlags.WorldVolume | 2;
             _this._onColorChanged = _this._onColorChanged.bind(_this);
             //@ts-ignore
             _this._color._onValueChanged = _this._onColorChanged;
             _this._groupListener = _this._groupListener.bind(_this);
             _this._rootCanvasListener = _this._rootCanvasListener.bind(_this);
+            _this.shaderData.setFloat(UIRenderer._rectClipEnabledProperty, 0);
+            _this.shaderData.setVector4(UIRenderer._rectClipSoftnessProperty, _this._rectMaskSoftness);
+            _this.shaderData.setFloat(UIRenderer._rectClipHardClipProperty, 0);
             return _this;
         }
         var _proto = UIRenderer.prototype;
@@ -1064,6 +1048,7 @@
             if (this._renderFrameCount !== this.engine.time.frameCount) {
                 this._update(context);
             }
+            this._updateRectMaskClipState();
             this._render(context);
             // union camera global macro and renderer macro.
             engine.ShaderMacroCollection.unionCollection(context.camera._globalShaderMacro, // @ts-ignore
@@ -1142,6 +1127,15 @@
         };
         /**
        * @internal
+       */ _proto._setRectMasks = function _setRectMasks(rectMasks, count) {
+            var targetMasks = this._rectMasks;
+            targetMasks.length = count;
+            for(var i = 0; i < count; i++){
+                targetMasks[i] = rectMasks[i];
+            }
+        };
+        /**
+       * @internal
        */ _proto._raycast = function _raycast(ray, out, distance) {
             if (distance === void 0) distance = Number.MAX_SAFE_INTEGER;
             var plane = UIRenderer._tempPlane;
@@ -1155,7 +1149,7 @@
                 engine.Matrix.invert(transform.worldMatrix, worldMatrixInv);
                 var localPosition = UIRenderer._tempVec31;
                 engine.Vector3.transformCoordinate(hitPointWorld, worldMatrixInv, localPosition);
-                if (this._hitTest(localPosition)) {
+                if (this._hitTest(localPosition) && this._isRaycastVisibleByRectMask(hitPointWorld) && this._isRaycastVisibleByMask(hitPointWorld)) {
                     out.component = this;
                     out.distance = curDistance;
                     out.entity = this.entity;
@@ -1174,6 +1168,127 @@
             var _this_raycastPadding = this.raycastPadding, paddingLeft = _this_raycastPadding.x, paddingBottom = _this_raycastPadding.y, paddingRight = _this_raycastPadding.z, paddingTop = _this_raycastPadding.w;
             return x >= -width * pivotX + paddingLeft && x <= width * (1 - pivotX) - paddingRight && y >= -height * pivotY + paddingTop && y <= height * (1 - pivotY) - paddingBottom;
         };
+        _proto._isRaycastVisibleByMask = function _isRaycastVisibleByMask(hitPointWorld) {
+            var maskInteraction = this._maskInteraction;
+            if (maskInteraction === engine.SpriteMaskInteraction.None) {
+                return true;
+            }
+            // @ts-ignore
+            return this.scene._maskManager.isVisibleByMask(maskInteraction, this._maskLayer, hitPointWorld);
+        };
+        _proto._isRaycastVisibleByRectMask = function _isRaycastVisibleByRectMask(hitPointWorld) {
+            var rectMasks = this._rectMasks;
+            for(var i = 0, n = rectMasks.length; i < n; i++){
+                var rectMask = rectMasks[i];
+                if (!rectMask.enabled || !rectMask.entity.isActiveInHierarchy) {
+                    continue;
+                }
+                if (!rectMask._containsWorldPoint(hitPointWorld)) {
+                    return false;
+                }
+            }
+            return true;
+        };
+        _proto._updateRectMaskClipState = function _updateRectMaskClipState() {
+            var rectMasks = this._rectMasks;
+            var count = rectMasks.length;
+            if (count <= 0) {
+                this._resetRectMaskClipState();
+                return;
+            }
+            var minX = Number.NEGATIVE_INFINITY;
+            var minY = Number.NEGATIVE_INFINITY;
+            var maxX = Number.POSITIVE_INFINITY;
+            var maxY = Number.POSITIVE_INFINITY;
+            var clipSoftnessLeft = 0;
+            var clipSoftnessBottom = 0;
+            var clipSoftnessRight = 0;
+            var clipSoftnessTop = 0;
+            var clipHardClip = false;
+            var hasActiveMask = false;
+            var tempRect = UIRenderer._tempRect;
+            for(var i = 0; i < count; i++){
+                var rectMask = rectMasks[i];
+                if (!rectMask.enabled || !rectMask.entity.isActiveInHierarchy) {
+                    continue;
+                }
+                hasActiveMask = true;
+                var softness = rectMask.softness;
+                if (!clipHardClip && rectMask.alphaClip) {
+                    clipHardClip = true;
+                }
+                if (!rectMask._getWorldRect(tempRect)) {
+                    minX = 1;
+                    minY = 1;
+                    maxX = 0;
+                    maxY = 0;
+                    break;
+                }
+                if (tempRect.x > minX) {
+                    minX = tempRect.x;
+                    clipSoftnessLeft = softness.x;
+                }
+                if (tempRect.y > minY) {
+                    minY = tempRect.y;
+                    clipSoftnessBottom = softness.y;
+                }
+                if (tempRect.z < maxX) {
+                    maxX = tempRect.z;
+                    clipSoftnessRight = softness.x;
+                }
+                if (tempRect.w < maxY) {
+                    maxY = tempRect.w;
+                    clipSoftnessTop = softness.y;
+                }
+            }
+            if (!hasActiveMask) {
+                this._resetRectMaskClipState();
+                return;
+            }
+            if (minX >= maxX || minY >= maxY) {
+                minX = 1;
+                minY = 1;
+                maxX = 0;
+                maxY = 0;
+                clipSoftnessLeft = 0;
+                clipSoftnessBottom = 0;
+                clipSoftnessRight = 0;
+                clipSoftnessTop = 0;
+            }
+            var rectMaskRect = this._rectMaskRect;
+            if (rectMaskRect.x !== minX || rectMaskRect.y !== minY || rectMaskRect.z !== maxX || rectMaskRect.w !== maxY) {
+                rectMaskRect.set(minX, minY, maxX, maxY);
+                this.shaderData.setVector4(UIRenderer._rectClipRectProperty, rectMaskRect);
+            }
+            var rectMaskSoftness = this._rectMaskSoftness;
+            if (rectMaskSoftness.x !== clipSoftnessLeft || rectMaskSoftness.y !== clipSoftnessBottom || rectMaskSoftness.z !== clipSoftnessRight || rectMaskSoftness.w !== clipSoftnessTop) {
+                rectMaskSoftness.set(clipSoftnessLeft, clipSoftnessBottom, clipSoftnessRight, clipSoftnessTop);
+                this.shaderData.setVector4(UIRenderer._rectClipSoftnessProperty, rectMaskSoftness);
+            }
+            if (this._rectMaskHardClip !== clipHardClip) {
+                this._rectMaskHardClip = clipHardClip;
+                this.shaderData.setFloat(UIRenderer._rectClipHardClipProperty, clipHardClip ? 1 : 0);
+            }
+            if (!this._rectMaskEnabled) {
+                this._rectMaskEnabled = true;
+                this.shaderData.setFloat(UIRenderer._rectClipEnabledProperty, 1);
+            }
+        };
+        _proto._resetRectMaskClipState = function _resetRectMaskClipState() {
+            if (this._rectMaskEnabled) {
+                this._rectMaskEnabled = false;
+                this.shaderData.setFloat(UIRenderer._rectClipEnabledProperty, 0);
+            }
+            var rectMaskSoftness = this._rectMaskSoftness;
+            if (rectMaskSoftness.x !== 0 || rectMaskSoftness.y !== 0 || rectMaskSoftness.z !== 0 || rectMaskSoftness.w !== 0) {
+                rectMaskSoftness.set(0, 0, 0, 0);
+                this.shaderData.setVector4(UIRenderer._rectClipSoftnessProperty, rectMaskSoftness);
+            }
+            if (this._rectMaskHardClip) {
+                this._rectMaskHardClip = false;
+                this.shaderData.setFloat(UIRenderer._rectClipHardClipProperty, 0);
+            }
+        };
         _proto._onDestroy = function _onDestroy() {
             if (this._subChunk) {
                 this._getChunkManager().freeSubChunk(this._subChunk);
@@ -1183,6 +1298,8 @@
             //@ts-ignore
             this._color._onValueChanged = null;
             this._color = null;
+            this._rectMasks = null;
+            this._rectMaskSoftness = null;
         };
         _create_class(UIRenderer, [
             {
@@ -1198,6 +1315,30 @@
                     }
                 }
             },
+            {
+                key: "maskLayer",
+                get: /**
+       * The mask layer the ui renderer belongs to.
+       */ function get() {
+                    return this._maskLayer;
+                },
+                set: function set(value) {
+                    this._maskLayer = value;
+                }
+            },
+            {
+                key: "maskInteraction",
+                get: /**
+       * Interacts with the masks.
+       */ function get() {
+                    return this._maskInteraction;
+                },
+                set: function set(value) {
+                    if (this._maskInteraction !== value) {
+                        this._maskInteraction = value;
+                    }
+                }
+            },
             {
                 key: "raycastEnabled",
                 get: /**
@@ -1212,14 +1353,17 @@
         ]);
         return UIRenderer;
     }(engine.Renderer);
+    /** @internal */ exports.UIRenderer._tempVec20 = new engine.Vector2();
     /** @internal */ exports.UIRenderer._tempVec30 = new engine.Vector3();
     /** @internal */ exports.UIRenderer._tempVec31 = new engine.Vector3();
     /** @internal */ exports.UIRenderer._tempMat = new engine.Matrix();
     /** @internal */ exports.UIRenderer._tempPlane = new engine.Plane();
     /** @internal */ exports.UIRenderer._textureProperty = engine.ShaderProperty.getByName("renderer_UITexture");
-    __decorate([
-        engine.deepClone
-    ], exports.UIRenderer.prototype, "raycastPadding", void 0);
+    /** @internal */ exports.UIRenderer._rectClipRectProperty = engine.ShaderProperty.getByName("renderer_UIRectClipRect");
+    /** @internal */ exports.UIRenderer._rectClipEnabledProperty = engine.ShaderProperty.getByName("renderer_UIRectClipEnabled");
+    /** @internal */ exports.UIRenderer._rectClipSoftnessProperty = engine.ShaderProperty.getByName("renderer_UIRectClipSoftness");
+    /** @internal */ exports.UIRenderer._rectClipHardClipProperty = engine.ShaderProperty.getByName("renderer_UIRectClipHardClip");
+    /** @internal */ exports.UIRenderer._tempRect = new engine.Vector4();
     __decorate([
         engine.ignoreClone
     ], exports.UIRenderer.prototype, "_indexInRootCanvas", void 0);
@@ -1242,11 +1386,20 @@
         engine.ignoreClone
     ], exports.UIRenderer.prototype, "_subChunk", void 0);
     __decorate([
-        engine.assignmentClone
-    ], exports.UIRenderer.prototype, "_raycastEnabled", void 0);
+        engine.ignoreClone
+    ], exports.UIRenderer.prototype, "_rectMasks", void 0);
+    __decorate([
+        engine.ignoreClone
+    ], exports.UIRenderer.prototype, "_rectMaskRect", void 0);
+    __decorate([
+        engine.ignoreClone
+    ], exports.UIRenderer.prototype, "_rectMaskEnabled", void 0);
+    __decorate([
+        engine.ignoreClone
+    ], exports.UIRenderer.prototype, "_rectMaskSoftness", void 0);
     __decorate([
-        engine.deepClone
-    ], exports.UIRenderer.prototype, "_color", void 0);
+        engine.ignoreClone
+    ], exports.UIRenderer.prototype, "_rectMaskHardClip", void 0);
     __decorate([
         engine.ignoreClone
     ], exports.UIRenderer.prototype, "_groupListener", null);
@@ -1266,906 +1419,1077 @@
         return UIRendererUpdateFlags;
     }({});
 
-    /**
-     * Interactive component.
-     */ var UIInteractive = /*#__PURE__*/ function(Script) {
-        _inherits(UIInteractive, Script);
-        function UIInteractive(entity) {
+    exports.UICanvas = /*#__PURE__*/ function(Component) {
+        _inherits(UICanvas, Component);
+        function UICanvas(entity) {
             var _this;
-            _this = Script.call(this, entity) || this, /** @internal */ _this._indexInRootCanvas = -1, /** @internal */ _this._isRootCanvasDirty = false, /** @internal */ _this._rootCanvasListeningEntities = [], /** @internal */ _this._indexInGroup = -1, /** @internal */ _this._isGroupDirty = false, /** @internal */ _this._groupListeningEntities = [], /** @internal */ _this._globalInteractive = false, /** @internal */ _this._globalInteractiveDirty = false, _this._transitions = [], _this._interactive = true, _this._state = 0, /** @todo Multi-touch points are not considered yet. */ _this._isPointerInside = false, _this._isPointerDragging = false;
-            _this._groupListener = _this._groupListener.bind(_this);
+            _this = Component.call(this, entity) || this, /** @internal */ _this._canvasIndex = -1, /** @internal */ _this._indexInRootCanvas = -1, /** @internal */ _this._isRootCanvasDirty = false, /** @internal */ _this._rootCanvasListeningEntities = [], /** @internal */ _this._isRootCanvas = false, /** @internal */ _this._renderElements = [], /** @internal */ _this._batchedRenderElements = [], /** @internal */ _this._sortDistance = 0, /** @internal */ _this._orderedRenderers = [], /** @internal */ _this._realRenderMode = 4, /** @internal */ _this._disorderedElements = new engine.DisorderedArray(), _this._renderMode = CanvasRenderMode.WorldSpace, _this._resolutionAdaptationMode = ResolutionAdaptationMode.HeightAdaptation, _this._sortOrder = 0, _this._distance = 10, _this._referenceResolution = new engine.Vector2(800, 600), _this._referenceResolutionPerUnit = 100, _this._hierarchyVersion = -1, _this._center = new engine.Vector3();
+            _this._onCanvasSizeListener = _this._onCanvasSizeListener.bind(_this);
+            _this._onCameraModifyListener = _this._onCameraModifyListener.bind(_this);
+            _this._onCameraTransformListener = _this._onCameraTransformListener.bind(_this);
+            _this._onReferenceResolutionChanged = _this._onReferenceResolutionChanged.bind(_this);
+            // @ts-ignore
+            _this._referenceResolution._onValueChanged = _this._onReferenceResolutionChanged;
             _this._rootCanvasListener = _this._rootCanvasListener.bind(_this);
+            _this._centerDirtyFlag = entity.registerWorldChangeFlag();
             return _this;
         }
-        var _proto = UIInteractive.prototype;
+        var _proto = UICanvas.prototype;
         /**
-       * Add transition on this interactive.
-       * @param transition - The transition
-       */ _proto.addTransition = function addTransition(transition) {
-            var interactive = transition._interactive;
-            if (interactive !== this) {
-                interactive == null ? void 0 : interactive.removeTransition(transition);
-                this._transitions.push(transition);
-                transition._interactive = this;
-                transition._setState(this._state, true);
+       * @internal
+       */ _proto._raycast = function _raycast(ray, out, distance) {
+            if (distance === void 0) distance = Number.MAX_SAFE_INTEGER;
+            var renderers = this._getRenderers();
+            for(var i = renderers.length - 1; i >= 0; i--){
+                var element = renderers[i];
+                if (element.raycastEnabled && element._raycast(ray, out, distance)) {
+                    return true;
+                }
+            }
+            out.component = null;
+            out.entity = null;
+            out.distance = 0;
+            out.point.set(0, 0, 0);
+            out.normal.set(0, 0, 0);
+            return false;
+        };
+        /**
+       * @internal
+       */ _proto._getRootCanvas = function _getRootCanvas() {
+            return this._rootCanvas;
+        };
+        /**
+       * @internal
+       */ _proto._canRender = function _canRender(camera) {
+            return this._realRenderMode !== CanvasRenderMode.ScreenSpaceCamera || this._camera === camera;
+        };
+        /**
+       * @internal
+       */ _proto._canDispatchEvent = function _canDispatchEvent(camera) {
+            var realMode = this._realRenderMode;
+            if (realMode === CanvasRenderMode.ScreenSpaceOverlay) {
+                return true;
+            }
+            var assignedCamera = this._camera;
+            // @ts-ignore
+            return !assignedCamera || !assignedCamera._phasedActiveInScene || assignedCamera === camera;
+        };
+        /**
+       * @internal
+       */ _proto._prepareRender = function _prepareRender(context) {
+            var _this = this, engine = _this.engine, mode = _this._realRenderMode;
+            var _context_camera = context.camera, enableFrustumCulling = _context_camera.enableFrustumCulling, cullingMask = _context_camera.cullingMask, frustum = _context_camera._frustum;
+            var frameCount = engine.time.frameCount;
+            var renderElements = this._renderElements;
+            renderElements.length = 0;
+            var virtualCamera = context.virtualCamera;
+            this._updateSortDistance(virtualCamera.isOrthographic, virtualCamera.position, virtualCamera.forward);
+            var _engine_canvas = engine.canvas, width = _engine_canvas.width, height = _engine_canvas.height;
+            var renderers = this._getRenderers();
+            for(var i = 0, n = renderers.length; i < n; i++){
+                var renderer = renderers[i];
+                // Filter by camera culling mask
+                if (!(cullingMask & renderer.entity.layer)) {
+                    continue;
+                }
+                // Filter by camera frustum
+                if (enableFrustumCulling) {
+                    switch(mode){
+                        case CanvasRenderMode.ScreenSpaceOverlay:
+                            var _renderer_bounds = renderer.bounds, min = _renderer_bounds.min, max = _renderer_bounds.max;
+                            if (min.x > width || max.x < 0 || min.y > height || max.y < 0) {
+                                continue;
+                            }
+                            break;
+                        case CanvasRenderMode.ScreenSpaceCamera:
+                        case CanvasRenderMode.WorldSpace:
+                            if (!frustum.intersectsBox(renderer.bounds)) {
+                                continue;
+                            }
+                            break;
+                    }
+                }
+                renderer._prepareRender(context);
+                renderer._renderFrameCount = frameCount;
+            }
+            var batchedRenderElements = this._batchedRenderElements;
+            batchedRenderElements.length = 0;
+            UIBatchSorter.sort(renderElements, this.entity.transform.worldMatrix);
+            engine._batcherManager.batch(renderElements, batchedRenderElements);
+            for(var i1 = 0, n1 = batchedRenderElements.length; i1 < n1; i1++){
+                batchedRenderElements[i1].subDistancePriority = i1;
+            }
+        };
+        /**
+       * @internal
+       */ _proto._updateSortDistance = function _updateSortDistance(isOrthographic, cameraPosition, cameraForward) {
+            switch(this._realRenderMode){
+                case CanvasRenderMode.ScreenSpaceOverlay:
+                    this._sortDistance = 0;
+                    break;
+                case CanvasRenderMode.ScreenSpaceCamera:
+                    this._sortDistance = this._distance;
+                    break;
+                case CanvasRenderMode.WorldSpace:
+                    var boundsCenter = this._getCenter();
+                    if (isOrthographic) {
+                        var distance = UICanvas._tempVec3;
+                        engine.Vector3.subtract(boundsCenter, cameraPosition, distance);
+                        this._sortDistance = engine.Vector3.dot(distance, cameraForward);
+                    } else {
+                        this._sortDistance = engine.Vector3.distanceSquared(boundsCenter, cameraPosition);
+                    }
+                    break;
+            }
+        };
+        // @ts-ignore
+        _proto._onEnableInScene = function _onEnableInScene() {
+            var entity = this.entity;
+            // @ts-ignore
+            entity._dispatchModify(4, this);
+            var rootCanvas = Utils.searchRootCanvasInParents(this);
+            this._setIsRootCanvas(!rootCanvas);
+            Utils.setRootCanvas(this, rootCanvas);
+        };
+        // @ts-ignore
+        _proto._onDisableInScene = function _onDisableInScene() {
+            this._setIsRootCanvas(false);
+            Utils.cleanRootCanvas(this);
+        };
+        // @ts-ignore
+        _proto._onDisable = function _onDisable() {
+            this._renderElements.length = 0;
+            this._batchedRenderElements.length = 0;
+        };
+        /**
+       * @internal
+       */ _proto._rootCanvasListener = function _rootCanvasListener(flag, param) {
+            if (this._isRootCanvas) {
+                if (flag === engine.EntityModifyFlags.Parent) {
+                    var rootCanvas = Utils.searchRootCanvasInParents(this);
+                    this._setIsRootCanvas(!rootCanvas);
+                    Utils.setRootCanvas(this, rootCanvas);
+                } else if (flag === 4) {
+                    this._setIsRootCanvas(false);
+                    Utils.setRootCanvas(this, param);
+                }
+            } else {
+                if (flag === engine.EntityModifyFlags.Parent) {
+                    var rootCanvas1 = Utils.searchRootCanvasInParents(this);
+                    this._setIsRootCanvas(!rootCanvas1);
+                    Utils.setRootCanvas(this, rootCanvas1);
+                }
+            }
+        };
+        /**
+       * @internal
+       */ _proto._cloneTo = function _cloneTo(target) {
+            target.renderMode = this._renderMode;
+        };
+        _proto._getRenderers = function _getRenderers() {
+            var _this = this, renderers = _this._orderedRenderers, entity = _this.entity;
+            var uiHierarchyVersion = entity._uiHierarchyVersion;
+            if (this._hierarchyVersion !== uiHierarchyVersion) {
+                UICanvas._tempRectMaskList.length = 0;
+                renderers.length = this._walk(this.entity, renderers, 0, null, 0);
+                UICanvas._tempGroupAbleList.length = 0;
+                this._hierarchyVersion = uiHierarchyVersion;
+                ++UICanvas._hierarchyCounter;
+            }
+            return renderers;
+        };
+        _proto._adapterPoseInScreenSpace = function _adapterPoseInScreenSpace() {
+            var transform = this.entity.transform;
+            var realRenderMode = this._realRenderMode;
+            if (realRenderMode === CanvasRenderMode.ScreenSpaceCamera) {
+                var cameraEntity = this._camera.entity;
+                if (!this._isSameOrChildEntity(cameraEntity)) {
+                    var cameraTransform = cameraEntity.transform;
+                    var cameraWorldPosition = cameraTransform.worldPosition, cameraWorldForward = cameraTransform.worldForward;
+                    var distance = this._distance;
+                    transform.setWorldPosition(cameraWorldPosition.x + cameraWorldForward.x * distance, cameraWorldPosition.y + cameraWorldForward.y * distance, cameraWorldPosition.z + cameraWorldForward.z * distance);
+                    transform.worldRotationQuaternion.copyFrom(cameraTransform.worldRotationQuaternion);
+                }
+            } else {
+                var canvas = this.engine.canvas;
+                transform.setWorldPosition(canvas.width * 0.5, canvas.height * 0.5, 0);
+                transform.worldRotationQuaternion.set(0, 0, 0, 1);
             }
         };
-        /**
-       * Remove a transition.
-       * @param shape - The transition.
-       */ _proto.removeTransition = function removeTransition(transition) {
-            var transitions = this._transitions;
-            var lastOneIndex = transitions.length - 1;
-            for(var i = lastOneIndex; i >= 0; i--){
-                if (transitions[i] === transition) {
-                    i !== lastOneIndex && (transitions[i] = transitions[lastOneIndex]);
-                    transitions.length = lastOneIndex;
-                    transition._interactive = null;
+        _proto._adapterSizeInScreenSpace = function _adapterSizeInScreenSpace() {
+            var transform = this.entity.transform;
+            var realRenderMode = this._realRenderMode;
+            var _this__referenceResolution = this._referenceResolution, width = _this__referenceResolution.x, height = _this__referenceResolution.y;
+            var curWidth;
+            var curHeight;
+            if (realRenderMode === CanvasRenderMode.ScreenSpaceCamera) {
+                var camera = this._camera;
+                curHeight = camera.isOrthographic ? camera.orthographicSize * 2 : 2 * (Math.tan(engine.MathUtil.degreeToRadian(camera.fieldOfView * 0.5)) * this._distance);
+                curWidth = camera.aspectRatio * curHeight;
+            } else {
+                var canvas = this.engine.canvas;
+                curHeight = canvas.height;
+                curWidth = canvas.width;
+            }
+            var expectX, expectY, expectZ;
+            switch(this._resolutionAdaptationMode){
+                case ResolutionAdaptationMode.WidthAdaptation:
+                    expectX = expectY = expectZ = curWidth / width;
+                    break;
+                case ResolutionAdaptationMode.HeightAdaptation:
+                    expectX = expectY = expectZ = curHeight / height;
+                    break;
+                case ResolutionAdaptationMode.BothAdaptation:
+                    expectX = curWidth / width;
+                    expectY = curHeight / height;
+                    expectZ = (expectX + expectY) * 0.5;
+                    break;
+                case ResolutionAdaptationMode.ExpandAdaptation:
+                    expectX = expectY = expectZ = Math.min(curWidth / width, curHeight / height);
+                    break;
+                case ResolutionAdaptationMode.ShrinkAdaptation:
+                    expectX = expectY = expectZ = Math.max(curWidth / width, curHeight / height);
                     break;
-                }
             }
+            var worldMatrix = UICanvas._tempMat;
+            engine.Matrix.affineTransformation(UICanvas._tempVec3.set(expectX, expectY, expectZ), transform.worldRotationQuaternion, transform.worldPosition, worldMatrix);
+            transform.worldMatrix = worldMatrix;
+            transform.size.set(curWidth / expectX, curHeight / expectY);
         };
-        /**
-       * Remove all transitions.
-       */ _proto.clearTransitions = function clearTransitions() {
-            var transitions = this._transitions;
-            for(var i = 0, n = transitions.length; i < n; i++){
-                transitions[i]._interactive = null;
+        _proto._walk = function _walk(entity, renderers, depth, group, rectMaskCount) {
+            if (depth === void 0) depth = 0;
+            if (group === void 0) group = null;
+            if (rectMaskCount === void 0) rectMaskCount = 0;
+            // @ts-ignore
+            var components = entity._components;
+            var tempGroupAbleList = UICanvas._tempGroupAbleList;
+            var tempRectMaskList = UICanvas._tempRectMaskList;
+            var rectMask = null;
+            var groupAbleCount = 0;
+            for(var i = 0, n = components.length; i < n; i++){
+                var component = components[i];
+                if (!component.enabled) continue;
+                if (_instanceof(component, exports.UIRenderer)) {
+                    renderers[depth] = component;
+                    ++depth;
+                    component._isRootCanvasDirty && Utils.setRootCanvas(component, this);
+                    if (component._isGroupDirty) {
+                        tempGroupAbleList[groupAbleCount++] = component;
+                    }
+                    component._setRectMasks(tempRectMaskList, rectMaskCount);
+                } else if (_instanceof(component, UIInteractive)) {
+                    component._isRootCanvasDirty && Utils.setRootCanvas(component, this);
+                    if (component._isGroupDirty) {
+                        tempGroupAbleList[groupAbleCount++] = component;
+                    }
+                } else if (_instanceof(component, exports.RectMask2D)) {
+                    rectMask = component;
+                } else if (_instanceof(component, UIGroup)) {
+                    component._isRootCanvasDirty && Utils.setRootCanvas(component, this);
+                    component._isGroupDirty && Utils.setGroup(component, group);
+                    group = component;
+                }
             }
-            transitions.length = 0;
+            for(var i1 = 0; i1 < groupAbleCount; i1++){
+                Utils.setGroup(tempGroupAbleList[i1], group);
+            }
+            if (rectMask) {
+                tempRectMaskList[rectMaskCount++] = rectMask;
+            }
+            var children = entity.children;
+            for(var i2 = 0, n1 = children.length; i2 < n1; i2++){
+                var child = children[i2];
+                child.isActive && (depth = this._walk(child, renderers, depth, group, rectMaskCount));
+            }
+            return depth;
         };
-        _proto.onUpdate = function onUpdate(deltaTime) {
-            if (this._getGlobalInteractive()) {
-                var transitions = this._transitions;
-                for(var i = 0, n = transitions.length; i < n; i++){
-                    transitions[i]._onUpdate(deltaTime);
+        _proto._updateCameraObserver = function _updateCameraObserver() {
+            var camera = this._isRootCanvas && this._renderMode === CanvasRenderMode.ScreenSpaceCamera ? this._camera : null;
+            var preCamera = this._cameraObserver;
+            if (preCamera !== camera) {
+                this._cameraObserver = camera;
+                if (preCamera) {
+                    // @ts-ignore
+                    preCamera.entity._updateFlagManager.removeListener(this._onCameraTransformListener);
+                    // @ts-ignore
+                    preCamera._unRegisterModifyListener(this._onCameraModifyListener);
+                }
+                if (camera) {
+                    // @ts-ignore
+                    camera.entity._updateFlagManager.addListener(this._onCameraTransformListener);
+                    // @ts-ignore
+                    camera._registerModifyListener(this._onCameraModifyListener);
                 }
             }
         };
-        _proto.onPointerBeginDrag = function onPointerBeginDrag() {
-            this._isPointerDragging = true;
-            this._updateState(false);
-        };
-        _proto.onPointerEndDrag = function onPointerEndDrag() {
-            this._isPointerDragging = false;
-            this._updateState(false);
-        };
-        _proto.onPointerEnter = function onPointerEnter() {
-            this._isPointerInside = true;
-            this._updateState(false);
-        };
-        _proto.onPointerExit = function onPointerExit() {
-            this._isPointerInside = false;
-            this._updateState(false);
-        };
-        _proto.onDestroy = function onDestroy() {
-            Script.prototype.onDestroy.call(this);
-            var transitions = this._transitions;
-            for(var i = transitions.length - 1; i >= 0; i--){
-                transitions[i].destroy();
+        _proto._onCameraModifyListener = function _onCameraModifyListener(flag) {
+            if (this._realRenderMode === CanvasRenderMode.ScreenSpaceCamera) {
+                switch(flag){
+                    case engine.CameraModifyFlags.ProjectionType:
+                    case engine.CameraModifyFlags.AspectRatio:
+                        this._adapterSizeInScreenSpace();
+                        break;
+                    case engine.CameraModifyFlags.FieldOfView:
+                        !this._camera.isOrthographic && this._adapterSizeInScreenSpace();
+                        break;
+                    case engine.CameraModifyFlags.OrthographicSize:
+                        this._camera.isOrthographic && this._adapterSizeInScreenSpace();
+                        break;
+                    case engine.CameraModifyFlags.DisableInScene:
+                        this._setRealRenderMode(CanvasRenderMode.ScreenSpaceOverlay);
+                        break;
+                }
+            } else {
+                flag === engine.CameraModifyFlags.EnableInScene && this._setRealRenderMode(CanvasRenderMode.ScreenSpaceCamera);
             }
         };
-        /**
-       * @internal
-       */ _proto._getRootCanvas = function _getRootCanvas() {
-            this._isRootCanvasDirty && Utils.setRootCanvas(this, Utils.searchRootCanvasInParents(this));
-            return this._rootCanvas;
-        };
-        /**
-       * @internal
-       */ _proto._getGroup = function _getGroup() {
-            this._isGroupDirty && Utils.setGroup(this, Utils.searchGroupInParents(this));
-            return this._group;
+        _proto._onCameraTransformListener = function _onCameraTransformListener() {
+            this._realRenderMode === CanvasRenderMode.ScreenSpaceCamera && this._adapterPoseInScreenSpace();
         };
-        // @ts-ignore
-        _proto._onEnableInScene = function _onEnableInScene() {
+        _proto._addCanvasListener = function _addCanvasListener() {
             // @ts-ignore
-            Script.prototype._onEnableInScene.call(this);
-            Utils.setRootCanvasDirty(this);
-            Utils.setGroupDirty(this);
-            this._updateState(true);
+            this.engine.canvas._sizeUpdateFlagManager.addListener(this._onCanvasSizeListener);
         };
-        // @ts-ignore
-        _proto._onDisableInScene = function _onDisableInScene() {
+        _proto._removeCanvasListener = function _removeCanvasListener() {
             // @ts-ignore
-            Script.prototype._onDisableInScene.call(this);
-            Utils.cleanRootCanvas(this);
-            Utils.cleanGroup(this);
-            this._isPointerInside = this._isPointerDragging = false;
+            this.engine.canvas._sizeUpdateFlagManager.removeListener(this._onCanvasSizeListener);
         };
-        /**
-       * @internal
-       */ _proto._groupListener = function _groupListener(flag) {
-            if (flag === engine.EntityModifyFlags.Parent || flag === EntityUIModifyFlags.GroupEnableInScene) {
-                Utils.setGroupDirty(this);
-            }
+        _proto._onCanvasSizeListener = function _onCanvasSizeListener() {
+            var canvas = this.engine.canvas;
+            this.entity.transform.setWorldPosition(canvas.width * 0.5, canvas.height * 0.5, 0);
+            this._adapterSizeInScreenSpace();
         };
-        /**
-       * @internal
-       */ _proto._rootCanvasListener = function _rootCanvasListener(flag) {
-            if (flag === engine.EntityModifyFlags.Parent || flag === EntityUIModifyFlags.CanvasEnableInScene) {
-                Utils.setRootCanvasDirty(this);
-                Utils.setGroupDirty(this);
+        _proto._onReferenceResolutionChanged = function _onReferenceResolutionChanged() {
+            var realRenderMode = this._realRenderMode;
+            if (realRenderMode === CanvasRenderMode.ScreenSpaceOverlay || realRenderMode === CanvasRenderMode.ScreenSpaceCamera) {
+                this._adapterSizeInScreenSpace();
             }
         };
-        /**
-       * @internal
-       */ _proto._onGroupModify = function _onGroupModify(flags) {
-            if (flags & GroupModifyFlags.GlobalInteractive) {
-                this._globalInteractiveDirty = true;
+        _proto._setIsRootCanvas = function _setIsRootCanvas(isRootCanvas) {
+            var _this = this;
+            if (this._isRootCanvas !== isRootCanvas) {
+                this._isRootCanvas = isRootCanvas;
+                this._updateCameraObserver();
+                this._setRealRenderMode(this._getRealRenderMode());
+                if (isRootCanvas) {
+                    this.entity._updateUIHierarchyVersion(UICanvas._hierarchyCounter);
+                } else {
+                    var _this1 = this, disorderedElements = _this1._disorderedElements;
+                    disorderedElements.forEach(function(element) {
+                        if (_instanceof(element, UICanvas)) {
+                            var rootCanvas = Utils.searchRootCanvasInParents(element);
+                            element._setIsRootCanvas(!rootCanvas);
+                            Utils.setRootCanvas(element, rootCanvas);
+                        } else {
+                            Utils.setRootCanvasDirty(_this);
+                            Utils.setGroupDirty(element);
+                        }
+                    });
+                    disorderedElements.length = 0;
+                    disorderedElements.garbageCollection();
+                    this._orderedRenderers.length = 0;
+                }
             }
         };
-        /**
-       * @internal
-       */ _proto._getGlobalInteractive = function _getGlobalInteractive() {
-            if (this._globalInteractiveDirty) {
-                var group = this._getGroup();
-                var globalInteractive = this._interactive && (!group || group._getGlobalInteractive());
-                if (this._globalInteractive !== globalInteractive) {
-                    this._globalInteractive = globalInteractive;
-                    this._updateState(true);
-                }
-                this._globalInteractiveDirty = false;
+        _proto._getCenter = function _getCenter() {
+            if (this._centerDirtyFlag.flag) {
+                var center = this._center;
+                var uiTransform = this.entity.transform;
+                var pivot = uiTransform.pivot, size = uiTransform.size;
+                center.set((0.5 - pivot.x) * size.x, (0.5 - pivot.y) * size.y, 0);
+                engine.Vector3.transformCoordinate(center, uiTransform.worldMatrix, center);
+                this._centerDirtyFlag.flag = false;
             }
-            return this._globalInteractive;
+            return this._center;
         };
-        _proto._updateState = function _updateState(instant) {
-            var state = this._getInteractiveState();
-            if (this._state !== state) {
-                this._state = state;
-                var transitions = this._transitions;
-                for(var i = 0, n = transitions.length; i < n; i++){
-                    transitions[i]._setState(state, instant);
+        _proto._getRealRenderMode = function _getRealRenderMode() {
+            if (this._isRootCanvas) {
+                var _this__camera;
+                var mode = this._renderMode;
+                // @ts-ignore
+                if (mode === CanvasRenderMode.ScreenSpaceCamera && !((_this__camera = this._camera) == null ? void 0 : _this__camera._phasedActiveInScene)) {
+                    return CanvasRenderMode.ScreenSpaceOverlay;
+                } else {
+                    return mode;
                 }
+            } else {
+                return 4;
             }
         };
-        _proto._getInteractiveState = function _getInteractiveState() {
-            if (!this._getGlobalInteractive()) {
-                return 3;
+        _proto._setRealRenderMode = function _setRealRenderMode(curRealMode) {
+            var preRealMode = this._realRenderMode;
+            if (preRealMode !== curRealMode) {
+                this._realRenderMode = curRealMode;
+                // @ts-ignore
+                var componentsManager = this.scene._componentsManager;
+                switch(preRealMode){
+                    case CanvasRenderMode.ScreenSpaceOverlay:
+                        this._removeCanvasListener();
+                    case CanvasRenderMode.ScreenSpaceCamera:
+                    case CanvasRenderMode.WorldSpace:
+                        componentsManager.removeUICanvas(this, preRealMode === CanvasRenderMode.ScreenSpaceOverlay);
+                        break;
+                }
+                switch(curRealMode){
+                    case CanvasRenderMode.ScreenSpaceOverlay:
+                        this._addCanvasListener();
+                    case CanvasRenderMode.ScreenSpaceCamera:
+                        this._adapterPoseInScreenSpace();
+                        this._adapterSizeInScreenSpace();
+                    case CanvasRenderMode.WorldSpace:
+                        componentsManager.addUICanvas(this, curRealMode === CanvasRenderMode.ScreenSpaceOverlay);
+                        break;
+                }
             }
-            if (this._isPointerDragging) {
-                return 1;
-            } else {
-                return this._isPointerInside ? 2 : 0;
+        };
+        _proto._isSameOrChildEntity = function _isSameOrChildEntity(cameraEntity) {
+            var canvasEntity = this.entity;
+            while(cameraEntity){
+                if (cameraEntity === canvasEntity) return true;
+                cameraEntity = cameraEntity.parent;
             }
+            return false;
         };
-        _create_class(UIInteractive, [
+        _create_class(UICanvas, [
             {
-                key: "transitions",
+                key: "referenceResolutionPerUnit",
                 get: /**
-       * The transitions of this interactive.
+       * The conversion ratio between reference resolution and unit for UI elements in this canvas.
        */ function get() {
-                    return this._transitions;
+                    return this._referenceResolutionPerUnit;
+                },
+                set: function set(value) {
+                    if (this._referenceResolutionPerUnit !== value) {
+                        this._referenceResolutionPerUnit = value;
+                        this._disorderedElements.forEach(function(element) {
+                            element._onRootCanvasModify == null ? void 0 : element._onRootCanvasModify.call(element, 1);
+                        });
+                    }
                 }
             },
             {
-                key: "interactive",
+                key: "referenceResolution",
                 get: /**
-       * Whether the interactive is enabled.
+       * The reference resolution of the UI canvas in `ScreenSpaceCamera` and `ScreenSpaceOverlay` mode.
        */ function get() {
-                    return this._interactive;
+                    return this._referenceResolution;
                 },
                 set: function set(value) {
-                    if (this._interactive !== value) {
-                        this._interactive = value;
-                        this._globalInteractiveDirty = true;
+                    var referenceResolution = this._referenceResolution;
+                    if (referenceResolution === value) return;
+                    (referenceResolution.x !== value.x || referenceResolution.y !== value.y) && referenceResolution.copyFrom(value);
+                }
+            },
+            {
+                key: "renderMode",
+                get: /**
+       * The rendering mode of the UI canvas.
+       */ function get() {
+                    return this._renderMode;
+                },
+                set: function set(mode) {
+                    var preMode = this._renderMode;
+                    if (preMode !== mode) {
+                        this._renderMode = mode;
+                        this._updateCameraObserver();
+                        this._setRealRenderMode(this._getRealRenderMode());
+                    }
+                }
+            },
+            {
+                key: "camera",
+                get: /**
+       * The camera associated with this canvas.
+       * @remarks
+       * - `ScreenSpaceCamera` mode: Used for rendering adaptation. Defaults to `ScreenSpaceOverlay` if not assigned.
+       * - `WorldSpace` mode: Used for event detection. If not assigned, events are handled by the highest-priority camera.
+       */ function get() {
+                    return this._camera;
+                },
+                set: function set(value) {
+                    var preCamera = this._camera;
+                    if (preCamera !== value) {
+                        if (value && this._isSameOrChildEntity(value.entity)) {
+                            engine.Logger.warn("Camera entity matching or nested within the canvas entity disables canvas auto-adaptation in ScreenSpaceCamera mode.");
+                        }
+                        this._camera = value;
+                        this._updateCameraObserver();
+                        var preRenderMode = this._realRenderMode;
+                        var curRenderMode = this._getRealRenderMode();
+                        if (preRenderMode === curRenderMode) {
+                            if (curRenderMode === CanvasRenderMode.ScreenSpaceCamera) {
+                                this._adapterPoseInScreenSpace();
+                                this._adapterSizeInScreenSpace();
+                            }
+                        } else {
+                            this._setRealRenderMode(curRenderMode);
+                        }
+                    }
+                }
+            },
+            {
+                key: "renderCamera",
+                get: /**
+       * @deprecated Use {@link camera} instead.
+       */ function get() {
+                    return this.camera;
+                },
+                set: function set(value) {
+                    this.camera = value;
+                }
+            },
+            {
+                key: "resolutionAdaptationMode",
+                get: /**
+       * The screen resolution adaptation mode of the UI canvas in `ScreenSpaceCamera` and `ScreenSpaceOverlay` mode.
+       */ function get() {
+                    return this._resolutionAdaptationMode;
+                },
+                set: function set(value) {
+                    if (this._resolutionAdaptationMode !== value) {
+                        this._resolutionAdaptationMode = value;
+                        var realRenderMode = this._realRenderMode;
+                        if (realRenderMode === CanvasRenderMode.ScreenSpaceCamera || realRenderMode === CanvasRenderMode.ScreenSpaceOverlay) {
+                            this._adapterSizeInScreenSpace();
+                        }
+                    }
+                }
+            },
+            {
+                key: "sortOrder",
+                get: /**
+       * The rendering order priority of the UI canvas in `ScreenSpaceOverlay` mode.
+       */ function get() {
+                    return this._sortOrder;
+                },
+                set: function set(value) {
+                    if (this._sortOrder !== value) {
+                        this._sortOrder = value;
+                        this._realRenderMode === CanvasRenderMode.ScreenSpaceOverlay && // @ts-ignore
+                        (this.scene._componentsManager._overlayCanvasesSortingFlag = true);
+                    }
+                }
+            },
+            {
+                key: "distance",
+                get: /**
+       * The distance between the UI canvas and the camera in `ScreenSpaceCamera` mode.
+       */ function get() {
+                    return this._distance;
+                },
+                set: function set(value) {
+                    if (this._distance !== value) {
+                        this._distance = value;
+                        if (this._realRenderMode === CanvasRenderMode.ScreenSpaceCamera) {
+                            this._adapterPoseInScreenSpace();
+                            this._adapterSizeInScreenSpace();
+                        }
                     }
                 }
             }
         ]);
-        return UIInteractive;
-    }(engine.Script);
+        return UICanvas;
+    }(engine.Component);
+    /** @internal */ exports.UICanvas._hierarchyCounter = 1;
+    exports.UICanvas._tempGroupAbleList = [];
+    exports.UICanvas._tempRectMaskList = [];
+    exports.UICanvas._tempVec3 = new engine.Vector3();
+    exports.UICanvas._tempMat = new engine.Matrix();
     __decorate([
         engine.ignoreClone
-    ], UIInteractive.prototype, "_indexInRootCanvas", void 0);
+    ], exports.UICanvas.prototype, "_canvasIndex", void 0);
     __decorate([
         engine.ignoreClone
-    ], UIInteractive.prototype, "_isRootCanvasDirty", void 0);
+    ], exports.UICanvas.prototype, "_indexInRootCanvas", void 0);
     __decorate([
         engine.ignoreClone
-    ], UIInteractive.prototype, "_rootCanvasListeningEntities", void 0);
+    ], exports.UICanvas.prototype, "_isRootCanvasDirty", void 0);
     __decorate([
         engine.ignoreClone
-    ], UIInteractive.prototype, "_indexInGroup", void 0);
+    ], exports.UICanvas.prototype, "_rootCanvasListeningEntities", void 0);
     __decorate([
         engine.ignoreClone
-    ], UIInteractive.prototype, "_isGroupDirty", void 0);
+    ], exports.UICanvas.prototype, "_isRootCanvas", void 0);
     __decorate([
         engine.ignoreClone
-    ], UIInteractive.prototype, "_groupListeningEntities", void 0);
+    ], exports.UICanvas.prototype, "_renderElements", void 0);
     __decorate([
         engine.ignoreClone
-    ], UIInteractive.prototype, "_globalInteractive", void 0);
+    ], exports.UICanvas.prototype, "_batchedRenderElements", void 0);
     __decorate([
         engine.ignoreClone
-    ], UIInteractive.prototype, "_globalInteractiveDirty", void 0);
+    ], exports.UICanvas.prototype, "_sortDistance", void 0);
+    __decorate([
+        engine.ignoreClone
+    ], exports.UICanvas.prototype, "_orderedRenderers", void 0);
+    __decorate([
+        engine.ignoreClone
+    ], exports.UICanvas.prototype, "_realRenderMode", void 0);
     __decorate([
-        engine.deepClone
-    ], UIInteractive.prototype, "_transitions", void 0);
+        engine.ignoreClone
+    ], exports.UICanvas.prototype, "_renderMode", void 0);
     __decorate([
-        engine.assignmentClone
-    ], UIInteractive.prototype, "_interactive", void 0);
+        engine.ignoreClone
+    ], exports.UICanvas.prototype, "_hierarchyVersion", void 0);
     __decorate([
         engine.ignoreClone
-    ], UIInteractive.prototype, "_state", void 0);
+    ], exports.UICanvas.prototype, "_center", void 0);
     __decorate([
         engine.ignoreClone
-    ], UIInteractive.prototype, "_isPointerInside", void 0);
+    ], exports.UICanvas.prototype, "_rootCanvasListener", null);
     __decorate([
         engine.ignoreClone
-    ], UIInteractive.prototype, "_isPointerDragging", void 0);
+    ], exports.UICanvas.prototype, "_onCameraModifyListener", null);
     __decorate([
         engine.ignoreClone
-    ], UIInteractive.prototype, "_groupListener", null);
+    ], exports.UICanvas.prototype, "_onCameraTransformListener", null);
     __decorate([
         engine.ignoreClone
-    ], UIInteractive.prototype, "_rootCanvasListener", null);
+    ], exports.UICanvas.prototype, "_onCanvasSizeListener", null);
     __decorate([
         engine.ignoreClone
-    ], UIInteractive.prototype, "_onGroupModify", null);
-    var InteractiveState = /*#__PURE__*/ function(InteractiveState) {
-        InteractiveState[InteractiveState["Normal"] = 0] = "Normal";
-        InteractiveState[InteractiveState["Pressed"] = 1] = "Pressed";
-        InteractiveState[InteractiveState["Hover"] = 2] = "Hover";
-        InteractiveState[InteractiveState["Disable"] = 3] = "Disable";
-        return InteractiveState;
+    ], exports.UICanvas.prototype, "_onReferenceResolutionChanged", null);
+    exports.UICanvas = __decorate([
+        engine.dependentComponents(UITransform, engine.DependentMode.AutoAdd)
+    ], exports.UICanvas);
+    /**
+     * @remarks Extends `EntityModifyFlags`.
+     */ var EntityUIModifyFlags = /*#__PURE__*/ function(EntityUIModifyFlags) {
+        EntityUIModifyFlags[EntityUIModifyFlags["CanvasEnableInScene"] = 4] = "CanvasEnableInScene";
+        EntityUIModifyFlags[EntityUIModifyFlags["GroupEnableInScene"] = 8] = "GroupEnableInScene";
+        return EntityUIModifyFlags;
+    }({});
+    var RootCanvasModifyFlags = /*#__PURE__*/ function(RootCanvasModifyFlags) {
+        RootCanvasModifyFlags[RootCanvasModifyFlags["None"] = 0] = "None";
+        RootCanvasModifyFlags[RootCanvasModifyFlags["ReferenceResolutionPerUnit"] = 1] = "ReferenceResolutionPerUnit";
+        RootCanvasModifyFlags[RootCanvasModifyFlags["All"] = 1] = "All";
+        return RootCanvasModifyFlags;
     }({});
 
-    exports.UICanvas = /*#__PURE__*/ function(Component) {
-        _inherits(UICanvas, Component);
-        function UICanvas(entity) {
-            var _this;
-            _this = Component.call(this, entity) || this, /** @internal */ _this._canvasIndex = -1, /** @internal */ _this._indexInRootCanvas = -1, /** @internal */ _this._isRootCanvasDirty = false, /** @internal */ _this._rootCanvasListeningEntities = [], /** @internal */ _this._isRootCanvas = false, /** @internal */ _this._renderElements = [], /** @internal */ _this._batchedRenderElements = [], /** @internal */ _this._sortDistance = 0, /** @internal */ _this._orderedRenderers = [], /** @internal */ _this._realRenderMode = 4, /** @internal */ _this._disorderedElements = new engine.DisorderedArray(), _this._renderMode = CanvasRenderMode.WorldSpace, _this._resolutionAdaptationMode = ResolutionAdaptationMode.HeightAdaptation, _this._sortOrder = 0, _this._distance = 10, _this._referenceResolution = new engine.Vector2(800, 600), _this._referenceResolutionPerUnit = 100, _this._hierarchyVersion = -1, _this._center = new engine.Vector3();
-            _this._onCanvasSizeListener = _this._onCanvasSizeListener.bind(_this);
-            _this._onCameraModifyListener = _this._onCameraModifyListener.bind(_this);
-            _this._onCameraTransformListener = _this._onCameraTransformListener.bind(_this);
-            _this._onReferenceResolutionChanged = _this._onReferenceResolutionChanged.bind(_this);
-            // @ts-ignore
-            _this._referenceResolution._onValueChanged = _this._onReferenceResolutionChanged;
-            _this._rootCanvasListener = _this._rootCanvasListener.bind(_this);
-            _this._centerDirtyFlag = entity.registerWorldChangeFlag();
-            return _this;
-        }
-        var _proto = UICanvas.prototype;
+    var Utils = /*#__PURE__*/ function() {
+        function Utils() {}
         /**
-       * @internal
-       */ _proto._raycast = function _raycast(ray, out, distance) {
-            if (distance === void 0) distance = Number.MAX_SAFE_INTEGER;
-            var renderers = this._getRenderers();
-            for(var i = renderers.length - 1; i >= 0; i--){
-                var element = renderers[i];
-                if (element.raycastEnabled && element._raycast(ray, out, distance)) {
-                    return true;
+       * Local position of a screen point in the component
+       */ Utils.screenToLocalPoint = function screenToLocalPoint(position, transform, out) {
+            var engine$1 = transform.engine;
+            // Get root canvas
+            var entity = transform.entity;
+            var rootCanvas;
+            while(entity){
+                // @ts-ignore
+                var components = entity._components;
+                for(var i = 0, n = components.length; i < n; i++){
+                    var component = components[i];
+                    if (component.enabled && _instanceof(component, exports.UICanvas) && component._isRootCanvas) {
+                        rootCanvas = component;
+                    }
                 }
+                entity = entity.parent;
+            }
+            if (!rootCanvas) return false;
+            // Calculate ray
+            var ray = this._tempRay;
+            switch(rootCanvas._realRenderMode){
+                case CanvasRenderMode.ScreenSpaceOverlay:
+                    // Screen to world ( Assume that world units have a one-to-one relationship with pixel units )
+                    ray.origin.set(position.x, engine$1.canvas.height - position.y, 1);
+                    ray.direction.set(0, 0, -1);
+                    break;
+                case CanvasRenderMode.ScreenSpaceCamera:
+                    rootCanvas.renderCamera.screenPointToRay(position, ray);
+                    break;
+                default:
+                    // World space not yet supported, see issue #2793
+                    return false;
+            }
+            // Intersect ray with UI plane to get local coordinates
+            var plane = this._tempPlane;
+            var normal = plane.normal.copyFrom(transform.worldForward);
+            plane.distance = -engine.Vector3.dot(normal, transform.worldPosition);
+            var curDistance = ray.intersectPlane(plane);
+            if (curDistance >= 0 && curDistance < Number.MAX_SAFE_INTEGER) {
+                var hitPointWorld = ray.getPoint(curDistance, this._tempVec3);
+                var worldMatrixInv = this._tempMat;
+                engine.Matrix.invert(transform.worldMatrix, worldMatrixInv);
+                engine.Vector3.transformCoordinate(hitPointWorld, worldMatrixInv, out);
+                return true;
             }
-            out.component = null;
-            out.entity = null;
-            out.distance = 0;
-            out.point.set(0, 0, 0);
-            out.normal.set(0, 0, 0);
             return false;
         };
-        /**
-       * @internal
-       */ _proto._getRootCanvas = function _getRootCanvas() {
-            return this._rootCanvas;
+        Utils.setRootCanvasDirty = function setRootCanvasDirty(element) {
+            if (element._isRootCanvasDirty) return;
+            element._isRootCanvasDirty = true;
+            this._registerRootCanvas(element, null);
+            element._onRootCanvasModify == null ? void 0 : element._onRootCanvasModify.call(element, RootCanvasModifyFlags.All);
         };
-        /**
-       * @internal
-       */ _proto._canRender = function _canRender(camera) {
-            return this._realRenderMode !== CanvasRenderMode.ScreenSpaceCamera || this._camera === camera;
+        Utils.setRootCanvas = function setRootCanvas(element, rootCanvas) {
+            element._isRootCanvasDirty = false;
+            this._registerRootCanvas(element, rootCanvas);
+            var fromEntity = _instanceof(element, exports.UICanvas) ? element.entity.parent : element.entity;
+            var _rootCanvas_entity_parent;
+            var toEntity = (_rootCanvas_entity_parent = rootCanvas == null ? void 0 : rootCanvas.entity.parent) != null ? _rootCanvas_entity_parent : null;
+            this._registerListener(fromEntity, toEntity, element._rootCanvasListener, element._rootCanvasListeningEntities);
         };
-        /**
-       * @internal
-       */ _proto._canDispatchEvent = function _canDispatchEvent(camera) {
-            var realMode = this._realRenderMode;
-            if (realMode === CanvasRenderMode.ScreenSpaceOverlay) {
-                return true;
-            }
-            var assignedCamera = this._camera;
-            // @ts-ignore
-            return !assignedCamera || !assignedCamera._phasedActiveInScene || assignedCamera === camera;
+        Utils.cleanRootCanvas = function cleanRootCanvas(element) {
+            this._registerRootCanvas(element, null);
+            this._unRegisterListener(element._rootCanvasListener, element._rootCanvasListeningEntities);
         };
-        /**
-       * @internal
-       */ _proto._prepareRender = function _prepareRender(context) {
-            var _this = this, engine = _this.engine, mode = _this._realRenderMode;
-            var _context_camera = context.camera, enableFrustumCulling = _context_camera.enableFrustumCulling, cullingMask = _context_camera.cullingMask, frustum = _context_camera._frustum;
-            var frameCount = engine.time.frameCount;
-            var renderElements = this._renderElements;
-            renderElements.length = 0;
-            var virtualCamera = context.virtualCamera;
-            this._updateSortDistance(virtualCamera.isOrthographic, virtualCamera.position, virtualCamera.forward);
-            var _engine_canvas = engine.canvas, width = _engine_canvas.width, height = _engine_canvas.height;
-            var renderers = this._getRenderers();
-            for(var i = 0, n = renderers.length; i < n; i++){
-                var renderer = renderers[i];
-                // Filter by camera culling mask
-                if (!(cullingMask & renderer.entity.layer)) {
-                    continue;
-                }
-                // Filter by camera frustum
-                if (enableFrustumCulling) {
-                    switch(mode){
-                        case CanvasRenderMode.ScreenSpaceOverlay:
-                            var _renderer_bounds = renderer.bounds, min = _renderer_bounds.min, max = _renderer_bounds.max;
-                            if (min.x > width || max.x < 0 || min.y > height || max.y < 0) {
-                                continue;
-                            }
-                            break;
-                        case CanvasRenderMode.ScreenSpaceCamera:
-                        case CanvasRenderMode.WorldSpace:
-                            if (!frustum.intersectsBox(renderer.bounds)) {
-                                continue;
-                            }
-                            break;
+        Utils.searchRootCanvasInParents = function searchRootCanvasInParents(element) {
+            var entity = _instanceof(element, exports.UICanvas) ? element.entity.parent : element.entity;
+            while(entity){
+                // @ts-ignore
+                var components = entity._components;
+                for(var i = 0, n = components.length; i < n; i++){
+                    var component = components[i];
+                    if (component.enabled && _instanceof(component, exports.UICanvas) && component._isRootCanvas) {
+                        return component;
                     }
                 }
-                renderer._prepareRender(context);
-                renderer._renderFrameCount = frameCount;
-            }
-            var batchedRenderElements = this._batchedRenderElements;
-            batchedRenderElements.length = 0;
-            UIBatchSorter.sort(renderElements, this.entity.transform.worldMatrix);
-            engine._batcherManager.batch(renderElements, batchedRenderElements);
-            for(var i1 = 0, n1 = batchedRenderElements.length; i1 < n1; i1++){
-                batchedRenderElements[i1].subDistancePriority = i1;
+                entity = entity.parent;
             }
+            return null;
         };
-        /**
-       * @internal
-       */ _proto._updateSortDistance = function _updateSortDistance(isOrthographic, cameraPosition, cameraForward) {
-            switch(this._realRenderMode){
-                case CanvasRenderMode.ScreenSpaceOverlay:
-                    this._sortDistance = 0;
-                    break;
-                case CanvasRenderMode.ScreenSpaceCamera:
-                    this._sortDistance = this._distance;
-                    break;
-                case CanvasRenderMode.WorldSpace:
-                    var boundsCenter = this._getCenter();
-                    if (isOrthographic) {
-                        var distance = UICanvas._tempVec3;
-                        engine.Vector3.subtract(boundsCenter, cameraPosition, distance);
-                        this._sortDistance = engine.Vector3.dot(distance, cameraForward);
-                    } else {
-                        this._sortDistance = engine.Vector3.distanceSquared(boundsCenter, cameraPosition);
-                    }
-                    break;
+        Utils.setGroupDirty = function setGroupDirty(element) {
+            if (element._isGroupDirty) return;
+            element._isGroupDirty = true;
+            this._registerGroup(element, null);
+            element._onGroupModify(GroupModifyFlags.All);
+        };
+        Utils.setGroup = function setGroup(element, group) {
+            element._isGroupDirty = false;
+            this._registerGroup(element, group);
+            var rootCanvas = element._getRootCanvas();
+            if (rootCanvas) {
+                var fromEntity = _instanceof(element, UIGroup) ? element.entity.parent : element.entity;
+                var _group_entity;
+                var toEntity = (_group_entity = group == null ? void 0 : group.entity) != null ? _group_entity : rootCanvas.entity.parent;
+                this._registerListener(fromEntity, toEntity, element._groupListener, element._groupListeningEntities);
+            } else {
+                this._unRegisterListener(element._groupListener, element._groupListeningEntities);
             }
         };
-        // @ts-ignore
-        _proto._onEnableInScene = function _onEnableInScene() {
-            var entity = this.entity;
-            // @ts-ignore
-            entity._dispatchModify(4, this);
-            var rootCanvas = Utils.searchRootCanvasInParents(this);
-            this._setIsRootCanvas(!rootCanvas);
-            Utils.setRootCanvas(this, rootCanvas);
+        Utils.cleanGroup = function cleanGroup(element) {
+            this._registerGroup(element, null);
+            this._unRegisterListener(element._groupListener, element._groupListeningEntities);
         };
-        // @ts-ignore
-        _proto._onDisableInScene = function _onDisableInScene() {
-            this._setIsRootCanvas(false);
-            Utils.cleanRootCanvas(this);
+        Utils.searchGroupInParents = function searchGroupInParents(element) {
+            var rootCanvas = element._getRootCanvas();
+            if (!rootCanvas) return null;
+            var entity = _instanceof(element, UIGroup) ? element.entity.parent : element.entity;
+            var rootCanvasParent = rootCanvas.entity.parent;
+            while(entity && entity !== rootCanvasParent){
+                // @ts-ignore
+                var components = entity._components;
+                for(var i = 0, n = components.length; i < n; i++){
+                    var component = components[i];
+                    if (component.enabled && _instanceof(component, UIGroup)) {
+                        return component;
+                    }
+                }
+                entity = entity.parent;
+            }
+            return null;
         };
-        // @ts-ignore
-        _proto._onDisable = function _onDisable() {
-            this._renderElements.length = 0;
-            this._batchedRenderElements.length = 0;
+        Utils._registerRootCanvas = function _registerRootCanvas(element, canvas) {
+            var preCanvas = element._rootCanvas;
+            if (preCanvas !== canvas) {
+                if (preCanvas) {
+                    var replaced = preCanvas._disorderedElements.deleteByIndex(element._indexInRootCanvas);
+                    replaced && (replaced._indexInRootCanvas = element._indexInRootCanvas);
+                    element._indexInRootCanvas = -1;
+                }
+                if (canvas) {
+                    var disorderedElements = canvas._disorderedElements;
+                    element._indexInRootCanvas = disorderedElements.length;
+                    disorderedElements.add(element);
+                }
+                element._rootCanvas = canvas;
+            }
         };
-        /**
-       * @internal
-       */ _proto._rootCanvasListener = function _rootCanvasListener(flag, param) {
-            if (this._isRootCanvas) {
-                if (flag === engine.EntityModifyFlags.Parent) {
-                    var rootCanvas = Utils.searchRootCanvasInParents(this);
-                    this._setIsRootCanvas(!rootCanvas);
-                    Utils.setRootCanvas(this, rootCanvas);
-                } else if (flag === 4) {
-                    this._setIsRootCanvas(false);
-                    Utils.setRootCanvas(this, param);
+        Utils._registerGroup = function _registerGroup(element, group) {
+            var preGroup = element._group;
+            if (preGroup !== group) {
+                if (preGroup) {
+                    var replaced = preGroup._disorderedElements.deleteByIndex(element._indexInGroup);
+                    replaced && (replaced._indexInGroup = element._indexInGroup);
+                    element._indexInGroup = -1;
                 }
-            } else {
-                if (flag === engine.EntityModifyFlags.Parent) {
-                    var rootCanvas1 = Utils.searchRootCanvasInParents(this);
-                    this._setIsRootCanvas(!rootCanvas1);
-                    Utils.setRootCanvas(this, rootCanvas1);
+                if (group) {
+                    var disorderedElements = group._disorderedElements;
+                    element._indexInGroup = disorderedElements.length;
+                    disorderedElements.add(element);
                 }
+                element._group = group;
+                element._onGroupModify(GroupModifyFlags.All);
             }
         };
-        /**
-       * @internal
-       */ _proto._cloneTo = function _cloneTo(target) {
-            target.renderMode = this._renderMode;
-        };
-        _proto._getRenderers = function _getRenderers() {
-            var _this = this, renderers = _this._orderedRenderers, entity = _this.entity;
-            var uiHierarchyVersion = entity._uiHierarchyVersion;
-            if (this._hierarchyVersion !== uiHierarchyVersion) {
-                renderers.length = this._walk(this.entity, renderers);
-                UICanvas._tempGroupAbleList.length = 0;
-                this._hierarchyVersion = uiHierarchyVersion;
-                ++UICanvas._hierarchyCounter;
-            }
-            return renderers;
-        };
-        _proto._adapterPoseInScreenSpace = function _adapterPoseInScreenSpace() {
-            var transform = this.entity.transform;
-            var realRenderMode = this._realRenderMode;
-            if (realRenderMode === CanvasRenderMode.ScreenSpaceCamera) {
-                var cameraEntity = this._camera.entity;
-                if (!this._isSameOrChildEntity(cameraEntity)) {
-                    var cameraTransform = cameraEntity.transform;
-                    var cameraWorldPosition = cameraTransform.worldPosition, cameraWorldForward = cameraTransform.worldForward;
-                    var distance = this._distance;
-                    transform.setWorldPosition(cameraWorldPosition.x + cameraWorldForward.x * distance, cameraWorldPosition.y + cameraWorldForward.y * distance, cameraWorldPosition.z + cameraWorldForward.z * distance);
-                    transform.worldRotationQuaternion.copyFrom(cameraTransform.worldRotationQuaternion);
+        Utils._registerListener = function _registerListener(entity, root, listener, listeningEntities) {
+            var count = 0;
+            while(entity && entity !== root){
+                var preEntity = listeningEntities[count];
+                if (preEntity !== entity) {
+                    // @ts-ignore
+                    preEntity == null ? void 0 : preEntity._unRegisterModifyListener(listener);
+                    listeningEntities[count] = entity;
+                    // @ts-ignore
+                    entity._registerModifyListener(listener);
                 }
-            } else {
-                var canvas = this.engine.canvas;
-                transform.setWorldPosition(canvas.width * 0.5, canvas.height * 0.5, 0);
-                transform.worldRotationQuaternion.set(0, 0, 0, 1);
+                entity = entity.parent;
+                count++;
             }
+            listeningEntities.length = count;
         };
-        _proto._adapterSizeInScreenSpace = function _adapterSizeInScreenSpace() {
-            var transform = this.entity.transform;
-            var realRenderMode = this._realRenderMode;
-            var _this__referenceResolution = this._referenceResolution, width = _this__referenceResolution.x, height = _this__referenceResolution.y;
-            var curWidth;
-            var curHeight;
-            if (realRenderMode === CanvasRenderMode.ScreenSpaceCamera) {
-                var camera = this._camera;
-                curHeight = camera.isOrthographic ? camera.orthographicSize * 2 : 2 * (Math.tan(engine.MathUtil.degreeToRadian(camera.fieldOfView * 0.5)) * this._distance);
-                curWidth = camera.aspectRatio * curHeight;
-            } else {
-                var canvas = this.engine.canvas;
-                curHeight = canvas.height;
-                curWidth = canvas.width;
+        Utils._unRegisterListener = function _unRegisterListener(listener, listeningEntities) {
+            for(var i = 0, n = listeningEntities.length; i < n; i++){
+                // @ts-ignore
+                listeningEntities[i]._unRegisterModifyListener(listener);
             }
-            var expectX, expectY, expectZ;
-            switch(this._resolutionAdaptationMode){
-                case ResolutionAdaptationMode.WidthAdaptation:
-                    expectX = expectY = expectZ = curWidth / width;
-                    break;
-                case ResolutionAdaptationMode.HeightAdaptation:
-                    expectX = expectY = expectZ = curHeight / height;
-                    break;
-                case ResolutionAdaptationMode.BothAdaptation:
-                    expectX = curWidth / width;
-                    expectY = curHeight / height;
-                    expectZ = (expectX + expectY) * 0.5;
-                    break;
-                case ResolutionAdaptationMode.ExpandAdaptation:
-                    expectX = expectY = expectZ = Math.min(curWidth / width, curHeight / height);
-                    break;
-                case ResolutionAdaptationMode.ShrinkAdaptation:
-                    expectX = expectY = expectZ = Math.max(curWidth / width, curHeight / height);
-                    break;
+            listeningEntities.length = 0;
+        };
+        return Utils;
+    }();
+    Utils._tempRay = new engine.Ray();
+    Utils._tempPlane = new engine.Plane();
+    Utils._tempVec3 = new engine.Vector3();
+    Utils._tempMat = new engine.Matrix();
+
+    /**
+     * Interactive component.
+     */ var UIInteractive = /*#__PURE__*/ function(Script) {
+        _inherits(UIInteractive, Script);
+        function UIInteractive(entity) {
+            var _this;
+            _this = Script.call(this, entity) || this, /** @internal */ _this._indexInRootCanvas = -1, /** @internal */ _this._isRootCanvasDirty = false, /** @internal */ _this._rootCanvasListeningEntities = [], /** @internal */ _this._indexInGroup = -1, /** @internal */ _this._isGroupDirty = false, /** @internal */ _this._groupListeningEntities = [], /** @internal */ _this._globalInteractive = false, /** @internal */ _this._globalInteractiveDirty = false, _this._transitions = [], _this._interactive = true, _this._state = 0, /** @todo Multi-touch points are not considered yet. */ _this._isPointerInside = false, _this._isPointerDragging = false;
+            _this._groupListener = _this._groupListener.bind(_this);
+            _this._rootCanvasListener = _this._rootCanvasListener.bind(_this);
+            return _this;
+        }
+        var _proto = UIInteractive.prototype;
+        /**
+       * Add transition on this interactive.
+       * @param transition - The transition
+       */ _proto.addTransition = function addTransition(transition) {
+            var interactive = transition._interactive;
+            if (interactive !== this) {
+                interactive == null ? void 0 : interactive.removeTransition(transition);
+                this._transitions.push(transition);
+                transition._interactive = this;
+                transition._setState(this._state, true);
             }
-            var worldMatrix = UICanvas._tempMat;
-            engine.Matrix.affineTransformation(UICanvas._tempVec3.set(expectX, expectY, expectZ), transform.worldRotationQuaternion, transform.worldPosition, worldMatrix);
-            transform.worldMatrix = worldMatrix;
-            transform.size.set(curWidth / expectX, curHeight / expectY);
         };
-        _proto._walk = function _walk(entity, renderers, depth, group) {
-            if (depth === void 0) depth = 0;
-            if (group === void 0) group = null;
-            // @ts-ignore
-            var components = entity._components;
-            var tempGroupAbleList = UICanvas._tempGroupAbleList;
-            var groupAbleCount = 0;
-            for(var i = 0, n = components.length; i < n; i++){
-                var component = components[i];
-                if (!component.enabled) continue;
-                if (_instanceof(component, exports.UIRenderer)) {
-                    renderers[depth] = component;
-                    ++depth;
-                    component._isRootCanvasDirty && Utils.setRootCanvas(component, this);
-                    if (component._isGroupDirty) {
-                        tempGroupAbleList[groupAbleCount++] = component;
-                    }
-                } else if (_instanceof(component, UIInteractive)) {
-                    component._isRootCanvasDirty && Utils.setRootCanvas(component, this);
-                    if (component._isGroupDirty) {
-                        tempGroupAbleList[groupAbleCount++] = component;
-                    }
-                } else if (_instanceof(component, UIGroup)) {
-                    component._isRootCanvasDirty && Utils.setRootCanvas(component, this);
-                    component._isGroupDirty && Utils.setGroup(component, group);
-                    group = component;
+        /**
+       * Remove a transition.
+       * @param shape - The transition.
+       */ _proto.removeTransition = function removeTransition(transition) {
+            var transitions = this._transitions;
+            var lastOneIndex = transitions.length - 1;
+            for(var i = lastOneIndex; i >= 0; i--){
+                if (transitions[i] === transition) {
+                    i !== lastOneIndex && (transitions[i] = transitions[lastOneIndex]);
+                    transitions.length = lastOneIndex;
+                    transition._interactive = null;
+                    break;
                 }
             }
-            for(var i1 = 0; i1 < groupAbleCount; i1++){
-                Utils.setGroup(tempGroupAbleList[i1], group);
-            }
-            var children = entity.children;
-            for(var i2 = 0, n1 = children.length; i2 < n1; i2++){
-                var child = children[i2];
-                child.isActive && (depth = this._walk(child, renderers, depth, group));
+        };
+        /**
+       * Remove all transitions.
+       */ _proto.clearTransitions = function clearTransitions() {
+            var transitions = this._transitions;
+            for(var i = 0, n = transitions.length; i < n; i++){
+                transitions[i]._interactive = null;
             }
-            return depth;
+            transitions.length = 0;
         };
-        _proto._updateCameraObserver = function _updateCameraObserver() {
-            var camera = this._isRootCanvas && this._renderMode === CanvasRenderMode.ScreenSpaceCamera ? this._camera : null;
-            var preCamera = this._cameraObserver;
-            if (preCamera !== camera) {
-                this._cameraObserver = camera;
-                if (preCamera) {
-                    // @ts-ignore
-                    preCamera.entity._updateFlagManager.removeListener(this._onCameraTransformListener);
-                    // @ts-ignore
-                    preCamera._unRegisterModifyListener(this._onCameraModifyListener);
-                }
-                if (camera) {
-                    // @ts-ignore
-                    camera.entity._updateFlagManager.addListener(this._onCameraTransformListener);
-                    // @ts-ignore
-                    camera._registerModifyListener(this._onCameraModifyListener);
+        _proto.onUpdate = function onUpdate(deltaTime) {
+            if (this._getGlobalInteractive()) {
+                var transitions = this._transitions;
+                for(var i = 0, n = transitions.length; i < n; i++){
+                    transitions[i]._onUpdate(deltaTime);
                 }
             }
         };
-        _proto._onCameraModifyListener = function _onCameraModifyListener(flag) {
-            if (this._realRenderMode === CanvasRenderMode.ScreenSpaceCamera) {
-                switch(flag){
-                    case engine.CameraModifyFlags.ProjectionType:
-                    case engine.CameraModifyFlags.AspectRatio:
-                        this._adapterSizeInScreenSpace();
-                        break;
-                    case engine.CameraModifyFlags.FieldOfView:
-                        !this._camera.isOrthographic && this._adapterSizeInScreenSpace();
-                        break;
-                    case engine.CameraModifyFlags.OrthographicSize:
-                        this._camera.isOrthographic && this._adapterSizeInScreenSpace();
-                        break;
-                    case engine.CameraModifyFlags.DisableInScene:
-                        this._setRealRenderMode(CanvasRenderMode.ScreenSpaceOverlay);
-                        break;
-                }
-            } else {
-                flag === engine.CameraModifyFlags.EnableInScene && this._setRealRenderMode(CanvasRenderMode.ScreenSpaceCamera);
+        _proto.onPointerBeginDrag = function onPointerBeginDrag() {
+            this._isPointerDragging = true;
+            this._updateState(false);
+        };
+        _proto.onPointerEndDrag = function onPointerEndDrag() {
+            this._isPointerDragging = false;
+            this._updateState(false);
+        };
+        _proto.onPointerEnter = function onPointerEnter() {
+            this._isPointerInside = true;
+            this._updateState(false);
+        };
+        _proto.onPointerExit = function onPointerExit() {
+            this._isPointerInside = false;
+            this._updateState(false);
+        };
+        _proto.onDestroy = function onDestroy() {
+            Script.prototype.onDestroy.call(this);
+            var transitions = this._transitions;
+            for(var i = transitions.length - 1; i >= 0; i--){
+                transitions[i].destroy();
             }
         };
-        _proto._onCameraTransformListener = function _onCameraTransformListener() {
-            this._realRenderMode === CanvasRenderMode.ScreenSpaceCamera && this._adapterPoseInScreenSpace();
+        /**
+       * @internal
+       */ _proto._getRootCanvas = function _getRootCanvas() {
+            this._isRootCanvasDirty && Utils.setRootCanvas(this, Utils.searchRootCanvasInParents(this));
+            return this._rootCanvas;
         };
-        _proto._addCanvasListener = function _addCanvasListener() {
-            // @ts-ignore
-            this.engine.canvas._sizeUpdateFlagManager.addListener(this._onCanvasSizeListener);
+        /**
+       * @internal
+       */ _proto._getGroup = function _getGroup() {
+            this._isGroupDirty && Utils.setGroup(this, Utils.searchGroupInParents(this));
+            return this._group;
         };
-        _proto._removeCanvasListener = function _removeCanvasListener() {
+        // @ts-ignore
+        _proto._onEnableInScene = function _onEnableInScene() {
             // @ts-ignore
-            this.engine.canvas._sizeUpdateFlagManager.removeListener(this._onCanvasSizeListener);
+            Script.prototype._onEnableInScene.call(this);
+            Utils.setRootCanvasDirty(this);
+            Utils.setGroupDirty(this);
+            this._updateState(true);
         };
-        _proto._onCanvasSizeListener = function _onCanvasSizeListener() {
-            var canvas = this.engine.canvas;
-            this.entity.transform.setWorldPosition(canvas.width * 0.5, canvas.height * 0.5, 0);
-            this._adapterSizeInScreenSpace();
+        // @ts-ignore
+        _proto._onDisableInScene = function _onDisableInScene() {
+            // @ts-ignore
+            Script.prototype._onDisableInScene.call(this);
+            Utils.cleanRootCanvas(this);
+            Utils.cleanGroup(this);
+            this._isPointerInside = this._isPointerDragging = false;
         };
-        _proto._onReferenceResolutionChanged = function _onReferenceResolutionChanged() {
-            var realRenderMode = this._realRenderMode;
-            if (realRenderMode === CanvasRenderMode.ScreenSpaceOverlay || realRenderMode === CanvasRenderMode.ScreenSpaceCamera) {
-                this._adapterSizeInScreenSpace();
+        /**
+       * @internal
+       */ _proto._groupListener = function _groupListener(flag) {
+            if (flag === engine.EntityModifyFlags.Parent || flag === EntityUIModifyFlags.GroupEnableInScene) {
+                Utils.setGroupDirty(this);
             }
         };
-        _proto._setIsRootCanvas = function _setIsRootCanvas(isRootCanvas) {
-            var _this = this;
-            if (this._isRootCanvas !== isRootCanvas) {
-                this._isRootCanvas = isRootCanvas;
-                this._updateCameraObserver();
-                this._setRealRenderMode(this._getRealRenderMode());
-                if (isRootCanvas) {
-                    this.entity._updateUIHierarchyVersion(UICanvas._hierarchyCounter);
-                } else {
-                    var _this1 = this, disorderedElements = _this1._disorderedElements;
-                    disorderedElements.forEach(function(element) {
-                        if (_instanceof(element, UICanvas)) {
-                            var rootCanvas = Utils.searchRootCanvasInParents(element);
-                            element._setIsRootCanvas(!rootCanvas);
-                            Utils.setRootCanvas(element, rootCanvas);
-                        } else {
-                            Utils.setRootCanvasDirty(_this);
-                            Utils.setGroupDirty(element);
-                        }
-                    });
-                    disorderedElements.length = 0;
-                    disorderedElements.garbageCollection();
-                    this._orderedRenderers.length = 0;
-                }
+        /**
+       * @internal
+       */ _proto._rootCanvasListener = function _rootCanvasListener(flag) {
+            if (flag === engine.EntityModifyFlags.Parent || flag === EntityUIModifyFlags.CanvasEnableInScene) {
+                Utils.setRootCanvasDirty(this);
+                Utils.setGroupDirty(this);
             }
         };
-        _proto._getCenter = function _getCenter() {
-            if (this._centerDirtyFlag.flag) {
-                var center = this._center;
-                var uiTransform = this.entity.transform;
-                var pivot = uiTransform.pivot, size = uiTransform.size;
-                center.set((0.5 - pivot.x) * size.x, (0.5 - pivot.y) * size.y, 0);
-                engine.Vector3.transformCoordinate(center, uiTransform.worldMatrix, center);
-                this._centerDirtyFlag.flag = false;
+        /**
+       * @internal
+       */ _proto._onGroupModify = function _onGroupModify(flags) {
+            if (flags & GroupModifyFlags.GlobalInteractive) {
+                this._globalInteractiveDirty = true;
             }
-            return this._center;
         };
-        _proto._getRealRenderMode = function _getRealRenderMode() {
-            if (this._isRootCanvas) {
-                var _this__camera;
-                var mode = this._renderMode;
-                // @ts-ignore
-                if (mode === CanvasRenderMode.ScreenSpaceCamera && !((_this__camera = this._camera) == null ? void 0 : _this__camera._phasedActiveInScene)) {
-                    return CanvasRenderMode.ScreenSpaceOverlay;
-                } else {
-                    return mode;
+        /**
+       * @internal
+       */ _proto._getGlobalInteractive = function _getGlobalInteractive() {
+            if (this._globalInteractiveDirty) {
+                var group = this._getGroup();
+                var globalInteractive = this._interactive && (!group || group._getGlobalInteractive());
+                if (this._globalInteractive !== globalInteractive) {
+                    this._globalInteractive = globalInteractive;
+                    this._updateState(true);
                 }
-            } else {
-                return 4;
+                this._globalInteractiveDirty = false;
             }
+            return this._globalInteractive;
         };
-        _proto._setRealRenderMode = function _setRealRenderMode(curRealMode) {
-            var preRealMode = this._realRenderMode;
-            if (preRealMode !== curRealMode) {
-                this._realRenderMode = curRealMode;
-                // @ts-ignore
-                var componentsManager = this.scene._componentsManager;
-                switch(preRealMode){
-                    case CanvasRenderMode.ScreenSpaceOverlay:
-                        this._removeCanvasListener();
-                    case CanvasRenderMode.ScreenSpaceCamera:
-                    case CanvasRenderMode.WorldSpace:
-                        componentsManager.removeUICanvas(this, preRealMode === CanvasRenderMode.ScreenSpaceOverlay);
-                        break;
-                }
-                switch(curRealMode){
-                    case CanvasRenderMode.ScreenSpaceOverlay:
-                        this._addCanvasListener();
-                    case CanvasRenderMode.ScreenSpaceCamera:
-                        this._adapterPoseInScreenSpace();
-                        this._adapterSizeInScreenSpace();
-                    case CanvasRenderMode.WorldSpace:
-                        componentsManager.addUICanvas(this, curRealMode === CanvasRenderMode.ScreenSpaceOverlay);
-                        break;
+        _proto._updateState = function _updateState(instant) {
+            var state = this._getInteractiveState();
+            if (this._state !== state) {
+                this._state = state;
+                var transitions = this._transitions;
+                for(var i = 0, n = transitions.length; i < n; i++){
+                    transitions[i]._setState(state, instant);
                 }
             }
         };
-        _proto._isSameOrChildEntity = function _isSameOrChildEntity(cameraEntity) {
-            var canvasEntity = this.entity;
-            while(cameraEntity){
-                if (cameraEntity === canvasEntity) return true;
-                cameraEntity = cameraEntity.parent;
+        _proto._getInteractiveState = function _getInteractiveState() {
+            if (!this._getGlobalInteractive()) {
+                return 3;
+            }
+            if (this._isPointerDragging) {
+                return 1;
+            } else {
+                return this._isPointerInside ? 2 : 0;
             }
-            return false;
         };
-        _create_class(UICanvas, [
-            {
-                key: "referenceResolutionPerUnit",
-                get: /**
-       * The conversion ratio between reference resolution and unit for UI elements in this canvas.
-       */ function get() {
-                    return this._referenceResolutionPerUnit;
-                },
-                set: function set(value) {
-                    if (this._referenceResolutionPerUnit !== value) {
-                        this._referenceResolutionPerUnit = value;
-                        this._disorderedElements.forEach(function(element) {
-                            element._onRootCanvasModify == null ? void 0 : element._onRootCanvasModify.call(element, 1);
-                        });
-                    }
-                }
-            },
-            {
-                key: "referenceResolution",
-                get: /**
-       * The reference resolution of the UI canvas in `ScreenSpaceCamera` and `ScreenSpaceOverlay` mode.
-       */ function get() {
-                    return this._referenceResolution;
-                },
-                set: function set(value) {
-                    var referenceResolution = this._referenceResolution;
-                    if (referenceResolution === value) return;
-                    (referenceResolution.x !== value.x || referenceResolution.y !== value.y) && referenceResolution.copyFrom(value);
-                }
-            },
-            {
-                key: "renderMode",
-                get: /**
-       * The rendering mode of the UI canvas.
-       */ function get() {
-                    return this._renderMode;
-                },
-                set: function set(mode) {
-                    var preMode = this._renderMode;
-                    if (preMode !== mode) {
-                        this._renderMode = mode;
-                        this._updateCameraObserver();
-                        this._setRealRenderMode(this._getRealRenderMode());
-                    }
-                }
-            },
-            {
-                key: "camera",
-                get: /**
-       * The camera associated with this canvas.
-       * @remarks
-       * - `ScreenSpaceCamera` mode: Used for rendering adaptation. Defaults to `ScreenSpaceOverlay` if not assigned.
-       * - `WorldSpace` mode: Used for event detection. If not assigned, events are handled by the highest-priority camera.
-       */ function get() {
-                    return this._camera;
-                },
-                set: function set(value) {
-                    var preCamera = this._camera;
-                    if (preCamera !== value) {
-                        if (value && this._isSameOrChildEntity(value.entity)) {
-                            engine.Logger.warn("Camera entity matching or nested within the canvas entity disables canvas auto-adaptation in ScreenSpaceCamera mode.");
-                        }
-                        this._camera = value;
-                        this._updateCameraObserver();
-                        var preRenderMode = this._realRenderMode;
-                        var curRenderMode = this._getRealRenderMode();
-                        if (preRenderMode === curRenderMode) {
-                            if (curRenderMode === CanvasRenderMode.ScreenSpaceCamera) {
-                                this._adapterPoseInScreenSpace();
-                                this._adapterSizeInScreenSpace();
-                            }
-                        } else {
-                            this._setRealRenderMode(curRenderMode);
-                        }
-                    }
-                }
-            },
-            {
-                key: "renderCamera",
-                get: /**
-       * @deprecated Use {@link camera} instead.
-       */ function get() {
-                    return this.camera;
-                },
-                set: function set(value) {
-                    this.camera = value;
-                }
-            },
-            {
-                key: "resolutionAdaptationMode",
-                get: /**
-       * The screen resolution adaptation mode of the UI canvas in `ScreenSpaceCamera` and `ScreenSpaceOverlay` mode.
-       */ function get() {
-                    return this._resolutionAdaptationMode;
-                },
-                set: function set(value) {
-                    if (this._resolutionAdaptationMode !== value) {
-                        this._resolutionAdaptationMode = value;
-                        var realRenderMode = this._realRenderMode;
-                        if (realRenderMode === CanvasRenderMode.ScreenSpaceCamera || realRenderMode === CanvasRenderMode.ScreenSpaceOverlay) {
-                            this._adapterSizeInScreenSpace();
-                        }
-                    }
-                }
-            },
+        _create_class(UIInteractive, [
             {
-                key: "sortOrder",
+                key: "transitions",
                 get: /**
-       * The rendering order priority of the UI canvas in `ScreenSpaceOverlay` mode.
+       * The transitions of this interactive.
        */ function get() {
-                    return this._sortOrder;
-                },
-                set: function set(value) {
-                    if (this._sortOrder !== value) {
-                        this._sortOrder = value;
-                        this._realRenderMode === CanvasRenderMode.ScreenSpaceOverlay && // @ts-ignore
-                        (this.scene._componentsManager._overlayCanvasesSortingFlag = true);
-                    }
+                    return this._transitions;
                 }
             },
             {
-                key: "distance",
+                key: "interactive",
                 get: /**
-       * The distance between the UI canvas and the camera in `ScreenSpaceCamera` mode.
+       * Whether the interactive is enabled.
        */ function get() {
-                    return this._distance;
+                    return this._interactive;
                 },
                 set: function set(value) {
-                    if (this._distance !== value) {
-                        this._distance = value;
-                        if (this._realRenderMode === CanvasRenderMode.ScreenSpaceCamera) {
-                            this._adapterPoseInScreenSpace();
-                            this._adapterSizeInScreenSpace();
-                        }
+                    if (this._interactive !== value) {
+                        this._interactive = value;
+                        this._globalInteractiveDirty = true;
                     }
                 }
             }
         ]);
-        return UICanvas;
-    }(engine.Component);
-    /** @internal */ exports.UICanvas._hierarchyCounter = 1;
-    exports.UICanvas._tempGroupAbleList = [];
-    exports.UICanvas._tempVec3 = new engine.Vector3();
-    exports.UICanvas._tempMat = new engine.Matrix();
-    __decorate([
-        engine.ignoreClone
-    ], exports.UICanvas.prototype, "_canvasIndex", void 0);
-    __decorate([
-        engine.ignoreClone
-    ], exports.UICanvas.prototype, "_indexInRootCanvas", void 0);
-    __decorate([
-        engine.ignoreClone
-    ], exports.UICanvas.prototype, "_isRootCanvasDirty", void 0);
-    __decorate([
-        engine.ignoreClone
-    ], exports.UICanvas.prototype, "_rootCanvasListeningEntities", void 0);
-    __decorate([
-        engine.ignoreClone
-    ], exports.UICanvas.prototype, "_isRootCanvas", void 0);
-    __decorate([
-        engine.ignoreClone
-    ], exports.UICanvas.prototype, "_renderElements", void 0);
+        return UIInteractive;
+    }(engine.Script);
     __decorate([
         engine.ignoreClone
-    ], exports.UICanvas.prototype, "_batchedRenderElements", void 0);
+    ], UIInteractive.prototype, "_indexInRootCanvas", void 0);
     __decorate([
         engine.ignoreClone
-    ], exports.UICanvas.prototype, "_sortDistance", void 0);
+    ], UIInteractive.prototype, "_isRootCanvasDirty", void 0);
     __decorate([
         engine.ignoreClone
-    ], exports.UICanvas.prototype, "_orderedRenderers", void 0);
+    ], UIInteractive.prototype, "_rootCanvasListeningEntities", void 0);
     __decorate([
         engine.ignoreClone
-    ], exports.UICanvas.prototype, "_realRenderMode", void 0);
+    ], UIInteractive.prototype, "_indexInGroup", void 0);
     __decorate([
         engine.ignoreClone
-    ], exports.UICanvas.prototype, "_disorderedElements", void 0);
+    ], UIInteractive.prototype, "_isGroupDirty", void 0);
     __decorate([
         engine.ignoreClone
-    ], exports.UICanvas.prototype, "_renderMode", void 0);
-    __decorate([
-        engine.assignmentClone
-    ], exports.UICanvas.prototype, "_resolutionAdaptationMode", void 0);
-    __decorate([
-        engine.assignmentClone
-    ], exports.UICanvas.prototype, "_sortOrder", void 0);
-    __decorate([
-        engine.assignmentClone
-    ], exports.UICanvas.prototype, "_distance", void 0);
-    __decorate([
-        engine.deepClone
-    ], exports.UICanvas.prototype, "_referenceResolution", void 0);
-    __decorate([
-        engine.assignmentClone
-    ], exports.UICanvas.prototype, "_referenceResolutionPerUnit", void 0);
+    ], UIInteractive.prototype, "_groupListeningEntities", void 0);
     __decorate([
         engine.ignoreClone
-    ], exports.UICanvas.prototype, "_hierarchyVersion", void 0);
+    ], UIInteractive.prototype, "_globalInteractive", void 0);
     __decorate([
         engine.ignoreClone
-    ], exports.UICanvas.prototype, "_center", void 0);
+    ], UIInteractive.prototype, "_globalInteractiveDirty", void 0);
     __decorate([
         engine.ignoreClone
-    ], exports.UICanvas.prototype, "_centerDirtyFlag", void 0);
+    ], UIInteractive.prototype, "_state", void 0);
     __decorate([
         engine.ignoreClone
-    ], exports.UICanvas.prototype, "_rootCanvasListener", null);
+    ], UIInteractive.prototype, "_isPointerInside", void 0);
     __decorate([
         engine.ignoreClone
-    ], exports.UICanvas.prototype, "_onCameraModifyListener", null);
+    ], UIInteractive.prototype, "_isPointerDragging", void 0);
     __decorate([
         engine.ignoreClone
-    ], exports.UICanvas.prototype, "_onCameraTransformListener", null);
+    ], UIInteractive.prototype, "_groupListener", null);
     __decorate([
         engine.ignoreClone
-    ], exports.UICanvas.prototype, "_onCanvasSizeListener", null);
+    ], UIInteractive.prototype, "_rootCanvasListener", null);
     __decorate([
         engine.ignoreClone
-    ], exports.UICanvas.prototype, "_onReferenceResolutionChanged", null);
-    exports.UICanvas = __decorate([
-        engine.dependentComponents(UITransform, engine.DependentMode.AutoAdd)
-    ], exports.UICanvas);
-    /**
-     * @remarks Extends `EntityModifyFlags`.
-     */ var EntityUIModifyFlags = /*#__PURE__*/ function(EntityUIModifyFlags) {
-        EntityUIModifyFlags[EntityUIModifyFlags["CanvasEnableInScene"] = 4] = "CanvasEnableInScene";
-        EntityUIModifyFlags[EntityUIModifyFlags["GroupEnableInScene"] = 8] = "GroupEnableInScene";
-        return EntityUIModifyFlags;
-    }({});
-    var RootCanvasModifyFlags = /*#__PURE__*/ function(RootCanvasModifyFlags) {
-        RootCanvasModifyFlags[RootCanvasModifyFlags["None"] = 0] = "None";
-        RootCanvasModifyFlags[RootCanvasModifyFlags["ReferenceResolutionPerUnit"] = 1] = "ReferenceResolutionPerUnit";
-        RootCanvasModifyFlags[RootCanvasModifyFlags["All"] = 1] = "All";
-        return RootCanvasModifyFlags;
+    ], UIInteractive.prototype, "_onGroupModify", null);
+    var InteractiveState = /*#__PURE__*/ function(InteractiveState) {
+        InteractiveState[InteractiveState["Normal"] = 0] = "Normal";
+        InteractiveState[InteractiveState["Pressed"] = 1] = "Pressed";
+        InteractiveState[InteractiveState["Hover"] = 2] = "Hover";
+        InteractiveState[InteractiveState["Disable"] = 3] = "Disable";
+        return InteractiveState;
     }({});
 
     var Button = /*#__PURE__*/ function(UIInteractive) {
@@ -2198,9 +2522,6 @@
         };
         return Button;
     }(UIInteractive);
-    __decorate([
-        engine.deepClone
-    ], Button.prototype, "onClick", void 0);
 
     /**
      * UI element that renders an image.
@@ -2208,7 +2529,7 @@
         _inherits(Image, UIRenderer1);
         function Image(entity) {
             var _this;
-            _this = UIRenderer1.call(this, entity) || this, _this._sprite = null, _this._tileMode = engine.SpriteTileMode.Continuous, _this._tiledAdaptiveThreshold = 0.5;
+            _this = UIRenderer1.call(this, entity) || this, _this._sprite = null, _this._tileMode = engine.SpriteTileMode.Continuous, _this._tiledAdaptiveThreshold = 0.5, _this._filledMode = engine.SpriteFilledMode.Radial360, _this._filledAmount = 1, _this._filledOrigin = engine.SpriteFilledOrigin.Bottom, _this._filledClockWise = true;
             _this.drawMode = engine.SpriteDrawMode.Simple;
             // @ts-ignore
             _this.setMaterial(_this._engine._getUIDefaultMaterial());
@@ -2297,7 +2618,7 @@
             canvas._renderElements.push(renderElement);
         };
         _proto._onTransformChanged = function _onTransformChanged(type) {
-            if (type & UITransformModifyFlags.Size && this._drawMode === engine.SpriteDrawMode.Tiled) {
+            if (type & UITransformModifyFlags.Size && (this._drawMode === engine.SpriteDrawMode.Tiled || this._drawMode === engine.SpriteDrawMode.Filled)) {
                 this._dirtyUpdateFlag |= 15;
             }
             this._dirtyUpdateFlag |= engine.RendererUpdateFlags.WorldVolume;
@@ -2325,6 +2646,9 @@
                         case engine.SpriteDrawMode.Tiled:
                             this._dirtyUpdateFlag |= 7;
                             break;
+                        case engine.SpriteDrawMode.Filled:
+                            this._dirtyUpdateFlag |= 7;
+                            break;
                     }
                     break;
                 case engine.SpriteModifyFlags.border:
@@ -2342,13 +2666,25 @@
                     this._dirtyUpdateFlag |= 5;
                     break;
                 case engine.SpriteModifyFlags.atlasRegion:
-                    this._dirtyUpdateFlag |= 4;
+                    this._dirtyUpdateFlag |= this._drawMode === engine.SpriteDrawMode.Filled ? 5 : 4;
                     break;
                 case engine.SpriteModifyFlags.destroy:
                     this.sprite = null;
                     break;
             }
         };
+        Image._correctOrigin = function _correctOrigin(mode, origin) {
+            switch(mode){
+                case engine.SpriteFilledMode.Horizontal:
+                    return origin === engine.SpriteFilledOrigin.Left || origin === engine.SpriteFilledOrigin.Right ? origin : engine.SpriteFilledOrigin.Left;
+                case engine.SpriteFilledMode.Vertical:
+                    return origin === engine.SpriteFilledOrigin.Top || origin === engine.SpriteFilledOrigin.Bottom ? origin : engine.SpriteFilledOrigin.Bottom;
+                case engine.SpriteFilledMode.Radial90:
+                    return origin === engine.SpriteFilledOrigin.TopLeft || origin === engine.SpriteFilledOrigin.TopRight || origin === engine.SpriteFilledOrigin.BottomLeft || origin === engine.SpriteFilledOrigin.BottomRight ? origin : engine.SpriteFilledOrigin.BottomLeft;
+                default:
+                    return origin === engine.SpriteFilledOrigin.Top || origin === engine.SpriteFilledOrigin.Bottom || origin === engine.SpriteFilledOrigin.Left || origin === engine.SpriteFilledOrigin.Right ? origin : engine.SpriteFilledOrigin.Bottom;
+            }
+        };
         _create_class(Image, [
             {
                 key: "drawMode",
@@ -2370,6 +2706,9 @@
                             case engine.SpriteDrawMode.Tiled:
                                 this._assembler = engine.TiledSpriteAssembler;
                                 break;
+                            case engine.SpriteDrawMode.Filled:
+                                this._assembler = engine.FilledSpriteAssembler;
+                                break;
                         }
                         this._assembler.resetData(this);
                         this._dirtyUpdateFlag |= 7;
@@ -2409,6 +2748,73 @@
                     }
                 }
             },
+            {
+                key: "filledAmount",
+                get: /**
+       * The fill amount of the image, range from 0 to 1. (Only works in filled mode.)
+       */ function get() {
+                    return this._filledAmount;
+                },
+                set: function set(value) {
+                    value = engine.MathUtil.clamp(value, 0, 1);
+                    if (this._filledAmount !== value) {
+                        this._filledAmount = value;
+                        if (this._drawMode === engine.SpriteDrawMode.Filled) {
+                            this._dirtyUpdateFlag |= 5;
+                        }
+                    }
+                }
+            },
+            {
+                key: "filledMode",
+                get: /**
+       * The fill mode of the image. (Only works in filled mode.)
+       */ function get() {
+                    return this._filledMode;
+                },
+                set: function set(value) {
+                    if (this._filledMode !== value) {
+                        this._filledMode = value;
+                        this._filledOrigin = Image._correctOrigin(value, this._filledOrigin);
+                        if (this._drawMode === engine.SpriteDrawMode.Filled) {
+                            this._dirtyUpdateFlag |= 5;
+                        }
+                    }
+                }
+            },
+            {
+                key: "filledOrigin",
+                get: /**
+       * The fill origin of the image. (Only works in filled mode.)
+       */ function get() {
+                    return this._filledOrigin;
+                },
+                set: function set(value) {
+                    value = Image._correctOrigin(this._filledMode, value);
+                    if (this._filledOrigin !== value) {
+                        this._filledOrigin = value;
+                        if (this._drawMode === engine.SpriteDrawMode.Filled) {
+                            this._dirtyUpdateFlag |= 5;
+                        }
+                    }
+                }
+            },
+            {
+                key: "filledClockWise",
+                get: /**
+       * Whether the fill is clockwise. (Only works in filled radial mode.)
+       */ function get() {
+                    return this._filledClockWise;
+                },
+                set: function set(value) {
+                    if (this._filledClockWise !== value) {
+                        this._filledClockWise = value;
+                        if (this._drawMode === engine.SpriteDrawMode.Filled) {
+                            this._dirtyUpdateFlag |= 5;
+                        }
+                    }
+                }
+            },
             {
                 key: "sprite",
                 get: /**
@@ -2449,12 +2855,6 @@
     __decorate([
         engine.ignoreClone
     ], Image.prototype, "_assembler", void 0);
-    __decorate([
-        engine.assignmentClone
-    ], Image.prototype, "_tileMode", void 0);
-    __decorate([
-        engine.assignmentClone
-    ], Image.prototype, "_tiledAdaptiveThreshold", void 0);
     __decorate([
         engine.ignoreClone
     ], Image.prototype, "_onTransformChanged", null);
@@ -2462,19 +2862,87 @@
         engine.ignoreClone
     ], Image.prototype, "_onSpriteChange", null);
 
+    /**
+     * UI component that uses a sprite to mask child UI renderers via stencil.
+     */ var Mask = /*#__PURE__*/ function(_MaskRenderable) {
+        _inherits(Mask, _MaskRenderable);
+        function Mask(entity) {
+            var _this;
+            _this = _MaskRenderable.call(this, entity) || this;
+            _this._initMask();
+            _this.raycastEnabled = false;
+            return _this;
+        }
+        var _proto = Mask.prototype;
+        /**
+       * @internal
+       */ _proto._getChunkManager = function _getChunkManager() {
+            // @ts-ignore
+            return this.engine._batcherManager.primitiveChunkManagerMask;
+        };
+        /**
+       * @internal
+       */ // @ts-ignore
+        _proto._cloneTo = function _cloneTo(target) {
+            // @ts-ignore
+            _MaskRenderable.prototype._cloneTo.call(this, target);
+            this._cloneMaskData(target);
+        };
+        _proto._updateBounds = function _updateBounds(worldBounds) {
+            var rootCanvas = this._getRootCanvas();
+            if (this.sprite && rootCanvas) {
+                this._updateMaskBounds(worldBounds);
+            } else {
+                var worldPosition = this._transformEntity.transform.worldPosition;
+                worldBounds.min.copyFrom(worldPosition);
+                worldBounds.max.copyFrom(worldPosition);
+            }
+        };
+        /**
+       * @inheritdoc
+       */ _proto._render = function _render(context) {
+            this._renderMask(0);
+        };
+        /**
+       * @inheritdoc
+       */ _proto._onDestroy = function _onDestroy() {
+            this._destroyMaskResources();
+            _MaskRenderable.prototype._onDestroy.call(this);
+            if (this._subChunk) {
+                this._getChunkManager().freeSubChunk(this._subChunk);
+                this._subChunk = null;
+            }
+        };
+        _proto._getSpriteWidth = function _getSpriteWidth() {
+            return this._transformEntity.transform.size.x;
+        };
+        _proto._getSpriteHeight = function _getSpriteHeight() {
+            return this._transformEntity.transform.size.y;
+        };
+        _proto._getSpritePivot = function _getSpritePivot() {
+            return this._transformEntity.transform.pivot;
+        };
+        return Mask;
+    }(engine.MaskRenderable(exports.UIRenderer));
+
     /**
      * UI component used to render text.
      */ var Text = /*#__PURE__*/ function(UIRenderer1) {
         _inherits(Text, UIRenderer1);
         function Text(entity) {
             var _this;
-            _this = UIRenderer1.call(this, entity) || this, _this._textChunks = Array(), _this._subFont = null, _this._text = "", _this._localBounds = new engine.BoundingBox(), _this._font = null, _this._fontSize = 24, _this._fontStyle = engine.FontStyle.None, _this._lineSpacing = 0, _this._characterSpacing = 0, _this._horizontalAlignment = engine.TextHorizontalAlignment.Center, _this._verticalAlignment = engine.TextVerticalAlignment.Center, _this._enableWrapping = false, _this._overflowMode = engine.OverflowMode.Overflow;
+            _this = UIRenderer1.call(this, entity) || this, _this._textChunks = Array(), _this._subFont = null, _this._text = "", _this._localBounds = new engine.BoundingBox(), _this._font = null, _this._fontSize = 24, _this._fontStyle = engine.FontStyle.None, _this._lineSpacing = 0, _this._characterSpacing = 0, _this._horizontalAlignment = engine.TextHorizontalAlignment.Center, _this._verticalAlignment = engine.TextVerticalAlignment.Center, _this._enableWrapping = false, _this._overflowMode = engine.OverflowMode.Overflow, _this._outlineColor = new engine.Color(0, 0, 0, 1), _this._outlineWidth = 0;
             var engine$1 = _this.engine;
             // @ts-ignore
             _this.font = engine$1._textDefaultFont;
             _this.raycastEnabled = false;
             // @ts-ignore
             _this.setMaterial(engine$1._basicResources.textDefaultMaterial);
+            var shaderData = _this.shaderData;
+            shaderData.setFloat(Text._outlineWidthProperty, _this._outlineWidth);
+            shaderData.setColor(Text._outlineColorProperty, _this._outlineColor);
+            // @ts-ignore
+            _this._outlineColor._onValueChanged = _this._onOutlineColorChanged.bind(_this);
             return _this;
         }
         var _proto = Text.prototype;
@@ -2490,13 +2958,6 @@
             this._textChunks = null;
             this._subFont && (this._subFont = null);
         };
-        // @ts-ignore
-        _proto._cloneTo = function _cloneTo(target) {
-            // @ts-ignore
-            UIRenderer1.prototype._cloneTo.call(this, target);
-            target.font = this._font;
-            target._subFont = this._subFont;
-        };
         /**
        * @internal
        */ _proto._isContainDirtyFlag = function _isContainDirtyFlag(type) {
@@ -2527,13 +2988,13 @@
                 this._setDirtyFlagTrue(25);
             }
         };
+        /**
+       * @internal
+       */ _proto._canBatch = function _canBatch(preElement, curElement) {
+            return engine.VertexMergeBatcher.canBatchText(preElement, curElement);
+        };
         _proto._updateBounds = function _updateBounds(worldBounds) {
-            var transform = this._transformEntity.transform;
-            var _transform_size = transform.size, width = _transform_size.x, height = _transform_size.y;
-            var _transform_pivot = transform.pivot, pivotX = _transform_pivot.x, pivotY = _transform_pivot.y;
-            worldBounds.min.set(-width * pivotX, -height * pivotY, 0);
-            worldBounds.max.set(width * (1 - pivotX), height * (1 - pivotY), 0);
-            engine.BoundingBox.transform(worldBounds, this._transformEntity.transform.worldMatrix, worldBounds);
+            engine.BoundingBox.transform(this._localBounds, this._transformEntity.transform.worldMatrix, worldBounds);
         };
         _proto._render = function _render(context) {
             if (this._isTextNoVisible()) {
@@ -2564,6 +3025,7 @@
             var distanceForSort = canvas._sortDistance;
             var textChunks = this._textChunks;
             var subShader = material.shader.subShaders[0];
+            var textTextureSize = Text._tempVec20;
             for(var i = 0, n = textChunks.length; i < n; ++i){
                 var // @ts-ignore
                 _renderElement;
@@ -2572,6 +3034,7 @@
                 renderElement.set(this, material, subChunk.chunk.primitive, subChunk.subMesh, texture, subChunk);
                 (_renderElement = renderElement).shaderData || (_renderElement.shaderData = new engine.ShaderData(engine.ShaderDataGroup.RenderElement));
                 renderElement.shaderData.setTexture(Text._textTextureProperty, texture);
+                renderElement.shaderData.setVector2(Text._textTextureSizeProperty, textTextureSize.set(texture.width, texture.height));
                 renderElement.subShader = subShader;
                 renderElement.priority = priority;
                 renderElement.distanceForSort = distanceForSort;
@@ -2584,6 +3047,15 @@
             this._subFont = font._getSubFont(this.fontSize, this.fontStyle);
             this._subFont.nativeFontString = engine.TextUtils.getNativeFontString(font.name, this.fontSize, this.fontStyle);
         };
+        /**
+       * Switch the sub font to a specific font size, used by the SHRINK overflow measurement.
+       */ _proto._applyFontSizeForShrink = function _applyFontSizeForShrink(fontSize) {
+            var font = this._font;
+            // @ts-ignore
+            var subFont = font._getSubFont(fontSize, this._fontStyle);
+            subFont.nativeFontString = engine.TextUtils.getNativeFontString(font.name, fontSize, this._fontStyle);
+            this._subFont = subFont;
+        };
         _proto._updatePosition = function _updatePosition() {
             var e = this._transformEntity.transform.worldMatrix.elements;
             // prettier-ignore
@@ -2636,18 +3108,30 @@
             }
         };
         _proto._updateLocalData = function _updateLocalData() {
+            var _this = this;
             // @ts-ignore
             var pixelsPerResolution = engine.Engine._pixelsPerUnit / this._getRootCanvas().referenceResolutionPerUnit;
             var _this__localBounds = this._localBounds, min = _this__localBounds.min, max = _this__localBounds.max;
             var charRenderInfos = Text._charRenderInfos;
-            var charFont = this._getSubFont();
             var _this__transformEntity_transform = this._transformEntity.transform, size = _this__transformEntity_transform.size, pivot = _this__transformEntity_transform.pivot;
             var rendererWidth = size.x;
             var rendererHeight = size.y;
             var offsetWidth = rendererWidth * (0.5 - pivot.x);
             var offsetHeight = rendererHeight * (0.5 - pivot.y);
-            var characterSpacing = this._characterSpacing * this._fontSize;
-            var textMetrics = this.enableWrapping ? engine.TextUtils.measureTextWithWrap(this, rendererWidth * pixelsPerResolution, rendererHeight * pixelsPerResolution, this._lineSpacing * this._fontSize, characterSpacing) : engine.TextUtils.measureTextWithoutWrap(this, rendererHeight * pixelsPerResolution, this._lineSpacing * this._fontSize, characterSpacing);
+            var fontSize = this._fontSize;
+            var textMetrics;
+            if (this._overflowMode === engine.OverflowMode.Shrink) {
+                var result = engine.TextUtils.measureTextWithShrink(this, rendererWidth * pixelsPerResolution, rendererHeight * pixelsPerResolution, this._fontSize, this._lineSpacing, this._characterSpacing, this.enableWrapping, function(sizeValue) {
+                    return _this._applyFontSizeForShrink(sizeValue);
+                });
+                fontSize = result.fontSize;
+                textMetrics = result.metrics;
+            } else {
+                var characterSpacing = this._characterSpacing * fontSize;
+                textMetrics = this.enableWrapping ? engine.TextUtils.measureTextWithWrap(this, rendererWidth * pixelsPerResolution, rendererHeight * pixelsPerResolution, this._lineSpacing * fontSize, characterSpacing) : engine.TextUtils.measureTextWithoutWrap(this, rendererHeight * pixelsPerResolution, this._lineSpacing * fontSize, characterSpacing);
+            }
+            var charFont = this._getSubFont();
+            var characterSpacing1 = this._characterSpacing * fontSize;
             var height = textMetrics.height, lines = textMetrics.lines, lineWidths = textMetrics.lineWidths, lineHeight = textMetrics.lineHeight, lineMaxSizes = textMetrics.lineMaxSizes;
             // @ts-ignore
             var charRenderInfoPool = this.engine._charRenderInfoPool;
@@ -2668,7 +3152,10 @@
                         startY = rendererHeight * 0.5 - halfLineHeight + topDiff;
                         break;
                     case engine.TextVerticalAlignment.Center:
-                        startY = height * 0.5 - halfLineHeight - (bottomDiff - topDiff) * 0.5;
+                        // Center the text block (lineHeight * lineCount) within the renderer, independent of
+                        // `height` — which equals the renderer height for Truncate/Shrink and would otherwise
+                        // push the text upward by (rendererHeight - blockHeight) / 2 when the box is taller.
+                        startY = lineHeight * linesLen * 0.5 - halfLineHeight - (bottomDiff - topDiff) * 0.5;
                         break;
                     case engine.TextVerticalAlignment.Bottom:
                         startY = height - rendererHeight * 0.5 - halfLineHeight - bottomDiff;
@@ -2709,17 +3196,18 @@
                                 charRenderInfo.texture = charFont._getTextureByIndex(charInfo.index);
                                 charRenderInfo.uvs = charInfo.uvs;
                                 var w = charInfo.w, ascent = charInfo.ascent, descent = charInfo.descent;
-                                var left = (startX + offsetWidth) * pixelsPerUnitReciprocal;
-                                var right = (startX + w + offsetWidth) * pixelsPerUnitReciprocal;
-                                var top = (startY + ascent + offsetHeight) * pixelsPerUnitReciprocal;
-                                var bottom = (startY - descent + offsetHeight) * pixelsPerUnitReciprocal;
+                                var ow = this._outlineWidth * pixelsPerUnitReciprocal;
+                                var left = (startX + offsetWidth) * pixelsPerUnitReciprocal - ow;
+                                var right = (startX + w + offsetWidth) * pixelsPerUnitReciprocal + ow;
+                                var top = (startY + ascent + offsetHeight) * pixelsPerUnitReciprocal + ow;
+                                var bottom = (startY - descent + offsetHeight) * pixelsPerUnitReciprocal - ow;
                                 localPositions.set(left, top, right, bottom);
                                 i === firstLine && (maxY = Math.max(maxY, top));
                                 minY = Math.min(minY, bottom);
                                 j === firstRow && (minX = Math.min(minX, left));
                                 maxX = Math.max(maxX, right);
                             }
-                            startX += charInfo.xAdvance + characterSpacing;
+                            startX += charInfo.xAdvance + characterSpacing1;
                         }
                     }
                     startY -= lineHeight;
@@ -2779,7 +3267,7 @@
         };
         _proto._isTextNoVisible = function _isTextNoVisible() {
             var size = this._transformEntity.transform.size;
-            return !this._font || this._text === "" || this._fontSize === 0 || this.enableWrapping && size.x <= 0 || this.overflowMode === engine.OverflowMode.Truncate && size.y <= 0 || !this._getRootCanvas();
+            return !this._font || this._text === "" || this._fontSize === 0 || this.enableWrapping && size.x <= 0 || (this.overflowMode === engine.OverflowMode.Truncate || this.overflowMode === engine.OverflowMode.Shrink) && size.y <= 0 || !this._getRootCanvas();
         };
         _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;
@@ -2790,6 +3278,10 @@
             var vertices = subChunk.chunk.vertices;
             var indices = subChunk.indices = [];
             var charRenderInfos = textChunk.charRenderInfos;
+            var ow = this._outlineWidth;
+            var texture = textChunk.texture;
+            var owU = ow > 0 ? ow / texture.width : 0;
+            var owV = ow > 0 ? ow / texture.height : 0;
             for(var i = 0, ii = 0, io = 0, vo = subChunk.vertexArea.start + 3; i < count; ++i, io += 4){
                 var charRenderInfo = charRenderInfos[i];
                 charRenderInfo.indexInChunk = i;
@@ -2797,10 +3289,13 @@
                 for(var j = 0; j < tempIndicesLength; ++j){
                     indices[ii++] = tempIndices[j] + io;
                 }
-                // Set uv and color for vertices
+                // Set uv and color for vertices, expand uv outward by outline width
                 for(var j1 = 0; j1 < 4; ++j1, vo += 9){
                     var uv = charRenderInfo.uvs[j1];
-                    uv.copyToArray(vertices, vo);
+                    var su = j1 === 1 || j1 === 2 ? 1 : -1;
+                    var sv = j1 >= 2 ? 1 : -1;
+                    vertices[vo] = uv.x + owU * su;
+                    vertices[vo + 1] = uv.y + owV * sv;
                     vertices[vo + 2] = r;
                     vertices[vo + 3] = g;
                     vertices[vo + 4] = b;
@@ -2827,6 +3322,9 @@
             }
             textChunks.length = 0;
         };
+        _proto._onOutlineColorChanged = function _onOutlineColorChanged() {
+            this.shaderData.setColor(Text._outlineColorProperty, this._outlineColor);
+        };
         _create_class(Text, [
             {
                 key: "text",
@@ -2973,14 +3471,32 @@
                 }
             },
             {
-                key: "maskLayer",
+                key: "outlineWidth",
                 get: /**
-       * The mask layer the sprite renderer belongs to.
+       * The outline width in pixels. 0 means outline is disabled. Clamped to [0, 8].
        */ function get() {
-                    return this._maskLayer;
+                    return this._outlineWidth;
                 },
                 set: function set(value) {
-                    this._maskLayer = value;
+                    value = Math.max(0, Math.min(value, 3));
+                    if (this._outlineWidth !== value) {
+                        this._outlineWidth = value;
+                        this.shaderData.setFloat(Text._outlineWidthProperty, value);
+                        this._setDirtyFlagTrue(25);
+                    }
+                }
+            },
+            {
+                key: "outlineColor",
+                get: /**
+       * The outline color. Only effective when outlineWidth > 0.
+       */ function get() {
+                    return this._outlineColor;
+                },
+                set: function set(value) {
+                    if (this._outlineColor !== value) {
+                        this._outlineColor.copyFrom(value);
+                    }
                 }
             },
             {
@@ -2991,8 +3507,14 @@
                     if (this._isTextNoVisible()) {
                         if (this._isContainDirtyFlag(engine.RendererUpdateFlags.WorldVolume)) {
                             var localBounds = this._localBounds;
-                            localBounds.min.set(0, 0, 0);
-                            localBounds.max.set(0, 0, 0);
+                            if (this._getRootCanvas()) {
+                                localBounds.min.set(0, 0, 0);
+                                localBounds.max.set(0, 0, 0);
+                            } else {
+                                var _this_entity_transform = this.entity.transform, size = _this_entity_transform.size, pivot = _this_entity_transform.pivot;
+                                localBounds.min.set(-size.x * pivot.x, -size.y * pivot.y, 0);
+                                localBounds.max.set(size.x * (1 - pivot.x), size.y * (1 - pivot.y), 0);
+                            }
                             this._updateBounds(this._bounds);
                             this._setDirtyFlagFalse(engine.RendererUpdateFlags.WorldVolume);
                         }
@@ -3010,6 +3532,9 @@
         return Text;
     }(exports.UIRenderer);
     Text._textTextureProperty = engine.ShaderProperty.getByName("renderElement_TextTexture");
+    Text._textTextureSizeProperty = engine.ShaderProperty.getByName("renderElement_TextTextureSize");
+    Text._outlineColorProperty = engine.ShaderProperty.getByName("renderer_OutlineColor");
+    Text._outlineWidthProperty = engine.ShaderProperty.getByName("renderer_OutlineWidth");
     Text._worldPositions = [
         new engine.Vector3(),
         new engine.Vector3(),
@@ -3023,62 +3548,44 @@
     __decorate([
         engine.ignoreClone
     ], Text.prototype, "_subFont", void 0);
-    __decorate([
-        engine.assignmentClone
-    ], Text.prototype, "_text", void 0);
     __decorate([
         engine.ignoreClone
     ], Text.prototype, "_localBounds", void 0);
-    __decorate([
-        engine.assignmentClone
-    ], Text.prototype, "_font", void 0);
-    __decorate([
-        engine.assignmentClone
-    ], Text.prototype, "_fontSize", void 0);
-    __decorate([
-        engine.assignmentClone
-    ], Text.prototype, "_fontStyle", void 0);
-    __decorate([
-        engine.assignmentClone
-    ], Text.prototype, "_lineSpacing", void 0);
-    __decorate([
-        engine.assignmentClone
-    ], Text.prototype, "_characterSpacing", void 0);
-    __decorate([
-        engine.assignmentClone
-    ], Text.prototype, "_horizontalAlignment", void 0);
-    __decorate([
-        engine.assignmentClone
-    ], Text.prototype, "_verticalAlignment", void 0);
-    __decorate([
-        engine.assignmentClone
-    ], Text.prototype, "_enableWrapping", void 0);
-    __decorate([
-        engine.assignmentClone
-    ], Text.prototype, "_overflowMode", void 0);
     __decorate([
         engine.ignoreClone
     ], Text.prototype, "_onTransformChanged", null);
+    __decorate([
+        engine.ignoreClone
+    ], Text.prototype, "_onOutlineColorChanged", null);
     var TextChunk = function TextChunk() {
         this.charRenderInfos = new Array();
     };
 
     /**
      * The transition behavior of UIInteractive.
-     */ var Transition = /*#__PURE__*/ function() {
+     */ var Transition = /*#__PURE__*/ function(DataObject) {
+        _inherits(Transition, DataObject);
         function Transition() {
-            this._duration = 0;
-            this._countDown = 0;
-            this._finalState = InteractiveState.Normal;
+            var _this;
+            _this = DataObject.apply(this, arguments) || this, _this._duration = 0, _this._countDown = 0, _this._finalState = InteractiveState.Normal;
+            return _this;
         }
         var _proto = Transition.prototype;
         _proto.destroy = function destroy() {
             var _this__interactive;
             (_this__interactive = this._interactive) == null ? void 0 : _this__interactive.removeTransition(this);
+            this._addStateValuesReferCount(-1);
+            this._normal = this._pressed = this._hover = this._disabled = null;
+            this._initialValue = this._currentValue = this._finalValue = null;
             this._target = null;
         };
         /**
        * @internal
+       */ _proto._cloneTo = function _cloneTo(target) {
+            target._addStateValuesReferCount(1);
+        };
+        /**
+       * @internal
        */ _proto._setState = function _setState(state, instant) {
             this._finalState = state;
             var value = this._getValueByState(state);
@@ -3116,6 +3623,17 @@
             this._updateCurrentValue(this._initialValue, this._finalValue, weight);
             ((_this__target = this._target) == null ? void 0 : _this__target.enabled) && this._applyValue(this._currentValue);
         };
+        _proto._addStateValuesReferCount = function _addStateValuesReferCount(count) {
+            var _this = this, _normal = _this._normal, _pressed = _this._pressed, _hover = _this._hover, _disabled = _this._disabled;
+            // @ts-ignore
+            _instanceof(_normal, engine.ReferResource) && _normal._addReferCount(count);
+            // @ts-ignore
+            _instanceof(_pressed, engine.ReferResource) && _pressed._addReferCount(count);
+            // @ts-ignore
+            _instanceof(_hover, engine.ReferResource) && _hover._addReferCount(count);
+            // @ts-ignore
+            _instanceof(_disabled, engine.ReferResource) && _disabled._addReferCount(count);
+        };
         _proto._getValueByState = function _getValueByState(state) {
             switch(state){
                 case InteractiveState.Normal:
@@ -3224,7 +3742,22 @@
             }
         ]);
         return Transition;
-    }();
+    }(engine.DataObject);
+    __decorate([
+        engine.ignoreClone
+    ], Transition.prototype, "_countDown", void 0);
+    __decorate([
+        engine.ignoreClone
+    ], Transition.prototype, "_initialValue", void 0);
+    __decorate([
+        engine.ignoreClone
+    ], Transition.prototype, "_finalValue", void 0);
+    __decorate([
+        engine.ignoreClone
+    ], Transition.prototype, "_currentValue", void 0);
+    __decorate([
+        engine.ignoreClone
+    ], Transition.prototype, "_finalState", void 0);
 
     /**
      * Color transition.
@@ -3333,33 +3866,6 @@
             return Transition.apply(this, arguments) || this;
         }
         var _proto = SpriteTransition.prototype;
-        /**
-       * @internal
-       */ _proto.destroy = function destroy() {
-            Transition.prototype.destroy.call(this);
-            if (this._normal) {
-                // @ts-ignore
-                this._normal._addReferCount(-1);
-                this._normal = null;
-            }
-            if (this._hover) {
-                // @ts-ignore
-                this._hover._addReferCount(-1);
-                this._hover = null;
-            }
-            if (this._pressed) {
-                // @ts-ignore
-                this._pressed._addReferCount(-1);
-                this._pressed = null;
-            }
-            if (this._disabled) {
-                // @ts-ignore
-                this._disabled._addReferCount(-1);
-                this._disabled = null;
-            }
-            this._initialValue = this._currentValue = this._finalValue = null;
-            this._target = null;
-        };
         _proto._getTargetValueCopy = function _getTargetValueCopy() {
             var _this__target;
             return (_this__target = this._target) == null ? void 0 : _this__target.sprite;
@@ -3375,17 +3881,19 @@
 
     var GUIComponent = /*#__PURE__*/Object.freeze({
         __proto__: null,
-        get UICanvas () { return exports.UICanvas; },
-        UIGroup: UIGroup,
-        get UIRenderer () { return exports.UIRenderer; },
-        UITransform: UITransform,
         Button: Button,
         Image: Image,
+        Mask: Mask,
+        get RectMask2D () { return exports.RectMask2D; },
         Text: Text,
         ColorTransition: ColorTransition,
         ScaleTransition: ScaleTransition,
         SpriteTransition: SpriteTransition,
-        Transition: Transition
+        Transition: Transition,
+        get UICanvas () { return exports.UICanvas; },
+        UIGroup: UIGroup,
+        get UIRenderer () { return exports.UIRenderer; },
+        UITransform: UITransform
     });
 
     /**
@@ -3464,11 +3972,11 @@
                         }
                     }
                     if (camera.clearFlags & engine.CameraClearFlags.Color) {
-                        this._updateRaycast(null);
+                        this._updateRaycast(null, pointer);
                         return;
                     }
                 }
-                this._updateRaycast(null);
+                this._updateRaycast(null, pointer);
             }
         };
         _proto.processDrag = function processDrag(pointer) {
@@ -3498,10 +4006,7 @@
                 if (pressedPath.length > 0) {
                     var common = UIPointerEventEmitter._tempArray0;
                     if (this._findCommonInPath(enteredPath, pressedPath, common)) {
-                        var eventData = this._createEventData(pointer);
-                        for(var i = 0, n = common.length; i < n; i++){
-                            this._fireClick(common[i], eventData);
-                        }
+                        this._bubble(common, pointer, this._fireClick);
                         common.length = 0;
                     }
                 }
@@ -3533,18 +4038,16 @@
             this._enteredPath.length = this._pressedPath.length = this._draggedPath.length = 0;
         };
         _proto._updateRaycast = function _updateRaycast(element, pointer) {
-            if (pointer === void 0) pointer = null;
             var enteredPath = this._enteredPath;
             var curPath = this._composedPath(element, UIPointerEventEmitter._path);
             var add = UIPointerEventEmitter._tempArray0;
             var del = UIPointerEventEmitter._tempArray1;
             if (this._findDiffInPath(enteredPath, curPath, add, del)) {
-                var eventData = this._createEventData(pointer);
                 for(var i = 0, n = add.length; i < n; i++){
-                    this._fireEnter(add[i], eventData);
+                    this._fireEnter(add[i], this._createEventData(pointer, add[i]));
                 }
                 for(var i1 = 0, n1 = del.length; i1 < n1; i1++){
-                    this._fireExit(del[i1], eventData);
+                    this._fireExit(del[i1], this._createEventData(pointer, del[i1]));
                 }
                 var length = enteredPath.length = curPath.length;
                 for(var i2 = 0; i2 < length; i2++){
@@ -3614,8 +4117,9 @@
         _proto._bubble = function _bubble(path, pointer, fireEvent) {
             var length = path.length;
             if (length <= 0) return;
-            var eventData = this._createEventData(pointer);
+            var eventData = this._createEventData(pointer, path[0]);
             for(var i = 0; i < length; i++){
+                eventData.currentTarget = path[i];
                 fireEvent(path[i], eventData);
             }
         };
@@ -3692,6 +4196,7 @@
     exports.EntityExtension = EntityExtension;
     exports.HorizontalAlignmentMode = HorizontalAlignmentMode;
     exports.Image = Image;
+    exports.Mask = Mask;
     exports.ResolutionAdaptationMode = ResolutionAdaptationMode;
     exports.ScaleTransition = ScaleTransition;
     exports.SpriteTransition = SpriteTransition;