UITransform priority change (cocos#8435)

* UITransform priority change * better version * update * name change * name change
shrinktofit · Apr 15, 2021 · b89c07f · b89c07f
1 parent 2471db7
commit b89c07f
Show file tree

Hide file tree

Showing 5 changed files with 44 additions and 24 deletions.
diff --git a/cocos/2d/framework/ui-transform.ts b/cocos/2d/framework/ui-transform.ts
@@ -28,7 +28,7 @@
  * @module ui
  */
 
-import { ccclass, help, executeInEditMode, executionOrder, menu, tooltip, displayOrder, serializable, disallowMultiple } from 'cc.decorator';
+import { ccclass, help, executeInEditMode, executionOrder, menu, tooltip, displayOrder, serializable, disallowMultiple, visible } from 'cc.decorator';
 import { EDITOR } from 'internal:constants';
 import { Component } from '../../core/components';
 import { SystemEventType } from '../../core/platform/event-manager/event-enum';
@@ -37,7 +37,7 @@ import { Mat4, Rect, Size, Vec2, Vec3 } from '../../core/math';
 import { AABB } from '../../core/geometry';
 import { Node } from '../../core/scene-graph';
 import { legacyCC } from '../../core/global-exports';
-import { director } from '../../core/director';
+import { Director, director } from '../../core/director';
 import { warnID } from '../../core/platform/debug';
 
 const _vec2a = new Vec2();
@@ -197,7 +197,7 @@ export class UITransform extends Component {
      * @zh
      * 渲染先后顺序，按照广度渲染排列，按同级节点下进行一次排列。
      */
-    @tooltip('i18n:ui_transform.priority')
+    @visible(false)
     get priority () {
         return this._priority;
     }
@@ -213,11 +213,11 @@ export class UITransform extends Component {
         }
 
         this._priority = value;
-        this._checkAndSortSiblings();
-        this.node.parent!._updateSiblingIndex();
+        if (this.node.parent) {
+            UITransform.insertChangeMap(this.node.parent);
+        }
     }
 
-    @serializable
     protected _priority = 0;
 
     /**
@@ -250,13 +250,14 @@ export class UITransform extends Component {
         this.node._uiProps.uiTransformComp = this;
     }
 
+    public onLoad () {
+        if (this.node.parent) {
+            UITransform.insertChangeMap(this.node.parent);
+        }
+    }
+
     public onEnable () {
         this.node.on(SystemEventType.PARENT_CHANGED, this._parentChanged, this);
-
-        const changed = this._checkAndSortSiblings();
-        if (changed) {
-            this.node.parent!._updateSiblingIndex();
-        }
     }
 
     public onDisable () {
@@ -643,28 +644,43 @@ export class UITransform extends Component {
             return;
         }
 
-        this._checkAndSortSiblings();
+        if (this.node.parent) {
+            UITransform.insertChangeMap(this.node.parent);
+        }
+    }
+
+    private static priorityChangeNodeMap = new Map<string, Node>();
+
+    private static insertChangeMap (node: Node) {
+        const key = node.uuid;
+        if (!UITransform.priorityChangeNodeMap.has(key)) {
+            UITransform.priorityChangeNodeMap.set(key, node);
+        }
     }
 
-    protected _checkAndSortSiblings () {
-        const siblings = this.node.parent && this.node.parent.children;
-        let changed = false;
+    private static _sortChildrenSibling (node) {
+        const siblings = node.children;
         if (siblings) {
             siblings.sort((a, b) => {
                 const aComp = a._uiProps.uiTransformComp;
                 const bComp = b._uiProps.uiTransformComp;
                 const ca = aComp ? aComp.priority : 0;
                 const cb = bComp ? bComp.priority : 0;
-                let diff = ca - cb;
-                if (diff === 0) {
-                    diff = a.getSiblingIndex() - b.getSiblingIndex();
-                }
-
-                changed = diff > 0;
+                const diff = ca - cb;
                 return diff;
             });
         }
+    }
 
-        return changed;
+    public static _sortSiblings () {
+        UITransform.priorityChangeNodeMap.forEach((node, ID) => {
+            UITransform._sortChildrenSibling(node);
+            node._updateSiblingIndex();
+            node.emit('childrenSiblingOrderChanged');
+        });
+        UITransform.priorityChangeNodeMap.clear();
     }
 }
+
+// HACK
+director.on(Director.EVENT_AFTER_UPDATE, UITransform._sortSiblings);
diff --git a/cocos/core/scene-graph/node.ts b/cocos/core/scene-graph/node.ts
@@ -396,8 +396,6 @@ export class Node extends BaseNode {
     }
 
     public _onBatchCreated (dontSyncChildPrefab: boolean) {
-        super._onBatchCreated(dontSyncChildPrefab);
-
         NodePool.set(this._poolHandle, NodeView.LAYER, this._layer);
         NodePool.setVec3(this._poolHandle, NodeView.WORLD_SCALE, this._scale);
 
@@ -410,6 +408,7 @@ export class Node extends BaseNode {
         this._dirtyFlags = TransformBit.TRS;
         const len = this._children.length;
         for (let i = 0; i < len; ++i) {
+            this._children[i]._siblingIndex = i;
             this._children[i]._onBatchCreated(dontSyncChildPrefab);
         }
 

diff --git a/cocos/core/scene-graph/scene.ts b/cocos/core/scene-graph/scene.ts
@@ -148,6 +148,7 @@ export class Scene extends BaseNode {
         super._onBatchCreated(dontSyncChildPrefab);
         const len = this._children.length;
         for (let i = 0; i < len; ++i) {
+            this.children[i]._siblingIndex = i;
             this._children[i]._onBatchCreated(dontSyncChildPrefab);
         }
 

diff --git a/cocos/core/utils/prefab/utils.ts b/cocos/core/utils/prefab/utils.ts
@@ -195,6 +195,8 @@ export function applyMountedChildren (node: Node, mountedChildren: MountedChildr
                     // mounted node need to add to the target map
                     generateTargetMap(childNode, curTargetMap, false);
                     // siblingIndex update is in _onBatchCreated function, and it needs a parent.
+                    // @ts-expect-error private member access
+                    childNode._siblingIndex = target._children.length - 1;
                     childNode._onBatchCreated(false);
                 }
             }

diff --git a/cocos/ui/layout.ts b/cocos/ui/layout.ts
@@ -717,6 +717,7 @@ export class Layout extends Component {
         this.node.on(NodeEvent.CHILD_ADDED, this._childAdded, this);
         this.node.on(NodeEvent.CHILD_REMOVED, this._childRemoved, this);
         this.node.on(NodeEvent.SIBLING_ORDER_CHANGED, this._childrenChanged, this);
+        this.node.on('childrenSiblingOrderChanged', this.updateLayout, this);
         this._addChildrenEventListeners();
     }
 
@@ -727,6 +728,7 @@ export class Layout extends Component {
         this.node.off(NodeEvent.CHILD_ADDED, this._childAdded, this);
         this.node.off(NodeEvent.CHILD_REMOVED, this._childRemoved, this);
         this.node.off(NodeEvent.SIBLING_ORDER_CHANGED, this._childrenChanged, this);
+        this.node.off('childrenSiblingOrderChanged', this.updateLayout, this);
         this._removeChildrenEventListeners();
     }