feat: support multi code page

Signed-off-by: MiaoWoo <admin@yumc.pw>

packages/plugins/public/index.html

@@ -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>

packages/plugins/public/js/editor.js

@@ -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())
+        main.save(editor)
-        showMessenger('代码保存成功!')
     })
     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
+    }
 }

packages/plugins/public/js/main.js

@@ -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) {
+        connectWebSocket()
-            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)
-            }
-        }
     },
     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()

packages/plugins/public/js/websocket.js

@@ -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)
+        }
+    }
+}