UI subsystem additions

cc.config.json

@@ -252,6 +252,7 @@
                 "cocos/render-scene/scene/submodel.ts": "cocos/render-scene/scene/submodel.jsb.ts",
                 "cocos/render-scene/scene/index.ts": "cocos/render-scene/scene/index.jsb.ts",
                 "cocos/render-scene/scene/reflection-probe.ts": "cocos/render-scene/scene/reflection-probe.jsb.ts",
+                "cocos/2d/renderer/batcher-2d.ts": "cocos/2d/renderer/batcher-2d.jsb.ts",
                 "cocos/2d/renderer/native-2d.ts": "cocos/2d/renderer/native-2d.jsb.ts",
                 "cocos/gfx/base/pipeline-state.ts": "cocos/gfx/base/pipeline-state.jsb.ts",
                 "cocos/gfx/base/pipeline-sub-state.ts": "cocos/gfx/base/pipeline-sub-state.jsb.ts",

cocos/2d/components/label.ts

@@ -40,6 +40,8 @@
 import { TextStyle } from '../assembler/label/text-style';
 import { TextLayout } from '../assembler/label/text-layout';
 import { TextOutputLayoutData, TextOutputRenderData } from '../assembler/label/text-output-data';
+import { TransformBit } from '../../scene-graph';
+import { uiLayoutManager } from '../framework/ui-layout-manager';
 
 const tempColor = Color.WHITE.clone();
 /**
@@ -230,6 +232,7 @@
         }
 
         this._string = value;
+        this._markLayoutDirty();
         this.markForUpdateRenderData();
     }
 
@@ -252,6 +255,7 @@
         }
 
         this._horizontalAlign = value;
+        this._markLayoutDirty();
         this.markForUpdateRenderData();
     }
 
@@ -274,6 +278,7 @@
         }
 
         this._verticalAlign = value;
+        this._markLayoutDirty();
         this.markForUpdateRenderData();
     }
 
@@ -309,6 +314,7 @@
         }
 
         this._fontSize = value;
+        this._markLayoutDirty();
         this.markForUpdateRenderData();
     }
 
@@ -330,6 +336,7 @@
         }
 
         this._lineHeight = value;
+        this._markLayoutDirty();
         this.markForUpdateRenderData();
     }
 
@@ -340,7 +347,7 @@
      * @zh
      * 文本字符之间的间距。仅在使用 BMFont 位图字体时生效。
      */
     @visible(function (this: Label) {
         return !this._isSystemFontUsed && this._font instanceof BitmapFont;
     })
     @displayOrder(9)
@@ -354,6 +361,7 @@
         }
 
         this._spacingX = value;
+        this._markLayoutDirty();
         this.markForUpdateRenderData();
     }
 
@@ -376,6 +384,7 @@
         }
 
         this._overflow = value;
+        this._markLayoutDirty();
         this.markForUpdateRenderData();
     }
 
@@ -397,6 +406,7 @@
         }
 
         this._enableWrapText = value;
+        this._markLayoutDirty();
         this.markForUpdateRenderData();
     }
 
@@ -432,6 +442,7 @@
             this.font = null;
         }
         this._flushAssembler();
+        this._markLayoutDirty();
         this.markForUpdateRenderData();
     }
 
@@ -443,7 +454,7 @@
      * 文本字体名称, 只在 useSystemFont 属性为 true 的时候生效。
      */
     @displayOrder(13)
     @visible(function (this: Label) { return this._isSystemFontUsed; })
     @tooltip('i18n:label.font_family')
     get fontFamily (): string {
         return this._fontFamily;
@@ -454,6 +465,7 @@
         }
 
         this._fontFamily = value;
+        this._markLayoutDirty();
         this.markForUpdateRenderData();
     }
 
@@ -466,7 +478,7 @@
      */
     @type(Font)
     @displayOrder(13)
     @visible(function (this: Label) { return !this._isSystemFontUsed; })
     @tooltip('i18n:label.font')
     get font (): Font | null {
         // return this._N$file;
@@ -492,6 +504,7 @@
         this.destroyRenderData();
 
         this._fontAtlas = null;
+        this._markLayoutDirty();
         this.updateRenderData(true);
     }
 
@@ -521,6 +534,7 @@
         }
 
         this._cacheMode = value;
+        this._markLayoutDirty();
         this.updateRenderData(true);
     }
 
@@ -542,6 +556,7 @@
         }
 
         this._isBold = value;
+        this._markLayoutDirty();
         this.markForUpdateRenderData();
     }
 
@@ -563,6 +578,7 @@
         }
 
         this._isItalic = value;
