├── .browserslistrc
├── src
    ├── eventBus.js
    ├── assets
    │   ├── logo.png
    │   └── svg
    │   │   ├── arrow.svg
    │   │   └── defaultImg.svg
    ├── views
    │   ├── demo3
    │   │   ├── components
    │   │   │   ├── config.js
    │   │   │   ├── nodeTheme
    │   │   │   │   └── common.vue
    │   │   │   ├── menuBar.vue
    │   │   │   ├── dialog
    │   │   │   │   ├── mysql.vue
    │   │   │   │   └── condition.vue
    │   │   │   └── drawer.vue
    │   │   ├── graphMixin.js
    │   │   └── index.vue
    │   ├── test.vue
    │   ├── dragDemo
    │   │   ├── components
    │   │   │   ├── config.js
    │   │   │   ├── menuBar.vue
    │   │   │   ├── dialog
    │   │   │   │   ├── mysql.vue
    │   │   │   │   └── condition.vue
    │   │   │   ├── data.json
    │   │   │   ├── nodeTheme
    │   │   │   │   ├── onlyIn.vue
    │   │   │   │   ├── onlyOut.vue
    │   │   │   │   ├── condition.vue
    │   │   │   │   └── database.vue
    │   │   │   └── drawer.vue
    │   │   └── index.vue
    │   └── dargeDemo
    │   │   ├── components
    │   │       ├── formVue.vue
    │   │       ├── node
    │   │       │   ├── exnode.vue
    │   │       │   └── common.vue
    │   │       └── drawer.vue
    │   │   ├── config.js
    │   │   ├── graphMixin.js
    │   │   └── index.vue
    ├── store
    │   └── index.js
    ├── style
    │   └── dargeLess.less
    ├── utils
    │   └── index.js
    ├── App.vue
    ├── main.js
    ├── router
    │   └── index.js
    └── data.json
├── babel.config.js
├── public
    ├── favicon.ico
    └── index.html
├── vue.config.js
├── .gitignore
├── jsconfig.json
├── .eslintrc.js
├── package.json
└── README.md


/.browserslistrc:
--------------------------------------------------------------------------------
1 | > 1%
2 | last 2 versions
3 | not dead
4 | 


--------------------------------------------------------------------------------
/src/eventBus.js:
--------------------------------------------------------------------------------
1 | import Vue from "vue";
2 | 
3 | export const EventBus = new Vue();
4 | 


--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   presets: ["@vue/cli-plugin-babel/preset"],
3 | };
4 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MyButifullyLife/vue-x6-flow/HEAD/public/favicon.ico


--------------------------------------------------------------------------------
/src/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MyButifullyLife/vue-x6-flow/HEAD/src/assets/logo.png


--------------------------------------------------------------------------------
/vue.config.js:
--------------------------------------------------------------------------------
1 | const { defineConfig } = require("@vue/cli-service");
2 | module.exports = defineConfig({
3 |   transpileDependencies: true,
4 |   runtimeCompiler: true,
5 | });
6 | 


--------------------------------------------------------------------------------
/src/views/demo3/components/config.js:
--------------------------------------------------------------------------------
 1 | const config = [
 2 |   {
 3 |     type: "common",
 4 |     height: 100,
 5 |     width: 200,
 6 |     data: {
 7 |       name: "common节点",
 8 |     },
 9 |   },
10 | ];
11 | 
12 | export default config;
13 | 


--------------------------------------------------------------------------------
/src/store/index.js:
--------------------------------------------------------------------------------
 1 | import Vue from "vue";
 2 | import Vuex from "vuex";
 3 | 
 4 | Vue.use(Vuex);
 5 | 
 6 | export default new Vuex.Store({
 7 |   state: {},
 8 |   getters: {},
 9 |   mutations: {},
10 |   actions: {},
11 |   modules: {},
12 | });
13 | 


--------------------------------------------------------------------------------
/src/style/dargeLess.less:
--------------------------------------------------------------------------------
 1 | 
 2 | 
 3 | .success{
 4 |   //background-color: green ;
 5 |   border-color: green !important;
 6 | }
 7 | 
 8 | 
 9 | 
10 | .error{
11 |   //background-color: green ;
12 |   border-color: red !important;
13 | }
14 | 
15 | .normal{
16 |   //background-color: green ;
17 |   border-color: gray !important;
18 | }


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules
 3 | /dist
 4 | 
 5 | 
 6 | # local env files
 7 | .env.local
 8 | .env.*.local
 9 | 
10 | # Log files
11 | npm-debug.log*
12 | yarn-debug.log*
13 | yarn-error.log*
14 | pnpm-debug.log*
15 | 
16 | # Editor directories and files
17 | .idea
18 | .vscode
19 | *.suo
20 | *.ntvs*
21 | *.njsproj
22 | *.sln
23 | *.sw?
24 | 


--------------------------------------------------------------------------------
/jsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "es5",
 4 |     "module": "esnext",
 5 |     "baseUrl": "./",
 6 |     "moduleResolution": "node",
 7 |     "paths": {
 8 |       "@/*": [
 9 |         "src/*"
10 |       ]
11 |     },
12 |     "lib": [
13 |       "esnext",
14 |       "dom",
15 |       "dom.iterable",
16 |       "scripthost"
17 |     ]
18 |   }
19 | }
20 | 


--------------------------------------------------------------------------------
/src/utils/index.js:
--------------------------------------------------------------------------------
 1 | // 根据自己的需求生成唯一ID
 2 | export function generateUniqueId() {
 3 |   // 例如组合时间戳、随机数和计数器
 4 |   const timestamp = Date.now().toString(36);
 5 |   const randomNumber = Math.random().toString(36).substr(2, 5);
 6 |   const counter = generateUniqueId.counter
 7 |     ? ++generateUniqueId.counter
 8 |     : (generateUniqueId.counter = 1);
 9 |   return `${timestamp}-${randomNumber}-${counter}`;
10 | }
11 | 


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div id="app">
 3 |     <router-view />
 4 |   </div>
 5 | </template>
 6 | 
 7 | <style lang="less">
 8 | #app {
 9 |   font-family: Avenir, Helvetica, Arial, sans-serif;
10 |   -webkit-font-smoothing: antialiased;
11 |   -moz-osx-font-smoothing: grayscale;
12 |   text-align: center;
13 |   color: #2c3e50;
14 | }
15 | body {
16 |   box-sizing: border-box;
17 |   margin: 0;
18 | }
19 | </style>
20 | 


--------------------------------------------------------------------------------
/.eslintrc.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   root: true,
 3 |   env: {
 4 |     node: true,
 5 |   },
 6 |   extends: [
 7 |     "plugin:vue/essential",
 8 |     "eslint:recommended",
 9 |     "plugin:prettier/recommended",
10 |   ],
11 |   parserOptions: {
12 |     parser: "@babel/eslint-parser",
13 |   },
14 |   rules: {
15 |     "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
16 |     "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
17 |   },
18 | };
19 | 


--------------------------------------------------------------------------------
/src/assets/svg/arrow.svg:
--------------------------------------------------------------------------------
1 | <?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1632451474523" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4385" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M288.791335 65.582671l446.41733 446.417329-446.41733 446.417329z" p-id="4386" fill="#2c3e50"></path></svg>


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
 1 | import Vue from "vue";
 2 | import App from "./App.vue";
 3 | import router from "./router";
 4 | import store from "./store";
 5 | import ElementUI from "element-ui";
 6 | import "element-ui/lib/theme-chalk/index.css";
 7 | 
 8 | import { EventBus } from "./eventBus";
 9 | Vue.prototype.$EventBus = EventBus;
10 | 
11 | Vue.use(ElementUI);
12 | 
13 | Vue.config.productionTip = false;
14 | 
15 | new Vue({
16 |   router,
17 |   store,
18 |   render: (h) => h(App),
19 | }).$mount("#app");
20 | 


--------------------------------------------------------------------------------
/src/views/test.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div style="padding-top: 100px">
 3 |     <el-button type="primary" @click="goDemo(0)"> demo1</el-button>
 4 |     <el-button type="primary" @click="goDemo(1)"> demo2</el-button>
 5 |     <el-button type="primary" @click="goDemo(2)"> demo3</el-button>
 6 | 
 7 |     <el-button type="primary"> 树形结构demo在vue3项目</el-button>
 8 |   </div>
 9 | </template>
10 | 
11 | <script>
12 | export default {
13 |   name: "TestCom",
14 |   methods: {
15 |     goDemo(num) {
16 |       const router = ["/dragDemo", "/dargeDemo", "/demo3"];
17 |       this.$router.push(router[num]);
18 |     },
19 |   },
20 | };
21 | </script>
22 | 


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width,initial-scale=1.0">
 7 |     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
 8 |     <title><%= htmlWebpackPlugin.options.title %></title>
 9 |   </head>
10 |   <body>
11 |     <noscript>
12 |       <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
13 |     </noscript>
14 |     <div id="app"></div>
15 |     <!-- built files will be auto injected -->
16 |   </body>
17 | </html>
18 | 


--------------------------------------------------------------------------------
/src/views/dragDemo/components/config.js:
--------------------------------------------------------------------------------
 1 | const config = [
 2 |   {
 3 |     type: "output",
 4 |     label: "只允许输出",
 5 |     name: "输出",
 6 |     data: {
 7 |       name: "输出",
 8 |     },
 9 |   },
10 | 
11 |   {
12 |     type: "database",
13 |     label: "数据库",
14 |     name: "mySql",
15 |     data: {
16 |       name: "mysql",
17 |     },
18 |   },
19 |   {
20 |     type: "onlyIn",
21 |     label: "只允许输入",
22 |     name: "只允许输入",
23 |     data: {
24 |       name: "只允许输入",
25 |     },
26 |   },
27 |   {
28 |     type: "condition",
29 |     label: "条件",
30 |     name: "条件",
31 |     data: {
32 |       name: "condition",
33 |       t: "",
34 |       f: "",
35 |     },
36 |   },
37 | ];
38 | 
39 | export default config;
40 | 


--------------------------------------------------------------------------------
/src/router/index.js:
--------------------------------------------------------------------------------
 1 | import Vue from "vue";
 2 | import VueRouter from "vue-router";
 3 | 
 4 | Vue.use(VueRouter);
 5 | 
 6 | const routes = [
 7 |   {
 8 |     path: "/",
 9 |     name: "Test",
10 |     component: () => import(/* webpackChunkName: "about" */ "@/views/test"),
11 |   },
12 |   {
13 |     path: "/dragDemo",
14 |     name: "dragDemo",
15 |     component: () => import(/* webpackChunkName: "about" */ "@/views/dragDemo"),
16 |   },
17 |   {
18 |     path: "/dargeDemo",
19 |     name: "dargeDemo",
20 |     component: () => import("@/views/dargeDemo"),
21 |   },
22 |   {
23 |     path: "/demo3",
24 |     name: "demo3",
25 |     component: () => import("@/views/demo3"),
26 |   },
27 | ];
28 | 
29 | const router = new VueRouter({
30 |   mode: "hash",
31 |   base: process.env.BASE_URL,
32 |   routes,
33 | });
34 | 
35 | export default router;
36 | 


--------------------------------------------------------------------------------
/src/assets/svg/defaultImg.svg:
--------------------------------------------------------------------------------
1 | <?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1633759756242" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3145" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M821.6 120.93333333H195.4c-74.1 0-134.2 60.1-134.2 134.2v492c0 74.1 60.1 134.2 134.2 134.2h626.2c74.1 0 134.2-60.1 134.2-134.2v-492c0-74.1-60.1-134.2-134.2-134.2zM251.3 255.13333333c30.9 0 55.9 25 55.9 55.9s-25 55.9-55.9 55.9-55.9-25-55.9-55.9 25-55.9 55.9-55.9z m614.6 559.1H153.3c-37.3 0-58.2-43.1-35.1-72.4L302.1 508.33333333c17.9-22.7 52.4-22.7 70.3 0l76.5 97.2 148.6-260c17.2-30.1 60.5-30.1 77.7 0L904.8 747.33333333c17 29.8-4.5 66.9-38.9 66.9z" fill="#A1A0A5" p-id="3146"></path></svg>


--------------------------------------------------------------------------------
/src/views/demo3/components/nodeTheme/common.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="node">
 3 |     <h3>{{ label }}</h3>
 4 |   </div>
 5 | </template>
 6 | 
 7 | <script>
 8 | export default {
 9 |   name: "DatabaseCom",
10 | 
11 |   inject: ["getGraph", "getNode"],
12 |   data() {
13 |     return {
14 |       status: "logo",
15 | 
16 |       label: "",
17 |     };
18 |   },
19 |   mounted() {
20 |     // const self = this;
21 |     const node = this.getNode();
22 |     this.label = node.data.data.name;
23 | 
24 |     // 监听数据改变事件
25 |     // node.on("change:data", ({ current }) => {
26 |     //   self.status = current.status;
27 |     // });
28 |   },
29 | };
30 | </script>
31 | <style lang="less" scoped>
32 | .node {
33 |   width: 100%;
34 |   height: 100%;
35 |   background-color: #fff;
36 |   border: 1px solid #c2c8d5;
37 |   border-radius: 4px;
38 |   box-shadow: 0 2px 5px 1px rgba(0, 0, 0, 0.06);
39 | }
40 | </style>
41 | 


--------------------------------------------------------------------------------
/src/views/dargeDemo/components/formVue.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="FormVue" :style="styleItem">
 3 |     <div>内容信息展示</div>
 4 |     <div class="text">
 5 |       <el-input size="mini" v-model="textInput"></el-input>
 6 |     </div>
 7 |     <el-button size="mini" @click="change">修改</el-button>
 8 |   </div>
 9 | </template>
10 | 
11 | <script>
12 | export default {
13 |   name: "FormVue",
14 |   props: {
15 |     text: {
16 |       type: String,
17 |       default: "",
18 |     },
19 |     styleItem: {
20 |       type: Object,
21 |       default: () => {
22 |         return {};
23 |       },
24 |     },
25 |   },
26 |   watch: {
27 |     text: {
28 |       handler() {
29 |         this.textInput = this.text;
30 |       },
31 |       immediate: true,
32 |     },
33 |   },
34 |   data() {
35 |     return {
36 |       textInput: "",
37 |     };
38 |   },
39 |   methods: {
40 |     change() {
41 |       this.$emit("change", this.textInput);
42 |     },
43 |   },
44 |   mounted() {},
45 | };
46 | </script>
47 | <style lang="less" scoped>
48 | .FormVue {
49 |   border: 1px dashed #a2a2a2;
50 |   position: absolute;
51 |   background-color: rgba(0, 0, 0, 0.3);
52 | }
53 | .text {
54 |   padding: 10px;
55 | }
56 | </style>
57 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue-x6-flow",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "serve": "vue-cli-service serve",
 7 |     "dev": "vue-cli-service serve",
 8 |     "build": "vue-cli-service build",
 9 |     "lint": "vue-cli-service lint"
10 |   },
11 |   "dependencies": {
12 |     "@antv/layout": "^0.3.23",
13 |     "@antv/x6": "^1.34.14",
14 |     "@antv/x6-vue-shape": "^1.5.4",
15 |     "@vue/composition-api": "^1.7.1",
16 |     "core-js": "^3.8.3",
17 |     "element-ui": "^2.15.6",
18 |     "vue": "^2.6.14",
19 |     "vue-router": "^3.5.1",
20 |     "vuex": "^3.6.2"
21 |   },
22 |   "devDependencies": {
23 |     "@babel/core": "^7.12.16",
24 |     "@babel/eslint-parser": "^7.12.16",
25 |     "@vue/cli-plugin-babel": "~5.0.8",
26 |     "@vue/cli-plugin-eslint": "~5.0.8",
27 |     "@vue/cli-plugin-router": "~5.0.8",
28 |     "@vue/cli-plugin-vuex": "~5.0.8",
29 |     "@vue/cli-service": "~5.0.8",
30 |     "eslint": "^7.32.0",
31 |     "eslint-config-prettier": "^8.3.0",
32 |     "eslint-plugin-prettier": "^4.0.0",
33 |     "eslint-plugin-vue": "^8.0.3",
34 |     "less": "^4.0.0",
35 |     "less-loader": "^8.0.0",
36 |     "prettier": "^2.4.1",
37 |     "vue-template-compiler": "^2.6.14"
38 |   }
39 | }
40 | 


--------------------------------------------------------------------------------
/src/views/demo3/components/menuBar.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <el-card
 3 |     class="box-card"
 4 |     :style="{ left: x + 'px', top: y + 'px' }"
 5 |     :stop="11"
 6 |     @click.stop=""
 7 |     style="padding: 0"
 8 |   >
 9 |     <div
10 |       class="text item"
11 |       @click.stop="callBack('source')"
12 |       v-if="item.type !== 'edge'"
13 |     >
14 |       配置数据源
15 |     </div>
16 |     <div class="text item" @click.stop="callBack('remove')">删除</div>
17 |   </el-card>
18 | </template>
19 | 
20 | <script>
21 | export default {
22 |   name: "MenuBar",
23 |   data() {
24 |     return {
25 |       x: "",
26 |       y: "",
27 |       item: {},
28 |     };
29 |   },
30 |   mounted() {},
31 |   methods: {
32 |     initFn(x, y, item) {
33 |       this.x = parseInt(x) + "";
34 |       this.y = y + "";
35 |       if (item) {
36 |         this.item = item;
37 |       }
38 |     },
39 |     setItem(item) {
40 |       this.item = item;
41 |     },
42 |     callBack(type) {
43 |       this.$emit("callBack", type, this.item);
44 |     },
45 |   },
46 | };
47 | </script>
48 | <style scoped>
49 | .box-card {
50 |   position: absolute;
51 |   z-index: 112;
52 | }
53 | 
54 | .box-card ::v-deep .el-card__body {
55 |   padding: 0;
56 | }
57 | 
58 | .text {
59 |   font-size: 14px;
60 | }
61 | 
62 | .item {
63 |   padding: 10px 0;
64 |   text-align: center;
65 | }
66 | 
67 | .item:hover {
68 |   color: #ffffff;
69 |   background-color: #409eff;
70 | }
71 | 
72 | .box-card {
73 |   width: 150px;
74 | }
75 | </style>
76 | 


--------------------------------------------------------------------------------
/src/views/dragDemo/components/menuBar.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <el-card
 3 |     class="box-card"
 4 |     :style="{ left: x + 'px', top: y + 'px' }"
 5 |     :stop="11"
 6 |     @click.stop=""
 7 |     style="padding: 0"
 8 |   >
 9 |     <div
