feat：新增数据编辑弹框之间的联动

liuyonghua-cww · Sep 12, 2021 · e3ca4c5 · e3ca4c5
1 parent dfb4681
commit e3ca4c5
Show file tree

Hide file tree

Showing 7 changed files with 58 additions and 9 deletions.
diff --git a/learn-x6/package.json b/learn-x6/package.json
@@ -14,6 +14,7 @@
     "core-js": "^3.16.2",
     "deepmerge": "^4.2.2",
     "echarts": "^5.2.0",
+    "monaco-editor-webpack-plugin": "^1.9.0",
     "normalize.css": "^8.0.1",
     "vue": "^2.6.14",
     "vue-color": "^2.8.1",

diff --git a/learn-x6/src/components/Content/index.vue b/learn-x6/src/components/Content/index.vue
@@ -130,6 +130,7 @@ export default {
         this.initGraph();
         this.resize();
         this.initEvent();
+        window.graph = this.graph
     },
     methods: {
         ...mapMutations('app', [

diff --git a/learn-x6/src/components/Contextmenu/index.vue b/learn-x6/src/components/Contextmenu/index.vue
@@ -41,6 +41,7 @@ export default {
         setData(e) {
             e.stopPropagation();
             e.preventDefault();
+            this.$emit('setEditorVisible', true);
 
         }
     }

diff --git a/learn-x6/src/components/Editor/MonacoEditor.vue b/learn-x6/src/components/Editor/MonacoEditor.vue
@@ -1,23 +1,38 @@
 <template>
-    <a-modal v-model="editorVisible" title="Basic Modal">
-        <p>Some contents...</p>
-        <p>Some contents...</p>
-        <p>Some contents...</p>
+    <a-modal :visible="editorVisible" title="Basic Modal" @cancel="handleModal">
+        <MonacoEditor class="editor" v-model="code" language="javascript" />
     </a-modal>
 </template>
 
 <script>
+import MonacoEditor from 'vue-monaco'
 export default {
     name: "MonacoEditor",
+    components: {
+        MonacoEditor
+    },
     props: {
         editorVisible: {
             type: Boolean,
             default: false
         }
+    },
+    data() {
+        return {
+            code: 'const noop = () => {}'
+        }
+    },
+    methods: {
+        handleModal() {
+            this.$emit('setEditorVisible', false)
+        }
     }
 };
 </script>
 
 <style scoped>
-
+.editor {
+    width: 600px;
+    height: 800px;
+}
 </style>
diff --git a/learn-x6/src/store/modules/app.js b/learn-x6/src/store/modules/app.js
@@ -3,7 +3,8 @@ const state = () => ({
     graph: null,
     cellId: null, // 选中的id
     selectedCell: null, // 选中的对象,
-    configType: 0
+    configType: 0,
+    contextmenuNode: null // 右键的节点
 });
 const mutations = {
     setIsInit(state, v) {
@@ -20,6 +21,9 @@ const mutations = {
     },
     setConfigType(state, v) {
         state.configType = v;
+    },
+    setContextmenuNode(state, v) {
+        state.contextmenuNode = v;
     }
 };
 const actions = {};

diff --git a/learn-x6/src/views/Home.vue b/learn-x6/src/views/Home.vue
@@ -16,6 +16,11 @@
         <!--右键菜单-->
         <contextmenu
                 :contextmenuStyle="contextmenuStyle"
+                @setEditorVisible="setEditorVisible"
+        />
+        <monaco-editor
+            @setEditorVisible="setEditorVisible"
+            :editorVisible="editorVisible"
         />
     </div>
 </template>
@@ -25,15 +30,17 @@ import graphContent from '@/components/Content';
 import stencil from '@/components/Stencil';
 import Settings from '@/components/Settings';
 import Contextmenu from '@/components/Contextmenu';
-import { mapState } from "vuex";
+import {mapMutations, mapState} from "vuex";
+import MonacoEditor from "@/components/Editor/MonacoEditor";
 
 export default {
     name: 'Home',
     components: {
         graphContent,
         stencil,
         Settings,
-        Contextmenu
+        Contextmenu,
+        MonacoEditor
     },
     computed: {
         ...mapState('app', [
@@ -62,10 +69,14 @@ export default {
                 width: '300px',
                 height: '100%',
             },
-            contextmenuStyle: {}
+            contextmenuStyle: {},
+            editorVisible: false
         };
     },
     methods: {
+        ...mapMutations('app', [
+            'setContextmenuNode'
+        ]),
         onContextmenu() {
             this.graph.on('node:contextmenu', ({ e, node, x, y }) => {
                 // 右击节点动态改变 右键菜单的位置
@@ -74,11 +85,15 @@ export default {
                     top: top + 10 + 'px',
                     left: left + 10 + 'px'
                 };
+                this.setContextmenuNode(node);
             });
             document.addEventListener('click', () => {
                 this.contextmenuStyle = null;
             });
         },
+        setEditorVisible(v) {
+            this.editorVisible = v;
+        }
     }
 };
 </script>

diff --git a/learn-x6/vue.config.js b/learn-x6/vue.config.js
@@ -2,6 +2,7 @@ const path = require('path');
 const {getThemeColors, modifyVars} = require('./src/utils/themeUtil');
 const ThemeColorReplacer = require('webpack-theme-color-replacer');
 const {resolveCss} = require('./src/utils/theme-color-replacer-extend')
+const MonacoEditorPlugin = require('monaco-editor-webpack-plugin')
 
 module.exports = {
     runtimeCompiler: true,
@@ -21,6 +22,17 @@ module.exports = {
                 resolveCss
             })
         );
+        config.plugins.push(
+            new MonacoEditorPlugin({
+                // https://github.com/Microsoft/monaco-editor-webpack-plugin#options
+                // Include a subset of languages support
+                // Some language extensions like typescript are so huge that may impact build performance
+                // e.g. Build full languages support with webpack 4.0 takes over 80 seconds
+                // Languages are loaded on demand at runtime
+                languages: ['javascript', 'css', 'html', 'typescript']
+            })
+        );
+
         config.devtool = 'source-map'
     },
     css: {