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

package/dist/module.js

@@ -1,90 +1,4 @@
-import { EntityModifyFlags, ignoreClone, assignmentClone, DisorderedArray, Component, TransformModifyFlags, Transform, deepClone, Vector2, Rect, MathUtil, Vector3, Matrix, Plane, ShaderProperty, dependentComponents, DependentMode, BatchUtils, ShaderMacroCollection, Renderer, Vector4, Color, RendererUpdateFlags, Entity, Script, Camera, CameraModifyFlags, Logger, SafeLoopArray, SpriteDrawMode, RenderQueueFlags, SpriteModifyFlags, SpriteTileMode, TiledSpriteAssembler, SlicedSpriteAssembler, SimpleSpriteAssembler, BoundingBox, ShaderData, ShaderDataGroup, TextUtils, Engine, TextVerticalAlignment, TextHorizontalAlignment, OverflowMode, CharRenderInfo, FontStyle, ReferResource, registerPointerEventEmitter, PointerEventEmitter, CameraClearFlags, ReflectionParser, Material, BlendFactor, BlendOperation, CullMode, RenderQueueType, Loader, Shader, ShaderPass, PipelineStage, Font } from '@galacean/engine';
-
-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;
-};
+import { EntityModifyFlags, ignoreClone, assignmentClone, DisorderedArray, Component, TransformModifyFlags, Transform, deepClone, Vector2, Rect, MathUtil, Vector3, Matrix, Plane, ShaderProperty, dependentComponents, DependentMode, BatchUtils, ShaderMacroCollection, Renderer, Vector4, Color, RendererUpdateFlags, Script, CameraModifyFlags, Logger, Signal, SpriteDrawMode, RenderQueueFlags, SpriteModifyFlags, SpriteTileMode, TiledSpriteAssembler, SlicedSpriteAssembler, SimpleSpriteAssembler, BoundingBox, ShaderData, ShaderDataGroup, TextUtils, Engine, TextVerticalAlignment, TextHorizontalAlignment, OverflowMode, CharRenderInfo, FontStyle, ReferResource, registerPointerEventEmitter, PointerEventEmitter, CameraClearFlags, Material, BlendFactor, BlendOperation, CullMode, RenderQueueType, Entity, Loader, Shader, ShaderPass, PipelineStage } from '@galacean/engine';
 
 function _defineProperties(target, props) {
     for (var i = 0; i < props.length; i++) {
@@ -130,6 +44,33 @@ function _instanceof(left, right) {
     } 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) {
@@ -292,12 +233,6 @@ __decorate([
 __decorate([
     ignoreClone
 ], UIGroup.prototype, "_indexInRootCanvas", void 0);
-__decorate([
-    ignoreClone
-], UIGroup.prototype, "_group", void 0);
-__decorate([
-    ignoreClone
-], UIGroup.prototype, "_rootCanvas", void 0);
 __decorate([
     ignoreClone
 ], UIGroup.prototype, "_disorderedElements", void 0);
@@ -553,9 +488,9 @@ var Utils = /*#__PURE__*/ function() {
         this._updateWorldFlagWithParentRectChange(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;
@@ -1132,9 +1067,6 @@ var UIRenderer = /*#__PURE__*/ function(Renderer) {
 __decorate([
     deepClone
 ], UIRenderer.prototype, "raycastPadding", void 0);
-__decorate([
-    ignoreClone
-], UIRenderer.prototype, "_rootCanvas", void 0);
 __decorate([
     ignoreClone
 ], UIRenderer.prototype, "_indexInRootCanvas", void 0);
@@ -1144,9 +1076,6 @@ __decorate([
 __decorate([
     ignoreClone
 ], UIRenderer.prototype, "_rootCanvasListeningEntities", void 0);
-__decorate([
-    ignoreClone
-], UIRenderer.prototype, "_group", void 0);
 __decorate([
     ignoreClone
 ], UIRenderer.prototype, "_indexInGroup", void 0);
@@ -1263,26 +1192,6 @@ UIRenderer = __decorate([
             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 = Entity._getEntityHierarchyPath(srcRoot, transitionTarget.entity, paths);
-                dstTransition.target = success ? Entity._getEntityByHierarchyPath(targetRoot, paths).getComponent(transitionTarget.constructor) : transitionTarget;
-            }
-            target.addTransition(dstTransition);
-        }
-    };
     /**
    * @internal
    */ _proto._getRootCanvas = function _getRootCanvas() {
@@ -1393,10 +1302,6 @@ UIRenderer = __decorate([
     ]);
     return UIInteractive;
 }(Script);
-UIInteractive._targetTempPath = new Array();
-__decorate([
-    ignoreClone
-], UIInteractive.prototype, "_rootCanvas", void 0);
 __decorate([
     ignoreClone
 ], UIInteractive.prototype, "_indexInRootCanvas", void 0);
@@ -1406,9 +1311,6 @@ __decorate([
 __decorate([
     ignoreClone
 ], UIInteractive.prototype, "_rootCanvasListeningEntities", void 0);
-__decorate([
-    ignoreClone
-], UIInteractive.prototype, "_group", void 0);
 __decorate([
     ignoreClone
 ], UIInteractive.prototype, "_indexInGroup", void 0);
@@ -1425,7 +1327,7 @@ __decorate([
     ignoreClone
 ], UIInteractive.prototype, "_globalInteractiveDirty", void 0);
 __decorate([
-    ignoreClone
+    deepClone
 ], UIInteractive.prototype, "_transitions", void 0);
 __decorate([
     assignmentClone
@@ -1498,7 +1400,18 @@ var UICanvas = /*#__PURE__*/ function(Component) {
     /**
    * @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
@@ -1598,16 +1511,8 @@ var UICanvas = /*#__PURE__*/ function(Component) {
     };
     /**
    * @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 = Entity._getEntityHierarchyPath(srcRoot, renderCamera.entity, paths);
-            // @ts-ignore
-            target.renderCamera = success ? Entity._getEntityByHierarchyPath(targetRoot, paths).getComponent(Camera) : renderCamera;
-        }
     };
     _proto._getRenderers = function _getRenderers() {
         var _this = this, renderers = _this._orderedRenderers, entity = _this.entity;
@@ -1624,7 +1529,7 @@ var UICanvas = /*#__PURE__*/ function(Component) {
         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;
@@ -1645,9 +1550,9 @@ var UICanvas = /*#__PURE__*/ function(Component) {
         var curWidth;
         var curHeight;
         if (realRenderMode === CanvasRenderMode.ScreenSpaceCamera) {
-            var renderCamera = this._renderCamera;
-            curHeight = renderCamera.isOrthographic ? renderCamera.orthographicSize * 2 : 2 * (Math.tan(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(MathUtil.degreeToRadian(camera.fieldOfView * 0.5)) * this._distance);
+            curWidth = camera.aspectRatio * curHeight;
         } else {
             var canvas = this.engine.canvas;
             curHeight = canvas.height;
@@ -1717,7 +1622,7 @@ var UICanvas = /*#__PURE__*/ function(Component) {
         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;
@@ -1743,10 +1648,10 @@ var UICanvas = /*#__PURE__*/ function(Component) {
                     this._adapterSizeInScreenSpace();
                     break;
                 case CameraModifyFlags.FieldOfView:
-                    !this._renderCamera.isOrthographic && this._adapterSizeInScreenSpace();
+                    !this._camera.isOrthographic && this._adapterSizeInScreenSpace();
                     break;
                 case CameraModifyFlags.OrthographicSize:
-                    this._renderCamera.isOrthographic && this._adapterSizeInScreenSpace();
+                    this._camera.isOrthographic && this._adapterSizeInScreenSpace();
                     break;
                 case CameraModifyFlags.DisableInScene:
                     this._setRealRenderMode(CanvasRenderMode.ScreenSpaceOverlay);
@@ -1817,9 +1722,10 @@ var UICanvas = /*#__PURE__*/ function(Component) {
     };
     _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;
@@ -1909,18 +1815,22 @@ var UICanvas = /*#__PURE__*/ function(Component) {
             }
         },
         {
-            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) && 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)) {
+                        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();
@@ -1935,6 +1845,17 @@ var UICanvas = /*#__PURE__*/ function(Component) {
                 }
             }
         },
+        {
+            key: "renderCamera",
+            get: /**
+   * @deprecated Use {@link camera} instead.
+   */ function get() {
+                return this.camera;
+            },
+            set: function set(value) {
+                this.camera = value;
+            }
+        },
         {
             key: "resolutionAdaptationMode",
             get: /**
@@ -1988,16 +1909,12 @@ var UICanvas = /*#__PURE__*/ function(Component) {
     return UICanvas;
 }(Component);
 /** @internal */ UICanvas._hierarchyCounter = 1;
-UICanvas._targetTempPath = [];
 UICanvas._tempGroupAbleList = [];
 UICanvas._tempVec3 = new Vector3();
 UICanvas._tempMat = new Matrix();
 __decorate([
     ignoreClone
 ], UICanvas.prototype, "_canvasIndex", void 0);
-__decorate([
-    ignoreClone
-], UICanvas.prototype, "_rootCanvas", void 0);
 __decorate([
     ignoreClone
 ], UICanvas.prototype, "_indexInRootCanvas", void 0);
@@ -2028,12 +1945,6 @@ __decorate([
 __decorate([
     ignoreClone
 ], UICanvas.prototype, "_renderMode", void 0);
-__decorate([
-    ignoreClone
-], UICanvas.prototype, "_renderCamera", void 0);
-__decorate([
-    ignoreClone
-], UICanvas.prototype, "_cameraObserver", void 0);
 __decorate([
     assignmentClone
 ], UICanvas.prototype, "_resolutionAdaptationMode", void 0);
@@ -2094,45 +2005,35 @@ var Button = /*#__PURE__*/ function(UIInteractive) {
     _inherits(Button, UIInteractive);
     function Button() {
         var _this;
-        _this = UIInteractive.apply(this, arguments) || this, _this._listeners = new SafeLoopArray();
+        _this = UIInteractive.apply(this, arguments) || this, /** Signal emitted when the button is clicked. */ _this.onClick = new 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([
-    ignoreClone
-], Button.prototype, "_listeners", void 0);
+    deepClone
+], Button.prototype, "onClick", void 0);
 
 /**
  * UI element that renders an image.
@@ -2142,6 +2043,7 @@ __decorate([
         var _this;
         _this = UIRenderer1.call(this, entity) || this, _this._sprite = null, _this._tileMode = SpriteTileMode.Continuous, _this._tiledAdaptiveThreshold = 0.5;
         _this.drawMode = SpriteDrawMode.Simple;
+        // @ts-ignore
         _this.setMaterial(_this._engine._getUIDefaultMaterial());
         _this._onSpriteChange = _this._onSpriteChange.bind(_this);
         return _this;
@@ -2161,9 +2063,9 @@ __decorate([
     };
     /**
    * @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;
     };
@@ -2193,6 +2095,7 @@ __decorate([
         }
         // @todo: This question needs to be raised rather than hidden.
         if (material.destroyed) {
+            // @ts-ignore
             material = this._engine._getUIDefaultMaterial();
         }
         var alpha = this._getGlobalAlpha();
@@ -2400,7 +2303,7 @@ __decorate([
     _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 BoundingBox(), _this._font = null, _this._fontSize = 24, _this._fontStyle = FontStyle.None, _this._lineSpacing = 0, _this._horizontalAlignment = TextHorizontalAlignment.Center, _this._verticalAlignment = TextVerticalAlignment.Center, _this._enableWrapping = false, _this._overflowMode = OverflowMode.Overflow;
+        _this = UIRenderer1.call(this, entity) || this, _this._textChunks = Array(), _this._subFont = null, _this._text = "", _this._localBounds = new BoundingBox(), _this._font = null, _this._fontSize = 24, _this._fontStyle = FontStyle.None, _this._lineSpacing = 0, _this._characterSpacing = 0, _this._horizontalAlignment = TextHorizontalAlignment.Center, _this._verticalAlignment = TextVerticalAlignment.Center, _this._enableWrapping = false, _this._overflowMode = OverflowMode.Overflow;
         var engine = _this.engine;
         // @ts-ignore
         _this.font = engine._textDefaultFont;
@@ -2423,9 +2326,9 @@ __decorate([
         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;
     };
@@ -2478,7 +2381,7 @@ __decorate([
         var canvas = this._getRootCanvas();
         if (this._isContainDirtyFlag(8)) {
             this._updateLocalData();
-            this._setDirtyFlagTrue(8);
+            this._setDirtyFlagFalse(8);
         }
         if (this._isContainDirtyFlag(16)) {
             this._updatePosition();
@@ -2577,7 +2480,8 @@ __decorate([
         var rendererHeight = size.y;
         var offsetWidth = rendererWidth * (0.5 - pivot.x);
         var offsetHeight = rendererHeight * (0.5 - pivot.y);
-        var textMetrics = this.enableWrapping ? TextUtils.measureTextWithWrap(this, rendererWidth * pixelsPerResolution, rendererHeight * pixelsPerResolution, this._lineSpacing * pixelsPerResolution) : TextUtils.measureTextWithoutWrap(this, rendererHeight * pixelsPerResolution, this._lineSpacing * pixelsPerResolution);
+        var characterSpacing = this._characterSpacing * this._fontSize;
+        var textMetrics = this.enableWrapping ? TextUtils.measureTextWithWrap(this, rendererWidth * pixelsPerResolution, rendererHeight * pixelsPerResolution, this._lineSpacing * this._fontSize, characterSpacing) : 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;
@@ -2649,7 +2553,7 @@ __decorate([
                             j === firstRow && (minX = Math.min(minX, left));
                             maxX = Math.max(maxX, right);
                         }
-                        startX += charInfo.xAdvance + charInfo.offsetX;
+                        startX += charInfo.xAdvance + characterSpacing;
                     }
                 }
                 startY -= lineHeight;
@@ -2709,7 +2613,7 @@ __decorate([
     };
     _proto._isTextNoVisible = function _isTextNoVisible() {
         var size = this._transformEntity.transform.size;
-        return this._text === "" || this._fontSize === 0 || this.enableWrapping && size.x <= 0 || this.overflowMode === OverflowMode.Truncate && size.y <= 0 || !this._getRootCanvas();
+        return !this._font || this._text === "" || this._fontSize === 0 || this.enableWrapping && size.x <= 0 || this.overflowMode === 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;
@@ -2821,7 +2725,7 @@ __decorate([
         {
             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;
             },
@@ -2832,6 +2736,20 @@ __decorate([
                 }
             }
         },
+        {
+            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: /**
@@ -2957,6 +2875,9 @@ __decorate([
 __decorate([
     assignmentClone
 ], Text.prototype, "_lineSpacing", void 0);
+__decorate([
+    assignmentClone
+], Text.prototype, "_characterSpacing", void 0);
 __decorate([
     assignmentClone
 ], Text.prototype, "_horizontalAlignment", void 0);
@@ -3374,7 +3295,7 @@ var UIPointerEventEmitter = /*#__PURE__*/ function(PointerEventEmitter1) {
                 // 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;
@@ -3601,20 +3522,6 @@ ApplyMixins(Engine, [
 ApplyMixins(Entity, [
     EntityExtension
 ]);
-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
-        ];
-    });
-}));
 /**
  * Register GUI components for the editor.
  */ function registerGUI() {