消消方块阵换皮表情
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 

168 lines
4.7 KiB

const { ipcRenderer } = require('electron');
const RendererEvent = require('../../lib/eazax/renderer-event');
const { getUrlParam } = require('../../lib/eazax/browser-util');
const { translate } = require('../../lib/eazax/i18n');
const { ICON_MAP } = require('../../icon-map');
// 导入 Vue 工具函数
const { ref, watch, onMounted, onBeforeUnmount, createApp } = Vue;
/** 当前语言 */
const LANG = getUrlParam('lang');
// 定义 ref-item 组件
const RefItem = {
template: '#ref-item-template',
props: ['item'],
emits: ['item-click'],
setup(props) {
const isExpanded = ref(true);
const toggleExpand = () => {
isExpanded.value = !isExpanded.value;
};
return {
isExpanded,
toggleExpand
};
}
};
// 构建 Vue 应用
const App = {
// 需要自定义组件
components: {
RefItem
},
/**
* 设置
* @param {*} props
* @param {*} context
*/
setup(props, context) {
// 数据
const results = ref([]);
const selectedItem = ref(null);
/**
* 项点击事件处理函数
* @param {IRef} item 点击的项
*/
function onItemClick(item) {
let isDoubleClick = false;
if (item === selectedItem.value) {
isDoubleClick = true;
}
// 点击不同的才切换状态
if (!isDoubleClick) {
if (selectedItem.value) {
selectedItem.value.selected = false;
}
item.selected = true;
selectedItem.value = item;
}
// 不同类型处理不同
if (item.type === 'scene' || item.type === 'prefab' || item.type === 'node') {
let url = item.url;
if (item.prefabUrl && item.type === 'node') {
url = item.prefabUrl;
}
if (isDoubleClick) {
// prefab 如果是双击,则发送消息到 Cocos Creator 打开
// ipcRenderer.send('open-prefab', item.uuid);
// ipcRenderer.send('asset-db', 'open-asset', item.url);
// ipcRenderer.send('open-asset', item.url);
RendererEvent.send('open-asset', url, item.node);
} else {
// 否则发送消息到 Cocos Creator 选中
// ipcRenderer.send('select-node', item.uuid);
RendererEvent.send('select-asset', url);
}
} else {
RendererEvent.send('select-asset', item.url);
}
}
/**
* 翻译
* @param {string} key
*/
function t(key) {
return translate(LANG, key);
}
/**
* 生命周期:挂载后
*/
onMounted(() => {
// 监听 IPC 消息
ipcRenderer.on('results-data', (event, data) => {
// 初始化数据
function initData(ref) {
// 图标
ref.icon = ICON_MAP[ref.type];
if (!ref.icon) {
ref.icon = '';
}
// 详情
ref.details = '';
if (ref.type === 'node') {
if (ref.component) {
ref.details += `   ${ICON_MAP['component']} [${t('component')}] ${ref.component}`;
}
if (ref.property) {
ref.details += `   ${ICON_MAP['property']} [${t('property')}] ${ref.property}`;
}
}
// 递归
if (ref.refs) {
ref.refs.forEach(child => {
initData(child);
// 赋值为父节点的url
child.prefabUrl = ref.url;
});
}
}
initData(data);
// 更新 results 的值
results.value = data.refs;
//
selectedItem.value = null;
});
});
/**
* 生命周期:卸载前
*/
onBeforeUnmount(() => {
// 移除 IPC 监听器
ipcRenderer.removeAllListeners('results-data');
});
return {
t,
//
results,
onItemClick,
selectedItem,
};
},
};
// 创建实例
const app = createApp(App);
// 挂载组件
app.component('ref-item', RefItem);
// 挂载
app.mount('#app');