├── public
    ├── robots.txt
    ├── favicon.ico
    └── index.html
├── src
    ├── style
    │   └── init.scss
    ├── App.vue
    ├── assets
    │   └── logo.png
    ├── main.js
    ├── router
    │   └── index.js
    ├── components
    │   ├── modules
    │   │   ├── HeaderAttr.vue
    │   │   ├── ContextMenu.vue
    │   │   ├── MenuNode.vue
    │   │   ├── FlowNode.vue
    │   │   ├── FlowArea.vue
    │   │   └── HeaderOperate.vue
    │   ├── FlowAttr.vue
    │   ├── FlowMenu.vue
    │   └── FlowContent.vue
    ├── registerServiceWorker.js
    ├── utils
    │   └── index.js
    ├── config
    │   ├── flow.config.js
    │   └── icon.config.js
    ├── views
    │   └── Index.vue
    └── store
    │   └── index.js
├── img
    ├── index1.png
    └── index2.png
├── babel.config.js
├── .gitignore
├── package.json
├── README.md
└── vue.config.js


/public/robots.txt:
--------------------------------------------------------------------------------
1 | User-agent: *
2 | Disallow:
3 | 


--------------------------------------------------------------------------------
/src/style/init.scss:
--------------------------------------------------------------------------------
1 | .jtk-hover {
2 |   cursor: auto;
3 | }
4 | 


--------------------------------------------------------------------------------
/img/index1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zlluGitHub/vue-flow-topology/HEAD/img/index1.png


--------------------------------------------------------------------------------
/img/index2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zlluGitHub/vue-flow-topology/HEAD/img/index2.png


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zlluGitHub/vue-flow-topology/HEAD/public/favicon.ico


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
1 | <template>
2 |   <div id="app">
3 |     <router-view/>
4 |   </div>
5 | </template>
6 | 


--------------------------------------------------------------------------------
/src/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zlluGitHub/vue-flow-topology/HEAD/src/assets/logo.png


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


--------------------------------------------------------------------------------
/.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 | 


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import App from './App.vue'
 3 | import './registerServiceWorker'
 4 | import router from './router'
 5 | import store from './store'
 6 | import ViewUI from 'view-design';
 7 | import 'view-design/dist/styles/iview.css';
 8 | import "./style/init.scss"
 9 | 
10 | import JsonViewer from 'vue-json-viewer'
11 | Vue.use(JsonViewer);
12 | 
13 | import events from "./utils";
14 | Vue.prototype.$events = events;
15 | 
16 | Vue.config.productionTip = false;
17 | Vue.use(ViewUI);
18 | new Vue({
19 |   router,
20 |   store,
21 |   render: h => h(App)
22 | }).$mount('#app')
23 | 


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 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/router/index.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import VueRouter from 'vue-router'
 3 | import Index from '../views/Index.vue'
 4 | 
 5 | Vue.use(VueRouter)
 6 | 
 7 | const routes = [
 8 |   {
 9 |     path: '/',
10 |     name: 'Index',
11 |     component: Index
12 |   },
13 |   // {
14 |   //   path: '/about',
15 |   //   name: 'About',
16 |   //   // route level code-splitting
17 |   //   // this generates a separate chunk (about.[hash].js) for this route
18 |   //   // which is lazy-loaded when the route is visited.
19 |   //   component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
20 |   // }
21 | ]
22 | 
23 | const router = new VueRouter({
24 |   mode: 'history',
25 |   base: process.env.BASE_URL,
26 |   routes
27 | })
28 | 
29 | export default router
30 | 


--------------------------------------------------------------------------------
/src/components/modules/HeaderAttr.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="header-attr">
 3 |     <h3>{{ title }}</h3>
 4 |   </div>
 5 | </template>
 6 | 
 7 | <script>
 8 | export default {
 9 |   name: "header-attr",
10 |   data() {
11 |     return {
12 |       title: "基本属性",
13 |     };
14 |   },
15 |   computed: {
16 |     selectContent() {
17 |       return this.$store.state.selectContent;
18 |     },
19 |   },
20 |   watch: {
21 |     selectContent(data) {
22 |       if (data.type === "node") {
23 |         this.title = "节点属性";
24 |       } else if (data.type === "link") {
25 |         this.title = "连线属性";
26 |       } else {
27 |         this.title = "基本属性";
28 |       }
29 |     },
30 |   },
31 | };
32 | </script>
33 | <style lang="scss" scoped>
34 | .header-attr {
35 |   width: 100%;
36 |   h3 {
37 |     text-align: center;
38 |   }
39 | }
40 | </style>
41 | 


--------------------------------------------------------------------------------
/src/registerServiceWorker.js:
--------------------------------------------------------------------------------
 1 | /* eslint-disable no-console */
 2 | 
 3 | import { register } from 'register-service-worker'
 4 | 
 5 | if (process.env.NODE_ENV === 'production') {
 6 |   register(`${process.env.BASE_URL}service-worker.js`, {
 7 |     ready () {
 8 |       console.log(
 9 |         'App is being served from cache by a service worker.\n' +
10 |         'For more details, visit https://goo.gl/AFskqB'
11 |       )
12 |     },
13 |     registered () {
14 |       console.log('Service worker has been registered.')
15 |     },
16 |     cached () {
17 |       console.log('Content has been cached for offline use.')
18 |     },
19 |     updatefound () {
20 |       console.log('New content is downloading.')
21 |     },
22 |     updated () {
23 |       console.log('New content is available; please refresh.')
24 |     },
25 |     offline () {
26 |       console.log('No internet connection found. App is running in offline mode.')
27 |     },
28 |     error (error) {
29 |       console.error('Error during service worker registration:', error)
30 |     }
31 |   })
32 | }
33 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "flow",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "dev": "vue-cli-service serve",
 7 |     "build": "vue-cli-service build",
 8 |     "lint": "vue-cli-service lint"
 9 |   },
10 |   "dependencies": {
11 |     "core-js": "^3.6.5",
12 |     "file-saver": "^2.0.5",
13 |     "jsplumb": "^2.15.5",
14 |     "register-service-worker": "^1.7.1",
15 |     "view-design": "^4.4.0",
16 |     "vue": "^2.6.11",
17 |     "vue-json-viewer": "^2.2.18",
18 |     "vue-router": "^3.2.0",
19 |     "vuex": "^3.4.0"
20 |   },
21 |   "devDependencies": {
22 |     "@vue/cli-plugin-babel": "~4.5.0",
23 |     "@vue/cli-plugin-eslint": "~4.5.0",
24 |     "@vue/cli-plugin-pwa": "~4.5.0",
25 |     "@vue/cli-plugin-router": "~4.5.0",
26 |     "@vue/cli-plugin-vuex": "~4.5.0",
27 |     "@vue/cli-service": "~4.5.0",
28 |     "babel-eslint": "^10.1.0",
29 |     "eslint": "^6.7.2",
30 |     "eslint-plugin-vue": "^6.2.2",
31 |     "node-sass": "^4.12.0",
32 |     "sass-loader": "^8.0.2",
33 |     "vue-template-compiler": "^2.6.11"
34 |   },
35 |   "eslintConfig": {
36 |     "root": true,
37 |     "env": {
38 |       "node": true
39 |     },
40 |     "extends": [
41 |       "plugin:vue/essential",
42 |       "eslint:recommended"
43 |     ],
44 |     "parserOptions": {
45 |       "parser": "babel-eslint"
46 |     },
47 |     "rules": {}
48 |   },
49 |   "browserslist": [
50 |     "> 1%",
51 |     "last 2 versions",
52 |     "not dead"
53 |   ]
54 | }
55 | 


--------------------------------------------------------------------------------
/src/components/modules/ContextMenu.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="right-menu" ref="menu">
 3 |     <ul v-if="type === 'node'">
 4 |       <li @click.stop="handleClick('delete-node')">删除节点</li>
 5 |       <li @click.stop="handleClick('copy')">复制节点</li>
 6 |     </ul>
 7 |     <ul v-else-if="type === 'flow'">
 8 |       <li @click.stop="handleClick('paste', $event)">粘贴节点</li>
 9 |       <li @click.stop="handleClick('save')">保存流程</li>
10 |     </ul>
11 |     <ul v-else-if="type === 'link'">
12 |       <li @click.stop="handleClick('delete-link')">删除连线</li>
13 |     </ul>
14 |   </div>
15 | </template>
16 | 
17 | <script>
18 | export default {
19 |   name: "contextmenu",
20 |   props: ["type"],
21 |   methods: {
22 |     handleClick(type, event) {
23 |       this.$emit("on-click", { type, event });
24 |     },
25 |     hide() {
26 |       let menu = this.$refs.menu;
27 |       menu.style.display = "none";
28 |     },
29 |     show() {
30 |       let menu = this.$refs.menu;
31 |       menu.style.display = "block";
32 |     },
33 |   },
34 | };
35 | </script>
36 | 
37 | <style scoped lang="scss">
38 | .right-menu {
39 |   position: fixed;
40 |   top: 30px;
41 |   left: 40px;
42 |   z-index: 10;
43 |   background: #fff;
44 |   border: 1px solid rgba(177, 177, 177, 0.4);
45 |   border-bottom: 0;
46 |   ul {
47 |     list-style: none;
48 |     font-size: 12px;
49 |     li {
50 |       padding: 10px 20px;
51 |       cursor: pointer;
52 |       border-bottom: 1px solid rgba(177, 177, 177, 0.4);
53 |       &:hover {
54 |         color: cornflowerblue;
55 |       }
56 |     }
57 |   }
58 | }
59 | </style>
60 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # vue-flow-topology
 2 | ## 介绍
 3 | > vue-flow-topology 该项目可以看做是一个独立的 Vue 项目（大数据流水线拓展流程工作台），也可以嵌入到其他vue项目中使用，新版会作为优先版本持续迭代。
 4 | - 版本一：基于 `Vue-cli3.0` + `view-design` + `JSPlumb` 开发（ `master` 分支 ）。
 5 | - 版本二：基于 `Vue-cli3.0` + `Ant Design Vue` + `JSPlumb` 开发（ `simple` 分支 ）。
 6 | 
 7 | ## 特性
 8 | ✅ 支持画布重绘、拖拽、放大、缩小功能
 9 | 
