circlecloud/ms
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

feat: support multi code page

Browse Source 
Signed-off-by: MiaoWoo <admin@yumc.pw>
This commit is contained in:
MiaoWoo 2020-01-13 15:28:25 +08:00
parent 859a3a9171
commit 4e6cda0545
4 changed files with 73 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
packages/plugins/public/index.html
View File

@ -10,7 +10,7 @@
<!-- QQ应用模式 -->
<meta name="x5-page-mode" content="app">
<title>MiaoConsole 调试工具</title>
<script src="https://cdn.jsdelivr.net/npm/axios@0.19.0/dist/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios@0.19.0/dist/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.3.1/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/avalon2@2.2.10/dist/avalon.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.4.1/dist/js/bootstrap.min.js"></script>
@ -41,6 +41,7 @@
<script src="js/message.js"></script>
<script src="js/term.js"></script>
<script src="js/websocket.js"></script>
<script src="js/main.js"></script>
<script src="js/editor.js"></script>
</head>
@ -65,6 +66,10 @@
</div>
<div class="panel panel-info" :visible='@classes.total == @classes.loaded && @classes.total != 0'>
<div class="panel-heading">代码编辑器</div>
<label class="col-sm-1 control-label">代码页</label>
<label :for="el in @codes" class="radio-inline">
<input type="radio" :duplex="@code" :attr="{value:el}"> {{el}}
</label>
<div id="editor" style="height: 450px; width:100%;"></div>
</div>
</div>

22
packages/plugins/public/js/editor.js
View File

@ -1,6 +1,4 @@
let editor
let codeStorageKey = "MiaoScript:code";
let monaco_path = 'https://cdn.jsdelivr.net/npm/monaco-editor@0.18.1/min'
require.config({ paths: { 'vs': monaco_path + '/vs' } });
window.MonacoEnvironment = { getWorkerUrl: () => proxy };
@ -31,15 +29,15 @@ require(["vs/editor/editor.main"], async function() {
main.classes.total = 0
main.classes.loaded = 0
editor = monaco.editor.create(document.getElementById('editor'), {
value: window.localStorage.getItem(codeStorageKey) || 'org.bukkit.Bukkit.server.version',
value: '',
language: 'javascript',
automaticLayout: true,
scrollBeyondLastLine: false,
theme: 'vs-dark'
});
main.load(editor)
editor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.KEY_S, function() {
window.localStorage.setItem(codeStorageKey, editor.getValue())
showMessenger('代码保存成功!')
main.save(editor)
})
editor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.KEY_R, function() {
main.send('execCode', getSelectContent(editor) || editor.getValue())
@ -48,7 +46,7 @@ require(["vs/editor/editor.main"], async function() {
main.send('execCommand', getSelectContent(editor))
})
editor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.KEY_Q, function() {
console.log('switch')
main.switch(editor)
})
loadExtraLibs(`https://cdn.jsdelivr.net/gh/circlecloud/ms@master/packages/types/dist/typings/jdk`, (line) => line.startsWith('java.lang'))
if (main.type !== 'unknow') {
@ -57,5 +55,15 @@ require(["vs/editor/editor.main"], async function() {
});
function getSelectContent(editor) {
let selInfo = editor.getSelection();
return editor.getModel().getLineContent(selInfo.startLineNumber).substr(selInfo.startColumn - 1, selInfo.endColumn - selInfo.startColumn);
if (selInfo.startLineNumber === selInfo.endLineNumber) {
return editor.getModel().getLineContent(selInfo.startLineNumber).substr(selInfo.startColumn - 1, selInfo.endColumn - selInfo.startColumn);
} else {
let first = editor.getModel().getLineContent(selInfo.startLineNumber).substr(selInfo.startColumn - 1)
let content = '\n'
for (let i = selInfo.startLineNumber + 1; i < selInfo.endLineNumber; i++) {
content += editor.getModel().getLineContent(i) + '\n'
}
let last = editor.getModel().getLineContent(selInfo.endLineNumber).substr(0, selInfo.endColumn - 1)
return first + content + last
}
}

51
packages/plugins/public/js/main.js
View File

@ -1,13 +1,15 @@
var ws
var SPLIT_LINE = '\\M\\W\\S|T|S|S/L/T/'
let serverKey = 'MiaoScript:server'
let codeStorageKey = "MiaoScript:code:"
var main = avalon.define({
$id: 'main',
server: window.localStorage.getItem(serverKey) || location.host,
type: 'unknow',
logs: '',
codes: ["default", "bukkit", "sponge", "common", "test", "dev", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
code: 'default',
classes: {
total: 1,
total: 0,
loaded: 0,
},
precent: () => {
@ -24,39 +26,30 @@ var main = avalon.define({
if (event.key !== "Enter") {
return;
}
if (ws && ws.readyState == 1) {
ws.close()
}
window.localStorage.setItem(serverKey, main.server)
ws = new WebSocket(`${location.protocol == 'http:' ? 'ws' : 'wss'}://${main.server}/ws`)
ws.onmessage = (event) => {
const [type, obj] = event.data.split(SPLIT_LINE)
switch (type) {
case "log":
main.log(obj)
break;
case "type":
main.type = obj;
break;
}
}
ws.onopen = () => {
main.send("execDetect", "type");
}
ws.onclose = (ev) => {
main.log(`Remote Server Close Connection... ${ev.code}`)
if (ev.code == 1006) {
setTimeout(() => {
main.connect()
}, 1000)
}
}
connectWebSocket()
},
init: () => {
if (main.server) {
main.connect()
}
},
load: (editor) => {
editor.setValue(window.localStorage.getItem(codeStorageKey + main.code) || '')
},
save: (editor) => {
window.localStorage.setItem(codeStorageKey + main.code, editor.getValue())
showMessenger('代码页 ' + main.code + ' 保存成功!')
},
switch: (editor) => {
let index = main.codes.indexOf(main.code) + 1
main.code = main.codes[index == main.codes.length ? 0 : index]
}
});
main.$watch('code', (now, old, name) => {
window.localStorage.setItem(codeStorageKey + old, editor.getValue())
showMessenger('代码页 ' + old + ' 保存成功!')
editor.setValue(window.localStorage.getItem(codeStorageKey + now) || '// empty code page ' + now)
})
main.init()

30
packages/plugins/public/js/websocket.js
View File

@ -0,0 +1,30 @@
var ws;
function connectWebSocket() {
if (ws && ws.readyState == 1) {
ws.close()
}
window.localStorage.setItem(serverKey, main.server)
ws = new WebSocket(`${location.protocol == 'http:' ? 'ws' : 'wss'}://${main.server}/ws`)
ws.onmessage = (event) => {
const [type, obj] = event.data.split(SPLIT_LINE)
switch (type) {
case "log":
main.log(obj)
break;
case "type":
main.type = obj;
break;
}
}
ws.onopen = () => {
main.send("execDetect", "type");
}
ws.onclose = (ev) => {
main.log(`Remote Server Close Connection... ${ev.code}`)
if (ev.code == 1006) {
setTimeout(() => {
main.connect()
}, 1000)
}
}
}