CocosPlugin/ccc-devtools
1
0
Fork 0
mirror of https://github.com/potato47/ccc-devtools.git synced 2026-06-12 22:16:47 +00:00
Code Issues Packages Projects Releases Wiki Activity

update

Browse Source
This commit is contained in:
nextfu
2022-08-03 18:00:31 +08:00
parent 90baadd0aa
commit 77073f20d2
12 changed files with 249 additions and 157 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components.d.ts
Vendored
+1
View File
@@ -17,6 +17,7 @@ declare module '@vue/runtime-core' {
ElInputNumber: typeof import('element-plus/es')['ElInputNumber']
ElScrollbar: typeof import('element-plus/es')['ElScrollbar']
ElTreeV2: typeof import('element-plus/es')['ElTreeV2']
ProfilerPanel: typeof import('./src/components/ProfilerPanel.vue')['default']
PropItem: typeof import('./src/components/PropItem.vue')['default']
TreePanel: typeof import('./src/components/TreePanel.vue')['default']
UserComponent: typeof import('./src/components/UserComponent.vue')['default']
index.html
+1 -1
View File
@@ -1,2 +1,2 @@
<div id="dev-app" style="width: 400px;height: 100%;display: none;flex-direction: column;justify-content: center;"></div>
<div id="dev-app" style="width: 400px;height: 100%;display: flex;flex-direction: column;justify-content: center;"></div>
<script type="module" src="/src/main.ts"></script>
release/preview-template/dist/assets/index.17ee060a.js
Vendored
+111
View File
File diff suppressed because one or more lines are too long
release/preview-template/dist/assets/index.1b8a852c.js
Vendored
-111
View File
File diff suppressed because one or more lines are too long
release/preview-template/dist/assets/index.a2551c8e.css → release/preview-template/dist/assets/index.9940da1d.css
Vendored
+1 -1
View File
File diff suppressed because one or more lines are too long
release/preview-template/dist/index.html
Vendored
+4 -3
View File
@@ -1,3 +1,4 @@
<script type="module" crossorigin src="/dist/assets/index.1b8a852c.js"></script>
<link rel="stylesheet" href="/dist/assets/index.a2551c8e.css">
<div id="dev-app" style="width: 400px;height: 100%;display: none;flex-direction: column;justify-content: center;"></div>
<script type="module" crossorigin src="/dist/assets/index.17ee060a.js"></script>
<link rel="stylesheet" href="/dist/assets/index.9940da1d.css">
<div id="dev-app" style="width: 400px;height: 100%;display: flex;flex-direction: column;justify-content: center;"></div>
release/preview-template/index.ejs
+36 -1
View File
@@ -18,7 +18,7 @@
<link rel="stylesheet" type="text/css" href="./index.css" />
</head>
<body>
<%- include('./toolbar', {config: config}) %>
<%- include(cocosToolBar, {config: config}) %>
<div style="display: flex;flex: auto;align-items: center;">
<%- include ./dist/index.html %>
<div id="content" class="content">
@@ -47,3 +47,38 @@
<%- include(cocosTemplate, {}) %>
</body>
</html>
<script>
document.getElementsByClassName('toolbar')[0].insertAdjacentHTML('afterbegin', '<div><button id="btn-show-tree">Tree</button></div>');
const devtoolsBtn = document.getElementById('btn-show-tree');
let isOpen = !!localStorage.getItem('ccc_devtools_show');
toggle(isOpen);
devtoolsBtn.addEventListener('click', () => {
isOpen = !isOpen;
toggle(isOpen);
}, false);
// profilerBtn.addEventListener('click', () => {
// if (profilerBtn.classList.contains('checked')) {
// profilerBtn.classList.remove('checked');
// window.dispatchEvent(new CustomEvent('showProfiler', { detail: { show: false } }));
// } else {
// profilerBtn.classList.add('checked');
// window.dispatchEvent(new CustomEvent('showProfiler', { detail: { show: true } }));
// }
// }, false);
function toggle(isOpen) {
const devApp = document.getElementById('dev-app');
window.ccdevShow = isOpen;
if (isOpen) {
devApp.style.display = 'flex';
devtoolsBtn.classList.add('checked');
localStorage.setItem('ccc_devtools_show', 1);
} else {
devApp.style.display = 'none';
devtoolsBtn.classList.remove('checked');
localStorage.removeItem('ccc_devtools_show');
}
}
</script>
release/preview-template/toolbar.ejs
-13
View File
@@ -33,16 +33,3 @@
<span>ms</span>
</div>
</div>
<script>
const devtoolsBtn = document.getElementById('btn-show-devtools');
devtoolsBtn.addEventListener('click', () => {
const devApp = document.getElementById('dev-app');
if (devApp.style.display === 'none') {
devApp.style.display = 'flex';
devtoolsBtn.classList.add('checked');
} else {
devApp.style.display = 'none';
devtoolsBtn.classList.remove('checked');
}
}, false);
</script>
src/App.vue
+11 -12
View File
@@ -1,29 +1,30 @@
<script setup lang="ts">
import TreePanel from './components/TreePanel.vue';
import { ref } from 'vue';
let showTree = ref(false);
import ProfilerPanel from './components/ProfilerPanel.vue';
let showProfiler = ref(false);
window.addEventListener('showProfiler', (e: any) => {
showProfiler.value = !showProfiler.value;
});
</script>
<template>
<!-- <div>
<vue-final-modal v-model="showTree" classes="modal-container" content-class="modal-content" :hide-overlay="true"
<div>
<vue-final-modal v-model="showProfiler" classes="modal-container" content-class="modal-content" :hide-overlay="true"
:click-to-close="false" :prevent-click="true" :drag="true" :fit-parent="true" drag-selector=".modal-drag">
<TreePanel :show="showTree"></TreePanel>
<ProfilerPanel :show="showProfiler"></ProfilerPanel>
</vue-final-modal>
<el-button size="small" @click="showTree = !showTree">节点树</el-button>
</div> -->
<!-- <div style="width: 100%;border: 2px solid blue;"> -->
</div>
<el-card :body-style="{ padding: 0 }" style="margin: 10px;">
<TreePanel :show="true"></TreePanel>
</el-card>
<!-- </div> -->
</template>
<style scoped>
:deep(.modal-container) {
display: flex;
justify-content: start;
align-items: center;
justify-content: end;
align-items: start;
}
:deep(.modal-content) {
@@ -34,8 +35,6 @@ let showTree = ref(false);
padding: 0;
border: 1px solid cadetblue;
background: #171920;
min-width: 400px;
height: 80%;
}
</style>
src/components/CCNode.vue
+11 -8
View File
@@ -1,12 +1,15 @@
<template>
<div class="row">
<el-checkbox v-model="ccNode!.active" size="small" style="margin-right: 10px;" />
<span class="header-title" style="flex: 1;">Node</span>
<el-button size="small" @click="Utils.drawNodeRect(ccNode)">+</el-button>
<el-button size="small" @click="Utils.outputToConsole(ccNode)">></el-button>
</div>
<PropItem v-for="prop in NodeModel.props" :key="prop.key" :model="NodeModel" :prop-name="prop.name"
:prop-key="prop.key" :update-key="updateKey!"></PropItem>
<template v-if="ccNode!.name != 'PROFILER_NODE'">
<div class="row">
<el-checkbox v-model="ccNode!.active" size="small" style="margin-right: 10px;" />
<span class="header-title" style="flex: 1;">Node</span>
<el-button size="small" @click="Utils.drawNodeRect(ccNode)">+</el-button>
<el-button size="small" @click="Utils.outputToConsole(ccNode)">></el-button>
</div>
<PropItem v-for="prop in NodeModel.props" :key="prop.key" :model="NodeModel" :prop-name="prop.name"
:prop-key="prop.key" :update-key="updateKey!"></PropItem>
</template>
<ProfilerPanel v-if="ccNode!.name == 'PROFILER_NODE'" :show="true"></ProfilerPanel>
</template>
<script setup lang="ts">
src/components/ProfilerPanel.vue
+70
View File
@@ -0,0 +1,70 @@
<template>
<div style="width: 100%;height: 30px;background-color: #26282f;display: flex;align-items: center;justify-content: center;color: white;"
class="modal-drag">
Profiler
</div>
<div style="width: 100%;">
<div class="row" v-for="item in items" :key="item.key">
<span>{{ item.desc }}</span>
<span style="flex: 1;text-align: right;">{{ item.value }}</span>
</div>
</div>
</template>
<script lang="ts" setup>
import { onMounted, ref } from 'vue-demi';
const props = defineProps({
show: Boolean,
});
let updateKey = ref(1);
let items = ref<any[]>([]);
function refresh() {
if (props.show) {
updateKey.value = -updateKey.value;
}
// @ts-ignore
const stats = cc.profiler._stats;
items.value.forEach(item => {
const data = stats[item.key];
item.desc = data.desc;
if (data.isInteger) {
item.value = data.counter._value | 0;
} else {
item.value = data.counter._value.toFixed(2);
}
});
setTimeout(refresh, 1000);
}
function init() {
items.value = [
{ key: 'fps', desc: '', value: 0 },
{ key: 'draws', desc: '', value: 0 },
{ key: 'frame', desc: '', value: 0 },
{ key: 'instances', desc: '', value: 0 },
{ key: 'tricount', desc: '', value: 0 },
{ key: 'logic', desc: '', value: 0 },
{ key: 'physics', desc: '', value: 0 },
{ key: 'render', desc: '', value: 0 },
{ key: 'textureMemory', desc: '', value: 0 },
{ key: 'bufferMemory', desc: '', value: 0 },
];
refresh();
}
onMounted(() => {
init();
});
</script>
<style>
.row {
display: flex;
justify-content: center;
margin: 10px;
}
</style>
src/components/TreePanel.vue
+2 -6
View File
@@ -1,9 +1,4 @@
<template>
<!-- <div
style="width: 100%;height: 30px;background-color: #26282f;display: flex;align-items: center;justify-content: center;color: white;"
class="modal-drag">
节点树
</div> -->
<div style="width: 100%;" :style="{ height: treeViewHeight }">
<el-tree-v2 ref="treeView" :props="defaultProps" empty-text="正在加载场景" :highlight-current="true"
:expand-on-click-node="false" :default-expanded-keys="expandedKeys" @current-change="handleCurrentNodeChange"
@@ -113,7 +108,8 @@ function setChildren(container: TreeNode[], children: any[], path: string[]) {
}
function refreshTree() {
if (props.show) {
// @ts-ignore
if (props.show && window.ccdevShow) {
let value: TreeNode[] = [];
//@ts-ignore
setChildren(value, cc.director.getScene().children, []);