10 | ✅ 支持鼠标滚轮缩放画布功能
11 | 
12 | ✅ 支持拖拽、添加、删除节点功能
13 | 
14 | ✅ 支持不同连线类型进行关联节点功能
15 | 
16 | ✅ 支持删除连线、重绘连线功能
17 | 
18 | ✅ 支持点击画布设置属性功能
19 | 
20 | ✅ 支持点击节点设置属性功能
21 | 
22 | ✅ 支持点击线进行设置属性功能
23 | 
24 | ✅ 支持导入、导出指定数据文件功能
25 | 
26 | ✅ 支持复制、粘贴节点功能
27 | 
28 | ## 版本一（ master 分支 ）
29 | ### 演示地址
30 | - → 在线 Demo 预览：[http://flow.zhenglinglu.cn](http://flow.zhenglinglu.cn)
31 | ### 快速使用
32 | ```bash
33 | # clone this project
34 | git clone https://github.com/zlluGitHub/vue-flow-topology.git
35 | 
36 | # Project setup
37 | npm install
38 | 
39 | # Compiles and hot-reloads for development
40 | npm run dev
41 | 
42 | # Compiles and minifies for production
43 | npm run build
44 | 
45 | # Lints and fixes files
46 | npm run lint
47 | ```
48 | #### 示例图片
49 | ![](./img/index1.png)
50 | 
51 | ## 版本二（ simple 分支 ）
52 | ### 演示地址
53 | - → 在线 Demo 预览：[http://flow.zhenglinglu.cn/simple.html](http://flow.zhenglinglu.cn/simple.html)
54 | ### 快速使用
55 | ```bash
56 | # clone this project
57 | git clone -b simple https://github.com/zlluGitHub/vue-flow-topology.git
58 | 
59 | # Project setup
60 | npm install
61 | 
62 | # Compiles and hot-reloads for development
63 | npm run dev
64 | 
65 | # Compiles and minifies for production
66 | npm run build
67 | 
68 | # Lints and fixes files
69 | npm run lint
70 | ```
71 | #### 示例图片
72 | ![](./img/index2.png)


--------------------------------------------------------------------------------
/src/utils/index.js:
--------------------------------------------------------------------------------
 1 | 
 2 | const S4 = () => (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
 3 | export const getUUID = () => {
 4 | 	return (S4() + S4() + "-" + S4() + "-" + S4());
 5 | }
 6 | export const deepClone = source => {
 7 | 	const targetObj = source.constructor === Array ? [] : {}; // 判断复制的目标是数组还是对象
 8 | 	for (let keys in source) {
 9 | 		// 遍历目标
10 | 		if (source.hasOwnProperty(keys)) {
11 | 			if (source[keys] && typeof source[keys] === "object") {
12 | 				// 如果值是对象，就递归一下
13 | 				targetObj[keys] = source[keys].constructor === Array ? [] : {};
14 | 				targetObj[keys] = deepClone(source[keys]);
15 | 			} else {
16 | 				// 如果不是，就直接赋值
17 | 				targetObj[keys] = source[keys];
18 | 			}
19 | 		}
20 | 	}
21 | 	return targetObj;
22 | }
23 | export const uploadFile = (input, callBack) => {
24 | 	//支持chrome IE10  
25 | 	if (window.FileReader) {
26 | 		let file = input.files[0], filename = file.name.split(".")[0];
27 | 		let reader = new FileReader();
28 | 		reader.onload = function () {
29 | 			// console.log(this.result);
30 | 			callBack(this.result, filename)
31 | 		}
32 | 		reader.readAsText(file);
33 | 	}
34 | 	//支持IE 7 8 9 10  
35 | 	else if (typeof window.ActiveXObject != 'undefined') {
36 | 		let xmlDoc;
37 | 		xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
38 | 		xmlDoc.async = false;
39 | 		xmlDoc.load(input.value);
40 | 		callBack(xmlDoc.xml)
41 | 	}
42 | 	//支持FF  
43 | 	else if (document.implementation && document.implementation.createDocument) {
44 | 		let xmlDoc;
45 | 		xmlDoc = document.implementation.createDocument("", "", null);
46 | 		xmlDoc.async = false;
47 | 		xmlDoc.load(input.value);
48 | 		callBack(xmlDoc.xml)
49 | 	} else {
50 | 		console.error('文件读取失败！')
51 | 	}
52 | }
53 | export default { getUUID, uploadFile }


--------------------------------------------------------------------------------
/vue.config.js:
--------------------------------------------------------------------------------
 1 | 
 2 | // const CompressionPlugin = require("compression-webpack-plugin")
 3 | module.exports = {
 4 |   // configureWebpack: config => {
 5 |   //   if (process.env.NODE_ENV === 'production') { // 去掉console.log
 6 |   //     config.optimization.minimizer[0].options.terserOptions.compress.warnings = false
 7 |   //     config.optimization.minimizer[0].options.terserOptions.compress.drop_console = true
 8 |   //     config.optimization.minimizer[0].options.terserOptions.compress.drop_debugger = true
 9 |   //     config.optimization.minimizer[0].options.terserOptions.compress.pure_funcs = ['console.log']
10 |   //   }
11 | 
12 |   //   if (process.env.NODE_ENV === 'production') {
13 |   //     return {
14 |   //       plugins: [
15 |   //         new CompressionPlugin({
16 |   //           test: /\.js$|\.html$|\.css/, //匹配文件名
17 |   //           threshold: 10240,//对超过10k的数据压缩
18 |   //           deleteOriginalAssets: false //不删除源文件
19 |   //         })
20 |   //       ]
21 |   //     }
22 |   //   }
23 |   // },
24 |   // 根域上下文目录
25 |   // publicPath: '/topology', // publicPath:'/rm', 这里可以设置二级文件夹作为主页面
26 | 
27 |   // devServer: {
28 |   //   port: 8080,
29 |   //   // sockHost: 'http://127.0.0.1',
30 |   //   // disableHostCheck: true,
31 |   //   // open: true,
32 |   //   // host: "localhost",
33 |   //   proxy: {
34 |   //     '/piflow': {
35 |   //       target: ' ',
36 |   //       changeOrigin: true,
37 |   //       ws: true, // 是否启用websockets
38 |   //       secure: false, // 使用的是http协议则设置为false，https协议则设置为true
39 |   //       pathRewrite: {
40 |   //         '^/piflow': '/'
41 |   //       }
42 |   //     }
43 |   //   },
44 |   // },
45 |   productionSourceMap: process.env.NODE_ENV === 'production' ? false : true,
46 |   lintOnSave: false,   // 取消 eslint 验证
47 | 
48 | }


--------------------------------------------------------------------------------
/src/config/flow.config.js:
--------------------------------------------------------------------------------
  1 | export const flowAnchors = ["Top", "Right", "Bottom", "Left"];
  2 | export const flowAnchor = "Continuous";
  3 | export const connectorType = ['Bezier', 'Flowchart', 'StateMachine', 'Straight'];
  4 | export const jsPlumbConfig = {
  5 | 	isSource: true,// 是否可以拖动（作为连线起点）
  6 | 	isTarget: true,// 是否可以放置（连线终点）
  7 | 	connector: [
  8 | 		"Straight",// 连接线的样式种类有[Bezier],[Flowchart],[StateMachine ],[Straight ]
  9 | 		// {
 10 | 		// 	gap: 5,
 11 | 		// 	cornerRadius: 8,
 12 | 		// 	alwaysRespectStubs: true,
 13 | 		// },
 14 | 	],
 15 | 	// connectionsDetachable: false,
 16 | 	// anchors: ["Top", "Right", "Bottom", "Left"],//"Continuous", "AutoDefault","Top" ,"Right", "Bottom", "Left","TopRight", "TopLeft","BottomRight","BottomLeft", "Center"
 17 | 	// anchor: "Continuous",//"Continuous", "AutoDefault","Top" ,"Right", "Bottom", "Left","TopRight", "TopLeft","BottomRight","BottomLeft", "Center"
 18 | 	// isDetachable: false, //连线是否可重新编辑
 19 | 	maxConnections: -1,
 20 | 	// endpoint: 'Rectangle', //Dot:{radius,cssClass,hoverClass }、Rectangle:{width,height,cssClass,hoverClass }、Image:{src,cssClass,hoverClass }、Blank
 21 | 
 22 | 	//锚点形状
 23 | 	endpoints: [
 24 | 		"Dot",
 25 | 		{
 26 | 			radius: 7,
 27 | 			fill: "#000",
 28 | 		},
 29 | 	],
 30 | 
 31 | 	//锚点样式
 32 | 	paintStyle: {
 33 | 		// fill: "#000",
 34 | 		radius: 2, //锚点大小
 35 | 		stroke: "#4caf50",
 36 | 		strokeWidth: 1,
 37 | 	},
 38 | 	hoverPaintStyle: {
 39 | 		// fill: "#4caf50",
 40 | 		stroke: "#4caf50",
 41 | 		strokeWidth: 3
 42 | 	},
 43 | 
 44 | 	//连线的样式
 45 | 	connectorStyle: {
 46 | 		// outlineStroke: "#000",
 47 | 		strokeWidth: 1,
 48 | 		// lineWidth: 1,
 49 | 		stroke: "#4caf50",
 50 | 		// joinstyle: "round",
 51 | 		// fill: "pink",
 52 | 		// outlineColor: "",
 53 | 		// outlineWidth: "",
 54 | 	},
 55 | 	connectorHoverStyle: {
 56 | 		strokeWidth: 2,
 57 | 		//   lineWidth: 2,
 58 | 		// strokeStyle: "red",
 59 | 		// outlineWidth: 10,
 60 | 		// outlineColor: "",
 61 | 	},
 62 | 
 63 | 	// Arrow 一个可配置的箭头
 64 | 	// Label 标签，可以在连接上显示文字信息
 65 | 	// PlainArrow 原始类型的箭头
 66 | 	// Diamond 菱形箭头
 67 | 	// Custom 自定义类型
 68 | 	connectorOverlays: [
 69 | 		[
 70 | 			"Arrow",
 71 | 			{
 72 | 				width: 10,
 73 | 				length: 10,
 74 | 				visible: true,
 75 | 				location: 1,
 76 | 			},
 77 | 		],
 78 | 		// [
 79 | 		// 	"Label",
 80 | 		// 	{
 81 | 		// 		label: "dfdf",
 82 | 		// 		cssClass: "",
 83 | 		// 		labelStyle: {
 84 | 		// 			color: "red",
 85 | 		// 		},
 86 | 		// 		events: {
 87 | 		// 			click: function (labelOverlay, originalEvent) {
 88 | 		// 				console.log("点击了label");
 89 | 		// 			},
 90 | 		// 		},
 91 | 		// 	},
 92 | 		// ],
 93 | 	],
 94 | 
 95 | }
 96 | // 节点默认参数
 97 | export const nodePrame = {
 98 | 	// data: null
 99 | }
100 | // 连线默认参数
101 | export const linkPrame = {
102 | 	type: null
103 | }
104 | // 节点默认参数
105 | export const flowConfig = {
106 | 	offsetX: -3000,
107 | 	offsetY: -3000,
108 | 	title:"",
109 | 	nodes: [],
110 | 	links: []
111 | }


--------------------------------------------------------------------------------
/src/components/modules/MenuNode.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div>
  3 |     <div v-if="node.type === 'start-node'" class="item-node menu-start-node">
  4 |       {{ node.name }}
  5 |     </div>
  6 |     <div v-else-if="node.type === 'end-node'" class="item-node menu-end-node">
  7 |       {{ node.name }}
  8 |     </div>
  9 |     <div v-else-if="node.type === 'in-node'" class="item-node menu-in-node">
 10 |       {{ node.name }}
 11 |     </div>
 12 |     <div v-else-if="node.type === 'out-node'" class="item-node menu-out-node">
 13 |       {{ node.name }}
 14 |     </div>
 15 |     <div v-else-if="node.type === 'cog-node'" class="item-node menu-cog-node">
 16 |       <div>
 17 |         <Icon :type="node.icon" />
 18 |         <span> {{ node.name }}</span>
 19 |       </div>
 20 |       <p>相关配置内容</p>
 21 |     </div>
 22 |     <div v-else-if="node.type === 'codepen-node'" class="item-node menu-codepen-node">
 23 |       <div>
 24 |         <Icon :type="node.icon" />
 25 |         <span> {{ node.name }}</span>
 26 |       </div>
 27 |       <p>相关配置内容</p>
 28 |     </div>
 29 |     <div v-else-if="node.type === 'pulse-node'" class="item-node menu-pulse-node">
 30 |       <div>
 31 |         <div>
 32 |           <Icon :type="node.icon" /> <span> {{ node.name }}</span>
 33 |         </div>
 34 |         <Icon type="md-power" />
 35 |       </div>
 36 |       <p>
 37 |         <span>执行状态：正在监听...</span>
 38 |         <span>98%</span>
 39 |       </p>
 40 |     </div>
 41 |     <div v-else>无效节点</div>
 42 |   </div>
 43 | </template>
 44 | <script>
 45 | export default {
 46 |   name: "menu-node",
 47 |   props: ["node"]
 48 | };
 49 | </script>
 50 | 
 51 | <style scoped lang="scss">
 52 | .item-node {
 53 |   user-select: none;
 54 |   background: #abc7ff31;
 55 |   border: 1px solid #abc7ff;
 56 |   i {
 57 |     font-size: 16px;
 58 |   }
 59 | }
 60 | .menu-start-node {
 61 |   width: 100px;
 62 |   padding: 12px 18px;
 63 |   border-radius: 30px;
 64 |   text-align: center;
 65 | }
 66 | .menu-end-node {
 67 |   width: 100px;
 68 |   padding: 12px 18px;
 69 |   text-align: center;
 70 | }
 71 | .menu-in-node {
 72 |   padding: 0;
 73 |   width: 60px;
 74 |   height: 60px;
 75 |   margin-left: 28px;
 76 |   text-align: center;
 77 |   line-height: 60px;
 78 | }
 79 | .menu-out-node {
 80 |   padding: 0;
 81 |   width: 65px;
 82 |   height: 65px;
 83 |   margin-left: 22px;
 84 |   border-radius: 100%;
 85 |   line-height: 60px;
 86 |   text-align: center;
 87 | }
 88 | 
 89 | .menu-cog-node {
 90 |   padding: 5px 10px;
 91 |   width: 240px;
 92 |   > div {
 93 |     font-size: 14px;
 94 |   }
 95 |   > p {
 96 |     font-size: 12px;
 97 |     margin-top: 2px;
 98 |     color: #999;
 99 |   }
100 | }
101 | .menu-codepen-node {
102 |   width: 240px;
103 |   > div {
104 |     font-size: 14px;
105 |     padding: 8px;
106 |     background: cornflowerblue;
107 |     color: cornsilk;
108 |   }
109 |   > p {
110 |     // margin-left: 10px;
111 |     padding: 10px;
112 |     font-size: 12px;
113 |     margin-top: 2px;
114 |     color: #999;
115 |   }
116 | }
117 | .menu-pulse-node {
118 |   width: 240px;
119 | 
120 |   > div {
121 |     font-size: 14px;
122 |     padding: 8px;
123 |     background: cornflowerblue;
124 |     color: cornsilk;
125 |     display: flex;
126 |     justify-content: space-between;
127 |     align-items: center;
128 |   }
129 |   > p {
130 |     // margin-left: 10px;
131 |     padding: 10px;
132 |     font-size: 12px;
133 |     margin-top: 2px;
134 |     color: #999;
135 |     display: flex;
136 |     justify-content: space-between;
137 |   }
138 | }
139 | </style>
140 | 


--------------------------------------------------------------------------------
/src/views/Index.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div
  3 |     class="index"
  4 |     id="zll-index"
  5 |     @mousemove.prevent="handleMousemove"
  6 |     @mouseup.prevent="handleMouseup"
  7 |   >
  8 |     <div class="flow-menu">
  9 |       <header>
 10 |         <h1>Vue Flow Topology</h1>
 11 |       </header>
 12 |       <div class="section">
 13 |         <FlowMenu @on-is-add-node="onIsAddNode" />
 14 |       </div>
 15 |     </div>
 16 |     <div class="middle">
 17 |       <header>
 18 |         <HeaderOperate ref="operate" />
 19 |       </header>
 20 |       <div class="section">
 21 |         <FlowContent ref="flowContent" @on-select-type="onSelectType" />
 22 |       </div>
 23 |     </div>
 24 |     <div class="flow-attr">
 25 |       <header>
 26 |         <header-attr />
 27 |       </header>
 28 |       <flow-attr />
 29 |     </div>
 30 |     <div class="modal-warp">
 31 |       <Modal
 32 |         v-model="isJsonView"
 33 |         footer-hide
 34 |         title="FlowData数据"
 35 |         width="600"
 36 |         :transfer="false"
 37 |         @on-cancel="handleCloseJsonView"
 38 |       >
 39 |         <json-viewer :expand-depth="1" copyable boxed :value="jsonData"></json-viewer>
 40 |       </Modal>
 41 |     </div>
 42 |   </div>
 43 | </template>
 44 | 
 45 | <script>
 46 | import jsp from "jsplumb";
 47 | import HeaderOperate from "@/components/modules/HeaderOperate";
 48 | import HeaderAttr from "@/components/modules/HeaderAttr";
 49 | import FlowMenu from "@/components/FlowMenu";
 50 | import FlowAttr from "@/components/FlowAttr";
 51 | import FlowContent from "@/components/FlowContent";
 52 | export default {
 53 |   name: "Index",
 54 |   components: {
 55 |     HeaderOperate,
 56 |     HeaderAttr,
 57 |     FlowMenu,
 58 |     FlowContent,
 59 |     FlowAttr,
 60 |   },
 61 |   data() {
 62 |     return {
 63 |       isMouseDownStop: false,
 64 |       isJsonView: false,
 65 |       jsonData: "暂无内容",
 66 |     };
 67 |   },
 68 |   computed: {
 69 |     flowMenuObj() {
 70 |       return this.$store.state.flowMenuObj;
 71 |     },
 72 |   },
 73 |   watch: {
 74 |     flowMenuObj(newVal, oldVal) {
 75 |       if (newVal.type === "view-code") {
 76 |         this.jsonData = this.$store.state.flowData;
 77 |         this.isJsonView = true;
 78 |       }
 79 |     },
 80 |   },
 81 |   created() {
 82 |     this.$store.commit("setJspInit", jsp.jsPlumb.getInstance({ Container: "zll-index" }));
 83 |   },
 84 |   mounted() {
 85 |     this.jsonData = this.$store.state.flowData;
 86 |   },
 87 |   methods: {
 88 |     onIsAddNode() {
 89 |       this.$refs.flowContent.onIsAddNode();
 90 |     },
 91 |     onSelectType(type) {
 92 |       this.$refs.operate.handleMiddleMenu(type);
 93 |     },
 94 |     handleCloseJsonView() {
 95 |       //  this.jsonData = this.$store.state.flowData;
 96 |     },
 97 |     handleMouseup(e) {
 98 |       this.isMouseDownStop = false;
 99 |     },
100 |     handleMousemove(e) {
101 |       if (this.isMouseDownStop) {
102 |         this.flowAttrVerticalWidth =
103 |           this.flowAttrVerticalWidthDown + this.mouseDownOffset - e.x;
104 |         if (this.flowAttrVerticalWidth < 450) {
105 |           this.flowAttrVerticalWidth = 450;
106 |         }
107 |         if (this.flowAttrVerticalWidth > 1200) {
108 |           this.flowAttrVerticalWidth = 1200;
109 |         }
110 |       }
111 |     },
112 |   },
113 | };
114 | </script>
115 | <style lang="scss" scoped>
116 | .index {
117 |   display: flex;
118 |   h1 {
119 |     font-size: 18px;
120 |   }
121 |   > div {
122 |     height: 100vh;
123 |     display: flex;
124 |     flex-direction: column;
125 |   }
126 |   .section {
127 |     flex: 1;
128 |   }
129 |   header {
130 |     height: 38px;
131 |     display: flex;
132 |     align-items: center;
133 |     padding: 0 15px;
134 |     border-bottom: 1px solid #eee;
135 |   }
136 |   .flow-menu {
137 |     width: 280px;
138 |   }
139 |   .middle {
140 |     flex: 1;
141 |     border-left: 1px solid #eee;
142 |     border-right: 1px solid #eee;
143 |   }
144 |   .flow-attr {
145 |     width: 280px;
146 |   }
147 |   /deep/ .ivu-modal {
148 |     margin-bottom: 50px;
149 |     .jv-container.boxed:hover {
150 |       box-shadow: none;
151 |       border: 1px solid #eee;
152 |       border-radius: 6px;
153 |     }
154 |   }
155 | }
156 | </style>
157 | 


--------------------------------------------------------------------------------
/src/components/FlowAttr.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <aside>
  3 |     <!-- 节点属性 -->
  4 |     <div v-if="type === 'node'">
  5 |       <ul v-if="content.type === 'pulse-node'">
  6 |         <li>
  7 |           <label>节点Id</label>
  8 |           <Input
  9 |             disabled
 10 |             v-model="content.id"
 11 |             placeholder="Enter something..."
 12 |             style="width: 100%"
 13 |           />
 14 |         </li>
 15 |         <li>
 16 |           <label>节点类型</label>
 17 |           <Input
 18 |             disabled
 19 |             v-model="content.type"
 20 |             placeholder="Enter something..."
 21 |             style="width: 100%"
 22 |           />
 23 |         </li>
 24 |         <li>
 25 |           <label>节点名称</label>
 26 |           <Input
 27 |             v-model="content.name"
 28 |             placeholder="Enter something..."
 29 |             style="width: 100%"
 30 |           />
 31 |         </li>
 32 |       </ul>
 33 | 
 34 |       <ul v-else>
 35 |         <li>
 36 |           <label>节点Id</label>
 37 |           <Input
 38 |             disabled
 39 |             v-model="content.id"
 40 |             placeholder="Enter something..."
 41 |             style="width: 100%"
 42 |           />
 43 |         </li>
 44 |         <li>
 45 |           <label>节点类型</label>
 46 |           <Input
 47 |             disabled
 48 |             v-model="content.type"
 49 |             placeholder="Enter something..."
 50 |             style="width: 100%"
 51 |           />
 52 |         </li>
 53 |         <li>
 54 |           <label>节点名称</label>
 55 |           <Input
 56 |             v-model="content.name"
 57 |             placeholder="Enter something..."
 58 |             style="width: 100%"
 59 |           />
 60 |         </li>
 61 |       </ul>
 62 |     </div>
 63 |     <!-- 连线属性 -->
 64 |     <div v-else-if="type === 'link'">
 65 |       <ul>
 66 |         <li>
 67 |           <label>源节点Id</label>
 68 |           <Input
 69 |             disabled
 70 |             v-model="content.sourceId"
 71 |             placeholder="Enter something..."
 72 |             style="width: 100%"
 73 |           />
 74 |         </li>
 75 |         <li>
 76 |           <label>目标节点Id</label>
 77 |           <Input
 78 |             disabled
 79 |             v-model="content.targetId"
 80 |             placeholder="Enter something..."
 81 |             style="width: 100%"
 82 |           />
 83 |         </li>
 84 |         <li>
 85 |           <label>连线类型</label>
 86 |           <Input
 87 |             disabled
 88 |             v-model="content.connector"
 89 |             placeholder="Enter something..."
 90 |             style="width: 100%"
 91 |           />
 92 |         </li>
 93 |         <li>
 94 |           <label>文本注释</label>
 95 |           <Input
 96 |             v-model="content.label"
 97 |             placeholder="请输入注释内容..."
 98 |             style="width: 100%"
 99 |             @on-change="linkLabelChange"
100 |           />
101 |         </li>
102 |       </ul>
103 |     </div>
104 |     <!-- 基础属性 -->
105 |     <div v-else>
106 |       <ul>
107 |         <li>
108 |           <label>拓展图名称</label>
109 |           <Input
110 |             v-model="content.title"
111 |             placeholder="请输入内容..."
112 |             style="width: 100%"
113 |           />
114 |         </li>
115 |       </ul>
116 |     </div>
117 |   </aside>
118 | </template>
119 | 
120 | <script>
121 | export default {
122 |   name: "FlowAttr",
123 |   data() {
124 |     return {
125 |       content: {},
126 |       type: "",
127 |       jspInit: this.$store.state.jspInit,
128 |     };
129 |   },
130 |   computed: {
131 |     selectContent() {
132 |       return this.$store.state.selectContent;
133 |     },
134 |   },
135 |   watch: {
136 |     selectContent(data) {
137 |       this.content = data.data;
138 |       this.type = data.type;
139 |     },
140 |   },
141 |   mounted() {
142 |     this.content = this.$store.state.flowData;
143 |   },
144 |   methods: {
145 |     linkLabelChange(e) {
146 |       let label = e.target.value;
147 |       let conn = this.jspInit.getConnections({
148 |         source: this.content.sourceId,
149 |         target: this.content.targetId,
150 |       })[0];
151 |       if (label != "") {
152 |         conn.setLabel({
153 |           label: label,
154 |           cssClass: "link-label",
155 |         });
156 |       } else {
157 |         let labelOverlay = conn.getLabelOverlay();
158 |         if (labelOverlay) conn.removeOverlay(labelOverlay.id);
159 |       }
160 |     },
161 |   },
162 | };
163 | </script>
164 | 
165 | <style scoped lang="scss">
166 | aside {
167 |   padding: 20px;
168 |   ul {
169 |     list-style: none;
170 |     li {
171 |       margin-bottom: 25px;
172 |       > label {
173 |         display: block;
174 |         margin-bottom: 5px;
175 |       }
176 |     }
177 |   }
178 | }
179 | </style>
180 | 


--------------------------------------------------------------------------------
/src/components/modules/FlowNode.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <!-- @click.stop="handleSelectNode(node)" -->
  3 |   <div
  4 |     class="node-warp"
  5 |     @contextmenu.prevent.stop="$emit('context-menu', $event)"
  6 |     @mousedown="handlerMousedown(node)"
  7 |     @click.stop="handlerMouseUp(node)"
  8 |   >
  9 |     <div v-if="node.type === 'start-node'" class="item-node menu-start-node">
 10 |       {{ node.name }}
 11 |     </div>
 12 |     <div v-else-if="node.type === 'end-node'" class="item-node menu-end-node">
 13 |       {{ node.name }}
 14 |     </div>
 15 |     <div v-else-if="node.type === 'in-node'" class="item-node menu-in-node">
 16 |       {{ node.name }}
 17 |     </div>
 18 |     <div v-else-if="node.type === 'out-node'" class="item-node menu-out-node">
 19 |       {{ node.name }}
 20 |     </div>
 21 |     <div v-else-if="node.type === 'cog-node'" class="item-node menu-cog-node">
 22 |       <div>
 23 |         <Icon :type="node.icon" />
 24 |         <span> {{ node.name }}</span>
 25 |       </div>
 26 |       <p>相关配置内容</p>
 27 |     </div>
 28 |     <div v-else-if="node.type === 'codepen-node'" class="item-node menu-codepen-node">
 29 |       <div>
 30 |         <Icon :type="node.icon" />
 31 |         <span> {{ node.name }}</span>
 32 |       </div>
 33 |       <p>相关配置内容</p>
 34 |     </div>
 35 |     <div v-else-if="node.type === 'pulse-node'" class="item-node menu-pulse-node">
 36 |       <div>
 37 |         <div>
 38 |           <Icon :type="node.icon" /> <span> {{ node.name }}</span>
 39 |         </div>
 40 |         <Icon type="md-power" />
 41 |       </div>
 42 |       <p>
 43 |         <span>执行状态：正在监听...</span>
 44 |         <span>98%</span>
 45 |       </p>
 46 |     </div>
 47 |     <div v-else>此节点无效</div>
 48 |   </div>
 49 | </template>
 50 | <script>
 51 | export default {
 52 |   name: "menu-node",
 53 |   props: ["node"],
 54 |   mounted() {
 55 |     let jspInit = this.$store.state.jspInit;
 56 |     this.$nextTick(() => {
 57 |       jspInit.draggable(this.node.id);
 58 |     });
 59 |   },
 60 |   methods: {
 61 |     handlerMouseUp(node) {
 62 |       let nodeEle = document.getElementById(node.id);
 63 |       let { top, left } = nodeEle.style;
 64 |       let x = left.slice(0, left.length - 2) * 1;
 65 |       let y = top.slice(0, top.length - 2) * 1;
 66 |       if (node.x !== x && node.y !== y) {
 67 |         let flowData = this.$store.state.flowData;
 68 |         flowData.nodes.forEach((item) => {
 69 |           if (item.id === node.id) {
 70 |             item.x = x;
 71 |             item.y = y;
 72 |           }
 73 |         });
 74 |         this.$store.commit("setFlowStepData", flowData);
 75 |       }
 76 |     },
 77 |     handlerMousedown(node) {
 78 |       if (this.$store.state.flowMenuObj.type === "drag-drop") {
 79 |         document.getElementsByClassName("item-node").forEach((ele) => {
 80 |           ele.classList.remove("active");
 81 |         });
 82 |         let nodeEle = document.getElementById(node.id);
 83 |         nodeEle.getElementsByClassName("item-node")[0].classList.add("active");
 84 |         this.$store.commit("setSelectContent", { type: "node", data: node });
 85 |       }
 86 |     },
 87 |   },
 88 | };
 89 | </script>
 90 | 
 91 | <style scoped lang="scss">
 92 | .node-warp {
 93 |   position: absolute;
 94 |   user-select: none;
 95 |   > div {
 96 |     background: #abc7ff31;
 97 |     border: 1px solid #abc7ff;
 98 |   }
 99 |   .active {
100 |     border: 1px dashed #409eff;
101 |   }
102 |   i {
103 |     font-size: 16px;
104 |   }
105 | }
106 | .menu-start-node {
107 |   width: 100px;
108 |   padding: 12px 18px;
109 |   border-radius: 30px;
110 |   text-align: center;
111 | }
112 | .menu-end-node {
113 |   width: 100px;
114 |   padding: 12px 18px;
115 |   text-align: center;
116 | }
117 | .menu-in-node {
118 |   padding: 0;
119 |   width: 60px;
120 |   height: 60px;
121 |   text-align: center;
122 |   line-height: 60px;
123 | }
124 | .menu-out-node {
125 |   padding: 0;
126 |   width: 65px;
127 |   height: 65px;
128 |   border-radius: 100%;
129 |   line-height: 60px;
130 |   text-align: center;
131 | }
132 | 
133 | .menu-cog-node {
134 |   padding: 5px 10px;
135 |   width: 240px;
136 |   > div {
137 |     font-size: 14px;
138 |   }
139 |   > p {
140 |     font-size: 12px;
141 |     margin-top: 2px;
142 |     color: #999;
143 |   }
144 | }
145 | .menu-codepen-node {
146 |   width: 240px;
147 |   > div {
148 |     font-size: 14px;
149 |     padding: 8px;
150 |     background: cornflowerblue;
151 |     color: cornsilk;
152 |   }
153 |   > p {
154 |     padding: 10px;
155 |     font-size: 12px;
156 |     margin-top: 2px;
157 |     color: #999;
158 |   }
159 | }
160 | .menu-pulse-node {
161 |   width: 240px;
162 | 
163 |   > div {
164 |     font-size: 14px;
165 |     padding: 8px;
166 |     background: cornflowerblue;
167 |     color: cornsilk;
168 |     display: flex;
169 |     justify-content: space-between;
170 |     align-items: center;
171 |   }
172 |   > p {
173 |     padding: 10px;
174 |     font-size: 12px;
175 |     margin-top: 2px;
176 |     color: #999;
177 |     display: flex;
178 |     justify-content: space-between;
179 |   }
180 | }
181 | </style>
182 | 


--------------------------------------------------------------------------------
/src/components/FlowMenu.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <aside>
  3 |     <ul ref="flowMenu">
  4 |       <li v-for="(item, i) in menuList" :key="'key-' + i">
  5 |         <div class="menu-title">{{ item.name }}</div>
  6 |         <ol>
  7 |           <li
  8 |             v-for="(node, n) in item.child"
  9 |             :key="'key-' + n"
 10 |             @mousedown="handlerMousedown($event, node)"
 11 |           >
 12 |             <MenuNode :id="node.id" :node="node" />
 13 |           </li>
 14 |         </ol>
 15 |       </li>
 16 |     </ul>
 17 |   </aside>
 18 | </template>
 19 | <script>
 20 | import MenuNode from "./modules/MenuNode";
 21 | import { deepClone } from "@/utils";
 22 | export default {
 23 |   name: "FlowMenu",
 24 |   components: { MenuNode },
 25 |   data() {
 26 |     return {
 27 |       copyNode: null,
 28 |       nodePosition: {},
 29 |       nodeData: {},
 30 |       isAddNode: false,
 31 | 
 32 |       // node节点
 33 |       menuList: [
 34 |         {
 35 |           name: "基础节点",
 36 |           child: [
 37 |             {
 38 |               name: "起始节点",
 39 |               type: "start-node",
 40 |               id: "node-0",
 41 |             },
 42 |             {
 43 |               name: "终止节点",
 44 |               type: "end-node",
 45 |               id: "node-1",
 46 |             },
 47 |             {
 48 |               name: "输入",
 49 |               type: "in-node",
 50 |               id: "node-2",
 51 |             },
 52 |             {
 53 |               name: "输出",
 54 |               type: "out-node",
 55 |               id: "node-3",
 56 |             },
 57 |           ],
 58 |         },
 59 |         {
 60 |           name: "组合节点",
 61 |           child: [
 62 |             {
 63 |               name: "基础配置",
 64 |               type: "cog-node",
 65 |               icon: "md-cog",
 66 |               id: "node-4",
 67 |             },
 68 |             {
 69 |               name: "抽离模块",
 70 |               type: "codepen-node",
 71 |               icon: "md-cube",
 72 |               id: "node-5",
 73 |             },
 74 |             {
 75 |               name: "进程监听",
 76 |               type: "pulse-node",
 77 |               icon: "md-pulse",
 78 |               id: "node-6",
 79 |             },
 80 |           ],
 81 |         },
 82 |       ],
 83 |     };
 84 |   },
 85 |   mounted() {
 86 |     document.querySelector("#zll-index").onmousemove = (e) => {
 87 |       let event = e || window.event || event;
 88 |       if (this.copyNode) {
 89 |         let top = event.y - this.nodePosition.offsetY;
 90 |         let left = event.x - this.nodePosition.offsetX;
 91 | 
 92 |         this.copyNode.style.top = `${top}px`;
 93 |         this.copyNode.style.left = `${left}px`;
 94 | 
 95 |         // 菜单宽度
 96 |         let flowMenuWidth = this.$refs.flowMenu.offsetWidth;
 97 |         this.isAddNode = left - this.copyStyleLeft > flowMenuWidth ? true : false;
 98 |       }
 99 |     };
100 |     document.querySelector("#zll-index").onmouseup = (e) => {
101 |       let event = e || window.event || event;
102 |       // this.$store.commit("setNewNode", { state: false });
103 |       if (this.copyNode) {
104 |         this.copyNode.remove();
105 |         this.copyNode = null;
106 |         this.$store.commit("setNewNode", {
107 |           state: this.isAddNode,
108 |           node: this.nodeData,
109 |         });
110 |         this.$emit("on-is-add-node", this.isAddNode);
111 |       }
112 |     };
113 |   },
114 |   methods: {
115 |     handlerMousedown(e, item) {
116 |       let event = e || window.event || event;
117 |       let nodeEle = document.getElementById(item.id);
118 |       let { left, top } = nodeEle.getBoundingClientRect();
119 | 
120 |       this.nodeData = Object.assign(deepClone(item), {
121 |         x: event.clientX - left,
122 |         y: event.clientY - top,
123 |       });
124 |       this.nodePosition = {
125 |         offsetX: event.x - left,
126 |         offsetY: event.y - top,
127 |       };
128 |       this.copyNode = nodeEle.cloneNode(true);
129 |       this.copyNode.className += " copy";
130 | 
131 |       let y = event.y - this.nodePosition.offsetY;
132 |       let x = event.x - this.nodePosition.offsetX;
133 |       this.copyNode.style.top = `${y}px`;
134 |       this.copyNode.style.left = `${x}px`;
135 |       this.copyNode.style.borderBottom = 0;
136 |       this.copyStyleLeft = x;
137 |       nodeEle.parentNode.appendChild(this.copyNode);
138 |     },
139 |   },
140 | };
141 | </script>
142 | 
143 | <style scoped lang="scss">
144 | aside {
145 |   padding: 0px;
146 |   > ul {
147 |     list-style: none;
148 |     > li {
149 |       margin-bottom: 10px;
150 |       font-size: 12px;
151 |       .menu-title {
152 |         width: 100%;
153 |         padding: 10px;
154 |         margin-bottom: 10px;
155 |         border-top: 1px solid #eee;
156 |         border-bottom: 1px solid #eee;
157 |         margin-top: 10px;
158 |         font-size: 14px;
159 |       }
160 |       > ol {
161 |         list-style: none;
162 |         display: flex;
163 |         flex-wrap: wrap;
164 |         .copy {
165 |           position: fixed;
166 |           z-index: 1;
167 |           opacity: 0.5;
168 |         }
169 |         > li {
170 |           margin: 10px 20px;
171 |           > div {
172 |             //
173 |             cursor: move;
174 |             display: flex;
175 |             justify-content: center;
176 |             align-items: center;
177 |           }
178 |         }
179 |       }
180 |     }
181 |   }
182 | }
183 | </style>
184 | 


--------------------------------------------------------------------------------
/src/store/index.js:
--------------------------------------------------------------------------------
  1 | import { deepClone } from "@/utils";
  2 | import Vue from 'vue'
  3 | import Vuex from 'vuex'
  4 | Vue.use(Vuex)
  5 | let storeData = {
  6 |   state: {
  7 |     jspInit: null,
  8 |     flowMenuObj: {
  9 |       type: 'drag-drop',
 10 |       connector: 'Bezier'
 11 |     },
 12 |     // flowData:{ "offsetX": -2993, "offsetY": -2991,nodes:[],links:[]},
 13 |     flowData: { "offsetX": -2993, "offsetY": -2991, "title": "数据处理流程图", "nodes": [{ "name": "终止节点", "type": "end-node", "id": "03b711a6-e730-7dc4", "x": 3369, "y": 3237 }, { "name": "输出", "type": "out-node", "id": "2f2f5c9c-effb-9846", "x": 4062, "y": 3233 }, { "name": "起始节点", "type": "start-node", "id": "efa686eb-c07b-4d92", "x": 3683, "y": 3088 }, { "name": "输入", "type": "in-node", "id": "5dbc5113-c54a-c119", "x": 3091, "y": 3302 }, { "name": "基础配置", "type": "cog-node", "icon": "md-cog", "id": "008a6541-ccfc-03b5", "x": 3548, "y": 3693 }, { "name": "抽离模块", "type": "codepen-node", "icon": "md-cube", "id": "9b593548-5b94-220c", "x": 3041, "y": 3567 }, { "name": "进程监听", "type": "pulse-node", "icon": "md-pulse", "id": "d59a2dbd-140a-80ff", "x": 4030, "y": 3536 }, { "name": "输出", "type": "out-node", "id": "7a42861e-6e6b-ad35", "x": 4213, "y": 3091 }, { "name": "抽离模块", "type": "codepen-node", "icon": "md-cube", "id": "b7184cb9-95ca-3b77", "x": 3580, "y": 3381 }, { "name": "进程监听", "type": "pulse-node", "icon": "md-pulse", "id": "c00fb55c-2ebf-22d6", "x": 3102, "y": 3072 }], "links": [{ "id": "93525b44-b67d-b02c", "connector": "Flowchart", "sourceId": "03b711a6-e730-7dc4", "targetId": "5dbc5113-c54a-c119" }, { "id": "dfbdad0e-baf2-45ae", "connector": "Flowchart", "sourceId": "03b711a6-e730-7dc4", "targetId": "efa686eb-c07b-4d92" }, { "id": "5b75278a-ce70-1339", "connector": "Flowchart", "sourceId": "efa686eb-c07b-4d92", "targetId": "2f2f5c9c-effb-9846" }, { "id": "8b78c9ed-b270-b66a", "connector": "Bezier", "sourceId": "03b711a6-e730-7dc4", "targetId": "9b593548-5b94-220c", "label": "开发" }, { "id": "ea20501e-c11a-7639", "connector": "Bezier", "sourceId": "2f2f5c9c-effb-9846", "targetId": "d59a2dbd-140a-80ff" }, { "id": "4d63a745-f096-f3dc", "connector": "Straight", "sourceId": "2f2f5c9c-effb-9846", "targetId": "008a6541-ccfc-03b5" }, { "id": "f3706e5b-404b-3552", "connector": "Straight", "sourceId": "03b711a6-e730-7dc4", "targetId": "008a6541-ccfc-03b5" }, { "id": "e5bb1821-f195-d534", "connector": "Flowchart", "sourceId": "008a6541-ccfc-03b5", "targetId": "d59a2dbd-140a-80ff" }, { "id": "3629f98f-fa50-a83e", "connector": "Flowchart", "sourceId": "9b593548-5b94-220c", "targetId": "008a6541-ccfc-03b5" }, { "id": "ad71eb33-0dea-8661", "connector": "Flowchart", "sourceId": "7a42861e-6e6b-ad35", "targetId": "d59a2dbd-140a-80ff" }, { "id": "16d48ac7-bfc8-c9ae", "connector": "Bezier", "sourceId": "7a42861e-6e6b-ad35", "targetId": "2f2f5c9c-effb-9846" }, { "id": "cb69aad0-5126-7b18", "connector": "Bezier", "sourceId": "efa686eb-c07b-4d92", "targetId": "b7184cb9-95ca-3b77" }, { "id": "e3e31972-0274-1e76", "connector": "Bezier", "sourceId": "b7184cb9-95ca-3b77", "targetId": "2f2f5c9c-effb-9846" }, { "id": "871a35d1-408d-baef", "connector": "Bezier", "sourceId": "b7184cb9-95ca-3b77", "targetId": "008a6541-ccfc-03b5" }, { "id": "b0ec12a6-1089-088d", "connector": "Bezier", "sourceId": "b7184cb9-95ca-3b77", "targetId": "03b711a6-e730-7dc4" }, { "id": "71032d91-8f54-91ec", "connector": "Bezier", "sourceId": "b7184cb9-95ca-3b77", "targetId": "b7184cb9-95ca-3b77" }, { "id": "59a2af00-5710-ce4e", "connector": "Bezier", "sourceId": "d59a2dbd-140a-80ff", "targetId": "d59a2dbd-140a-80ff" }, { "id": "ffb1c9ef-0ccb-874b", "connector": "Flowchart", "sourceId": "03b711a6-e730-7dc4", "targetId": "c00fb55c-2ebf-22d6" }] },
 14 |     // 添加新节点
 15 |     newNode: {
 16 |       state: false,
 17 |       node: {}
 18 |     },
 19 |     //选中的节点、连线数据
 20 |     selectContent: {
 21 |       type: "",
 22 |       data: {}
 23 |     },
 24 |     //步骤缓存
 25 |     flowStepData: [],
 26 |     stepIndex: 0,
 27 |   },
 28 |   mutations: {
 29 |     setSelectContent(state, data) {
 30 |       state.selectContent = {
 31 |         type: data.type ? data.type : '',
 32 |         data: data.data ? data.data : ''
 33 |       };
 34 |     },
 35 |     setJspInit(state, data) {
 36 |       state.jspInit = data;
 37 |     },
 38 |     setFlowData(state, dataObj) {
 39 |       let data = deepClone(dataObj)
 40 |       if (data.method) {
 41 |         if (data.method === "add-node") {
 42 |           state.flowData.nodes.push(data.node);
 43 |           storeData.mutations.setFlowStepData(state, state.flowData);
 44 |         } else if (data.method === "delete-node") {
 45 |           let nodes = state.flowData.nodes.filter(node => data.node.id !== node.id)
 46 |           let links = state.flowData.links.filter(link => {
 47 |             if (link.sourceId === data.node.id || link.targetId === data.node.id) {
 48 |               return false
 49 |             }
 50 |             return true
 51 |           });
 52 |           state.flowData = { ...state.flowData, ...{ nodes, links } };
 53 |           storeData.mutations.setFlowStepData(state, state.flowData);
 54 |         } else if (data.method === "add-link") {
 55 |           state.flowData.links.push(data.link);
 56 |           storeData.mutations.setFlowStepData(state, state.flowData);
 57 |         } else if (data.method === "delete-link") {
 58 |           state.flowData.links = state.flowData.links.filter(item => {
 59 |             if (((item.sourceId === data.link.sourceId) && (item.targetId === data.link.targetId)) || ((item.sourceId === data.link.targetId) && (item.targetId === data.link.sourceId))) {
 60 |               return false
 61 |             }
 62 |             return true;
 63 |           })
 64 |           storeData.mutations.setFlowStepData(state, state.flowData);
 65 |         } else if (data.method === "all-update") {
 66 |           state.flowData = data.data
 67 |           state.flowStepData = [];
 68 |           state.stepIndex = 0;
 69 |           storeData.mutations.setFlowStepData(state, state.flowData);
 70 |         }
 71 |       } else {
 72 |         state.flowData = { ...state.flowData, ...data };
 73 |       }
 74 | 
 75 |       sessionStorage.setItem("flowData", JSON.stringify(state.flowData));
 76 |       console.log(state.flowData);
 77 |     },
 78 |     setFlowMenuObj(state, data) {
 79 |       state.flowMenuObj = {
 80 |         type: data.type,
 81 |         connector: data.connector
 82 |       };
 83 |     },
 84 |     setNewNode(state, data) {
 85 |       if (data.state) {
 86 |         state.newNode.state = data.state;
 87 |       } else {
 88 |         state.newNode.state = false
 89 |       }
 90 |       if (data.node) {
 91 |         state.newNode.node = data.node;
 92 |       }
 93 |     },
 94 |     // 缓存flow步骤
 95 |     setFlowStepData(state, data) {
 96 |       if (!data) {
 97 |         state.flowStepData = [];
 98 |         state.stepIndex = 0;
 99 |       } else {
100 |         let newArr = deepClone(state.flowStepData.slice(0, state.stepIndex + 1))
101 |         newArr.push(deepClone(data));
102 |         state.flowStepData = newArr;
103 |         state.stepIndex = newArr.length - 1
104 |       }
105 |     },
106 |     setStepIndex(state, i) {
107 |       state.stepIndex = i;
108 |     },
109 |   },
110 |   actions: {
111 |   },
112 |   modules: {
113 |   }
114 | };
115 | 
116 | export default new Vuex.Store(storeData);
117 | 


--------------------------------------------------------------------------------
/src/components/modules/FlowArea.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="flow-area">
  3 |     <flow-node
  4 |       v-for="(node, i) in nodes"
  5 |       :key="'node' + i"
  6 |       :id="node.id"
  7 |       :node="node"
  8 |       :style="{ top: node.y + 'px', left: node.x + 'px', cursor }"
  9 |       @context-menu="$emit('context-menu', { type: 'node', event: $event, data: node })"
 10 |     >
 11 |     </flow-node>
 12 |   </div>
 13 | </template>
 14 | 
 15 | <script>
 16 | import FlowNode from "./FlowNode";
 17 | import { jsPlumbConfig, flowAnchor, nodePrame, linkPrame } from "@/config/flow.config.js";
 18 | import { getUUID } from "@/utils";
 19 | export default {
 20 |   name: "FlowArea",
 21 |   components: { FlowNode },
 22 |   data() {
 23 |     return {
 24 |       jspInit: null,
 25 |       nodes: [],
 26 |       cursor: "move",
 27 |       connector: "",
 28 |     };
 29 |   },
 30 |   created() {
 31 |     this.jspInit = this.$store.state.jspInit;
 32 |   },
 33 |   methods: {
 34 |     toggleDraggable(flowMenuObj) {
 35 |       if (flowMenuObj && flowMenuObj.type === "connection") {
 36 |         this.cursor = "crosshair";
 37 |         this.nodes.forEach((node, index) => {
 38 |           let f = this.jspInit.toggleDraggable(node.id);
 39 |           if (f) {
 40 |             this.jspInit.toggleDraggable(node.id);
 41 |           }
 42 |           let config = { ...jsPlumbConfig, ...{ anchor: flowAnchor } };
 43 |           this.jspInit.unmakeSource(node.id);
 44 |           this.jspInit.unmakeTarget(node.id);
 45 |           this.connector = flowMenuObj.connector;
 46 |           config.connector = [this.connector];
 47 |           this.jspInit.makeSource(node.id, config);
 48 |           this.jspInit.makeTarget(node.id, config);
 49 |         });
 50 |       } else {
 51 |         this.cursor = "move";
 52 |         this.nodes.forEach((node, index) => {
 53 |           let f = this.jspInit.toggleDraggable(node.id);
 54 |           if (!f) {
 55 |             this.jspInit.toggleDraggable(node.id);
 56 |           }
 57 |           this.jspInit.unmakeSource(node.id);
 58 |           this.jspInit.unmakeTarget(node.id);
 59 |         });
 60 |       }
 61 |     },
 62 |     initFlowCanvas(data) {
 63 |       let { nodes, links } = data ? data : this.$store.state.flowData;
 64 |       this.nodes = nodes;
 65 |       this.jspInit.deleteEveryEndpoint();
 66 |       this.jspInit.deleteEveryConnection();
 67 |       this.$nextTick(() => {
 68 |         links.forEach((link, index) => {
 69 |           let jsPConnect = this.jspInit.connect(
 70 |             {
 71 |               source: link.sourceId,
 72 |               target: link.targetId,
 73 |             },
 74 |             {
 75 |               isSource: jsPlumbConfig.isSource, // 是否可以拖动（作为连线起点）
 76 |               isTarget: jsPlumbConfig.isTarget, // 是否可以放置（连线终点）
 77 |               //连线的样式
 78 |               paintStyle: jsPlumbConfig.connectorStyle, //连线的样式
 79 |               hoverPaintStyle: jsPlumbConfig.connectorHoverStyle,
 80 | 
 81 |               //  锚点
 82 |               endpoint: jsPlumbConfig.endpoints,
 83 |               endpointStyle: jsPlumbConfig.paintStyle,
 84 |               endpointHoverStyle: jsPlumbConfig.hoverPaintStyle,
 85 | 
 86 |               connector: link.connector ? link.connector : jsPlumbConfig.connector,
 87 |               anchor: flowAnchor,
 88 |               overlays: jsPlumbConfig.connectorOverlays,
 89 |             }
 90 |           );
 91 |           if (link.label) {
 92 |             jsPConnect.setLabel({
 93 |               label: link.label,
 94 |               cssClass: "link-label",
 95 |               // events: {
 96 |               //   click: (labelOverlay, originalEvent) => {
 97 |               //     console.log("点击了label");
 98 |               //   },
 99 |               // },
100 |             });
101 |           }
102 |           // this.initConnection(jsPConnect, link);
103 |         });
104 |       });
105 | 
106 |       this.jspInit.bind("connection", (conn, e) => {
107 |         let connection = this.jspInit.getConnections({
108 |           source: conn.sourceId,
109 |           target: conn.targetId,
110 |         })[0];
111 |         this.initConnection(connection, conn);
112 |         this.addConnection(conn);
113 |       });
114 |       //  连线右击事件操作
115 |       this.jspInit.bind("contextmenu", (conn, originalEvent) => {
116 |         this.$emit("context-menu", {
117 |           type: "link",
118 |           event: originalEvent,
119 |           data: conn,
120 |         });
121 |         originalEvent.stopPropagation();
122 |         originalEvent.preventDefault();
123 |         return false;
124 |       });
125 |     },
126 | 
127 |     handleNewNode(mark, position) {
128 |       let node = this.$store.state.newNode.node;
129 |       if (mark === "paste") {
130 |         this.addNewNode(
131 |           Object.assign(node, {
132 |             id: getUUID(),
133 |             x: position.x,
134 |             y: position.y,
135 |           })
136 |         );
137 |       } else if (mark === "drag") {
138 |         this.addNewNode(
139 |           Object.assign(node, {
140 |             id: getUUID(),
141 |             x: position.x - node.x,
142 |             y: position.y - node.y,
143 |           })
144 |         );
145 |       }
146 |     },
147 | 
148 |     // 添加节点
149 |     addNewNode(newNode) {
150 |       this.$store.commit("setFlowData", { method: "add-node", node: newNode });
151 |       this.nodes = newNode;
152 |       this.initFlowCanvas();
153 |       this.$store.commit("setNewNode", {
154 |         state: false,
155 |         node: this.$store.state.newNode.node,
156 |       });
157 |     },
158 |     // 删除节点
159 |     deleteNode(node) {
160 |       this.$store.commit("setFlowData", { method: "delete-node", node });
161 |       this.initFlowCanvas();
162 |     },
163 |     addConnection(conn) {
164 |       let isExist = this.$store.state.flowData.links.findIndex((item) => {
165 |         return item.sourceId === conn.sourceId && item.targetId === conn.targetId;
166 |       });
167 |       if (isExist < 0) {
168 |         this.$store.commit("setFlowData", {
169 |           method: "add-link",
170 |           link: Object.assign(
171 |             {
172 |               id: getUUID(),
173 |               connector: this.connector,
174 |               sourceId: conn.sourceId,
175 |               targetId: conn.targetId,
176 |             },
177 |             linkPrame
178 |           ),
179 |         });
180 |       }
181 |     },
182 |     initConnection(jsPConnect, link) {
183 |       jsPConnect.bind("click", (conn, originalEvent) => {
184 |         let links = this.$store.state.flowData.links;
185 |         this.$store.commit("setSelectContent", {
186 |           type: "link",
187 |           data: links.find((item) => {
188 |             return item.sourceId === link.sourceId && item.targetId === link.targetId;
189 |           }),
190 |         });
191 |         originalEvent.stopPropagation();
192 |         originalEvent.preventDefault();
193 |         return false;
194 |       });
195 |     },
196 |     deleteConnection(conn) {
197 |       let plumb = this.jspInit.deleteConnection(conn);
198 |       if (plumb) {
199 |         this.$store.commit("setFlowData", {
200 |           method: "delete-link",
201 |           link: { sourceId: conn.sourceId, targetId: conn.targetId },
202 |         });
203 |       }
204 |     },
205 |   },
206 |   beforeDestroy() {
207 |     this.jspInit.deleteEveryEndpoint();
208 |     this.jspInit.deleteEveryConnection();
209 |     // this.jspInit.unmakeEverySource();
210 |     // this.jspInit.unmakeEveryTarget();
211 |     // this.jspInit.unbind("click");
212 |     // this.jspInit.unbind("contextmenu");
213 |     // this.jspInit.unbind("connection");
214 |     this.jspInit = null;
215 |   },
216 | };
217 | </script>
218 | 
219 | <style scoped lang="scss">
220 | .flow-area {
221 |   width: 100%;
222 |   height: 100%;
223 |   position: relative;
224 |   z-index: 10;
225 | }
226 | </style>
227 | 


--------------------------------------------------------------------------------
/src/config/icon.config.js:
--------------------------------------------------------------------------------
 1 | export const FlowchartSvg = (color) => {
 2 | 	return `<svg t="1610846830563" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2235" width="20" height="20"><path d="M365.9264 402.1248a76.4928 76.4928 0 0 1-59.8528 2.7136L142.848 600.7296a76.8 76.8 0 1 1-39.3216-32.768L266.752 372.0704a76.8 76.8 0 1 1 135.3216-6.144l204.8 204.8a76.4928 76.4928 0 0 1 63.1808-1.4336l183.7568-200.3968a76.8 76.8 0 1 1 37.7344 34.6112l-183.7568 200.3968a76.8 76.8 0 1 1-137.1136 2.9696l-204.8-204.8z" p-id="2236" fill="${color}"></path></svg>`
 3 | };
 4 | 
 5 | export const StraightSvg = (color) => {
 6 | 	return `<svg t="1610848615356" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6632" width="20" height="20"><path d="M158.72 749.568c0 39.936 21.504 76.8 56.32 97.28s77.824 20.48 112.64 0c34.816-20.48 56.32-57.344 56.32-97.28 0-62.464-50.176-112.64-112.64-112.64s-112.64 51.2-112.64 112.64z m0 0" fill="${color}" p-id="6633"></path><path d="M672.768 257.024c0 39.936 21.504 76.8 56.32 97.28s77.824 20.48 112.64 0c34.816-20.48 56.32-57.344 56.32-97.28 0-62.464-50.176-112.64-112.64-112.64-61.44 0-112.64 50.176-112.64 112.64z m0 0" fill="${color}" p-id="6634"></path><path d="M278.528 707.584l484.352-473.088 45.056 46.08-484.352 472.064-45.056-45.056z m0 0" fill="${color}" p-id="6635"></path></svg>`
 7 | };
 8 | 
 9 | 
10 | export const StateMachineSvg = (color) => {
11 | 	return `<svg t="1610847106350" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4777" width="20" height="20"><path d="M917.333333 590.222222c0-4.266667-1.422222-7.111111-2.844444-9.955555C860.444444 408.177778 701.155556 284.444444 513.422222 284.444444c-193.422222 0-354.133333 129.422222-403.911111 305.777778v5.688889c0 15.644444 12.8 29.866667 29.866667 29.866667 14.222222 0 27.022222-11.377778 28.444444-24.177778 42.666667-152.177778 182.044444-264.533333 348.444445-264.533333 164.977778 0 302.933333 110.933333 347.022222 260.266666 0 14.222222 12.8 27.022222 27.022222 27.022223 11.377778 0 21.333333-7.111111 25.6-18.488889 0-1.422222 1.422222-2.844444 1.422222-4.266667v-5.688889-5.688889z m-140.8-179.2c-1.422222 0-1.422222 0 0 0-1.422222 0-1.422222 0 0 0z" fill="${color}" p-id="4778"></path></svg>`
12 | };
13 | 
14 | export const BezierSvg = (color) => {
15 | 	return `<svg t="1610847357529" class="icon" viewBox="0 0 1154 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="19039" width="20" height="20"><path d="M922.46427699 276.388489c1.841727 26.028777 4.143885 78.661871-0.920864 134.388489-6.100719 67.625899-24.28777 153.956835-76.258993 181.611511-52.374101 27.870504-139.395683-7.597122-251.798561-102.489208-66.18705-55.856115-126.043165-92.820144-177.597122-109.755396-50.359712-16.460432-94.733813-14.964029-131.899281 4.604316-61.697842 32.47482-99.280576 111.467626-111.294964 234.920864a949.294964 949.294964 0 0 0-3.223021 128.47482h57.553957a897.453237 897.453237 0 0 1 3.035971-122.820144c7.021583-70.820144 26.57554-161.223022 80.805755-189.669065 52.143885-27.338129 137.079137 6.561151 245.741007 98.230216 68.374101 57.697842 129.726619 95.928058 182.431655 113.438849 51.223022 17.165468 96.115108 15.654676 133.52518-4.143885 60.086331-31.899281 95.884892-108.705036 106.57554-228.129496 5.064748-57.007194 3.107914-109.625899 1.266187-138.647482z" fill="${color}" p-id="19040"></path><path d="M231.50024799 752.460432h-66.187051l-0.172661-4.143885a955.107914 955.107914 0 0 1 3.352518-129.007194c12.230216-124.892086 50.446043-205.079137 113.582733-238.316547 38.201439-20.143885 83.71223-21.769784 135.251799-4.892087 52.18705 17.136691 112.417266 54.330935 179.05036 110.546763 110.892086 93.669065 196.273381 128.935252 246.920863 101.985612 27.741007-14.820144 63.021583-57.755396 73.942446-178.244605 5.079137-55.856115 2.748201-107.741007 0.920863-133.697842l-0.330935-4.618705h66.589928l0.258993 4.043166a942.014388 942.014388 0 0 1-1.280576 139.309352c-10.892086 121.064748-47.482014 198.906475-108.863309 231.553957-38.604317 20.446043-84.676259 21.928058-136.920863 4.431655-53.05036-17.611511-114.906475-56.115108-183.841727-114.230216-107.194245-90.431655-190.503597-124.215827-240.94964-97.71223-52.359712 27.467626-71.597122 116.446043-78.517986 186.273381a889.52518 889.52518 0 0 0-2.978417 122.158274z m-57.899281-8.633094h48.920864a894.244604 894.244604 0 0 1 3.223021-118.935252c7.194245-71.942446 27.338129-163.81295 83.093525-193.064748 53.798561-28.273381 140.431655 5.870504 250.532374 98.748202 68.100719 57.467626 129.007194 95.366906 181.007195 112.633093 49.928058 16.733813 93.71223 15.42446 130.143885-3.856115 58.633094-31.136691 93.726619-106.733813 104.302158-224.705036a929.798561 929.798561 0 0 0 1.438849-133.956835H927.08298199a870.100719 870.100719 0 0 1-1.23741 130.460432c-6.18705 68.647482-24.834532 156.47482-78.460432 185.021583-12.143885 6.460432-26.043165 9.669065-41.582734 9.669065-53.597122 0-126.733813-38.158273-214.94964-112.676259-65.827338-55.482014-125.064748-92.129496-176.187051-108.920864-49.23741-16.115108-92.489209-14.661871-128.546762 4.316547-60.374101 31.81295-97.093525 109.71223-109.007194 231.52518a942.791367 942.791367 0 0 0-3.482015 123.741007z" fill="${color}" p-id="19041"></path><path d="M952.83837699 310.877698a123.741007 123.741007 0 1 1 123.741007-123.741007 123.899281 123.899281 0 0 1-123.741007 123.741007zM952.83837699 106.460432a80.57554 80.57554 0 1 0 80.57554 80.575539 80.690647 80.690647 0 0 0-80.57554-80.618705z" fill="${color}" p-id="19042"></path><path d="M197.44269399 968.431655a123.741007 123.741007 0 1 1 123.741007-123.741008 123.913669 123.913669 0 0 1-123.741007 123.741008zM197.44269399 764.014388a80.57554 80.57554 0 1 0 80.575539 80.57554 80.690647 80.690647 0 0 0-80.575539-80.618705z" fill="${color}" p-id="19043"></path></svg>`
16 | };
17 | export const EnlargeSvg = (color) => {
18 | 	return `<svg t="1611837499368" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1176" width="16" height="16"><path d="M945.159 867.61l-206.543-206.538c49.578-63.772 79.108-143.903 79.108-230.953 0-207.97-168.58-376.547-376.639-376.547-207.97 0-376.547 168.577-376.547 376.547 0 208.038 168.577 376.614 376.547 376.614 87.059 0 167.197-29.532 230.973-79.108l206.543 206.544c9.171 9.17 21.227 13.802 33.278 13.802s24.106-4.629 33.28-13.802c18.431-18.43 18.431-48.215 0-66.559v0zM158.701 430.119c0-155.737 126.65-282.39 282.39-282.39 155.826 0 282.477 126.65 282.477 282.39 0 155.805-126.65 282.458-282.477 282.458-155.739 0-282.39-126.65-282.39-282.458v0z" p-id="1177" fill="${color}"></path><path d="M579.708 389.853h-98.352v-98.352c0-22.272-17.991-40.268-40.268-40.352-22.185 0.086-40.267 18.078-40.267 40.352v98.352h-98.352c-22.272 0-40.268 17.991-40.268 40.179 0 22.272 17.991 40.352 40.268 40.352h98.352v98.352c0 22.252 18.080 40.246 40.267 40.333 22.274-0.086 40.268-18.080 40.268-40.333v-98.352h98.352c22.272 0 40.355-18.079 40.267-40.352 0-22.187-17.991-40.179-40.267-40.179v0z" p-id="1178" fill="${color}"></path></svg>`
19 | };
20 | 
21 | export const NarrowSvg = (color) => {
22 | 	return `<svg t="1611837834728" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2025" width="16" height="16"><path d="M951.643 877.547l-210.337-210.335c50.487-64.946 80.56-146.547 80.56-235.199 0-211.793-171.681-383.472-383.563-383.472-211.792 0-383.471 171.679-383.471 383.472 0 211.862 171.679 383.538 383.471 383.538 88.661 0 170.271-30.075 235.218-80.56l210.337 210.339c9.34 9.339 21.614 14.055 33.89 14.055s24.551-4.716 33.892-14.055c18.77-18.77 18.77-49.101 0-67.781v0zM150.725 432.011c0-158.601 128.978-287.58 287.58-287.58 158.691 0 287.671 128.978 287.671 287.58 0 158.668-128.978 287.651-287.671 287.651-158.601 0-287.58-128.978-287.58-287.651v0z" p-id="2026" fill="${color}"></path><path d="M397.297 391.004h-100.16c-22.683 0-41.008 18.324-41.008 40.919 0 22.683 18.324 41.094 41.008 41.094h282.333c22.683 0 41.095-18.412 41.007-41.094 0-22.595-18.324-40.919-41.007-40.919v0h-182.173z" p-id="2027" fill="${color}"></path></svg>`
23 | };


--------------------------------------------------------------------------------
/src/components/modules/HeaderOperate.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="operate-menu">
  3 |     <ul class="left">
  4 |       <li
  5 |         @click.stop="handleMiddleMenu('upper-step')"
  6 |         :class="[middleSelectType === 'upper-step' ? 'active' : '']"
  7 |       >
  8 |         <Tooltip content="上一步" placement="bottom">
  9 |           <Icon type="ios-undo" />
 10 |         </Tooltip>
 11 |       </li>
 12 |       <li
 13 |         @click.stop="handleMiddleMenu('next-step')"
 14 |         :class="[middleSelectType === 'next-step' ? 'active' : '']"
 15 |       >
 16 |         <Tooltip content="下一步" placement="bottom">
 17 |           <Icon type="ios-redo" />
 18 |         </Tooltip>
 19 |       </li>
 20 |       <li
 21 |         @click.stop="handleMiddleMenu('drag-drop')"
 22 |         :class="[middleSelectType === 'drag-drop' ? 'active' : '']"
 23 |       >
 24 |         <Tooltip content="拖拽" placement="bottom">
 25 |           <Icon type="md-move" />
 26 |         </Tooltip>
 27 |       </li>
 28 |       <li>
 29 |         <Dropdown trigger="click">
 30 |           <!-- <Icon type="md-git-network" /> -->
 31 |           <div class="svg-icon" v-html="selectLineSvg"></div>
 32 |           <DropdownMenu slot="list">
 33 |             <DropdownItem @click.stop.native="handleMiddleMenu('connection', 'Bezier')">
 34 |               <div class="svg-icon" v-html="BezierSvg"></div
 35 |             ></DropdownItem>
 36 |             <DropdownItem @click.stop.native="handleMiddleMenu('connection', 'Flowchart')">
 37 |               <div class="svg-icon" v-html="FlowchartSvg"></div
 38 |             ></DropdownItem>
 39 |             <DropdownItem @click.stop.native="handleMiddleMenu('connection', 'Straight')">
 40 |               <div class="svg-icon" v-html="StraightSvg"></div
 41 |             ></DropdownItem>
 42 |             <DropdownItem @click.stop.native="handleMiddleMenu('connection', 'StateMachine')">
 43 |               <div class="svg-icon" v-html="StateMachineSvg"></div
 44 |             ></DropdownItem>
 45 |           </DropdownMenu>
 46 |         </Dropdown>
 47 |       </li>
 48 |       <li @click.stop="handleMiddleMenu('enlarge')">
 49 |         <Tooltip content="放大" placement="bottom">
 50 |           <div class="svg-icon" v-html="EnlargeSvg"></div>
 51 |         </Tooltip>
 52 |       </li>
 53 |       <li @click.stop="handleMiddleMenu('narrow')">
 54 |         <Tooltip content="缩小" placement="bottom">
 55 |           <div class="svg-icon" v-html="NarrowSvg"></div>
 56 |         </Tooltip>
 57 |       </li>
 58 |     </ul>
 59 |     <ul class="right">
 60 |       <li
 61 |         @click.stop="handleMiddleMenu('import')"
 62 |         :class="[middleSelectType === 'import' ? 'active' : '']"
 63 |       >
 64 |         <Tooltip content="导入工作流" placement="bottom">
 65 |           <Icon type="ios-cloud-upload-outline" />
 66 |         </Tooltip>
 67 |       </li>
 68 |       <li
 69 |         @click.stop="handleMiddleMenu('export')"
 70 |         :class="[middleSelectType === 'export' ? 'active' : '']"
 71 |       >
 72 |         <Tooltip content="导出工作流" placement="bottom">
 73 |           <Icon type="ios-cloud-download-outline" />
 74 |         </Tooltip>
 75 |       </li>
 76 |       <li
 77 |         @click.stop="handleMiddleMenu('restore')"
 78 |         :class="[middleSelectType === 'restore' ? 'active' : '']"
 79 |       >
 80 |         <Tooltip content="还原视图" placement="bottom">
 81 |           <Icon type="md-locate" />
 82 |         </Tooltip>
 83 |       </li>
 84 |       <li
 85 |         @click.stop="handleMiddleMenu('view-code')"
 86 |         :class="[middleSelectType === 'view-code' ? 'active' : '']"
 87 |       >
 88 |         <Tooltip content="查看Json数据" placement="bottom">
 89 |           <Icon type="md-code-working" />
 90 |         </Tooltip>
 91 |       </li>
 92 |       <li
 93 |         @click.stop="handleMiddleMenu('reset')"
 94 |         :class="[middleSelectType === 'reset' ? 'active' : '']"
 95 |       >
 96 |         <Tooltip content="重置" placement="bottom">
 97 |           <Icon type="md-refresh-circle" />
 98 |         </Tooltip>
 99 |       </li>
100 |       <li
101 |         @click.stop="handleMiddleMenu('save')"
102 |         :class="[middleSelectType === 'save' ? 'active' : '']"
103 |       >
104 |         <Tooltip content="保存画布" placement="bottom">
105 |           <Icon type="md-filing" />
106 |         </Tooltip>
107 |       </li>
108 |       <li
109 |         @click.stop="handleMiddleMenu('clear')"
110 |         :class="[middleSelectType === 'clear' ? 'active' : '']"
111 |       >
112 |         <Tooltip content="清空画布" placement="bottom">
113 |           <Icon type="ios-trash" />
114 |         </Tooltip>
115 |       </li>
116 |     </ul>
117 |   </div>
118 | </template>
119 | <script>
120 | import {
121 |   BezierSvg,
122 |   FlowchartSvg,
123 |   StraightSvg,
124 |   StateMachineSvg,
125 |   EnlargeSvg,
126 |   NarrowSvg,
127 | } from "@/config/icon.config";
128 | export default {
129 |   name: "operate-menu",
130 |   data() {
131 |     return {
132 |       // color: "#707070",
133 |       BezierSvg: "",
134 |       FlowchartSvg: "",
135 |       StateMachineSvg: "",
136 |       EnlargeSvg: "",
137 |       NarrowSvg: "",
138 |       StraightSvg: "",
139 |       middleSelectType: "drag-drop", //操作类型
140 |       selectLineSvg: "", //连接线的样式
141 |       connector: "",
142 |     };
143 |   },
144 |   created() {
145 |     this.iconSvgInit();
146 |     this.selectLineSvg = BezierSvg("#707070");
147 |   },
148 |   methods: {
149 |     handleMiddleMenu(type, connector) {
150 |       console.log(type);
151 |       this.middleSelectType = type;
152 |       this.iconSvgInit();
153 |       if (type === "connection") {
154 |         this.connector = connector;
155 |         this.changeColor(this.connector, "#2d8cf0");
156 |       } else if (type === "enlarge") {
157 |         this.EnlargeSvg = EnlargeSvg("#2d8cf0");
158 |       } else if (type === "narrow") {
159 |         this.NarrowSvg = NarrowSvg("#2d8cf0");
160 |       } else {
161 |         this.changeColor(this.connector, "#707070");
162 |       }
163 |       this.$store.commit("setFlowMenuObj", { type, connector });
164 |     },
165 |     changeColor(connector, color) {
166 |       if (connector === "Bezier") {
167 |         this.BezierSvg = BezierSvg(color);
168 |         this.selectLineSvg = this.BezierSvg;
169 |       } else if (connector === "Flowchart") {
170 |         this.FlowchartSvg = FlowchartSvg(color);
171 |         this.selectLineSvg = this.FlowchartSvg;
172 |       } else if (connector === "StateMachine") {
173 |         this.StateMachineSvg = StateMachineSvg(color);
174 |         this.selectLineSvg = this.StateMachineSvg;
175 |       } else if (connector === "Straight") {
176 |         this.StraightSvg = StraightSvg(color);
177 |         this.selectLineSvg = this.StraightSvg;
178 |       }
179 |     },
180 |     iconSvgInit() {
181 |       this.BezierSvg = BezierSvg("#707070");
182 |       this.FlowchartSvg = FlowchartSvg("#707070");
183 |       this.StateMachineSvg = StateMachineSvg("#707070");
184 |       this.StraightSvg = StraightSvg("#707070");
185 |       this.EnlargeSvg = EnlargeSvg("#707070");
186 |       this.NarrowSvg = NarrowSvg("#707070");
187 |     },
188 |   },
189 | };
190 | </script>
191 | 
192 | <style scoped lang="scss">
193 | .operate-menu {
194 |   width: 100%;
195 |   display: flex;
196 |   justify-content: space-between;
197 |   > ul {
198 |     display: flex;
199 |     list-style: none;
200 |     > li {
201 |       cursor: pointer;
202 |       margin-right: 18px;
203 |       font-size: 18px;
204 |       position: relative;
205 |       display: flex;
206 |       align-items: center;
207 |       &.active {
208 |         color: #2d8cf0;
209 |       }
210 |       .svg-icon {
211 |         display: flex;
212 |         justify-content: center;
213 |         svg {
214 |           path {
215 |             fill: chartreuse !important;
216 |           }
217 |         }
218 |       }
219 |     }
220 |   }
221 |   /deep/ .ivu-tooltip {
222 |     display: flex;
223 |     align-items: center;
224 |   }
225 | }
226 | </style>
227 | 


--------------------------------------------------------------------------------
/src/components/FlowContent.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <main
  3 |     ref="main"
  4 |     @mousedown="mousedownHandler"
  5 |     @mouseup="mouseupHandler"
  6 |     @mousemove="mousemoveHandler"
  7 |     @contextmenu.prevent.stop="handleMouseContextmenu({ type: 'flow', event: $event })"
  8 |   >
  9 |     <div class="view-scale">缩放：{{ parseInt(viewScale * 100) }}%</div>
 10 |     <div
 11 |       :class="['flow-content', 'grid', dragMove.isDown ? 'flow-grab' : null]"
 12 |       @mousewheel="mousewheelHandler"
 13 |       :style="{
 14 |         transform: `scale(${viewScale})`,
 15 |         transformOrigin: `${scalePosition.x}px ${scalePosition.y}px`,
 16 |         left: dragMove.left + 'px',
 17 |         top: dragMove.top + 'px',
 18 |       }"
 19 |     >
 20 |       <FlowArea ref="flowArea" @context-menu="handleMouseContextmenu" />
 21 |     </div>
 22 |     <div class="mouse-position">x: {{ mousePosition.x }}, y: {{ mousePosition.y }}</div>
 23 |     <div class="footer"><span>by.zll @ 2021-1-6</span></div>
 24 |     <!-- 右击菜单 -->
 25 |     <template v-if="rightMenuObj.show">
 26 |       <RightMenu
 27 |         @on-click="handleRightMenuClick"
 28 |         :style="{ top: `${rightMenuObj.y}px`, left: `${rightMenuObj.x}px` }"
 29 |         :type="rightMenuObj.type"
 30 |       />
 31 |       <div class="mask" @click.stop="handleCloseMenu"></div>
 32 |     </template>
 33 |     <!-- 导入工作流 -->
 34 |     <input type="file" ref="inputFile" @change="handleExportFile" style="display: none" />
 35 |   </main>
 36 | </template>
 37 | <script>
 38 | import fileSaver from "file-saver";
 39 | import FlowArea from "./modules/FlowArea";
 40 | import RightMenu from "./modules/ContextMenu";
 41 | import { flowConfig } from "@/config/flow.config.js";
 42 | import { uploadFile, deepClone } from "@/utils";
 43 | export default {
 44 |   name: "FlowContent",
 45 |   components: { FlowArea, RightMenu },
 46 | 
 47 |   data() {
 48 |     return {
 49 |       viewScale: 1,
 50 |       scalePosition: {
 51 |         x: 0,
 52 |         y: 0,
 53 |       },
 54 |       dragMove: flowConfig,
 55 |       mousePosition: {
 56 |         x: 0,
 57 |         y: 0,
 58 |       },
 59 |       rightMenuObj: {
 60 |         show: false,
 61 |         x: 0,
 62 |         y: 0,
 63 |       },
 64 |       nodeData: {},
 65 |       linkData: {},
 66 |       event: {},
 67 |     };
 68 |   },
 69 |   computed: {
 70 |     flowMenuObj() {
 71 |       return this.$store.state.flowMenuObj;
 72 |     },
 73 |   },
 74 | 
 75 |   watch: {
 76 |     flowMenuObj(newVal, oldVal) {
 77 |       if (newVal.type === "upper-step") {
 78 |         // 上一步
 79 |         let flowStepData = this.$store.state.flowStepData;
 80 |         let stepIndex = this.$store.state.stepIndex;
 81 |         if (stepIndex > 0) {
 82 |           stepIndex = stepIndex - 1;
 83 |           this.$store.commit("setStepIndex", stepIndex);
 84 |           this.$store.commit("setFlowData", flowStepData[stepIndex]);
 85 |           this.$refs.flowArea.initFlowCanvas();
 86 |         }
 87 |       } else if (newVal.type === "next-step") {
 88 |         //下一步
 89 |         let flowStepData = this.$store.state.flowStepData;
 90 |         let stepIndex = this.$store.state.stepIndex;
 91 |         if (stepIndex < flowStepData.length - 1) {
 92 |           stepIndex = stepIndex + 1;
 93 |           this.$store.commit("setStepIndex", stepIndex);
 94 |           this.$store.commit("setFlowData", flowStepData[stepIndex]);
 95 |           this.$refs.flowArea.initFlowCanvas();
 96 |         }
 97 |       } else if (newVal.type === "connection" || newVal.type === "drag-drop") {
 98 |         this.$refs.flowArea.toggleDraggable(newVal);
 99 |       } else if (newVal.type === "enlarge") {
100 |         // 放大
101 |         this.scalePosition = {
102 |           x: 3686,
103 |           y: 3355,
104 |         };
105 |         this.setZoom("enlarge");
106 |       } else if (newVal.type === "narrow") {
107 |         // 缩小
108 |         this.scalePosition = {
109 |           x: 3686,
110 |           y: 3355,
111 |         };
112 |         this.setZoom("narrow");
113 |       } else if (newVal.type === "import") {
114 |         this.$refs.inputFile.click();
115 |         // inputFileDom.onchange = () => {
116 |         //   uploadFile(this.$refs.inputFile, (content) => {
117 |         //     this.$store.commit("setFlowData", JSON.parse(content));
118 |         //     this.handleCreateClick();
119 |         //   });
120 |         // };
121 |       } else if (newVal.type === "export") {
122 |         let flowData = this.$store.state.flowData;
123 |         let blob = new Blob([JSON.stringify(flowData)], {
124 |           type: "text/plain;charset=utf-8",
125 |         });
126 |         fileSaver(blob, `${flowData.title}.flow`);
127 |       } else if (newVal.type === "restore") {
128 |         let { offsetX, offsetY } = flowConfig;
129 |         this.dragMove = {
130 |           top: offsetY,
131 |           left: offsetX,
132 |         };
133 |         this.$store.commit("setFlowData", { offsetX, offsetY });
134 |       } else if (newVal.type === "reset") {
135 |         //重置
136 |         // let { offsetX, offsetY } = flowConfig;
137 |         // this.dragMove = {
138 |         //   top: offsetY,
139 |         //   left: offsetX,
140 |         // };
141 |         // this.$store.commit("setFlowData", flowConfig);
142 |       } else if (newVal.type === "save") {
143 |         this.handleSave();
144 |       } else if (newVal.type === "clear") {
145 |         //清空
146 |         this.handleClear();
147 |       }
148 |     },
149 |   },
150 |   mounted() {
151 |     let { offsetX, offsetY } = this.$store.state.flowData;
152 |     if (offsetX && offsetY) {
153 |       this.dragMove = {
154 |         top: offsetY,
155 |         left: offsetX,
156 |       };
157 |     }
158 |     this.$refs.flowArea.initFlowCanvas();
159 |   },
160 |   methods: {
161 |     handleExportFile() {
162 |       uploadFile(this.$refs.inputFile, (content) => {
163 |         this.$store.commit("setFlowData", JSON.parse(content));
164 |         this.$refs.flowArea.initFlowCanvas();
165 |       });
166 |     },
167 |     // 拖拽鼠标抬起事件（添加节点）
168 |     onIsAddNode() {
169 |       if (this.$store.state.newNode.state) {
170 |         let time = setTimeout(() => {
171 |           this.$refs.flowArea.handleNewNode("drag", this.mousePosition);
172 |           clearTimeout(time);
173 |         }, 25);
174 |       }
175 |     },
176 |     // 保存画布内容
177 |     handleSave() {
178 |       let flowData = JSON.stringify(this.$store.state.flowData);
179 |       console.log(flowData);
180 |       this.$Modal.success({
181 |         title: "操作提示",
182 |         content: "保存成功，请在控制台中查看！",
183 |       });
184 |     },
185 |     // 清空画布内容
186 |     handleClear() {
187 |       let { offsetX, offsetY } = flowConfig;
188 |       this.dragMove = {
189 |         top: offsetY,
190 |         left: offsetX,
191 |       };
192 |       this.$store.commit("setFlowData", flowConfig);
193 |       this.$refs.flowArea.initFlowCanvas();
194 |     },
195 |     // 滚轮滚动事件
196 |     mousewheelHandler(e) {
197 |       let event = window.event || e;
198 |       // console.log(event);
199 |       if (event.wheelDelta) {
200 |         //判断浏览器IE，谷歌滑轮事件
201 |         if (event.wheelDelta > 0) {
202 |           //当滑轮向上滚动时
203 |           this.setZoom("enlarge");
204 |         }
205 |         if (event.wheelDelta < 0) {
206 |           //当滑轮向下滚动时
207 |           this.setZoom("narrow");
208 |         }
209 |       } else if (event.detail) {
210 |         //Firefox滑轮事件
211 |         if (event.detail > 0) {
212 |           //当滑轮向下滚动时
213 |           this.setZoom("narrow");
214 |         }
215 |         if (event.detail < 0) {
216 |           //当滑轮向上滚动时
217 |           this.setZoom("enlarge");
218 |         }
219 |       }
220 |       this.scalePosition = {
221 |         x: event.layerX ? event.layerX : event.offsetX,
222 |         y: event.layerY ? event.layerY : event.offsetY,
223 |       };
224 |     },
225 |     setZoom(mark) {
226 |       let viewScale = this.viewScale;
227 |       if (mark === "enlarge") {
228 |         viewScale = viewScale > 1.5 ? viewScale : viewScale + 0.05;
229 |       } else if (mark === "narrow") {
230 |         viewScale = viewScale < 0.5 ? viewScale : viewScale - 0.05;
231 |       }
232 |       // jsPlumb.setZoom(viewScale);
233 |       this.viewScale = viewScale;
234 |     },
235 |     // 鼠标点击关闭右击菜单
236 |     handleCloseMenu() {
237 |       this.rightMenuObj = { show: false };
238 |     },
239 |     // 鼠标右击事件
240 |     handleMouseContextmenu({ event, type, data }) {
241 |       this.event = event;
242 |       this.rightMenuObj = {
243 |         type,
244 |         show: true,
245 |         x: event.x,
246 |         y: event.y,
247 |       };
248 |       if (type === "flow") {
249 |         this.newNodePosition = { ...this.mousePosition };
250 |       } else if (type === "node") {
251 |         this.nodeData = data;
252 |       } else if (type === "link") {
253 |         this.linkData = data;
254 |       }
255 |     },
256 |     // 右击菜单事件类型
257 |     handleRightMenuClick({ type, event }) {
258 |       if (type === "delete-node") {
259 |         this.$refs.flowArea.deleteNode(this.nodeData);
260 |       } else if (type === "save") {
261 |         this.handleSave();
262 |       } else if (type === "delete-link") {
263 |         this.$refs.flowArea.deleteConnection(this.linkData);
264 |       } else if (type === "copy") {
265 |         this.$store.commit("setNewNode", {
266 |           state: false,
267 |           node: deepClone(this.nodeData),
268 |         });
269 |       } else if (type === "paste") {
270 |         let time = setTimeout(() => {
271 |           this.$refs.flowArea.handleNewNode("paste", this.newNodePosition);
272 |           clearTimeout(time);
273 |         }, 25);
274 |       }
275 |       this.handleCloseMenu();
276 |     },
277 | 
278 |     // 鼠标按下事件
279 |     mousedownHandler(e) {
280 |       let event = window.event || e;
281 |       this.dragMove.isDown = true;
282 |       this.dragMove.originalPosition = { ...this.dragMove };
283 |       this.dragMove.downPosition = {
284 |         y: event.y,
285 |         x: event.x,
286 |       };
287 | 
288 |       this.$store.commit("setSelectContent", {
289 |         type: "",
290 |         data: this.$store.state.flowData,
291 |       });
292 | 
293 |       this.$emit("on-select-type", "drag-drop");
294 |       this.$store.commit("setFlowMenuObj", { type: "drag-drop" });
295 |       document.getElementsByClassName("item-node").forEach((ele) => {
296 |         ele.classList.remove("active");
297 |       });
298 |     },
299 | 
300 |     // 鼠标抬起事件
301 |     mouseupHandler(e) {
302 |       let flowData = this.$store.state.flowData;
303 |       if (
304 |         flowData.offsetX !== this.dragMove.left &&
305 |         flowData.offsetY !== this.dragMove.top
306 |       ) {
307 |         flowData.offsetX = this.dragMove.left;
308 |         flowData.offsetY = this.dragMove.top;
309 |         this.$store.commit("setFlowData", flowData);
310 |         this.$store.commit("setFlowStepData", flowData);
311 |       }
312 |       this.dragMove = { ...this.dragMove, ...{ isDown: false } };
313 |     },
314 |     // 鼠标移动事件
315 |     mousemoveHandler(e) {
316 |       let event = window.event || e;
317 |       let offsetX = event.layerX ? event.layerX : event.offsetX;
318 |       let offsetY = event.layerY ? event.layerY : event.offsetY;
319 |       this.mousePosition = { x: offsetX, y: offsetY };
320 |       let { downPosition, originalPosition, isDown } = this.dragMove;
321 |       if (isDown) {
322 |         let top = originalPosition.top + (event.y - downPosition.y);
323 |         let left = originalPosition.left + (event.x - downPosition.x);
324 |         this.dragMove.top = top;
325 |         this.dragMove.left = left;
326 |       }
327 |     },
328 |   },
329 |   beforeDestroy() {
330 |     this.$store.commit("setFlowStepData");
331 |     this.$Message.destroy();
332 |   },
333 | };
334 | </script>
335 | <style scoped lang="scss">
336 | main {
337 |   width: 100%;
338 |   height: 100%;
339 |   overflow: hidden;
340 |   position: relative;
341 |   .grid {
342 |     &::before {
343 |       content: "";
344 |       display: block;
345 |       position: absolute;
346 |       height: 100%;
347 |       width: 100%;
348 |       z-index: 0;
349 |       background-image: linear-gradient(90deg, #ebebeb75 1px, transparent 0),
350 |         linear-gradient(#ebebeb75 1px, transparent 0);
351 |       background-size: 12px 12px;
352 |     }
353 |   }
354 |   .flow-content {
355 |     position: absolute;
356 |     transform: scale(1);
357 |     transform-origin: 0px 0px;
358 |     width: 1000%;
359 |     height: 1000%;
360 |     z-index: 1;
361 |     // background: #eee;
362 |     cursor: move;
363 |     cursor: -moz-grab;
364 |     cursor: -webkit-grab;
365 |   }
366 |   .flow-grab {
367 |     cursor: -moz-grabbing;
368 |     cursor: -webkit-grabbing;
369 |   }
370 |   .view-scale {
371 |     position: absolute;
372 |     top: 10px;
373 |     right: 10px;
374 |     z-index: 1;
375 |     font-size: 12px;
376 |   }
377 |   .footer {
378 |     position: absolute;
379 |     bottom: 10px;
380 |     left: 20px;
381 |     z-index: 1;
382 |   }
383 |   .reset {
384 |     position: absolute;
385 |     top: 0;
386 |     right: 0;
387 |     z-index: 1;
388 |   }
389 |   .mouse-position {
390 |     position: absolute;
391 |     bottom: 10px;
392 |     right: 10px;
393 |     z-index: 1;
394 |   }
395 |   // 遮罩层
396 |   .mask {
397 |     position: fixed;
398 |     top: 0;
399 |     left: 0;
400 |     right: 0;
401 |     bottom: 0;
402 |     z-index: 5;
403 |   }
404 | }
405 | </style>
406 | 


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