Skip to content

Commit

Permalink
fix submetas change after image type (#16198)
Browse files Browse the repository at this point in the history 
* fix submetas change after image type

* remove dirty flag

* save user config in default config

* fix change mipmaps

* fix

* fix change mipfilter

* update

* fix submetas change after image type

* remove dirty flag

* save user config in default config

* fix change mipmaps

* fix

* update

* update spriteFrame

---------

Co-authored-by: changhua <[email protected]>
  • Loading branch information
@yanOO1497 @nianba23
yanOO1497 and nianba23 authored Sep 15, 2023
1 parent a94f4ba commit f9a71ac
Show file tree
Hide file tree
Showing 5 changed files with 101 additions and 75 deletions.
2 changes: 2 additions & 0 deletions editor/i18n/en/assets.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -119,6 +119,7 @@ module.exports = {
},
},
image: {
label: 'Image',
type: 'Type',
typeTip: 'Type',
// bakeOfflineMipmaps: 'Bake Offline Mipmaps',
Expand All @@ -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',
Expand Down
2 changes: 2 additions & 0 deletions editor/i18n/zh/assets.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -119,6 +119,7 @@ module.exports = {
},
},
image: {
label: '图像资源',
type: '类型',
typeTip: '类型',
// bakeOfflineMipmaps: 'Bake Offline Mipmaps',
Expand All @@ -133,6 +134,7 @@ module.exports = {
flipGreenChannel: '翻转绿色通道',
},
spriteFrame: {
label: '精灵帧资源（SpriteFrame）',
packable: 'Packable',
packableTip: '是否参与动态合图或者自动图集的构建处理',
rotated: 'Rotated',
Expand Down
6 changes: 6 additions & 0 deletions editor/inspector/assets/erp-texture-cube.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -272,6 +272,12 @@ const Elements = {
this.$.mipfilter.innerHTML = optionsHtml;

this.$.mipfilter.value = this.meta.userData.mipfilter || 'nearest';

// 临时记录 mipfilter 配置
this.metaList && this.metaList.forEach((meta) => {
Editor.Profile.setConfig('inspector', `${meta.uuid}.texture.mipfilter`, this.meta.userData.mipfilter, 'default');
});

this.updateInvalid(this.$.mipfilter, 'mipfilter');
updateElementReadonly.call(this, this.$.mipfilter);
},
Expand Down
157 changes: 83 additions & 74 deletions editor/inspector/assets/image.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,23 @@
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',
};

const imageTypeToName = {
raw: '',
texture: 'texture',
'normal map': 'normalMap',
'sprite-frame': 'spriteFrame',
'texture cube': 'textureCube',
};

exports.template = /* html */`
<div class="asset-image">
Expand Down Expand Up @@ -59,11 +76,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);
Expand Down Expand Up @@ -203,10 +222,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);

Expand All @@ -222,14 +237,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) => {
Expand Down Expand Up @@ -279,70 +286,82 @@ exports.methods = {

const asset = assetList[0];
const $label = $section.querySelector('ui-label');
$label.setAttribute('value', type);
$label.setAttribute('value', asset.name);
const $panel = $section.querySelector('ui-panel');
$panel.setAttribute('src', join(__dirname, `./${asset.importer}.js`));
$panel.injectionStyle(injectionStyle);
$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(async (meta) => {
if (!meta.subMetas[targetSubMetaKey]) {
meta.subMetas[targetSubMetaKey] = {
userData: {},
}
}
// hack only record the configuration of the type that has been updated, not the accurate configuration of the child resources after import.
// If targetSubMeta does not have mipfilter or miupfilter is none, set mipfilter to nearest
const preMipfilter = await Editor.Profile.getConfig('inspector', `${meta.uuid}@${targetSubMetaKey}.texture.mipfilter`, 'default');
if (!preMipfilter || preMipfilter === 'none') {
meta.subMetas[targetSubMetaKey].userData.mipfilter = 'nearest';
}
});
} else if (this.meta.userData.type === 'sprite-frame') {
// any -> sprite，disabled mipmaps
this.metaList.forEach((meta) => {
if (!meta.subMetas[targetSubMetaKey]) {
meta.subMetas[targetSubMetaKey] = {
userData: {},
}
}
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 = Editor.Utils.UUID.nameToSubId('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;
}
for (const key of Object.keys(data)) {
meta.subMetas[textureKey].userData[key] = data[key];
}
});
}

// sync meta
if (mipChanged) {
const content = JSON.stringify(meta);
Editor.Message.request('asset-db', 'save-asset-meta', meta.uuid, content);
}
if (this.originImageType === 'sprite-frame' || this.meta.userData.type === 'sprite-frame') {
const changeTypes = ['texture', 'normal map', 'texture cube', 'sprite-frame'];
if (!changeTypes.includes(this.meta.userData.type)) {
return;
}
});
},
let targetName = imageTypeToName[this.meta.userData.type];
if (targetName === 'spriteFrame') {
// change texture asset when import as sprite
targetName = 'texture';
}
const targetSubMetaKey = Editor.Utils.UUID.nameToSubId(targetName);
targetSubMetaKey && this.changeMipFilter(targetSubMetaKey);
}
}
};

exports.ready = function() {
Expand Down Expand Up @@ -373,17 +392,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];
Expand Down
9 changes: 8 additions & 1 deletion editor/inspector/assets/texture/texture.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -174,7 +174,7 @@ const ModeMap = {
},
},
};

exports.ModeMap = ModeMap;
const Elements = {
anisotropy: {
ready() {
Expand Down Expand Up @@ -396,6 +396,11 @@ const Elements = {

panel.$.mipfilterSelect.value = panel.userData.mipfilter || 'nearest';

// 临时记录 mipfilter 配置
panel.metaList && panel.metaList.forEach((meta) => {
Editor.Profile.setConfig('inspector', `${meta.uuid}.texture.mipfilter`, panel.userData.mipfilter, 'default');
});

panel.updateInvalid(panel.$.mipfilterSelect, 'mipfilter');
updateElementReadonly.call(panel, panel.$.mipfilterSelect);
},
Expand All @@ -407,6 +412,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`, value, 'default');
if (ModeMap.wrap[value]) {
panel.userDataList.forEach((userData) => {
const data = ModeMap.wrap[value];
Expand Down

0 comments on commit f9a71ac

Please sign in to comment.