From 964befe06ee84830a46138c644bdb382e21c553a Mon Sep 17 00:00:00 2001 From: cheney2013 Date: Mon, 5 Jun 2023 10:09:45 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E5=A4=8DSprite=E7=BB=84=E4=BB=B6?= =?UTF-8?q?=E4=BF=9D=E5=AD=98=E7=8A=B6=E6=80=81=E6=97=B6=E7=9A=84=E9=97=AE?= =?UTF-8?q?=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .gitignore | 3 +- assets/script/component/UIState.ts | 28 +- .../inspector/uistate-inspector.js | 60 --- .../contributions/inspector/utils/prop.js | 402 ------------------ extensions/uistate-inspector/dist/main.js | 38 -- .../dist/panels/default/index.js | 31 -- .../dist/panels/list/index.js | 20 - extensions/uistate-inspector/dist/scene.js | 50 --- extensions/uistate-inspector/src/main.ts | 2 - 9 files changed, 17 insertions(+), 617 deletions(-) delete mode 100644 extensions/uistate-inspector/dist/contributions/inspector/uistate-inspector.js delete mode 100644 extensions/uistate-inspector/dist/contributions/inspector/utils/prop.js delete mode 100644 extensions/uistate-inspector/dist/main.js delete mode 100644 extensions/uistate-inspector/dist/panels/default/index.js delete mode 100644 extensions/uistate-inspector/dist/panels/list/index.js delete mode 100644 extensions/uistate-inspector/dist/scene.js diff --git a/.gitignore b/.gitignore index a231b3f..7efdfe4 100644 --- a/.gitignore +++ b/.gitignore @@ -21,4 +21,5 @@ node_modules/ #////////////////////////// # WebStorm #////////////////////////// -.idea/ \ No newline at end of file +.idea/ +/extensions/uistate-inspector/dist diff --git a/assets/script/component/UIState.ts b/assets/script/component/UIState.ts index 21cd968..b9c3665 100644 --- a/assets/script/component/UIState.ts +++ b/assets/script/component/UIState.ts @@ -418,19 +418,21 @@ export default class UIState extends Component { (comp as any)["_updateColor"](); break; case "spriteFrame": - if (comp.spriteFrame!.uuid === recordCompAttr[attr]) return; - - assetManager.loadAny(recordCompAttr[attr], (err, asset) => { - if (err){ - console.warn(err); - return; - } - comp.spriteFrame = asset; - - // 特定情况下会出现SpriteFrame没有更新，点击 Creator 能够刷新 - // 使用软刷新场景的接口，编辑器会闪一下，体验不是太好，不过可以保证显示正确 - REAL_EDITOR && Editor.Message.request("scene", "soft-reload"); - }); + if (comp.spriteFrame?.uuid === recordCompAttr[attr]) return; + + if (recordCompAttr[attr]) + assetManager.loadAny(recordCompAttr[attr], (err, asset) => { + if (err) { + console.warn(err); + return; + } + comp.spriteFrame = asset; + + // 特定情况下会出现SpriteFrame没有更新，点击 Creator 能够刷新 + // 使用软刷新场景的接口，编辑器会闪一下，体验不是太好，不过可以保证显示正确 + REAL_EDITOR && Editor.Message.request("scene", "soft-reload"); + }); + else comp.spriteFrame = null; break; default: (comp as any)[attr] = recordCompAttr[attr]; diff --git a/extensions/uistate-inspector/dist/contributions/inspector/uistate-inspector.js b/extensions/uistate-inspector/dist/contributions/inspector/uistate-inspector.js deleted file mode 100644 index 76e7a90..0000000 --- a/extensions/uistate-inspector/dist/contributions/inspector/uistate-inspector.js +++ /dev/null @@ -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 = ` -
-
- - - 查看保存的数据 - - -`; -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; diff --git a/extensions/uistate-inspector/dist/contributions/inspector/utils/prop.js b/extensions/uistate-inspector/dist/contributions/inspector/utils/prop.js deleted file mode 100644 index ecc6dea..0000000 --- a/extensions/uistate-inspector/dist/contributions/inspector/utils/prop.js +++ /dev/null @@ -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} - */ - 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; diff --git a/extensions/uistate-inspector/dist/main.js b/extensions/uistate-inspector/dist/main.js deleted file mode 100644 index 6e1dce2..0000000 --- a/extensions/uistate-inspector/dist/main.js +++ /dev/null @@ -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; diff --git a/extensions/uistate-inspector/dist/panels/default/index.js b/extensions/uistate-inspector/dist/panels/default/index.js deleted file mode 100644 index 3a68f75..0000000 --- a/extensions/uistate-inspector/dist/panels/default/index.js +++ /dev/null @@ -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() { } -}); diff --git a/extensions/uistate-inspector/dist/panels/list/index.js b/extensions/uistate-inspector/dist/panels/list/index.js deleted file mode 100644 index a43c290..0000000 --- a/extensions/uistate-inspector/dist/panels/list/index.js +++ /dev/null @@ -1,20 +0,0 @@ -"use strict"; -module.exports = Editor.Panel.define({ - listeners: { - show() { - console.log("show"); - }, - hide() { - console.log("hide"); - } - }, - template: "
Hello
", - style: "div { color: yellow; }", - $: { - code: "#code" - }, - methods: {}, - ready() { }, - beforeClose() { }, - close() { } -}); diff --git a/extensions/uistate-inspector/dist/scene.js b/extensions/uistate-inspector/dist/scene.js deleted file mode 100644 index 70131a8..0000000 --- a/extensions/uistate-inspector/dist/scene.js +++ /dev/null @@ -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; - } -}; diff --git a/extensions/uistate-inspector/src/main.ts b/extensions/uistate-inspector/src/main.ts index b86b120..5286f26 100644 --- a/extensions/uistate-inspector/src/main.ts +++ b/extensions/uistate-inspector/src/main.ts @@ -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); } };