@galacean/engine-ui 2.0.0-alpha.2 → 2.0.0-alpha.20

package/dist/browser.js

@@ -4,92 +4,6 @@
     (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.Galacean = global.Galacean || {}, global.Galacean.UI = {}), global.Galacean));
 })(this, (function (exports, engine) { 'use strict';
 
-    function 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;
-    };
-
     function _defineProperties(target, props) {
         for (var i = 0; i < props.length; i++) {
             var descriptor = props[i];
@@ -134,6 +48,33 @@
         } else return left instanceof right;
     }
 
+    /******************************************************************************
+    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;
+    }
+
+    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 UIGroup = /*#__PURE__*/ function(Component) {
         _inherits(UIGroup, Component);
         function UIGroup(entity) {
@@ -296,12 +237,6 @@
     __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);
@@ -557,9 +492,9 @@
             this._updateWorldFlagWithParentRectChange(engine.TransformModifyFlags.WmWpWeWqWsWus);
         };
         // @ts-ignore
-        _proto._cloneTo = function _cloneTo(target, srcRoot, targetRoot) {
+        _proto._cloneTo = function _cloneTo(target) {
             // @ts-ignore
-            Transform.prototype._cloneTo.call(this, target, srcRoot, targetRoot);
+            Transform.prototype._cloneTo.call(this, target);
             var size = target._size, pivot = target._pivot;
             // @ts-ignore
             size._onValueChanged = pivot._onValueChanged = null;
@@ -1136,9 +1071,6 @@
     __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);
@@ -1148,9 +1080,6 @@
     __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);
@@ -1267,26 +1196,6 @@
                 transitions[i].destroy();
             }
         };
-        // @ts-ignore
-        _proto._cloneTo = function _cloneTo(target, srcRoot, targetRoot) {
-            var transitions = this._transitions;
-            for(var i = 0, n = transitions.length; i < n; i++){
-                var srcTransition = transitions[i];
-                var dstTransition = new transitions[i].constructor();
-                dstTransition.normal = srcTransition.normal;
-                dstTransition.pressed = srcTransition.pressed;
-                dstTransition.hover = srcTransition.hover;
-                dstTransition.disabled = srcTransition.disabled;
-                var transitionTarget = srcTransition.target;
-                if (transitionTarget) {
-                    var paths = UIInteractive._targetTempPath;
-                    // @ts-ignore
-                    var success = engine.Entity._getEntityHierarchyPath(srcRoot, transitionTarget.entity, paths);
-                    dstTransition.target = success ? engine.Entity._getEntityByHierarchyPath(targetRoot, paths).getComponent(transitionTarget.constructor) : transitionTarget;
-                }
-                target.addTransition(dstTransition);
-            }
-        };
         /**
        * @internal
        */ _proto._getRootCanvas = function _getRootCanvas() {
@@ -1397,10 +1306,6 @@
         ]);
         return UIInteractive;
     }(engine.Script);
-    UIInteractive._targetTempPath = new Array();
-    __decorate([
-        engine.ignoreClone
-    ], UIInteractive.prototype, "_rootCanvas", void 0);
     __decorate([
         engine.ignoreClone
     ], UIInteractive.prototype, "_indexInRootCanvas", void 0);
@@ -1410,9 +1315,6 @@
     __decorate([
         engine.ignoreClone
     ], UIInteractive.prototype, "_rootCanvasListeningEntities", void 0);
-    __decorate([
-        engine.ignoreClone
-    ], UIInteractive.prototype, "_group", void 0);
     __decorate([
         engine.ignoreClone
     ], UIInteractive.prototype, "_indexInGroup", void 0);