+        this._markLayoutDirty();
         this.markForUpdateRenderData();
     }
 
@@ -591,7 +607,7 @@
      * @en The height of underline.
      * @zh 下划线高度。
      */
     @visible(function (this: Label) { return this._isUnderline; })
     @editable
     @displayOrder(18)
     @tooltip('i18n:label.underline_height')
@@ -612,7 +628,7 @@
      ** 描边效果组件,用于字体描边,只能用于系统字体或 ttf 字体。
      **/
     @editable
     @visible(function (this: Label) { return !(this._font instanceof BitmapFont); })
     @displayOrder(19)
     @tooltip('i18n:label.outline_enable')
     get enableOutline (): boolean {
@@ -621,6 +637,7 @@
     set enableOutline (value) {
         if (this._enableOutline === value) return;
         this._enableOutline = value;
+        this._markLayoutDirty();
         this.markForUpdateRenderData();
     }
 
@@ -632,7 +649,7 @@
      * 改变描边的颜色。
      */
     @editable
     @visible(function (this: Label) { return this._enableOutline && !(this._font instanceof BitmapFont); })
     @displayOrder(20)
     @tooltip('i18n:label.outline_color')
     get outlineColor (): Color {
@@ -641,6 +658,7 @@
     set outlineColor (value) {
         if (this._outlineColor === value) return;
         this._outlineColor.set(value);
+        this._markLayoutDirty();
         this.markForUpdateRenderData();
     }
 
@@ -652,7 +670,7 @@
      * 改变描边的宽度。
      */
     @editable
     @visible(function (this: Label) { return this._enableOutline && !(this._font instanceof BitmapFont); })
     @displayOrder(21)
     @tooltip('i18n:label.outline_width')
     get outlineWidth (): number {
@@ -661,6 +679,7 @@
     set outlineWidth (value) {
         if (this._outlineWidth === value) return;
         this._outlineWidth = value;
+        this._markLayoutDirty();
         this.markForUpdateRenderData();
     }
 
@@ -669,7 +688,7 @@
      * @zh 用于给 Label 组件添加阴影效果，只能用于系统字体或 ttf 字体。在缓存模式为 char 时不可用。
      */
     @editable
     @visible(function (this: Label) { return !(this._font instanceof BitmapFont) && (this.cacheMode !== CacheMode.CHAR); })
     @displayOrder(22)
     @tooltip('i18n:label.shadow_enable')
     get enableShadow (): boolean {
@@ -678,6 +697,7 @@
     set enableShadow (value) {
         if (this._enableShadow === value) return;
         this._enableShadow = value;
+        this._markLayoutDirty();
         this.markForUpdateRenderData();
     }
 
@@ -689,7 +709,7 @@
      * 阴影的颜色。
      */
     @editable
     @visible(function (this: Label) { return this._enableShadow && !(this._font instanceof BitmapFont) && (this.cacheMode !== CacheMode.CHAR); })
     @displayOrder(23)
     @tooltip('i18n:label.shadow_color')
     get shadowColor (): Color {
@@ -698,6 +718,7 @@
     set shadowColor (value) {
         if (this._shadowColor === value) return;
         this._shadowColor.set(value);
+        this._markLayoutDirty();
         this.markForUpdateRenderData();
     }
 
@@ -709,7 +730,7 @@
      * 字体与阴影的偏移。
      */
     @editable
     @visible(function (this: Label) { return this._enableShadow && !(this._font instanceof BitmapFont) && (this.cacheMode !== CacheMode.CHAR); })
     @displayOrder(24)
     @tooltip('i18n:label.shadow_offset')
     get shadowOffset (): Vec2 {
@@ -718,6 +739,7 @@
     set shadowOffset (value) {
         if (this._shadowOffset === value) return;
         this._shadowOffset.set(value);
+        this._markLayoutDirty();
         this.markForUpdateRenderData();
     }
 
@@ -738,6 +760,7 @@
     set shadowBlur (value) {
         if (this._shadowBlur === value) return;
         this._shadowBlur = value;
+        this._markLayoutDirty();
         this.markForUpdateRenderData();
     }
 
@@ -808,6 +831,12 @@
     get textLayoutData (): TextOutputLayoutData {
         return this._textLayoutData!;
     }
+    /**
+     * @engineInternal
+     */
+    get layoutDirty (): boolean {
+        return this._layoutDirty;
+    }
 
     @serializable
     protected _string = 'label';
@@ -875,6 +904,8 @@
     protected _textRenderData: TextOutputRenderData | null = null;
     protected _textLayoutData: TextOutputLayoutData | null = null;
 
+    protected _layoutDirty = false;
+
     /**
      * @engineInternal
      */
@@ -904,6 +935,7 @@
 
     public onEnable (): void {
         super.onEnable();
+        this._markLayoutDirty();
 
         // TODO: Hack for barbarians
         if (!this._font && !this._isSystemFontUsed) {
@@ -963,6 +995,7 @@
             this._applyFontTexture();
         }
         if (this._assembler) {
+            // this._assembler.updateLayoutData(this); // Todo
             this._assembler.updateRenderData(this);
         }
     }
@@ -1041,6 +1074,7 @@
                 }
                 this.changeMaterialForDefine();
                 if (this._assembler) {
+                    // this._assembler.updateLayoutData(this);// Todo
                     this._assembler.updateRenderData(this);
                 }
             }
@@ -1104,6 +1138,46 @@
         }
         super._updateBlendFunc();
     }
+
+    /**
+     * @engineInternal
+     */
+    public _markLayoutDirty (): void {
+        if (this._layoutDirty) return;
+        this._layoutDirty = true;
+        if (this.enabled) {
+            uiLayoutManager.markLayoutDirty(this);
+        }
+    }
+
+    /**
+     * @engineInternal
+     */
+    public _resetLayoutDirty (): void {
+        this._layoutDirty = false;
+    }
+
+    /**
+     * @engineInternal
+     */
+    public _updateLayout (): void {
+        // Todo
+        // if (this._assembler) {
+        //     this._assembler.updateLayoutData(this);
+        // }
+    }
+
+    protected _nodeStateChange (transformType: TransformBit): void {
+        super._nodeStateChange(transformType);
+        this._markLayoutDirty();
+        for (let i = 0; i < this.node.children.length; ++i) {
+            const child = this.node.children[i];
+            const renderComp = child.getComponent(Label);
+            if (renderComp) {
+                renderComp._markLayoutDirty();
+            }
+        }
+    }
 }
 
 cclegacy.Label = Label;

cocos/2d/framework/render-root-2d.ts

@@ -22,10 +22,11 @@
  THE SOFTWARE.
 */
 
-import { ccclass, disallowMultiple, executeInEditMode, executionOrder, help, menu, requireComponent } from 'cc.decorator';
-import { cclegacy } from '@base/global';
+import { ccclass, disallowMultiple, executeInEditMode,
+    executionOrder, help, menu, requireComponent } from 'cc.decorator';
 import { Component } from '../../scene-graph/component';
 import { UITransform } from './ui-transform';
+import { uiSystem } from './ui-system';
 
 /**
  * @en The entry node for 2D object data collection, all 2D rendering objects need to be rendered under the RenderRoot node.
@@ -40,14 +41,14 @@ import { UITransform } from './ui-transform';
 @executeInEditMode
 export class RenderRoot2D extends Component {
     public onEnable (): void {
-        cclegacy.director.root!.batcher2D.addScreen(this);
+        uiSystem.batcher2D.addScreen(this.node);
     }
 
     public onDisable (): void {
-        cclegacy.director.root!.batcher2D.removeScreen(this);
+        uiSystem.batcher2D.removeScreen(this.node);
     }
 
     public onDestroy (): void {
-        cclegacy.director.root!.batcher2D.removeScreen(this);
+        uiSystem.batcher2D.removeScreen(this.node);
     }
 }

cocos/2d/framework/ui-layout-manager.ts

@@ -0,0 +1,43 @@
+/*
+ Copyright (c) 2023 Xiamen Yaji Software Co., Ltd.
+
+ http://www.cocos.com
+
+ Permission is hereby granted, free of charge, to any person obtaining a copy
+ of this software and associated documentation files (the "Software"), to deal
+ in the Software without restriction, including without limitation the rights to
+ use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies
+ of the Software, and to permit persons to whom the Software is furnished to do so,
+ subject to the following conditions:
+
+ The above copyright notice and this permission notice shall be included in
+ all copies or substantial portions of the Software.
+
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+ THE SOFTWARE.
+*/
+
+import { UIRenderer } from './ui-renderer';
+
+export class UILayoutManager {
+    private _dirtyUIs: (UIRenderer)[] = [];
+
+    public markLayoutDirty (uiRenderer: UIRenderer): void {
+        this._dirtyUIs.push(uiRenderer);
+    }
+
+    public updateAllDirtyLayout (): void {
+        const length = this._dirtyUIs.length;
+        const dirtyRenderers = this._dirtyUIs;
+        for (let i = 0; i < length; i++) {
+            dirtyRenderers[i]._updateLayout();
+        }
+        this._dirtyUIs.length = 0;
+    }
+}
+export const uiLayoutManager = new UILayoutManager();