[3.9.0] fix submetas change after image type

editor/i18n/en/assets.js

@@ -119,6 +119,7 @@ module.exports = {
             },
         },
         image: {
+            label: 'Image',
             type: 'Type',
             typeTip: 'Type',
             // bakeOfflineMipmaps: 'Bake Offline Mipmaps',
@@ -133,6 +134,7 @@ module.exports = {
             flipGreenChannel: 'Flip Green Channel',
         },
         spriteFrame: {
+            label: 'SpriteFrame',
             packable: 'Packable',
             packableTip: 'Whether to participate in dynamic atlas or automatic atlas in build processes.',
             rotated: 'Rotated',

editor/i18n/zh/assets.js

@@ -119,6 +119,7 @@ module.exports = {
             },
         },
         image: {
+            label: '图像资源',
             type: '类型',
             typeTip: '类型',
             // bakeOfflineMipmaps: 'Bake Offline Mipmaps',
@@ -133,6 +134,8 @@ module.exports = {
             flipGreenChannel: '翻转绿色通道',
         },
         spriteFrame: {
+            label: '精灵帧资源（SpriteFrame）',
+            description: 'SpriteFrame 是 UI 渲染基础图形的容器。其本身管理图像的裁剪和九宫格信息，默认持有一个与其同级的 Texture2D 资源引用',
             packable: 'Packable',
             packableTip: '是否参与动态合图或者自动图集的构建处理',
             rotated: 'Rotated',

editor/inspector/assets/image.js

@@ -3,6 +3,15 @@
 const { join } = require('path');
 const { updateElementReadonly, updateElementInvalid } = require('../utils/assets');
 const { injectionStyle } = require('../utils/prop');
+const { ModeMap } = require('./texture/texture');
+
+const imageTypeToImporter = {
+    raw: '',
+    texture: 'texture',
+    'normal map': 'texture',
+    'sprite-frame': 'sprite-frame',
+    'texture cube': 'erp-texture-cube',
+};
 
 exports.template = /* html */`
 <div class="asset-image">
@@ -59,11 +68,13 @@ const Elements = {
         ready() {
             const panel = this;
 
-            panel.$.typeSelect.addEventListener('change', (event) => {
+            panel.$.typeSelect.addEventListener('change', async (event) => {
                 panel.metaList.forEach((meta) => {
                     meta.userData.type = event.target.value;
                 });
 
+                await panel.changeSubMetaWithType();
+
                 // There are other properties whose updates depend on its changes attribute corresponds to the edit element
                 Elements.isRGBE.update.call(panel);
                 Elements.fixAlphaTransparencyArtifacts.update.call(panel);
@@ -203,10 +214,6 @@ const Elements = {
 };
 
 exports.methods = {
-    apply() {
-        // if the image type changes between sprite-frame
-        this.spriteFrameChange = this.checkSpriteFrameChange(this.originImageType, this.meta.userData.type);
-    },
     updatePanel() {
         this.setPanel(this.$.panelSection, this.meta.userData.type);
 
@@ -222,14 +229,6 @@ exports.methods = {
         const assetList = [];
         const metaList = [];
 
-        const imageTypeToImporter = {
-            raw: '',
-            texture: 'texture',
-            'normal map': 'texture',
-            'sprite-frame': 'sprite-frame',
-            'texture cube': 'erp-texture-cube',
-        };
-
         const imageImporter = imageTypeToImporter[type];
 
         this.assetList.forEach((asset) => {
@@ -286,63 +285,54 @@ exports.methods = {
         $panel.update(assetList, metaList, this.assetList);
     },
 
-    checkSpriteFrameChange(srcType, destType) {
-        const changeTypes = ['texture', 'normal map', 'texture cube'];
-        // imageAsset type changed contains spriteFrame
-        let spriteFrameChange = '';
-        if (srcType === 'sprite-frame' && changeTypes.includes(destType)) {
-            spriteFrameChange = 'spriteFrameToOthers';
-        } else if (destType === 'sprite-frame' && changeTypes.includes(srcType)) {
-            spriteFrameChange = 'othersToSpriteFrame';
+    changeMipFilter(targetSubMetaKey) {
+        if (this.originImageType === 'sprite-frame') {
+            // spriteFrame -> any 
+            this.metaList.forEach((meta) => {
+                if (meta.subMetas[targetSubMetaKey].mipfilter !== 'none') {
+                    meta.subMetas[targetSubMetaKey].userData.mipfilter = 'nearest';
+                }
+            });
+        } else if (this.meta.type === 'sprite-frame') {
+            // any -> sprite，disabled mipmaps
+            this.metaList.forEach((meta) => {
+                meta.subMetas[targetSubMetaKey].userData.mipfilter = 'none';
+            });
         }
-        return spriteFrameChange;
     },
 
-    handleTypeChange(spriteFrameChange, type) {
-        if (!spriteFrameChange || !type) {
-            return;
-        }
-
-        const imageTypeToImporter = {
-            raw: '',
-            texture: 'texture',
-            'normal map': 'texture',
-            'sprite-frame': 'sprite-frame',
-            'texture cube': 'erp-texture-cube',
-        };
-        // change mipFilter
-        const imageImporter = imageTypeToImporter[type];
-        this.metaList.forEach((meta) => {
-            let mipChanged = false;
-            if (!meta) {
-                return;
+    async changeSubMetaWithType() {
+        // any -> texture : texture.wrapMode -> Repeat
+        // any -> sprite : texture.wrapMode -> Clamp
+        if (['sprite-frame', 'texture'].includes(this.meta.userData.type)) {
+            const textureKey = Object.keys(this.meta.subMetas).find((key) => this.meta.subMetas[key].importer === imageTypeToImporter.texture)
+            let wrapModeCache;
+            if (this.meta.subMetas[textureKey]) {
+                const textureUUID = this.meta.subMetas[textureKey].uuid;
+                wrapModeCache = await Editor.Profile.getConfig('inspector', `${textureUUID}.texture.wrapMode`);
             }
-            for (const subUuid in meta.subMetas) {
-                const subMeta = meta.subMetas[subUuid];
-                if (!subMeta || subMeta.importer === '*') {
-                    continue;
-                }
-                if (subMeta.importer === imageImporter) {
-                    if (spriteFrameChange === 'othersToSpriteFrame' && imageImporter === 'texture' && subMeta.userData.mipfilter !== 'none') {
-                        // imageAsset type change to spriteFrame，disabled mipmaps
-                        subMeta.userData.mipfilter = 'none';
-                        mipChanged = true;
-                    } else if (spriteFrameChange === 'spriteFrameToOthers' && subMeta.userData.mipfilter === 'none') {
-                        // imageAsset type change to other type from spriteFrame
-                        subMeta.userData.mipfilter = 'nearest';
-                        mipChanged = true;
+            if (!wrapModeCache) {
+                // use default wrapMode if not changed
+                const wrapModeName = this.meta.userData.type === 'texture' ? 'Repeat' : 'Clamp';
+                this.metaList.forEach((meta) => {
+                    const data = ModeMap.wrap[wrapModeName];
+                    if (!meta.subMetas[textureKey]) {
+                        meta.subMetas[textureKey] = {
+                            userData: {}
+                        }
                     }
-                    break;
-                }
-            }
-
-            // sync meta
-            if (mipChanged) {
-                const content = JSON.stringify(meta);
-                Editor.Message.request('asset-db', 'save-asset-meta', meta.uuid, content);
+                    for (const key of Object.keys(data)) {
+                        meta.subMetas[textureKey].userData[key] = data[key];
+                    }
+                });
             }
-        });
-    },
+        }
+        if (this.originImageType === 'sprite-frame' || this.meta.type === 'sprite-frame') {
+            const targetSubMetaKey = Object.keys(this.meta.subMetas).find((key) => this.meta.subMetas[key].importer === imageTypeToImporter[this.meta.userData.type])
+            // sprite -> any : mipfilter = 'nearest'
+            this.changeMipFilter(targetSubMetaKey);
+        }
+    }
 };
 
 exports.ready = function() {
@@ -373,17 +363,7 @@ exports.update = function(assetList, metaList) {
     this.metaList = metaList;
     this.asset = assetList[0];
     this.meta = metaList[0];
-
-    if (this.spriteFrameChange && this.originMetaList && !this.asset.readonly) {
-        this.handleTypeChange(this.spriteFrameChange, this.meta.userData.type);
-        // same as panel handle
-        if (this.meta.userData.type === 'sprite-frame') {
-            this.handleTypeChange(this.spriteFrameChange, 'texture');
-        }
-    }
     this.originImageType = this.meta.userData.type;
-    // change originMetaList
-    this.originMetaList = JSON.parse(JSON.stringify(this.metaList));
 
     for (const prop in Elements) {
         const element = Elements[prop];

editor/inspector/assets/texture/texture.js

@@ -174,7 +174,7 @@ const ModeMap = {
         },
     },
 };
-
+exports.ModeMap = ModeMap;
 const Elements = {
     anisotropy: {
         ready() {
@@ -407,6 +407,8 @@ const Elements = {
             panel.$.wrapModeSelect.addEventListener('change', (event) => {
                 // 根据 wrapModeSelect 组合值同步相应的 wrapModeS/wrapModeT 到 userData
                 const value = event.target.value;
+                // 临时记录用户的修改配置
+                Editor.Profile.setConfig('inspector', `${this.meta.uuid}.texture.wrapMode`, 'Clamp', 'temp');
                 if (ModeMap.wrap[value]) {
                     panel.userDataList.forEach((userData) => {
                         const data = ModeMap.wrap[value];