update

fish-archie · Aug 3, 2022 · 77073f2 · 77073f2
1 parent 90baadd
commit 77073f2
Show file tree

Hide file tree

Showing 12 changed files with 249 additions and 157 deletions.
diff --git a/components.d.ts b/components.d.ts
@@ -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']

diff --git a/index.html b/index.html
@@ -1,2 +1,2 @@
-<div id="dev-app" style="width: 400px;height: 100%;display: none;flex-direction: column;justify-content: center;"></div>
-<script type="module" src="/src/main.ts"></script>
+<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>
diff --git a/release/preview-template/dist/assets/index.17ee060a.js b/release/preview-template/dist/assets/index.17ee060a.js
diff --git a/release/preview-template/dist/assets/index.1b8a852c.js b/release/preview-template/dist/assets/index.1b8a852c.js
diff --git a/...w-template/dist/assets/index.a2551c8e.css → ...w-template/dist/assets/index.9940da1d.css b/...w-template/dist/assets/index.a2551c8e.css → ...w-template/dist/assets/index.9940da1d.css
diff --git a/release/preview-template/dist/index.html b/release/preview-template/dist/index.html
@@ -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>
+
diff --git a/release/preview-template/index.ejs b/release/preview-template/index.ejs
@@ -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>
diff --git a/release/preview-template/toolbar.ejs b/release/preview-template/toolbar.ejs
@@ -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>
diff --git a/src/App.vue b/src/App.vue
@@ -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>
 
diff --git a/src/components/CCNode.vue b/src/components/CCNode.vue
@@ -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">

diff --git a/src/components/ProfilerPanel.vue b/src/components/ProfilerPanel.vue
@@ -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>
diff --git a/src/components/TreePanel.vue b/src/components/TreePanel.vue
@@ -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, []);