Merge branch 'dev' into dep-lock

package.json

@@ -17,6 +17,8 @@
 		"indexdbwrapper": "^1.0.4",
 		"jszip": "^3.2.2",
 		"moment": "^2.24.0",
+		"monaco-editor": "^0.19.0",
+		"monaco-editor-webpack-plugin": "^1.8.1",
 		"path": "^0.12.7",
 		"querystringify": "^2.1.1",
 		"semver": "^7.1.1",

public/index.html

@@ -17,7 +17,7 @@
 </noscript>
 <script>
 	window.__data = {
-		token : "<%= process.env.NODE_ENV === 'development' ? 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6MjA4NSwibmFtZSI6IuWKs-eQquWzsCIsImFjY291bnQiOiJsYW9xaWZlbmciLCJlbWFpbCI6Imxhb3FpZmVuZ0BkdWliYS5jb20uY24iLCJtb2JpbGUiOiIxMzQ1Njc3NDE1MyIsImRpbmdVc2VySWQiOiI1MDY5MDYyOTIxMjkxMDAxIiwibW9kZWxBdXRob3JpemUiOmZhbHNlLCJsb2dpblRpbWVvdXQiOjE0ODA5LCJnbXRDcmVhdGUiOjE1MzQ0MTIwMTUwMDAsImdtdE1vZGlmaWVkIjoxNTczODgyMDk2MDAwLCJzeXN0ZW1JZFNldCI6WzAsMSwzNCwyMjcsMzYsMzcsMjMxLDIwMywxOSwyMSwyNDYsMjMsMjUsMjQ5LDI3LDMwXSwiaWF0IjoxNTc1MzQwMzg2fQ.2JEYMRx6wbJsMIMh3quyM14OsoMz_iJRq4Az_xz-WTc' : '$TOKEN$' %>",
+		token : "<%= process.env.NODE_ENV === 'development' ? 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6MjA4NSwibmFtZSI6IuWKs-eQquWzsCIsImFjY291bnQiOiJsYW9xaWZlbmciLCJlbWFpbCI6Imxhb3FpZmVuZ0BkdWliYS5jb20uY24iLCJtb2JpbGUiOiIxMzQ1Njc3NDE1MyIsImRpbmdVc2VySWQiOiI1MDY5MDYyOTIxMjkxMDAxIiwibW9kZWxBdXRob3JpemUiOmZhbHNlLCJsb2dpblRpbWVvdXQiOjgzMzUzLCJnbXRDcmVhdGUiOjE1MzQ0MTIwMTUwMDAsImdtdE1vZGlmaWVkIjoxNTczODgyMDk2MDAwLCJzeXN0ZW1JZFNldCI6WzAsMSwzNCwyMjcsMzYsMzcsMjMxLDIwMyw0NCwxOSwyMSwyNDYsMjMsMjQ5LDI1LDI3LDMwXSwiaWF0IjoxNTc4Mjc3OTg5fQ.mm6T34NuMBwTKaLBbVOI5AqGQNC9rwfiAdIv8c4C4_I' : '$TOKEN$' %>",
 		apiHost : "<%= process.env.NODE_ENV === 'development' ? 'http://beacon.duibadev.com.cn' : '$API_HOST$' %>"
 	}
 </script>

src/views/Editor.vue

@@ -88,12 +88,15 @@
 			});
 
 			await playWaiting(this.prepare(), this.$t('Preparing')).catch(e => {
+				console.log(e);
 			});
 			setTimeout(() => {
-				startCodeSyncServe(this.codeSyncServeConfig);
+				//startCodeSyncServe(this.codeSyncServeConfig);
 			}, 100);
 
