修复Sprite组件保存状态时的问题

This commit is contained in:
cheney2013 2023-06-05 10:09:45 +08:00
parent 64abcdadf1
commit 964befe06e
9 changed files with 17 additions and 617 deletions

1
.gitignore vendored
View File

@ -22,3 +22,4 @@ node_modules/
# WebStorm
#//////////////////////////
.idea/
/extensions/uistate-inspector/dist

View File

@ -418,10 +418,11 @@ export default class UIState extends Component {
(comp as any)["_updateColor"]();
break;
case "spriteFrame":
if (comp.spriteFrame!.uuid === recordCompAttr[attr]) return;
if (comp.spriteFrame?.uuid === recordCompAttr[attr]) return;
if (recordCompAttr[attr])
assetManager.loadAny<SpriteFrame>(recordCompAttr[attr], (err, asset) => {
if (err){
if (err) {
console.warn(err);
return;
}
@ -431,6 +432,7 @@ export default class UIState extends Component {
// 使用软刷新场景的接口,编辑器会闪一下,体验不是太好,不过可以保证显示正确
REAL_EDITOR && Editor.Message.request("scene", "soft-reload");
});
else comp.spriteFrame = null;
break;
default:
(comp as any)[attr] = recordCompAttr[attr];

View File

@ -1,60 +0,0 @@
"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.update = exports.ready = exports.$ = exports.template = void 0;
const prop_1 = require("./utils/prop");
//@ts-ignore
const package_json_1 = __importDefault(require("../../../package.json"));
exports.template = `
<div class="component-container">
</div>
<ui-prop>
<ui-button class="staticButton" tooltip="复制到剪贴板,出现异常时方便检查">
查看保存的数据
</ui-button>
</ui-prop>
`;
exports.$ = {
componentContainer: ".component-container",
staticButton: ".staticButton"
};
function ready() {
// // @ts-ignore
// this.elements = {
// // @ts-ignore
// stringText: {
// update: (element: any, dump: any) => {
// console.log("stringText update");
// },
// create(dump: any) {
// const prop = document.createElement("ui-prop");
// // @ts-ignore
// prop.dump = dump;
// const button = document.createElement("ui-button");
// button.innerText = dump.value;
// button.addEventListener("click", () => {
// console.log("clicked stringText property");
// });
// prop.appendChild(button);
// return prop;
// }
// }
// };
this.$.staticButton.addEventListener("click", async () => {
const json = await Editor.Message.request("scene", "execute-scene-script", {
name: package_json_1.default.name,
method: "copyRecords",
args: [this.dump.value.node.value.uuid]
});
Editor.Panel.open("uistate-inspector", json);
});
}
exports.ready = ready;
function update(dump) {
// 缓存 dump 数据,请挂在 this 上,否则多开的时候可能出现问题
this.dump = dump;
(0, prop_1.updatePropByDump)(this, dump);
}
exports.update = update;

View File

@ -1,402 +0,0 @@
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.appendChildByDisplayOrder = exports.appendToTabGroup = exports.toggleGroups = exports.createTabGroup = exports.getName = exports.isMultipleInvalid = exports.updatePropByDump = exports.setHidden = exports.setReadonly = exports.setDisabled = exports.loopSetAssetDumpDataReadonly = exports.updateCustomPropElements = exports.sortProp = void 0;
//@ts-nocheck
/*
* Returns the ordered PropMap
* @param {*} value of dump
* @returns {key:string dump:object}[]
*/
function sortProp(propMap) {
const orderList = [];
const normalList = [];
Object.keys(propMap).forEach(key => {
const item = propMap[key];
if (item != null) {
if ("displayOrder" in item) {
orderList.push({
key,
dump: item
});
}
else {
normalList.push({
key,
dump: item
});
}
}
});
orderList.sort((a, b) => a.dump.displayOrder - b.dump.displayOrder);
return orderList.concat(normalList);
}
exports.sortProp = sortProp;
/**
*
* This method is used to update the custom node
* @param {HTMLElement} container
* @param {string[]} excludeList
* @param {object} dump
* @param {(element,prop)=>void} update
*/
function updateCustomPropElements(container, excludeList, dump, update) {
const sortedProp = exports.sortProp(dump.value);
container.$ = container.$ || {};
/**
* @type {Array<HTMLElement>}
*/
const children = [];
sortedProp.forEach(prop => {
if (!excludeList.includes(prop.key)) {
if (!prop.dump.visible) {
return;
}
let node = container.$[prop.key];
if (!node) {
node = document.createElement("ui-prop");
node.setAttribute("type", "dump");
node.dump = prop.dump;
node.key = prop.key;
container.$[prop.key] = node;
}
if (typeof update === "function") {
update(node, prop);
}
children.push(node);
}
});
const currentChildren = Array.from(container.children);
children.forEach((child, i) => {
if (child === currentChildren[i]) {
return;
}
container.appendChild(child);
});
// delete extra children
currentChildren.forEach($child => {
if (!children.includes($child)) {
$child.remove();
}
});
}
exports.updateCustomPropElements = updateCustomPropElements;
/**
* Tool function: recursively set readonly in resource data
*/
function loopSetAssetDumpDataReadonly(dump) {
if (typeof dump !== "object") {
return;
}
if (dump.readonly === undefined) {
return;
}
dump.readonly = true;
if (dump.isArray) {
for (let i = 0; i < dump.value.length; i++) {
exports.loopSetAssetDumpDataReadonly(dump.value[i]);
}
return;
}
for (const key in dump.value) {
exports.loopSetAssetDumpDataReadonly(dump.value[key]);
}
}
exports.loopSetAssetDumpDataReadonly = loopSetAssetDumpDataReadonly;
/**
* Tool functions: set to unavailable
* @param {object} data dump | function
* @param element
*/
function setDisabled(data, element) {
if (!element) {
return;
}
let disabled = data;
if (typeof data === "function") {
disabled = data();
}
if (disabled === true) {
element.setAttribute("disabled", "true");
}
else {
element.removeAttribute("disabled");
}
}
exports.setDisabled = setDisabled;
/**
* Tool function: Set read-only status
* @param {object} data dump | function
* @param element
*/
function setReadonly(data, element) {
if (!element) {
return;
}
let readonly = data;
if (typeof data === "function") {
readonly = data();
}
if (readonly === true) {
element.setAttribute("readonly", "true");
}
else {
element.removeAttribute("readonly");
}
if (element.render && element.dump) {
element.dump.readonly = readonly;
element.render();
}
}
exports.setReadonly = setReadonly;
/**
* Tool function: Set the display status
* @param {Function | boolean} data dump | function
* @param {HTMLElement} element
*/
function setHidden(data, element) {
if (!element) {
return;
}
let hidden = data;
if (typeof data === "function") {
hidden = data();
}
if (hidden === true) {
element.setAttribute("hidden", "");
}
else {
element.removeAttribute("hidden");
}
}
exports.setHidden = setHidden;
function updatePropByDump(panel, dump) {
panel.dump = dump;
if (!panel.elements) {
panel.elements = {};
}
if (!panel.$props) {
panel.$props = {};
}
if (!panel.$groups) {
panel.$groups = {};
}
const oldPropKeys = Object.keys(panel.$props);
const newPropKeys = [];
Object.keys(dump.value).forEach((key, index) => {
var _a, _b;
const info = dump.value[key];
if (!info.visible) {
return;
}
const element = panel.elements[key];
let $prop = panel.$props[key];
newPropKeys.push(key);
if (!$prop) {
if (element && element.create) {
// when it need to go custom initialize
$prop = panel.$props[key] = panel.$[key] = element.create.call(panel, info);
}
else {
$prop = panel.$props[key] = panel.$[key] = document.createElement("ui-prop");
$prop.setAttribute("type", "dump");
}
const _displayOrder = (_b = (_a = info.group) === null || _a === void 0 ? void 0 : _a.displayOrder) !== null && _b !== void 0 ? _b : info.displayOrder;
$prop.displayOrder = _displayOrder === undefined ? index : Number(_displayOrder);
if (element && element.displayOrder !== undefined) {
$prop.displayOrder = element.displayOrder;
}
if (!element || !element.isAppendToParent || element.isAppendToParent.call(panel)) {
if (info.group && dump.groups) {
const { id = "default", name } = info.group;
if (!panel.$groups[id] && dump.groups[id]) {
if (dump.groups[id].style === "tab") {
panel.$groups[id] = exports.createTabGroup(dump.groups[id], panel);
}
}
if (panel.$groups[id]) {
if (!panel.$groups[id].isConnected) {
exports.appendChildByDisplayOrder(panel.$.componentContainer, panel.$groups[id]);
}
if (dump.groups[id].style === "tab") {
exports.appendToTabGroup(panel.$groups[id], name);
}
}
exports.appendChildByDisplayOrder(panel.$groups[id].tabs[name], $prop);
}
else {
exports.appendChildByDisplayOrder(panel.$.componentContainer, $prop);
}
}
}
else if (!$prop.isConnected || !$prop.parentElement) {
if (!element || !element.isAppendToParent || element.isAppendToParent.call(panel)) {
if (info.group && dump.groups) {
const { id = "default", name } = info.group;
exports.appendChildByDisplayOrder(panel.$groups[id].tabs[name], $prop);
}
else {
exports.appendChildByDisplayOrder(panel.$.componentContainer, $prop);
}
}
}
$prop.render(info);
});
for (const id of oldPropKeys) {
if (!newPropKeys.includes(id)) {
const $prop = panel.$props[id];
if ($prop && $prop.parentElement) {
$prop.parentElement.removeChild($prop);
}
}
}
for (const key in panel.elements) {
const element = panel.elements[key];
if (element && element.ready) {
element.ready.call(panel, panel.$[key], dump.value);
element.ready = undefined; // ready needs to be executed only once
}
}
for (const key in panel.elements) {
const element = panel.elements[key];
if (element && element.update) {
element.update.call(panel, panel.$[key], dump.value);
}
}
exports.toggleGroups(panel.$groups);
}
exports.updatePropByDump = updatePropByDump;
/**
* Tool function: check whether the value of the attribute is consistent after multi-selection
*/
function isMultipleInvalid(dump) {
let invalid = false;
if (dump.values && dump.values.some(ds => ds !== dump.value)) {
invalid = true;
}
return invalid;
}
exports.isMultipleInvalid = isMultipleInvalid;
/**
* Get the name based on the dump data
*/
/**
*
* @param {string} dump
* @returns
*/
function getName(dump) {
if (!dump) {
return "";
}
if (dump.displayName) {
return dump.displayName;
}
let name = dump.name || "";
name = name.trim().replace(/^\S/, str => str.toUpperCase());
name = name.replace(/_/g, str => " ");
name = name.replace(/ \S/g, str => ` ${str.toUpperCase()}`);
// 驼峰转中间空格
name = name.replace(/([a-z])([A-Z])/g, "$1 $2");
return name.trim();
}
exports.getName = getName;
function createTabGroup(dump, panel) {
const $group = document.createElement("div");
$group.setAttribute("class", "tab-group");
$group.dump = dump;
$group.tabs = {};
$group.displayOrder = dump.displayOrder;
$group.$header = document.createElement("ui-tab");
$group.$header.setAttribute("class", "tab-header");
$group.appendChild($group.$header);
$group.$header.addEventListener("change", e => {
active(e.target.value);
});
function active(index) {
const tabNames = Object.keys($group.tabs);
const tabName = tabNames[index];
$group.childNodes.forEach(child => {
if (!child.classList.contains("tab-content")) {
return;
}
if (child.getAttribute("name") === tabName) {
child.style.display = "block";
}
else {
child.style.display = "none";
}
});
}
// check style
if (!panel.$this.shadowRoot.querySelector("style#group-style")) {
const style = document.createElement("style");
style.setAttribute("id", "group-style");
style.innerText = `
.tab-group {
margin-top: 10px;
margin-bottom: 10px;
}
.tab-content {
display: none;
border: 1px dashed var(--color-normal-border);
padding: 10px;
margin-top: -9px;
border-top-right-radius: calc(var(--size-normal-radius) * 1px);
border-bottom-left-radius: calc(var(--size-normal-radius) * 1px);
border-bottom-right-radius: calc(var(--size-normal-radius) * 1px);
}`;
panel.$.componentContainer.before(style);
}
setTimeout(() => {
active(0);
});
return $group;
}
exports.createTabGroup = createTabGroup;
function toggleGroups($groups) {
for (const key in $groups) {
const $props = Array.from($groups[key].querySelectorAll(".tab-content > ui-prop"));
const show = $props.some($prop => getComputedStyle($prop).display !== "none");
if (show) {
$groups[key].removeAttribute("hidden");
}
else {
$groups[key].setAttribute("hidden", "");
}
}
}
exports.toggleGroups = toggleGroups;
function appendToTabGroup($group, tabName) {
if ($group.tabs[tabName]) {
return;
}
const $content = document.createElement("div");
$group.tabs[tabName] = $content;
$content.setAttribute("class", "tab-content");
$content.setAttribute("name", tabName);
$group.appendChild($content);
const $label = document.createElement("ui-label");
$label.value = exports.getName(tabName);
const $button = document.createElement("ui-button");
$button.setAttribute("name", tabName);
$button.appendChild($label);
$group.$header.appendChild($button);
}
exports.appendToTabGroup = appendToTabGroup;
function appendChildByDisplayOrder(parent, newChild) {
const displayOrder = newChild.displayOrder || 0;
const children = Array.from(parent.children);
const child = children.find(child => {
if (child.dump && child.displayOrder > displayOrder) {
return child;
}
return null;
});
if (child) {
child.before(newChild);
}
else {
parent.appendChild(newChild);
}
}
exports.appendChildByDisplayOrder = appendChildByDisplayOrder;

View File

@ -1,38 +0,0 @@
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.unload = exports.load = exports.methods = void 0;
let storedDirector;
let uuid;
/**
* @en Registration method for the main process of Extension
* @zh 为扩展的主进程的注册方法
*/
exports.methods = {
recordUuid(_uuid) {
uuid = _uuid;
},
recordDirector(director) {
storedDirector = director;
console.log("main receive", director);
},
saveScene() {
Editor.Message.send("scene", "execute-component-method", {
uuid,
name: "saveCurrentState",
args: []
});
console.log("saveScene", arguments);
}
};
/**
* @en Hooks triggered after extension loading is complete
* @zh 扩展加载完成后触发的钩子
*/
function load() { }
exports.load = load;
/**
* @en Hooks triggered after extension uninstallation is complete
* @zh 扩展卸载完成后触发的钩子
*/
function unload() { }
exports.unload = unload;

View File

@ -1,31 +0,0 @@
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const fs_1 = require("fs");
const path_1 = require("path");
module.exports = Editor.Panel.define({
listeners: {
show() {
console.log("show", arguments);
},
hide() {
console.log("hide");
}
},
template: (0, fs_1.readFileSync)((0, path_1.join)(__dirname, "../../../static/template/default/index.html"), "utf-8"),
style: "div { color: yellow; }",
$: {
btnCopy: "#btnCopy",
code: "#code"
},
methods: {},
ready() {
if (arguments[0])
this.$.code.innerHTML = JSON.stringify(arguments[0], null, 2);
this.$.btnCopy.addEventListener('confirm', () => {
Editor.Clipboard.write("text", this.$.code.innerHTML);
console.log("已复制到剪贴板!");
});
},
beforeClose() { },
close() { }
});

View File

@ -1,20 +0,0 @@
"use strict";
module.exports = Editor.Panel.define({
listeners: {
show() {
console.log("show");
},
hide() {
console.log("hide");
}
},
template: "<div>Hello</div>",
style: "div { color: yellow; }",
$: {
code: "#code"
},
methods: {},
ready() { },
beforeClose() { },
close() { }
});

View File

@ -1,50 +0,0 @@
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.methods = exports.unload = exports.load = void 0;
// @ts-nocheck
const cc_1 = require("cc");
function load() { }
exports.load = load;
function unload() { }
exports.unload = unload;
exports.methods = {
copyRecords(uuid) {
const node = this.iterateFindChildByUuid(cc_1.director.getScene(), uuid);
if (!node)
return null;
const uiState = node.getComponent("UIState");
if (!uiState)
return null;
const cloneState = {};
Object.values(uiState.records).forEach((stateRecord, index) => {
const records = [];
stateRecord.forEach(record => {
const clone = {};
Object.assign(clone, record);
if (record.node) {
clone.uuid = record.node.uuid;
clone.name = record.node.name;
delete clone.node;
}
records.push(clone);
});
cloneState[uiState.states[index]] = records;
});
return cloneState;
},
/** 根据uuid深度优先查找节点 */
iterateFindChildByUuid(node, uuid) {
var _a;
for (let i = 0; i < node.children.length; i++) {
const child = node.children[i];
if (child.uuid === uuid)
return child;
if ((_a = child.children) === null || _a === void 0 ? void 0 : _a.length) {
const findNode = this.iterateFindChildByUuid(child, uuid);
if (findNode)
return findNode;
}
}
return null;
}
};

View File

@ -10,7 +10,6 @@ export const methods: { [key: string]: (...any: any) => any } = {
},
recordDirector(director: any) {
storedDirector = director;
console.log("main receive", director);
},
saveScene(){
Editor.Message.send("scene", "execute-component-method", {
@ -18,7 +17,6 @@ export const methods: { [key: string]: (...any: any) => any } = {
name: "saveCurrentState",
args: []
})
console.log("saveScene", arguments);
}
};