983 lines
26 KiB
HTML
983 lines
26 KiB
HTML
|
<html>
|
||
|
|
|
||
|
|
<head>
|
||
|
|
<link rel="stylesheet" href="iconFont.css">
|
||
|
|
<script src="vue.min.js"></script>
|
||
|
|
<meta charset="utf-8">
|
||
|
|
</head>
|
||
|
|
<style type="text/css">
|
||
|
|
body {
|
||
|
|
position: relative;
|
||
|
|
-webkit-font-smoothing: subpixel-antialiased;
|
||
|
|
margin: 0px;
|
||
|
|
padding: 0px;
|
||
|
|
background: #2c2c2c;
|
||
|
|
/* linear-gradient(rgb(45, 45, 45), rgb(25, 25, 25)); */
|
||
|
|
color: rgb(189, 189, 189);
|
||
|
|
/* font-size: 12px; */
|
||
|
|
}
|
||
|
|
|
||
|
|
button {
|
||
|
|
color: rgb(235, 233, 233);
|
||
|
|
/* background-color: rgb(78, 77, 77); */
|
||
|
|
border-radius: 0.3em;
|
||
|
|
border-image: none;
|
||
|
|
border-style: none;
|
||
|
|
background-color: #2c2c2c;
|
||
|
|
border: 0.5px solid rgb(87, 86, 86);
|
||
|
|
}
|
||
|
|
|
||
|
|
button:hover{
|
||
|
|
color: white;
|
||
|
|
font-weight: bold;
|
||
|
|
}
|
||
|
|
|
||
|
|
button:active {
|
||
|
|
background-color: #070707;
|
||
|
|
outline:none;
|
||
|
|
}
|
||
|
|
|
||
|
|
:root {
|
||
|
|
--top-and-bottom: calc(100vh - 54px);
|
||
|
|
--top: calc(100vh - 32px);
|
||
|
|
}
|
||
|
|
|
||
|
|
webview {
|
||
|
|
/* border:solid 1px darkgray;
|
||
|
|
border-left: unset;
|
||
|
|
border-right: unset; */
|
||
|
|
}
|
||
|
|
|
||
|
|
#app {
|
||
|
|
display: flex;
|
||
|
|
flex-direction: row;
|
||
|
|
height: 100vh;
|
||
|
|
overflow-x: hidden;
|
||
|
|
}
|
||
|
|
|
||
|
|
.gamePanel {
|
||
|
|
position: relative;
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
border-right: solid 0.5px rgb(87, 86, 86);
|
||
|
|
height: 100%
|
||
|
|
}
|
||
|
|
|
||
|
|
.nodePanel {
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
height: 100%;
|
||
|
|
flex: 1;
|
||
|
|
overflow: auto;
|
||
|
|
/* min-width: calc(15em + 300px); */
|
||
|
|
/* margin-left: -0.5px; */
|
||
|
|
}
|
||
|
|
|
||
|
|
.nodePanel hr {
|
||
|
|
/* width: calc(100% - 0.5px) */
|
||
|
|
margin-left: -0.5px;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
.Component input[type="search"] {
|
||
|
|
display: block;
|
||
|
|
width: calc(100% - 8px);
|
||
|
|
margin-top: 2px;
|
||
|
|
margin-left: 4px;
|
||
|
|
margin-right: 4px;
|
||
|
|
color: black;
|
||
|
|
background-color: whitesmoke;
|
||
|
|
border: 1px;
|
||
|
|
border-radius: 0.4em;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
.gameBtns {
|
||
|
|
display: flex;
|
||
|
|
padding: 4px;
|
||
|
|
background-color: #484848;
|
||
|
|
}
|
||
|
|
|
||
|
|
.gameBtnsRight {
|
||
|
|
/* flex:1; */
|
||
|
|
/* align-content: flex-end; */
|
||
|
|
/* border:solid 1px red; */
|
||
|
|
}
|
||
|
|
|
||
|
|
.gameBtnsLeft {
|
||
|
|
flex: 1;
|
||
|
|
padding-top: 1px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.consolePanel {
|
||
|
|
flex: 1 1 0%;
|
||
|
|
display: flex;
|
||
|
|
position: relative;
|
||
|
|
flex-direction: column;
|
||
|
|
max-height: var(--top);
|
||
|
|
}
|
||
|
|
|
||
|
|
.nodePanel webview {
|
||
|
|
flex: 1 1 0%
|
||
|
|
}
|
||
|
|
|
||
|
|
.consolePanel input[type="search"] {
|
||
|
|
color: whitesmoke;
|
||
|
|
background-color: #2c2c2c;
|
||
|
|
border: 1px solid gray;
|
||
|
|
border-radius: 0.3em;
|
||
|
|
}
|
||
|
|
|
||
|
|
.codeTips {
|
||
|
|
position: absolute;
|
||
|
|
bottom: 20;
|
||
|
|
left: 0;
|
||
|
|
right: 0;
|
||
|
|
background-color: rgb(46, 46, 46);
|
||
|
|
padding: 0.3em;
|
||
|
|
border-radius: 0.5em;
|
||
|
|
box-shadow: 0 0 12px 1px black;
|
||
|
|
}
|
||
|
|
|
||
|
|
.helpPanel .helpTitle {
|
||
|
|
font-weight: bold;
|
||
|
|
color: lightblue;
|
||
|
|
}
|
||
|
|
|
||
|
|
.helpPanel a {
|
||
|
|
word-wrap: break-word;
|
||
|
|
word-break: break-all;
|
||
|
|
}
|
||
|
|
|
||
|
|
.codeTips .helpCon {
|
||
|
|
display: flex;
|
||
|
|
justify-content: space-between;
|
||
|
|
}
|
||
|
|
|
||
|
|
.codeTips .help {
|
||
|
|
color: darkkhaki;
|
||
|
|
}
|
||
|
|
|
||
|
|
.tipsCon {
|
||
|
|
max-height: 20em;
|
||
|
|
overflow-y: auto;
|
||
|
|
}
|
||
|
|
|
||
|
|
.tipsCon span {
|
||
|
|
color: rgb(150, 150, 150);
|
||
|
|
}
|
||
|
|
|
||
|
|
.codeTips .selected {
|
||
|
|
background-color: black;
|
||
|
|
}
|
||
|
|
|
||
|
|
.consolePanel a {
|
||
|
|
white-space: nowrap;
|
||
|
|
}
|
||
|
|
|
||
|
|
.consolePanel .topMenu {
|
||
|
|
padding-left: 5px;
|
||
|
|
/* text-align: left; */
|
||
|
|
}
|
||
|
|
|
||
|
|
.consolePanel .topMenu>input {
|
||
|
|
margin-right: 0.5em;
|
||
|
|
}
|
||
|
|
|
||
|
|
.consolePanel .topMenu label {
|
||
|
|
margin-right: 0.5em;
|
||
|
|
white-space: pre;
|
||
|
|
}
|
||
|
|
|
||
|
|
.logs {
|
||
|
|
word-wrap: break-word;
|
||
|
|
word-break: break-all;
|
||
|
|
overflow-y: auto;
|
||
|
|
font-size: 0.9em;
|
||
|
|
background: #111111;
|
||
|
|
}
|
||
|
|
|
||
|
|
.gamePanel .logs {
|
||
|
|
background: unset;
|
||
|
|
}
|
||
|
|
|
||
|
|
.logs .logTime {
|
||
|
|
color: rgb(31, 154, 255);
|
||
|
|
}
|
||
|
|
|
||
|
|
.logItem:hover {
|
||
|
|
background-color: black;
|
||
|
|
}
|
||
|
|
|
||
|
|
.logItem {
|
||
|
|
/* content-visibility: auto; */
|
||
|
|
padding-left: 4px;
|
||
|
|
border-bottom: solid 0.5px rgba(196, 194, 194, 0.151);
|
||
|
|
word-break: break-all;
|
||
|
|
word-wrap: break-word;
|
||
|
|
}
|
||
|
|
|
||
|
|
.logItem .filter {
|
||
|
|
/* font-weight: bold; */
|
||
|
|
color: greenyellow;
|
||
|
|
background-color: rgba(210, 105, 30, 0.658);
|
||
|
|
}
|
||
|
|
|
||
|
|
/* .logItem span{
|
||
|
|
line-height: 1em;
|
||
|
|
} */
|
||
|
|
|
||
|
|
.tab {
|
||
|
|
display: flex;
|
||
|
|
padding: 4px;
|
||
|
|
padding-bottom: 0px;
|
||
|
|
align-items: stretch;
|
||
|
|
border-bottom: solid 0.5px rgb(87, 86, 86);
|
||
|
|
white-space: nowrap;
|
||
|
|
background-color: #484848;
|
||
|
|
}
|
||
|
|
|
||
|
|
.tabs {
|
||
|
|
flex: 1;
|
||
|
|
display: flex;
|
||
|
|
align-items: stretch;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
.tabItem {
|
||
|
|
display: inline-block;
|
||
|
|
margin-right: 0.5em;
|
||
|
|
padding-left: 0.5em;
|
||
|
|
padding-right: 0.5em;
|
||
|
|
padding-bottom: 4px;
|
||
|
|
user-select: none;
|
||
|
|
cursor: pointer;
|
||
|
|
background-color: #353535;
|
||
|
|
color: #d4d4d4;
|
||
|
|
/* line-height: 100%; */
|
||
|
|
/* height:100%; */
|
||
|
|
}
|
||
|
|
|
||
|
|
.tabs .selected {
|
||
|
|
background-color: #2c2c2c;
|
||
|
|
border: 0.5px solid rgb(87, 86, 86);
|
||
|
|
border-bottom: 0;
|
||
|
|
margin-bottom: -1px;
|
||
|
|
|
||
|
|
cursor: default;
|
||
|
|
color: whitesmoke;
|
||
|
|
}
|
||
|
|
|
||
|
|
.nodeTree {
|
||
|
|
overflow: auto;
|
||
|
|
min-width: 242px;
|
||
|
|
max-height: var(--top-and-bottom);
|
||
|
|
border-right: solid 0.5px rgb(87, 86, 86);
|
||
|
|
flex: 1;
|
||
|
|
scroll-behavior: smooth;
|
||
|
|
/* position: relative; */
|
||
|
|
}
|
||
|
|
|
||
|
|
.nodearrow {
|
||
|
|
transition: all 0.2s;
|
||
|
|
}
|
||
|
|
|
||
|
|
.nodearrow:hover{
|
||
|
|
/* background-color: #2c2c2c;
|
||
|
|
border-radius: 50%; */
|
||
|
|
/* color: #ffffff; */
|
||
|
|
text-shadow:-0.5px -0.5px 0px #ffffff
|
||
|
|
}
|
||
|
|
|
||
|
|
.node {
|
||
|
|
font-size: 13px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.searchPanel {
|
||
|
|
position: absolute;
|
||
|
|
left: 0;
|
||
|
|
right: 0;
|
||
|
|
bottom: 0;
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
background-color: black;
|
||
|
|
padding: 0.1em;
|
||
|
|
border-radius: 0.5em;
|
||
|
|
}
|
||
|
|
|
||
|
|
.searchBox {
|
||
|
|
display: flex;
|
||
|
|
padding-left: 2px;
|
||
|
|
padding-right: 2px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.searchBox {
|
||
|
|
border: solid 0.5px rgb(98, 100, 100);
|
||
|
|
border-radius: 0.5em;
|
||
|
|
}
|
||
|
|
|
||
|
|
.searchBox input[type="search"] {
|
||
|
|
color: white;
|
||
|
|
flex: 1;
|
||
|
|
background: none;
|
||
|
|
outline: none;
|
||
|
|
border: none;
|
||
|
|
font-size: 0.9em;
|
||
|
|
}
|
||
|
|
|
||
|
|
.searchBox input[type="search"]:focus {
|
||
|
|
outline: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
.searchTitle {
|
||
|
|
padding: 0.3em;
|
||
|
|
padding-bottom: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.searchTitle label {
|
||
|
|
white-space: pre;
|
||
|
|
}
|
||
|
|
|
||
|
|
.searchList {
|
||
|
|
padding: 0.3em;
|
||
|
|
padding-bottom: 0;
|
||
|
|
overflow-y: auto;
|
||
|
|
flex: 1;
|
||
|
|
max-height: 15em;
|
||
|
|
}
|
||
|
|
|
||
|
|
.searchList .itemPath {
|
||
|
|
color: gray;
|
||
|
|
font-size: 0.9em;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
.inspectPanel {
|
||
|
|
overflow: auto;
|
||
|
|
overflow-x: hidden;
|
||
|
|
font-size: 13px;
|
||
|
|
min-width: 300px;
|
||
|
|
/* width:auto;
|
||
|
|
max-width: 360px; */
|
||
|
|
height: auto;
|
||
|
|
max-height: var(--top-and-bottom);
|
||
|
|
/* resize:horizontal; */
|
||
|
|
/* padding:2px; */
|
||
|
|
}
|
||
|
|
|
||
|
|
.inspectPanel input[type="number"] {
|
||
|
|
width: 4.5em;
|
||
|
|
}
|
||
|
|
|
||
|
|
.nodeName {
|
||
|
|
position: sticky;
|
||
|
|
top: 0;
|
||
|
|
background-color: #2c2c2c;
|
||
|
|
border-bottom: solid 1px rgb(87, 86, 86);
|
||
|
|
}
|
||
|
|
|
||
|
|
.nodeName {
|
||
|
|
display: flex;
|
||
|
|
/* flex:1; */
|
||
|
|
padding: 2px;
|
||
|
|
padding-left: 4px;
|
||
|
|
padding-right: 4px;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* .nodeName label{
|
||
|
|
flex:1;
|
||
|
|
} */
|
||
|
|
.comProperty,
|
||
|
|
.nodeProperty {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
color: whitesmoke;
|
||
|
|
word-break: keep-all;
|
||
|
|
white-space: nowrap;
|
||
|
|
padding: 2px;
|
||
|
|
margin-top: 3px;
|
||
|
|
margin-bottom: 3px;
|
||
|
|
padding-left: 4px;
|
||
|
|
padding-right: 4px;
|
||
|
|
width: auto;
|
||
|
|
|
||
|
|
/* white-space:pre-wrap; */
|
||
|
|
}
|
||
|
|
|
||
|
|
.comProperty input[type="color"] {
|
||
|
|
background-color: unset;
|
||
|
|
}
|
||
|
|
|
||
|
|
.comProperty select {
|
||
|
|
background-color: unset;
|
||
|
|
color: whitesmoke;
|
||
|
|
}
|
||
|
|
|
||
|
|
.comProperty option {
|
||
|
|
background-color: black;
|
||
|
|
color: whitesmoke;
|
||
|
|
}
|
||
|
|
|
||
|
|
.comProperty:hover {
|
||
|
|
background-color: black;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
.nodePropertyTitle {
|
||
|
|
display: inline-block;
|
||
|
|
width: 5em;
|
||
|
|
color: rgb(150, 150, 150);
|
||
|
|
text-align: right;
|
||
|
|
word-wrap: break-word;
|
||
|
|
/* word-break:normal; */
|
||
|
|
white-space: pre-wrap;
|
||
|
|
line-height: 0.95em;
|
||
|
|
margin-right: 1px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.nodePropertyTitle::selection {
|
||
|
|
background-color: #2553c9;
|
||
|
|
}
|
||
|
|
|
||
|
|
.comProperty .nodePropertyTitle {
|
||
|
|
width: 8em;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* .comProperty */
|
||
|
|
a {
|
||
|
|
color: rgb(14, 127, 233);
|
||
|
|
cursor: pointer;
|
||
|
|
}
|
||
|
|
|
||
|
|
a:hover {
|
||
|
|
color: rgb(52, 146, 235);
|
||
|
|
}
|
||
|
|
|
||
|
|
a:active {
|
||
|
|
color: rgb(104, 170, 233);
|
||
|
|
}
|
||
|
|
|
||
|
|
.nodePropertySubTitle {
|
||
|
|
display: inline-block;
|
||
|
|
width: 1em;
|
||
|
|
text-align: start;
|
||
|
|
line-height: 0.95em;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
.colorRect {
|
||
|
|
width: 1em;
|
||
|
|
height: 1em;
|
||
|
|
display: inline-block;
|
||
|
|
border-width: solid 1px black;
|
||
|
|
}
|
||
|
|
|
||
|
|
.comProperty .nodePropertySubTitle {
|
||
|
|
/* overflow-x: hidden; */
|
||
|
|
width: auto;
|
||
|
|
max-width: 172px;
|
||
|
|
word-wrap: break-word;
|
||
|
|
/* word-break:normal; */
|
||
|
|
/* white-space: wrap; */
|
||
|
|
line-height: 0.95em;
|
||
|
|
}
|
||
|
|
|
||
|
|
.prewrap {
|
||
|
|
white-space: pre-wrap;
|
||
|
|
}
|
||
|
|
|
||
|
|
.nodePropertySubTitle .icon-wrong2 {
|
||
|
|
color: rgb(253, 94, 94);
|
||
|
|
}
|
||
|
|
|
||
|
|
.nodePropertySubTitle .icon-right {
|
||
|
|
color: lightgreen;
|
||
|
|
}
|
||
|
|
|
||
|
|
.nodeTitle {
|
||
|
|
/* content-visibility: auto; */
|
||
|
|
/* pointer-events: none; */
|
||
|
|
display: block;
|
||
|
|
user-select: none;
|
||
|
|
/* word-wrap:; */
|
||
|
|
word-break: keep-all;
|
||
|
|
white-space: nowrap;
|
||
|
|
}
|
||
|
|
|
||
|
|
.nodeTitle:hover {
|
||
|
|
background-color: rgb(82, 80, 80);
|
||
|
|
}
|
||
|
|
|
||
|
|
.dcDesc {
|
||
|
|
font-weight: bold;
|
||
|
|
color: wheat;
|
||
|
|
}
|
||
|
|
|
||
|
|
hr {
|
||
|
|
width: calc(100% - 0px);
|
||
|
|
padding: 0;
|
||
|
|
margin: 0;
|
||
|
|
border: none;
|
||
|
|
border-bottom: solid 1px rgb(87, 86, 86);
|
||
|
|
/* background-color: red; */
|
||
|
|
/* border-color: rgb(87, 86, 86);
|
||
|
|
border-width: 0.5px; */
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
.setting {
|
||
|
|
position: fixed;
|
||
|
|
top: 0;
|
||
|
|
right: 0;
|
||
|
|
bottom: 0;
|
||
|
|
height: 100%;
|
||
|
|
max-height: calc(100%);
|
||
|
|
width: min(calc(100vw - 32px), 20em);
|
||
|
|
box-shadow: -1px 0 4px 0px black;
|
||
|
|
background-color: #2c2c2c;
|
||
|
|
padding: 1em;
|
||
|
|
padding-top: 0;
|
||
|
|
display: flex;
|
||
|
|
/* z-index:200; */
|
||
|
|
flex-direction: column;
|
||
|
|
user-select: none;
|
||
|
|
overflow-y: auto;
|
||
|
|
}
|
||
|
|
|
||
|
|
.setting textarea {
|
||
|
|
width: 100%;
|
||
|
|
resize: vertical;
|
||
|
|
max-height: 5em;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
.about {
|
||
|
|
display: flex;
|
||
|
|
/* z-index:200; */
|
||
|
|
flex-direction: column;
|
||
|
|
user-select: text;
|
||
|
|
}
|
||
|
|
|
||
|
|
.about .nodePropertyTitle {
|
||
|
|
user-select: text;
|
||
|
|
cursor: default;
|
||
|
|
margin-bottom: 10px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.setting span {
|
||
|
|
cursor: pointer;
|
||
|
|
}
|
||
|
|
|
||
|
|
.settingHeader {
|
||
|
|
display: flex;
|
||
|
|
padding: 2px;
|
||
|
|
padding-top: 1em;
|
||
|
|
position: sticky;
|
||
|
|
top: 0;
|
||
|
|
background-color: #2c2c2c;
|
||
|
|
border-bottom: 0.5px solid rgb(87, 86, 86);
|
||
|
|
}
|
||
|
|
|
||
|
|
.topSticky{
|
||
|
|
position: sticky;
|
||
|
|
top: -1em;
|
||
|
|
background-color: #2c2c2c;
|
||
|
|
border-bottom: 0.5px solid rgb(87, 86, 86);
|
||
|
|
}
|
||
|
|
|
||
|
|
.settingTitle {
|
||
|
|
flex: 1;
|
||
|
|
text-align: center;
|
||
|
|
font-size: 2em;
|
||
|
|
height: 1.4em;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
display: flex;
|
||
|
|
}
|
||
|
|
|
||
|
|
.settingTitle img{
|
||
|
|
height:1em;
|
||
|
|
width:1em;
|
||
|
|
margin-right: 10px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.setting label {
|
||
|
|
margin-top: 0.5em;
|
||
|
|
}
|
||
|
|
|
||
|
|
.searcItem {
|
||
|
|
content-visibility: auto;
|
||
|
|
height: 43px;
|
||
|
|
/* contain: size; */
|
||
|
|
}
|
||
|
|
|
||
|
|
.slide-fade-enter-active {
|
||
|
|
transition: all .3s ease;
|
||
|
|
}
|
||
|
|
|
||
|
|
.slide-fade-leave-active {
|
||
|
|
transition: all .2s;
|
||
|
|
}
|
||
|
|
|
||
|
|
.slide-fade-enter,
|
||
|
|
.slide-fade-leave-to
|
||
|
|
|
||
|
|
/* .slide-fade-leave-active for below version 2.1.8 */
|
||
|
|
{
|
||
|
|
transform: translateX(20em);
|
||
|
|
/* opacity: 0; */
|
||
|
|
}
|
||
|
|
|
||
|
|
.ResolutionResizer{
|
||
|
|
position: fixed;
|
||
|
|
top: 31px;
|
||
|
|
left: 0px;
|
||
|
|
resize: both;
|
||
|
|
overflow: hidden;
|
||
|
|
/* background-color: rgba(255, 217, 0, 0.555); */
|
||
|
|
pointer-events: none;
|
||
|
|
z-index: 1000;
|
||
|
|
min-width: 280px;
|
||
|
|
min-height: 200px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.ResolutionSelector {
|
||
|
|
position: absolute;
|
||
|
|
top: 31px;
|
||
|
|
right: 0px;
|
||
|
|
background-color: rgb(66, 66, 66);
|
||
|
|
padding: 0.3em;
|
||
|
|
border-radius: 0.5em;
|
||
|
|
box-shadow: 0 0 12px 1px black;
|
||
|
|
}
|
||
|
|
|
||
|
|
.ResolutionSelector hr {
|
||
|
|
margin-bottom: 0.5em;
|
||
|
|
}
|
||
|
|
|
||
|
|
.ResolutionSelector input[type="number"] {
|
||
|
|
/* width: 100%; */
|
||
|
|
/* margin: 0.3em; */
|
||
|
|
}
|
||
|
|
|
||
|
|
.resoItem {
|
||
|
|
cursor: pointer;
|
||
|
|
border-radius: 0.5em;
|
||
|
|
padding: 0.2em;
|
||
|
|
display: flex;
|
||
|
|
/* min-width: 200px; */
|
||
|
|
}
|
||
|
|
|
||
|
|
.flex1 {
|
||
|
|
flex: 1;
|
||
|
|
}
|
||
|
|
|
||
|
|
.sizeName {
|
||
|
|
display: flex;
|
||
|
|
min-width: 200px;
|
||
|
|
border-radius: 0.5em;
|
||
|
|
padding-left: 0.5em;
|
||
|
|
padding-right: 0.5em;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* .sizeName .name{
|
||
|
|
width:80px;
|
||
|
|
} */
|
||
|
|
.sizeName:hover {
|
||
|
|
background-color: lightgrey;
|
||
|
|
color: black;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
.cocosPanel {
|
||
|
|
padding: 1em;
|
||
|
|
max-height: var(--top);
|
||
|
|
overflow-y: auto
|
||
|
|
}
|
||
|
|
|
||
|
|
.varsCon {
|
||
|
|
margin-top: 0.5em;
|
||
|
|
display: grid;
|
||
|
|
grid-template-columns: 15em 15em
|
||
|
|
}
|
||
|
|
|
||
|
|
.localStorageCon {
|
||
|
|
margin-top: 0.5em;
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
}
|
||
|
|
|
||
|
|
.varItem {
|
||
|
|
/* width:10em; */
|
||
|
|
word-break: break-all;
|
||
|
|
}
|
||
|
|
|
||
|
|
.localStorageCon .varItem:hover{
|
||
|
|
background-color: #070707;
|
||
|
|
}
|
||
|
|
|
||
|
|
.varItemValue {
|
||
|
|
color: lightgray;
|
||
|
|
}
|
||
|
|
|
||
|
|
.extensionPanel {
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
flex: 1;
|
||
|
|
padding: 1em;
|
||
|
|
}
|
||
|
|
|
||
|
|
.extensionPanel textarea {
|
||
|
|
flex: 1;
|
||
|
|
width: 100%;
|
||
|
|
resize: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
.extensionPanel hr {
|
||
|
|
margin-top: 1em;
|
||
|
|
margin-bottom: 1em;
|
||
|
|
}
|
||
|
|
|
||
|
|
.nanStr{
|
||
|
|
background:black;
|
||
|
|
padding-left:10px;
|
||
|
|
padding-right:10px;
|
||
|
|
z-index:1000;
|
||
|
|
color: white;
|
||
|
|
}
|
||
|
|
|
||
|
|
</style>
|
||
|
|
|
||
|
|
<body>
|
||
|
|
<div id="app" style="visibility:hidden;" @contextmenu="showAppMenu" @click="showResolutionSelector=false">
|
||
|
|
<validate-panel></validate-panel>
|
||
|
|
<div class="gamePanel" :style="setting.gamePanelStyle">
|
||
|
|
<div class="gamebtns">
|
||
|
|
<div class="gameBtnsLeft">
|
||
|
|
<button @click="refresh" title="Refresh Game">
|
||
|
|
<span class="iconfont icon-shuaxin"></span>
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
<div class="gameBtnsRight">
|
||
|
|
<button @click="playOrPause" title="Play|Pause Game">
|
||
|
|
<span :class="[pauseIcon]"></span>
|
||
|
|
</button>
|
||
|
|
<button @click="toggleFps" title="Show|Hide FPS">
|
||
|
|
<span class="iconfont icon-zoushi"></span>
|
||
|
|
</button>
|
||
|
|
<button @click="toggleSnd" title="Mute|Resume Sound">
|
||
|
|
<span v-if="!isMuted" class="iconfont icon-sound-"></span>
|
||
|
|
<span v-if="isMuted" class="iconfont icon-sound-1"></span>
|
||
|
|
</button>
|
||
|
|
<button @contextmenu.stop="toggle3dHover" @click="toggleHover" :style="hoverBtnStyle" title="find by Hover, left click for 2d | right click for 3d">
|
||
|
|
<span class="iconfont icon-aim1"></span>
|
||
|
|
<label style="position: absolute;top: -0.3em;right: -0.6em;font-size: smaller;">{{hoverMark}}</label>
|
||
|
|
</button>
|
||
|
|
<button @click="toggleDesignMode" :style="designBtnStyle" title="toggle design mode">
|
||
|
|
<span class="iconfont icon-drag"></span>
|
||
|
|
</button>
|
||
|
|
<button @click.stop="showResolutionSelector=!showResolutionSelector" title="adjust resolution and rotation" :style="resolutionBtnStyle">
|
||
|
|
<span class="iconfont icon-xuanzhuan"></span>
|
||
|
|
</button>
|
||
|
|
<button v-if="!showDevToolInTab" @click="openWvDevTool" title="Open DevTool of Game Page">
|
||
|
|
<span class="iconfont icon-tools-hardware"></span>
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<resolution-resizer></resolution-resizer>
|
||
|
|
<resolution-selector v-if="showResolutionSelector"></resolution-selector>
|
||
|
|
<hr>
|
||
|
|
<!-- http://gameview.creator-star.cn/cocos/cake/index.html -->
|
||
|
|
<!-- http://localhost:7456 -->
|
||
|
|
<webview ref="wv" preload="./preload.js" :src="gameUrl" :style="setting.webviewStyle"
|
||
|
|
:disablewebsecurity="disableWebSec" nodeintegrationinsubframes="true"
|
||
|
|
webpreferences="contextIsolation=no"></webview>
|
||
|
|
<hr>
|
||
|
|
<div class="logs" ref="logs">
|
||
|
|
<div class="logItem" v-for="l in smallLogs" :style="{color:logColor(l.t)}"><span
|
||
|
|
class="logTime">{{l.time}}:</span>{{l.d}}</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="nodePanel" v-show="!setting.simpleMode">
|
||
|
|
<div class="tab">
|
||
|
|
<div class="tabs">
|
||
|
|
<div :class="{tabItem:true,selected:tab==0}" @click="tab=0" @contextmenu.stop="showMenu">
|
||
|
|
<span class="iconfont icon-shuxingjiegou"></span>{{sceneName}}
|
||
|
|
<a v-show="showRefreshTreeBtn" @click="forceUpdateTree" class="iconfont icon-shuaxin"></a>
|
||
|
|
</div>
|
||
|
|
<div :class="{tabItem:true,selected:tab==1}" @click="tab=1">
|
||
|
|
<span class="iconfont icon-terminal-box-line"></span>{{showDevToolInTab?"DevTool":"Console"}}
|
||
|
|
</div>
|
||
|
|
<div :class="{tabItem:true,selected:tab==2}" @click="tab=2">
|
||
|
|
<span class="iconfont icon-jiarehuoyan-xianxing"></span>Cocos
|
||
|
|
</div>
|
||
|
|
<div :class="{tabItem:true,selected:tab==3}" @click="tab=3">
|
||
|
|
<span class="iconfont icon-jiedian"></span>Extension
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div>
|
||
|
|
<button @click="showHelp" title="Help">
|
||
|
|
<span class="iconfont icon-help"></span>
|
||
|
|
</button>
|
||
|
|
<!-- <button @click="location.reload()" title="Refresh Plugin">
|
||
|
|
<span class="iconfont icon-shuaxin"></span>
|
||
|
|
</button> -->
|
||
|
|
<button @click="showSetting" title="Setting">
|
||
|
|
<span class="iconfont icon-shezhi"></span>
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<!-- <hr> -->
|
||
|
|
<!-- "n","deep","selected","close" -->
|
||
|
|
<div style="display:flex;flex:1;position:relative;" v-show="tab==0">
|
||
|
|
<div ref="nodeTree" v-if="nodeTree" class="nodeTree">
|
||
|
|
<div style="min-width: max-content;">
|
||
|
|
<node-view v-for="sn in nodeTree.children" :n="sn" :deep="1" :selected="selectedNode==sn.id"
|
||
|
|
:key="sn.id"></node-view>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div v-show="!nodeTree" style="font-size: 50px;text-align: center;margin: 100px auto auto;text-shadow: 3px 3px 4px #0000004a;">
|
||
|
|
<div style="color: rgb(0 0 0 / 0%);background: linear-gradient(60deg, #36d1ff, #fafdff, #23b2ff, #ffff72);background-clip: text;-webkit-background-clip: text;">COCOS</div>
|
||
|
|
<div style="color: rgb(0 0 0 / 0%);background: linear-gradient(60deg, #b3b3b38c, #fafdff, #656565, #b7b7b0);background-clip: text;-webkit-background-clip: text;">INSPECTOR</div>
|
||
|
|
|
||
|
|
<div style="font-size: 20px;margin-top: auto;color: rgb(31, 154, 255);">loading ...</div>
|
||
|
|
<!-- <div style="font-size: 0.5em;">loading...</div> -->
|
||
|
|
</div>
|
||
|
|
<div class="inspectPanel" v-if="nodeDetail">
|
||
|
|
<node-detail-view :detail="nodeDetail"></node-detail-view>
|
||
|
|
<node-component v-for="com in nodeDetail.coms" :com="com" :key="com"></node-component>
|
||
|
|
</div>
|
||
|
|
<search-panel></search-panel>
|
||
|
|
</div>
|
||
|
|
<webview v-show="tab==1 && showDevToolInTab" nodeintegrationinsubframes="true" webpreferences="contextIsolation=no" ref="devtools" src="about:blank"></webview>
|
||
|
|
<console-panel v-if="!showDevToolInTab && tab==1"></console-panel>
|
||
|
|
<cocos-panel v-if="tab==2"></cocos-panel>
|
||
|
|
<extension-panel v-if="tab==3"></extension-panel>
|
||
|
|
</div>
|
||
|
|
<my-help ref="help"></my-help>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
|
||
|
|
<div class="settingBox" id="setting">
|
||
|
|
<transition name="slide-fade">
|
||
|
|
<div class="setting" style="display: none;" v-show="show">
|
||
|
|
|
||
|
|
<div class="settingHeader">
|
||
|
|
<span class="iconfont icon-shanchu" @click="close" style="font-size: 1.5em;"></span>
|
||
|
|
|
||
|
|
<div class="settingTitle"><img src="icon.png"/> Setting</div>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- <hr> -->
|
||
|
|
<label>
|
||
|
|
Log Count Under GameView:
|
||
|
|
<!-- {{logCount}} -->
|
||
|
|
<input type="number" @change="saveToStorage" v-model="logCount" min="0" max="100" step="1" />
|
||
|
|
</label>
|
||
|
|
<label>
|
||
|
|
Url Parameters:
|
||
|
|
<!-- {{logCount}} -->
|
||
|
|
<br>
|
||
|
|
<textarea placeholder="example:?xxx=y&abc=d" @change="saveToStorage" v-model="urlParams"></textarea>
|
||
|
|
</label>
|
||
|
|
<label>
|
||
|
|
Custom Url:
|
||
|
|
<!-- {{logCount}} -->
|
||
|
|
<br>
|
||
|
|
<textarea placeholder="example:http://xxx.com" @change="saveToStorage"
|
||
|
|
v-model="customUrl"></textarea>
|
||
|
|
</label>
|
||
|
|
<label>
|
||
|
|
<input type="checkbox" @change="saveToStorage" v-model="retinaEnable" />
|
||
|
|
Retina Enable
|
||
|
|
</label>
|
||
|
|
<label>
|
||
|
|
<input type="checkbox" @change="saveToStorage" v-model="autoUpdateTree" />
|
||
|
|
Auto Update Node Tree
|
||
|
|
</label>
|
||
|
|
<label>
|
||
|
|
<input type="checkbox" @change="saveToStorage" v-model="syncNodeDetail" />
|
||
|
|
Sync Node Detail
|
||
|
|
</label>
|
||
|
|
<hr>
|
||
|
|
<br>
|
||
|
|
<b>Need Restart Inspector/CocosCreator After Change</b>
|
||
|
|
<label>
|
||
|
|
<input type="checkbox" @change="saveToStorage" v-model="disableWebSec" />
|
||
|
|
Disable Web Security
|
||
|
|
</label>
|
||
|
|
<label>
|
||
|
|
<input type="checkbox" @change="saveToStorage" v-model="showDevToolInTab" />
|
||
|
|
Show DevTool In Tab
|
||
|
|
</label>
|
||
|
|
<hr>
|
||
|
|
<br>
|
||
|
|
<b>FGUI Setting</b>
|
||
|
|
<label>
|
||
|
|
<input type="checkbox" @change="saveToStorage" v-model="displayAsFairyTree" />
|
||
|
|
Display As Fairy Tree
|
||
|
|
</label>
|
||
|
|
<label>
|
||
|
|
<input type="checkbox" :disabled="!displayAsFairyTree" @change="saveToStorage"
|
||
|
|
v-model="hideFairyComContainer" />
|
||
|
|
Hide Fairy Component Container
|
||
|
|
</label>
|
||
|
|
|
||
|
|
<hr>
|
||
|
|
<br>
|
||
|
|
<div v-once>Feedback: <a @click="remote.shell.openExternal('https://forum.cocos.org/t/topic/116855')"
|
||
|
|
target="_blank">https://forum.cocos.org/t/topic/116855</a></div>
|
||
|
|
<br>
|
||
|
|
<div v-once>Check New Version: <a
|
||
|
|
@click="remote.shell.openExternal('https://store.cocos.com/app/detail/2940')"
|
||
|
|
target="_blank">https://store.cocos.com/app/detail/2940</a></div>
|
||
|
|
<hr>
|
||
|
|
<br>
|
||
|
|
<!-- <br> -->
|
||
|
|
<!-- <br> -->
|
||
|
|
<div class="about">
|
||
|
|
<div class="settingHeader">
|
||
|
|
<div class="settingTitle">About </div>
|
||
|
|
</div>
|
||
|
|
<!-- <hr> -->
|
||
|
|
<div>
|
||
|
|
<span class="nodePropertyTitle">Author: </span>
|
||
|
|
chuan.z
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<span class="nodePropertyTitle">Contact: </span>
|
||
|
|
<a @click="remote.shell.openExternal('mailto:bytetalking@qq.com')">bytetalking@qq.com</a>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<span class="nodePropertyTitle">WebSite: </span>
|
||
|
|
<a @click="remote.shell.openExternal('https://bytetalking.com')">https://bytetalking.com</a>
|
||
|
|
</div>
|
||
|
|
<hr>
|
||
|
|
<div>
|
||
|
|
<span class="nodePropertyTitle">WeChat Offical Account: </span>
|
||
|
|
ByteTalking
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<span class="nodePropertyTitle">QRCode: </span>
|
||
|
|
<img src="wechatOC.jpeg" style="max-width: 150px;max-height: 150px;">
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</transition>
|
||
|
|
</div>
|
||
|
|
<!-- <div class="validatePanel">
|
||
|
|
|
||
|
|
</div> -->
|
||
|
|
|
||
|
|
|
||
|
|
<script src="./app.js">
|
||
|
|
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
|
||
|
|
</html>
|