-			this.loadProject();
+			this.loadProject().catch(e => {
+				console.log(e);
+			});
 		},
 		destroyed() {
 			document.removeEventListener('keydown', this.onKeyPress)

src/views/Editor/behavior-editor/MetaEditorDialog.vue

 <template>
-	<el-dialog :title="$t('Meta Editor')" width="80%" :visible.sync="visible"
+  <el-dialog
+    :title="$t('Meta Editor')"
+    width="80%"
+    :visible.sync="visible"
     :close-on-click-modal="false"
     :close-on-press-escape="false"
     :show-close="false"
@@ -8,17 +11,39 @@
     custom-class="flex-dialog behavior-editor-dialog"
   >
     <div class="meta-editor-wrapper">
-			<el-form ref="form" v-if="meta" :model="meta" :rules="rules" :show-message="false" class="info-editor" size="mini"
-			         label-position="right" label-width="70px" @submit.native.prevent>
+      <el-form
+        ref="form"
+        v-if="meta"
+        :model="meta"
+        :rules="rules"
+        :show-message="false"
+        class="info-editor"
+        size="mini"
+        label-position="right"
+        label-width="70px"
+        @submit.native.prevent
+      >
         <template>
           <el-form-item prop="id" :label="$t('ID')">
-						<el-input v-model="meta.id" :placeholder="$t('ID')" :readonly="!editable"/>
+            <el-input
+              v-model="meta.id"
+              :placeholder="$t('ID')"
+              :readonly="!editable"
+            />
           </el-form-item>
           <el-form-item prop="name" :label="$t('Name')">
-						<el-input v-model="meta.name" :placeholder="$t('Name')" :readonly="!editable"/>
+            <el-input
+              v-model="meta.name"
+              :placeholder="$t('Name')"
+              :readonly="!editable"
+            />
           </el-form-item>
           <el-form-item prop="desc" :label="$t('Desc')">
-						<el-input v-model="meta.desc" :placeholder="$t('Description')" :readonly="!editable"/>
+            <el-input
+              v-model="meta.desc"
+              :placeholder="$t('Description')"
+              :readonly="!editable"
+            />
           </el-form-item>
           <!--<el-form-item prop="type" label="Type">
 						<el-input v-model="meta.type" :placeholder="$t('Type')" :readonly="!editable"/>
@@ -27,27 +52,59 @@
 						<el-input v-model="meta.group" :placeholder="$t('Group')" :readonly="!editable"/>
           </el-form-item>-->
           <el-form-item :label="$t('Props')">
-						<el-link :underline="false" @click="onClickEditProps" :disabled="!editable">
+            <el-link
+              :underline="false"
+              @click="onClickEditProps"
+              :disabled="!editable"
+            >
               <template v-if="Object.keys(meta.props).length">
-								<el-tag type="success" size="mini" v-for="(option, key) in meta.props" :key="key">{{key}}</el-tag>
+                <el-tag
+                  type="success"
+                  size="mini"
+                  v-for="(option, key) in meta.props"
+                  :key="key"
+                  >{{ key }}</el-tag
+                >
               </template>
-							<template v-else>{{$t('Empty')}}</template>
+              <template v-else>{{ $t("Empty") }}</template>
             </el-link>
           </el-form-item>
           <el-form-item :label="$t('Output')">
             <div style="display: flex;flex: 1;">
-							<el-select style="flex: 1;" v-model="meta.output" :disabled="!editable" allow-create filterable multiple
-							           :placeholder="$t('Output')"/>
+              <el-select
+                style="flex: 1;"
+                v-model="meta.output"
+                :disabled="!editable"
+                allow-create
+                filterable
+                multiple
+                :placeholder="$t('Output')"
+              />
             </div>
           </el-form-item>
         </template>
       </el-form>
       <div style="margin-top: 5px;">
-				<code-sync-indicator/>
-				<el-tag v-for="(item, key) in exposeVariables" :key="key" size="mini">{{item}}</el-tag>
+        <code-sync-indicator />
+        <el-tag v-for="(item, key) in exposeVariables" :key="key" size="mini">{{
+          item
+        }}</el-tag>
       </div>
       <!--<el-input v-if="meta" class="script-editor" :readonly=" !editable" type="textarea" :placeholder="$t('Code')"
       v-model="meta.script"></el-input>-->
+      <!-- <codemirror
+        ref="codeEditor"
+        v-if="meta"
+        v-model="meta.script"
+        :options="cmOptions"
+        @cursorActivity="onCodeChange"
+      />-->
+      <!--<monaco-editor
+        ref="codeEditor"
+        v-if="meta"
+        :code="meta.script"
+        :options="monacoConfig"
+      />-->
       <code-editor v-if="meta" v-model="meta.script"/>
     </div>
     <div slot="footer" class="dialog-footer">
@@ -56,32 +113,45 @@
           <el-button size="mini" plain @click="copyMeta">CopyMeta</el-button>
           <el-popover>
             <div ref="pasteBoard" @paste="onPaste">Click and Ctrl+V</div>
-						<el-button size="mini" slot="reference" plain @click="pasteMeta">PasteMeta</el-button>
+            <el-button size="mini" slot="reference" plain @click="pasteMeta"
+              >PasteMeta</el-button
+            >
           </el-popover>
         </el-button-group>
-				<el-button size="mini" plain @click="cancel">{{$t('Cancel')}}</el-button>
+        <el-button size="mini" plain @click="cancel">{{
+          $t("Cancel")
+        }}</el-button>
         <!--<el-button size="mini" plain @click="save(true)">{{$t('Save And Preview')}}</el-button>-->
-				<el-button size="mini" type="primary" plain @click="save(false)">{{$t('Save')}}</el-button>
+        <el-button size="mini" type="primary" plain @click="save(false)">{{
+          $t("Save")
+        }}</el-button>
       </div>
     </div>
-		<props-editor-dialog ref="propsEditorDialog"/>
+    <props-editor-dialog ref="propsEditorDialog" />
   </el-dialog>
 </template>
 
 <script>
-	import ElFormItem from "./inputs/form-item";
-	import PropsEditorDialog from "./PropsEditorDialog";
-	import copy from 'copy-to-clipboard'
-	import {clonePureObj} from "../../../utils";
-	import events from '../../../global-events';
-	import CodeSyncIndicator from "../BottomBar/CodeSyncIndicator";
-	import CodeEditor from "./CodeEditor";
+import ElFormItem from "./inputs/form-item";
+import PropsEditorDialog from "./PropsEditorDialog";
+//import MonacoEditor from "../components/MonacoEditor";
+import copy from "copy-to-clipboard";
+import { clonePureObj } from "../../../utils";
+import events from "../../../global-events";
+import CodeSyncIndicator from "../BottomBar/CodeSyncIndicator";
+import CodeEditor from "./CodeEditor";
 
-	const exposeVariables = ['args', 'props', 'target', 'global', 'vm', 'engine'];
+const exposeVariables = ["args", "props", "target", "global", "vm", "engine"];
 
-	export default {
+export default {
   name: "MetaEditorDialog",
-		components: {CodeEditor, CodeSyncIndicator, PropsEditorDialog, ElFormItem},
+  components: {
+    CodeEditor,
+    CodeSyncIndicator,
+    PropsEditorDialog,
+    ElFormItem,
+    //"monaco-editor": MonacoEditor
+  },
   data() {
     return {
       visible: false,
@@ -90,28 +160,43 @@
       exposeVariables,
 
       rules: {
-					id: [
-						{required: true, trigger: 'blur'},
-					],
-					name: [
-						{required: true, trigger: 'blur'}
-					],
+        id: [{ required: true, trigger: "blur" }],
+        name: [{ required: true, trigger: "blur" }]
+      },
+      cmOptions: {
+        tabSize: 2,
+        styleActiveLine: true,
+        theme: "default",
+        line: true,
+        matchBrackets: true,
+        autoCloseBrackets: true,
+        extraKeys: {
+          "Alt-Space": "autocomplete"
+        },
+
+        lineNumbers: true,
+        mode: { name: "javascript", globalVars: true },
+        gutters: ["CodeMirror-lint-markers"],
+        lint: true
       },
+      monacoConfig: {
+        language: "javascript"
       }
+    };
   },
   mounted() {
-			events.$on('edit-save', this.onEditSave);
+    events.$on("edit-save", this.onEditSave);
   },
-		destroyed(){
-			events.$off('edit-save', this.onEditSave);
+  destroyed() {
+    events.$off("edit-save", this.onEditSave);
   },
   computed: {
     editable() {
-				return this.meta;// && this.meta.type !== 'builtin';
+      return this.meta; // && this.meta.type !== 'builtin';
     },
     props() {
-				return Object.keys(this.meta.props).join(',')
-			},
+      return Object.keys(this.meta.props).join(",");
+    }
   },
   methods: {
     edit(meta) {
@@ -119,23 +204,28 @@
       this.meta = clonePureObj(meta);
       this.oldMetaID = this.meta.id;
 
-				events.$emit('edit-open', this.meta);
+      events.$emit("edit-open", this.meta.script);
     },
-			onEditSave(code){
-				this.$set(this.meta, 'script', code);
+    onEditSave(code) {
+      this.$set(this.meta, "script", code);
     },
     onClickEditProps() {
       this.$refs.propsEditorDialog.edit(this.meta.props);
     },
     save(isPreview) {
-				this.$refs.form.validate((valid) => {
+      this.$refs.form.validate(valid => {
         if (valid) {
-						if (this.oldMetaID !== this.meta.id && this.$store.getters.metaIDExists(this.meta.id)) {
-							this.$alert(this.$t('This Meta ID is in use, can not save'), this.$t('Alert'))
-								.catch((e) => {
-								});
+          if (
+            this.oldMetaID !== this.meta.id &&
+            this.$store.getters.metaIDExists(this.meta.id)
+          ) {
+            this.$alert(
+              this.$t("This Meta ID is in use, can not save"),
+              this.$t("Alert")
+            ).catch(e => {});
           } else {
-							this.$emit('input', this.meta, isPreview);
+            this.meta.script = this.$refs.codeEditor.editor.getValue();
+            this.$emit("input", this.meta, isPreview);
             this.visible = false;
           }
         } else {
@@ -158,18 +248,18 @@
         try {
           let meta = JSON.parse(metaStr);
           this.meta = meta;
-					} catch (e) {
-
-					}
+        } catch (e) {}
       }
     },
     focusPasteBoard() {
       this.$refs.pasteBoard.focus();
     },
+    onCodeChange(codemirror) {
+      //codemirror.showHint();
+      //console.log(code);
     }
   }
+};
 </script>
 
-<style scoped>
-
-</style>
+<style scoped></style>
\ No newline at end of file

src/views/Editor/behavior-editor/inputs/NodeSelectInput.vue

@@ -13,6 +13,7 @@
 				<div>
 					<el-scrollbar class="tree-scrollbar" wrap-class="wrap-x-hidden">
 						<el-tree
+							v-if="popoverVisible"
 							:data="behavior_views"
 							:props="defaultProps"
 							:expand-on-click-node="false"

src/views/Editor/components/MonacoEditor.vue

+<template>
+  <div id="container"></div>
+</template>
+<script>
+import * as monaco from "monaco-editor";
+export default {
+  name: "MonacoEditor",
+  props: {
+    options: Object,
+    code: String
+  },
+  async mounted() {
+    const { options, code } = this;
+    const res = await fetch(
+      "http://yun.duiba.com.cn/editor/zeroing/types/types.d.ts"
+    );
+    const types = await res.text();
+
+    const defaultConfig = {
+      language: "javascript",
+      value: "",
+      minimap: {
+        enabled: false
+      }
+    };
+
+    // compiler options
+    monaco.languages.typescript.javascriptDefaults.setCompilerOptions({
+      target: monaco.languages.typescript.ScriptTarget.ES6,
+      allowNonTsExtensions: true,
+      allowJs: true
+    });
+    // extra libraries
+    monaco.languages.typescript.javascriptDefaults.addExtraLib(
+      [types].join("\n")
+    );
+    const config = Object.assign({}, defaultConfig, options, { value: code });
+    this.editor = monaco.editor.create(
+      document.getElementById("container"),
+      config
+    );
+  }
+};
+</script>
+<style lang="scss" scoped>
+#container {
+  width: 100%;
+  height: 100%;
+}
+</style>

vue.config.js

-const serverHost = 'http://10.10.95.74:7777';
+const serverHost = 'http://10.10.95.74:7777'
 
-//const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');
+const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin')
 
 module.exports = {
   publicPath: process.env.NODE_ENV === 'production' ? '//yun.duiba.com.cn/editor/zeroing/v1/' : '',
@@ -26,9 +26,10 @@ module.exports = {
   },*/
   configureWebpack: {
     plugins: [
-      /*new MonacoWebpackPlugin({
-        languages: ['html', 'javascript', 'json']
-      })*/
+      new MonacoWebpackPlugin({
+        languages: ['javascript', 'typescript', 'json'],
+        publicPath: process.env.NODE_ENV === 'production' ? "/monaco" : "",
+      })
     ]
   }
-};
+}