Improve handling of SpriteAtlas after setting up a SpriteFrame in Spr…

…ite (#18108) * Improve handling of SpriteAtlas after setting up a SpriteFrame in Sprite.
cocos · Jan 10, 2025 · 3307c3a · 3307c3a
1 parent 13888fc
commit 3307c3a
Show file tree

Hide file tree

Showing 2 changed files with 81 additions and 29 deletions.
diff --git a/cocos/2d/components/sprite.ts b/cocos/2d/components/sprite.ts
@@ -27,14 +27,13 @@ import { ccclass, help, executionOrder, menu, tooltip, displayOrder, type, range
 import { BUILD, EDITOR } from 'internal:constants';
 import { SpriteAtlas } from '../assets/sprite-atlas';
 import { SpriteFrame, SpriteFrameEvent } from '../assets/sprite-frame';
-import { Vec2, cclegacy, ccenum, clamp, warnID, error } from '../../core';
+import { Vec2, cclegacy, ccenum, clamp, warnID } from '../../core';
 import { IBatcher } from '../renderer/i-batcher';
 import { UIRenderer, InstanceMaterialType } from '../framework/ui-renderer';
 import { PixelFormat } from '../../asset/assets/asset-enum';
 import { TextureBase } from '../../asset/assets/texture-base';
 import { Material, RenderTexture } from '../../asset/assets';
 import { NodeEventType } from '../../scene-graph/node-event';
-import assetManager from '../../asset/asset-manager/asset-manager';
 
 /**
  * @en
@@ -488,7 +487,6 @@ export class Sprite extends UIRenderer {
 
         if (EDITOR) {
             this._resized();
-            this._applyAtlas(this._spriteFrame);
             this.node.on(NodeEventType.SIZE_CHANGED, this._resized, this);
         }
     }
@@ -717,32 +715,6 @@ export class Sprite extends UIRenderer {
                 spriteFrame.on(SpriteFrameEvent.UV_UPDATED, self._updateUVs, self);
             }
         }
-
-        if (EDITOR) {
-            self._applyAtlas(spriteFrame);
-        }
-    }
-
-    private _applyAtlas (spriteFrame: SpriteFrame | null): void {
-        if (!EDITOR) return;
-
-        if (!spriteFrame) return;
-
-        if (spriteFrame.atlasUuid.length === 0) {
-            this.spriteAtlas = null;
-            return;
-        }
-
-        if (!this.spriteAtlas || this.spriteAtlas.uuid !== spriteFrame.atlasUuid) {
-            assetManager.loadAny(spriteFrame.atlasUuid, (err: Error, asset: SpriteAtlas) => {
-                if (err) {
-                    this.spriteAtlas = null;
-                    error(err);
-                } else {
-                    this.spriteAtlas = asset;
-                }
-            });
-        }
     }
 }
 

diff --git a/editor/inspector/components/sprite.js b/editor/inspector/components/sprite.js
@@ -1,3 +1,6 @@
+const { lstatSync, existsSync, readdirSync } = require('fs-extra');
+const { dirname, join } = require('path');
+
 const { template, $, update, close } = require('./base');
 
 exports.template = template;
@@ -7,6 +10,43 @@ exports.close = close;
 
 const { setHidden, setReadonly, isMultipleInvalid } = require('../utils/prop');
 
+const AUTO_ATLAS_EXTNAME = '.pac';
+const ASSET_DIR = join(Editor.Project.path, 'assets');
+
+// Query the automatic atlas with the .pac suffix
+async function findAutoAtlasFolder(spriteFrameUuid) {
+    const filePath = await Editor.Message.request('asset-db', 'query-path', spriteFrameUuid);
+
+    if (!filePath) {
+        return;
+    }
+
+    let dir = dirname(filePath);
+    while (dir !== ASSET_DIR) {
+        const files = readdirSync(dir);
+        const file = files.find(file => file.endsWith(AUTO_ATLAS_EXTNAME));
+        if (file) {
+            const meta = await Editor.Message.request('asset-db', 'query-asset-meta', join(dir, file));
+            if (meta && meta.importer === 'auto-atlas') {
+                return meta.uuid;
+            }
+        } else {
+            dir = dirname(dir);
+        }
+    }
+    return null;
+}
+
+// query the dom node by type
+function findDomByType(parentElement, type) {
+    for (const child of parentElement.children) {
+        if (child.dump.type === type) {
+            return child;
+        }
+    }
+    return null;
+}
+
 exports.ready = function() {
     this.elements = {
         fillType: {
@@ -30,5 +70,45 @@ exports.ready = function() {
                 this.elements.fillType.update.call(this, element, dump);
             },
         },
+        spriteFrame: {
+            ready(element, dump) {
+                element.addEventListener('change-dump', (event) => {
+                    const spriteFrameDump = event.target.dump;
+                    const spriteFrameUuid = spriteFrameDump.value.uuid;
+                    if (!spriteFrameUuid) {
+                        return;
+                    }
+
+                    const parentElement = event.target.parentElement;
+                    if (!parentElement) {
+                        return;
+                    }
+
+                    Editor.Message.request('asset-db', 'query-asset-meta', spriteFrameUuid)
+                        .then(async (spriteFrameMeta) => {
+                            if (!spriteFrameMeta || !spriteFrameMeta.userData) {
+                                return;
+                            }
+
+                            let autoAtlasUuid = '';
+                            if (!spriteFrameMeta.userData.atlasUuid) {
+                                autoAtlasUuid = await findAutoAtlasFolder(spriteFrameUuid);
+                            }
+
+                            const spriteAtlasDom = findDomByType(parentElement, 'cc.SpriteAtlas');
+                            if (!spriteAtlasDom) {
+                                return;
+                            }
+
+                            spriteAtlasDom.value = spriteFrameMeta.userData.atlasUuid || autoAtlasUuid;
+                            spriteAtlasDom.dispatch('change');
+                            spriteAtlasDom.dispatch('confirm');
+                        })
+                        .catch((err) => {
+                            console.error(err);
+                        });
+                });
+            },
+        },
     };
 };