10 |       class="text item"
11 |       @click.stop="callBack('source')"
12 |       v-if="item.type !== 'edge'"
13 |     >
14 |       配置数据源
15 |     </div>
16 |     <div class="text item" @click.stop="callBack('remove')">删除</div>
17 |   </el-card>
18 | </template>
19 | 
20 | <script>
21 | export default {
22 |   name: "MenuBar",
23 |   data() {
24 |     return {
25 |       x: "",
26 |       y: "",
27 |       item: {},
28 |     };
29 |   },
30 |   mounted() {},
31 |   methods: {
32 |     initFn(x, y, item) {
33 |       this.x = parseInt(x) + "";
34 |       this.y = y + "";
35 |       if (item) {
36 |         this.item = item;
37 |       }
38 |     },
39 |     setItem(item) {
40 |       this.item = item;
41 |     },
42 |     callBack(type) {
43 |       this.$emit("callBack", type, this.item);
44 |     },
45 |   },
46 | };
47 | </script>
48 | <style scoped>
49 | .box-card {
50 |   position: absolute;
51 |   z-index: 112;
52 | }
53 | 
54 | .box-card ::v-deep .el-card__body {
55 |   padding: 0;
56 | }
57 | 
58 | .text {
59 |   font-size: 14px;
60 | }
61 | 
62 | .item {
63 |   padding: 10px 0;
64 |   text-align: center;
65 | }
66 | 
67 | .item:hover {
68 |   color: #ffffff;
69 |   background-color: #409eff;
70 | }
71 | 
72 | .box-card {
73 |   width: 150px;
74 | }
75 | </style>
76 | 


--------------------------------------------------------------------------------
/src/views/demo3/components/dialog/mysql.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <el-dialog
 3 |     :title="node.item ? node.item.data.label : ''"
 4 |     :visible.sync="visible"
 5 |     width="600px"
 6 |   >
 7 |     <el-form :inline="true" class="demo-form-inline">
 8 |       <el-form-item label="名字">
 9 |         <el-input v-model="label" placeholder="修改名字"></el-input>
10 |       </el-form-item>
11 |     </el-form>
12 |     <footer class="footer">
13 |       <el-button type="primary" @click="submit">确定</el-button>
14 |     </footer>
15 |   </el-dialog>
16 | </template>
17 | 
18 | <script>
19 | export default {
20 |   name: "dialogMysql",
21 | 
22 |   data() {
23 |     return {
24 |       visible: false,
25 |       bool: true,
26 |       node: {},
27 |       label: "",
28 |     };
29 |   },
30 |   mounted() {},
31 |   methods: {
32 |     init(item) {
33 |       this.node = item;
34 |       this.label = item.item.data.label;
35 |     },
36 |     submit() {
37 |       var node = this.$parent.getNodeById(this.node.item.id);
38 |       node.setData(
39 |         Object.assign({}, this.node.item.data, { label: this.label })
40 |       );
41 |       // this.node.setData({})
42 |       // this.node.item.data.label = this.label;
43 |       this.visible = false;
44 |     },
45 |   },
46 | };
47 | </script>
48 | <style scoped>
49 | section {
50 |   display: flex;
51 |   align-items: center;
52 |   justify-content: center;
53 | }
54 | 
55 | .footer {
56 |   margin-top: 15px;
57 |   display: flex;
58 |   align-items: center;
59 |   justify-content: center;
60 | }
61 | </style>
62 | 


--------------------------------------------------------------------------------
/src/views/dragDemo/components/dialog/mysql.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <el-dialog
 3 |     :title="node.item ? node.item.data.label : ''"
 4 |     :visible.sync="visible"
 5 |     width="600px"
 6 |   >
 7 |     <el-form :inline="true" class="demo-form-inline">
 8 |       <el-form-item label="名字">
 9 |         <el-input v-model="label" placeholder="修改名字"></el-input>
10 |       </el-form-item>
11 |     </el-form>
12 |     <footer class="footer">
13 |       <el-button type="primary" @click="submit">确定</el-button>
14 |     </footer>
15 |   </el-dialog>
16 | </template>
17 | 
18 | <script>
19 | export default {
20 |   name: "dialogMysql",
21 | 
22 |   data() {
23 |     return {
24 |       visible: false,
25 |       bool: true,
26 |       node: {},
27 |       label: "",
28 |     };
29 |   },
30 |   mounted() {},
31 |   methods: {
32 |     init(item) {
33 |       this.node = item;
34 |       this.label = item.item.data.label;
35 |     },
36 |     submit() {
37 |       var node = this.$parent.getNodeById(this.node.item.id);
38 |       node.setData(
39 |         Object.assign({}, this.node.item.data, { label: this.label })
40 |       );
41 |       // this.node.setData({})
42 |       // this.node.item.data.label = this.label;
43 |       this.visible = false;
44 |     },
45 |   },
46 | };
47 | </script>
48 | <style scoped>
49 | section {
50 |   display: flex;
51 |   align-items: center;
52 |   justify-content: center;
53 | }
54 | 
55 | .footer {
56 |   margin-top: 15px;
57 |   display: flex;
58 |   align-items: center;
59 |   justify-content: center;
60 | }
61 | </style>
62 | 


--------------------------------------------------------------------------------
/src/views/demo3/components/dialog/condition.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <el-dialog :title="itemDetail.label" :visible.sync="visible" width="300px">
 3 |     <section>
 4 |       <el-radio v-model="bool" :label="true">true条件</el-radio>
 5 |       <el-radio v-model="bool" :label="false">false条件</el-radio>
 6 |     </section>
 7 |     <footer class="footer">
 8 |       <el-button type="primary" @click="submit">确定</el-button>
 9 |     </footer>
10 |   </el-dialog>
11 | </template>
12 | 
13 | <script>
14 | export default {
15 |   name: "ConditionDia",
16 | 
17 |   data() {
18 |     return {
19 |       visible: false,
20 |       bool: true,
21 |       itemDetail: {},
22 |       edge: "",
23 |     };
24 |   },
25 |   mounted() {},
26 |   methods: {
27 |     init(item, edge) {
28 |       this.itemDetail = item;
29 |       this.edge = edge;
30 |     },
31 |     submit() {
32 |       if (this.bool) {
33 |         if (this.itemDetail.data.t) {
34 |           this.$parent.graph.removeEdge(this.itemDetail.data.t);
35 |         }
36 |         this.itemDetail.data.t = this.edge.id;
37 | 
38 |         this.edge.appendLabel({
39 |           attrs: {
40 |             text: {
41 |               text: "true",
42 |             },
43 |           },
44 |         });
45 |       } else {
46 |         if (this.itemDetail.data.f) {
47 |           this.$parent.graph.removeEdge(this.itemDetail.data.f);
48 |         }
49 |         this.itemDetail.data.f = this.edge.id;
50 |         this.edge.appendLabel({
51 |           attrs: {
52 |             text: {
53 |               text: "false",
54 |             },
55 |           },
56 |         });
57 |       }
58 | 
59 |       this.visible = false;
60 |     },
61 |   },
62 | };
63 | </script>
64 | <style scoped>
65 | section {
66 |   display: flex;
67 |   align-items: center;
68 |   justify-content: center;
69 | }
70 | .footer {
71 |   margin-top: 15px;
72 |   display: flex;
73 |   align-items: center;
74 |   justify-content: center;
75 | }
76 | </style>
77 | 


--------------------------------------------------------------------------------
/src/views/dragDemo/components/dialog/condition.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <el-dialog :title="itemDetail.label" :visible.sync="visible" width="300px">
 3 |     <section>
 4 |       <el-radio v-model="bool" :label="true">true条件</el-radio>
 5 |       <el-radio v-model="bool" :label="false">false条件</el-radio>
 6 |     </section>
 7 |     <footer class="footer">
 8 |       <el-button type="primary" @click="submit">确定</el-button>
 9 |     </footer>
10 |   </el-dialog>
11 | </template>
12 | 
13 | <script>
14 | export default {
15 |   name: "ConditionDia",
16 | 
17 |   data() {
18 |     return {
19 |       visible: false,
20 |       bool: true,
21 |       itemDetail: {},
22 |       edge: "",
23 |     };
24 |   },
25 |   mounted() {},
26 |   methods: {
27 |     init(item, edge) {
28 |       this.itemDetail = item;
29 |       this.edge = edge;
30 |     },
31 |     submit() {
32 |       if (this.bool) {
33 |         if (this.itemDetail.data.t) {
34 |           this.$parent.graph.removeEdge(this.itemDetail.data.t);
35 |         }
36 |         this.itemDetail.data.t = this.edge.id;
37 | 
38 |         this.edge.appendLabel({
39 |           attrs: {
40 |             text: {
41 |               text: "true",
42 |             },
43 |           },
44 |         });
45 |       } else {
46 |         if (this.itemDetail.data.f) {
47 |           this.$parent.graph.removeEdge(this.itemDetail.data.f);
48 |         }
49 |         this.itemDetail.data.f = this.edge.id;
50 |         this.edge.appendLabel({
51 |           attrs: {
52 |             text: {
53 |               text: "false",
54 |             },
55 |           },
56 |         });
57 |       }
58 | 
59 |       this.visible = false;
60 |     },
61 |   },
62 | };
63 | </script>
64 | <style scoped>
65 | section {
66 |   display: flex;
67 |   align-items: center;
68 |   justify-content: center;
69 | }
70 | .footer {
71 |   margin-top: 15px;
72 |   display: flex;
73 |   align-items: center;
74 |   justify-content: center;
75 | }
76 | </style>
77 | 


--------------------------------------------------------------------------------
/src/views/dargeDemo/components/node/exnode.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="content">
 3 |     <div class="node" :class="status">
 4 |       <span class="label">{{ label }}</span>
 5 |     </div>
 6 |   </div>
 7 | </template>
 8 | 
 9 | <script>
10 | import { statusColor } from "@/views/dargeDemo/config";
11 | export default {
12 |   name: "CommonNode",
13 | 
14 |   inject: ["getGraph", "getNode"],
15 |   data() {
16 |     return {
17 |       status: "",
18 |       label: "",
19 |       node: "",
20 |       statusColor,
21 |     };
22 |   },
23 |   methods: {
24 |     editFn() {
25 |       console.log(this.node);
26 |       this.$EventBus.$emit("DargeEditEvent", this.node);
27 |     },
28 |   },
29 |   mounted() {
30 |     this.editFn.bind(this);
31 |     const node = this.getNode();
32 |     this.node = node;
33 |     this.label = node.data.label || "";
34 |     this.status = node.data.status || "";
35 |   },
36 | };
37 | </script>
38 | <style lang="less" scoped>
39 | @import "../../../../style/dargeLess.less";
40 | .content {
41 |   padding-right: 10px;
42 |   width: 100%;
43 |   height: 100%;
44 | }
45 | .node {
46 |   display: flex;
47 |   width: calc(100% - 24px);
48 |   height: 100%;
49 |   align-items: center;
50 |   position: relative;
51 |   background-color: #fff;
52 |   border: 1px solid #c2c8d5;
53 |   border-left: 4px solid #5f95ff;
54 |   border-radius: 4px;
55 |   box-shadow: 0 2px 5px 1px rgba(0, 0, 0, 0.06);
56 |   padding-right: 10px;
57 |   > .right {
58 |     position: absolute;
59 |     z-index: 1000;
60 |     right: -10px;
61 |     .icon {
62 |       font-size: 20px;
63 |       background-color: #ffffff;
64 |       cursor: pointer;
65 |     }
66 |   }
67 | }
68 | 
69 | .node img {
70 |   width: 20px;
71 |   height: 20px;
72 |   flex-shrink: 0;
73 |   margin-left: 8px;
74 | }
75 | 
76 | .node .label {
77 |   display: inline-block;
78 |   flex-shrink: 0;
79 |   width: 104px;
80 |   margin-left: 8px;
81 |   color: #666;
82 |   font-size: 12px;
83 | }
84 | </style>
85 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | 
 2 | 
 3 | # vue3 和 vue2 两个项目的demo是不同的，可以都下载下来运行查看是否有符合自身业务的demo
 4 | 
 5 | # vue-x6-flow
 6 | 
 7 | **基于antv-x6 vue版本**
 8 | vue2.x+ element +antv-x6 
 9 | 适用于流程图-dag图
