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

package/dist/browser.js

@@ -1502,7 +1502,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
@@ -1604,13 +1615,13 @@
        * @internal
        */ _proto._cloneTo = function _cloneTo(target, srcRoot, targetRoot) {
             target.renderMode = this._renderMode;
-            var renderCamera = this._renderCamera;
-            if (renderCamera) {
+            var camera = this._camera;
+            if (camera) {
                 var paths = UICanvas._targetTempPath;
                 // @ts-ignore
-                var success = engine.Entity._getEntityHierarchyPath(srcRoot, renderCamera.entity, paths);
+                var success = engine.Entity._getEntityHierarchyPath(srcRoot, camera.entity, paths);
                 // @ts-ignore
-                target.renderCamera = success ? engine.Entity._getEntityByHierarchyPath(targetRoot, paths).getComponent(engine.Camera) : renderCamera;
+                target.camera = success ? engine.Entity._getEntityByHierarchyPath(targetRoot, paths).getComponent(engine.Camera) : camera;
             }
         };
         _proto._getRenderers = function _getRenderers() {
@@ -1628,7 +1639,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 +1660,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 +1732,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 +1758,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 +1832,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 +1925,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 +1955,17 @@
                     }
                 }
             },
+            {
+                key: "renderCamera",
+                get: /**
+       * @deprecated Use {@link camera} instead.
+       */ function get() {
+                    return this.camera;
+                },
+                set: function set(value) {
+                    this.camera = value;
+                }
+            },
             {
                 key: "resolutionAdaptationMode",
                 get: /**
@@ -2034,7 +2061,7 @@
     ], exports.UICanvas.prototype, "_renderMode", void 0);
     __decorate([
         engine.ignoreClone
-    ], exports.UICanvas.prototype, "_renderCamera", void 0);
+    ], exports.UICanvas.prototype, "_camera", void 0);
     __decorate([
         engine.ignoreClone
     ], exports.UICanvas.prototype, "_cameraObserver", void 0);
@@ -2146,6 +2173,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;
@@ -2197,6 +2225,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 +2433,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;
@@ -2581,7 +2610,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 +2683,7 @@
                                 j === firstRow && (minX = Math.min(minX, left));
                                 maxX = Math.max(maxX, right);
                             }
-                            startX += charInfo.xAdvance + charInfo.offsetX;
+                            startX += charInfo.xAdvance + characterSpacing;
                         }
                     }
                     startY -= lineHeight;
@@ -2825,7 +2855,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 +2866,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 +3005,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 +3425,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;