267 lines
13 KiB
HTML
267 lines
13 KiB
HTML
|
<link href="ccc-devtools/libs/css/materialdesignicons.min.css" rel="stylesheet"
|
||
|
|
type="text/css">
|
||
|
|
<link href="ccc-devtools/libs/css/vuetify.min.css" rel="stylesheet" type="text/css">
|
||
|
|
<style>
|
||
|
|
html {
|
||
|
|
overflow-y: auto;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
|
||
|
|
<v-app id="app">
|
||
|
|
<v-app-bar app clipped-left color="gray" dense v-if="isShowTop">
|
||
|
|
<v-app-bar-nav-icon @click.stop="drawer = !drawer"></v-app-bar-nav-icon>
|
||
|
|
<div id="recompiling"><span>Recompiling...</span></div>
|
||
|
|
<v-spacer></v-spacer>
|
||
|
|
<div class="toolbar">
|
||
|
|
<div class="item">
|
||
|
|
<select id="opts-device">
|
||
|
|
<option value="0">Default</option>
|
||
|
|
</select>
|
||
|
|
</div>
|
||
|
|
<div class="item">
|
||
|
|
<v-btn id="btn-rotate" small height="25"><span style="color: #aaa;">Rotate</span></v-btn>
|
||
|
|
</div>
|
||
|
|
<span style="font-size: small;display: none;" class="item">Debug Mode:</span>
|
||
|
|
<div class="item" style="display: none;">
|
||
|
|
<select id="opts-debug-mode">
|
||
|
|
<option value="0">None</option>
|
||
|
|
<option value="1">Info</option>
|
||
|
|
<option value="2">Warn</option>
|
||
|
|
<option value="3">Error</option>
|
||
|
|
<option value="4">Info For Web Page</option>
|
||
|
|
<option value="5">Warn For Web Page</option>
|
||
|
|
<option value="6">Error For Web Page</option>
|
||
|
|
</select>
|
||
|
|
</div>
|
||
|
|
<div class="item">
|
||
|
|
<v-btn id="btn-show-fps" small height="25"><span style="color: #aaa;">Show FPS</span></v-btn>
|
||
|
|
</div>
|
||
|
|
<div class="item">
|
||
|
|
<span style="font-size: small;color: #aaa;" class="item">FPS:</span><input id="input-set-fps"
|
||
|
|
type="number" />
|
||
|
|
</div>
|
||
|
|
<div style="margin-right: 0px;" class="item">
|
||
|
|
<v-btn id="btn-pause" small height="25"><span style="color: #aaa;">Pause</span></v-btn>
|
||
|
|
</div>
|
||
|
|
<div class="item">
|
||
|
|
<v-btn id="btn-step" style="display: none;" small height="25">
|
||
|
|
<span style="color: #aaa;">Step</span>
|
||
|
|
</v-btn>
|
||
|
|
</div>
|
||
|
|
<div class="item">
|
||
|
|
<v-btn id="btn-recompile" small height="25"><span style="color: #aaa;">Recompile</span></v-btn>
|
||
|
|
</div>
|
||
|
|
<v-icon @click="openCocosDocs" small>mdi-cloud-search</v-icon>
|
||
|
|
<v-icon @click="openCocosForum" small>mdi-forum</v-icon>
|
||
|
|
<v-icon @click="openCacheDialog" small>mdi-table</v-icon>
|
||
|
|
<v-icon @click="openGithub" small>mdi-home</v-icon>
|
||
|
|
</div>
|
||
|
|
</v-app-bar>
|
||
|
|
|
||
|
|
<div v-if="!isShowTop">
|
||
|
|
<div id="recompiling"><span>Recompiling...</span></div>
|
||
|
|
<div class="toolbar">
|
||
|
|
<div class="item">
|
||
|
|
<select id="opts-device">
|
||
|
|
<option value="0">Default</option>
|
||
|
|
</select>
|
||
|
|
</div>
|
||
|
|
<div class="item">
|
||
|
|
<v-btn id="btn-rotate" small height="25"><span style="color: #aaa;">Rotate</span></v-btn>
|
||
|
|
</div>
|
||
|
|
<span style="font-size: small;display: none;" class="item">Debug Mode:</span>
|
||
|
|
<div class="item" style="display: none;">
|
||
|
|
<select id="opts-debug-mode">
|
||
|
|
<option value="0">None</option>
|
||
|
|
<option value="1">Info</option>
|
||
|
|
<option value="2">Warn</option>
|
||
|
|
<option value="3">Error</option>
|
||
|
|
<option value="4">Info For Web Page</option>
|
||
|
|
<option value="5">Warn For Web Page</option>
|
||
|
|
<option value="6">Error For Web Page</option>
|
||
|
|
</select>
|
||
|
|
</div>
|
||
|
|
<div class="item">
|
||
|
|
<v-btn id="btn-show-fps" small height="25"><span style="color: #aaa;">Show FPS</span></v-btn>
|
||
|
|
</div>
|
||
|
|
<div class="item">
|
||
|
|
<span style="font-size: small;color: #aaa;" class="item">FPS:</span><input id="input-set-fps"
|
||
|
|
type="number" />
|
||
|
|
</div>
|
||
|
|
<div style="margin-right: 0px;" class="item">
|
||
|
|
<v-btn id="btn-pause" small height="25"><span style="color: #aaa;">Pause</span></v-btn>
|
||
|
|
</div>
|
||
|
|
<div class="item">
|
||
|
|
<v-btn id="btn-step" style="display: none;" small height="25">
|
||
|
|
<span style="color: #aaa;">Step</span>
|
||
|
|
</v-btn>
|
||
|
|
</div>
|
||
|
|
<div class="item">
|
||
|
|
<v-btn id="btn-recompile" small height="25"><span style="color: #aaa;">Recompile</span></v-btn>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<v-navigation-drawer v-model="drawer" app clipped fixed width="512" v-if="isShowTop">
|
||
|
|
<v-container style="height: 50%;overflow: auto;">
|
||
|
|
<v-text-field v-model="treeSearchText" dense label="Search Node or Component" dark flat solo-inverted
|
||
|
|
hide-details clearable clear-icon="mdi-close-circle-outline"></v-text-field>
|
||
|
|
<v-treeview :items="treeData" item-key="id" dense activatable :search="treeSearchText"
|
||
|
|
:active.sync="selectedNodes">
|
||
|
|
<template v-slot:label="{ item, active }">
|
||
|
|
<label v-if="item.active" style="color: white;">{{ item.name }}</label>
|
||
|
|
<label v-else style="color: gray;">{{ item.name }}</label>
|
||
|
|
</template>
|
||
|
|
</v-treeview>
|
||
|
|
</v-container>
|
||
|
|
<v-container style="border-top: 2px solid darkgray;height: 50%;overflow-y: auto;">
|
||
|
|
<template v-if="selectedNode">
|
||
|
|
<!-- Node -->
|
||
|
|
<table style="width: 100%;color: white;" border="1">
|
||
|
|
<thead>
|
||
|
|
<tr>
|
||
|
|
<th colspan="2" style="text-align: left; padding: 10px;">
|
||
|
|
<div class="float-left" style="display:inline-flex;">
|
||
|
|
<v-simple-checkbox v-model="selectedNode.active"></v-simple-checkbox>
|
||
|
|
<span style="margin-left: 10px;">{{ nodeSchema.title }}</span>
|
||
|
|
</div>
|
||
|
|
<div class="float-right">
|
||
|
|
<v-icon style="margin-left: 10px;margin-right: 10px;" @click="drawNodeRect()">
|
||
|
|
mdi-adjust</v-icon>
|
||
|
|
<v-icon @click="outputNodeHandler()">mdi-send</v-icon>
|
||
|
|
</div>
|
||
|
|
</th>
|
||
|
|
</tr>
|
||
|
|
</thead>
|
||
|
|
<tbody>
|
||
|
|
<!-- config.js[node2d] -->
|
||
|
|
<tr v-for="row in nodeSchema.rows" :key="row.key">
|
||
|
|
<td style="padding: 10px;width: 40%;">{{ row.name }}</td>
|
||
|
|
<td style="width: 60%;">
|
||
|
|
<v-color-picker v-if="row.type == 'color'" class="ma-2" canvas-height="80" width="259"
|
||
|
|
v-model="selectedNode[row.key]"></v-color-picker>
|
||
|
|
<v-simple-checkbox v-else-if="row.type == 'bool'" v-model="selectedNode[row.key]"
|
||
|
|
style="padding: 10px;width: 100%;"></v-simple-checkbox>
|
||
|
|
<input v-else :type="row.type" v-model="selectedNode[row.key]"
|
||
|
|
style="padding: 10px;width: 100%;"></input>
|
||
|
|
</td>
|
||
|
|
</tr>
|
||
|
|
</tbody>
|
||
|
|
</table>
|
||
|
|
<!-- Components -->
|
||
|
|
<table v-for="component in componentsSchema" style="width: 100%;color: white;" border="1">
|
||
|
|
<thead>
|
||
|
|
<tr>
|
||
|
|
<th colspan="2" style="text-align: left; padding: 10px;">
|
||
|
|
<div class="float-left" style="display:inline-flex;">
|
||
|
|
<v-simple-checkbox v-model="selectedNode[component.key].enabled">
|
||
|
|
</v-simple-checkbox>
|
||
|
|
<span style="margin-left: 10px;">{{ component.title }}</span>
|
||
|
|
</div>
|
||
|
|
<div class="float-right">
|
||
|
|
<v-icon @click="outputComponentHandler(component.key)">mdi-send</v-icon>
|
||
|
|
</div>
|
||
|
|
</th>
|
||
|
|
</tr>
|
||
|
|
</thead>
|
||
|
|
<tbody>
|
||
|
|
<tr v-for="row in component.rows" :key="row.key">
|
||
|
|
<!-- config.js[componentsSchema] -->
|
||
|
|
<td style="padding: 10px;width: 40%;">{{ row.name }}</td>
|
||
|
|
<td style="width: 60%;">
|
||
|
|
<v-color-picker v-if="row.type == 'color'"
|
||
|
|
class="ma-2"
|
||
|
|
canvas-height="80" width="259"
|
||
|
|
v-model="selectedNode[component.key][row.key]">
|
||
|
|
</v-color-picker>
|
||
|
|
<textarea v-else-if="row.type == 'textarea'" rows="1"
|
||
|
|
v-model="selectedNode[component.key][row.key]"
|
||
|
|
style="padding: 10px;width: 100%;">
|
||
|
|
</textarea>
|
||
|
|
<v-simple-checkbox v-else-if="row.type == 'bool'"
|
||
|
|
v-model="selectedNode[component.key][row.key]"
|
||
|
|
style="padding: 10px;width: 100%;">
|
||
|
|
</v-simple-checkbox>
|
||
|
|
<input v-else-if ="row.type == 'object_number'"
|
||
|
|
v-model.number="selectedNode[component.key][row.parentKey][row.key]"
|
||
|
|
style="padding: 10px;width: 100%;"
|
||
|
|
@input="onSubPropInput( selectedNode[component.key], row)">
|
||
|
|
</input>
|
||
|
|
<input v-else :type="row.type"
|
||
|
|
v-model="selectedNode[component.key][row.key]"
|
||
|
|
style="padding: 10px;width: 100%;">
|
||
|
|
</input>
|
||
|
|
</td>
|
||
|
|
</tr>
|
||
|
|
</tbody>
|
||
|
|
</table>
|
||
|
|
</template>
|
||
|
|
</v-container>
|
||
|
|
</v-navigation-drawer>
|
||
|
|
|
||
|
|
<v-content>
|
||
|
|
<v-container fill-height>
|
||
|
|
<div id="content" class="content">
|
||
|
|
<div class="contentWrap">
|
||
|
|
<div id="GameDiv" class="wrapper">
|
||
|
|
<div id="background-img"></div>
|
||
|
|
<canvas id="GameCanvas"></canvas>
|
||
|
|
<div id="splash">
|
||
|
|
<div class="progress-bar stripes"><span></span></div>
|
||
|
|
</div>
|
||
|
|
<div id="bulletin">
|
||
|
|
<div id="sceneIsEmpty" class="inner">预览场景中啥都没有，加点什么，或在编辑器中打开其它场景吧</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</v-container>
|
||
|
|
</v-content>
|
||
|
|
|
||
|
|
<v-dialog v-model="cacheDialog" persistent scrollable>
|
||
|
|
<v-card>
|
||
|
|
<v-card-title>
|
||
|
|
{{ cacheTitle }}
|
||
|
|
<v-spacer></v-spacer>
|
||
|
|
<v-text-field v-model="cacheSearchText" append-icon="mdi-magnify" label="Search" single-line
|
||
|
|
hide-details>
|
||
|
|
</v-text-field>
|
||
|
|
</v-card-title>
|
||
|
|
<v-divider></v-divider>
|
||
|
|
<v-card-text>
|
||
|
|
<v-data-table :headers="cacheHeaders" :items="cacheData" :search="cacheSearchText" :sort-by="['size']"
|
||
|
|
:sort-desc="[true]" :footer-props="{
|
||
|
|
showFirstLastPage: true,
|
||
|
|
firstIcon: 'mdi-chevron-double-left',
|
||
|
|
lastIcon: 'mdi-chevron-double-right',
|
||
|
|
}">
|
||
|
|
<template v-slot:item.size="{ item }">
|
||
|
|
{{ item.size == -1 ? '_' : (item.size +'MB') }}
|
||
|
|
</template>
|
||
|
|
<template v-slot:item.preview="{ item }">
|
||
|
|
<div style="height: 60px;display: flex;align-items: center;">
|
||
|
|
<img :src="window.location.protocol + '//' + window.location.host + '/' + item.preview"
|
||
|
|
style="max-height: 60px;max-width: 120px;" v-if="item.preview">
|
||
|
|
<template v-else>_</template>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
</v-data-table>
|
||
|
|
</v-card-text>
|
||
|
|
<v-divider></v-divider>
|
||
|
|
<v-card-actions>
|
||
|
|
<v-btn color="blue darken-1" text @click="cacheDialog = false">Close</v-btn>
|
||
|
|
<v-spacer></v-spacer>
|
||
|
|
<v-switch v-model="cacheOnlyTexture" label="只显示纹理"></v-switch>
|
||
|
|
</v-card-actions>
|
||
|
|
</v-card>
|
||
|
|
</v-dialog>
|
||
|
|
|
||
|
|
</v-app>
|
||
|
|
|
||
|
|
<script src="ccc-devtools/libs/js/vue.min.js"></script>
|
||
|
|
<script src="ccc-devtools/libs/js/vuetify.js"></script>
|
||
|
|
<script src="ccc-devtools/config.js"></script>
|
||
|
|
<script src="ccc-devtools/libs/js/cc-console-utils.js"></script>
|
||
|
|
<script src="ccc-devtools/preview.js"></script>
|
||
|
|
|