@@ -1429,7 +1331,7 @@
         engine.ignoreClone
     ], UIInteractive.prototype, "_globalInteractiveDirty", void 0);
     __decorate([
-        engine.ignoreClone
+        engine.deepClone
     ], UIInteractive.prototype, "_transitions", void 0);
     __decorate([
         engine.assignmentClone
@@ -1502,7 +1404,18 @@
         /**
        * @internal
        */ _proto._canRender = function _canRender(camera) {
-            return this._renderMode !== CanvasRenderMode.ScreenSpaceCamera || this._renderCamera === camera;
+            return this._realRenderMode !== CanvasRenderMode.ScreenSpaceCamera || this._camera === camera;
+        };
+        /**
+       * @internal
+       */ _proto._canDispatchEvent = function _canDispatchEvent(camera) {
+            var realMode = this._realRenderMode;
+            if (realMode === CanvasRenderMode.ScreenSpaceOverlay) {
+                return true;
+            }
+            var assignedCamera = this._camera;
+            // @ts-ignore
+            return !assignedCamera || !assignedCamera._phasedActiveInScene || assignedCamera === camera;
         };
         /**
        * @internal
@@ -1602,16 +1515,8 @@
         };
         /**
        * @internal
-       */ _proto._cloneTo = function _cloneTo(target, srcRoot, targetRoot) {
+       */ _proto._cloneTo = function _cloneTo(target) {
             target.renderMode = this._renderMode;
-            var renderCamera = this._renderCamera;
-            if (renderCamera) {
-                var paths = UICanvas._targetTempPath;
-                // @ts-ignore
-                var success = engine.Entity._getEntityHierarchyPath(srcRoot, renderCamera.entity, paths);
-                // @ts-ignore
-                target.renderCamera = success ? engine.Entity._getEntityByHierarchyPath(targetRoot, paths).getComponent(engine.Camera) : renderCamera;
-            }
         };
         _proto._getRenderers = function _getRenderers() {
             var _this = this, renderers = _this._orderedRenderers, entity = _this.entity;
@@ -1628,7 +1533,7 @@
             var transform = this.entity.transform;
             var realRenderMode = this._realRenderMode;
             if (realRenderMode === CanvasRenderMode.ScreenSpaceCamera) {
-                var cameraEntity = this._renderCamera.entity;
+                var cameraEntity = this._camera.entity;
                 if (!this._isSameOrChildEntity(cameraEntity)) {
                     var cameraTransform = cameraEntity.transform;
                     var cameraWorldPosition = cameraTransform.worldPosition, cameraWorldForward = cameraTransform.worldForward;
@@ -1649,9 +1554,9 @@
             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;
+                var camera = this._camera;
+                curHeight = camera.isOrthographic ? camera.orthographicSize * 2 : 2 * (Math.tan(engine.MathUtil.degreeToRadian(camera.fieldOfView * 0.5)) * this._distance);
+                curWidth = camera.aspectRatio * curHeight;
             } else {
                 var canvas = this.engine.canvas;
                 curHeight = canvas.height;
@@ -1721,7 +1626,7 @@
             return depth;
         };
         _proto._updateCameraObserver = function _updateCameraObserver() {
-            var camera = this._isRootCanvas && this._renderMode === CanvasRenderMode.ScreenSpaceCamera ? this._renderCamera : null;
+            var camera = this._isRootCanvas && this._renderMode === CanvasRenderMode.ScreenSpaceCamera ? this._camera : null;
             var preCamera = this._cameraObserver;
             if (preCamera !== camera) {
                 this._cameraObserver = camera;
@@ -1747,10 +1652,10 @@
                         this._adapterSizeInScreenSpace();
                         break;
                     case engine.CameraModifyFlags.FieldOfView:
-                        !this._renderCamera.isOrthographic && this._adapterSizeInScreenSpace();
+                        !this._camera.isOrthographic && this._adapterSizeInScreenSpace();
                         break;
                     case engine.CameraModifyFlags.OrthographicSize:
-                        this._renderCamera.isOrthographic && this._adapterSizeInScreenSpace();
+                        this._camera.isOrthographic && this._adapterSizeInScreenSpace();
                         break;
                     case engine.CameraModifyFlags.DisableInScene:
                         this._setRealRenderMode(CanvasRenderMode.ScreenSpaceOverlay);
@@ -1821,9 +1726,10 @@
         };
         _proto._getRealRenderMode = function _getRealRenderMode() {
             if (this._isRootCanvas) {
-                var _this__renderCamera;
+                var _this__camera;
                 var mode = this._renderMode;
-                if (mode === CanvasRenderMode.ScreenSpaceCamera && !((_this__renderCamera = this._renderCamera) == null ? void 0 : _this__renderCamera.enabled)) {
+                // @ts-ignore
+                if (mode === CanvasRenderMode.ScreenSpaceCamera && !((_this__camera = this._camera) == null ? void 0 : _this__camera._phasedActiveInScene)) {
                     return CanvasRenderMode.ScreenSpaceOverlay;
                 } else {
                     return mode;
@@ -1913,18 +1819,22 @@
                 }
             },
             {
-                key: "renderCamera",
+                key: "camera",
                 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`.
+       * The camera associated with this canvas.
+       * @remarks
+       * - `ScreenSpaceCamera` mode: Used for rendering adaptation. Defaults to `ScreenSpaceOverlay` if not assigned.
+       * - `WorldSpace` mode: Used for event detection. If not assigned, events are handled by the highest-priority camera.
        */ function get() {
-                    return this._renderCamera;
+                    return this._camera;
                 },
                 set: function set(value) {
-                    var preCamera = this._renderCamera;
+                    var preCamera = this._camera;
                     if (preCamera !== value) {
-                        value && this._isSameOrChildEntity(value.entity) && engine.Logger.warn("Camera entity matching or nested within the canvas entity disables canvas auto-adaptation in ScreenSpaceCamera mode.");
-                        this._renderCamera = value;
+                        if (value && this._isSameOrChildEntity(value.entity)) {
+                            engine.Logger.warn("Camera entity matching or nested within the canvas entity disables canvas auto-adaptation in ScreenSpaceCamera mode.");
+                        }
+                        this._camera = value;
                         this._updateCameraObserver();
                         var preRenderMode = this._realRenderMode;
                         var curRenderMode = this._getRealRenderMode();
@@ -1939,6 +1849,17 @@
                     }
                 }
             },
+            {
+                key: "renderCamera",
+                get: /**
+       * @deprecated Use {@link camera} instead.
+       */ function get() {
+                    return this.camera;
+                },
+                set: function set(value) {
+                    this.camera = value;
+                }
+            },
             {
                 key: "resolutionAdaptationMode",
                 get: /**
@@ -1992,16 +1913,12 @@
         return UICanvas;
     }(engine.Component);
     /** @internal */ exports.UICanvas._hierarchyCounter = 1;
-    exports.UICanvas._targetTempPath = [];
     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);
@@ -2032,12 +1949,6 @@
     __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.assignmentClone
     ], exports.UICanvas.prototype, "_resolutionAdaptationMode", void 0);
@@ -2098,45 +2009,35 @@
         _inherits(Button, UIInteractive);
         function Button() {
             var _this;
-            _this = UIInteractive.apply(this, arguments) || this, _this._listeners = new engine.SafeLoopArray();
+            _this = UIInteractive.apply(this, arguments) || this, /** Signal emitted when the button is clicked. */ _this.onClick = new engine.Signal();
             return _this;
         }
         var _proto = Button.prototype;
+        _proto.onPointerClick = function onPointerClick(event) {
+            if (!this._getGlobalInteractive()) return;
+            this.onClick.invoke(event);
+        };
+        _proto.onDestroy = function onDestroy() {
+            UIInteractive.prototype.onDestroy.call(this);
+            this.onClick.removeAll();
+        };
         /**
        * Add a listening function for click.
-       * @param listener - The listening function
+       * @deprecated Use `onClick.on(listener, context)` instead.
        */ _proto.addClicked = function addClicked(listener) {
-            this._listeners.push({
-                fn: listener
-            });
+            this.onClick.on(listener);
         };
         /**
        * Remove a listening function of click.
-       * @param listener - The listening function
+       * @deprecated Use `onClick.off(listener, context)` instead.
        */ _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;
-            });
+            this.onClick.off(listener);
         };
         return Button;
     }(UIInteractive);
     __decorate([
-        engine.ignoreClone
-    ], Button.prototype, "_listeners", void 0);
+        engine.deepClone
+    ], Button.prototype, "onClick", void 0);
 
     /**
      * UI element that renders an image.
@@ -2146,6 +2047,7 @@
             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;
+            // @ts-ignore
             _this.setMaterial(_this._engine._getUIDefaultMaterial());
             _this._onSpriteChange = _this._onSpriteChange.bind(_this);
             return _this;
@@ -2165,9 +2067,9 @@
         };
         /**
        * @internal
-       */ _proto._cloneTo = function _cloneTo(target, srcRoot, targetRoot) {
+       */ _proto._cloneTo = function _cloneTo(target) {
             // @ts-ignore
-            UIRenderer1.prototype._cloneTo.call(this, target, srcRoot, targetRoot);
+            UIRenderer1.prototype._cloneTo.call(this, target);
             target.sprite = this._sprite;
             target.drawMode = this._drawMode;
         };
@@ -2197,6 +2099,7 @@
             }
             // @todo: This question needs to be raised rather than hidden.
             if (material.destroyed) {
+                // @ts-ignore
                 material = this._engine._getUIDefaultMaterial();
             }
             var alpha = this._getGlobalAlpha();
@@ -2404,7 +2307,7 @@
         _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;
+            _this = UIRenderer1.call(this, entity) || this, _this._textChunks = Array(), _this._subFont = null, _this._text = "", _this._localBounds = new engine.BoundingBox(), _this._font = null, _this._fontSize = 24, _this._fontStyle = engine.FontStyle.None, _this._lineSpacing = 0, _this._characterSpacing = 0, _this._horizontalAlignment = engine.TextHorizontalAlignment.Center, _this._verticalAlignment = engine.TextVerticalAlignment.Center, _this._enableWrapping = false, _this._overflowMode = engine.OverflowMode.Overflow;
             var engine$1 = _this.engine;
             // @ts-ignore
             _this.font = engine$1._textDefaultFont;
@@ -2427,9 +2330,9 @@
             this._subFont && (this._subFont = null);
         };
         // @ts-ignore
-        _proto._cloneTo = function _cloneTo(target, srcRoot, targetRoot) {
+        _proto._cloneTo = function _cloneTo(target) {
             // @ts-ignore
-            UIRenderer1.prototype._cloneTo.call(this, target, srcRoot, targetRoot);
+            UIRenderer1.prototype._cloneTo.call(this, target);
             target.font = this._font;
             target._subFont = this._subFont;
         };
@@ -2482,7 +2385,7 @@
             var canvas = this._getRootCanvas();
             if (this._isContainDirtyFlag(8)) {
                 this._updateLocalData();
-                this._setDirtyFlagTrue(8);
+                this._setDirtyFlagFalse(8);
             }
             if (this._isContainDirtyFlag(16)) {
                 this._updatePosition();
@@ -2581,7 +2484,8 @@
             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 characterSpacing = this._characterSpacing * this._fontSize;
+            var textMetrics = this.enableWrapping ? engine.TextUtils.measureTextWithWrap(this, rendererWidth * pixelsPerResolution, rendererHeight * pixelsPerResolution, this._lineSpacing * this._fontSize, characterSpacing) : engine.TextUtils.measureTextWithoutWrap(this, rendererHeight * pixelsPerResolution, this._lineSpacing * this._fontSize, characterSpacing);
             var height = textMetrics.height, lines = textMetrics.lines, lineWidths = textMetrics.lineWidths, lineHeight = textMetrics.lineHeight, lineMaxSizes = textMetrics.lineMaxSizes;
             // @ts-ignore
             var charRenderInfoPool = this.engine._charRenderInfoPool;
@@ -2653,7 +2557,7 @@
                                 j === firstRow && (minX = Math.min(minX, left));
                                 maxX = Math.max(maxX, right);
                             }
-                            startX += charInfo.xAdvance + charInfo.offsetX;
+                            startX += charInfo.xAdvance + characterSpacing;
                         }
                     }
                     startY -= lineHeight;
@@ -2713,7 +2617,7 @@
         };
         _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 || !this._getRootCanvas();
+            return !this._font || this._text === "" || this._fontSize === 0 || this.enableWrapping && size.x <= 0 || this.overflowMode === engine.OverflowMode.Truncate && size.y <= 0 || !this._getRootCanvas();
         };
         _proto._buildChunk = function _buildChunk(textChunk, count) {
             var _this_color = this.color, r = _this_color.r, g = _this_color.g, b = _this_color.b, a = _this_color.a;
@@ -2825,7 +2729,7 @@
             {
                 key: "lineSpacing",
                 get: /**
-       * The space between two lines (in pixels).
+       * The space between two lines, in em (ratio of fontSize).
        */ function get() {
                     return this._lineSpacing;
                 },
@@ -2836,6 +2740,20 @@
                     }
                 }
             },
+            {
+                key: "characterSpacing",
+                get: /**
+       * The space between two characters, in em (ratio of fontSize).
+       */ function get() {
+                    return this._characterSpacing;
+                },
+                set: function set(value) {
+                    if (this._characterSpacing !== value) {
+                        this._characterSpacing = value;
+                        this._setDirtyFlagTrue(25);
+                    }
+                }
+            },
             {
                 key: "horizontalAlignment",
                 get: /**
@@ -2961,6 +2879,9 @@
     __decorate([
         engine.assignmentClone
     ], Text.prototype, "_lineSpacing", void 0);
+    __decorate([
+        engine.assignmentClone
+    ], Text.prototype, "_characterSpacing", void 0);
     __decorate([
         engine.assignmentClone
     ], Text.prototype, "_horizontalAlignment", void 0);
@@ -3378,7 +3299,7 @@
                     // Post-rendering first detection
                     for(var k2 = 0, n2 = canvasElements.length; k2 < n2; k2++){
                         var canvas = canvasElements.get(k2);
-                        if (!canvas._canRender(camera)) continue;
+                        if (!canvas._canDispatchEvent(camera)) continue;
                         if (canvas._raycast(ray, hitResult, farClipPlane)) {
                             this._updateRaycast(hitResult.component, pointer);
                             return;
@@ -3605,20 +3526,6 @@
     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 = engine.Font.createFromOS(instance.engine, props.fontFamily || "Arial");
-            }
-            return [
-                2,
-                instance
-            ];
-        });
-    }));
     /**
      * Register GUI components for the editor.
      */ function registerGUI() {