10 | 
11 | 
12 | # vue3版本地址
13 | https://github.com/MyButifullyLife/vue-x6-flow-3.0
14 | 
15 | 有以下功能内容：
16 | 1、拖拽布局
17 | 2、右键菜单
18 | 3、保存
19 | 
20 | 4、缩放
21 | 5、多选
22 | 6、快捷键 cv  cx  cz（重做）
23 | 7、连线判断
24 | 8、配置属性
25 | 9、动态节点流向动画
26 | 其余功能可在antv-x6文档自行添加
27 | 
28 | ## 文档地址  
29 | https://x6.antv.vision/zh/docs/api/graph/graph
30 | 
31 | ## 本项目效果图
32 | ![image](https://user-images.githubusercontent.com/16436933/149902393-4a9fd58f-eadd-4a5f-af71-81076d0364d0.png)
33 | 
34 | ## 流向动画
35 | ![GIF 2022-1-18 16-51-01](https://user-images.githubusercontent.com/16436933/149902899-b630b119-c39f-45e9-b576-da8d571386be.gif)
36 | 
37 | ## 树状图 现成源码
38 | ![1679362448522](https://user-images.githubusercontent.com/16436933/226499607-5ad1b21d-79c5-45d1-9d31-b59841889eaa.jpg)
39 | 
40 | ![企业微信截图_d2f74ba5-4202-43eb-90e8-9f95bfc3ff2f](https://user-images.githubusercontent.com/16436933/226512037-53dcc958-6112-402d-92b8-cf530b2f531d.png)
41 | 
42 | 
43 | ## x6 对于流程图 dag图 思维导图均可实现
44 | ![image](https://user-images.githubusercontent.com/16436933/153532050-5bd5372b-e3a0-43dd-8407-9f0a05b7f59a.png)
45 | 
46 | 
47 | ## 如果文章对你有帮助，那么5块、10块也是爱
48 | ![image](https://user-images.githubusercontent.com/16436933/153533288-32647686-344f-4933-a692-5f4451fe24f6.png)
49 | 
50 | 
51 | ## 有疑问可加QQ
52 | 冠希：微信转账30可以让你少掉、少白几根头发永远跟我一样帅
53 | QQ：251275985  wx：gjh251275985
54 | 
55 | 
56 | ## antv在vue使用所需要的依赖
57 | ···
58 | 
59 |     "@antv/x6": "^1.29.5"
60 |     
61 |     "@antv/x6-vue-shape": "^1.3.0"
62 |     
63 |     "@vue/composition-api": "^1.4.3"
64 |     
65 |     
66 |     
67 |     vue.config.js 配置
68 |     runtimeCompiler: true
69 |    
70 |     
71 | ···
72 | 
73 | ## Project setup
74 | ```
75 | 因为项目是由最新vue-cli创建，运行环境必须要有 yarn
76 | 本地环境没有yarn 可以通过 npm install yarn 下载
77 | 
78 | yarn install
79 | ```
80 | 
81 | ### Compiles and hot-reloads for development
82 | ```
83 | yarn serve
84 | ```
85 | 
86 | ### Compiles and minifies for production
87 | ```
88 | yarn build
89 | ```
90 | 
91 | ### Lints and fixes files
92 | ```
93 | yarn lint
94 | 
95 | ```
96 | 
97 | ### Customize configuration
98 | See [Configuration Reference](https://cli.vuejs.org/config/).
99 | 


--------------------------------------------------------------------------------
/src/data.json:
--------------------------------------------------------------------------------
  1 | [
  2 |   {
  3 |     "id": "1",
  4 |     "shape": "dag-node",
  5 |     "x": 290,
  6 |     "y": 110,
  7 |     "data": {
  8 |       "label": "读数据",
  9 |       "status": "success"
 10 |     },
 11 |     "ports": [
 12 |       {
 13 |         "id": "1-1",
 14 |         "group": "bottom"
 15 |       }
 16 |     ]
 17 |   },
 18 |   {
 19 |     "id": "2",
 20 |     "shape": "dag-node",
 21 |     "x": 290,
 22 |     "y": 225,
 23 |     "data": {
 24 |       "label": "逻辑回归",
 25 |       "status": "success"
 26 |     },
 27 |     "ports": [
 28 |       {
 29 |         "id": "2-1",
 30 |         "group": "top"
 31 |       },
 32 |       {
 33 |         "id": "2-2",
 34 |         "group": "bottom"
 35 |       },
 36 |       {
 37 |         "id": "2-3",
 38 |         "group": "bottom"
 39 |       }
 40 |     ]
 41 |   },
 42 |   {
 43 |     "id": "3",
 44 |     "shape": "dag-node",
 45 |     "x": 170,
 46 |     "y": 350,
 47 |     "data": {
 48 |       "label": "模型预测",
 49 |       "status": "success"
 50 |     },
 51 |     "ports": [
 52 |       {
 53 |         "id": "3-1",
 54 |         "group": "top"
 55 |       },
 56 |       {
 57 |         "id": "3-2",
 58 |         "group": "bottom"
 59 |       }
 60 |     ]
 61 |   },
 62 |   {
 63 |     "id": "4",
 64 |     "shape": "dag-node",
 65 |     "x": 450,
 66 |     "y": 350,
 67 |     "data": {
 68 |       "label": "读取参数",
 69 |       "status": "success"
 70 |     },
 71 |     "ports": [
 72 |       {
 73 |         "id": "4-1",
 74 |         "group": "top"
 75 |       },
 76 |       {
 77 |         "id": "4-2",
 78 |         "group": "bottom"
 79 |       }
 80 |     ]
 81 |   },
 82 |   {
 83 |     "id": "5",
 84 |     "shape": "dag-edge",
 85 |     "source": {
 86 |       "cell": "1",
 87 |       "port": "1-1"
 88 |     },
 89 |     "target": {
 90 |       "cell": "2",
 91 |       "port": "2-1"
 92 |     },
 93 |     "zIndex": 0
 94 |   },
 95 |   {
 96 |     "id": "6",
 97 |     "shape": "dag-edge",
 98 |     "source": {
 99 |       "cell": "2",
100 |       "port": "2-2"
101 |     },
102 |     "target": {
103 |       "cell": "3",
104 |       "port": "3-1"
105 |     },
106 |     "zIndex": 0
107 |   },
108 |   {
109 |     "id": "7",
110 |     "shape": "dag-edge",
111 |     "source": {
112 |       "cell": "2",
113 |       "port": "2-3"
114 |     },
115 |     "target": {
116 |       "cell": "4",
117 |       "port": "4-1"
118 |     },
119 |     "zIndex": 0
120 |   }
121 | ]
122 | 


--------------------------------------------------------------------------------
/src/views/dragDemo/components/data.json:
--------------------------------------------------------------------------------
  1 | [
  2 |   {
  3 |     "id": "1",
  4 |     "shape": "dag-node",
  5 |     "x": 290,
  6 |     "y": 110,
  7 |     "data": {
  8 |       "label": "读数据",
  9 |       "status": "success"
 10 |     },
 11 |     "ports": [
 12 |       {
 13 |         "id": "1-1",
 14 |         "group": "bottom"
 15 |       }
 16 |     ]
 17 |   },
 18 |   {
 19 |     "id": "2",
 20 |     "shape": "dag-node",
 21 |     "x": 290,
 22 |     "y": 225,
 23 |     "data": {
 24 |       "label": "逻辑回归",
 25 |       "status": "success"
 26 |     },
 27 |     "ports": [
 28 |       {
 29 |         "id": "2-1",
 30 |         "group": "top"
 31 |       },
 32 |       {
 33 |         "id": "2-2",
 34 |         "group": "bottom"
 35 |       },
 36 |       {
 37 |         "id": "2-3",
 38 |         "group": "bottom"
 39 |       }
 40 |     ]
 41 |   },
 42 |   {
 43 |     "id": "3",
 44 |     "shape": "dag-node",
 45 |     "x": 170,
 46 |     "y": 350,
 47 |     "data": {
 48 |       "label": "模型预测",
 49 |       "status": "success"
 50 |     },
 51 |     "ports": [
 52 |       {
 53 |         "id": "3-1",
 54 |         "group": "top"
 55 |       },
 56 |       {
 57 |         "id": "3-2",
 58 |         "group": "bottom"
 59 |       }
 60 |     ]
 61 |   },
 62 |   {
 63 |     "id": "4",
 64 |     "shape": "dag-node",
 65 |     "x": 450,
 66 |     "y": 350,
 67 |     "data": {
 68 |       "label": "读取参数",
 69 |       "status": "success"
 70 |     },
 71 |     "ports": [
 72 |       {
 73 |         "id": "4-1",
 74 |         "group": "top"
 75 |       },
 76 |       {
 77 |         "id": "4-2",
 78 |         "group": "bottom"
 79 |       }
 80 |     ]
 81 |   },
 82 |   {
 83 |     "id": "5",
 84 |     "shape": "dag-edge",
 85 |     "source": {
 86 |       "cell": "1",
 87 |       "port": "1-1"
 88 |     },
 89 |     "target": {
 90 |       "cell": "2",
 91 |       "port": "2-1"
 92 |     },
 93 |     "zIndex": 0
 94 |   },
 95 |   {
 96 |     "id": "6",
 97 |     "shape": "dag-edge",
 98 |     "source": {
 99 |       "cell": "2",
100 |       "port": "2-2"
101 |     },
102 |     "target": {
103 |       "cell": "3",
104 |       "port": "3-1"
105 |     },
106 |     "zIndex": 0
107 |   },
108 |   {
109 |     "id": "7",
110 |     "shape": "dag-edge",
111 |     "source": {
112 |       "cell": "2",
113 |       "port": "2-3"
114 |     },
115 |     "target": {
116 |       "cell": "4",
117 |       "port": "4-1"
118 |     },
119 |     "zIndex": 0
120 |   }
121 | ]
122 | 


--------------------------------------------------------------------------------
/src/views/dargeDemo/config.js:
--------------------------------------------------------------------------------
  1 | export const shapeObj = {
  2 |   "dag-node": {
  3 |     id: "1",
  4 |     shape: "dag-node",
  5 |     x: 290,
  6 |     y: 110,
  7 |     data: {
  8 |       id: "1",
  9 |       label: "读数据",
 10 |       status: "success",
 11 |     },
 12 |   },
 13 | };
 14 | 
 15 | export const statusColor = {
 16 |   success: "#52c41a",
 17 |   error: "#c42027",
 18 |   normal: "#b1b4b1",
 19 | };
 20 | 
 21 | // 结构
 22 | export const dataJson = [
 23 |   {
 24 |     type: "common",
 25 |     data: {
 26 |       status: "success",
 27 |       label: "流程开始1",
 28 |     },
 29 |     children: [
 30 |       {
 31 |         type: "common",
 32 |         data: {
 33 |           status: "normal",
 34 |           label: "流程开始2",
 35 |           form: {
 36 |             text1: "",
 37 |             text2: "",
 38 |             text3: "",
 39 |             text4: "",
 40 |           },
 41 |         },
 42 |         children: [
 43 |           {
 44 |             type: "exnode",
 45 |             data: {
 46 |               status: "error",
 47 |               label: "流程开始3",
 48 |             },
 49 |           },
 50 |         ],
 51 |       },
 52 |       {
 53 |         type: "common",
 54 |         data: {
 55 |           status: "normal",
 56 |           label: "流程开始4",
 57 |         },
 58 |       },
 59 |     ],
 60 |   },
 61 | ];
 62 | 
 63 | // 自定义json
 64 | export const customJson = [
 65 |   // 自定义1
 66 |   {
 67 |     type: "common",
 68 |     data: {
 69 |       status: "success",
 70 |       label: "自定义1",
 71 |     },
 72 |     children: [
 73 |       {
 74 |         type: "exnode",
 75 |         data: {
 76 |           status: "normal",
 77 |           label: "1-1",
 78 |         },
 79 |       },
 80 |       {
 81 |         type: "exnode",
 82 |         data: {
 83 |           status: "normal",
 84 |           label: "1-2",
 85 |         },
 86 |       },
 87 |     ],
 88 |   },
 89 |   // 自定义2
 90 |   {
 91 |     type: "common",
 92 |     data: {
 93 |       status: "success",
 94 |       label: "自定义2",
 95 |     },
 96 |     children: [
 97 |       {
 98 |         type: "common",
 99 |         data: {
100 |           status: "normal",
101 |           label: "2-1",
102 |           form: {
103 |             text1: "",
104 |             text2: "",
105 |             text3: "",
106 |             text4: "",
107 |           },
108 |         },
109 |       },
110 |       {
111 |         type: "common",
112 |         data: {
113 |           status: "normal",
114 |           label: "2-2",
115 |           form: {
116 |             text1: "",
117 |             text2: "",
118 |             text3: "",
119 |             text4: "",
120 |           },
121 |         },
122 |       },
123 |     ],
124 |   },
125 | ];
126 | 
127 | export function generateUniqueId() {
128 |   // 根据自己的需求生成唯一ID
129 |   // 例如组合时间戳、随机数和计数器
130 |   const timestamp = Date.now().toString(36);
131 |   const randomNumber = Math.random().toString(36).substr(2, 5);
132 |   const counter = generateUniqueId.counter
133 |     ? ++generateUniqueId.counter
134 |     : (generateUniqueId.counter = 1);
135 |   return `${timestamp}-${randomNumber}-${counter}`;
136 | }
137 | 


--------------------------------------------------------------------------------
/src/views/dragDemo/components/nodeTheme/onlyIn.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="node" :class="status">
  3 |     <img :src="imgCot.logo" alt="" />
  4 |     <span class="label">{{ label }}</span>
  5 |     <span class="status">
  6 |       <img :src="imgCot[status]" alt="" />
  7 |     </span>
  8 |   </div>
  9 | </template>
 10 | 
 11 | <script>
 12 | export default {
 13 |   name: "onlyIn",
 14 | 
 15 |   inject: ["getGraph", "getNode"],
 16 |   data() {
 17 |     return {
 18 |       status: "logo",
 19 |       label: "",
 20 |       imgCot: {
 21 |         logo: "https://gw.alipayobjects.com/mdn/rms_43231b/afts/img/A*evDjT5vjkX0AAAAAAAAAAAAAARQnAQ",
 22 |         success:
 23 |           "https://gw.alipayobjects.com/mdn/rms_43231b/afts/img/A*6l60T6h8TTQAAAAAAAAAAAAAARQnAQ",
 24 |         failed:
 25 |           "https://gw.alipayobjects.com/mdn/rms_43231b/afts/img/A*SEISQ6My-HoAAAAAAAAAAAAAARQnAQ",
 26 |         running:
 27 |           "https://gw.alipayobjects.com/mdn/rms_43231b/afts/img/A*t8fURKfgSOgAAAAAAAAAAAAAARQnAQ",
 28 |       },
 29 |     };
 30 |   },
 31 |   mounted() {
 32 |     const self = this;
 33 |     const node = this.getNode();
 34 |     this.label = node.data.label;
 35 | 
 36 |     // 监听数据改变事件
 37 |     node.on("change:data", ({ current }) => {
 38 |       self.label = current.label;
 39 |     });
 40 |   },
 41 | };
 42 | </script>
 43 | <style xml:lang="scss" scoped>
 44 | .node {
 45 |   display: flex;
 46 |   align-items: center;
 47 |   width: 100%;
 48 |   height: 100%;
 49 |   background-color: #fff;
 50 |   border: 1px solid #c2c8d5;
 51 |   border-left: 4px solid #5f95ff;
 52 |   border-radius: 4px;
 53 |   box-shadow: 0 2px 5px 1px rgba(0, 0, 0, 0.06);
 54 | }
 55 | 
 56 | .node img {
 57 |   width: 20px;
 58 |   height: 20px;
 59 |   flex-shrink: 0;
 60 |   margin-left: 8px;
 61 | }
 62 | 
 63 | .node .label {
 64 |   display: inline-block;
 65 |   flex-shrink: 0;
 66 |   width: 104px;
 67 |   margin-left: 8px;
 68 |   color: #666;
 69 |   font-size: 12px;
 70 | }
 71 | 
 72 | .node .status {
 73 |   flex-shrink: 0;
 74 | }
 75 | 
 76 | .node.success {
 77 |   border-left: 4px solid #52c41a;
 78 | }
 79 | 
 80 | .node.failed {
 81 |   border-left: 4px solid #ff4d4f;
 82 | }
 83 | 
 84 | .node.running .status img {
 85 |   animation: spin 1s linear infinite;
 86 | }
 87 | 
 88 | .x6-node-selected .node {
 89 |   border-color: #1890ff;
 90 |   border-radius: 2px;
 91 |   box-shadow: 0 0 0 4px #d4e8fe;
 92 | }
 93 | 
 94 | .x6-node-selected .node.success {
 95 |   border-color: #52c41a;
 96 |   border-radius: 2px;
 97 |   box-shadow: 0 0 0 4px #ccecc0;
 98 | }
 99 | 
100 | .x6-node-selected .node.failed {
101 |   border-color: #ff4d4f;
102 |   border-radius: 2px;
103 |   box-shadow: 0 0 0 4px #fedcdc;
104 | }
105 | 
106 | .x6-edge:hover path:nth-child(2) {
107 |   stroke: #1890ff;
108 |   stroke-width: 1px;
109 | }
110 | 
111 | .x6-edge-selected path:nth-child(2) {
112 |   stroke: #1890ff;
113 |   stroke-width: 1.5px !important;
114 | }
115 | 
116 | @keyframes running-line {
117 |   to {
118 |     stroke-dashoffset: -1000;
119 |   }
120 | }
121 | 
122 | @keyframes spin {
123 |   from {
124 |     transform: rotate(0deg);
125 |   }
126 |   to {
127 |     transform: rotate(360deg);
128 |   }
129 | }
130 | </style>
131 | 


--------------------------------------------------------------------------------
/src/views/dragDemo/components/nodeTheme/onlyOut.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="node" :class="status">
  3 |     <img :src="imgCot.logo" alt="" />
  4 |     <span class="label">{{ label }}</span>
  5 |     <span class="status">
  6 |       <img :src="imgCot[status]" alt="" />
  7 |     </span>
  8 |   </div>
  9 | </template>
 10 | 
 11 | <script>
 12 | export default {
 13 |   name: "onlyOut",
 14 | 
 15 |   inject: ["getGraph", "getNode"],
 16 |   data() {
 17 |     return {
 18 |       status: "logo",
 19 |       label: "",
 20 |       imgCot: {
 21 |         logo: "https://gw.alipayobjects.com/mdn/rms_43231b/afts/img/A*evDjT5vjkX0AAAAAAAAAAAAAARQnAQ",
 22 |         success:
 23 |           "https://gw.alipayobjects.com/mdn/rms_43231b/afts/img/A*6l60T6h8TTQAAAAAAAAAAAAAARQnAQ",
 24 |         failed:
 25 |           "https://gw.alipayobjects.com/mdn/rms_43231b/afts/img/A*SEISQ6My-HoAAAAAAAAAAAAAARQnAQ",
 26 |         running:
 27 |           "https://gw.alipayobjects.com/mdn/rms_43231b/afts/img/A*t8fURKfgSOgAAAAAAAAAAAAAARQnAQ",
 28 |       },
 29 |     };
 30 |   },
 31 |   mounted() {
 32 |     const self = this;
 33 |     const node = this.getNode();
 34 |     this.label = node.data.label;
 35 | 
 36 |     // 监听数据改变事件
 37 |     node.on("change:data", ({ current }) => {
 38 |       self.label = current.label;
 39 |     });
 40 |   },
 41 | };
 42 | </script>
 43 | <style xml:lang="scss" scoped>
 44 | .node {
 45 |   display: flex;
 46 |   align-items: center;
 47 |   width: 100%;
 48 |   height: 100%;
 49 |   background-color: #fff;
 50 |   border: 1px solid #c2c8d5;
 51 |   border-left: 4px solid #5f95ff;
 52 |   border-radius: 4px;
 53 |   box-shadow: 0 2px 5px 1px rgba(0, 0, 0, 0.06);
 54 | }
 55 | 
 56 | .node img {
 57 |   width: 20px;
 58 |   height: 20px;
 59 |   flex-shrink: 0;
 60 |   margin-left: 8px;
 61 | }
 62 | 
 63 | .node .label {
 64 |   display: inline-block;
 65 |   flex-shrink: 0;
 66 |   width: 104px;
 67 |   margin-left: 8px;
 68 |   color: #666;
 69 |   font-size: 12px;
 70 | }
 71 | 
 72 | .node .status {
 73 |   flex-shrink: 0;
 74 | }
 75 | 
 76 | .node.success {
 77 |   border-left: 4px solid #52c41a;
 78 | }
 79 | 
 80 | .node.failed {
 81 |   border-left: 4px solid #ff4d4f;
 82 | }
 83 | 
 84 | .node.running .status img {
 85 |   animation: spin 1s linear infinite;
 86 | }
 87 | 
 88 | .x6-node-selected .node {
 89 |   border-color: #1890ff;
 90 |   border-radius: 2px;
 91 |   box-shadow: 0 0 0 4px #d4e8fe;
 92 | }
 93 | 
 94 | .x6-node-selected .node.success {
 95 |   border-color: #52c41a;
 96 |   border-radius: 2px;
 97 |   box-shadow: 0 0 0 4px #ccecc0;
 98 | }
 99 | 
100 | .x6-node-selected .node.failed {
101 |   border-color: #ff4d4f;
102 |   border-radius: 2px;
103 |   box-shadow: 0 0 0 4px #fedcdc;
104 | }
105 | 
106 | .x6-edge:hover path:nth-child(2) {
107 |   stroke: #1890ff;
108 |   stroke-width: 1px;
109 | }
110 | 
111 | .x6-edge-selected path:nth-child(2) {
112 |   stroke: #1890ff;
113 |   stroke-width: 1.5px !important;
114 | }
115 | 
116 | @keyframes running-line {
117 |   to {
118 |     stroke-dashoffset: -1000;
119 |   }
120 | }
121 | 
122 | @keyframes spin {
123 |   from {
124 |     transform: rotate(0deg);
125 |   }
126 |   to {
127 |     transform: rotate(360deg);
128 |   }
129 | }
130 | </style>
131 | 


--------------------------------------------------------------------------------
/src/views/dragDemo/components/nodeTheme/condition.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="node" :class="status">
  3 |     <img :src="imgCot.logo" alt="" />
  4 |     <span class="label">{{ label }}</span>
  5 |     <span class="status">
  6 |       <img :src="imgCot[status]" alt="" />
  7 |     </span>
  8 |   </div>
  9 | </template>
 10 | 
 11 | <script>
 12 | export default {
 13 |   name: "ConditionCom",
 14 | 
 15 |   inject: ["getGraph", "getNode"],
 16 |   data() {
 17 |     return {
 18 |       status: "logo",
 19 |       label: "",
 20 |       imgCot: {
 21 |         logo: "https://gw.alipayobjects.com/mdn/rms_43231b/afts/img/A*evDjT5vjkX0AAAAAAAAAAAAAARQnAQ",
 22 |         success:
 23 |           "https://gw.alipayobjects.com/mdn/rms_43231b/afts/img/A*6l60T6h8TTQAAAAAAAAAAAAAARQnAQ",
 24 |         failed:
 25 |           "https://gw.alipayobjects.com/mdn/rms_43231b/afts/img/A*SEISQ6My-HoAAAAAAAAAAAAAARQnAQ",
 26 |         running:
 27 |           "https://gw.alipayobjects.com/mdn/rms_43231b/afts/img/A*t8fURKfgSOgAAAAAAAAAAAAAARQnAQ",
 28 |       },
 29 |     };
 30 |   },
 31 |   mounted() {
 32 |     const self = this;
 33 |     const node = this.getNode();
 34 |     this.label = node.data.label;
 35 | 
 36 |     // 监听数据改变事件
 37 |     node.on("change:data", ({ current }) => {
 38 |       self.label = current.label;
 39 |       self.status = current.status;
 40 |     });
 41 |   },
 42 | };
 43 | </script>
 44 | <style xml:lang="scss" scoped>
 45 | .node {
 46 |   display: flex;
 47 |   align-items: center;
 48 |   width: 100%;
 49 |   height: 100%;
 50 |   background-color: #fff;
 51 |   border: 1px solid #c2c8d5;
 52 |   border-left: 4px solid #5f95ff;
 53 |   border-radius: 4px;
 54 |   box-shadow: 0 2px 5px 1px rgba(0, 0, 0, 0.06);
 55 | }
 56 | 
 57 | .node img {
 58 |   width: 20px;
 59 |   height: 20px;
 60 |   flex-shrink: 0;
 61 |   margin-left: 8px;
 62 | }
 63 | 
 64 | .node .label {
 65 |   display: inline-block;
 66 |   flex-shrink: 0;
 67 |   width: 104px;
 68 |   margin-left: 8px;
 69 |   color: #666;
 70 |   font-size: 12px;
 71 | }
 72 | 
 73 | .node .status {
 74 |   flex-shrink: 0;
 75 | }
 76 | 
 77 | .node.success {
 78 |   border-left: 4px solid #52c41a;
 79 | }
 80 | 
 81 | .node.failed {
 82 |   border-left: 4px solid #ff4d4f;
 83 | }
 84 | 
 85 | .node.running .status img {
 86 |   animation: spin 1s linear infinite;
 87 | }
 88 | 
 89 | .x6-node-selected .node {
 90 |   border-color: #1890ff;
 91 |   border-radius: 2px;
 92 |   box-shadow: 0 0 0 4px #d4e8fe;
 93 | }
 94 | 
 95 | .x6-node-selected .node.success {
 96 |   border-color: #52c41a;
 97 |   border-radius: 2px;
 98 |   box-shadow: 0 0 0 4px #ccecc0;
 99 | }
100 | 
101 | .x6-node-selected .node.failed {
102 |   border-color: #ff4d4f;
103 |   border-radius: 2px;
104 |   box-shadow: 0 0 0 4px #fedcdc;
105 | }
106 | 
107 | .x6-edge:hover path:nth-child(2) {
108 |   stroke: #1890ff;
109 |   stroke-width: 1px;
110 | }
111 | 
112 | .x6-edge-selected path:nth-child(2) {
113 |   stroke: #1890ff;
114 |   stroke-width: 1.5px !important;
115 | }
116 | 
117 | @keyframes running-line {
118 |   to {
119 |     stroke-dashoffset: -1000;
120 |   }
121 | }
122 | 
123 | @keyframes spin {
124 |   from {
125 |     transform: rotate(0deg);
126 |   }
127 |   to {
128 |     transform: rotate(360deg);
129 |   }
130 | }
131 | </style>
132 | 


--------------------------------------------------------------------------------
/src/views/dragDemo/components/nodeTheme/database.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="node" :class="status">
  3 |     <img :src="imgCot.logo" alt="" />
  4 |     <span class="label">{{ label }}</span>
  5 |     <span class="status">
  6 |       <img :src="imgCot[status]" alt="" />
  7 |     </span>
  8 |   </div>
  9 | </template>
 10 | 
 11 | <script>
 12 | export default {
 13 |   name: "DatabaseCom",
 14 | 
 15 |   inject: ["getGraph", "getNode"],
 16 |   data() {
 17 |     return {
 18 |       status: "logo",
 19 |       imgCot: {
 20 |         logo: "https://gw.alipayobjects.com/mdn/rms_43231b/afts/img/A*evDjT5vjkX0AAAAAAAAAAAAAARQnAQ",
 21 |         success:
 22 |           "https://gw.alipayobjects.com/mdn/rms_43231b/afts/img/A*6l60T6h8TTQAAAAAAAAAAAAAARQnAQ",
 23 |         failed:
 24 |           "https://gw.alipayobjects.com/mdn/rms_43231b/afts/img/A*SEISQ6My-HoAAAAAAAAAAAAAARQnAQ",
 25 |         running:
 26 |           "https://gw.alipayobjects.com/mdn/rms_43231b/afts/img/A*t8fURKfgSOgAAAAAAAAAAAAAARQnAQ",
 27 |       },
 28 |       label: "",
 29 |     };
 30 |   },
 31 |   mounted() {
 32 |     const self = this;
 33 |     const node = this.getNode();
 34 |     this.label = node.data.label;
 35 | 
 36 |     // 监听数据改变事件
 37 |     node.on("change:data", ({ current }) => {
 38 |       self.label = current.label;
 39 |       self.status = current.status;
 40 |     });
 41 |   },
 42 | };
 43 | </script>
 44 | <style xml:lang="scss" scoped>
 45 | .node {
 46 |   display: flex;
 47 |   align-items: center;
 48 |   width: 100%;
 49 |   height: 100%;
 50 |   background-color: #fff;
 51 |   border: 1px solid #c2c8d5;
 52 |   border-left: 4px solid #5f95ff;
 53 |   border-radius: 4px;
 54 |   box-shadow: 0 2px 5px 1px rgba(0, 0, 0, 0.06);
 55 | }
 56 | 
 57 | .node img {
 58 |   width: 20px;
 59 |   height: 20px;
 60 |   flex-shrink: 0;
 61 |   margin-left: 8px;
 62 | }
 63 | 
 64 | .node .label {
 65 |   display: inline-block;
 66 |   flex-shrink: 0;
 67 |   width: 104px;
 68 |   margin-left: 8px;
 69 |   color: #666;
 70 |   font-size: 12px;
 71 | }
 72 | 
 73 | .node .status {
 74 |   flex-shrink: 0;
 75 | }
 76 | 
 77 | .node.success {
 78 |   border-left: 4px solid #52c41a;
 79 | }
 80 | 
 81 | .node.failed {
 82 |   border-left: 4px solid #ff4d4f;
 83 | }
 84 | 
 85 | .node.running .status img {
 86 |   animation: spin 1s linear infinite;
 87 | }
 88 | 
 89 | .x6-node-selected .node {
 90 |   border-color: #1890ff;
 91 |   border-radius: 2px;
 92 |   box-shadow: 0 0 0 4px #d4e8fe;
 93 | }
 94 | 
 95 | .x6-node-selected .node.success {
 96 |   border-color: #52c41a;
 97 |   border-radius: 2px;
 98 |   box-shadow: 0 0 0 4px #ccecc0;
 99 | }
100 | 
101 | .x6-node-selected .node.failed {
102 |   border-color: #ff4d4f;
103 |   border-radius: 2px;
104 |   box-shadow: 0 0 0 4px #fedcdc;
105 | }
106 | 
107 | .x6-edge:hover path:nth-child(2) {
108 |   stroke: #1890ff;
109 |   stroke-width: 1px;
110 | }
111 | 
112 | .x6-edge-selected path:nth-child(2) {
113 |   stroke: #1890ff;
114 |   stroke-width: 1.5px !important;
115 | }
116 | 
117 | @keyframes running-line {
118 |   to {
119 |     stroke-dashoffset: -1000;
120 |   }
121 | }
122 | 
123 | @keyframes spin {
124 |   from {
125 |     transform: rotate(0deg);
126 |   }
127 |   to {
128 |     transform: rotate(360deg);
129 |   }
130 | }
131 | </style>
132 | 


--------------------------------------------------------------------------------
/src/views/dargeDemo/components/node/common.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="content">
  3 |     <div class="node" :class="status">
  4 |       <span class="label">{{ label }}</span>
  5 |       <el-dropdown class="right">
  6 |         <span class="el-dropdown-link">
  7 |           <i class="el-icon-circle-plus icon"></i>
  8 |         </span>
  9 |         <el-dropdown-menu slot="dropdown">
 10 |           <el-dropdown-item @click.native="editFn()"
 11 |             >打开编辑器</el-dropdown-item
 12 |           >
 13 |         </el-dropdown-menu>
 14 |       </el-dropdown>
 15 | 
 16 |       <FromVue
 17 |         v-if="node.data && node.data.form"
 18 |         :styleItem="{ top: '50px' }"
 19 |         :text="node.data.form.text1"
 20 |         @change="change1"
 21 |       ></FromVue>
 22 |       <FromVue
 23 |         v-if="node.data && node.data.form"
 24 |         :styleItem="{ top: '-110px' }"
 25 |         :text="node.data.form.text2"
 26 |         @change="change2"
 27 |       ></FromVue>
 28 |     </div>
 29 |   </div>
 30 | </template>
 31 | 
 32 | <script>
 33 | import { statusColor } from "@/views/dargeDemo/config";
 34 | import FromVue from "../formVue";
 35 | export default {
 36 |   name: "CommonNode",
 37 | 
 38 |   inject: ["getGraph", "getNode"],
 39 |   components: { FromVue },
 40 |   data() {
 41 |     return {
 42 |       status: "",
 43 |       label: "",
 44 |       node: "",
 45 |       statusColor,
 46 |     };
 47 |   },
 48 |   methods: {
 49 |     change1(text) {
 50 |       this.node.data.form.text1 = text;
 51 |       this.$EventBus.$emit("DargeEditChange", {
 52 |         type: "data",
 53 |         node: this.node,
 54 |       });
 55 |     },
 56 |     change2(text) {
 57 |       this.node.data.form.text2 = text;
 58 |       this.$EventBus.$emit("DargeEditChange", {
 59 |         type: "data",
 60 |         node: this.node,
 61 |       });
 62 |     },
 63 |     editFn() {
 64 |       this.$EventBus.$emit("DargeEditEvent", this.node);
 65 |     },
 66 |   },
 67 |   mounted() {
 68 |     // 重要，不然方法可能丢失this
 69 |     const methods = this.$options.methods;
 70 |     for (let key in methods) {
 71 |       methods[key].bind(this);
 72 |     }
 73 |     // this.editFn.bind(this);
 74 |     const node = this.getNode();
 75 |     this.node = node;
 76 |     this.label = node.data.label || "";
 77 |     this.status = node.data.status || "";
 78 |   },
 79 | };
 80 | </script>
 81 | <style lang="less" scoped>
 82 | @import "../../../../style/dargeLess.less";
 83 | .content {
 84 |   padding-right: 10px;
 85 |   width: 100%;
 86 |   height: 100%;
 87 | }
 88 | .node {
 89 |   display: flex;
 90 |   width: calc(100% - 24px);
 91 |   height: 100%;
 92 |   align-items: center;
 93 |   position: relative;
 94 |   background-color: #fff;
 95 |   border: 1px solid #c2c8d5;
 96 |   border-left: 4px solid #5f95ff;
 97 |   border-radius: 4px;
 98 |   box-shadow: 0 2px 5px 1px rgba(0, 0, 0, 0.06);
 99 |   padding-right: 10px;
100 |   > .right {
101 |     position: absolute;
102 |     z-index: 1000;
103 |     right: -10px;
104 |     .icon {
105 |       font-size: 20px;
106 |       background-color: #ffffff;
107 |       cursor: pointer;
108 |     }
109 |   }
110 | }
111 | 
112 | .node img {
113 |   width: 20px;
114 |   height: 20px;
115 |   flex-shrink: 0;
116 |   margin-left: 8px;
117 | }
118 | 
119 | .node .label {
120 |   display: inline-block;
121 |   flex-shrink: 0;
122 |   width: 104px;
123 |   margin-left: 8px;
124 |   color: #666;
125 |   font-size: 12px;
126 | }
127 | </style>
128 | 


--------------------------------------------------------------------------------
/src/views/demo3/components/drawer.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="Ec-x6-icon">
  3 |     <el-drawer
  4 |       title="自定义框框"
  5 |       :visible.sync="visible"
  6 |       :direction="direction"
  7 |       size="300px"
  8 |       :modal="false"
  9 |       :modal-append-to-body="false"
 10 |       style="position: absolute; width: 300px; box-sizing: border-box"
 11 |       show-close
 12 |     >
 13 |       <section class="listBar" @click.stop="">
 14 |         <p @click="showMore = !showMore">
 15 |           <img
 16 |             :class="{ arrow: showMore }"
 17 |             src="@/assets/svg/arrow.svg"
 18 |             alt=""
 19 |           />
 20 |           系统组件
 21 |         </p>
 22 |         <div v-if="showMore" class="listBar-cot">
 23 |           <div
 24 |             v-for="(item, index) in configList"
 25 |             :key="index"
 26 |             class="drag-cot"
 27 |             draggable="true"
 28 |             @dragend="dragend(item)"
 29 |           >
 30 |             <span>
 31 |               <img src="@/assets/svg/defaultImg.svg" alt="" />
 32 |             </span>
 33 |             <p>
 34 |               {{ item.data.name }}
 35 |             </p>
 36 |           </div>
 37 |         </div>
 38 |       </section>
 39 |     </el-drawer>
 40 |   </div>
 41 | </template>
 42 | 
 43 | <script>
 44 | const mouseXY = { x: null, y: null };
 45 | import config from "./config";
 46 | import { generateUniqueId } from "@/utils";
 47 | export default {
 48 |   name: "DrawerCom",
 49 |   data() {
 50 |     return {
 51 |       visible: true,
 52 |       direction: "ltr",
 53 |       showMore: true,
 54 |       configList: config,
 55 |     };
 56 |   },
 57 |   mounted() {
 58 |     document.getElementById("container").addEventListener(
 59 |       "dragover",
 60 |       function (e) {
 61 |         mouseXY.x = e.clientX;
 62 |         mouseXY.y = e.clientY;
 63 |       },
 64 |       false
 65 |     );
 66 |   },
 67 |   methods: {
 68 |     getPortStyle(text, textColor, borderColor) {
 69 |       return {
 70 |         portNameLabel: {
 71 |           text,
 72 |           fill: textColor,
 73 |           refX: 5,
 74 |           refY: 5,
 75 |         },
 76 |         portBody: {
 77 |           width: 30,
 78 |           height: 20,
 79 |           strokeWidth: 1,
 80 |           fill: borderColor,
 81 |           magnet: true,
 82 |         },
 83 |       };
 84 |     },
 85 |     nodeConfig(item, x, y) {
 86 |       let config = "";
 87 |       const id = generateUniqueId();
 88 | 
 89 |       // 链接桩3种状态 1、in | 只允许被连  2、out | 只允许输出  3、any | 不限制
 90 |       switch (item.type) {
 91 |         case "common":
 92 |           config = {
 93 |             id,
 94 |             x: x,
 95 |             y: y,
 96 |             width: item.width,
 97 |             height: item.height,
 98 |             shape: `node-${item.type}`,
 99 |             data: item,
100 |             ports: {
101 |               items: [
102 |                 {
103 |                   id: `top-${id}`,
104 |                   group: "top",
105 |                 },
106 |                 {
107 |                   id: `out-${id}`,
108 |                   group: "list", // 指定分组名称
109 |                   attrs: this.getPortStyle("肯定", "blue", "#a4c8eb"),
110 |                 },
111 |                 {
112 |                   id: `out2-${id}`,
113 |                   group: "list", // 指定分组名称
114 |                   attrs: this.getPortStyle("拒绝", "red", "#f1a6a6"),
115 |                 },
116 |               ],
117 |             },
118 |           };
119 |           break;
120 |       }
121 |       return config;
122 |     },
123 |     dragend: function (item) {
124 |       const parentRect = document
125 |         .getElementById("container")
126 |         .getBoundingClientRect();
127 |       let mouseInGrid = false;
128 |       if (
129 |         mouseXY.x > parentRect.left &&
130 |         mouseXY.x < parentRect.right &&
131 |         mouseXY.y > parentRect.top &&
132 |         mouseXY.y < parentRect.bottom
133 |       ) {
134 |         mouseInGrid = true;
135 |       }
136 |       if (mouseInGrid === true) {
137 |         this.$emit("addNode", this.nodeConfig(item, mouseXY.x, mouseXY.y));
138 |       }
139 |     },
140 |   },
141 | };
142 | </script>
143 | <style lang="less" scoped>
144 | .Ec-x6-icon /deep/ .el-drawer__body {
145 |   overflow-y: scroll;
146 | }
147 | 
148 | .Ec-x6-icon /deep/ .el-drawer__header {
149 |   padding: 0 12px;
150 |   margin-bottom: 0;
151 |   width: 300px;
152 | }
153 | 
154 | .listBar {
155 |   display: flex;
156 |   justify-content: flex-start;
157 |   flex-wrap: wrap;
158 |   font-size: 14px;
159 | }
160 | 
161 | .listBar img {
162 |   width: 12px;
163 | }
164 | 
165 | .arrow {
166 |   transform: rotate(90deg);
167 |   transition-duration: 0.3s;
168 | }
169 | 
170 | .listBar-cot {
171 |   display: inline-block;
172 |   padding-left: 12px;
173 |   box-sizing: border-box;
174 |   width: 100%;
175 |   text-align: left;
176 | }
177 | 
178 | .listBar-cot .drag-cot {
179 |   display: inline-flex;
180 |   flex-wrap: wrap;
181 |   align-items: center;
182 |   justify-content: center;
183 |   width: 62px;
184 |   height: 62px;
185 | }
186 | 
187 | .listBar-cot .drag-cot span {
188 |   display: inline-block;
189 |   width: 50px;
190 |   height: 50px;
191 | }
192 | 
193 | .listBar-cot .drag-cot span img {
194 |   width: 100%;
195 |   height: 100%;
196 | }
197 | 
198 | .listBar-cot .drag-cot p {
199 |   margin: -2px 0 0;
200 |   text-align: center;
201 |   font-size: 12px;
202 |   color: #939393;
203 | }
204 | </style>
205 | 


--------------------------------------------------------------------------------
/src/views/dargeDemo/components/drawer.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <el-drawer
  3 |     title="API 实例"
  4 |     :visible.sync="visible"
  5 |     width="700px"
  6 |     :modal="false"
  7 |   >
  8 |     <el-form ref="form" label-width="140px" size="small">
  9 |       <template v-if="nodeItem">
 10 |         <el-form-item label="当前编辑节点">
 11 |           {{ nodeItem.data.label }}
 12 |         </el-form-item>
 13 |         <el-form-item label="当前编辑节点Id">
 14 |           {{ nodeItem.id }}
 15 |         </el-form-item>
 16 |       </template>
 17 | 
 18 |       <el-form-item label="修改状态">
 19 |         <div class="fx-left">
 20 |           <el-select v-model="status" placeholder="请选择">
 21 |             <el-option
 22 |               v-for="(item, index) in options"
 23 |               :key="index"
 24 |               :label="item.label"
 25 |               :value="item.value"
 26 |             >
 27 |             </el-option>
 28 |           </el-select>
 29 |           <el-button @click="changeStatus('status')" type="primary"
 30 |             >确定</el-button
 31 |           >
 32 |         </div>
 33 |       </el-form-item>
 34 | 
 35 |       <el-form-item label="复制节点">
 36 |         <div class="fx-left">
 37 |           <el-select v-model="copyTarget" placeholder="请选择">
 38 |             <el-option
 39 |               v-for="(item, index) in copyList"
 40 |               :key="index"
 41 |               :label="item.label"
 42 |               :value="item.value"
 43 |             >
 44 |             </el-option>
 45 |           </el-select>
 46 |           <el-button @click="changeStatus('copy')" type="primary"
 47 |             >确定</el-button
 48 |           >
 49 |         </div>
 50 |       </el-form-item>
 51 | 
 52 |       <el-form-item label="连线到某个节点">
 53 |         <div class="fx-left">
 54 |           <el-select v-model="markId" placeholder="请选择">
 55 |             <el-option
 56 |               v-for="(item, index) in copyList"
 57 |               :key="index"
 58 |               :label="item.label"
 59 |               :value="item.value"
 60 |             >
 61 |             </el-option>
 62 |           </el-select>
 63 |           <el-form-item>
 64 |             <el-input v-model="markId" palceholder="输入目标id"></el-input>
 65 |           </el-form-item>
 66 | 
 67 |           <el-button @click="changeStatus('markTarget')" type="primary"
 68 |             >确定</el-button
 69 |           >
 70 |         </div>
 71 |       </el-form-item>
 72 | 
 73 |       <el-form-item label="接入自定义结构">
 74 |         <div class="fx-left">
 75 |           <el-select v-model="customIndex" placeholder="请选择">
 76 |             <el-option
 77 |               v-for="(item, index) in customOptions"
 78 |               :key="index"
 79 |               :label="item.label"
 80 |               :value="item.value"
 81 |             >
 82 |             </el-option>
 83 |           </el-select>
 84 |           <el-button @click="changeStatus('linkCustom')" type="primary"
 85 |             >确定</el-button
 86 |           >
 87 |         </div>
 88 |       </el-form-item>
 89 |     </el-form>
 90 |   </el-drawer>
 91 | </template>
 92 | 
 93 | <script>
 94 | import { customJson } from "../config";
 95 | export default {
 96 |   name: "EditDialog",
 97 |   data() {
 98 |     return {
 99 |       visible: false,
100 |       nodeItem: "",
101 |       copyList: [],
102 |       copyTarget: "",
103 |       markId: "",
104 |       status: "",
105 |       options: [
106 |         {
107 |           value: "success",
108 |           label: "成功",
109 |         },
110 |         {
111 |           value: "error",
112 |           label: "失败",
113 |         },
114 |         {
115 |           value: "normal",
116 |           label: "正常",
117 |         },
118 |       ],
119 |       customOptions: [],
120 |       customIndex: "",
121 |     };
122 |   },
123 |   beforeDestroy() {},
124 |   mounted() {
125 |     customJson.forEach((e, index) => {
126 |       this.customOptions.push({
127 |         label: "自定义结构" + (index + 1),
128 |         value: "自定义结构" + (index + 1),
129 |         link: e,
130 |       });
131 |     });
132 |   },
133 |   methods: {
134 |     getCopyList() {
135 |       this.copyList = [];
136 |       const fn = (d) => {
137 |         this.copyList.push({
138 |           value: d.id,
139 |           label: d.data.label,
140 |         });
141 |         if (d.children && d.children.length) {
142 |           d.children.forEach((nextData) => {
143 |             fn(nextData);
144 |           });
145 |         }
146 |       };
147 | 
148 |       if (window.$DargeDemoDataJSON) {
149 |         window.$DargeDemoDataJSON.forEach((d) => {
150 |           fn(d);
151 |         });
152 |       }
153 |     },
154 |     changeStatus(type) {
155 |       const node = JSON.parse(JSON.stringify(this.nodeItem));
156 |       node.data.status = this.status;
157 |       const params = {
158 |         type,
159 |         node: node,
160 |       };
161 | 
162 |       switch (type) {
163 |         case "copy":
164 |           params.targetId = this.copyTarget;
165 |           break;
166 |         case "status":
167 |           break;
168 |         case "markTarget":
169 |           params.targetId = this.markId;
170 |           break;
171 |         case "linkCustom":
172 |           params.linkCustom = this.customOptions.find(
173 |             (e) => e.value === this.customIndex
174 |           ).link;
175 |           console.log(params, 123123);
176 |           break;
177 |       }
178 |       this.$emit("change", params);
179 |     },
180 |     init(node) {
181 |       this.nodeItem = node;
182 |       this.status = node.data.status;
183 |       this.visible = true;
184 |       this.getCopyList();
185 |     },
186 |   },
187 | };
188 | </script>
189 | 
190 | <style lang="less" scoped>
191 | .fx-left {
192 |   display: flex;
193 |   align-items: center;
194 |   justify-content: flex-start;
195 | }
196 | </style>
197 | 


--------------------------------------------------------------------------------
/src/views/dargeDemo/graphMixin.js:
--------------------------------------------------------------------------------
  1 | import { Graph } from "@antv/x6";
  2 | import common from "@/views/dargeDemo/components/node/common";
  3 | import exnode from "@/views/dargeDemo/components/node/exnode";
  4 | // import { DagreLayout } from "@antv/layout";
  5 | export default {
  6 |   watch: {},
  7 |   beforeMount() {},
  8 |   beforeDestroy() {},
  9 |   mounted() {
 10 |     this.initGraph();
 11 |     this.keyBindFn();
 12 | 
 13 |     // 禁止拖动
 14 |     this.graph.enableKeyboard();
 15 |   },
 16 |   methods: {
 17 |     layoutFn() {},
 18 |     keyBindFn() {
 19 |       // copy cut paste
 20 |       // this.graph.bindKey(["meta+c", "ctrl+c"], () => {
 21 |       //   const cells = this.graph.getSelectedCells();
 22 |       //   if (cells.length) {
 23 |       //     this.graph.copy(cells);
 24 |       //   }
 25 |       //   return false;
 26 |       // });
 27 |       // this.graph.bindKey(["meta+x", "ctrl+x"], () => {
 28 |       //   const cells = this.graph.getSelectedCells();
 29 |       //   if (cells.length) {
 30 |       //     this.graph.cut(cells);
 31 |       //   }
 32 |       //   return false;
 33 |       // });
 34 |       // this.graph.bindKey(["meta+v", "ctrl+v"], () => {
 35 |       //   if (!this.graph.isClipboardEmpty()) {
 36 |       //     const cells = this.graph.paste({ offset: 32 });
 37 |       //     this.graph.cleanSelection();
 38 |       //     this.graph.select(cells);
 39 |       //   }
 40 |       //   return false;
 41 |       // });
 42 |       //
 43 |       // // undo redo
 44 |       // this.graph.bindKey(["meta+z", "ctrl+z"], () => {
 45 |       //   if (this.graph.history.canUndo()) {
 46 |       //     this.graph.history.undo();
 47 |       //   }
 48 |       //   return false;
 49 |       // });
 50 |     },
 51 |     registerNode() {
 52 |       // 注册节点
 53 |       Graph.registerNode(
 54 |         "dag-common",
 55 |         {
 56 |           inherit: "vue-shape",
 57 |           component: {
 58 |             template: `<common />`,
 59 |             components: {
 60 |               common,
 61 |             },
 62 |           },
 63 |           ports: {
 64 |             groups: {
 65 |               left: {
 66 |                 position: "left",
 67 |               },
 68 |               right: {
 69 |                 position: "right",
 70 |               },
 71 |             },
 72 |           },
 73 |         },
 74 |         true
 75 |       );
 76 |       Graph.registerNode(
 77 |         "dag-exnode",
 78 |         {
 79 |           inherit: "vue-shape",
 80 |           component: {
 81 |             template: `<exnode />`,
 82 |             components: {
 83 |               exnode,
 84 |             },
 85 |           },
 86 |           ports: {
 87 |             groups: {
 88 |               left: {
 89 |                 position: "left",
 90 |               },
 91 |               right: {
 92 |                 position: "right",
 93 |               },
 94 |             },
 95 |           },
 96 |         },
 97 |         true
 98 |       );
 99 |     },
100 |     initGraph() {
101 |       this.registerNode();
102 |       // 注册节点
103 |       const graph = new Graph({
104 |         grid: {
105 |           size: 10,
106 |           visible: true,
107 |           type: "dot", // 'dot' | 'fixedDot' | 'mesh'
108 |           args: {
109 |             color: "#0a2327", // 网格线/点颜色
110 |             thickness: 1, // 网格线宽度/网格点大小
111 |           },
112 |         },
113 |         background: {
114 |           color: "#eef3fb", // 设置画布背景颜色
115 |         },
116 |         interacting: {
117 |           nodeMovable: false, // 禁止节点和边移动
118 |           edgeMovable: false,
119 |         },
120 |         container: document.getElementById("draw-cot"),
121 |         panning: {
122 |           enabled: true,
123 |           eventTypes: ["leftMouseDown", "mouseWheel"],
124 |         },
125 |         mousewheel: {
126 |           enabled: true,
127 |           modifiers: "ctrl",
128 |           factor: 1.1,
129 |           maxScale: 1.5,
130 |           minScale: 0.5,
131 |         },
132 |         highlighting: {
133 |           magnetAdsorbed: {
134 |             name: "stroke",
135 |             args: {
136 |               attrs: {
137 |                 fill: "#fff",
138 |                 stroke: "#31d0c6",
139 |                 strokeWidth: 4,
140 |               },
141 |             },
142 |           },
143 |         },
144 |         connecting: {
145 |           snap: true,
146 |           allowBlank: false,
147 |           allowLoop: false,
148 |           highlight: true,
149 | 
150 |           connectionPoint: "anchor",
151 |           anchor: "center",
152 |           validateMagnet() {
153 |             // return magnet.getAttribute('port-group') !== 'top'
154 | 
155 |             // 限制连线配置
156 |             return true;
157 |           },
158 |           createEdge() {
159 |             return graph.createEdge({
160 |               attrs: {
161 |                 line: {
162 |                   strokeDasharray: "5 5",
163 |                   targetMarker: {
164 |                     name: "block",
165 |                     width: 12,
166 |                     height: 8,
167 |                   },
168 |                 },
169 |               },
170 |               zIndex: -1,
171 |             });
172 |           },
173 |         },
174 |         selecting: {
175 |           enabled: true,
176 |           multiple: true,
177 |           rubberEdge: true,
178 |           rubberNode: true,
179 |           modifiers: "shift",
180 |           rubberband: true,
181 |         },
182 |         keyboard: true,
183 |         clipboard: true,
184 |         history: true,
185 |       });
186 |       this.graph = graph;
187 | 
188 |       graph.on("edge:contextmenu", ({ e, x, y, edge, view }) => {
189 |         console.log(x, y, view);
190 |         this.showContextMenu = true;
191 |         this.$nextTick(() => {
192 |           this.$refs.menuBar.initFn(e.offsetX, e.offsetY, {
193 |             type: "edge",
194 |             item: edge,
195 |           });
196 |         });
197 |       });
198 | 
199 |       graph.on("node:contextmenu", ({ e, x, y, node, view }) => {
200 |         console.log(e, x, y, view);
201 |         this.showContextMenu = true;
202 | 
203 |         this.$nextTick(() => {
204 |           // this.$refs.menuBar.setItem({ type: 'node', item: node })
205 |           const p = graph.localToPage(x, y);
206 |           this.$refs.menuBar.initFn(p.x, p.y, { type: "node", item: node });
207 |         });
208 |       });
209 | 
210 |       graph.on("edge:connected", ({ edge }) => {
211 |         edge.attr({
212 |           line: {
213 |             strokeDasharray: "",
214 |           },
215 |         });
216 |       });
217 |     },
218 |   },
219 | };
220 | 


--------------------------------------------------------------------------------
/src/views/demo3/graphMixin.js:
--------------------------------------------------------------------------------
  1 | import { Graph, Path } from "@antv/x6";
  2 | import "@antv/x6-vue-shape";
  3 | import common from "./components/nodeTheme/common.vue";
  4 | export default {
  5 |   watch: {},
  6 |   beforeMount() {},
  7 |   beforeDestroy() {},
  8 |   methods: {
  9 |     layoutFn() {},
 10 |     keyBindFn() {
 11 |       // copy cut paste
 12 |       // this.graph.bindKey(["meta+c", "ctrl+c"], () => {
 13 |       //   const cells = this.graph.getSelectedCells();
 14 |       //   if (cells.length) {
 15 |       //     this.graph.copy(cells);
 16 |       //   }
 17 |       //   return false;
 18 |       // });
 19 |       // this.graph.bindKey(["meta+x", "ctrl+x"], () => {
 20 |       //   const cells = this.graph.getSelectedCells();
 21 |       //   if (cells.length) {
 22 |       //     this.graph.cut(cells);
 23 |       //   }
 24 |       //   return false;
 25 |       // });
 26 |       // this.graph.bindKey(["meta+v", "ctrl+v"], () => {
 27 |       //   if (!this.graph.isClipboardEmpty()) {
 28 |       //     const cells = this.graph.paste({ offset: 32 });
 29 |       //     this.graph.cleanSelection();
 30 |       //     this.graph.select(cells);
 31 |       //   }
 32 |       //   return false;
 33 |       // });
 34 |       //
 35 |       // // undo redo
 36 |       // this.graph.bindKey(["meta+z", "ctrl+z"], () => {
 37 |       //   if (this.graph.history.canUndo()) {
 38 |       //     this.graph.history.undo();
 39 |       //   }
 40 |       //   return false;
 41 |       // });
 42 |     },
 43 |     registerNode() {
 44 |       Graph.registerPortLayout(
 45 |         "erPortPosition",
 46 |         (portsPositionArgs, elemBBox) => {
 47 |           return portsPositionArgs.map((_, index) => {
 48 |             return {
 49 |               position: {
 50 |                 x: index * 35 + 12,
 51 |                 y: elemBBox.height - 30,
 52 |               },
 53 |               angle: 0,
 54 |             };
 55 |           });
 56 |         },
 57 |         true
 58 |       );
 59 | 
 60 |       Graph.registerNode(
 61 |         `node-common`,
 62 |         {
 63 |           inherit: "vue-shape",
 64 |           width: 180,
 65 |           height: 36,
 66 |           component: {
 67 |             template: `<common />`,
 68 |             components: {
 69 |               common,
 70 |             },
 71 |           },
 72 |           ports: {
 73 |             groups: {
 74 |               top: {
 75 |                 position: "top",
 76 |                 attrs: {
 77 |                   circle: {
 78 |                     r: 4,
 79 |                     magnet: true,
 80 |                     strokeWidth: 0,
 81 |                     fill: "transparent",
 82 |                   },
 83 |                 },
 84 |               },
 85 |               list: {
 86 |                 label: {
 87 |                   position: "center",
 88 |                 },
 89 |                 markup: [
 90 |                   {
 91 |                     tagName: "rect",
 92 |                     selector: "portBody",
 93 |                   },
 94 |                   {
 95 |                     tagName: "text",
 96 |                     selector: "portNameLabel",
 97 |                   },
 98 |                   {
 99 |                     tagName: "text",
100 |                     selector: "portTypeLabel",
101 |                   },
102 |                 ],
103 |                 attrs: {
104 |                   portBody: {
105 |                     magnet: true,
106 |                   },
107 |                   portNameLabel: {
108 |                     ref: "portBody",
109 |                     fontSize: 10,
110 |                     text: "未启动",
111 |                   },
112 |                 },
113 |                 position: "erPortPosition",
114 |               },
115 |             },
116 |           },
117 |         },
118 |         true
119 |       );
120 | 
121 |       Graph.registerEdge(
122 |         "dag-edge",
123 |         {
124 |           inherit: "edge",
125 |           attrs: {
126 |             line: {
127 |               stroke: "#C2C8D5",
128 |               strokeWidth: 2,
129 |               targetMarker: {
130 |                 name: "block",
131 |                 width: 12,
132 |                 height: 8,
133 |               },
134 |             },
135 |           },
136 |         },
137 |         true
138 |       );
139 |       Graph.registerConnector(
140 |         "algo-connector",
141 |         (s, e) => {
142 |           const offset = 4;
143 |           const deltaY = Math.abs(e.y - s.y);
144 |           const control = Math.floor((deltaY / 3) * 2);
145 | 
146 |           const v1 = { x: s.x, y: s.y + offset + control };
147 |           const v2 = { x: e.x, y: e.y - offset - control };
148 | 
149 |           return Path.normalize(
150 |             `M ${s.x} ${s.y}
151 |            L ${s.x} ${s.y + offset}
152 |            C ${v1.x} ${v1.y} ${v2.x} ${v2.y} ${e.x} ${e.y - offset}
153 |            L ${e.x} ${e.y}
154 |           `
155 |           );
156 |         },
157 |         true
158 |       );
159 |     },
160 |     initGraph() {
161 |       this.registerNode();
162 | 
163 |       const graph = new Graph({
164 |         grid: {
165 |           size: 10,
166 |           visible: true,
167 |           type: "dot", // 'dot' | 'fixedDot' | 'mesh'
168 |           args: {
169 |             color: "#a05410", // 网格线/点颜色
170 |             thickness: 1, // 网格线宽度/网格点大小
171 |           },
172 |         },
173 |         background: {
174 |           color: "#fffbe6", // 设置画布背景颜色
175 |         },
176 |         container: document.getElementById("draw-cot"),
177 |         panning: {
178 |           enabled: true,
179 |           eventTypes: ["leftMouseDown", "mouseWheel"],
180 |         },
181 |         mousewheel: {
182 |           enabled: true,
183 |           modifiers: "ctrl",
184 |           factor: 1.1,
185 |           maxScale: 1.5,
186 |           minScale: 0.5,
187 |         },
188 |         highlighting: {
189 |           magnetAdsorbed: {
190 |             name: "stroke",
191 |             args: {
192 |               attrs: {
193 |                 fill: "#fff",
194 |                 stroke: "#31d0c6",
195 |                 strokeWidth: 4,
196 |               },
197 |             },
198 |           },
199 |         },
200 |         connecting: {
201 |           snap: true,
202 |           allowBlank: false,
203 |           allowLoop: false,
204 |           highlight: true,
205 |           connector: "algo-connector",
206 |           connectionPoint: "anchor",
207 |           anchor: "center",
208 |           validateMagnet() {
209 |             // return magnet.getAttribute('port-group') !== 'top'
210 | 
211 |             // 限制连线配置
212 |             return true;
213 |           },
214 |           createEdge() {
215 |             return graph.createEdge({
216 |               shape: "dag-edge",
217 |               attrs: {
218 |                 line: {
219 |                   strokeDasharray: "5 5",
220 |                   targetMarker: {
221 |                     name: "block",
222 |                     width: 12,
223 |                     height: 8,
224 |                   },
225 |                 },
226 |               },
227 |               zIndex: -1,
228 |             });
229 |           },
230 |         },
231 |         selecting: {
232 |           enabled: true,
233 |           multiple: true,
234 |           rubberEdge: true,
235 |           rubberNode: true,
236 |           modifiers: "shift",
237 |           rubberband: true,
238 |         },
239 |         keyboard: true,
240 |         clipboard: true,
241 |         history: true,
242 |       });
243 | 
244 |       graph.on("edge:contextmenu", ({ e, x, y, edge, view }) => {
245 |         console.log(x, y, view);
246 |         this.showContextMenu = true;
247 |         this.$nextTick(() => {
248 |           this.$refs.menuBar.initFn(e.offsetX, e.offsetY, {
249 |             type: "edge",
250 |             item: edge,
251 |           });
252 |         });
253 |       });
254 | 
255 |       graph.on("edge:connected", ({ edge }) => {
256 |         // const source = graph.getCellById(edge.source.cell);
257 |         const target = graph.getCellById(edge.target.cell);
258 | 
259 |         // console.log  (target);
260 |         // console.log(edge);
261 |         //
262 |         graph.getEdges().forEach((e) => {
263 |           if (
264 |             edge.id !== e.id &&
265 |             e.getTargetPortId() === edge.getTargetPortId() &&
266 |             e.getSourcePortId() === edge.getSourcePortId()
267 |           ) {
268 |             return graph.removeEdge(edge.id);
269 |           }
270 |         });
271 | 
272 |         if (!target.isNode()) {
273 |           return graph.removeEdge(edge.id);
274 |         }
275 | 
276 |         let stroke = "blue";
277 |         try {
278 |           stroke = edge.getSourceCell().getPort(edge.getSourcePortId()).attrs
279 |             .portBody.fill;
280 |         } catch (e) {
281 |           stroke = "blue";
282 |         }
283 | 
284 |         edge.attr({
285 |           line: {
286 |             strokeDasharray: "",
287 |             stroke: stroke,
288 |           },
289 |         });
290 |       });
291 | 
292 |       return graph;
293 |     },
294 |   },
295 | };
296 | 


--------------------------------------------------------------------------------
/src/views/demo3/index.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div id="coverCot" style="width: 100vw; height: 100vh; overflow: hidden">
  3 |     <section class="section-cot" style="width: 100%; height: 100%">
  4 |       <div id="container" @click.stop="hideFn">
  5 |         <MenuBar
  6 |           v-if="showContextMenu"
  7 |           ref="menuBar"
  8 |           @callBack="contextMenuFn"
  9 |         />
 10 |         <header>
 11 |           <el-tooltip
 12 |             class="item"
 13 |             effect="dark"
 14 |             content="项目"
 15 |             placement="bottom"
 16 |           >
 17 |             <i class="el-icon-menu" @click="showDrawerFn()" />
 18 |           </el-tooltip>
 19 |           <el-tooltip
 20 |             class="item"
 21 |             effect="dark"
 22 |             content="长按shift多选"
 23 |             placement="bottom"
 24 |           >
 25 |             <i class="el-icon-crop" />
 26 |           </el-tooltip>
 27 |           <el-tooltip
 28 |             class="item"
 29 |             effect="dark"
 30 |             content="放大"
 31 |             placement="bottom"
 32 |           >
 33 |             <i class="el-icon-zoom-in" @click="zoomFn(0.2)" />
 34 |           </el-tooltip>
 35 |           <el-tooltip
 36 |             class="item"
 37 |             effect="dark"
 38 |             content="缩小"
 39 |             placement="bottom"
 40 |           >
 41 |             <i class="el-icon-zoom-out" @click="zoomFn(-0.2)" />
 42 |           </el-tooltip>
 43 |           <el-tooltip
 44 |             class="item"
 45 |             effect="dark"
 46 |             content="适应屏幕"
 47 |             placement="bottom"
 48 |           >
 49 |             <i class="el-icon-full-screen" @click="centerFn" />
 50 |           </el-tooltip>
 51 |           <el-tooltip
 52 |             class="item"
 53 |             effect="dark"
 54 |             content="执行"
 55 |             placement="bottom"
 56 |           >
 57 |             <i class="el-icon-video-play" @click="startFn()" />
 58 |           </el-tooltip>
 59 |           <el-tooltip
 60 |             class="item"
 61 |             effect="dark"
 62 |             content="保存"
 63 |             placement="bottom"
 64 |           >
 65 |             <i class="el-icon-upload" @click="saveFn()" />
 66 |           </el-tooltip>
 67 |           <el-tooltip
 68 |             class="item"
 69 |             effect="dark"
 70 |             content="加载保存页面"
 71 |             placement="bottom"
 72 |           >
 73 |             <i class="el-icon-link" @click="loadFn()" />
 74 |           </el-tooltip>
 75 |         </header>
 76 |         <div id="draw-cot" />
 77 |         <Drawer ref="drawer" @addNode="addNode" />
 78 |       </div>
 79 |     </section>
 80 |     <DialogCondition ref="dialogCondition"></DialogCondition>
 81 |     <DialogMysql ref="dialogMysql"></DialogMysql>
 82 |   </div>
 83 | </template>
 84 | 
 85 | <script>
 86 | import MenuBar from "./components/menuBar";
 87 | import Drawer from "./components/drawer";
 88 | import DialogCondition from "./components/dialog/condition.vue";
 89 | import DialogMysql from "./components/dialog/mysql.vue";
 90 | 
 91 | import graphMixin from "./graphMixin.js";
 92 | 
 93 | export default {
 94 |   name: "App",
 95 |   components: { MenuBar, Drawer, DialogCondition, DialogMysql },
 96 |   mixins: [graphMixin],
 97 |   data() {
 98 |     return {
 99 |       graph: "",
100 |       timer: "",
101 |       isLock: false,
102 |       showContextMenu: false,
103 |     };
104 |   },
105 |   mounted() {
106 |     this.graph = this.initGraph();
107 |     this.keyBindFn();
108 |   },
109 |   methods: {
110 |     getNodeById(id) {
111 |       return this.graph.getCellById(id);
112 |     },
113 |     hideFn() {
114 |       this.showContextMenu = false;
115 |     },
116 |     async showNodeStatus(statusList) {
117 |       const status = statusList.shift();
118 |       status?.forEach((item) => {
119 |         const { id, status } = item;
120 |         const node = this.graph.getCellById(id);
121 |         const data = node.getData();
122 |         node.setData({
123 |           ...data,
124 |           status: status,
125 |         });
126 |       });
127 |       this.timer = setTimeout(() => {
128 |         this.showNodeStatus(statusList);
129 |       }, 300);
130 |     },
131 |     // 初始化节点/边
132 |     init(data = []) {
133 |       const cells = [];
134 |       data.forEach((item) => {
135 |         if (item.shape === "dag-edge") {
136 |           cells.push(this.graph.createEdge(item));
137 |         } else {
138 |           delete item.component;
139 |           cells.push(this.graph.createNode(item));
140 |         }
141 |       });
142 |       this.graph.resetCells(cells);
143 |     },
144 |     zoomFn(num) {
145 |       this.graph.zoom(num);
146 |     },
147 |     centerFn() {
148 |       const num = 1 - this.graph.zoom();
149 |       num > 1 ? this.graph.zoom(num * -1) : this.graph.zoom(num);
150 |       this.graph.centerContent();
151 |     },
152 |     createMenuFn() {},
153 |     keyBindFn() {
154 |       // copy cut paste
155 |       this.graph.bindKey(["meta+c", "ctrl+c"], () => {
156 |         const cells = this.graph.getSelectedCells();
157 |         if (cells.length) {
158 |           this.graph.copy(cells);
159 |         }
160 |         return false;
161 |       });
162 |       this.graph.bindKey(["meta+x", "ctrl+x"], () => {
163 |         const cells = this.graph.getSelectedCells();
164 |         if (cells.length) {
165 |           this.graph.cut(cells);
166 |         }
167 |         return false;
168 |       });
169 |       this.graph.bindKey(["meta+v", "ctrl+v"], () => {
170 |         if (!this.graph.isClipboardEmpty()) {
171 |           const cells = this.graph.paste({ offset: 32 });
172 |           this.graph.cleanSelection();
173 |           this.graph.select(cells);
174 |         }
175 |         return false;
176 |       });
177 | 
178 |       // undo redo
179 |       this.graph.bindKey(["meta+z", "ctrl+z"], () => {
180 |         if (this.graph.history.canUndo()) {
181 |           this.graph.history.undo();
182 |         }
183 |         return false;
184 |       });
185 |       // delete
186 |       this.graph.bindKey(["delete"], () => {
187 |         const select = this.graph.getSelectedCells();
188 |         select?.forEach((item) => {
189 |           if (/edge/.test(item.shape)) {
190 |             this.graph.removeEdge(item.id);
191 |           } else {
192 |             this.graph.removeNode(item.id);
193 |           }
194 |         });
195 |         return false;
196 |       });
197 |     },
198 |     saveFn() {
199 |       localStorage.setItem(
200 |         "x6Json",
201 |         JSON.stringify(this.graph.toJSON({ diff: true }))
202 |       );
203 |     },
204 |     loadFn() {
205 |       this.timer && clearTimeout(this.timer);
206 |       const x6Json = JSON.parse(localStorage.getItem("x6Json"));
207 | 
208 |       this.startFn(x6Json.cells);
209 |     },
210 |     lockFn() {
211 |       this.isLock = !this.isLock;
212 |       if (this.isLock) {
213 |         this.graph.enablePanning();
214 |         this.graph.enableKeyboard();
215 |       } else {
216 |         this.graph.disablePanning();
217 |         this.graph.disableKeyboard();
218 |       }
219 |     },
220 |     contextMenuFn(type, node) {
221 |       switch (type) {
222 |         case "remove":
223 |           if (node.type == "edge") {
224 |             this.graph.removeEdge(node.item.id);
225 |           } else if (node.type == "node") {
226 |             this.graph.removeNode(node.item.id);
227 |           }
228 |           break;
229 |         case "source":
230 |           this.$refs.dialogMysql.visible = true;
231 |           this.$refs.dialogMysql.init(node);
232 |           break;
233 |       }
234 | 
235 |       this.showContextMenu = false;
236 |     },
237 | 
238 |     showDrawerFn() {
239 |       this.$refs.drawer.visible = !this.$refs.drawer.visible;
240 |     },
241 |     addNode(option) {
242 |       const p = this.graph.pageToLocal(option.x, option.y);
243 |       this.graph.addNode(Object.assign({}, option, p));
244 |     },
245 |   },
246 | };
247 | </script>
248 | 
249 | <style lang="less" scoped>
250 | header {
251 |   display: flex;
252 |   justify-content: flex-end;
253 |   width: 100%;
254 |   height: 50px;
255 |   box-sizing: border-box;
256 | }
257 | 
258 | header i {
259 |   margin: 8px;
260 |   font-size: 30px;
261 | }
262 | .x6-node-selected .node {
263 |   border-color: #1890ff;
264 |   border-radius: 2px;
265 |   box-shadow: 0 0 0 4px #d4e8fe;
266 | }
267 | 
268 | .x6-node-selected .node.success {
269 |   border-color: #52c41a;
270 |   border-radius: 2px;
271 |   box-shadow: 0 0 0 4px #ccecc0;
272 | }
273 | 
274 | .x6-node-selected .node.failed {
275 |   border-color: #ff4d4f;
276 |   border-radius: 2px;
277 |   box-shadow: 0 0 0 4px #fedcdc;
278 | }
279 | 
280 | .x6-edge:hover path:nth-child(2) {
281 |   stroke: #1890ff;
282 |   stroke-width: 1px;
283 | }
284 | 
285 | .x6-edge-selected path:nth-child(2) {
286 |   stroke: #1890ff;
287 |   stroke-width: 1.5px !important;
288 | }
289 | 
290 | .section-cot {
291 |   display: flex;
292 | }
293 | 
294 | .section-cot #container {
295 |   position: relative;
296 |   flex: 1;
297 | }
298 | 
299 | .section-cot #container #draw-cot {
300 |   width: 100%;
301 |   height: 100%;
302 | }
303 | 
304 | ::-webkit-scrollbar {
305 |   width: 0;
306 | }
307 | </style>
308 | 


--------------------------------------------------------------------------------
/src/views/dragDemo/components/drawer.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="Ec-x6-icon">
  3 |     <el-drawer
  4 |       title="自定义框框"
  5 |       :visible.sync="visible"
  6 |       :direction="direction"
  7 |       size="300px"
  8 |       :modal="false"
  9 |       :modal-append-to-body="false"
 10 |       style="position: absolute; width: 300px; box-sizing: border-box"
 11 |       show-close
 12 |     >
 13 |       <section class="listBar" @click.stop="">
 14 |         <p @click="showMore = !showMore">
 15 |           <img
 16 |             :class="{ arrow: showMore }"
 17 |             src="@/assets/svg/arrow.svg"
 18 |             alt=""
 19 |           />
 20 |           系统组件
 21 |         </p>
 22 |         <div v-if="showMore" class="listBar-cot">
 23 |           <div
 24 |             v-for="(item, index) in configList"
 25 |             :key="index"
 26 |             class="drag-cot"
 27 |             draggable="true"
 28 |             @drag="drag(item)"
 29 |             @dragend="dragend(item)"
 30 |           >
 31 |             <span>
 32 |               <img src="@/assets/svg/defaultImg.svg" alt="" />
 33 |             </span>
 34 |             <p>
 35 |               {{ item.label }}
 36 |             </p>
 37 |           </div>
 38 |         </div>
 39 |       </section>
 40 |     </el-drawer>
 41 |   </div>
 42 | </template>
 43 | 
 44 | <script>
 45 | const mouseXY = { x: null, y: null };
 46 | import config from "./config";
 47 | 
 48 | export default {
 49 |   name: "DrawerCom",
 50 | 
 51 |   data() {
 52 |     return {
 53 |       visible: true,
 54 |       direction: "ltr",
 55 |       showMore: false,
 56 |       configList: config,
 57 |     };
 58 |   },
 59 |   mounted() {
 60 |     document.getElementById("container").addEventListener(
 61 |       "dragover",
 62 |       function (e) {
 63 |         mouseXY.x = e.clientX;
 64 |         mouseXY.y = e.clientY;
 65 |       },
 66 |       false
 67 |     );
 68 |   },
 69 |   methods: {
 70 |     drag: function () {
 71 |       // const parentRect = document
 72 |       //   .getElementById("container")
 73 |       //   .getBoundingClientRect();
 74 |       // let mouseInGrid = false;
 75 |       // if (
 76 |       //   mouseXY.x > parentRect.left &&
 77 |       //   mouseXY.x < parentRect.right &&
 78 |       //   mouseXY.y > parentRect.top &&
 79 |       //   mouseXY.y < parentRect.bottom
 80 |       // ) {
 81 |       //   mouseInGrid = true;
 82 |       // }
 83 |     },
 84 |     nodeConfig(item, x, y) {
 85 |       let config = "";
 86 |       const time = new Date().getTime();
 87 | 
 88 |       // 链接桩3种状态 1、in | 只允许被连  2、out | 只允许输出  3、any | 不限制
 89 |       switch (item.type) {
 90 |         case "output":
 91 |           config = {
 92 |             x: x,
 93 |             y: y,
 94 |             width: 180,
 95 |             height: 40,
 96 |             shape: "dag-output",
 97 |             data: item,
 98 |             ports: {
 99 |               groups: {
100 |                 bottom: {
101 |                   position: "bottom",
102 |                   attrs: {
103 |                     circle: {
104 |                       r: 4,
105 |                       magnet: true,
106 |                       stroke: "#C2C8D5",
107 |                       strokeWidth: 1,
108 |                       fill: "#fff",
109 |                     },
110 |                   },
111 |                 },
112 |               },
113 |               items: [
114 |                 {
115 |                   id: `out-${time}`,
116 |                   group: "bottom", // 指定分组名称
117 |                 },
118 |               ],
119 |             },
120 |           };
121 |           break;
122 |         case "onlyIn":
123 |           config = {
124 |             x: x,
125 |             y: y,
126 |             width: 180,
127 |             height: 40,
128 |             shape: "dag-onlyIn",
129 |             data: item,
130 |             ports: {
131 |               groups: {
132 |                 top: {
133 |                   position: "top",
134 |                   attrs: {
135 |                     circle: {
136 |                       r: 4,
137 |                       magnet: true,
138 |                       stroke: "#C2C8D5",
139 |                       strokeWidth: 1,
140 |                       fill: "#fff",
141 |                     },
142 |                   },
143 |                 },
144 |               },
145 |               items: [
146 |                 {
147 |                   id: `in-${time}`,
148 |                   group: "top", // 指定分组名称
149 |                 },
150 |               ],
151 |             },
152 |           };
153 |           break;
154 |         case "database":
155 |           config = {
156 |             x: x,
157 |             y: y,
158 |             width: 180,
159 |             height: 40,
160 |             shape: "dag-node",
161 |             data: item,
162 |             ports: {
163 |               groups: {
164 |                 top: {
165 |                   position: "top",
166 |                   attrs: {
167 |                     circle: {
168 |                       r: 4,
169 |                       magnet: true,
170 |                       stroke: "#C2C8D5",
171 |                       strokeWidth: 1,
172 |                       fill: "#fff",
173 |                     },
174 |                   },
175 |                 },
176 |                 bottom: {
177 |                   position: "bottom",
178 |                   attrs: {
179 |                     circle: {
180 |                       r: 4,
181 |                       magnet: true,
182 |                       stroke: "#C2C8D5",
183 |                       strokeWidth: 1,
184 |                       fill: "#fff",
185 |                     },
186 |                   },
187 |                 },
188 |               },
189 |               items: [
190 |                 {
191 |                   id: `in-${time}`,
192 |                   group: "top", // 指定分组名称
193 |                 },
194 |                 {
195 |                   id: `out-${time}`,
196 |                   group: "bottom", // 指定分组名称
197 |                 },
198 |               ],
199 |             },
200 |           };
201 |           break;
202 |         case "condition":
203 |           config = {
204 |             x: x,
205 |             y: y,
206 |             width: 180,
207 |             height: 40,
208 |             shape: "dag-condition",
209 |             data: item,
210 |             ports: {
211 |               groups: {
212 |                 top: {
213 |                   position: "top",
214 |                   attrs: {
215 |                     circle: {
216 |                       r: 4,
217 |                       magnet: true,
218 |                       stroke: "#C2C8D5",
219 |                       strokeWidth: 1,
220 |                       fill: "#fff",
221 |                     },
222 |                   },
223 |                 },
224 |                 bottom: {
225 |                   position: "bottom",
226 |                   attrs: {
227 |                     circle: {
228 |                       r: 4,
229 |                       magnet: true,
230 |                       stroke: "#C2C8D5",
231 |                       strokeWidth: 1,
232 |                       fill: "#fff",
233 |                     },
234 |                   },
235 |                 },
236 |               },
237 |               items: [
238 |                 {
239 |                   id: `in-${time}`,
240 |                   group: "top", // 指定分组名称
241 |                 },
242 |                 {
243 |                   id: `out-${time}`,
244 |                   group: "bottom", // 指定分组名称
245 |                 },
246 |                 {
247 |                   id: `out-${time}-2`,
248 |                   group: "bottom", // 指定分组名称
249 |                 },
250 |               ],
251 |             },
252 |           };
253 |           break;
254 |       }
255 |       return config;
256 |     },
257 |     dragend: function (item) {
258 |       const parentRect = document
259 |         .getElementById("container")
260 |         .getBoundingClientRect();
261 |       let mouseInGrid = false;
262 |       if (
263 |         mouseXY.x > parentRect.left &&
264 |         mouseXY.x < parentRect.right &&
265 |         mouseXY.y > parentRect.top &&
266 |         mouseXY.y < parentRect.bottom
267 |       ) {
268 |         mouseInGrid = true;
269 |       }
270 |       if (mouseInGrid === true) {
271 |         this.$emit("addNode", this.nodeConfig(item, mouseXY.x, mouseXY.y));
272 |       }
273 |     },
274 |   },
275 | };
276 | </script>
277 | <style lang="less" scoped>
278 | .Ec-x6-icon /deep/ .el-drawer__body {
279 |   overflow-y: scroll;
280 | }
281 | 
282 | .Ec-x6-icon /deep/ .el-drawer__header {
283 |   padding: 0 12px;
284 |   margin-bottom: 0;
285 |   width: 300px;
286 | }
287 | 
288 | .listBar {
289 |   display: flex;
290 |   justify-content: flex-start;
291 |   flex-wrap: wrap;
292 |   font-size: 14px;
293 | }
294 | 
295 | .listBar img {
296 |   width: 12px;
297 | }
298 | 
299 | .arrow {
300 |   transform: rotate(90deg);
301 |   transition-duration: 0.3s;
302 | }
303 | 
304 | .listBar-cot {
305 |   display: inline-block;
306 |   padding-left: 12px;
307 |   box-sizing: border-box;
308 |   width: 100%;
309 |   text-align: left;
310 | }
311 | 
312 | .listBar-cot .drag-cot {
313 |   display: inline-flex;
314 |   flex-wrap: wrap;
315 |   align-items: center;
316 |   justify-content: center;
317 |   width: 62px;
318 |   height: 62px;
319 | }
320 | 
321 | .listBar-cot .drag-cot span {
322 |   display: inline-block;
323 |   width: 50px;
324 |   height: 50px;
325 | }
326 | 
327 | .listBar-cot .drag-cot span img {
328 |   width: 100%;
329 |   height: 100%;
330 | }
331 | 
332 | .listBar-cot .drag-cot p {
333 |   margin: -2px 0 0;
334 |   text-align: center;
335 |   font-size: 12px;
336 |   color: #939393;
337 | }
338 | </style>
339 | 


--------------------------------------------------------------------------------
/src/views/dargeDemo/index.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div id="coverCot" style="width: 100vw; height: 100vh; overflow: hidden">
  3 |     <section class="section-cot" style="width: 100%; height: 100%">
  4 |       <div id="container">
  5 |         <header>
  6 |           <el-tooltip
  7 |             class="item"
  8 |             effect="dark"
  9 |             content="保存"
 10 |             placement="bottom"
 11 |           >
 12 |             <i class="el-icon-upload" @click="saveFn()" />
 13 |           </el-tooltip>
 14 |           <el-tooltip
 15 |             class="item"
 16 |             effect="dark"
 17 |             content="加载保存页面"
 18 |             placement="bottom"
 19 |           >
 20 |             <i class="el-icon-link" @click="loadFn()" />
 21 |           </el-tooltip>
 22 |         </header>
 23 |         <div id="draw-cot" />
 24 |       </div>
 25 |     </section>
 26 |     <EditDialog ref="EditDialog" @change="nodeChange"></EditDialog>
 27 |   </div>
 28 | </template>
 29 | 
 30 | <script>
 31 | import "@antv/x6-vue-shape";
 32 | import GraphMixin from "./graphMixin";
 33 | import { dataJson, generateUniqueId, statusColor } from "./config";
 34 | import { DagreLayout } from "@antv/layout";
 35 | 
 36 | import EditDialog from "./components/drawer";
 37 | 
 38 | export default {
 39 |   name: "App",
 40 |   mixins: [GraphMixin],
 41 |   components: { EditDialog },
 42 |   data() {
 43 |     return {
 44 |       graph: "",
 45 |       timer: "",
 46 |       isLock: false,
 47 |       showContextMenu: false,
 48 |       dataJson: dataJson,
 49 |     };
 50 |   },
 51 |   beforeDestroy() {
 52 |     this.$EventBus.$off("DargeEditEvent", this.editEvent);
 53 |     this.$EventBus.$off("DargeEditChange", this.nodeChange);
 54 |   },
 55 |   mounted() {
 56 |     this.initLayout();
 57 |     this.$EventBus.$on("DargeEditEvent", this.editEvent);
 58 |     this.$EventBus.$on("DargeEditChange", this.nodeChange);
 59 |   },
 60 |   methods: {
 61 |     setDargeDemoDataJSON() {
 62 |       // drawer 页面需要用
 63 |       window.$DargeDemoDataJSON = this.dataJson;
 64 |     },
 65 |     findNodeByDataJson(id) {
 66 |       let item = "";
 67 |       const fn = (d) => {
 68 |         if (d.id === id) {
 69 |           item = d;
 70 |         } else {
 71 |           if (d.children && d.children.length) {
 72 |             d.children.forEach((nextData) => {
 73 |               fn(nextData);
 74 |             });
 75 |           }
 76 |         }
 77 |       };
 78 | 
 79 |       this.dataJson.forEach((d) => {
 80 |         fn(d);
 81 |       });
 82 | 
 83 |       return item;
 84 |     },
 85 |     updateId(target) {
 86 |       target = JSON.parse(JSON.stringify(target));
 87 | 
 88 |       target.id = generateUniqueId();
 89 |       const fn = (d) => {
 90 |         d.id = generateUniqueId();
 91 |         if (d.children && d.children.length) {
 92 |           d.children.forEach((nextData) => {
 93 |             fn(nextData);
 94 |           });
 95 |         }
 96 |       };
 97 |       if (target.children && target.children.length) {
 98 |         target.children.forEach((d) => {
 99 |           fn(d);
100 |         });
101 |       }
102 |       return target;
103 |     },
104 |     nodeChange(params) {
105 |       let oldNode = this.findNodeByDataJson(params.node.id);
106 |       switch (params.type) {
107 |         case "data":
108 |           for (let key in oldNode.data) {
109 |             oldNode.data[key] = params.node.data[key];
110 |           }
111 |           // data 可以不需要刷新layout
112 |           return;
113 |         case "status":
114 |           for (let key in oldNode.data) {
115 |             oldNode.data[key] = params.node.data[key];
116 |           }
117 |           break;
118 |         case "copy":
119 |           var target = this.findNodeByDataJson(params.targetId);
120 |           target = this.updateId(target);
121 |           if (oldNode.children && oldNode.children.length) {
122 |             oldNode.children.push(target);
123 |           } else {
124 |             oldNode.children = [target];
125 |           }
126 |           break;
127 |         case "markTarget":
128 |           oldNode.markId = params.targetId;
129 |           break;
130 |         case "linkCustom":
131 |           // 链接自定义节点
132 |           var link = this.updateId(params.linkCustom);
133 |           console.log(params.linkCustom);
134 |           if (oldNode.children && oldNode.children.length) {
135 |             oldNode.children.push(link);
136 |           } else {
137 |             oldNode.children = [link];
138 |           }
139 |           break;
140 |       }
141 |       console.log(this.dataJson, 1231);
142 |       this.initLayout();
143 |     },
144 |     editEvent(node) {
145 |       this.$refs.EditDialog.init(node);
146 |     },
147 |     getNodeById(id) {
148 |       return this.graph.getCellById(id);
149 |     },
150 | 
151 |     createNodeByJson(d) {
152 |       const shape = {
153 |         exnode: "dag-exnode",
154 |         common: "dag-common",
155 |       };
156 |       return {
157 |         id: `${d.id}`,
158 |         shape: shape[d.type],
159 |         data: d.data,
160 |         width: 180,
161 |         height: 40,
162 |         ports: {
163 |           groups: {
164 |             left: {
165 |               position: "left",
166 |               attrs: {
167 |                 circle: {
168 |                   stroke: "transparent",
169 |                   strokeWidth: 0,
170 |                   fill: "transparent",
171 |                 },
172 |               },
173 |             },
174 | 
175 |             right: {
176 |               position: "right",
177 | 
178 |               attrs: {
179 |                 circle: {
180 |                   stroke: "transparent",
181 |                   strokeWidth: 0,
182 |                   fill: "transparent",
183 |                 },
184 |               },
185 |             },
186 |           },
187 |           items: [
188 |             {
189 |               id: `left-${d.id}`,
190 |               group: "left", // 指定分组名称
191 |             },
192 |             {
193 |               id: `right-${d.id}`,
194 |               group: "right", // 指定分组名称
195 |             },
196 |           ],
197 |         },
198 |       };
199 |     },
200 |     createEdgeByJson(d, nextItem) {
201 |       const color = statusColor[d.data.status];
202 |       return {
203 |         source: { cell: d.id, port: "right-" + d.id },
204 |         target: { cell: nextItem.id, port: "left-" + nextItem.id },
205 |         router: {
206 |           name: "manhattan",
207 |         },
208 |         attrs: {
209 |           line: {
210 |             stroke: color,
211 |             strokeWidth: 4,
212 |           },
213 |         },
214 |       };
215 |     },
216 |     // 初始化节点/边
217 |     initLayout() {
218 |       const formJson = {
219 |         nodes: [],
220 |         edges: [],
221 |       };
222 | 
223 |       const fn = (d) => {
224 |         formJson.nodes.push(this.createNodeByJson(d));
225 |         if (d.children && d.children.length) {
226 |           d.children.forEach((nextData) => {
227 |             !nextData.id && (nextData.id = generateUniqueId());
228 |             formJson.edges.push(this.createEdgeByJson(d, nextData));
229 |             fn(nextData);
230 |           });
231 |         }
232 |         if (d.markId) {
233 |           formJson.edges.push(this.createEdgeByJson(d, { id: d.markId }));
234 |         }
235 |       };
236 | 
237 |       this.dataJson.forEach((d) => {
238 |         !d.id && (d.id = generateUniqueId());
239 |         fn(d);
240 |       });
241 | 
242 |       const dagreLayout = new DagreLayout({
243 |         type: "dagre",
244 |         rankdir: "LR",
245 |         ranksep: 100, // 横间隔
246 |         nodesep: 100, // 竖间隔
247 |       });
248 | 
249 |       const model = dagreLayout.layout(formJson);
250 | 
251 |       this.graph.fromJSON(model);
252 |       this.setDargeDemoDataJSON();
253 |     },
254 |     zoomFn(num) {
255 |       this.graph.zoom(num);
256 |     },
257 |     centerFn() {
258 |       const num = 1 - this.graph.zoom();
259 |       num > 1 ? this.graph.zoom(num * -1) : this.graph.zoom(num);
260 |       this.graph.centerContent();
261 |     },
262 | 
263 |     createMenuFn() {},
264 |     saveFn() {
265 |       localStorage.setItem("x6Json", JSON.stringify(this.dataJson));
266 |     },
267 |     loadFn() {
268 |       // this.timer && clearTimeout(this.timer);
269 |       this.dataJson = JSON.parse(localStorage.getItem("x6Json"));
270 |       this.initLayout();
271 |     },
272 |     lockFn() {
273 |       this.isLock = !this.isLock;
274 |       if (this.isLock) {
275 |         this.graph.enablePanning();
276 |         this.graph.enableKeyboard();
277 |       } else {
278 |         this.graph.disablePanning();
279 |         this.graph.disableKeyboard();
280 |       }
281 |     },
282 |   },
283 | };
284 | </script>
285 | 
286 | <style lang="less" scoped>
287 | header {
288 |   display: flex;
289 |   justify-content: flex-end;
290 |   width: 100%;
291 |   height: 50px;
292 |   box-sizing: border-box;
293 | }
294 | 
295 | header i {
296 |   margin: 8px;
297 |   font-size: 30px;
298 | }
299 | .x6-node-selected .node {
300 |   border-color: #1890ff;
301 |   border-radius: 2px;
302 |   box-shadow: 0 0 0 4px #d4e8fe;
303 | }
304 | 
305 | .x6-node-selected .node.success {
306 |   border-color: #52c41a;
307 |   border-radius: 2px;
308 |   box-shadow: 0 0 0 4px #ccecc0;
309 | }
310 | 
311 | .x6-node-selected .node.failed {
312 |   border-color: #ff4d4f;
313 |   border-radius: 2px;
314 |   box-shadow: 0 0 0 4px #fedcdc;
315 | }
316 | 
317 | .x6-edge:hover path:nth-child(2) {
318 |   stroke: #1890ff;
319 |   stroke-width: 1px;
320 | }
321 | 
322 | .x6-edge-selected path:nth-child(2) {
323 |   stroke: #1890ff;
324 |   stroke-width: 1.5px !important;
325 | }
326 | 
327 | .section-cot {
328 |   display: flex;
329 | }
330 | 
331 | .section-cot #container {
332 |   position: relative;
333 |   flex: 1;
334 | }
335 | 
336 | .section-cot #container #draw-cot {
337 |   width: 100%;
338 |   height: 100%;
339 | }
340 | 
341 | ::-webkit-scrollbar {
342 |   width: 0;
343 | }
344 | </style>
345 | 


--------------------------------------------------------------------------------
/src/views/dragDemo/index.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div id="coverCot" style="width: 100vw; height: 100vh; overflow: hidden">
  3 |     <section class="section-cot" style="width: 100%; height: 100%">
  4 |       <div id="container" @click.stop="hideFn">
  5 |         <MenuBar
  6 |           v-if="showContextMenu"
  7 |           ref="menuBar"
  8 |           @callBack="contextMenuFn"
  9 |         />
 10 |         <header>
 11 |           <el-tooltip
 12 |             class="item"
 13 |             effect="dark"
 14 |             content="项目"
 15 |             placement="bottom"
 16 |           >
 17 |             <i class="el-icon-menu" @click="showDrawerFn()" />
 18 |           </el-tooltip>
 19 |           <el-tooltip
 20 |             class="item"
 21 |             effect="dark"
 22 |             content="长按shift多选"
 23 |             placement="bottom"
 24 |           >
 25 |             <i class="el-icon-crop" />
 26 |           </el-tooltip>
 27 |           <el-tooltip
 28 |             class="item"
 29 |             effect="dark"
 30 |             content="放大"
 31 |             placement="bottom"
 32 |           >
 33 |             <i class="el-icon-zoom-in" @click="zoomFn(0.2)" />
 34 |           </el-tooltip>
 35 |           <el-tooltip
 36 |             class="item"
 37 |             effect="dark"
 38 |             content="缩小"
 39 |             placement="bottom"
 40 |           >
 41 |             <i class="el-icon-zoom-out" @click="zoomFn(-0.2)" />
 42 |           </el-tooltip>
 43 |           <el-tooltip
 44 |             class="item"
 45 |             effect="dark"
 46 |             content="适应屏幕"
 47 |             placement="bottom"
 48 |           >
 49 |             <i class="el-icon-full-screen" @click="centerFn" />
 50 |           </el-tooltip>
 51 |           <el-tooltip
 52 |             class="item"
 53 |             effect="dark"
 54 |             content="执行"
 55 |             placement="bottom"
 56 |           >
 57 |             <i class="el-icon-video-play" @click="startFn()" />
 58 |           </el-tooltip>
 59 |           <el-tooltip
 60 |             class="item"
 61 |             effect="dark"
 62 |             content="保存"
 63 |             placement="bottom"
 64 |           >
 65 |             <i class="el-icon-upload" @click="saveFn()" />
 66 |           </el-tooltip>
 67 |           <el-tooltip
 68 |             class="item"
 69 |             effect="dark"
 70 |             content="加载保存页面"
 71 |             placement="bottom"
 72 |           >
 73 |             <i class="el-icon-link" @click="loadFn()" />
 74 |           </el-tooltip>
 75 |           <el-tooltip
 76 |             class="item"
 77 |             effect="dark"
 78 |             content="是否禁用"
 79 |             placement="bottom"
 80 |           >
 81 |             <i
 82 |               :class="{ 'el-icon-lock': isLock, 'el-icon-unlock': !isLock }"
 83 |               @click="lockFn()"
 84 |             />
 85 |           </el-tooltip>
 86 |         </header>
 87 |         <div id="draw-cot" />
 88 |         <Drawer ref="drawer" @addNode="addNode" />
 89 |       </div>
 90 |     </section>
 91 |     <DialogCondition ref="dialogCondition"></DialogCondition>
 92 |     <DialogMysql ref="dialogMysql"></DialogMysql>
 93 |   </div>
 94 | </template>
 95 | 
 96 | <script>
 97 | import { Graph, Path } from "@antv/x6";
 98 | import "@antv/x6-vue-shape";
 99 | 
100 | import database from "./components/nodeTheme/database.vue";
101 | import condition from "./components/nodeTheme/condition.vue";
102 | import onlyout from "./components/nodeTheme/onlyOut.vue";
103 | import onlyin from "./components/nodeTheme/onlyIn.vue";
104 | import DataJson from "./components/data";
105 | import MenuBar from "./components/menuBar";
106 | import Drawer from "./components/drawer";
107 | import DialogCondition from "./components/dialog/condition.vue";
108 | import DialogMysql from "./components/dialog/mysql.vue";
109 | 
110 | const nodeStatusList = [
111 |   [
112 |     {
113 |       id: "1",
114 |       status: "running",
115 |     },
116 |     {
117 |       id: "2",
118 |       status: "default",
119 |     },
120 |     {
121 |       id: "3",
122 |       status: "default",
123 |     },
124 |     {
125 |       id: "4",
126 |       status: "default",
127 |     },
128 |   ],
129 |   [
130 |     {
131 |       id: "1",
132 |       status: "success",
133 |     },
134 |     {
135 |       id: "2",
136 |       status: "running",
137 |     },
138 |     {
139 |       id: "3",
140 |       status: "default",
141 |     },
142 |     {
143 |       id: "4",
144 |       status: "default",
145 |     },
146 |   ],
147 |   [
148 |     {
149 |       id: "1",
150 |       status: "success",
151 |     },
152 |     {
153 |       id: "2",
154 |       status: "success",
155 |     },
156 |     {
157 |       id: "3",
158 |       status: "running",
159 |     },
160 |     {
161 |       id: "4",
162 |       status: "running",
163 |     },
164 |   ],
165 |   [
166 |     {
167 |       id: "1",
168 |       status: "success",
169 |     },
170 |     {
171 |       id: "2",
172 |       status: "success",
173 |     },
174 |     {
175 |       id: "3",
176 |       status: "success",
177 |     },
178 |     {
179 |       id: "4",
180 |       status: "failed",
181 |     },
182 |   ],
183 | ];
184 | 
185 | export default {
186 |   name: "App",
187 |   components: { MenuBar, Drawer, DialogCondition, DialogMysql },
188 |   data() {
189 |     return {
190 |       graph: "",
191 |       timer: "",
192 |       isLock: false,
193 |       showContextMenu: false,
194 |     };
195 |   },
196 |   mounted() {
197 |     // 初始化 graph
198 |     this.initGraph();
199 |     // 按钮绑定
200 |     this.keyBindFn();
201 |     // 执行
202 |     this.startFn();
203 |   },
204 |   methods: {
205 |     getNodeById(id) {
206 |       return this.graph.getCellById(id);
207 |     },
208 |     hideFn() {
209 |       this.showContextMenu = false;
210 |     },
211 |     initGraph() {
212 |       // 注册节点
213 |       Graph.registerNode(
214 |         "dag-condition",
215 |         {
216 |           inherit: "vue-shape",
217 |           width: 180,
218 |           height: 36,
219 |           component: {
220 |             template: `<condition />`,
221 |             components: {
222 |               condition,
223 |             },
224 |           },
225 |           ports: {
226 |             groups: {
227 |               top: {
228 |                 position: "top",
229 |                 attrs: {
230 |                   circle: {
231 |                     r: 4,
232 |                     magnet: true,
233 |                     stroke: "#C2C8D5",
234 |                     strokeWidth: 1,
235 |                     fill: "#fff",
236 |                   },
237 |                 },
238 |               },
239 |               bottom: {
240 |                 position: "bottom",
241 |                 attrs: {
242 |                   circle: {
243 |                     r: 4,
244 |                     magnet: true,
245 |                     stroke: "#C2C8D5",
246 |                     strokeWidth: 1,
247 |                     fill: "#fff",
248 |                   },
249 |                 },
250 |               },
251 |             },
252 |           },
253 |         },
254 |         true
255 |       );
256 | 
257 |       Graph.registerNode(
258 |         "dag-output",
259 |         {
260 |           inherit: "vue-shape",
261 |           width: 180,
262 |           height: 36,
263 |           component: {
264 |             template: `<onlyout />`,
265 |             components: {
266 |               onlyout,
267 |             },
268 |           },
269 |           ports: {
270 |             groups: {
271 |               top: {
272 |                 position: "top",
273 |                 attrs: {
274 |                   circle: {
275 |                     r: 4,
276 |                     magnet: true,
277 |                     stroke: "#C2C8D5",
278 |                     strokeWidth: 1,
279 |                     fill: "#fff",
280 |                   },
281 |                 },
282 |               },
283 |               bottom: {
284 |                 position: "bottom",
285 |                 attrs: {
286 |                   circle: {
287 |                     r: 4,
288 |                     magnet: true,
289 |                     stroke: "#C2C8D5",
290 |                     strokeWidth: 1,
291 |                     fill: "#fff",
292 |                   },
293 |                 },
294 |               },
295 |             },
296 |           },
297 |         },
298 |         true
299 |       );
300 | 
301 |       Graph.registerNode(
302 |         "dag-onlyIn",
303 |         {
304 |           inherit: "vue-shape",
305 |           width: 180,
306 |           height: 36,
307 |           component: {
308 |             template: `<onlyin />`,
309 |             components: {
310 |               onlyin,
311 |             },
312 |           },
313 |           ports: {
314 |             groups: {
315 |               top: {
316 |                 position: "top",
317 |                 attrs: {
318 |                   circle: {
319 |                     r: 4,
320 |                     magnet: true,
321 |                     stroke: "#C2C8D5",
322 |                     strokeWidth: 1,
323 |                     fill: "#fff",
324 |                   },
325 |                 },
326 |               },
327 |               bottom: {
328 |                 position: "bottom",
329 |                 attrs: {
330 |                   circle: {
331 |                     r: 4,
332 |                     magnet: true,
333 |                     stroke: "#C2C8D5",
334 |                     strokeWidth: 1,
335 |                     fill: "#fff",
336 |                   },
337 |                 },
338 |               },
339 |             },
340 |           },
341 |         },
342 |         true
343 |       );
344 | 
345 |       Graph.registerNode(
346 |         "dag-node",
347 |         {
348 |           inherit: "vue-shape",
349 |           width: 180,
350 |           height: 36,
351 |           component: {
352 |             template: `<database />`,
353 |             components: {
354 |               database,
355 |             },
356 |           },
357 |           ports: {
358 |             groups: {
359 |               top: {
360 |                 position: "top",
361 |                 attrs: {
362 |                   circle: {
363 |                     r: 4,
364 |                     magnet: true,
365 |                     stroke: "#C2C8D5",
366 |                     strokeWidth: 1,
367 |                     fill: "#fff",
368 |                   },
369 |                 },
370 |               },
371 |               bottom: {
372 |                 position: "bottom",
373 |                 attrs: {
374 |                   circle: {
375 |                     r: 4,
376 |                     magnet: true,
377 |                     stroke: "#C2C8D5",
378 |                     strokeWidth: 1,
379 |                     fill: "#fff",
380 |                   },
381 |                 },
382 |               },
383 |             },
384 |           },
385 |         },
386 |         true
387 |       );
388 | 
389 |       Graph.registerEdge(
390 |         "dag-edge",
391 |         {
392 |           inherit: "edge",
393 |           attrs: {
394 |             line: {
395 |               stroke: "#C2C8D5",
396 |               strokeWidth: 2,
397 |               targetMarker: {
398 |                 name: "block",
399 |                 width: 12,
400 |                 height: 8,
401 |               },
402 |             },
403 |           },
404 |         },
405 |         true
406 |       );
407 |       Graph.registerConnector(
408 |         "algo-connector",
409 |         (s, e) => {
410 |           const offset = 4;
411 |           const deltaY = Math.abs(e.y - s.y);
412 |           const control = Math.floor((deltaY / 3) * 2);
413 | 
414 |           const v1 = { x: s.x, y: s.y + offset + control };
415 |           const v2 = { x: e.x, y: e.y - offset - control };
416 | 
417 |           return Path.normalize(
418 |             `M ${s.x} ${s.y}
419 |            L ${s.x} ${s.y + offset}
420 |            C ${v1.x} ${v1.y} ${v2.x} ${v2.y} ${e.x} ${e.y - offset}
421 |            L ${e.x} ${e.y}
422 |           `
423 |           );
424 |         },
425 |         true
426 |       );
427 | 
428 |       const graph = new Graph({
429 |         grid: {
430 |           size: 10,
431 |           visible: true,
432 |           type: "dot", // 'dot' | 'fixedDot' | 'mesh'
433 |           args: {
434 |             color: "#a05410", // 网格线/点颜色
435 |             thickness: 1, // 网格线宽度/网格点大小
436 |           },
437 |         },
438 |         background: {
439 |           color: "#fffbe6", // 设置画布背景颜色
440 |         },
441 |         container: document.getElementById("draw-cot"),
442 |         panning: {
443 |           enabled: true,
444 |           eventTypes: ["leftMouseDown", "mouseWheel"],
445 |         },
446 |         mousewheel: {
447 |           enabled: true,
448 |           modifiers: "ctrl",
449 |           factor: 1.1,
450 |           maxScale: 1.5,
451 |           minScale: 0.5,
452 |         },
453 |         highlighting: {
454 |           magnetAdsorbed: {
455 |             name: "stroke",
456 |             args: {
457 |               attrs: {
458 |                 fill: "#fff",
459 |                 stroke: "#31d0c6",
460 |                 strokeWidth: 4,
461 |               },
462 |             },
463 |           },
464 |         },
465 |         connecting: {
466 |           snap: true,
467 |           allowBlank: false,
468 |           allowLoop: false,
469 |           highlight: true,
470 |           connector: "algo-connector",
471 |           connectionPoint: "anchor",
472 |           anchor: "center",
473 |           validateMagnet() {
474 |             // return magnet.getAttribute('port-group') !== 'top'
475 | 
476 |             // 限制连线配置
477 |             return true;
478 |           },
479 |           createEdge() {
480 |             return graph.createEdge({
481 |               shape: "dag-edge",
482 |               attrs: {
483 |                 line: {
484 |                   strokeDasharray: "5 5",
485 |                   targetMarker: {
486 |                     name: "block",
487 |                     width: 12,
488 |                     height: 8,
489 |                   },
490 |                 },
491 |               },
492 |               zIndex: -1,
493 |             });
494 |           },
495 |         },
496 |         selecting: {
497 |           enabled: true,
498 |           multiple: true,
499 |           rubberEdge: true,
500 |           rubberNode: true,
501 |           modifiers: "shift",
502 |           rubberband: true,
503 |         },
504 |         keyboard: true,
505 |         clipboard: true,
506 |         history: true,
507 |       });
508 |       this.graph = graph;
509 | 
510 |       graph.on("edge:contextmenu", ({ e, x, y, edge, view }) => {
511 |         console.log(x, y, view);
512 |         this.showContextMenu = true;
513 |         this.$nextTick(() => {
514 |           this.$refs.menuBar.initFn(e.offsetX, e.offsetY, {
515 |             type: "edge",
516 |             item: edge,
517 |           });
518 |         });
519 |       });
520 | 
521 |       graph.on("node:contextmenu", ({ e, x, y, node, view }) => {
522 |         console.log(e, x, y, view);
523 |         this.showContextMenu = true;
524 | 
525 |         this.$nextTick(() => {
526 |           // this.$refs.menuBar.setItem({ type: 'node', item: node })
527 |           const p = graph.localToPage(x, y);
528 |           this.$refs.menuBar.initFn(p.x, p.y, { type: "node", item: node });
529 |         });
530 |       });
531 | 
532 |       graph.on("edge:connected", ({ edge }) => {
533 |         const source = graph.getCellById(edge.source.cell);
534 |         const target = graph.getCellById(edge.target.cell);
535 | 
536 |         // 只允许输入
537 |         if (target.data.type == "output") {
538 |           return graph.removeEdge(edge.id);
539 |         }
540 | 
541 |         // 只允许输出
542 |         if (source.data.type == "onlyIn") {
543 |           return graph.removeEdge(edge.id);
544 |         }
545 | 
546 |         // 如果线源头的一端链接桩只允许输入
547 |         if (/in/.test(edge.source.port)) {
548 |           return graph.removeEdge(edge.id);
549 |         }
550 | 
551 |         // 目标一端链接桩只允许输出
552 |         if (/out/.test(edge.target.port)) {
553 |           return graph.removeEdge(edge.id);
554 |         }
555 | 
556 |         if (source.data.type == "condition") {
557 |           console.log(source);
558 |           console.log(target);
559 |           console.log(edge);
560 |           if (target.data.t === edge.id || target.data.f === edge.id) {
561 |             return graph.removeEdge(edge.id);
562 |           }
563 |           this.$refs.dialogCondition.visible = true;
564 |           this.$refs.dialogCondition.init(source.data, edge);
565 |         }
566 | 
567 |         edge.attr({
568 |           line: {
569 |             strokeDasharray: "",
570 |           },
571 |         });
572 |       });
573 | 
574 |       graph.on("node:change:data", ({ node }) => {
575 |         const edges = graph.getIncomingEdges(node);
576 |         const { status } = node.getData();
577 |         edges?.forEach((edge) => {
578 |           if (status === "running") {
579 |             edge.attr("line/strokeDasharray", 5);
580 |             edge.attr(
581 |               "line/style/animation",
582 |               "running-line 30s infinite linear"
583 |             );
584 |           } else {
585 |             edge.attr("line/strokeDasharray", "");
586 |             edge.attr("line/style/animation", "");
587 |           }
588 |         });
589 |       });
590 |     },
591 |     async showNodeStatus(statusList) {
592 |       const status = statusList.shift();
593 |       status?.forEach((item) => {
594 |         const { id, status } = item;
595 |         const node = this.graph.getCellById(id);
596 |         const data = node.getData();
597 |         node.setData({
598 |           ...data,
599 |           status: status,
600 |         });
601 |       });
602 |       this.timer = setTimeout(() => {
603 |         this.showNodeStatus(statusList);
604 |       }, 300);
605 |     },
606 |     // 初始化节点/边
607 |     init(data = []) {
608 |       const cells = [];
609 |       data.forEach((item) => {
610 |         if (item.shape === "dag-edge") {
611 |           cells.push(this.graph.createEdge(item));
612 |         } else {
613 |           delete item.component;
614 |           cells.push(this.graph.createNode(item));
615 |         }
616 |       });
617 |       this.graph.resetCells(cells);
618 |     },
619 |     zoomFn(num) {
620 |       this.graph.zoom(num);
621 |     },
622 |     centerFn() {
623 |       const num = 1 - this.graph.zoom();
624 |       num > 1 ? this.graph.zoom(num * -1) : this.graph.zoom(num);
625 |       this.graph.centerContent();
626 |     },
627 |     startFn(item) {
628 |       this.timer && clearTimeout(this.timer);
629 |       this.init(item || DataJson);
630 |       this.showNodeStatus(Object.assign([], nodeStatusList));
631 |       this.graph.centerContent();
632 |     },
633 |     createMenuFn() {},
634 |     keyBindFn() {
635 |       // copy cut paste
636 |       this.graph.bindKey(["meta+c", "ctrl+c"], () => {
637 |         const cells = this.graph.getSelectedCells();
638 |         if (cells.length) {
639 |           this.graph.copy(cells);
640 |         }
641 |         return false;
642 |       });
643 |       this.graph.bindKey(["meta+x", "ctrl+x"], () => {
644 |         const cells = this.graph.getSelectedCells();
645 |         if (cells.length) {
646 |           this.graph.cut(cells);
647 |         }
648 |         return false;
649 |       });
650 |       this.graph.bindKey(["meta+v", "ctrl+v"], () => {
651 |         if (!this.graph.isClipboardEmpty()) {
652 |           const cells = this.graph.paste({ offset: 32 });
653 |           this.graph.cleanSelection();
654 |           this.graph.select(cells);
655 |         }
656 |         return false;
657 |       });
658 | 
659 |       // undo redo
660 |       this.graph.bindKey(["meta+z", "ctrl+z"], () => {
661 |         if (this.graph.history.canUndo()) {
662 |           this.graph.history.undo();
663 |         }
664 |         return false;
665 |       });
666 |       // delete
667 |       this.graph.bindKey(["delete"], () => {
668 |         const select = this.graph.getSelectedCells();
669 |         select?.forEach((item) => {
670 |           if (/edge/.test(item.shape)) {
671 |             this.graph.removeEdge(item.id);
672 |           } else {
673 |             this.graph.removeNode(item.id);
674 |           }
675 |         });
676 |         return false;
677 |       });
678 |     },
679 |     saveFn() {
680 |       localStorage.setItem(
681 |         "x6Json",
682 |         JSON.stringify(this.graph.toJSON({ diff: true }))
683 |       );
684 |     },
685 |     loadFn() {
686 |       this.timer && clearTimeout(this.timer);
687 |       const x6Json = JSON.parse(localStorage.getItem("x6Json"));
688 | 
689 |       this.startFn(x6Json.cells);
690 |     },
691 |     lockFn() {
692 |       this.isLock = !this.isLock;
693 |       if (this.isLock) {
694 |         this.graph.enablePanning();
695 |         this.graph.enableKeyboard();
696 |       } else {
697 |         this.graph.disablePanning();
698 |         this.graph.disableKeyboard();
699 |       }
700 |     },
701 |     contextMenuFn(type, node) {
702 |       switch (type) {
703 |         case "remove":
704 |           if (node.type == "edge") {
705 |             this.graph.removeEdge(node.item.id);
706 |           } else if (node.type == "node") {
707 |             this.graph.removeNode(node.item.id);
708 |           }
709 |           break;
710 |         case "source":
711 |           this.$refs.dialogMysql.visible = true;
712 |           this.$refs.dialogMysql.init(node);
713 |           break;
714 |       }
715 | 
716 |       this.showContextMenu = false;
717 |     },
718 | 
719 |     showDrawerFn() {
720 |       this.$refs.drawer.visible = !this.$refs.drawer.visible;
721 |     },
722 |     addNode(option) {
723 |       const p = this.graph.pageToLocal(option.x, option.y);
724 |       this.graph.addNode(Object.assign({}, option, p));
725 |     },
726 |   },
727 | };
728 | </script>
729 | 
730 | <style lang="less" scoped>
731 | header {
732 |   display: flex;
733 |   justify-content: flex-end;
734 |   width: 100%;
735 |   height: 50px;
736 |   box-sizing: border-box;
737 | }
738 | 
739 | header i {
740 |   margin: 8px;
741 |   font-size: 30px;
742 | }
743 | .x6-node-selected .node {
744 |   border-color: #1890ff;
745 |   border-radius: 2px;
746 |   box-shadow: 0 0 0 4px #d4e8fe;
747 | }
748 | 
749 | .x6-node-selected .node.success {
750 |   border-color: #52c41a;
751 |   border-radius: 2px;
752 |   box-shadow: 0 0 0 4px #ccecc0;
753 | }
754 | 
755 | .x6-node-selected .node.failed {
756 |   border-color: #ff4d4f;
757 |   border-radius: 2px;
758 |   box-shadow: 0 0 0 4px #fedcdc;
759 | }
760 | 
761 | .x6-edge:hover path:nth-child(2) {
762 |   stroke: #1890ff;
763 |   stroke-width: 1px;
764 | }
765 | 
766 | .x6-edge-selected path:nth-child(2) {
767 |   stroke: #1890ff;
768 |   stroke-width: 1.5px !important;
769 | }
770 | 
771 | .section-cot {
772 |   display: flex;
773 | }
774 | 
775 | .section-cot #container {
776 |   position: relative;
777 |   flex: 1;
778 | }
779 | 
780 | .section-cot #container #draw-cot {
781 |   width: 100%;
782 |   height: 100%;
783 | }
784 | 
785 | ::-webkit-scrollbar {
786 |   width: 0;
787 | }
788 | </style>
789 | 


--------------------------------------------------------------------------------