@galacean/engine-ui 1.4.0-beta.0

package/dist/browser.js

@@ -0,0 +1,3097 @@
+(function (global, factory) {
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@galacean/engine')) :
+    typeof define === 'function' && define.amd ? define(['exports', '@galacean/engine'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.Galacean = global.Galacean || {}, global.Galacean.UI = {}), global.Galacean));
+})(this, (function (exports, engine) { 'use strict';
+
+    function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
+        try {
+            var info = gen[key](arg);
+            var value = info.value;
+        } catch (error) {
+            reject(error);
+            return;
+        }
+        if (info.done) resolve(value);
+        else Promise.resolve(value).then(_next, _throw);
+    }
+    function _async_to_generator(fn) {
+        return function() {
+            var self = this, args = arguments;
+
+            return new Promise(function(resolve, reject) {
+                var gen = fn.apply(self, args);
+
+                function _next(value) {
+                    asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value);
+                }
+
+                function _throw(err) {
+                    asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err);
+                }
+
+                _next(undefined);
+            });
+        };
+    }
+
+    /******************************************************************************
+    Copyright (c) Microsoft Corporation.
+
+    Permission to use, copy, modify, and/or distribute this software for any
+    purpose with or without fee is hereby granted.
+
+    THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+    REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+    AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+    INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+    LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+    OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+    PERFORMANCE OF THIS SOFTWARE.
+    ***************************************************************************** */
+
+    function __decorate(decorators, target, key, desc) {
+      var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+      if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+      else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+      return c > 3 && r && Object.defineProperty(target, key, r), r;
+    }
+
+    function __generator(thisArg, body) {
+      var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
+      return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+      function verb(n) { return function (v) { return step([n, v]); }; }
+      function step(op) {
+          if (f) throw new TypeError("Generator is already executing.");
+          while (g && (g = 0, op[0] && (_ = 0)), _) try {
+              if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+              if (y = 0, t) op = [op[0] & 2, t.value];
+              switch (op[0]) {
+                  case 0: case 1: t = op; break;
+                  case 4: _.label++; return { value: op[1], done: false };
+                  case 5: _.label++; y = op[1]; op = [0]; continue;
+                  case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                  default:
+                      if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                      if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                      if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                      if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                      if (t[2]) _.ops.pop();
+                      _.trys.pop(); continue;
+              }
+              op = body.call(thisArg, _);
+          } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+          if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+      }
+    }
+
+    typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
+      var e = new Error(message);
+      return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
+    };
+
+    var uiDefaultFs = "#define GLSLIFY 1\nuniform sampler2D renderer_UITexture;\n\nvarying vec2 v_uv;\nvarying vec4 v_color;\n\nvoid main() {\n    vec4 baseColor = texture2D(renderer_UITexture, v_uv);\n    gl_FragColor = baseColor * v_color;\n}\n"; // eslint-disable-line
+
+    var uiDefaultVs = "#define GLSLIFY 1\nuniform mat4 renderer_MVPMat;\n\nattribute vec3 POSITION;\nattribute vec2 TEXCOORD_0;\nattribute vec4 COLOR_0;\n\nvarying vec2 v_uv;\nvarying vec4 v_color;\n\nvoid main() {\n    gl_Position = renderer_MVPMat * vec4(POSITION, 1.0);\n\n    v_uv = TEXCOORD_0;\n    v_color = COLOR_0;\n}\n"; // eslint-disable-line
+
+    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;
+
+            return o;
+        };
+
+        return _set_prototype_of(o, p);
+    }
+
+    function _inherits(subClass, superClass) {
+        if (typeof superClass !== "function" && superClass !== null) {
+            throw new TypeError("Super expression must either be null or a function");
+        }
+
+        subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } });
+
+        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;
+    }
+
+    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 = true, /** @internal */ _this._isGroupDirty = true, /** @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: "ignoreParentGroup",
+                get: /**
+       * 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._ignoreParentGroup;
+                },
+                set: function set(value) {
+                    if (this._ignoreParentGroup !== value) {
+                        this._ignoreParentGroup = value;
+                        this._onGroupModify(3);
+                    }
+                }
+            },
+            {
+                key: "interactive",
+                get: /**
+       * Whether the group is interactive.
+       */ function get() {
+                    return this._interactive;
+                },
+                set: function set(value) {
+                    if (this._interactive !== value) {
+                        this._interactive = value;
+                        this._onGroupModify(2);
+                    }
+                }
+            },
+            {
+                key: "alpha",
+                get: /**
+       * The alpha value of the group.
+       */ function get() {
+                    return this._alpha;
+                },
+                set: function set(value) {
+                    value = Math.max(0, Math.min(value, 1));
+                    if (this._alpha !== value) {
+                        this._alpha = value;
+                        this._onGroupModify(1);
+                    }
+                }
+            }
+        ]);
+        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, "_group", void 0);
+    __decorate([
+        engine.ignoreClone
+    ], UIGroup.prototype, "_rootCanvas", void 0);
+    __decorate([
+        engine.ignoreClone
+    ], UIGroup.prototype, "_disorderedElements", void 0);
+    __decorate([
+        engine.ignoreClone
+    ], UIGroup.prototype, "_globalAlpha", 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);
+    __decorate([
+        engine.ignoreClone
+    ], UIGroup.prototype, "_groupListeningEntities", void 0);
+    __decorate([
+        engine.ignoreClone
+    ], 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;
+    }({});
+
+    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);
+        };
+        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);
+        };
+        Utils.cleanRootCanvas = function cleanRootCanvas(element) {
+            this._registerRootCanvas(element, null);
+            this._unRegisterListener(element._rootCanvasListener, element._rootCanvasListeningEntities);
+        };
+        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;
+    }();
+
+    /**
+     * 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;
+    }({});
+
+    /**
+     * 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);
+            // @ts-ignore
+            _this._size._onValueChanged = _this._onSizeChange.bind(_this);
+            // @ts-ignore
+            _this._pivot._onValueChanged = _this._onPivotChange.bind(_this);
+            return _this;
+        }
+        var _proto = UITransform.prototype;
+        _proto._onSizeChange = function _onSizeChange() {
+            // @ts-ignore
+            this._entity._updateFlagManager.dispatch(512);
+        };
+        _proto._onPivotChange = function _onPivotChange() {
+            // @ts-ignore
+            this._entity._updateFlagManager.dispatch(1024);
+        };
+        _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);
+                }
+            }
+        ]);
+        return UITransform;
+    }(engine.Transform);
+    __decorate([
+        engine.deepClone
+    ], UITransform.prototype, "_size", void 0);
+    __decorate([
+        engine.deepClone
+    ], UITransform.prototype, "_pivot", void 0);
+    __decorate([
+        engine.ignoreClone
+    ], UITransform.prototype, "_onSizeChange", null);
+    __decorate([
+        engine.ignoreClone
+    ], UITransform.prototype, "_onPivotChange", null);
+    /**
+     * @internal
+     * extends TransformModifyFlags
+     */ var UITransformModifyFlags = /*#__PURE__*/ function(UITransformModifyFlags) {
+        /** Size. */ UITransformModifyFlags[UITransformModifyFlags["Size"] = 512] = "Size";
+        /** Pivot. */ UITransformModifyFlags[UITransformModifyFlags["Pivot"] = 1024] = "Pivot";
+        return UITransformModifyFlags;
+    }({});
+
+    exports.UIRenderer = /*#__PURE__*/ function(Renderer) {
+        _inherits(UIRenderer, Renderer);
+        function UIRenderer(entity) {
+            var _this;
+            _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._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);
+            return _this;
+        }
+        var _proto = UIRenderer.prototype;
+        // @ts-ignore
+        _proto._canBatch = function _canBatch(elementA, elementB) {
+            return engine.BatchUtils.canBatchSprite(elementA, elementB);
+        };
+        // @ts-ignore
+        _proto._batch = function _batch(elementA, elementB) {
+            engine.BatchUtils.batchFor2D(elementA, elementB);
+        };
+        // @ts-ignore
+        _proto._updateTransformShaderData = function _updateTransformShaderData(context, onlyMVP, batched) {
+            // @ts-ignore
+            Renderer.prototype._updateTransformShaderData.call(this, context, onlyMVP, true);
+        };
+        // @ts-ignore
+        _proto._prepareRender = function _prepareRender(context) {
+            // Update once per frame per renderer, not influenced by batched
+            if (this._renderFrameCount !== this.engine.time.frameCount) {
+                this._update(context);
+            }
+            this._render(context);
+            // union camera global macro and renderer macro.
+            engine.ShaderMacroCollection.unionCollection(context.camera._globalShaderMacro, // @ts-ignore
+            this.shaderData._macroCollection, //@ts-ignore
+            this._globalShaderMacro);
+        };
+        // @ts-ignore
+        _proto._onEnableInScene = function _onEnableInScene() {
+            // @ts-ignore
+            this._overrideUpdate && this.scene._componentsManager.addOnUpdateRenderers(this);
+            this.entity._updateUIHierarchyVersion(exports.UICanvas._hierarchyCounter);
+            Utils.setRootCanvasDirty(this);
+            Utils.setGroupDirty(this);
+        };
+        // @ts-ignore
+        _proto._onDisableInScene = function _onDisableInScene() {
+            // @ts-ignore
+            this._overrideUpdate && this.scene._componentsManager.removeOnUpdateRenderers(this);
+            this.entity._updateUIHierarchyVersion(exports.UICanvas._hierarchyCounter);
+            Utils.cleanRootCanvas(this);
+            Utils.cleanGroup(this);
+        };
+        /**
+       * @internal
+       */ _proto._getGlobalAlpha = function _getGlobalAlpha() {
+            var _this__getGroup;
+            var _this__getGroup__getGlobalAlpha;
+            return (_this__getGroup__getGlobalAlpha = (_this__getGroup = this._getGroup()) == null ? void 0 : _this__getGroup._getGlobalAlpha()) != null ? _this__getGroup__getGlobalAlpha : 1;
+        };
+        /**
+       * @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, entity) {
+            switch(flag){
+                case engine.EntityModifyFlags.Parent:
+                    Utils.setRootCanvasDirty(this);
+                    Utils.setGroupDirty(this);
+                case engine.EntityModifyFlags.Child:
+                    entity._updateUIHierarchyVersion(exports.UICanvas._hierarchyCounter);
+                    break;
+            }
+        };
+        /**
+       * @internal
+       */ _proto._onGroupModify = function _onGroupModify(flags) {
+            if (flags & GroupModifyFlags.GlobalAlpha) {
+                this._dirtyUpdateFlag |= 2;
+            }
+        };
+        _proto._onColorChanged = function _onColorChanged() {
+            this._dirtyUpdateFlag |= 2;
+        };
+        /**
+       * @internal
+       */ _proto._getChunkManager = function _getChunkManager() {
+            // @ts-ignore
+            return this.engine._batcherManager.primitiveChunkManagerUI;
+        };
+        /**
+       * @internal
+       */ _proto._raycast = function _raycast(ray, out, distance) {
+            if (distance === void 0) distance = Number.MAX_SAFE_INTEGER;
+            var plane = UIRenderer._tempPlane;
+            var transform = this._transformEntity.transform;
+            var normal = plane.normal.copyFrom(transform.worldForward);
+            plane.distance = -engine.Vector3.dot(normal, transform.worldPosition);
+            var curDistance = ray.intersectPlane(plane);
+            if (curDistance >= 0 && curDistance < distance) {
+                var hitPointWorld = ray.getPoint(curDistance, UIRenderer._tempVec30);
+                var worldMatrixInv = UIRenderer._tempMat;
+                engine.Matrix.invert(transform.worldMatrix, worldMatrixInv);
+                var localPosition = UIRenderer._tempVec31;
+                engine.Vector3.transformCoordinate(hitPointWorld, worldMatrixInv, localPosition);
+                if (this._hitTest(localPosition)) {
+                    out.component = this;
+                    out.distance = curDistance;
+                    out.entity = this.entity;
+                    out.normal.copyFrom(normal);
+                    out.point.copyFrom(hitPointWorld);
+                    return true;
+                }
+            }
+            return false;
+        };
+        _proto._hitTest = function _hitTest(localPosition) {
+            var x = localPosition.x, y = localPosition.y;
+            var uiTransform = this._transformEntity.transform;
+            var _uiTransform_size = uiTransform.size, width = _uiTransform_size.x, height = _uiTransform_size.y;
+            var _uiTransform_pivot = uiTransform.pivot, pivotX = _uiTransform_pivot.x, pivotY = _uiTransform_pivot.y;
+            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._onDestroy = function _onDestroy() {
+            if (this._subChunk) {
+                this._getChunkManager().freeSubChunk(this._subChunk);
+                this._subChunk = null;
+            }
+            Renderer.prototype._onDestroy.call(this);
+            //@ts-ignore
+            this._color._onValueChanged = null;
+            this._color = null;
+        };
+        _create_class(UIRenderer, [
+            {
+                key: "color",
+                get: /**
+       * Rendering color for the ui renderer.
+       */ function get() {
+                    return this._color;
+                },
+                set: function set(value) {
+                    if (this._color !== value) {
+                        this._color.copyFrom(value);
+                    }
+                }
+            },
+            {
+                key: "raycastEnabled",
+                get: /**
+       * Whether this renderer be picked up by raycast.
+       */ function get() {
+                    return this._raycastEnabled;
+                },
+                set: function set(value) {
+                    this._raycastEnabled = value;
+                }
+            }
+        ]);
+        return UIRenderer;
+    }(engine.Renderer);
+    /** @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);
+    __decorate([
+        engine.ignoreClone
+    ], exports.UIRenderer.prototype, "_rootCanvas", void 0);
+    __decorate([
+        engine.ignoreClone
+    ], exports.UIRenderer.prototype, "_indexInRootCanvas", void 0);
+    __decorate([
+        engine.ignoreClone
+    ], exports.UIRenderer.prototype, "_isRootCanvasDirty", void 0);
+    __decorate([
+        engine.ignoreClone
+    ], exports.UIRenderer.prototype, "_rootCanvasListeningEntities", void 0);
+    __decorate([
+        engine.ignoreClone
+    ], exports.UIRenderer.prototype, "_group", void 0);
+    __decorate([
+        engine.ignoreClone
+    ], exports.UIRenderer.prototype, "_indexInGroup", void 0);
+    __decorate([
+        engine.ignoreClone
+    ], exports.UIRenderer.prototype, "_isGroupDirty", void 0);
+    __decorate([
+        engine.ignoreClone
+    ], exports.UIRenderer.prototype, "_groupListeningEntities", void 0);
+    __decorate([
+        engine.ignoreClone
+    ], exports.UIRenderer.prototype, "_subChunk", void 0);
+    __decorate([
+        engine.ignoreClone
+    ], exports.UIRenderer.prototype, "_raycastEnabled", void 0);
+    __decorate([
+        engine.deepClone
+    ], exports.UIRenderer.prototype, "_color", void 0);
+    __decorate([
+        engine.ignoreClone
+    ], exports.UIRenderer.prototype, "_groupListener", null);
+    __decorate([
+        engine.ignoreClone
+    ], exports.UIRenderer.prototype, "_rootCanvasListener", null);
+    __decorate([
+        engine.ignoreClone
+    ], exports.UIRenderer.prototype, "_onColorChanged", null);
+    exports.UIRenderer = __decorate([
+        engine.dependentComponents(UITransform, engine.DependentMode.AutoAdd)
+    ], exports.UIRenderer);
+    /**
+     * @remarks Extends `RendererUpdateFlags`.
+     */ var UIRendererUpdateFlags = /*#__PURE__*/ function(UIRendererUpdateFlags) {
+        UIRendererUpdateFlags[UIRendererUpdateFlags["Color"] = 2] = "Color";
+        return UIRendererUpdateFlags;
+    }({});
+
+    /**
+     * 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._interactive = true, _this._state = 0, _this._transitions = [], /** @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);
+            }
+        };
+        /**
+       * 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;
+                }
+            }
+        };
+        /**
+       * Remove all transitions.
+       */ _proto.clearShapes = function clearShapes() {
+            var transitions = this._transitions;
+            for(var i = 0, n = transitions.length; i < n; i++){
+                transitions[i]._interactive = null;
+            }
+            transitions.length = 0;
+        };
+        _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.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 = 0, n = transitions.length; i < n; i++){
+                transitions[i].destroy();
+            }
+        };
+        /**
+       * @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;
+        };
+        // @ts-ignore
+        _proto._onEnableInScene = function _onEnableInScene() {
+            // @ts-ignore
+            Script.prototype._onEnableInScene.call(this);
+            Utils.setRootCanvasDirty(this);
+            Utils.setGroupDirty(this);
+            this._updateState(true);
+        };
+        // @ts-ignore
+        _proto._onDisableInScene = function _onDisableInScene() {
+            // @ts-ignore
+            Script.prototype._onDisableInScene.call(this);
+            Utils.cleanRootCanvas(this);
+            Utils.cleanGroup(this);
+            this._isPointerInside = this._isPointerDragging = false;
+        };
+        /**
+       * @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) {
+            if (flags & GroupModifyFlags.GlobalInteractive) {
+                this._globalInteractiveDirty = true;
+            }
+        };
+        /**
+       * @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;
+            }
+            return this._globalInteractive;
+        };
+        _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._getInteractiveState = function _getInteractiveState() {
+            if (!this._getGlobalInteractive()) {
+                return 3;
+            }
+            if (this._isPointerDragging) {
+                return 1;
+            } else {
+                return this._isPointerInside ? 2 : 0;
+            }
+        };
+        _create_class(UIInteractive, [
+            {
+                key: "transitions",
+                get: /**
+       * The transitions of this interactive.
+       */ function get() {
+                    return this._transitions;
+                }
+            },
+            {
+                key: "interactive",
+                get: /**
+       * Whether the interactive is enabled.
+       */ function get() {
+                    return this._interactive;
+                },
+                set: function set(value) {
+                    if (this._interactive !== value) {
+                        this._interactive = value;
+                        this._globalInteractiveDirty = true;
+                    }
+                }
+            }
+        ]);
+        return UIInteractive;
+    }(engine.Script);
+    __decorate([
+        engine.ignoreClone
+    ], UIInteractive.prototype, "_rootCanvas", void 0);
+    __decorate([
+        engine.ignoreClone
+    ], UIInteractive.prototype, "_indexInRootCanvas", void 0);
+    __decorate([
+        engine.ignoreClone
+    ], UIInteractive.prototype, "_isRootCanvasDirty", void 0);
+    __decorate([
+        engine.ignoreClone
+    ], UIInteractive.prototype, "_rootCanvasListeningEntities", void 0);
+    __decorate([
+        engine.ignoreClone
+    ], UIInteractive.prototype, "_group", void 0);
+    __decorate([
+        engine.ignoreClone
+    ], UIInteractive.prototype, "_indexInGroup", void 0);
+    __decorate([
+        engine.ignoreClone
+    ], UIInteractive.prototype, "_isGroupDirty", void 0);
+    __decorate([
+        engine.ignoreClone
+    ], UIInteractive.prototype, "_groupListeningEntities", void 0);
+    __decorate([
+        engine.ignoreClone
+    ], UIInteractive.prototype, "_globalInteractive", void 0);
+    __decorate([
+        engine.ignoreClone
+    ], UIInteractive.prototype, "_globalInteractiveDirty", void 0);
+    __decorate([
+        engine.ignoreClone
+    ], UIInteractive.prototype, "_groupListener", null);
+    __decorate([
+        engine.ignoreClone
+    ], UIInteractive.prototype, "_rootCanvasListener", 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 = /*#__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._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._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);
+            return _this;
+        }
+        var _proto = UICanvas.prototype;
+        _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._renderMode !== CanvasRenderMode.ScreenSpaceCamera || this._renderCamera === 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;
+            // @ts-ignore
+            var renderElement = this._renderElement = engine._renderElementPool.get();
+            this._updateSortDistance(context.virtualCamera.position);
+            renderElement.set(this.sortOrder, this._sortDistance);
+            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;
+            }
+        };
+        /**
+       * @internal
+       */ _proto._updateSortDistance = function _updateSortDistance(cameraPosition) {
+            switch(this._realRenderMode){
+                case CanvasRenderMode.ScreenSpaceOverlay:
+                    this._sortDistance = 0;
+                    break;
+                case CanvasRenderMode.ScreenSpaceCamera:
+                    this._sortDistance = this._distance;
+                    break;
+                case CanvasRenderMode.WorldSpace:
+                    this._sortDistance = engine.Vector3.distance(cameraPosition, this.entity.transform.worldPosition);
+                    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);
+        };
+        /**
+       * @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);
+                }
+            }
+        };
+        _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 _this__renderCamera_entity = this._renderCamera.entity, cameraTransform = _this__renderCamera_entity.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);
+            }
+        };
+        _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 renderCamera = this._renderCamera;
+                curHeight = renderCamera.isOrthographic ? renderCamera.orthographicSize * 2 : 2 * (Math.tan(engine.MathUtil.degreeToRadian(renderCamera.fieldOfView * 0.5)) * this._distance);
+                curWidth = renderCamera.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);
+        };
+        _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;
+                }
+            }
+            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));
+            }
+            return depth;
+        };
+        _proto._updateCameraObserver = function _updateCameraObserver() {
+            var camera = this._isRootCanvas && this._renderMode === CanvasRenderMode.ScreenSpaceCamera ? this._renderCamera : 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._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._renderCamera.isOrthographic && this._adapterSizeInScreenSpace();
+                        break;
+                    case engine.CameraModifyFlags.OrthographicSize:
+                        this._renderCamera.isOrthographic && this._adapterSizeInScreenSpace();
+                        break;
+                    case engine.CameraModifyFlags.DisableInScene:
+                        this._setRealRenderMode(CanvasRenderMode.ScreenSpaceOverlay);
+                        break;
+                }
+            } else {
+                flag === engine.CameraModifyFlags.EnableInScene && this._setRealRenderMode(CanvasRenderMode.ScreenSpaceCamera);
+            }
+        };
+        _proto._onCameraTransformListener = function _onCameraTransformListener() {
+            this._realRenderMode === CanvasRenderMode.ScreenSpaceCamera && this._adapterPoseInScreenSpace();
+        };
+        _proto._addCanvasListener = function _addCanvasListener() {
+            // @ts-ignore
+            this.engine.canvas._sizeUpdateFlagManager.addListener(this._onCanvasSizeListener);
+        };
+        _proto._removeCanvasListener = function _removeCanvasListener() {
+            // @ts-ignore
+            this.engine.canvas._sizeUpdateFlagManager.removeListener(this._onCanvasSizeListener);
+        };
+        _proto._onCanvasSizeListener = function _onCanvasSizeListener() {
+            var canvas = this.engine.canvas;
+            this.entity.transform.setWorldPosition(canvas.width * 0.5, canvas.height * 0.5, 0);
+            this._adapterSizeInScreenSpace();
+        };
+        _proto._onReferenceResolutionChanged = function _onReferenceResolutionChanged() {
+            var realRenderMode = this._realRenderMode;
+            if (realRenderMode === CanvasRenderMode.ScreenSpaceOverlay || realRenderMode === CanvasRenderMode.ScreenSpaceCamera) {
+                this._adapterSizeInScreenSpace();
+            }
+        };
+        _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;
+                }
+            }
+        };
+        _proto._getRealRenderMode = function _getRealRenderMode() {
+            if (this._isRootCanvas) {
+                var _this__renderCamera;
+                var mode = this._renderMode;
+                if (mode === CanvasRenderMode.ScreenSpaceCamera && !((_this__renderCamera = this._renderCamera) == null ? void 0 : _this__renderCamera.enabled)) {
+                    return CanvasRenderMode.ScreenSpaceOverlay;
+                } else {
+                    return mode;
+                }
+            } else {
+                return 4;
+            }
+        };
+        _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;
+                }
+            }
+        };
+        _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: "renderCamera",
+                get: /**
+       * The camera used to render the UI canvas in `ScreenSpaceCamera` mode.
+       * @remarks If set `ScreenSpaceCamera` but no corresponding camera is assigned, the actual rendering mode defaults to `ScreenSpaceOverlay`.
+       */ function get() {
+                    return this._renderCamera;
+                },
+                set: function set(value) {
+                    var preCamera = this._renderCamera;
+                    if (preCamera !== value) {
+                        this._renderCamera = value;
+                        this._updateCameraObserver();
+                        this._setRealRenderMode(this._getRealRenderMode());
+                    }
+                }
+            },
+            {
+                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 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, "_rootCanvas", 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, "_renderElement", void 0);
+    __decorate([
+        engine.ignoreClone
+    ], 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.ignoreClone
+    ], exports.UICanvas.prototype, "_disorderedElements", void 0);
+    __decorate([
+        engine.ignoreClone
+    ], exports.UICanvas.prototype, "_renderMode", void 0);
+    __decorate([
+        engine.ignoreClone
+    ], exports.UICanvas.prototype, "_renderCamera", void 0);
+    __decorate([
+        engine.ignoreClone
+    ], exports.UICanvas.prototype, "_cameraObserver", void 0);
+    __decorate([
+        engine.ignoreClone
+    ], exports.UICanvas.prototype, "_resolutionAdaptationMode", void 0);
+    __decorate([
+        engine.ignoreClone
+    ], exports.UICanvas.prototype, "_sortOrder", void 0);
+    __decorate([
+        engine.ignoreClone
+    ], exports.UICanvas.prototype, "_distance", void 0);
+    __decorate([
+        engine.deepClone
+    ], exports.UICanvas.prototype, "_referenceResolution", void 0);
+    __decorate([
+        engine.deepClone
+    ], exports.UICanvas.prototype, "_referenceResolutionPerUnit", void 0);
+    __decorate([
+        engine.ignoreClone
+    ], exports.UICanvas.prototype, "_hierarchyVersion", void 0);
+    __decorate([
+        engine.ignoreClone
+    ], exports.UICanvas.prototype, "_rootCanvasListener", null);
+    __decorate([
+        engine.ignoreClone
+    ], exports.UICanvas.prototype, "_onCameraModifyListener", null);
+    __decorate([
+        engine.ignoreClone
+    ], exports.UICanvas.prototype, "_onCameraTransformListener", null);
+    __decorate([
+        engine.ignoreClone
+    ], exports.UICanvas.prototype, "_onCanvasSizeListener", 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;
+    }({});
+
+    var Button = /*#__PURE__*/ function(UIInteractive) {
+        _inherits(Button, UIInteractive);
+        function Button() {
+            var _this;
+            _this = UIInteractive.apply(this, arguments) || this, _this._listeners = new engine.SafeLoopArray();
+            return _this;
+        }
+        var _proto = Button.prototype;
+        /**
+       * Add a listening function for click.
+       * @param listener - The listening function
+       */ _proto.addClicked = function addClicked(listener) {
+            this._listeners.push({
+                fn: listener
+            });
+        };
+        /**
+       * Remove a listening function of click.
+       * @param listener - The listening function
+       */ _proto.removeClicked = function removeClicked(listener) {
+            this._listeners.findAndRemove(function(value) {
+                return value.fn === listener ? value.destroyed = true : false;
+            });
+        };
+        _proto.onPointerClick = function onPointerClick(event) {
+            if (!this._getGlobalInteractive()) return;
+            var listeners = this._listeners.getLoopArray();
+            for(var i = 0, n = listeners.length; i < n; i++){
+                var listener = listeners[i];
+                !listener.destroyed && listener.fn(event);
+            }
+        };
+        _proto.onDestroy = function onDestroy() {
+            UIInteractive.prototype.onDestroy.call(this);
+            this._listeners.findAndRemove(function(value) {
+                return value.destroyed = true;
+            });
+        };
+        return Button;
+    }(UIInteractive);
+
+    /**
+     * UI element that renders an image.
+     */ var Image = /*#__PURE__*/ function(UIRenderer1) {
+        _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.drawMode = engine.SpriteDrawMode.Simple;
+            _this.setMaterial(_this._engine._getUIDefaultMaterial());
+            _this._onSpriteChange = _this._onSpriteChange.bind(_this);
+            return _this;
+        }
+        var _proto = Image.prototype;
+        /**
+       * @internal
+       */ _proto._onRootCanvasModify = function _onRootCanvasModify(flag) {
+            if (flag & RootCanvasModifyFlags.ReferenceResolutionPerUnit) {
+                var drawMode = this._drawMode;
+                if (drawMode === engine.SpriteDrawMode.Tiled) {
+                    this._dirtyUpdateFlag |= 15;
+                } else if (drawMode === engine.SpriteDrawMode.Sliced) {
+                    this._dirtyUpdateFlag |= engine.RendererUpdateFlags.WorldVolume;
+                }
+            }
+        };
+        _proto._updateBounds = function _updateBounds(worldBounds) {
+            var sprite = this._sprite;
+            var rootCanvas = this._getRootCanvas();
+            if (sprite && rootCanvas) {
+                var transform = this._transformEntity.transform;
+                var size = transform.size;
+                this._assembler.updatePositions(this, transform.worldMatrix, size.x, size.y, transform.pivot, false, false, rootCanvas.referenceResolutionPerUnit);
+            } else {
+                var worldPosition = this._transformEntity.transform.worldPosition;
+                worldBounds.min.copyFrom(worldPosition);
+                worldBounds.max.copyFrom(worldPosition);
+            }
+        };
+        _proto._render = function _render(context) {
+            var _this = this, sprite = _this._sprite;
+            var transform = this._transformEntity.transform;
+            var _transform_size = transform.size, width = _transform_size.x, height = _transform_size.y;
+            if (!(sprite == null ? void 0 : sprite.texture) || !width || !height) {
+                return;
+            }
+            var material = this.getMaterial();
+            if (!material) {
+                return;
+            }
+            // @todo: This question needs to be raised rather than hidden.
+            if (material.destroyed) {
+                material = this._engine._getUIDefaultMaterial();
+            }
+            var alpha = this._getGlobalAlpha();
+            if (this._color.a * alpha <= 0) {
+                return;
+            }
+            var _this1 = this, dirtyUpdateFlag = _this1._dirtyUpdateFlag;
+            var canvas = this._getRootCanvas();
+            // Update position
+            if (dirtyUpdateFlag & engine.RendererUpdateFlags.WorldVolume) {
+                this._assembler.updatePositions(this, transform.worldMatrix, width, height, transform.pivot, false, false, canvas.referenceResolutionPerUnit);
+                dirtyUpdateFlag &= ~engine.RendererUpdateFlags.WorldVolume;
+            }
+            // Update uv
+            if (dirtyUpdateFlag & 4) {
+                this._assembler.updateUVs(this);
+                dirtyUpdateFlag &= ~4;
+            }
+            // Update color
+            if (dirtyUpdateFlag & UIRendererUpdateFlags.Color) {
+                this._assembler.updateColor(this, alpha);
+                dirtyUpdateFlag &= ~UIRendererUpdateFlags.Color;
+            }
+            this._dirtyUpdateFlag = dirtyUpdateFlag;
+            // Init sub render element.
+            var engine$1 = context.camera.engine;
+            var subRenderElement = engine$1._subRenderElementPool.get();
+            var subChunk = this._subChunk;
+            subRenderElement.set(this, material, subChunk.chunk.primitive, subChunk.subMesh, this.sprite.texture, subChunk);
+            if (canvas._realRenderMode === CanvasRenderMode.ScreenSpaceOverlay) {
+                subRenderElement.shaderPasses = material.shader.subShaders[0].passes;
+                subRenderElement.renderQueueFlags = engine.RenderQueueFlags.All;
+            }
+            canvas._renderElement.addSubRenderElement(subRenderElement);
+        };
+        _proto._onTransformChanged = function _onTransformChanged(type) {
+            if (type & UITransformModifyFlags.Size && this._drawMode === engine.SpriteDrawMode.Tiled) {
+                this._dirtyUpdateFlag |= 15;
+            }
+            this._dirtyUpdateFlag |= engine.RendererUpdateFlags.WorldVolume;
+        };
+        _proto._onDestroy = function _onDestroy() {
+            var sprite = this._sprite;
+            if (sprite) {
+                this._addResourceReferCount(sprite, -1);
+                // @ts-ignore
+                sprite._updateFlagManager.removeListener(this._onSpriteChange);
+                this._sprite = null;
+            }
+            UIRenderer1.prototype._onDestroy.call(this);
+        };
+        _proto._onSpriteChange = function _onSpriteChange(type) {
+            switch(type){
+                case engine.SpriteModifyFlags.texture:
+                    this.shaderData.setTexture(exports.UIRenderer._textureProperty, this.sprite.texture);
+                    break;
+                case engine.SpriteModifyFlags.size:
+                    switch(this._drawMode){
+                        case engine.SpriteDrawMode.Sliced:
+                            this._dirtyUpdateFlag |= engine.RendererUpdateFlags.WorldVolume;
+                            break;
+                        case engine.SpriteDrawMode.Tiled:
+                            this._dirtyUpdateFlag |= 7;
+                            break;
+                    }
+                    break;
+                case engine.SpriteModifyFlags.border:
+                    switch(this._drawMode){
+                        case engine.SpriteDrawMode.Sliced:
+                            this._dirtyUpdateFlag |= 5;
+                            break;
+                        case engine.SpriteDrawMode.Tiled:
+                            this._dirtyUpdateFlag |= 7;
+                            break;
+                    }
+                    break;
+                case engine.SpriteModifyFlags.region:
+                case engine.SpriteModifyFlags.atlasRegionOffset:
+                    this._dirtyUpdateFlag |= 5;
+                    break;
+                case engine.SpriteModifyFlags.atlasRegion:
+                    this._dirtyUpdateFlag |= 4;
+                    break;
+                case engine.SpriteModifyFlags.destroy:
+                    this.sprite = null;
+                    break;
+            }
+        };
+        _create_class(Image, [
+            {
+                key: "drawMode",
+                get: /**
+       * The draw mode of the image.
+       */ function get() {
+                    return this._drawMode;
+                },
+                set: function set(value) {
+                    if (this._drawMode !== value) {
+                        this._drawMode = value;
+                        switch(value){
+                            case engine.SpriteDrawMode.Simple:
+                                this._assembler = engine.SimpleSpriteAssembler;
+                                break;
+                            case engine.SpriteDrawMode.Sliced:
+                                this._assembler = engine.SlicedSpriteAssembler;
+                                break;
+                            case engine.SpriteDrawMode.Tiled:
+                                this._assembler = engine.TiledSpriteAssembler;
+                                break;
+                        }
+                        this._assembler.resetData(this);
+                        this._dirtyUpdateFlag |= 7;
+                    }
+                }
+            },
+            {
+                key: "tileMode",
+                get: /**
+       * The tiling mode of the image. (Only works in tiled mode.)
+       */ function get() {
+                    return this._tileMode;
+                },
+                set: function set(value) {
+                    if (this._tileMode !== value) {
+                        this._tileMode = value;
+                        if (this.drawMode === engine.SpriteDrawMode.Tiled) {
+                            this._dirtyUpdateFlag |= 7;
+                        }
+                    }
+                }
+            },
+            {
+                key: "tiledAdaptiveThreshold",
+                get: /**
+       * Stretch Threshold in Tile Adaptive Mode, specified in normalized. (Only works in tiled adaptive mode.)
+       */ function get() {
+                    return this._tiledAdaptiveThreshold;
+                },
+                set: function set(value) {
+                    if (value !== this._tiledAdaptiveThreshold) {
+                        value = engine.MathUtil.clamp(value, 0, 1);
+                        this._tiledAdaptiveThreshold = value;
+                        if (this.drawMode === engine.SpriteDrawMode.Tiled) {
+                            this._dirtyUpdateFlag |= 7;
+                        }
+                    }
+                }
+            },
+            {
+                key: "sprite",
+                get: /**
+       * The Sprite to render.
+       */ function get() {
+                    return this._sprite;
+                },
+                set: function set(value) {
+                    var lastSprite = this._sprite;
+                    if (lastSprite !== value) {
+                        if (lastSprite) {
+                            this._addResourceReferCount(lastSprite, -1);
+                            // @ts-ignore
+                            lastSprite._updateFlagManager.removeListener(this._onSpriteChange);
+                        }
+                        this._dirtyUpdateFlag |= 7;
+                        if (value) {
+                            this._addResourceReferCount(value, 1);
+                            // @ts-ignore
+                            value._updateFlagManager.addListener(this._onSpriteChange);
+                            this.shaderData.setTexture(exports.UIRenderer._textureProperty, value.texture);
+                        } else {
+                            this.shaderData.setTexture(exports.UIRenderer._textureProperty, null);
+                        }
+                        this._sprite = value;
+                    }
+                }
+            }
+        ]);
+        return Image;
+    }(exports.UIRenderer);
+    __decorate([
+        engine.ignoreClone
+    ], Image.prototype, "_sprite", void 0);
+    __decorate([
+        engine.ignoreClone
+    ], Image.prototype, "_drawMode", void 0);
+    __decorate([
+        engine.assignmentClone
+    ], 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);
+    __decorate([
+        engine.ignoreClone
+    ], Image.prototype, "_onSpriteChange", null);
+
+    /**
+     * 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._horizontalAlignment = engine.TextHorizontalAlignment.Center, _this._verticalAlignment = engine.TextVerticalAlignment.Center, _this._enableWrapping = false, _this._overflowMode = engine.OverflowMode.Overflow;
+            var engine$1 = _this.engine;
+            // @ts-ignore
+            _this.font = engine$1._textDefaultFont;
+            // @ts-ignore
+            _this.setMaterial(engine$1._basicResources.textDefaultMaterial);
+            return _this;
+        }
+        var _proto = Text.prototype;
+        /**
+       * @internal
+       */ _proto._onDestroy = function _onDestroy() {
+            if (this._font) {
+                this._addResourceReferCount(this._font, -1);
+                this._font = null;
+            }
+            UIRenderer1.prototype._onDestroy.call(this);
+            this._freeTextChunks();
+            this._textChunks = null;
+            this._subFont && (this._subFont = null);
+        };
+        // @ts-ignore
+        _proto._cloneTo = function _cloneTo(target, srcRoot, targetRoot) {
+            // @ts-ignore
+            UIRenderer1.prototype._cloneTo.call(this, target, srcRoot, targetRoot);
+            target.font = this._font;
+            target._subFont = this._subFont;
+        };
+        /**
+       * @internal
+       */ _proto._isContainDirtyFlag = function _isContainDirtyFlag(type) {
+            return (this._dirtyUpdateFlag & type) != 0;
+        };
+        /**
+       * @internal
+       */ _proto._setDirtyFlagTrue = function _setDirtyFlagTrue(type) {
+            this._dirtyUpdateFlag |= type;
+        };
+        /**
+       * @internal
+       */ _proto._setDirtyFlagFalse = function _setDirtyFlagFalse(type) {
+            this._dirtyUpdateFlag &= ~type;
+        };
+        /**
+       * @internal
+       */ _proto._getSubFont = function _getSubFont() {
+            if (!this._subFont) {
+                this._resetSubFont();
+            }
+            return this._subFont;
+        };
+        /**
+       * @internal
+       */ _proto._onRootCanvasModify = function _onRootCanvasModify(flag) {
+            if (flag === RootCanvasModifyFlags.ReferenceResolutionPerUnit) {
+                this._setDirtyFlagTrue(8);
+            }
+        };
+        _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);
+        };
+        _proto._render = function _render(context) {
+            if (this._isTextNoVisible()) {
+                return;
+            }
+            if (this._isContainDirtyFlag(4)) {
+                this._resetSubFont();
+                this._setDirtyFlagFalse(4);
+            }
+            var canvas = this._getRootCanvas();
+            if (this._isContainDirtyFlag(8)) {
+                this._updateLocalData();
+                this._setDirtyFlagTrue(8);
+            }
+            if (this._isContainDirtyFlag(16)) {
+                this._updatePosition();
+                this._setDirtyFlagFalse(16);
+            }
+            if (this._isContainDirtyFlag(UIRendererUpdateFlags.Color)) {
+                this._updateColor();
+                this._setDirtyFlagFalse(UIRendererUpdateFlags.Color);
+            }
+            var engine$1 = context.camera.engine;
+            var textSubRenderElementPool = engine$1._textSubRenderElementPool;
+            var material = this.getMaterial();
+            var renderElement = canvas._renderElement;
+            var textChunks = this._textChunks;
+            var isOverlay = canvas._realRenderMode === CanvasRenderMode.ScreenSpaceOverlay;
+            for(var i = 0, n = textChunks.length; i < n; ++i){
+                var // @ts-ignore
+                _subRenderElement;
+                var _textChunks_i = textChunks[i], subChunk = _textChunks_i.subChunk, texture = _textChunks_i.texture;
+                var subRenderElement = textSubRenderElementPool.get();
+                subRenderElement.set(this, material, subChunk.chunk.primitive, subChunk.subMesh, texture, subChunk);
+                (_subRenderElement = subRenderElement).shaderData || (_subRenderElement.shaderData = new engine.ShaderData(engine.ShaderDataGroup.RenderElement));
+                subRenderElement.shaderData.setTexture(Text._textTextureProperty, texture);
+                if (isOverlay) {
+                    subRenderElement.shaderPasses = material.shader.subShaders[0].passes;
+                    subRenderElement.renderQueueFlags = engine.RenderQueueFlags.All;
+                }
+                renderElement.addSubRenderElement(subRenderElement);
+            }
+        };
+        _proto._resetSubFont = function _resetSubFont() {
+            var font = this._font;
+            // @ts-ignore
+            this._subFont = font._getSubFont(this.fontSize, this.fontStyle);
+            this._subFont.nativeFontString = engine.TextUtils.getNativeFontString(font.name, this.fontSize, this.fontStyle);
+        };
+        _proto._updatePosition = function _updatePosition() {
+            var e = this._transformEntity.transform.worldMatrix.elements;
+            // prettier-ignore
+            var e0 = e[0], e1 = e[1], e2 = e[2], e4 = e[4], e5 = e[5], e6 = e[6], e12 = e[12], e13 = e[13], e14 = e[14];
+            var up = exports.UIRenderer._tempVec31.set(e4, e5, e6);
+            var right = exports.UIRenderer._tempVec30.set(e0, e1, e2);
+            var worldPositions = Text._worldPositions;
+            var worldPosition0 = worldPositions[0], worldPosition1 = worldPositions[1], worldPosition2 = worldPositions[2], worldPosition3 = worldPositions[3];
+            var textChunks = this._textChunks;
+            for(var i = 0, n = textChunks.length; i < n; ++i){
+                var _textChunks_i = textChunks[i], subChunk = _textChunks_i.subChunk, charRenderInfos = _textChunks_i.charRenderInfos;
+                for(var j = 0, m = charRenderInfos.length; j < m; ++j){
+                    var charRenderInfo = charRenderInfos[j];
+                    var localPositions = charRenderInfo.localPositions;
+                    var topLeftX = localPositions.x, topLeftY = localPositions.y;
+                    // Top-Left
+                    worldPosition0.set(topLeftX * e0 + topLeftY * e4 + e12, topLeftX * e1 + topLeftY * e5 + e13, topLeftX * e2 + topLeftY * e6 + e14);
+                    // Right offset
+                    engine.Vector3.scale(right, localPositions.z - topLeftX, worldPosition1);
+                    // Top-Right
+                    engine.Vector3.add(worldPosition0, worldPosition1, worldPosition1);
+                    // Up offset
+                    engine.Vector3.scale(up, localPositions.w - topLeftY, worldPosition2);
+                    // Bottom-Left
+                    engine.Vector3.add(worldPosition0, worldPosition2, worldPosition3);
+                    // Bottom-Right
+                    engine.Vector3.add(worldPosition1, worldPosition2, worldPosition2);
+                    var vertices = subChunk.chunk.vertices;
+                    for(var k = 0, o = subChunk.vertexArea.start + charRenderInfo.indexInChunk * 36; k < 4; ++k, o += 9){
+                        worldPositions[k].copyToArray(vertices, o);
+                    }
+                }
+            }
+        };
+        _proto._updateColor = function _updateColor() {
+            var _this__color = this._color, r = _this__color.r, g = _this__color.g, b = _this__color.b, a = _this__color.a;
+            var finalAlpha = a * this._getGlobalAlpha();
+            var textChunks = this._textChunks;
+            for(var i = 0, n = textChunks.length; i < n; ++i){
+                var subChunk = textChunks[i].subChunk;
+                var vertexArea = subChunk.vertexArea;
+                var vertexCount = vertexArea.size / 9;
+                var vertices = subChunk.chunk.vertices;
+                for(var j = 0, o = vertexArea.start + 5; j < vertexCount; ++j, o += 9){
+                    vertices[o] = r;
+                    vertices[o + 1] = g;
+                    vertices[o + 2] = b;
+                    vertices[o + 3] = finalAlpha;
+                }
+            }
+        };
+        _proto._updateLocalData = function _updateLocalData() {
+            // @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 textMetrics = this.enableWrapping ? engine.TextUtils.measureTextWithWrap(this, rendererWidth * pixelsPerResolution, rendererHeight * pixelsPerResolution, this._lineSpacing * pixelsPerResolution) : engine.TextUtils.measureTextWithoutWrap(this, rendererHeight * pixelsPerResolution, this._lineSpacing * pixelsPerResolution);
+            var height = textMetrics.height, lines = textMetrics.lines, lineWidths = textMetrics.lineWidths, lineHeight = textMetrics.lineHeight, lineMaxSizes = textMetrics.lineMaxSizes;
+            // @ts-ignore
+            var charRenderInfoPool = this.engine._charRenderInfoPool;
+            var linesLen = lines.length;
+            var renderElementCount = 0;
+            if (linesLen > 0) {
+                var horizontalAlignment = this.horizontalAlignment;
+                var pixelsPerUnitReciprocal = 1.0 / pixelsPerResolution;
+                rendererWidth *= pixelsPerResolution;
+                rendererHeight *= pixelsPerResolution;
+                var halfRendererWidth = rendererWidth * 0.5;
+                var halfLineHeight = lineHeight * 0.5;
+                var startY = 0;
+                var topDiff = lineHeight * 0.5 - lineMaxSizes[0].ascent;
+                var bottomDiff = lineHeight * 0.5 - lineMaxSizes[linesLen - 1].descent - 1;
+                switch(this.verticalAlignment){
+                    case engine.TextVerticalAlignment.Top:
+                        startY = rendererHeight * 0.5 - halfLineHeight + topDiff;
+                        break;
+                    case engine.TextVerticalAlignment.Center:
+                        startY = height * 0.5 - halfLineHeight - (bottomDiff - topDiff) * 0.5;
+                        break;
+                    case engine.TextVerticalAlignment.Bottom:
+                        startY = height - rendererHeight * 0.5 - halfLineHeight - bottomDiff;
+                        break;
+                }
+                var firstLine = -1;
+                var minX = Number.MAX_SAFE_INTEGER;
+                var minY = Number.MAX_SAFE_INTEGER;
+                var maxX = Number.MIN_SAFE_INTEGER;
+                var maxY = Number.MIN_SAFE_INTEGER;
+                for(var i = 0; i < linesLen; ++i){
+                    var lineWidth = lineWidths[i];
+                    if (lineWidth > 0) {
+                        var line = lines[i];
+                        var startX = 0;
+                        var firstRow = -1;
+                        if (firstLine < 0) {
+                            firstLine = i;
+                        }
+                        switch(horizontalAlignment){
+                            case engine.TextHorizontalAlignment.Left:
+                                startX = -halfRendererWidth;
+                                break;
+                            case engine.TextHorizontalAlignment.Center:
+                                startX = -lineWidth * 0.5;
+                                break;
+                            case engine.TextHorizontalAlignment.Right:
+                                startX = halfRendererWidth - lineWidth;
+                                break;
+                        }
+                        for(var j = 0, n = line.length; j < n; ++j){
+                            var char = line[j];
+                            var charInfo = charFont._getCharInfo(char);
+                            if (charInfo.h > 0) {
+                                firstRow < 0 && (firstRow = j);
+                                var charRenderInfo = charRenderInfos[renderElementCount++] = charRenderInfoPool.get();
+                                var localPositions = charRenderInfo.localPositions;
+                                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;
+                                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 + charInfo.offsetX;
+                        }
+                    }
+                    startY -= lineHeight;
+                }
+                if (firstLine < 0) {
+                    min.set(0, 0, 0);
+                    max.set(0, 0, 0);
+                } else {
+                    min.set(minX, minY, 0);
+                    max.set(maxX, maxY, 0);
+                }
+            } else {
+                min.set(0, 0, 0);
+                max.set(0, 0, 0);
+            }
+            charFont._getLastIndex() > 0 && charRenderInfos.sort(function(a, b) {
+                return a.texture.instanceId - b.texture.instanceId;
+            });
+            this._freeTextChunks();
+            if (renderElementCount === 0) {
+                return;
+            }
+            var textChunks = this._textChunks;
+            var curTextChunk = new TextChunk();
+            textChunks.push(curTextChunk);
+            var chunkMaxVertexCount = this._getChunkManager().maxVertexCount;
+            var curCharRenderInfo = charRenderInfos[0];
+            var curTexture = curCharRenderInfo.texture;
+            curTextChunk.texture = curTexture;
+            var curCharInfos = curTextChunk.charRenderInfos;
+            curCharInfos.push(curCharRenderInfo);
+            for(var i1 = 1; i1 < renderElementCount; ++i1){
+                var charRenderInfo1 = charRenderInfos[i1];
+                var texture = charRenderInfo1.texture;
+                if (curTexture !== texture || curCharInfos.length * 4 + 4 > chunkMaxVertexCount) {
+                    this._buildChunk(curTextChunk, curCharInfos.length);
+                    curTextChunk = new TextChunk();
+                    textChunks.push(curTextChunk);
+                    curTexture = texture;
+                    curTextChunk.texture = texture;
+                    curCharInfos = curTextChunk.charRenderInfos;
+                }
+                curCharInfos.push(charRenderInfo1);
+            }
+            var charLength = curCharInfos.length;
+            if (charLength > 0) {
+                this._buildChunk(curTextChunk, charLength);
+            }
+            charRenderInfos.length = 0;
+        };
+        _proto._onTransformChanged = function _onTransformChanged(type) {
+            if (type & UITransformModifyFlags.Size || type & UITransformModifyFlags.Pivot) {
+                this._dirtyUpdateFlag |= 8;
+            }
+            UIRenderer1.prototype._onTransformChanged.call(this, type);
+            this._setDirtyFlagTrue(16);
+        };
+        _proto._isTextNoVisible = function _isTextNoVisible() {
+            var size = this._transformEntity.transform.size;
+            return this._text === "" || this._fontSize === 0 || this.enableWrapping && size.x <= 0 || this.overflowMode === engine.OverflowMode.Truncate && size.y <= 0;
+        };
+        _proto._buildChunk = function _buildChunk(textChunk, count) {
+            var _this_color = this.color, r = _this_color.r, g = _this_color.g, b = _this_color.b, a = _this_color.a;
+            var tempIndices = engine.CharRenderInfo.triangles;
+            var tempIndicesLength = tempIndices.length;
+            var subChunk = textChunk.subChunk = this._getChunkManager().allocateSubChunk(count * 4);
+            var vertices = subChunk.chunk.vertices;
+            var indices = subChunk.indices = [];
+            var charRenderInfos = textChunk.charRenderInfos;
+            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;
+                // Set indices
+                for(var j = 0; j < tempIndicesLength; ++j){
+                    indices[ii++] = tempIndices[j] + io;
+                }
+                // Set uv and color for vertices
+                for(var j1 = 0; j1 < 4; ++j1, vo += 9){
+                    var uv = charRenderInfo.uvs[j1];
+                    uv.copyToArray(vertices, vo);
+                    vertices[vo + 2] = r;
+                    vertices[vo + 3] = g;
+                    vertices[vo + 4] = b;
+                    vertices[vo + 5] = a;
+                }
+            }
+            return subChunk;
+        };
+        _proto._freeTextChunks = function _freeTextChunks() {
+            var textChunks = this._textChunks;
+            // @ts-ignore
+            var charRenderInfoPool = this.engine._charRenderInfoPool;
+            var manager = this._getChunkManager();
+            for(var i = 0, n = textChunks.length; i < n; ++i){
+                var textChunk = textChunks[i];
+                var charRenderInfos = textChunk.charRenderInfos;
+                for(var j = 0, m = charRenderInfos.length; j < m; ++j){
+                    charRenderInfoPool.return(charRenderInfos[j]);
+                }
+                charRenderInfos.length = 0;
+                manager.freeSubChunk(textChunk.subChunk);
+                textChunk.subChunk = null;
+                textChunk.texture = null;
+            }
+            textChunks.length = 0;
+        };
+        _create_class(Text, [
+            {
+                key: "text",
+                get: /**
+       * Rendering string for the Text.
+       */ function get() {
+                    return this._text;
+                },
+                set: function set(value) {
+                    value = value || "";
+                    if (this._text !== value) {
+                        this._text = value;
+                        this._setDirtyFlagTrue(25);
+                    }
+                }
+            },
+            {
+                key: "font",
+                get: /**
+       * The font of the Text.
+       */ function get() {
+                    return this._font;
+                },
+                set: function set(value) {
+                    var lastFont = this._font;
+                    if (lastFont !== value) {
+                        lastFont && this._addResourceReferCount(lastFont, -1);
+                        value && this._addResourceReferCount(value, 1);
+                        this._font = value;
+                        this._setDirtyFlagTrue(29);
+                    }
+                }
+            },
+            {
+                key: "fontSize",
+                get: /**
+       * The font size of the Text.
+       */ function get() {
+                    return this._fontSize;
+                },
+                set: function set(value) {
+                    if (this._fontSize !== value) {
+                        this._fontSize = value;
+                        this._setDirtyFlagTrue(29);
+                    }
+                }
+            },
+            {
+                key: "fontStyle",
+                get: /**
+       * The style of the font.
+       */ function get() {
+                    return this._fontStyle;
+                },
+                set: function set(value) {
+                    if (this.fontStyle !== value) {
+                        this._fontStyle = value;
+                        this._setDirtyFlagTrue(29);
+                    }
+                }
+            },
+            {
+                key: "lineSpacing",
+                get: /**
+       * The space between two lines (in pixels).
+       */ function get() {
+                    return this._lineSpacing;
+                },
+                set: function set(value) {
+                    if (this._lineSpacing !== value) {
+                        this._lineSpacing = value;
+                        this._setDirtyFlagTrue(25);
+                    }
+                }
+            },
+            {
+                key: "horizontalAlignment",
+                get: /**
+       * The horizontal alignment.
+       */ function get() {
+                    return this._horizontalAlignment;
+                },
+                set: function set(value) {
+                    if (this._horizontalAlignment !== value) {
+                        this._horizontalAlignment = value;
+                        this._setDirtyFlagTrue(25);
+                    }
+                }
+            },
+            {
+                key: "verticalAlignment",
+                get: /**
+       * The vertical alignment.
+       */ function get() {
+                    return this._verticalAlignment;
+                },
+                set: function set(value) {
+                    if (this._verticalAlignment !== value) {
+                        this._verticalAlignment = value;
+                        this._setDirtyFlagTrue(25);
+                    }
+                }
+            },
+            {
+                key: "enableWrapping",
+                get: /**
+       * Whether wrap text to next line when exceeds the width of the container.
+       */ function get() {
+                    return this._enableWrapping;
+                },
+                set: function set(value) {
+                    if (this._enableWrapping !== value) {
+                        this._enableWrapping = value;
+                        this._setDirtyFlagTrue(25);
+                    }
+                }
+            },
+            {
+                key: "overflowMode",
+                get: /**
+       * The overflow mode.
+       */ function get() {
+                    return this._overflowMode;
+                },
+                set: function set(value) {
+                    if (this._overflowMode !== value) {
+                        this._overflowMode = value;
+                        this._setDirtyFlagTrue(25);
+                    }
+                }
+            },
+            {
+                key: "maskLayer",
+                get: /**
+       * The mask layer the sprite renderer belongs to.
+       */ function get() {
+                    return this._maskLayer;
+                },
+                set: function set(value) {
+                    this._maskLayer = value;
+                }
+            },
+            {
+                key: "bounds",
+                get: /**
+       * The bounding volume of the TextRenderer.
+       */ function get() {
+                    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);
+                            this._updateBounds(this._bounds);
+                            this._setDirtyFlagFalse(engine.RendererUpdateFlags.WorldVolume);
+                        }
+                        return this._bounds;
+                    }
+                    this._isContainDirtyFlag(4) && this._resetSubFont();
+                    this._isContainDirtyFlag(8) && this._updateLocalData();
+                    this._isContainDirtyFlag(16) && this._updatePosition();
+                    this._isContainDirtyFlag(engine.RendererUpdateFlags.WorldVolume) && this._updateBounds(this._bounds);
+                    this._setDirtyFlagFalse(29);
+                    return this._bounds;
+                }
+            }
+        ]);
+        return Text;
+    }(exports.UIRenderer);
+    Text._textTextureProperty = engine.ShaderProperty.getByName("renderElement_TextTexture");
+    Text._worldPositions = [
+        new engine.Vector3(),
+        new engine.Vector3(),
+        new engine.Vector3(),
+        new engine.Vector3()
+    ];
+    Text._charRenderInfos = [];
+    __decorate([
+        engine.ignoreClone
+    ], Text.prototype, "_textChunks", void 0);
+    __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, "_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);
+    var TextChunk = function TextChunk() {
+        this.charRenderInfos = new Array();
+    };
+
+    /**
+     * The transition behavior of UIInteractive.
+     */ var Transition = /*#__PURE__*/ function() {
+        function Transition() {
+            this._duration = 0;
+            this._countDown = 0;
+            this._finalState = InteractiveState.Normal;
+        }
+        var _proto = Transition.prototype;
+        _proto.destroy = function destroy() {
+            var _this__interactive;
+            (_this__interactive = this._interactive) == null ? void 0 : _this__interactive.removeTransition(this);
+            this._target = null;
+        };
+        /**
+       * @internal
+       */ _proto._setState = function _setState(state, instant) {
+            this._finalState = state;
+            var value = this._getValueByState(state);
+            if (instant) {
+                this._countDown = 0;
+                this._initialValue = this._finalValue = value;
+            } else {
+                this._countDown = this._duration;
+                this._initialValue = this._getTargetValueCopy();
+                this._finalValue = value;
+            }
+            this._updateValue();
+        };
+        /**
+       * @internal
+       */ _proto._onUpdate = function _onUpdate(delta) {
+            if (this._countDown > 0) {
+                this._countDown -= delta;
+                this._updateValue();
+            }
+        };
+        _proto._onStateValueDirty = function _onStateValueDirty(state, preValue, curValue) {
+            // @ts-ignore
+            _instanceof(preValue, engine.ReferResource) && preValue._addReferCount(-1);
+            // @ts-ignore
+            _instanceof(curValue, engine.ReferResource) && curValue._addReferCount(1);
+            if (this._finalState === state) {
+                this._finalValue = curValue;
+                this._updateValue();
+            }
+        };
+        _proto._updateValue = function _updateValue() {
+            var _this__target;
+            var weight = this._duration ? 1 - this._countDown / this._duration : 1;
+            this._updateCurrentValue(this._initialValue, this._finalValue, weight);
+            ((_this__target = this._target) == null ? void 0 : _this__target.enabled) && this._applyValue(this._currentValue);
+        };
+        _proto._getValueByState = function _getValueByState(state) {
+            switch(state){
+                case InteractiveState.Normal:
+                    return this.normal;
+                case InteractiveState.Pressed:
+                    return this.pressed;
+                case InteractiveState.Hover:
+                    return this.hover;
+                case InteractiveState.Disable:
+                    return this.disabled;
+            }
+        };
+        _create_class(Transition, [
+            {
+                key: "normal",
+                get: /**
+       * The normal state of the transition.
+       */ function get() {
+                    return this._normal;
+                },
+                set: function set(value) {
+                    var preNormal = this._normal;
+                    if (preNormal !== value) {
+                        this._normal = value;
+                        this._onStateValueDirty(InteractiveState.Normal, preNormal, value);
+                    }
+                }
+            },
+            {
+                key: "pressed",
+                get: /**
+       * The pressed state of the transition.
+       */ function get() {
+                    return this._pressed;
+                },
+                set: function set(value) {
+                    var prePressed = this._pressed;
+                    if (prePressed !== value) {
+                        this._pressed = value;
+                        this._onStateValueDirty(InteractiveState.Pressed, prePressed, value);
+                    }
+                }
+            },
+            {
+                key: "hover",
+                get: /**
+       * The hover state of the transition.
+       */ function get() {
+                    return this._hover;
+                },
+                set: function set(value) {
+                    var preHover = this._hover;
+                    if (preHover !== value) {
+                        this._hover = value;
+                        this._onStateValueDirty(InteractiveState.Hover, preHover, value);
+                    }
+                }
+            },
+            {
+                key: "disabled",
+                get: /**
+       * The disabled state of the transition.
+       */ function get() {
+                    return this._disabled;
+                },
+                set: function set(value) {
+                    var preDisabled = this._disabled;
+                    if (preDisabled !== value) {
+                        this._disabled = value;
+                        this._onStateValueDirty(InteractiveState.Disable, preDisabled, value);
+                    }
+                }
+            },
+            {
+                key: "target",
+                get: /**
+       * The target of the transition.
+       */ function get() {
+                    return this._target;
+                },
+                set: function set(value) {
+                    if (this._target !== value) {
+                        this._target = value;
+                        (value == null ? void 0 : value.enabled) && this._applyValue(this._currentValue);
+                    }
+                }
+            },
+            {
+                key: "duration",
+                get: /**
+       * The duration of the transition.
+       */ function get() {
+                    return this._duration;
+                },
+                set: function set(value) {
+                    if (value < 0) value = 0;
+                    var preDuration = this._duration;
+                    if (preDuration !== value) {
+                        this._duration = value;
+                        if (this._countDown > 0) {
+                            this._countDown = value * (1 - this._countDown / preDuration);
+                            this._updateValue();
+                        }
+                    }
+                }
+            }
+        ]);
+        return Transition;
+    }();
+
+    /**
+     * Color transition.
+     */ var ColorTransition = /*#__PURE__*/ function(Transition) {
+        _inherits(ColorTransition, Transition);
+        function ColorTransition() {
+            var _this;
+            _this = Transition.call(this) || this, _this._color = new engine.Color();
+            _this._normal = new engine.Color(1, 1, 1, 1);
+            _this._hover = new engine.Color(245 / 255, 245 / 255, 245 / 255, 1);
+            _this._pressed = new engine.Color(200 / 255, 200 / 255, 200 / 255, 1);
+            _this._disabled = new engine.Color(200 / 255, 200 / 255, 200 / 255, 1);
+            _this._duration = 0.1;
+            _this._currentValue = new engine.Color();
+            _this._onNormalValueChanged = _this._onNormalValueChanged.bind(_this);
+            _this._onHoverValueChanged = _this._onHoverValueChanged.bind(_this);
+            _this._onPressedValueChanged = _this._onPressedValueChanged.bind(_this);
+            _this._onDisabledValueChanged = _this._onDisabledValueChanged.bind(_this);
+            // @ts-ignore
+            _this._normal._onValueChanged = _this._onNormalValueChanged;
+            // @ts-ignore
+            _this._hover._onValueChanged = _this._onHoverValueChanged;
+            // @ts-ignore
+            _this._pressed._onValueChanged = _this._onPressedValueChanged;
+            // @ts-ignore
+            _this._disabled._onValueChanged = _this._onDisabledValueChanged;
+            return _this;
+        }
+        var _proto = ColorTransition.prototype;
+        _proto._onNormalValueChanged = function _onNormalValueChanged() {
+            this._finalState === InteractiveState.Normal && this._updateValue();
+        };
+        _proto._onHoverValueChanged = function _onHoverValueChanged() {
+            this._finalState === InteractiveState.Hover && this._updateValue();
+        };
+        _proto._onPressedValueChanged = function _onPressedValueChanged() {
+            this._finalState === InteractiveState.Pressed && this._updateValue();
+        };
+        _proto._onDisabledValueChanged = function _onDisabledValueChanged() {
+            this._finalState === InteractiveState.Disable && this._updateValue();
+        };
+        _proto._getTargetValueCopy = function _getTargetValueCopy() {
+            var _this__target;
+            var color = this._color;
+            color.copyFrom(((_this__target = this._target) == null ? void 0 : _this__target.color) || this._normal);
+            return color;
+        };
+        _proto._updateCurrentValue = function _updateCurrentValue(srcValue, destValue, weight) {
+            if (weight >= 1) {
+                this._currentValue.copyFrom(destValue);
+            } else {
+                engine.Color.lerp(srcValue, destValue, weight, this._currentValue);
+            }
+        };
+        _proto._applyValue = function _applyValue(value) {
+            this._target.color = value;
+        };
+        return ColorTransition;
+    }(Transition);
+
+    /**
+     * Scale transition.
+     */ var ScaleTransition = /*#__PURE__*/ function(Transition) {
+        _inherits(ScaleTransition, Transition);
+        function ScaleTransition() {
+            var _this;
+            _this = Transition.call(this) || this;
+            _this._normal = 1;
+            _this._hover = 1;
+            _this._pressed = 1.2;
+            _this._disabled = 1;
+            _this._duration = 0.1;
+            return _this;
+        }
+        var _proto = ScaleTransition.prototype;
+        _proto._getTargetValueCopy = function _getTargetValueCopy() {
+            var _this__target;
+            return ((_this__target = this._target) == null ? void 0 : _this__target.entity.transform.scale.x) || this._normal;
+        };
+        _proto._updateCurrentValue = function _updateCurrentValue(srcValue, destValue, weight) {
+            this._currentValue = weight >= 1 ? destValue : (destValue - srcValue) * weight + srcValue;
+        };
+        _proto._applyValue = function _applyValue(value) {
+            this._target.entity.transform.setScale(value, value, value);
+        };
+        return ScaleTransition;
+    }(Transition);
+
+    /**
+     * Sprite transition.
+     */ var SpriteTransition = /*#__PURE__*/ function(Transition) {
+        _inherits(SpriteTransition, Transition);
+        function SpriteTransition() {
+            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;
+        };
+        _proto._updateCurrentValue = function _updateCurrentValue(srcValue, destValue, weight) {
+            this._currentValue = weight >= 1 ? destValue : srcValue;
+        };
+        _proto._applyValue = function _applyValue(value) {
+            this._target.sprite = value || this._normal;
+        };
+        return SpriteTransition;
+    }(Transition);
+
+    /**
+     * @internal
+     */ var UIHitResult = function UIHitResult() {
+        this.entity = null;
+        this.distance = 0;
+        this.point = new engine.Vector3();
+        this.normal = new engine.Vector3();
+        this.component = null;
+    };
+
+    exports.UIPointerEventEmitter = /*#__PURE__*/ function(PointerEventEmitter1) {
+        _inherits(UIPointerEventEmitter, PointerEventEmitter1);
+        function UIPointerEventEmitter() {
+            return PointerEventEmitter1.apply(this, arguments) || this;
+        }
+        var _proto = UIPointerEventEmitter.prototype;
+        _proto._init = function _init() {
+            this._hitResult = new UIHitResult();
+        };
+        _proto.processRaycast = function processRaycast(scenes, pointer) {
+            var ray = engine.PointerEventEmitter._tempRay;
+            var hitResult = this._hitResult;
+            var position = pointer.position;
+            var x = position.x, y = position.y;
+            for(var i = scenes.length - 1; i >= 0; i--){
+                var scene = scenes[i];
+                if (!scene.isActive || scene.destroyed) continue;
+                // @ts-ignore
+                var componentsManager = scene._componentsManager;
+                /** Overlay Canvas */ var canvasElements = componentsManager._overlayCanvases;
+                ray.origin.set(position.x, position.y, 1);
+                ray.direction.set(0, 0, -1);
+                for(var j = canvasElements.length - 1; j >= 0; j--){
+                    if (canvasElements.get(j).raycast(ray, hitResult)) {
+                        this._updateRaycast(hitResult.component, pointer);
+                        return;
+                    }
+                }
+                var cameras = componentsManager._activeCameras;
+                for(var j1 = cameras.length - 1; j1 >= 0; j1--){
+                    var camera = cameras.get(j1);
+                    if (camera.renderTarget) continue;
+                    var pixelViewport = camera.pixelViewport;
+                    if (x < pixelViewport.x || y < pixelViewport.y || x > pixelViewport.x + pixelViewport.width || y > pixelViewport.y + pixelViewport.height) {
+                        continue;
+                    }
+                    camera.screenPointToRay(pointer.position, ray);
+                    /** Other canvases */ var cameraPosition = camera.entity.transform.position;
+                    /** Sort by rendering order */ canvasElements = componentsManager._canvases;
+                    for(var k = 0, n = canvasElements.length; k < n; k++){
+                        canvasElements.get(k)._updateSortDistance(cameraPosition);
+                    }
+                    canvasElements.sort(function(a, b) {
+                        return a.sortOrder - b.sortOrder || a._sortDistance - b._sortDistance;
+                    });
+                    for(var k1 = 0, n1 = canvasElements.length; k1 < n1; k1++){
+                        canvasElements.get(k1)._canvasIndex = k1;
+                    }
+                    var farClipPlane = camera.farClipPlane;
+                    /** Post-rendering first detection */ for(var k2 = 0, n2 = canvasElements.length; k2 < n2; k2++){
+                        var canvas = canvasElements.get(k2);
+                        if (canvas.renderCamera !== camera) continue;
+                        if (canvas.raycast(ray, hitResult, farClipPlane)) {
+                            this._updateRaycast(hitResult.component, pointer);
+                            return;
+                        }
+                    }
+                    if (camera.clearFlags & engine.CameraClearFlags.Color) {
+                        this._updateRaycast(null);
+                        return;
+                    }
+                }
+            }
+        };
+        _proto.processDrag = function processDrag(pointer) {
+            if (this._draggedElement) {
+                this._bubble(this._composedPath(this._draggedElement, UIPointerEventEmitter._path0), pointer, this._fireDrag);
+            }
+        };
+        _proto.processDown = function processDown(pointer) {
+            var element = this._pressedElement = this._draggedElement = this._enteredElement;
+            if (element) {
+                var path = this._composedPath(element, UIPointerEventEmitter._path0);
+                this._bubble(path, pointer, this._fireDown);
+                this._bubble(path, pointer, this._fireBeginDrag);
+            }
+        };
+        _proto.processUp = function processUp(pointer) {
+            var liftedPath = UIPointerEventEmitter._path0;
+            var enteredElement = this._enteredElement;
+            if (enteredElement) {
+                this._composedPath(enteredElement, liftedPath);
+                this._bubble(liftedPath, pointer, this._fireUp);
+                if (this._pressedElement) {
+                    var pressedPath = this._composedPath(this._pressedElement, UIPointerEventEmitter._path1);
+                    var enterLength = liftedPath.length;
+                    var pressLength = pressedPath.length;
+                    var minLength = Math.min(enterLength, pressLength);
+                    var i = 0;
+                    for(; i < minLength; i++){
+                        if (liftedPath[enterLength - 1 - i] !== pressedPath[pressLength - 1 - i]) {
+                            break;
+                        }
+                    }
+                    var targetIndex = enterLength - i;
+                    var eventData = this._createEventData(pointer);
+                    for(var j = targetIndex; j < enterLength; j++){
+                        this._fireClick(liftedPath[j], eventData);
+                    }
+                    this._pressedElement = null;
+                }
+            }
+            if (this._draggedElement) {
+                this._bubble(this._composedPath(this._draggedElement, UIPointerEventEmitter._path1), pointer, this._fireEndDrag);
+                this._draggedElement = null;
+            }
+            if (enteredElement) {
+                this._bubble(liftedPath, pointer, this._fireDrop);
+            }
+        };
+        _proto.processLeave = function processLeave(pointer) {
+            var path = UIPointerEventEmitter._path0;
+            if (this._enteredElement) {
+                this._bubble(this._composedPath(this._enteredElement, path), pointer, this._fireExit);
+                this._enteredElement = null;
+            }
+            if (this._draggedElement) {
+                this._bubble(this._composedPath(this._draggedElement, path), pointer, this._fireEndDrag);
+                this._draggedElement = null;
+            }
+            this._pressedElement = null;
+        };
+        _proto.dispose = function dispose() {
+            this._enteredElement = this._pressedElement = this._draggedElement = null;
+        };
+        _proto._updateRaycast = function _updateRaycast(element, pointer) {
+            if (pointer === void 0) pointer = null;
+            var enteredElement = this._enteredElement;
+            if (element !== enteredElement) {
+                var prePath = this._composedPath(enteredElement, UIPointerEventEmitter._path0);
+                var curPath = this._composedPath(element, UIPointerEventEmitter._path1);
+                var preLength = prePath.length;
+                var curLength = curPath.length;
+                var minLength = Math.min(preLength, curLength);
+                var i = 0;
+                for(; i < minLength; i++){
+                    if (prePath[preLength - i - 1] !== curPath[curLength - i - 1]) {
+                        break;
+                    }
+                }
+                var eventData = this._createEventData(pointer);
+                for(var j = 0, n = preLength - i; j < n; j++){
+                    this._fireExit(prePath[j], eventData);
+                }
+                for(var j1 = 0, n1 = curLength - i; j1 < n1; j1++){
+                    this._fireEnter(curPath[j1], eventData);
+                }
+                this._enteredElement = element;
+            }
+        };
+        _proto._composedPath = function _composedPath(element, path) {
+            if (!element) {
+                path.length = 0;
+                return path;
+            }
+            var entity = path[0] = element.entity;
+            var i = 1;
+            var rootEntity = element._getRootCanvas().entity;
+            for(; i < UIPointerEventEmitter._MAX_PATH_DEPTH && !!entity && entity !== rootEntity; i++){
+                entity = path[i] = entity.parent;
+            }
+            path.length = i;
+            return path;
+        };
+        _proto._bubble = function _bubble(path, pointer, fireEvent) {
+            var length = path.length;
+            if (length <= 0) return;
+            var eventData = this._createEventData(pointer);
+            for(var i = 0; i < length; i++){
+                fireEvent(path[i], eventData);
+            }
+        };
+        return UIPointerEventEmitter;
+    }(engine.PointerEventEmitter);
+    exports.UIPointerEventEmitter._MAX_PATH_DEPTH = 2048;
+    exports.UIPointerEventEmitter._path0 = [];
+    exports.UIPointerEventEmitter._path1 = [];
+    exports.UIPointerEventEmitter = __decorate([
+        engine.registerPointerEventEmitter()
+    ], exports.UIPointerEventEmitter);
+
+    var EngineExtension = /*#__PURE__*/ function() {
+        function EngineExtension() {}
+        var _proto = EngineExtension.prototype;
+        _proto._getUIDefaultMaterial = function _getUIDefaultMaterial() {
+            if (!this._uiDefaultMaterial) {
+                var _Shader_find;
+                var shader = (_Shader_find = engine.Shader.find("ui")) != null ? _Shader_find : engine.Shader.create("ui", [
+                    new engine.ShaderPass("Forward", uiDefaultVs, uiDefaultFs, {
+                        pipelineStage: engine.PipelineStage.Forward
+                    })
+                ]);
+                // @ts-ignore
+                var material = new engine.Material(this, shader);
+                var renderState = material.renderState;
+                var target = renderState.blendState.targetBlendState;
+                target.enabled = true;
+                target.sourceColorBlendFactor = engine.BlendFactor.SourceAlpha;
+                target.destinationColorBlendFactor = engine.BlendFactor.OneMinusSourceAlpha;
+                target.sourceAlphaBlendFactor = engine.BlendFactor.One;
+                target.destinationAlphaBlendFactor = engine.BlendFactor.OneMinusSourceAlpha;
+                target.colorBlendOperation = target.alphaBlendOperation = engine.BlendOperation.Add;
+                renderState.depthState.writeEnabled = false;
+                renderState.rasterState.cullMode = engine.CullMode.Off;
+                renderState.renderQueueType = engine.RenderQueueType.Transparent;
+                material.isGCIgnored = true;
+                this._uiDefaultMaterial = material;
+            }
+            return this._uiDefaultMaterial;
+        };
+        return EngineExtension;
+    }();
+    var EntityExtension = /*#__PURE__*/ function() {
+        function EntityExtension() {
+            this._uiHierarchyVersion = 0;
+        }
+        var _proto = EntityExtension.prototype;
+        _proto._updateUIHierarchyVersion = function _updateUIHierarchyVersion(version) {
+            if (this._uiHierarchyVersion !== version) {
+                var // @ts-ignore
+                _this_parent;
+                this._uiHierarchyVersion = version;
+                (_this_parent = this.parent) == null ? void 0 : _this_parent._updateUIHierarchyVersion(version);
+            }
+        };
+        return EntityExtension;
+    }();
+    function ApplyMixins(derivedCtor, baseCtors) {
+        baseCtors.forEach(function(baseCtor) {
+            Object.getOwnPropertyNames(baseCtor.prototype).forEach(function(name) {
+                Object.defineProperty(derivedCtor.prototype, name, Object.getOwnPropertyDescriptor(baseCtor.prototype, name) || Object.create(null));
+            });
+        });
+    }
+    ApplyMixins(engine.Engine, [
+        EngineExtension
+    ]);
+    ApplyMixins(engine.Entity, [
+        EntityExtension
+    ]);
+    engine.ReflectionParser.registerCustomParseComponent("Text", /*#__PURE__*/ _async_to_generator(function(instance, item) {
+        var props;
+        return __generator(this, function(_state) {
+            props = item.props;
+            if (!props.font) {
+                // @ts-ignore
+                instance.font = Font.createFromOS(instance.engine, props.fontFamily || "Arial");
+            }
+            return [
+                2,
+                instance
+            ];
+        });
+    }));
+
+    exports.Button = Button;
+    exports.CanvasRenderMode = CanvasRenderMode;
+    exports.ColorTransition = ColorTransition;
+    exports.EngineExtension = EngineExtension;
+    exports.EntityExtension = EntityExtension;
+    exports.Image = Image;
+    exports.ResolutionAdaptationMode = ResolutionAdaptationMode;
+    exports.ScaleTransition = ScaleTransition;
+    exports.SpriteTransition = SpriteTransition;
+    exports.Text = Text;
+    exports.Transition = Transition;
+    exports.UIGroup = UIGroup;
+    exports.UITransform = UITransform;
+
+    Object.defineProperty(exports, '__esModule', { value: true });
+
+}));
+//# sourceMappingURL=browser.js.map