├── .eslintignore ├── .browserslistrc ├── .env.demo ├── dist ├── favicon.ico ├── fonts │ ├── element-icons.535877f5.woff │ ├── element-icons.732389de.ttf │ ├── fontawesome-webfont.674f50d2.eot │ ├── fontawesome-webfont.b06871f2.ttf │ ├── fontawesome-webfont.af7ae505.woff2 │ └── fontawesome-webfont.fee66e71.woff ├── img │ ├── end-node.e404d1c7.svg │ ├── start-node.7949a17e.svg │ ├── condition-node.5b055d00.svg │ └── regular-node.81baa92e.svg ├── index.html └── js │ └── app.js ├── public ├── favicon.ico └── index.html ├── doc ├── v1 │ ├── g6-editor.pdf │ ├── g6-editor.assets │ │ ├── image-20200401102141528.png │ │ ├── image-20200401102554960.png │ │ ├── image-20200401102644308.png │ │ ├── image-20200402104501328.png │ │ ├── image-20200402182150873.png │ │ ├── image-20200402235716994.png │ │ ├── image-20200404090107676.png │ │ ├── image-20200404090150218.png │ │ └── image-20200404090205793.png │ └── g6-editor.md └── reference │ ├── 官方文档.pdf │ └── 图编辑框架选型参考文章.md ├── src ├── assets │ ├── logo.png │ ├── end-node.svg │ ├── start-node.svg │ ├── condition-node.svg │ └── regular-node.svg ├── App.vue ├── main.js └── views │ ├── mixin.js │ ├── index.less │ └── index.vue ├── babel.config.js ├── demo ├── Toolbar │ ├── public │ │ ├── favicon.ico │ │ └── index.html │ ├── src │ │ ├── assets │ │ │ └── logo.png │ │ ├── main.js │ │ ├── App.vue │ │ └── components │ │ │ └── Toolbar.vue │ └── package.json └── ItemPanel │ ├── public │ ├── favicon.ico │ └── index.html │ ├── src │ ├── assets │ │ └── logo.png │ ├── main.js │ ├── App.vue │ └── components │ │ └── ItemPanel.vue │ └── package.json ├── vue.config.js ├── .gitignore ├── .eslintrc.js ├── README.md ├── package.json └── .prettierrc.js /.eslintignore: -------------------------------------------------------------------------------- 1 | doc -------------------------------------------------------------------------------- /.browserslistrc: -------------------------------------------------------------------------------- 1 | > 1% 2 | last 2 versions 3 | -------------------------------------------------------------------------------- /.env.demo: -------------------------------------------------------------------------------- 1 | # 为打包能上线到Github预览的demo版本，而特别设置的环境变量 2 | NODE_ENV = "demo" -------------------------------------------------------------------------------- /dist/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/blueju/vue-g6-editor/HEAD/dist/favicon.ico -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/blueju/vue-g6-editor/HEAD/public/favicon.ico -------------------------------------------------------------------------------- /doc/v1/g6-editor.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/blueju/vue-g6-editor/HEAD/doc/v1/g6-editor.pdf -------------------------------------------------------------------------------- /src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/blueju/vue-g6-editor/HEAD/src/assets/logo.png -------------------------------------------------------------------------------- /doc/reference/官方文档.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/blueju/vue-g6-editor/HEAD/doc/reference/官方文档.pdf -------------------------------------------------------------------------------- /babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | '@vue/cli-plugin-babel/preset' 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /demo/Toolbar/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/blueju/vue-g6-editor/HEAD/demo/Toolbar/public/favicon.ico -------------------------------------------------------------------------------- /demo/ItemPanel/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/blueju/vue-g6-editor/HEAD/demo/ItemPanel/public/favicon.ico -------------------------------------------------------------------------------- /demo/Toolbar/src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/blueju/vue-g6-editor/HEAD/demo/Toolbar/src/assets/logo.png -------------------------------------------------------------------------------- /demo/ItemPanel/src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/blueju/vue-g6-editor/HEAD/demo/ItemPanel/src/assets/logo.png -------------------------------------------------------------------------------- /dist/fonts/element-icons.535877f5.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/blueju/vue-g6-editor/HEAD/dist/fonts/element-icons.535877f5.woff -------------------------------------------------------------------------------- /dist/fonts/element-icons.732389de.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/blueju/vue-g6-editor/HEAD/dist/fonts/element-icons.732389de.ttf -------------------------------------------------------------------------------- /dist/fonts/fontawesome-webfont.674f50d2.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/blueju/vue-g6-editor/HEAD/dist/fonts/fontawesome-webfont.674f50d2.eot -------------------------------------------------------------------------------- /dist/fonts/fontawesome-webfont.b06871f2.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/blueju/vue-g6-editor/HEAD/dist/fonts/fontawesome-webfont.b06871f2.ttf -------------------------------------------------------------------------------- /dist/fonts/fontawesome-webfont.af7ae505.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/blueju/vue-g6-editor/HEAD/dist/fonts/fontawesome-webfont.af7ae505.woff2 -------------------------------------------------------------------------------- /dist/fonts/fontawesome-webfont.fee66e71.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/blueju/vue-g6-editor/HEAD/dist/fonts/fontawesome-webfont.fee66e71.woff -------------------------------------------------------------------------------- /doc/v1/g6-editor.assets/image-20200401102141528.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/blueju/vue-g6-editor/HEAD/doc/v1/g6-editor.assets/image-20200401102141528.png -------------------------------------------------------------------------------- /doc/v1/g6-editor.assets/image-20200401102554960.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/blueju/vue-g6-editor/HEAD/doc/v1/g6-editor.assets/image-20200401102554960.png -------------------------------------------------------------------------------- /doc/v1/g6-editor.assets/image-20200401102644308.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/blueju/vue-g6-editor/HEAD/doc/v1/g6-editor.assets/image-20200401102644308.png -------------------------------------------------------------------------------- /doc/v1/g6-editor.assets/image-20200402104501328.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/blueju/vue-g6-editor/HEAD/doc/v1/g6-editor.assets/image-20200402104501328.png -------------------------------------------------------------------------------- /doc/v1/g6-editor.assets/image-20200402182150873.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/blueju/vue-g6-editor/HEAD/doc/v1/g6-editor.assets/image-20200402182150873.png -------------------------------------------------------------------------------- /doc/v1/g6-editor.assets/image-20200402235716994.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/blueju/vue-g6-editor/HEAD/doc/v1/g6-editor.assets/image-20200402235716994.png -------------------------------------------------------------------------------- /doc/v1/g6-editor.assets/image-20200404090107676.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/blueju/vue-g6-editor/HEAD/doc/v1/g6-editor.assets/image-20200404090107676.png -------------------------------------------------------------------------------- /doc/v1/g6-editor.assets/image-20200404090150218.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/blueju/vue-g6-editor/HEAD/doc/v1/g6-editor.assets/image-20200404090150218.png -------------------------------------------------------------------------------- /doc/v1/g6-editor.assets/image-20200404090205793.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/blueju/vue-g6-editor/HEAD/doc/v1/g6-editor.assets/image-20200404090205793.png -------------------------------------------------------------------------------- /demo/ItemPanel/src/main.js: -------------------------------------------------------------------------------- 1 | import Vue from "vue"; 2 | import App from "./App.vue"; 3 | 4 | Vue.config.productionTip = false; 5 | 6 | new Vue({ 7 | render: h => h(App) 8 | }).$mount("#app"); 9 | -------------------------------------------------------------------------------- /vue.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | publicPath: (function() { 3 | if (process.env.NODE_ENV === "demo") { 4 | return "https://blueju.github.io/vue-g6-editor/dist/"; 5 | } 6 | })() 7 | }; 8 | -------------------------------------------------------------------------------- /demo/Toolbar/src/main.js: -------------------------------------------------------------------------------- 1 | import Vue from "vue"; 2 | import App from "./App.vue"; 3 | 4 | Vue.config.productionTip = false; 5 | import "font-awesome/css/font-awesome.min.css"; 6 | new Vue({ 7 | render: (h) => h(App) 8 | }).$mount("#app"); 9 | -------------------------------------------------------------------------------- /src/App.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 17 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | # /dist 4 | 5 | # local env files 6 | .env.local 7 | .env.*.local 8 | 9 | # Log files 10 | npm-debug.log* 11 | yarn-debug.log* 12 | yarn-error.log* 13 | 14 | # Editor directories and files 15 | .idea 16 | .vscode 17 | *.suo 18 | *.ntvs* 19 | *.njsproj 20 | *.sln 21 | *.sw? 22 | -------------------------------------------------------------------------------- /src/main.js: -------------------------------------------------------------------------------- 1 | import Vue from "vue"; 2 | import App from "./App.vue"; 3 | // ElementUI import 4 | import ElementUI from "element-ui"; 5 | import "element-ui/lib/theme-chalk/index.css"; 6 | // 字体图标 7 | import "font-awesome/css/font-awesome.min.css"; 8 | // ElementUI use 9 | Vue.use(ElementUI, { 10 | size: "small" 11 | }); 12 | 13 | Vue.config.productionTip = false; 14 | 15 | // 为方便调试，故挂载到window 16 | window.blueju = new Vue({ 17 | render: (h) => h(App) 18 | }).$mount("#app"); 19 | -------------------------------------------------------------------------------- /.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | extends: ["alloy", "alloy/vue"], 3 | env: { 4 | // 你的环境变量（包含多个预定义的全局变量） 5 | // 6 | // browser: true, 7 | // node: true, 8 | // mocha: true, 9 | // jest: true, 10 | // jquery: true 11 | }, 12 | globals: { 13 | // 你的全局变量（设置为 false 表示它不允许被重新赋值） 14 | // 15 | // myGlobal: false 16 | }, 17 | rules: { 18 | // 自定义你的规则 19 | // vue文件template、script、style排列顺序 20 | "vue/component-tags-order": [ 21 | "error", 22 | { 23 | order: ["template", "script", "style"] 24 | } 25 | ] 26 | } 27 | }; 28 | -------------------------------------------------------------------------------- /demo/Toolbar/src/App.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 18 | 19 | 29 | -------------------------------------------------------------------------------- /demo/ItemPanel/src/App.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 18 | 19 | 29 | -------------------------------------------------------------------------------- /demo/Toolbar/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | toolbar 9 | 10 | 11 | 17 |
18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | <%= htmlWebpackPlugin.options.title %> 9 | 10 | 11 | 14 |
15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /demo/ItemPanel/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | ItemPanel 9 | 10 | 11 | 17 |
18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /doc/reference/图编辑框架选型参考文章.md: -------------------------------------------------------------------------------- 1 | # 图编辑框架选型参考文章 2 | 3 | # 框架列表 4 | 5 | - gojs 6 | - d3 7 | - jsplumb 8 | - le5le-topology 9 | - mxGraph 10 | - JointJS 11 | - g6 12 | - g6-editor 13 | 14 | 15 | 16 | # 参考 17 | 18 | 前端可视化建模技术概览 19 | 20 | https://leungwensen.github.io/blog/2015/frontend-visual-modeling.html 21 | 22 | 23 | 24 | jsPlumb Gojs组件 前端图形化插件之利器 25 | 26 | https://www.cnblogs.com/xcj26/articles/7920446.html 27 | 28 | 29 | 30 | 一般用哪些工具做大数据可视化分析？ 31 | 32 | https://www.zhihu.com/question/33692103/answer/796113370 33 | 34 | 35 | 36 | 选择JavaScript开源库时，你需要考虑这些问题 37 | 38 | https://mp.weixin.qq.com/s/QI52VbaQfFOTZyNSfkHk0w 39 | 40 | 41 | 42 | # NPM下载量趋势比较 43 | 44 | - https://www.npmtrends.com/jointjs-vs-gojs 45 | 46 | - https://www.npmtrends.com/jointjs-vs-gojs-vs-jsplumb-vs-mxgraph-vs-@antv/g6 -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # vue-g6-ediotr 2 | 3 | # 更新 4 | 5 | 鉴于 g6-editor 已经不再更新，且公司后续新项目后端架构也改用阿里巴巴蚂蚁金服的 sofa 框架和 seata 解决方案了，因此前端这边也改用了 [gg-editor](https://github.com/alibaba/GGEditor) 6 | 7 | 同样整理了下文档，并提供 React Demo，可能会比 g6-editor 更详细些，毕竟 gg-editor 还在持续更新。 8 | 9 | [ggeditor-chinese-doc](https://github.com/blueju/ggeditor-chinese-doc) 10 | 11 | # 前言 12 | 13 | 公司遗留项目中使用到了 g6-editor，配套使用的框架是 Vue。 14 | 15 | 因此在工作中，一遍查源码一遍实践，整理了 g6-editor 文档，并结合 Vue 写了一个示例。 16 | 17 | # 文档 18 | 19 | [g6-editor 文档](./doc/v1/g6-editor.md) 20 | 21 | [vue-g6-editor demo](https://blueju.github.io/vue-g6-editor/dist/index.html) 22 | 23 | ![](https://user-images.githubusercontent.com/49681036/89709096-6b3ebf80-d9af-11ea-929c-a836c6ef24b9.png) 24 | 25 | # 安装依赖 26 | 27 | ``` 28 | npm install 29 | ``` 30 | 31 | # 启动服务 32 | 33 | ``` 34 | npm run dev 35 | ``` 36 | 37 | # 编译构建 38 | 39 | ``` 40 | npm run build 41 | ``` 42 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue-g6-ediotr", 3 | "version": "0.1.0", 4 | "private": true, 5 | "scripts": { 6 | "dev": "vue-cli-service serve", 7 | "build": "vue-cli-service build", 8 | "build:demo": "vue-cli-service build --mode demo" 9 | }, 10 | "dependencies": { 11 | "@antv/g6-editor": "^1.2.0", 12 | "core-js": "^3.6.4", 13 | "element-ui": "^2.13.0", 14 | "font-awesome": "^4.7.0", 15 | "netflix-conductor-json-tree": "^0.0.4", 16 | "vue": "^2.6.11" 17 | }, 18 | "devDependencies": { 19 | "@vue/cli-plugin-babel": "^4.2.0", 20 | "@vue/cli-service": "^4.2.0", 21 | "babel-eslint": "^10.1.0", 22 | "eslint": "^6.8.0", 23 | "eslint-config-alloy": "^3.6.0", 24 | "eslint-plugin-vue": "^6.2.2", 25 | "less": "^3.0.4", 26 | "less-loader": "^5.0.0", 27 | "vue-eslint-parser": "^7.0.0", 28 | "vue-template-compiler": "^2.6.11" 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /.prettierrc.js: -------------------------------------------------------------------------------- 1 | // .prettierrc.js 2 | module.exports = { 3 | // 一行最多 100 字符 4 | printWidth: 100, 5 | // 使用 2 个空格缩进 6 | tabWidth: 2, 7 | // 不使用缩进符，而使用空格 8 | useTabs: false, 9 | // 行尾需要有分号 10 | semi: true, 11 | // 使用单引号 12 | singleQuote: false, 13 | // 对象的 key 仅在必要时用引号 14 | quoteProps: "as-needed", 15 | // jsx 不使用单引号，而使用双引号 16 | jsxSingleQuote: false, 17 | // 末尾不需要逗号 18 | trailingComma: "none", 19 | // 大括号内的首尾需要空格 20 | bracketSpacing: true, 21 | // jsx 标签的反尖括号需要换行 22 | jsxBracketSameLine: false, 23 | // 箭头函数，只有一个参数的时候，也需要括号 24 | arrowParens: "always", 25 | // 每个文件格式化的范围是文件的全部内容 26 | rangeStart: 0, 27 | rangeEnd: Infinity, 28 | // 不需要写文件开头的 @prettier 29 | requirePragma: false, 30 | // 不需要自动在文件开头插入 @prettier 31 | insertPragma: false, 32 | // 使用默认的折行标准 33 | proseWrap: "preserve", 34 | // 根据显示样式决定 html 要不要折行 35 | htmlWhitespaceSensitivity: "css", 36 | // 换行符使用 lf 37 | endOfLine: "lf" 38 | }; 39 | -------------------------------------------------------------------------------- /src/assets/end-node.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | background 6 | 7 | 8 | 9 | 10 | 11 | 12 | Layer 1 13 | 14 | 15 | 结束节点 16 | 17 | -------------------------------------------------------------------------------- /dist/img/end-node.e404d1c7.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | background 6 | 7 | 8 | 9 | 10 | 11 | 12 | Layer 1 13 | 14 | 15 | 结束节点 16 | 17 | -------------------------------------------------------------------------------- /src/assets/start-node.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | background 6 | 7 | 8 | 9 | 10 | 11 | 12 | Layer 1 13 | 14 | 15 | 开始节点 16 | 17 | -------------------------------------------------------------------------------- /dist/img/start-node.7949a17e.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | background 6 | 7 | 8 | 9 | 10 | 11 | 12 | Layer 1 13 | 14 | 15 | 开始节点 16 | 17 | -------------------------------------------------------------------------------- /src/assets/condition-node.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | background 6 | 7 | 8 | 9 | 10 | 11 | 12 | Layer 1 13 | 14 | 15 | 条件节点 16 | 17 | -------------------------------------------------------------------------------- /dist/img/condition-node.5b055d00.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | background 6 | 7 | 8 | 9 | 10 | 11 | 12 | Layer 1 13 | 14 | 15 | 条件节点 16 | 17 | -------------------------------------------------------------------------------- /dist/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | vue-g6-ediotr 9 | 10 | 11 | 14 |
15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /src/views/mixin.js: -------------------------------------------------------------------------------- 1 | export default { 2 | methods: { 3 | // 保存节点属性 4 | saveNodeAttribute() { 5 | this.editor.executeCommand(() => { 6 | // 获取画布 7 | const page = this.editor.getCurrentPage(); 8 | // 获取所选对象 9 | const selectedItem = page.getSelected()[0]; 10 | page.update(selectedItem.id, { 11 | label: this.nodeAttributeForm.label, 12 | size: this.nodeAttributeForm.width + "*" + this.nodeAttributeForm.height, 13 | color: this.nodeAttributeForm.color 14 | }); 15 | }); 16 | }, 17 | // 保存边属性 18 | saveEdgeAttribute() { 19 | this.editor.executeCommand(() => { 20 | // 获取画布 21 | const page = this.editor.getCurrentPage(); 22 | // 获取所选对象 23 | const selectedItem = page.getSelected()[0]; 24 | console.log(this.edgeAttributeForm); 25 | page.update(selectedItem.id, { 26 | label: this.edgeAttributeForm.label, 27 | shape: this.edgeAttributeForm.shape 28 | }); 29 | }); 30 | } 31 | } 32 | }; 33 | -------------------------------------------------------------------------------- /src/assets/regular-node.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | background 6 | 7 | 8 | 9 | 10 | 11 | 12 | Layer 1 13 | 14 | 15 | 16 | 常规节点 17 | 18 | -------------------------------------------------------------------------------- /dist/img/regular-node.81baa92e.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | background 6 | 7 | 8 | 9 | 10 | 11 | 12 | Layer 1 13 | 14 | 15 | 16 | 常规节点 17 | 18 | -------------------------------------------------------------------------------- /demo/Toolbar/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "toolbar", 3 | "version": "0.1.0", 4 | "private": true, 5 | "scripts": { 6 | "serve": "vue-cli-service serve", 7 | "build": "vue-cli-service build", 8 | "lint": "vue-cli-service lint" 9 | }, 10 | "dependencies": { 11 | "@antv/g6-editor": "1.2.0", 12 | "@vue/cli-plugin-babel": "4.1.1", 13 | "font-awesome": "4.7.0", 14 | "vue": "^2.6.11" 15 | }, 16 | "devDependencies": { 17 | "@vue/cli-plugin-eslint": "4.1.1", 18 | "@vue/cli-service": "4.1.1", 19 | "babel-eslint": "^10.0.3", 20 | "eslint": "^6.7.2", 21 | "eslint-plugin-vue": "^6.0.1", 22 | "vue-template-compiler": "^2.6.11" 23 | }, 24 | "eslintConfig": { 25 | "root": true, 26 | "env": { 27 | "node": true 28 | }, 29 | "extends": [ 30 | "plugin:vue/essential", 31 | "eslint:recommended" 32 | ], 33 | "rules": {}, 34 | "parserOptions": { 35 | "parser": "babel-eslint" 36 | } 37 | }, 38 | "postcss": { 39 | "plugins": { 40 | "autoprefixer": {} 41 | } 42 | }, 43 | "browserslist": [ 44 | "> 1%", 45 | "last 2 versions", 46 | "not ie <= 8" 47 | ], 48 | "keywords": [], 49 | "description": "" 50 | } -------------------------------------------------------------------------------- /demo/ItemPanel/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "itempanel", 3 | "version": "0.1.0", 4 | "private": true, 5 | "scripts": { 6 | "serve": "vue-cli-service serve", 7 | "build": "vue-cli-service build", 8 | "lint": "vue-cli-service lint" 9 | }, 10 | "dependencies": { 11 | "@antv/g6-editor": "^1.2.0", 12 | "@vue/cli-plugin-babel": "4.1.1", 13 | "vue": "^2.6.11" 14 | }, 15 | "devDependencies": { 16 | "@vue/cli-plugin-eslint": "4.1.1", 17 | "@vue/cli-service": "4.1.1", 18 | "babel-eslint": "^10.0.3", 19 | "eslint": "^6.7.2", 20 | "eslint-plugin-vue": "^6.0.1", 21 | "vue-template-compiler": "^2.6.11" 22 | }, 23 | "eslintConfig": { 24 | "root": true, 25 | "env": { 26 | "node": true 27 | }, 28 | "extends": [ 29 | "plugin:vue/essential", 30 | "eslint:recommended" 31 | ], 32 | "rules": {}, 33 | "parserOptions": { 34 | "parser": "babel-eslint" 35 | } 36 | }, 37 | "postcss": { 38 | "plugins": { 39 | "autoprefixer": {} 40 | } 41 | }, 42 | "browserslist": [ 43 | "> 1%", 44 | "last 2 versions", 45 | "not ie <= 8" 46 | ], 47 | "keywords": [ 48 | "vue", 49 | "vuejs", 50 | "starter" 51 | ], 52 | "description": "Vue.js example starter project" 53 | } 54 | -------------------------------------------------------------------------------- /demo/Toolbar/src/components/Toolbar.vue: -------------------------------------------------------------------------------- 1 | 21 | 22 | 36 | 37 | 58 | -------------------------------------------------------------------------------- /demo/ItemPanel/src/components/ItemPanel.vue: -------------------------------------------------------------------------------- 1 | 57 | 58 | 71 | 72 | 73 | 89 | -------------------------------------------------------------------------------- /src/views/index.less: -------------------------------------------------------------------------------- 1 | @backgroundColor: #fbfbfb; 2 | @borderColor: #dadce0; 3 | 4 | @itempannelAndPageBorder: 1px solid #ccc; 5 | @pageHeight: calc(100vh - 41px - 37px); 6 | 7 | body { 8 | margin: 0; 9 | overflow: hidden; 10 | } 11 | 12 | #vue-g6-editor { 13 | header:nth-of-type(1) { 14 | background: @backgroundColor; 15 | line-height: 40px; 16 | padding-left: 20px; 17 | border-bottom: 1px solid @borderColor; 18 | box-sizing: border-box; 19 | } 20 | // 工具栏 21 | #toolbar { 22 | background: @backgroundColor; 23 | border-bottom: 1px solid @borderColor; 24 | padding: 4px 14px; 25 | i { 26 | font-size: 18px; 27 | padding: 4px; 28 | margin-right: 8px; 29 | color: #999999; 30 | &:hover { 31 | cursor: pointer; 32 | background-color: #eeeeee; 33 | color: #5cb6ff; 34 | } 35 | } 36 | } 37 | // 元素面板 38 | #itempannel { 39 | box-sizing: border-box; 40 | background-color: @backgroundColor; 41 | border-right: 1px solid @borderColor; 42 | height: @pageHeight; 43 | padding-top: 10px; 44 | overflow: hidden; 45 | display: flex; 46 | flex-direction: row; 47 | flex-wrap: wrap; 48 | justify-content: space-around; 49 | align-content: flex-start; 50 | .getItem { 51 | cursor: move; 52 | width: 80px; 53 | height: 80px; 54 | margin-bottom: 20px; 55 | display: flex; 56 | justify-content: center; 57 | align-items: center; 58 | img { 59 | width: 100%; 60 | } 61 | } 62 | } 63 | // 主画布 64 | #page { 65 | height: @pageHeight; 66 | canvas { 67 | // 去除canvas底部间隙 68 | display: block; 69 | width: 100%; 70 | } 71 | } 72 | // 右侧部分（属性栏 + 缩略图） 73 | .right-part { 74 | height: @pageHeight; 75 | display: flex; 76 | flex-direction: column; 77 | justify-content: flex-start; 78 | } 79 | // 属性栏 80 | #detailpannel { 81 | flex-grow: 1; 82 | 83 | background-color: @backgroundColor; 84 | border-left: 1px solid @borderColor; 85 | overflow-y: scroll; 86 | #nodeAttributeBar, 87 | #edgeAttributeBar, 88 | #groupAttributeBar, 89 | #canvasAttributeBar, 90 | #multiAttributeBar { 91 | .title { 92 | height: 34px; 93 | line-height: 34px; 94 | text-align: center; 95 | box-sizing: border-box; 96 | font-weight: bold; 97 | font-size: 13px; 98 | border-width: 0 0 1px 0; 99 | border-style: solid; 100 | border-color: @borderColor; 101 | } 102 | .main { 103 | padding: 10px; 104 | } 105 | } 106 | } 107 | // 缩略图 108 | #minimap { 109 | background-color: @backgroundColor; 110 | border-top: 1px solid #ccc; 111 | border-left: 1px solid #ccc; 112 | .title { 113 | height: 34px; 114 | line-height: 34px; 115 | text-align: center; 116 | box-sizing: border-box; 117 | font-weight: bold; 118 | font-size: 13px; 119 | border-width: 0 0 1px 0; 120 | border-style: solid; 121 | border-color: @borderColor; 122 | } 123 | } 124 | // 右键菜单 125 | #contextmenu { 126 | display: none; 127 | .menu { 128 | /deep/ .el-button { 129 | width: 100%; 130 | display: block; 131 | margin-left: 0; 132 | border-radius: 0 !important; 133 | border-bottom: none; 134 | &:nth-last-of-type(1) { 135 | border-bottom: 1px solid #dcdfe6; 136 | } 137 | } 138 | } 139 | } 140 | // 下载图片弹窗 141 | .save-as-image-dialog { 142 | /deep/ .el-select { 143 | display: block; 144 | } 145 | } 146 | } 147 | -------------------------------------------------------------------------------- /src/views/index.vue: -------------------------------------------------------------------------------- 1 | 241 | 511 | 512 | 515 | -------------------------------------------------------------------------------- /doc/v1/g6-editor.md: -------------------------------------------------------------------------------- 1 | # 阅读建议 2 | 3 | 本文档目录层级比较多，建议安装Chrome插件 [Smart TOC](https://chrome.google.com/webstore/detail/smart-toc/lifgeihcfpkmmlfjbailfpfhbahhibba)，这样可清晰一览文档目录层次结构，同时也方便跳转查看。 4 | 5 | 6 | 7 | 因为本人仍在开发及探索中，所以文档的目录层级结构仍可能调整、内容尚不完整。 8 | 9 | 暂时只能是碰到什么便整理总结什么，如果有不懂的或希望补充的，可前往Github给我提issue 10 | 11 | > Github 12 | > 13 | > https://github.com/blueju/vue-g6-editor 14 | 15 | 16 | 17 | 目前遗留项目暂时没有别的需求了，可能我也不会太经常更新这个文档了，后续项目可能要转向gg-editor。 18 | 19 | 但如果有想问的，也可以提 issue，我会尽力尝试以我对g6-editor的了解，提供一点自己的鄙见和思路。 20 | 21 | 22 | 23 | 整一个文档写下来，感觉最深的就是：挺难挺繁琐的。 24 | 25 | 想写好一个文档，挺考验一个人梳理能力、总结能力、分类能力和表达能力的。 26 | 27 | 28 | 29 | # g6-editor 能做什么 30 | 31 | g6-editor 作为图编辑器，根据官方文档提供的DEMO，主要能做以下三类图： 32 | 33 | > 但在实际使用中，对所提供 API 的了解，似乎又不仅能做以下三类图，还可做网络图/拓扑图 34 | 35 | 1. 基础流程图 36 | 37 | ![image-20200404090107676](g6-editor.assets/image-20200404090107676.png) 38 | 39 | 2. 模型流程图 40 | 41 | ![image-20200404090150218](g6-editor.assets/image-20200404090150218.png) 42 | 43 | 3. 思维导图（脑图） 44 | 45 | ![image-20200404090205793](g6-editor.assets/image-20200404090205793.png) 46 | 47 | 48 | 49 | # HTML 50 | 51 | > 该目录主要整理 g6-editor 在HTML层面的术语解释、使用规范、示例和注意点。 52 | 53 | ## 1. 工具栏 54 | 55 | 工具栏负责盛放一个操作按钮，类似 wangEditor 中顶部的操作工具按钮区域。 56 | 57 | g6-editor 已经为我们做好了许多工作，我们只需要按规范写好HTML标签，然后给它们配上合适的图标和标题。 58 | 59 | ### 1.1 规范 60 | 61 | - 必须拥有 data-command 属性，并设置需要的命令，详见本文中内置命令列表。 62 | - class 中必须拥有 command。 63 | 64 | ### 1.2 示例 65 | 66 | > 我使用的图标是 font-awesome 67 | 68 | ```html 69 |
70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | .... 87 |
88 | ``` 89 | 90 | ## 2. 元素面板 91 | 92 | > 元素面板负责盛放一些可拖拽的元素，供使用人员拖拽到画板中。 93 | 94 | ### 2.1 元素 95 | 96 | 元素其实就是一个 div 标签，所以为了给予美观的效果，我一般会往元素标签中添加 svg 图片。 97 | 98 | g6-editor的官方文档中，仅仅只是给了一点例子，并未详细提及如何设置元素图片，结合搜索引擎，我也仅搜索四种元素图片，格式为svg。 99 | 100 | | 名称 | 地址 | 101 | | -------- | ------------------------------------------------------------ | 102 | | 起止节点 | https://gw.alipayobjects.com/zos/rmsportal/ZnPxbVjKYADMYxkTQXRi.svg | 103 | | 常规节点 | https://gw.alipayobjects.com/zos/rmsportal/wHcJakkCXDrUUlNkNzSy.svg | 104 | | 分叉节点 | https://gw.alipayobjects.com/zos/rmsportal/SnWIktArriZRWdGCnGfK.svg | 105 | | 模型节点 | https://gw.alipayobjects.com/zos/rmsportal/rQMUhHHSqwYsPwjXxcfP.svg | 106 | 107 | 如果你想自己自定义的元素图片，建议使用 svg ，因为使用 svg ，后续我们才能自由更改它的宽高。 108 | 109 | 至于如何制作符合自己需求的 svg 图片，可以在这里制作： 110 | 111 | https://c.runoob.com/more/svgeditor/ 112 | 113 | ### 2.2 示例 114 | 115 | ```html 116 |
117 |
125 | 126 |
127 |
135 | 136 |
137 |
145 | 146 |
147 |
155 | 156 |
157 |
158 | ``` 159 | 160 | ### 2.3 注意点 161 | 162 | #### 2.3.1 class 名称 163 | 164 | 以上示例中的 class 名称（getItem），不可删除，不可用其他 class 替换，否则会出现无法将元素拖拽入画板的问题。 165 | 166 | #### 2.3.2 data-* 属性 167 | 168 | 元素标签中，所有带有 * 属性都会被添加进节点的数据模型，data-type除外，因为它是g6-editor设定的保留字段，决定了元素类型，如果你取值为node，则拖出的是节点。 169 | 170 | data-size的写法特殊，是长×宽的方式，详见以上示例，data-size的大小决定了其被拖入画布后的大小。 171 | 172 | 以上示例中 HTML代码 和 data-* 属性，已是本人在保证语义化和无bug出现情况下的最精简版本，可直接复制使用。 173 | 174 | 熟悉G6的同学可能秒懂，但如果不清楚什么意思也没关系，后续操作中你就会发现其联系。 175 | 176 | #### 2.3.3 img 177 | 178 | 元素图片必须设置为禁止拖拽，draggable="false"，否则拖拽到画板后，需要二次点击才会取消元素选中状态。 179 | 180 | ## 3. 画布 181 | 182 | ### 3.1 示例 183 | 184 | ```html 185 |
186 | ``` 187 | 188 | ### 3.2 注意 189 | 190 | #### 3.2.1 id 191 | 192 | 画布标签的 id 必须为 page，否则控制台会报错，原因不明，错误如下： 193 | 194 | ![image-20200402182150873](g6-editor.assets/image-20200402182150873.png) 195 | 196 | #### 3.2.2 高度 197 | 198 | 必须在CSS中为画布设定高度 199 | 200 | ## 4. 属性栏 201 | 202 | > 属性栏一般在画布右侧，用于设置节点/边/画布等属性，类似这种： 203 | 204 | ![image-20200402235716994](g6-editor.assets/image-20200402235716994.png) 205 | 206 | ### 4.1 思路 207 | 208 | 我初次看 g6-editor 文档的示例DEMO时，看到属性栏的HTML标签中含有 data-status="node-selected" 等属性，以为，但是在后续的操作，并未发现 data-status="*" 的属性的作用，也可能是我暂时没有发现。 209 | 210 | > 更新：发现 data-status="*" 的属性的作用了 211 | > 212 | > 必须为属性栏加上 data-status。 213 | > 214 | > 大概效果是：当状态发生改变时，对应的属性栏会自动显示，其他属性栏则会自动隐藏。 215 | > 216 | > 具体效果可以前往 https://blueju.github.io/vue-g6-editor/dist/index.html 查看。 217 | 218 | 我在实践中感觉这里 g6-editor 并没有为我们提供什么现成的东西，更多是只是我们需要在右侧这一块区域，创建一些表单，在进行一些操作时（比如选中一个节点），通过API获取数据并填充到表单中，以此来展示所选元素的属性。 219 | 220 | ### 4.2 示例 221 | 222 | ```html 223 |
224 | 225 |
226 |
节点属性
227 |
228 | 229 | 230 | 231 | 232 | 233 | 234 | 235 | 236 | 237 | 238 | 239 | 240 | 241 | 242 |
243 |
244 | 245 |
246 |
边属性
247 |
248 | 249 | 250 | 251 | 252 | 253 | 254 | 255 | 256 | 257 | 258 | 259 | 260 |
261 |
262 |
263 | ``` 264 | 265 | ### 4.3 官方文档示例对比 266 | 267 | > 未免也太简陋了。。。 268 | 269 | ```html 270 |
271 |
节点属性栏
272 |
边属性栏
273 |
群组属性栏
274 |
画布属性栏
275 |
多选时属性栏
276 |
277 | ``` 278 | 279 | ## 5. 缩略图 280 | 281 | HTML层面仅以下代码即可，JS层面 g6-editor 会自动往其中填入我们所需的缩略图。 282 | 283 | ```html 284 |
285 | ``` 286 | 287 | ## 6. 右键菜单 288 | 289 | HTML层面仅以下代码即可，我们仅需要再加点样式使其美观即可。JS层面 g6-editor 会自动在不同状态下控制它们的显示隐藏状态。 290 | 291 | ### 6.1 示例 292 | 293 | ```html 294 |
295 |
296 | 297 | 298 | 299 |
300 |
301 | 302 |
303 |
304 | 305 | 306 | 307 | 308 |
309 |
310 | 311 | 312 |
313 |
314 | 315 | 316 | 317 |
318 |
319 | ``` 320 | 321 | ### 6.2 注意 322 | 323 | - 状态改变对应的事件是 statuschange，如果你绑定了 statuschange 事件，你可以在控制台中打印查看当前是什么状态。 324 | 325 | - 以下示例代码已是最简，建议直接复用，data-status="status"、class="menu" 和 class="command" 均不可删除，否则会出现问题。 326 | - 右键菜单一般只有在我们点击右键的时候才出现，但 g6-editor 默认右键菜单一开始就是显示的，这就显得非常不合理。因此我们需要手动在CSS中先给它设置一个 display:none，对右键菜单进行隐藏。 327 | 328 | 329 | 330 | # JavaScript 331 | 332 | 该目录主要整理 g6-editor 在 JS 层面的术语解释、使用规范、示例和注意点。 333 | 334 | ## 1. 关闭体验改进计划打点请求 335 | 336 | 为了更好服务⽤户，G6Editor 会将 URL 和版本信息发送回 AntV 服务器，除了 URL 与 G6 版本信息外，不会收集任何其他信息，不过现在这个服务器已经关闭了，就算不关也没事。 337 | 338 | 如有担⼼，可以通过下⾯的代码关闭： 339 | 340 | ```javascript 341 | G6Editor.track(false) 342 | ``` 343 | 344 | ## 2. 组件 345 | 346 | ### 右键菜单 347 | 348 | 右键菜单类，负责处理右键菜单的显示隐藏、命令绑定、可⽤禁⽤状态控制。 349 | 350 | 351 | 352 | 353 | 354 | ### 缩略图 355 | 356 | 缩略图类，负责绘制缩略图及双图联动。 357 | 358 | #### 初始化 359 | 360 | ```javascript 361 | const minimap = new G6Editor.Minimap({ 362 | // 配置项 363 | container: "minimap", 364 | width: 320, 365 | height: 200 366 | ... 367 | }) 368 | ``` 369 | 370 | #### 配置项 371 | 372 | - container 373 | 374 | > 必填 object / string 375 | > 376 | > 缩略图HTML标签的DOM对象或者ID 377 | 378 | - width 379 | 380 | > 必填 number 381 | > 382 | > 宽度 383 | 384 | - height 385 | 386 | > 必填 number 387 | > 388 | > 高度 389 | 390 | - viewportWindowStyle 391 | 392 | > 选填 object 393 | > 394 | > 缩略图可视区域视窗样式 395 | > 396 | > 参考 [G/G2 绘图属性](https://g2.antv.vision/zh/docs/manual/shape-attrs#gatsby-focus-wrapper)（官方文档中的链接已经404，这是我根据一些关键词找到，属性应该对的上） 397 | 398 | - viewportBackStyle 399 | 400 | > 选填 object 401 | > 402 | > 缩略图可视区域视窗样式 403 | > 404 | > 参考 [G/G2 绘图属性](https://g2.antv.vision/zh/docs/manual/shape-attrs#gatsby-focus-wrapper)（官方文档中的链接已经404，这是我根据一些关键词找到，属性应该对的上） 405 | 406 | 407 | 408 | 409 | 410 | ## Editor 编辑器 411 | 412 | 该类是整个 g6-editor 的主控类，其主要职责是将 g6-editor 的各个组件协同起来。（摘自官方文档并做了微调） 413 | 414 | > 至于为什么说是类，可能他们是用 ES6 语法 class 实现的吧。 415 | 416 | ### 实例化 417 | 418 | 使用需要实例化 419 | 420 | ```javascript 421 | import G6Editor from "@antv/g6-editor"; 422 | const editor = new G6Editor(); 423 | ... 424 | ``` 425 | 426 | ### 方法列表 427 | 428 | > 可打印实例化后 editor，通过查看上一层原型链的方式查看更多方法。 429 | > 430 | > 除下表方法以外，还有一些方法，但均以 _ 开头，可能为私有方法用得少，下表不再列举，想看的可在控制台自行查看。 431 | 432 | | 方法 | 名称 | 备注 | 433 | | ------------------- | ---------- | --------------------------------------------------------- | 434 | | add | 添加组件 | | 435 | | commandEnable | | | 436 | | destroy | 销毁编辑器 | | 437 | | executeCommand | 执行命令 | 通过此方法执行的操作，均会进入队列，可撤销/重做，建议使用 | 438 | | getCommands | | | 439 | | getComponents | | | 440 | | getComponentsByType | | | 441 | | getCurrentCommand | | | 442 | | getCurrentPage | | | 443 | | getDefaultCfg | | | 444 | | setCommandDOMenable | | | 445 | 446 | 447 | 448 | ## Page 页面 449 | 450 | page 不需要独立去实例化之类的设置，从使用上来，可以说和 editor 是一体的，实例化完editor 就有 page了，就可以通过 js 获取 page了。 451 | 452 | ``` 453 | let page = editor.getCurrentPage() 454 | ``` 455 | 456 | 457 | 458 | ## Flow 流程图 459 | 460 | ### 简介 461 | 462 | 流程图页面类，专用于构建有向的流程图编辑器。 463 | 464 | 继承自 Page，因此在实例化完 editor 后，我们就可以通过 js 获取 Flow 了。 465 | 466 | ```javascript 467 | editor.getCurrentPage().getGraph({ 468 | graph: { 469 | container: "page", 470 | // ... 471 | }, 472 | align: { 473 | // ... 474 | }, 475 | grid: { 476 | // ... 477 | }, 478 | shortcut: { 479 | // ... 480 | }, 481 | noEndEdge: true, 482 | }); 483 | ``` 484 | 485 | ### 配置项 486 | 487 | #### graph 488 | 489 | G6 图配置项，参考以下： 490 | 491 | > g6-editor官网文档中附的G6链接已404失效，以下是我找到的新G6文档链接 492 | 493 | - 3.0 版本 https://www.yuque.com/antv/g6/graph#cXwZ0 494 | - 2.0 版本 https://www.yuque.com/antv/g6/api-graph 495 | 496 | 注意：svg 渲染暂时有⽐较严重的性能问题，暂时不推荐使⽤。 497 | 498 | #### align 499 | 500 | 对齐配置项，对象类型 501 | 502 | ##### line 503 | 504 | 辅助对齐线样式，对象类型 505 | 506 | ###### stroke 507 | 508 | 辅助对齐线颜色 509 | 510 | ###### lineWidth 511 | 512 | 辅助对齐线粗细 513 | 514 | ##### item 515 | 516 | 元素对齐方式开关，布尔类型/字符串类型 517 | 518 | | 值 | 备注 | 519 | | ---------- | -------------------- | 520 | | true | 开启全方位对齐，默认 | 521 | | false | 不开启对齐 | 522 | | horizontal | 仅开启水平对齐 | 523 | | vertical | 仅开启垂直对齐 | 524 | | center | 仅开启居中对齐 | 525 | 526 | ##### grid 527 | 528 | 网格对齐开关，布尔类型/字符串类型 529 | 530 | | 值 | 备注 | 531 | | ----- | ------------ | 532 | | true | 开启网格对齐 | 533 | | false | 关闭网格对齐 | 534 | | cc | 居中对齐 | 535 | | tl | 左上角对齐 | 536 | 537 | #### grid 538 | 539 | 网格配置项，对象类型 540 | 541 | ##### cell 542 | 543 | 网孔尺寸，数字类型 544 | 545 | ##### line 546 | 547 | 网格线样式，对象类型 548 | 549 | ###### stroke 550 | 551 | 网格线颜色 552 | 553 | ###### lineWidth 554 | 555 | 网格线粗细 556 | 557 | #### shortcut 558 | 559 | > 控制命令的快捷键是否开启 560 | 561 | g6-editor内置命令的均已经默认开启，如果我们自定义了新命令并希望能用快捷键触发，那么需要在此处开启，否则无法生效。 562 | 563 | #### noEndEdge 564 | 565 | > 布尔类型，默认是true 566 | 567 | 是否支持悬空边 568 | 569 | #### 配置项示例 570 | 571 | > 配置这环节，需要自己多试试，对比效果 572 | 573 | ```javascript 574 | const flow = new G6Editor.Flow({ 575 | graph: { 576 | container: "page" 577 | }, 578 | align: { 579 | line: { 580 | // 颜色 581 | stroke: "#FA8C16", 582 | // 粗细 583 | lineWidth: 1 584 | }, 585 | // 开启全方位对齐 586 | item: true, 587 | // 网格对齐 588 | grid: true 589 | }, 590 | grid: { 591 | // 网孔尺寸 592 | cell: 20, 593 | // 网格线样式 594 | line: { 595 | // 颜色 596 | stroke: "#FA8C16", 597 | // 粗细 598 | lineWidth: 10 599 | } 600 | }, 601 | shortcut: { 602 | // 开启自定义命令保存的快捷键 603 | save: true 604 | }, 605 | noEndEdge: true 606 | }); 607 | ``` 608 | 609 | 610 | 611 | ### 静态方法 612 | 613 | #### registerNode 614 | 615 | 注册⼀个流程图节点 616 | 617 | 618 | 619 | #### registerEdge 620 | 621 | 注册⼀个流程图边 622 | 623 | 624 | 625 | 626 | 627 | ### 实例方法 628 | 629 | 630 | 631 | 632 | 633 | ## Koni 网络图/拓扑图 634 | 635 | 636 | 637 | ## MindMap 思维导图/脑图 638 | 639 | 640 | 641 | 642 | 643 | 644 | 645 | ## 事件 646 | 647 | 根据官网文档，事件包括鼠标事件、编辑器事件、数据变更事件、状态变更事件、控制事件这几类，官方文档仅仅只是做了模糊概括，并未详细列出有哪些事件。 648 | 649 | 通过查阅原官方文档、查阅源码 和 实际操作，总结出以下事件列表： 650 | 651 | ### 事件列表 652 | 653 | > import G6Editor from "@antv/g6-editor"; 654 | > 655 | > const editor = new G6Editor(); 656 | > 657 | > const page = editor.getCurrentPage() 658 | > 659 | > // 下表中，节点、边等，一并简称为元素 660 | 661 | | 事件 | 触发时机 | 备注 | 提供者 | 662 | | -------------------------- | ---------------------- | ---- | ------------- | 663 | | aftercommandexecute | 命令执行后 | | editor 编辑器 | 664 | | beforecommandexecute | 命令执行前 | | editor 编辑器 | 665 | | afterchange | 任何改变发生后 | | page 画布 | 666 | | afterdelete | 删除元素后 | | page 画布 | 667 | | afteritemactived | | | page 画布 | 668 | | afteritemselected | 选择元素后 | | page 画布 | 669 | | afteritemunactived | | | page 画布 | 670 | | afteritemunselected | 已选中元素被取消选中后 | | page 画布 | 671 | | anchor:mousedown | | | page 画布 | 672 | | anchor:mouseenter | | | page 画布 | 673 | | anchor:mouseleave | | | page 画布 | 674 | | anchor:mouseup | | | page 画布 | 675 | | beforechange | 任何改变发生前 | | page 画布 | 676 | | beforeitemactived | | | page 画布 | 677 | | beforeitemselected | | | page 画布 | 678 | | beforeitemunactived | | | page 画布 | 679 | | beforeitemunselected | | | page 画布 | 680 | | click | | | page 画布 | 681 | | contextmenu | | | page 画布 | 682 | | dragedge:beforeshowanchor | | | page 画布 | 683 | | edge:mouseenter | | | page 画布 | 684 | | edge:mouseleave | | | page 画布 | 685 | | hoveranchor:beforeaddedge | | | page 画布 | 686 | | hovernode:beforeshowanchor | | | page 画布 | 687 | | keyup | | | page 画布 | 688 | | mousedown | | | page 画布 | 689 | | mouseenter | | | page 画布 | 690 | | mouseleave | | | page 画布 | 691 | | mouseup | | | page 画布 | 692 | | node:click | | | page 画布 | 693 | | node:mousedown | | | page 画布 | 694 | | node:mouseenter | | | page 画布 | 695 | | node:mouseleave | | | page 画布 | 696 | | node:mouseup | | | page 画布 | 697 | | statuschange | | | page 画布 | 698 | | | | | | 699 | | | | | | 700 | | | | | | 701 | | | | | | 702 | | | | | | 703 | | | | | | 704 | | | | | | 705 | | | | | | 706 | | | | | | 707 | 708 | 709 | 710 | ### 如何绑定事件 711 | 712 | 使用 on 方法 713 | 714 | 715 | 716 | ### 如何查看更多事件 717 | 718 | > 上面我发现整理的事件，可 719 | 720 | ```javascript 721 | import G6Editor from "@antv/g6-editor"; 722 | let editor = new G6Editor(); 723 | // 可能无法立即查看，可设个定时器，1秒后查看 724 | let events = editor.getCurrentPage()._events; 725 | console.log(events); 726 | ``` 727 | 728 | 729 | 730 | ## 方法 731 | 732 | 方法有很多，我可能没办法将全部都列出来并解释，在实际操作中，更多的是需要大家自己通过在控制台打印的方式，在原型链中查找符合需求的方法。 733 | 734 | ### 开启网格对齐 735 | 736 | showGrid 737 | 738 | 739 | 740 | ### 关闭网格对齐 741 | 742 | hideGrid 743 | 744 | 745 | 746 | ### 删除元素 747 | 748 | remove 749 | 750 | 751 | 752 | ### 调整画布内容整体方位 753 | 754 | ```javascript 755 | editor.getCurrentPage().getGraph().setFitView("cc") 756 | ``` 757 | 758 | 方位有以下9种： 759 | 760 | > 左上 中上 右上 761 | > 762 | > 左中 中间 右中 763 | > 764 | > 左下 下中 右下 765 | 766 | | tl | tc | tr | 767 | | :--: | :--: | :--: | 768 | | lc | cc | rc | 769 | | bl | bc | br | 770 | 771 | 772 | 773 | 774 | 775 | ### 保存数据模型 776 | 777 | 将画布数据保存为数据模型，执行该方法将返回一个包含节点数据和边数据的对象 778 | 779 | ```javascript 780 | import G6Editor from "@antv/g6-editor"; 781 | let editor = new G6Editor(); 782 | // 可能无法立即查看，可设个定时器，1秒后查看 783 | editor.getCurrentPage().save(); 784 | // {nodes: [...], edges: [...]} 785 | ``` 786 | 787 | ### 保存为图片 788 | 789 | 将画布数据数据保存为图片，执行该方法将返回一个canvas 790 | 791 | ```javascript 792 | import G6Editor from "@antv/g6-editor"; 793 | let editor = new G6Editor(); 794 | // 可能无法立即查看，可设个定时器，1秒后查看 795 | editor.getCurrentPage().saveImage(); 796 | ``` 797 | 798 | ### 读取数据 799 | 800 | 读取数据模型，并展示在画板中，入参是一个包含节点数据和边数据的对象 801 | 802 | ```javascript 803 | import G6Editor from "@antv/g6-editor"; 804 | let editor = new G6Editor(); 805 | let dataModel = {...} 806 | editor.getCurrentPage().read(dataModel); 807 | ``` 808 | 809 | 810 | 811 | ## 命令 812 | 813 | ### 内置命令 814 | 815 | #### 内置命令列表 816 | 817 | > 共26个，按字母排序 818 | 819 | | 命令 | 备注 | 适用页面 | 820 | | -------------- | ------------ | -------- | 821 | | add | 新增元素 | | 822 | | addGroup | 组合 | | 823 | | appendChild | 添加子节点 | 脑图 | 824 | | append | 添加相邻节点 | 脑图 | 825 | | autoZoom | 自适应尺寸 | 所有 | 826 | | clear | 清空画布 | 所有 | 827 | | collapse | 收缩 | | 828 | | collapseExpand | 折叠/展开 | | 829 | | common | | | 830 | | copy | 复制 | | 831 | | copyAdjacent | | | 832 | | delete | 删除 | | 833 | | expand | 展开 | | 834 | | move | 移动 | | 835 | | moveMindNode | 移动脑图节点 | | 836 | | multiSelect | 多选 | | 837 | | paste | 粘贴 | | 838 | | pasteHere | | | 839 | | redo | 重做 | | 840 | | resetZoom | 实际尺寸 | | 841 | | selectAll | 全选 | | 842 | | toBack | 降低层级 | | 843 | | toFront | 提升层级 | | 844 | | unGroup | 取消组合 | | 845 | | undo | 撤销 | | 846 | | update | 更新 | | 847 | | zoomIn | 放大 | | 848 | | zoomOut | 缩小 | | 849 | | zoomTo | | | 850 | 851 | #### 内置命令的源码对应位置 852 | 853 | **源码文件：**g6Editor.js 854 | 855 | **源码对应位置：**将 g6Editor.js 格式化后，检索关键词 registerCommand("，如下图： 856 | 857 | ![image-20200401102141528](g6-editor.assets/image-20200401102141528.png) 858 | 859 | ### 重载内置命令 860 | 861 | ### 注册自定义命令 862 | 863 | #### 应用场景 864 | 865 | 我想通过点击工具栏中的保存图标来保存数据模型 866 | 867 | ```html 868 | 869 | ``` 870 | 871 | #### 方案一 872 | 873 | 使用 editor.Command.registerCommand() 方法注册自定义命令save，在其正向命令中，添加自己需要的处理逻辑。 874 | 875 | ```javascript 876 | Command.registerCommand("save", { 877 | // 命令是否进入队列，进入队列可执行撤销/重做，默认是 true 878 | queue: false, 879 | // 命令是否可用 880 | enable(eidtor) { 881 | return true; 882 | }, 883 | // 正向命令 884 | execute(editor) { 885 | ... 886 | }, 887 | // 反向命令 888 | back(editor) { 889 | ... 890 | }, 891 | // 快捷键：Ctrl + Shirt + S 892 | shortcutCodes: [["ctrlKey", "shiftKey", "s"]] 893 | }); 894 | 895 | ``` 896 | 897 | #### 方案二 898 | 899 | 当然我们有另外一种方式，即给保存图标添加点击事件，在方法中执行自己需要的处理逻辑。 900 | 901 | #### 注意 902 | 903 | 注册的自定义命令中，即便你设置了快捷键，但还是默认不启用的。 904 | 905 | 如果需要启用，需要按如下设置进行开启。 906 | 907 | 由于我本人使用的 Flow 流程图，所以在 Flow 中设置开启，如果你使用的是 MindMap 脑图，则可能在 new G6Editor.MindMap({}) 中设置开启。 908 | 909 | ```javascript 910 | const flow = new G6Editor.Flow({ 911 | graph: { 912 | container: "page" 913 | }, 914 | shortcut: { 915 | // 开启保存快捷键 916 | save: true 917 | } 918 | }); 919 | ``` 920 | 921 | ## 快捷键 922 | 923 | 通过快捷键，可快速执行一些命令，默认情况下，含快捷键的内置命令有： 924 | 925 | > 下表中的"Mac快捷键" 和"适用页面"，摘自官方文档，本人未验证 926 | > 927 | > 源码文件：g6Editor.js 928 | > 929 | > 源码对应位置：将 g6Editor.js 格式化后，检索关键词 shortcutCodes: [ 930 | > 931 | > 官方文档PDF中的快捷键表格，存在错误，因为在源码检索 copy/paste 等命令并未发现其有快捷键 932 | > 933 | > 共有10个，按字母排序 934 | 935 | | 命令 | Win 快捷键 | Mac 快捷键 | 备注 | 适⽤⻚⾯ | 936 | | :------------: | :--------------: | :--------: | :----------: | :------: | 937 | | append | Enter | Enter | 添加相邻节点 | 思维导图 | 938 | | appendChild | Tab | Tab | 添加⼦节点 | 思维导图 | 939 | | collapseExpand | Ctrl + / | ⌘/ | 折叠/展开 | 思维导图 | 940 | | delete | Delete | Delete | 删除 | 所有页面 | 941 | | redo | Ctrl + Shift + Z | ⇧⌘Z | 重做 | 所有页面 | 942 | | resetZoom | Ctrl + 0 | ⌘0 | 实际尺⼨ | 所有页面 | 943 | | selectAll | Ctrl+A | ⌘A | 全选 | 所有页面 | 944 | | undo | Ctrl + Z | ⌘Z | 撤销 | 所有页面 | 945 | | zoomIn | Ctrl + = | ⌘= | 放大 | 所有页面 | 946 | | zoomOut | Ctrl + - | ⌘- | 缩小 | 所有页面 | 947 | 948 | 949 | 950 | 951 | 952 | 953 | 954 | 955 | 956 | 957 | 958 | | 命令 | Win 快捷键 | Mac 快捷键 | 备注 | 适⽤⻚⾯ | 959 | | :------------: | :--------------: | :--------: | :----------: | :------: | 960 | | clear | | | 清空画布 | 所有页面 | 961 | | selectAll | Ctrl+A | ⌘A | 全选 | 所有页面 | 962 | | undo | Ctrl + Z | ⌘Z | 撤销 | 所有页面 | 963 | | redo | Ctrl + Shift + Z | ⇧⌘Z | 重做 | 所有页面 | 964 | | delete | Delete | Delete | 删除 | 所有页面 | 965 | | zoomIn | Ctrl + = | ⌘= | 放大 | 所有页面 | 966 | | zoomOut | Ctrl + - | ⌘- | 缩小 | 所有页面 | 967 | | autoZoom | | | ⾃适应尺⼨ | 所有页面 | 968 | | resetZoom | Ctrl + 0 | ⌘0 | 实际尺⼨ | 所有页面 | 969 | | toFront | | | 提升层级 | 所有页面 | 970 | | toBack | | | 下降层级 | 所有页面 | 971 | | copy | Ctrl + C | ⌘C | 复制 | 流程图 | 972 | | paste | Ctrl + V | ⌘V | 粘贴 | 流程图 | 973 | | multiSelect | | | 多选模式 | 流程图 | 974 | | addGroup | Ctrl + G | ⌘G | 组合 | 流程图 | 975 | | unGroup | Ctrl + Shift + G | ⇧⌘G | 取消组合 | 流程图 | 976 | | append | Enter | Enter | 添加相邻节点 | 思维导图 | 977 | | appendChild | Tab | Tab | 添加⼦节点 | 思维导图 | 978 | | collapseExpand | Ctrl + / | ⌘/ | 折叠/展开 | 思维导图 | 979 | 980 | > 源码位置： 981 | > 982 | > 983 | 984 | 985 | 986 | 987 | 988 | ## 边 989 | 990 | ### 内置边 991 | 992 | #### 内置边列表 993 | 994 | | 名称 | 备注 | 适用页面 | 995 | | --------------------- | ------------------------------------------ | ------------- | 996 | | common | 直线，不带箭头 | | 997 | | | | | 998 | | flow-base | 直线，带箭头 | 流程图 | 999 | | flow-polyline | 流程图折线 | 流程图 | 1000 | | flow-polyline-round | 流程图圆角折线 | 流程图 | 1001 | | flow-smooth | 流程图曲线 | 流程图 | 1002 | | | | | 1003 | | diagram-base | 直线，带箭头
与 flow-base 的区别未知 | | 1004 | | | | | 1005 | | page-base | 效果未知 | | 1006 | | mind-placeholder-edge | 弧线，无锚点，线位于节点底部 | 思维导图 | 1007 | | mind-edge | 弧线 | 思维导图 | 1008 | | koni-base | 直线，带箭头
会围绕出发点自动调整方向 | ⽹络图/拓扑图 | 1009 | | | | | 1010 | 1011 | #### 内置边的源码对应位置 1012 | 1013 | **源码文件：**g6Editor.js 1014 | 1015 | **源码对应位置：**将 g6Editor.js 格式化后，检索关键词 registerCommand("，如下图： 1016 | 1017 | ![image-20200402104501328](g6-editor.assets/image-20200402104501328.png) 1018 | 1019 | ### 重载内置边 1020 | 1021 | ### 注册自定义边 1022 | 1023 | 1024 | 1025 | -------------------------------------------------------------------------------- /dist/js/app.js: -------------------------------------------------------------------------------- 1 | /******/ (function(modules) { // webpackBootstrap 2 | /******/ // install a JSONP callback for chunk loading 3 | /******/ function webpackJsonpCallback(data) { 4 | /******/ var chunkIds = data[0]; 5 | /******/ var moreModules = data[1]; 6 | /******/ var executeModules = data[2]; 7 | /******/ 8 | /******/ // add "moreModules" to the modules object, 9 | /******/ // then flag all "chunkIds" as loaded and fire callback 10 | /******/ var moduleId, chunkId, i = 0, resolves = []; 11 | /******/ for(;i < chunkIds.length; i++) { 12 | /******/ chunkId = chunkIds[i]; 13 | /******/ if(Object.prototype.hasOwnProperty.call(installedChunks, chunkId) && installedChunks[chunkId]) { 14 | /******/ resolves.push(installedChunks[chunkId][0]); 15 | /******/ } 16 | /******/ installedChunks[chunkId] = 0; 17 | /******/ } 18 | /******/ for(moduleId in moreModules) { 19 | /******/ if(Object.prototype.hasOwnProperty.call(moreModules, moduleId)) { 20 | /******/ modules[moduleId] = moreModules[moduleId]; 21 | /******/ } 22 | /******/ } 23 | /******/ if(parentJsonpFunction) parentJsonpFunction(data); 24 | /******/ 25 | /******/ while(resolves.length) { 26 | /******/ resolves.shift()(); 27 | /******/ } 28 | /******/ 29 | /******/ // add entry modules from loaded chunk to deferred list 30 | /******/ deferredModules.push.apply(deferredModules, executeModules || []); 31 | /******/ 32 | /******/ // run deferred modules when all chunks ready 33 | /******/ return checkDeferredModules(); 34 | /******/ }; 35 | /******/ function checkDeferredModules() { 36 | /******/ var result; 37 | /******/ for(var i = 0; i < deferredModules.length; i++) { 38 | /******/ var deferredModule = deferredModules[i]; 39 | /******/ var fulfilled = true; 40 | /******/ for(var j = 1; j < deferredModule.length; j++) { 41 | /******/ var depId = deferredModule[j]; 42 | /******/ if(installedChunks[depId] !== 0) fulfilled = false; 43 | /******/ } 44 | /******/ if(fulfilled) { 45 | /******/ deferredModules.splice(i--, 1); 46 | /******/ result = __webpack_require__(__webpack_require__.s = deferredModule[0]); 47 | /******/ } 48 | /******/ } 49 | /******/ 50 | /******/ return result; 51 | /******/ } 52 | /******/ 53 | /******/ // The module cache 54 | /******/ var installedModules = {}; 55 | /******/ 56 | /******/ // object to store loaded and loading chunks 57 | /******/ // undefined = chunk not loaded, null = chunk preloaded/prefetched 58 | /******/ // Promise = chunk loading, 0 = chunk loaded 59 | /******/ var installedChunks = { 60 | /******/ "app": 0 61 | /******/ }; 62 | /******/ 63 | /******/ var deferredModules = []; 64 | /******/ 65 | /******/ // The require function 66 | /******/ function __webpack_require__(moduleId) { 67 | /******/ 68 | /******/ // Check if module is in cache 69 | /******/ if(installedModules[moduleId]) { 70 | /******/ return installedModules[moduleId].exports; 71 | /******/ } 72 | /******/ // Create a new module (and put it into the cache) 73 | /******/ var module = installedModules[moduleId] = { 74 | /******/ i: moduleId, 75 | /******/ l: false, 76 | /******/ exports: {} 77 | /******/ }; 78 | /******/ 79 | /******/ // Execute the module function 80 | /******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__); 81 | /******/ 82 | /******/ // Flag the module as loaded 83 | /******/ module.l = true; 84 | /******/ 85 | /******/ // Return the exports of the module 86 | /******/ return module.exports; 87 | /******/ } 88 | /******/ 89 | /******/ 90 | /******/ // expose the modules object (__webpack_modules__) 91 | /******/ __webpack_require__.m = modules; 92 | /******/ 93 | /******/ // expose the module cache 94 | /******/ __webpack_require__.c = installedModules; 95 | /******/ 96 | /******/ // define getter function for harmony exports 97 | /******/ __webpack_require__.d = function(exports, name, getter) { 98 | /******/ if(!__webpack_require__.o(exports, name)) { 99 | /******/ Object.defineProperty(exports, name, { enumerable: true, get: getter }); 100 | /******/ } 101 | /******/ }; 102 | /******/ 103 | /******/ // define __esModule on exports 104 | /******/ __webpack_require__.r = function(exports) { 105 | /******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) { 106 | /******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' }); 107 | /******/ } 108 | /******/ Object.defineProperty(exports, '__esModule', { value: true }); 109 | /******/ }; 110 | /******/ 111 | /******/ // create a fake namespace object 112 | /******/ // mode & 1: value is a module id, require it 113 | /******/ // mode & 2: merge all properties of value into the ns 114 | /******/ // mode & 4: return value when already ns object 115 | /******/ // mode & 8|1: behave like require 116 | /******/ __webpack_require__.t = function(value, mode) { 117 | /******/ if(mode & 1) value = __webpack_require__(value); 118 | /******/ if(mode & 8) return value; 119 | /******/ if((mode & 4) && typeof value === 'object' && value && value.__esModule) return value; 120 | /******/ var ns = Object.create(null); 121 | /******/ __webpack_require__.r(ns); 122 | /******/ Object.defineProperty(ns, 'default', { enumerable: true, value: value }); 123 | /******/ if(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key)); 124 | /******/ return ns; 125 | /******/ }; 126 | /******/ 127 | /******/ // getDefaultExport function for compatibility with non-harmony modules 128 | /******/ __webpack_require__.n = function(module) { 129 | /******/ var getter = module && module.__esModule ? 130 | /******/ function getDefault() { return module['default']; } : 131 | /******/ function getModuleExports() { return module; }; 132 | /******/ __webpack_require__.d(getter, 'a', getter); 133 | /******/ return getter; 134 | /******/ }; 135 | /******/ 136 | /******/ // Object.prototype.hasOwnProperty.call 137 | /******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); }; 138 | /******/ 139 | /******/ // __webpack_public_path__ 140 | /******/ __webpack_require__.p = "https://blueju.github.io/vue-g6-editor/dist/"; 141 | /******/ 142 | /******/ var jsonpArray = window["webpackJsonp"] = window["webpackJsonp"] || []; 143 | /******/ var oldJsonpFunction = jsonpArray.push.bind(jsonpArray); 144 | /******/ jsonpArray.push = webpackJsonpCallback; 145 | /******/ jsonpArray = jsonpArray.slice(); 146 | /******/ for(var i = 0; i < jsonpArray.length; i++) webpackJsonpCallback(jsonpArray[i]); 147 | /******/ var parentJsonpFunction = oldJsonpFunction; 148 | /******/ 149 | /******/ 150 | /******/ // add entry module to deferred list 151 | /******/ deferredModules.push([0,"chunk-vendors"]); 152 | /******/ // run deferred modules when ready 153 | /******/ return checkDeferredModules(); 154 | /******/ }) 155 | /************************************************************************/ 156 | /******/ ({ 157 | 158 | /***/ "./node_modules/cache-loader/dist/cjs.js?!./node_modules/babel-loader/lib/index.js!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader/lib/index.js?!./src/App.vue?vue&type=script&lang=js&": 159 | /*!*************************************************************************************************************************************************************************************************************************************!*\ 160 | !*** ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/App.vue?vue&type=script&lang=js& ***! 161 | \*************************************************************************************************************************************************************************************************************************************/ 162 | /*! exports provided: default */ 163 | /***/ (function(module, __webpack_exports__, __webpack_require__) { 164 | 165 | "use strict"; 166 | eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _views_index__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./views/index */ \"./src/views/index.vue\");\n/* harmony import */ var _views_cankao__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./views/cankao */ \"./src/views/cankao.vue\");\n//\n//\n//\n//\n//\n//\n//\n\n\n/* harmony default export */ __webpack_exports__[\"default\"] = ({\n name: 'App',\n components: {\n VueG6Editor: _views_index__WEBPACK_IMPORTED_MODULE_0__[\"default\"],\n cankao: _views_cankao__WEBPACK_IMPORTED_MODULE_1__[\"default\"]\n }\n});\n\n//# sourceURL=webpack:///./src/App.vue?./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options"); 167 | 168 | /***/ }), 169 | 170 | /***/ "./node_modules/cache-loader/dist/cjs.js?!./node_modules/babel-loader/lib/index.js!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader/lib/index.js?!./src/views/cankao.vue?vue&type=script&lang=js&": 171 | /*!**********************************************************************************************************************************************************************************************************************************************!*\ 172 | !*** ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/views/cankao.vue?vue&type=script&lang=js& ***! 173 | \**********************************************************************************************************************************************************************************************************************************************/ 174 | /*! exports provided: default */ 175 | /***/ (function(module, __webpack_exports__, __webpack_require__) { 176 | 177 | "use strict"; 178 | eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var core_js_modules_es_array_for_each__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! core-js/modules/es.array.for-each */ \"./node_modules/core-js/modules/es.array.for-each.js\");\n/* harmony import */ var core_js_modules_es_array_for_each__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(core_js_modules_es_array_for_each__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var core_js_modules_web_dom_collections_for_each__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! core-js/modules/web.dom-collections.for-each */ \"./node_modules/core-js/modules/web.dom-collections.for-each.js\");\n/* harmony import */ var core_js_modules_web_dom_collections_for_each__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(core_js_modules_web_dom_collections_for_each__WEBPACK_IMPORTED_MODULE_1__);\n/* harmony import */ var _antv_g6_editor__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @antv/g6-editor */ \"./node_modules/@antv/g6-editor/build/g6Editor.js\");\n/* harmony import */ var _antv_g6_editor__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_antv_g6_editor__WEBPACK_IMPORTED_MODULE_2__);\n\n\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n\n/* harmony default export */ __webpack_exports__[\"default\"] = ({\n data: function data() {\n return {\n graph: null,\n nodeLabel: ''\n };\n },\n mounted: function mounted() {\n this.initG6Editor();\n },\n methods: {\n // 画布保存方法\n saveGraph: function saveGraph() {\n // 获取当前page\n var page = this.editor.getCurrentPage(); // 保存画布\n\n var data = page.save();\n },\n // 修改Node的label\n changeNodeLabel: function changeNodeLabel(value) {\n var editor = this.editor;\n editor.executeCommand(function () {\n var page = editor.getCurrentPage();\n var selectedItems = page.getSelected();\n selectedItems.forEach(function (item) {\n page.update(item.id, {\n label: value\n });\n });\n });\n },\n // 初始化\n initG6Editor: function initG6Editor() {\n // this\n var _this = this; // G6Editor\n\n\n var editor = new _antv_g6_editor__WEBPACK_IMPORTED_MODULE_2___default.a(); // editor挂载到Vue\n\n this.editor = editor; // Flow\n\n var Flow = _antv_g6_editor__WEBPACK_IMPORTED_MODULE_2___default.a.Flow; // Command\n\n var Command = _antv_g6_editor__WEBPACK_IMPORTED_MODULE_2___default.a.Command; // 定义Save命令\n\n Command.registerCommand('save', {\n // 命令是否进入队列，默认是 true\n queue: false,\n // 命令是否可用\n enable: function enable(eidtor) {\n return true;\n },\n // 正向命令\n execute: function execute(eidtor) {\n _this.saveGraph();\n },\n // 快捷键：Ctrl+shirt+s\n shortcutCodes: [['ctrlKey', 'shiftKey', 's']]\n }); // 主画布\n // Mind 思维导图\n // Koni 网络图、拓扑图\n // Flow 流程图\n\n var page = new _antv_g6_editor__WEBPACK_IMPORTED_MODULE_2___default.a.Flow({\n graph: {\n container: 'page'\n }\n }); // 设置边样式，内置3种样式\n // flow-polylinels\n // flow-polyline-round\n // flow-smooth\n\n page.getGraph().edge({\n shape: 'flow-polyline'\n }); // 自定义节点\n\n Flow.registerNode('customNode', {\n draw: function draw(item) {\n var group = item.getGraphicGroup();\n var model = item.getModel();\n group.addShape('text', {\n attrs: {\n x: 0,\n y: 0,\n fill: '#333',\n text: model.label\n }\n });\n group.addShape('text', {\n attrs: {\n x: 0,\n y: 0,\n fill: '#333',\n text: ' (' + model.x + ', ' + model.y + ') \\n 原点是组的图坐标',\n textBaseline: 'top'\n }\n });\n return group.addShape('rect', {\n attrs: {\n x: 0,\n y: 0,\n width: 100,\n height: 100,\n stroke: 'red'\n }\n });\n }\n }); // 元素面板栏\n\n var itempannel = new _antv_g6_editor__WEBPACK_IMPORTED_MODULE_2___default.a.Itempannel({\n container: 'itempannel'\n }); // 工具栏\n\n var toolbar = new _antv_g6_editor__WEBPACK_IMPORTED_MODULE_2___default.a.Toolbar({\n container: 'toolbar'\n }); // 详细面板\n\n var detailpannel = new _antv_g6_editor__WEBPACK_IMPORTED_MODULE_2___default.a.Detailpannel({\n container: 'detailpannel'\n }); // 缩略图\n\n var minimap = new _antv_g6_editor__WEBPACK_IMPORTED_MODULE_2___default.a.Minimap({\n container: 'minimap',\n height: 226,\n width: 226\n }); // 组件挂载到Editor\n\n editor.add(page);\n editor.add(itempannel);\n editor.add(toolbar);\n editor.add(detailpannel);\n editor.add(minimap); // 获取当前page\n\n var currentPage = editor.getCurrentPage(); // 监听选择变化\n\n currentPage.on('afteritemselected', function (ev) {\n console.log(ev); // 选择对象为Node节点\n\n if (ev.item.isNode) {\n // 获取属性\n var nm = ev.item.getModel();\n _this.nodeLabel = nm.label;\n } // 选择对象为Edge节点\n\n\n if (ev.item.isEdge) {\n // 获取属性\n var _nm = ev.item.getModel();\n\n _this.nodeLabel = _nm.label;\n }\n });\n }\n }\n});\n\n//# sourceURL=webpack:///./src/views/cankao.vue?./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options"); 179 | 180 | /***/ }), 181 | 182 | /***/ "./node_modules/cache-loader/dist/cjs.js?!./node_modules/babel-loader/lib/index.js!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader/lib/index.js?!./src/views/index.vue?vue&type=script&lang=js&": 183 | /*!*********************************************************************************************************************************************************************************************************************************************!*\ 184 | !*** ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/views/index.vue?vue&type=script&lang=js& ***! 185 | \*********************************************************************************************************************************************************************************************************************************************/ 186 | /*! exports provided: default */ 187 | /***/ (function(module, __webpack_exports__, __webpack_require__) { 188 | 189 | "use strict"; 190 | eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var core_js_modules_es_symbol__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! core-js/modules/es.symbol */ \"./node_modules/core-js/modules/es.symbol.js\");\n/* harmony import */ var core_js_modules_es_symbol__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(core_js_modules_es_symbol__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var core_js_modules_es_symbol_description__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! core-js/modules/es.symbol.description */ \"./node_modules/core-js/modules/es.symbol.description.js\");\n/* harmony import */ var core_js_modules_es_symbol_description__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(core_js_modules_es_symbol_description__WEBPACK_IMPORTED_MODULE_1__);\n/* harmony import */ var core_js_modules_es_array_find__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! core-js/modules/es.array.find */ \"./node_modules/core-js/modules/es.array.find.js\");\n/* harmony import */ var core_js_modules_es_array_find__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(core_js_modules_es_array_find__WEBPACK_IMPORTED_MODULE_2__);\n/* harmony import */ var core_js_modules_es_number_constructor__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! core-js/modules/es.number.constructor */ \"./node_modules/core-js/modules/es.number.constructor.js\");\n/* harmony import */ var core_js_modules_es_number_constructor__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(core_js_modules_es_number_constructor__WEBPACK_IMPORTED_MODULE_3__);\n/* harmony import */ var core_js_modules_es_object_keys__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! core-js/modules/es.object.keys */ \"./node_modules/core-js/modules/es.object.keys.js\");\n/* harmony import */ var core_js_modules_es_object_keys__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(core_js_modules_es_object_keys__WEBPACK_IMPORTED_MODULE_4__);\n/* harmony import */ var core_js_modules_es_object_to_string__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! core-js/modules/es.object.to-string */ \"./node_modules/core-js/modules/es.object.to-string.js\");\n/* harmony import */ var core_js_modules_es_object_to_string__WEBPACK_IMPORTED_MODULE_5___default = /*#__PURE__*/__webpack_require__.n(core_js_modules_es_object_to_string__WEBPACK_IMPORTED_MODULE_5__);\n/* harmony import */ var core_js_modules_es_regexp_exec__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! core-js/modules/es.regexp.exec */ \"./node_modules/core-js/modules/es.regexp.exec.js\");\n/* harmony import */ var core_js_modules_es_regexp_exec__WEBPACK_IMPORTED_MODULE_6___default = /*#__PURE__*/__webpack_require__.n(core_js_modules_es_regexp_exec__WEBPACK_IMPORTED_MODULE_6__);\n/* harmony import */ var core_js_modules_es_string_iterator__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! core-js/modules/es.string.iterator */ \"./node_modules/core-js/modules/es.string.iterator.js\");\n/* harmony import */ var core_js_modules_es_string_iterator__WEBPACK_IMPORTED_MODULE_7___default = /*#__PURE__*/__webpack_require__.n(core_js_modules_es_string_iterator__WEBPACK_IMPORTED_MODULE_7__);\n/* harmony import */ var core_js_modules_es_string_replace__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! core-js/modules/es.string.replace */ \"./node_modules/core-js/modules/es.string.replace.js\");\n/* harmony import */ var core_js_modules_es_string_replace__WEBPACK_IMPORTED_MODULE_8___default = /*#__PURE__*/__webpack_require__.n(core_js_modules_es_string_replace__WEBPACK_IMPORTED_MODULE_8__);\n/* harmony import */ var core_js_modules_es_string_split__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! core-js/modules/es.string.split */ \"./node_modules/core-js/modules/es.string.split.js\");\n/* harmony import */ var core_js_modules_es_string_split__WEBPACK_IMPORTED_MODULE_9___default = /*#__PURE__*/__webpack_require__.n(core_js_modules_es_string_split__WEBPACK_IMPORTED_MODULE_9__);\n/* harmony import */ var core_js_modules_web_dom_collections_iterator__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! core-js/modules/web.dom-collections.iterator */ \"./node_modules/core-js/modules/web.dom-collections.iterator.js\");\n/* harmony import */ var core_js_modules_web_dom_collections_iterator__WEBPACK_IMPORTED_MODULE_10___default = /*#__PURE__*/__webpack_require__.n(core_js_modules_web_dom_collections_iterator__WEBPACK_IMPORTED_MODULE_10__);\n/* harmony import */ var core_js_modules_web_url__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! core-js/modules/web.url */ \"./node_modules/core-js/modules/web.url.js\");\n/* harmony import */ var core_js_modules_web_url__WEBPACK_IMPORTED_MODULE_11___default = /*#__PURE__*/__webpack_require__.n(core_js_modules_web_url__WEBPACK_IMPORTED_MODULE_11__);\n/* harmony import */ var D_Desktop_vue_g6_editor_node_modules_babel_runtime_helpers_esm_createForOfIteratorHelper__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! ./node_modules/@babel/runtime/helpers/esm/createForOfIteratorHelper */ \"./node_modules/@babel/runtime/helpers/esm/createForOfIteratorHelper.js\");\n/* harmony import */ var _antv_g6_editor__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(/*! @antv/g6-editor */ \"./node_modules/@antv/g6-editor/build/g6Editor.js\");\n/* harmony import */ var _antv_g6_editor__WEBPACK_IMPORTED_MODULE_13___default = /*#__PURE__*/__webpack_require__.n(_antv_g6_editor__WEBPACK_IMPORTED_MODULE_13__);\n/* harmony import */ var _mixin__WEBPACK_IMPORTED_MODULE_14__ = __webpack_require__(/*! ./mixin */ \"./src/views/mixin.js\");\n\n\n\n\n\n\n\n\n\n\n\n\n\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n\n\n/* harmony default export */ __webpack_exports__[\"default\"] = ({\n name: \"VueG6Editor\",\n mixins: [_mixin__WEBPACK_IMPORTED_MODULE_14__[\"default\"]],\n data: function data() {\n return {\n // 节点属性表单\n nodeAttributeForm: {\n label: \"\",\n width: \"\",\n height: \"\"\n },\n // 节点属性表单\n edgeAttributeForm: {\n label: \"\"\n },\n // 画布属性栏表单\n canvasAttributeForm: {\n grid: true,\n cell: 20\n },\n // SVG节点图片URL地址\n startNodeSVGUrl: __webpack_require__(/*! ../assets/start-node.svg */ \"./src/assets/start-node.svg\"),\n endNodeSVGUrl: __webpack_require__(/*! ../assets/end-node.svg */ \"./src/assets/end-node.svg\"),\n regularNodeSVGUrl: __webpack_require__(/*! ../assets/regular-node.svg */ \"./src/assets/regular-node.svg\"),\n conditionNodeSVGUrl: __webpack_require__(/*! ../assets/condition-node.svg */ \"./src/assets/condition-node.svg\"),\n modelNodeSVGUrl: \"https://gw.alipayobjects.com/zos/rmsportal/rQMUhHHSqwYsPwjXxcfP.svg\",\n // 编辑器\n editor: null,\n saveAsImageDialogVisible: false,\n saveAsImageFormat: \"jpg\"\n };\n },\n mounted: function mounted() {\n this.initG6Editor();\n },\n methods: {\n // 初始化\n initG6Editor: function initG6Editor() {\n var _this2 = this;\n\n var _this = this;\n\n var editor = new _antv_g6_editor__WEBPACK_IMPORTED_MODULE_13___default.a();\n this.editor = editor;\n _antv_g6_editor__WEBPACK_IMPORTED_MODULE_13___default.a.track(false);\n var Command = _antv_g6_editor__WEBPACK_IMPORTED_MODULE_13___default.a.Command; // 注册新命令save\n\n Command.registerCommand(\"save\", {\n // 禁止保存命令进入队列\n queue: false,\n // 命令是否可用\n enable: function enable(editor) {\n return true;\n },\n // 正向命令\n execute: function execute(editor) {\n var needSaveData = editor.getCurrentPage().save();\n localStorage.setItem(\"flowData\", JSON.stringify(needSaveData));\n\n _this.save(needSaveData);\n\n _this.$message.success(\"数据已保存\");\n },\n // 反向命令\n back: function back(editor) {\n console.log(\"反向命令\");\n console.log(editor);\n },\n // 快捷键：Ctrl + S\n shortcutCodes: [[\"metaKey\", \"s\"], [\"ctrlKey\", \"s\"]]\n }); // 画布\n\n var flow = new _antv_g6_editor__WEBPACK_IMPORTED_MODULE_13___default.a.Flow({\n graph: {\n container: \"page\"\n },\n align: {\n line: {\n // 对齐线颜色\n stroke: \"#FA8C16\",\n // 对齐线粗细\n lineWidth: 1\n },\n // 开启全方位对齐\n item: true,\n // 网格对齐\n grid: true\n },\n grid: {\n // 网孔尺寸\n cell: 18\n },\n shortcut: {\n // 开启自定义命令保存的快捷键\n save: true\n }\n });\n window.flow = flow; // 设置边\n\n flow.getGraph().edge({\n shape: \"flow-polyline\"\n }); // 元素面板栏\n\n var itempannel = new _antv_g6_editor__WEBPACK_IMPORTED_MODULE_13___default.a.Itempannel({\n container: \"itempannel\"\n }); // 工具栏\n\n var toolbar = new _antv_g6_editor__WEBPACK_IMPORTED_MODULE_13___default.a.Toolbar({\n container: \"toolbar\"\n }); // 属性栏\n\n var detailpannel = new _antv_g6_editor__WEBPACK_IMPORTED_MODULE_13___default.a.Detailpannel({\n container: \"detailpannel\"\n }); // 缩略图\n\n var minimapWidth = getComputedStyle(document.querySelector(\".right-part\")).width;\n minimapWidth = Number(minimapWidth.replace(/px$/, \"\"));\n var minimap = new _antv_g6_editor__WEBPACK_IMPORTED_MODULE_13___default.a.Minimap({\n container: \"minimap\",\n width: minimapWidth,\n height: 200\n }); // 右键菜单\n\n var contextmenu = new _antv_g6_editor__WEBPACK_IMPORTED_MODULE_13___default.a.Contextmenu({\n container: \"contextmenu\"\n }); // 挂载以上组件到Editor\n\n editor.add(flow);\n editor.add(itempannel);\n editor.add(toolbar);\n editor.add(detailpannel);\n editor.add(minimap);\n editor.add(contextmenu); // 挂载到window，方便调试\n\n window.editor = editor; // 获取当前画布\n\n var currentPage = editor.getCurrentPage();\n currentPage.on(\"afterchange\", function (e) {\n if (e.action === \"add\") {\n if (e.model.nodetype === \"startNode\" || e.model.nodetype === \"endNode\") {\n var nodes = _this2.editor.getCurrentPage().getNodes();\n\n var _iterator = Object(D_Desktop_vue_g6_editor_node_modules_babel_runtime_helpers_esm_createForOfIteratorHelper__WEBPACK_IMPORTED_MODULE_12__[\"default\"])(nodes),\n _step;\n\n try {\n for (_iterator.s(); !(_step = _iterator.n()).done;) {\n var item = _step.value;\n\n if (item.model.nodetype === e.model.nodetype && item.model.id !== e.model.id) {\n _this2.editor.getCurrentPage().remove(e.item);\n\n _this2.$message.warning(\"只能有一个开始节点或结束节点\");\n }\n }\n } catch (err) {\n _iterator.e(err);\n } finally {\n _iterator.f();\n }\n }\n }\n }); // 监听（选择对象后）事件\n\n currentPage.on(\"afteritemselected\", function (ev) {\n console.log(\"打印所选对象属性\", ev.item);\n console.log(\"打印所选对象数据模型\", ev.item.model);\n var selectedItemDataModel = ev.item.model; // 如果选择的对象是节点\n\n if (ev.item.isNode) {\n _this2.nodeAttributeForm.label = selectedItemDataModel.label;\n _this2.nodeAttributeForm.width = selectedItemDataModel.size.split(\"*\")[0];\n _this2.nodeAttributeForm.height = selectedItemDataModel.size.split(\"*\")[1];\n _this2.nodeAttributeForm.color = selectedItemDataModel.color;\n } // 如果选择的对象是边\n\n\n if (ev.item.isEdge) {\n ev.item.graph.edge({\n shape: \"flow-polyline-round\"\n });\n _this2.edgeAttributeForm.label = selectedItemDataModel.label;\n _this2.edgeAttributeForm.shape = selectedItemDataModel.shape;\n }\n }); // 监听（删除后）事件\n\n currentPage.on(\"afterdelete\", function (ev) {});\n },\n // 打开保存为图片弹窗\n openSaveAsImageDialog: function openSaveAsImageDialog() {\n this.saveAsImageDialogVisible = true;\n },\n // 开启/关闭网格对齐\n toggleGridShowStatus: function toggleGridShowStatus(value) {\n if (value) {\n this.editor.getCurrentPage().showGrid();\n } else {\n this.editor.getCurrentPage().hideGrid();\n }\n },\n // 保存为图片\n saveAsImage: function saveAsImage() {\n var newCanvas;\n\n if (this.saveAsImageFormat === \"jpg\") {\n var canvas = this.editor.getCurrentPage().saveImage();\n newCanvas = document.createElement(\"canvas\");\n newCanvas.width = canvas.width;\n newCanvas.height = canvas.height;\n var newContext = newCanvas.getContext(\"2d\");\n newContext.fillStyle = \"#fff\";\n newContext.fillRect(0, 0, newCanvas.width, newCanvas.height);\n newContext.drawImage(canvas, 0, 0);\n }\n\n if (this.saveAsImageFormat === \"png\") {\n newCanvas = this.editor.getCurrentPage().saveImage();\n }\n\n var imageDataURL = newCanvas.toDataURL();\n var downloadLink = document.createElement(\"a\");\n downloadLink.download = \"图片.jpg\";\n downloadLink.href = imageDataURL;\n document.body.appendChild(downloadLink);\n downloadLink.click();\n document.body.removeChild(downloadLink);\n this.saveAsImageDialogVisible = false;\n },\n // 保存为文件\n saveAsFile: function saveAsFile() {\n var jsonString = JSON.stringify(this.editor.getCurrentPage().save());\n var blob = new Blob([jsonString]);\n var blobURL = URL.createObjectURL(blob);\n var downloadLink = document.createElement(\"a\");\n downloadLink.download = \"数据.json\";\n downloadLink.href = blobURL;\n document.body.appendChild(downloadLink);\n downloadLink.click();\n URL.revokeObjectURL(blobURL);\n document.body.removeChild(downloadLink);\n },\n // 读取历史数据\n readHistoryData: function readHistoryData() {\n var stringData = localStorage.getItem(\"flowData\");\n\n if (stringData === \"\" || stringData === \"{}\" || stringData === null) {\n this.$message.warning(\"无历史数据\");\n return;\n }\n\n var jsonData = JSON.parse(stringData);\n this.editor.getCurrentPage().read(jsonData);\n },\n // 读取上传数据\n readUploadData: function readUploadData() {\n var _this3 = this;\n\n var uploadButton = document.createElement(\"input\");\n uploadButton.setAttribute(\"type\", \"file\");\n uploadButton.setAttribute(\"accept\", \".json\");\n uploadButton.addEventListener(\"change\", function (e) {\n console.dir(uploadButton);\n var file = uploadButton.files[0];\n var fileReader = new FileReader();\n\n fileReader.onload = function (event) {\n console.log(event);\n var text = JSON.parse(event.target.result);\n console.log(text);\n\n _this3.editor.getCurrentPage().read(text);\n };\n\n fileReader.readAsText(file);\n });\n uploadButton.click();\n },\n //\n save: function save(source) {\n var edges = source.edges;\n var nodes = source.nodes;\n\n var Node = function Node(id) {\n var node = nodes.find(function (item) {\n return item.id === id;\n });\n return {\n id: node.id,\n nodeName: node.label,\n in: [],\n out: []\n };\n };\n\n var visitedNodes = {};\n\n var _iterator2 = Object(D_Desktop_vue_g6_editor_node_modules_babel_runtime_helpers_esm_createForOfIteratorHelper__WEBPACK_IMPORTED_MODULE_12__[\"default\"])(edges),\n _step2;\n\n try {\n for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {\n var edge = _step2.value;\n var sourceId = edge.source;\n var targetId = edge.target;\n var sourceNode = null;\n var targetNode = null;\n\n if (visitedNodes[sourceId]) {\n sourceNode = visitedNodes[sourceId];\n } else {\n sourceNode = Node(sourceId);\n visitedNodes[sourceId] = sourceNode;\n }\n\n if (visitedNodes[targetId]) {\n targetNode = visitedNodes[targetId];\n } else {\n visitedNodes[targetId] = targetNode = Node(targetId);\n }\n\n sourceNode.out.push({\n edge: edge,\n target: targetNode\n });\n targetNode.in.push({\n edge: edge,\n source: sourceNode\n });\n }\n } catch (err) {\n _iterator2.e(err);\n } finally {\n _iterator2.f();\n }\n\n console.log(visitedNodes);\n var root = null;\n var end = null;\n\n for (var _i = 0, _Object$keys = Object.keys(visitedNodes); _i < _Object$keys.length; _i++) {\n var item = _Object$keys[_i];\n if (visitedNodes[item].in.length === 0) root = visitedNodes[item];\n if (visitedNodes[item].out.length === 0) end = visitedNodes[item];\n }\n\n var ret = {};\n ret.name = root.nodeName;\n ret.description = root.description;\n ret.version = 1;\n ret.steps = [];\n\n var _iterator3 = Object(D_Desktop_vue_g6_editor_node_modules_babel_runtime_helpers_esm_createForOfIteratorHelper__WEBPACK_IMPORTED_MODULE_12__[\"default\"])(root.out),\n _step3;\n\n try {\n for (_iterator3.s(); !(_step3 = _iterator3.n()).done;) {\n var _item = _step3.value;\n\n if (_item.target.out.length === 1) {\n getSimple(_item.target, ret.steps);\n } else if (_item.target.out.length > 1) {\n ret.steps.push(getDecision(_item.target));\n }\n }\n } catch (err) {\n _iterator3.e(err);\n } finally {\n _iterator3.f();\n }\n\n function getSimple(item, array) {\n var mid = {\n id: item.id,\n name: item.nodeName,\n type: \"SIMPLE\"\n };\n array.push(mid);\n var next = item.out[0].target;\n\n if (next.out.length === 1) {\n getSimple(next, array);\n } else if (next.out.length > 1) {\n array.push(getDecision(next));\n }\n }\n\n function getDecision(item) {\n var mid = {\n id: item.id,\n name: item.nodeName,\n type: \"DECISION\",\n decisionCases: {}\n };\n\n var _iterator4 = Object(D_Desktop_vue_g6_editor_node_modules_babel_runtime_helpers_esm_createForOfIteratorHelper__WEBPACK_IMPORTED_MODULE_12__[\"default\"])(item.out),\n _step4;\n\n try {\n for (_iterator4.s(); !(_step4 = _iterator4.n()).done;) {\n var next = _step4.value;\n mid.decisionCases[next.edge.label] = [];\n\n if (next.target.out.length === 1) {\n getSimple(next.target, mid.decisionCases[next.edge.label]);\n } else if (next.target.out.length > 1) {\n mid.decisionCases[next.edge.label].push(getDecision(next.target));\n }\n }\n } catch (err) {\n _iterator4.e(err);\n } finally {\n _iterator4.f();\n }\n\n return mid;\n }\n\n console.log(JSON.stringify(ret, null, 2));\n }\n }\n});\n\n//# sourceURL=webpack:///./src/views/index.vue?./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options"); 191 | 192 | /***/ }), 193 | 194 | /***/ "./node_modules/cache-loader/dist/cjs.js?{\"cacheDirectory\":\"node_modules/.cache/vue-loader\",\"cacheIdentifier\":\"47ae9142-vue-loader-template\"}!./node_modules/vue-loader/lib/loaders/templateLoader.js?!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader/lib/index.js?!./src/App.vue?vue&type=template&id=7ba5bd90&": 195 | /*!*********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\ 196 | !*** ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"47ae9142-vue-loader-template"}!./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/App.vue?vue&type=template&id=7ba5bd90& ***! 197 | \*********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/ 198 | /*! exports provided: render, staticRenderFns */ 199 | /***/ (function(module, __webpack_exports__, __webpack_require__) { 200 | 201 | "use strict"; 202 | eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"render\", function() { return render; });\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"staticRenderFns\", function() { return staticRenderFns; });\nvar render = function() {\n var _vm = this\n var _h = _vm.$createElement\n var _c = _vm._self._c || _h\n return _c(\"div\", { attrs: { id: \"app\" } }, [_c(\"VueG6Editor\")], 1)\n}\nvar staticRenderFns = []\nrender._withStripped = true\n\n\n\n//# sourceURL=webpack:///./src/App.vue?./node_modules/cache-loader/dist/cjs.js?%7B%22cacheDirectory%22:%22node_modules/.cache/vue-loader%22,%22cacheIdentifier%22:%2247ae9142-vue-loader-template%22%7D!./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options"); 203 | 204 | /***/ }), 205 | 206 | /***/ "./node_modules/cache-loader/dist/cjs.js?{\"cacheDirectory\":\"node_modules/.cache/vue-loader\",\"cacheIdentifier\":\"47ae9142-vue-loader-template\"}!./node_modules/vue-loader/lib/loaders/templateLoader.js?!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader/lib/index.js?!./src/views/cankao.vue?vue&type=template&id=90d953ba&": 207 | /*!******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\ 208 | !*** ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"47ae9142-vue-loader-template"}!./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/views/cankao.vue?vue&type=template&id=90d953ba& ***! 209 | \******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/ 210 | /*! exports provided: render, staticRenderFns */ 211 | /***/ (function(module, __webpack_exports__, __webpack_require__) { 212 | 213 | "use strict"; 214 | eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"render\", function() { return render; });\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"staticRenderFns\", function() { return staticRenderFns; });\nvar render = function() {\n var _vm = this\n var _h = _vm.$createElement\n var _c = _vm._self._c || _h\n return _c(\n \"el-container\",\n [\n _c(\"el-main\", [\n _c(\n \"div\",\n { staticClass: \"wrap\" },\n [\n _c(\"div\", { staticClass: \"toolbar\", attrs: { id: \"toolbar\" } }, [\n _c(\"i\", {\n staticClass: \"command el-icon el-icon-arrow-left\",\n attrs: { \"data-command\": \"undo\", title: \"撤回\" }\n }),\n _c(\"i\", {\n staticClass: \"command el-icon el-icon-arrow-right\",\n attrs: { \"data-command\": \"redo\", title: \"重做\" }\n }),\n _c(\"i\", {\n staticClass: \"command el-icon el-icon-delete\",\n attrs: { \"data-command\": \"delete\", title: \"删除\" }\n }),\n _c(\"i\", {\n staticClass: \"command el-icon el-icon-zoom-out\",\n attrs: { \"data-command\": \"zoomOut\", title: \"缩小\" }\n }),\n _c(\"i\", {\n staticClass: \"command el-icon el-icon-zoom-in\",\n attrs: { \"data-command\": \"zoomIn\", title: \"放大\" }\n }),\n _c(\"i\", {\n staticClass: \"command el-icon el-icon-upload\",\n attrs: { \"data-command\": \"save\", title: \"保存\" }\n })\n ]),\n _c(\n \"el-row\",\n { attrs: { gutter: 20 } },\n [\n _c(\"el-col\", { attrs: { span: 4 } }, [\n _c(\n \"div\",\n { staticClass: \"ph left\", attrs: { id: \"itempannel\" } },\n [\n _c(\n \"div\",\n {\n staticClass: \"getItem\",\n attrs: {\n \"data-type\": \"node\",\n \"data-shape\": \"flow-rect\",\n \"data-size\": \"120*48\",\n \"data-label\": \"常规节点\",\n \"data-color\": \"#1890FF\"\n }\n },\n [\n _c(\"img\", {\n attrs: {\n draggable: \"false\",\n src:\n \"https://gw.alipayobjects.com/zos/rmsportal/wHcJakkCXDrUUlNkNzSy.svg\",\n alt: \"\",\n srcset: \"\"\n }\n })\n ]\n ),\n _c(\n \"div\",\n {\n staticClass: \"getItem\",\n attrs: {\n \"data-type\": \"node\",\n \"data-shape\": \"flow-circle\",\n \"data-size\": \"72*72\",\n \"data-label\": \"起止节点\",\n \"data-color\": \"#FA8C16\"\n }\n },\n [\n _c(\"img\", {\n attrs: {\n draggable: \"false\",\n src:\n \"https://gw.alipayobjects.com/zos/rmsportal/ZnPxbVjKYADMYxkTQXRi.svg\",\n alt: \"\",\n srcset: \"\"\n }\n })\n ]\n ),\n _c(\n \"div\",\n {\n staticClass: \"getItem\",\n attrs: {\n \"data-type\": \"node\",\n \"data-shape\": \"flow-rhombus\",\n \"data-size\": \"80*72\",\n \"data-label\": \"分叉节点\",\n \"data-color\": \"#13C2C2\"\n }\n },\n [\n _c(\"img\", {\n attrs: {\n draggable: \"false\",\n src:\n \"https://gw.alipayobjects.com/zos/rmsportal/SnWIktArriZRWdGCnGfK.svg\",\n alt: \"\",\n srcset: \"\"\n }\n })\n ]\n ),\n _c(\n \"div\",\n {\n staticClass: \"getItem\",\n attrs: {\n \"data-type\": \"node\",\n \"data-shape\": \"flow-capsule\",\n \"data-size\": \"80*48\",\n \"data-label\": \"模型节点\",\n \"data-color\": \"#722ED1\"\n }\n },\n [\n _c(\"img\", {\n attrs: {\n draggable: \"false\",\n src:\n \"https://gw.alipayobjects.com/zos/rmsportal/rQMUhHHSqwYsPwjXxcfP.svg\",\n alt: \"\",\n srcset: \"\"\n }\n })\n ]\n ),\n _c(\n \"div\",\n {\n staticClass: \"getItem\",\n attrs: {\n \"data-type\": \"node\",\n \"data-shape\": \"customNode\",\n \"data-size\": \"80*48\",\n \"data-label\": \"我是自定义的\",\n \"data-color\": \"#722ED1\"\n }\n },\n [\n _c(\"img\", {\n attrs: {\n draggable: \"false\",\n src:\n \"https://user-gold-cdn.xitu.io/2019/3/15/169809645b016da6?w=114&h=128&f=png&s=1893\",\n alt: \"\",\n srcset: \"\"\n }\n })\n ]\n )\n ]\n )\n ]),\n _c(\"el-col\", { attrs: { span: 16 } }, [\n _c(\"div\", { staticClass: \"ph\", attrs: { id: \"page\" } })\n ]),\n _c(\"el-col\", { attrs: { span: 4 } }, [\n _c(\"div\", { staticClass: \"ph right\" }, [\n _c(\n \"div\",\n {\n staticClass: \"detailpannel\",\n attrs: { id: \"detailpannel\" }\n },\n [\n _c(\n \"div\",\n {\n staticClass: \"panel\",\n attrs: {\n \"data-status\": \"node-selected\",\n id: \"node_detailpanel\"\n }\n },\n [\n _c(\"div\", { staticClass: \"panel-title\" }, [\n _vm._v(\"属性详情\")\n ]),\n _c(\n \"div\",\n { staticClass: \"block-container\" },\n [\n _c(\"el-input\", {\n attrs: {\n size: \"mini\",\n placeholder: \"请输入内容\"\n },\n on: { change: _vm.changeNodeLabel },\n model: {\n value: _vm.nodeLabel,\n callback: function($$v) {\n _vm.nodeLabel = $$v\n },\n expression: \"nodeLabel\"\n }\n })\n ],\n 1\n )\n ]\n )\n ]\n ),\n _c(\"div\", { staticClass: \"minimap\" }, [\n _c(\"div\", { staticClass: \"panel-title\" }, [\n _vm._v(\"缩略图\")\n ]),\n _c(\"div\", { attrs: { id: \"minimap\" } })\n ])\n ])\n ])\n ],\n 1\n )\n ],\n 1\n )\n ])\n ],\n 1\n )\n}\nvar staticRenderFns = []\nrender._withStripped = true\n\n\n\n//# sourceURL=webpack:///./src/views/cankao.vue?./node_modules/cache-loader/dist/cjs.js?%7B%22cacheDirectory%22:%22node_modules/.cache/vue-loader%22,%22cacheIdentifier%22:%2247ae9142-vue-loader-template%22%7D!./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options"); 215 | 216 | /***/ }), 217 | 218 | /***/ "./node_modules/cache-loader/dist/cjs.js?{\"cacheDirectory\":\"node_modules/.cache/vue-loader\",\"cacheIdentifier\":\"47ae9142-vue-loader-template\"}!./node_modules/vue-loader/lib/loaders/templateLoader.js?!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader/lib/index.js?!./src/views/index.vue?vue&type=template&id=a83bd3b0&": 219 | /*!*****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\ 220 | !*** ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"47ae9142-vue-loader-template"}!./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/views/index.vue?vue&type=template&id=a83bd3b0& ***! 221 | \*****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/ 222 | /*! exports provided: render, staticRenderFns */ 223 | /***/ (function(module, __webpack_exports__, __webpack_require__) { 224 | 225 | "use strict"; 226 | eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"render\", function() { return render; });\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"staticRenderFns\", function() { return staticRenderFns; });\nvar render = function() {\n var _vm = this\n var _h = _vm.$createElement\n var _c = _vm._self._c || _h\n return _c(\n \"div\",\n { attrs: { id: \"vue-g6-editor\" } },\n [\n _c(\n \"el-row\",\n [\n _c(\"el-col\", { attrs: { span: 24 } }, [\n _c(\"header\", [_vm._v(\"vue-g6-editor\")])\n ])\n ],\n 1\n ),\n _c(\n \"el-row\",\n [\n _c(\"el-col\", { attrs: { span: 24 } }, [\n _c(\"div\", { attrs: { id: \"toolbar\" } }, [\n _c(\"i\", {\n staticClass: \"command fa fa-floppy-o\",\n attrs: { \"data-command\": \"save\", title: \"保存\" }\n }),\n _c(\"i\", {\n staticClass: \"fa fa-history\",\n attrs: { title: \"历史数据\" },\n on: { click: _vm.readHistoryData }\n }),\n _c(\"i\", {\n staticClass: \"fa fa-hdd-o\",\n attrs: { title: \"上传数据\" },\n on: { click: _vm.readUploadData }\n }),\n _c(\"i\", {\n staticClass: \"fa fa-download\",\n attrs: { title: \"另存为文件\" },\n on: { click: _vm.saveAsFile }\n }),\n _c(\"i\", {\n staticClass: \"fa fa-picture-o\",\n attrs: { title: \"另存为图片\" },\n on: { click: _vm.openSaveAsImageDialog }\n }),\n _c(\"i\", {\n staticClass: \"command fa fa-undo\",\n attrs: { \"data-command\": \"undo\", title: \"撤销\" }\n }),\n _c(\"i\", {\n staticClass: \"command fa fa-repeat\",\n attrs: { \"data-command\": \"redo\", title: \"重做\" }\n }),\n _c(\"i\", {\n staticClass: \"command fa fa-trash-o\",\n attrs: { \"data-command\": \"delete\", title: \"删除\" }\n }),\n _c(\"i\", {\n staticClass: \"command fa fa-search-minus\",\n attrs: { \"data-command\": \"zoomOut\", title: \"缩小\" }\n }),\n _c(\"i\", {\n staticClass: \"command fa fa-search-plus\",\n attrs: { \"data-command\": \"zoomIn\", title: \"放大\" }\n }),\n _c(\"i\", {\n staticClass: \"command fa fa-eraser\",\n attrs: { \"data-command\": \"clear\", title: \"清除画布\" }\n }),\n _c(\"i\", {\n staticClass: \"command fa fa-arrow-up\",\n attrs: { \"data-command\": \"toFront\", title: \"提升层级\" }\n }),\n _c(\"i\", {\n staticClass: \"command fa fa-arrow-down\",\n attrs: { \"data-command\": \"toBack\", title: \"下降层级\" }\n }),\n _c(\"i\", {\n staticClass: \"command fa fa-check-square-o\",\n attrs: { \"data-command\": \"selectAll\", title: \"全选\" }\n }),\n _c(\"i\", {\n staticClass: \"command fa fa-files-o\",\n attrs: { \"data-command\": \"copy\", title: \"复制\" }\n }),\n _c(\"i\", {\n staticClass: \"command fa fa-clipboard\",\n attrs: { \"data-command\": \"paste\", title: \"粘贴\" }\n }),\n _c(\"i\", {\n staticClass: \"command fa fa-expand\",\n attrs: { \"data-command\": \"autoZoom\", title: \"实际大小\" }\n }),\n _c(\"i\", {\n staticClass: \"command fa fa-compress\",\n attrs: { \"data-command\": \"resetZoom\", title: \"适应页面\" }\n }),\n _c(\"i\", {\n staticClass: \"command fa fa-object-group\",\n attrs: { \"data-command\": \"addGroup\", title: \"组合\" }\n }),\n _c(\"i\", {\n staticClass: \"command fa fa-object-ungroup\",\n attrs: { \"data-command\": \"unGroup\", title: \"取消组合\" }\n }),\n _c(\"i\", {\n staticClass: \"command fa fa fa-crop\",\n attrs: { \"data-command\": \"multiSelect\", title: \"多选\" }\n })\n ])\n ])\n ],\n 1\n ),\n _c(\n \"el-row\",\n [\n _c(\"el-col\", { attrs: { span: 2 } }, [\n _c(\"div\", { attrs: { id: \"itempannel\" } }, [\n _c(\n \"div\",\n {\n staticClass: \"getItem\",\n attrs: {\n id: \"startNode\",\n \"data-type\": \"node\",\n \"data-shape\": \"flow-circle\",\n \"data-size\": \"72*72\",\n \"data-label\": \"开始节点\",\n \"data-color\": \"#FA8C16\",\n \"data-nodeType\": \"startNode\"\n }\n },\n [\n _c(\"img\", {\n attrs: {\n draggable: \"false\",\n src: _vm.startNodeSVGUrl,\n alt: \"\",\n srcset: \"\"\n }\n })\n ]\n ),\n _c(\n \"div\",\n {\n staticClass: \"getItem\",\n attrs: {\n id: \"regularNode\",\n \"data-type\": \"node\",\n \"data-size\": \"100*50\",\n \"data-label\": \"常规节点\",\n \"data-color\": \"#1890ff\"\n }\n },\n [\n _c(\"img\", {\n attrs: {\n draggable: \"false\",\n src: _vm.regularNodeSVGUrl,\n alt: \"\",\n srcset: \"\"\n }\n })\n ]\n ),\n _c(\n \"div\",\n {\n staticClass: \"getItem\",\n attrs: {\n id: \"judgeNode\",\n \"data-type\": \"node\",\n \"data-shape\": \"flow-rhombus\",\n \"data-size\": \"80*80\",\n \"data-label\": \"条件节点\",\n \"data-color\": \"#13C2C2\"\n }\n },\n [\n _c(\"img\", {\n attrs: { draggable: \"false\", src: _vm.conditionNodeSVGUrl }\n })\n ]\n ),\n _c(\n \"div\",\n {\n staticClass: \"getItem\",\n attrs: {\n id: \"endNode\",\n \"data-type\": \"node\",\n \"data-shape\": \"flow-circle\",\n \"data-size\": \"80*80\",\n \"data-label\": \"结束节点\",\n \"data-color\": \"#FA8C16\",\n \"data-nodeType\": \"endNode\"\n }\n },\n [\n _c(\"img\", {\n attrs: { draggable: \"false\", src: _vm.endNodeSVGUrl }\n })\n ]\n )\n ])\n ]),\n _c(\n \"el-col\",\n { attrs: { span: 18 } },\n [\n _c(\"el-col\", { attrs: { span: 24 } }, [\n _c(\"div\", { attrs: { id: \"page\" } })\n ])\n ],\n 1\n ),\n _c(\"el-col\", { attrs: { span: 4 } }, [\n _c(\"section\", { staticClass: \"right-part\" }, [\n _c(\"div\", { attrs: { id: \"detailpannel\" } }, [\n _c(\n \"div\",\n {\n staticClass: \"pannel\",\n attrs: {\n id: \"nodeAttributeBar\",\n \"data-status\": \"node-selected\"\n }\n },\n [\n _c(\"div\", { staticClass: \"title\" }, [_vm._v(\"节点属性\")]),\n _c(\n \"div\",\n { staticClass: \"main\" },\n [\n _c(\n \"el-form\",\n {\n attrs: {\n model: _vm.nodeAttributeForm,\n \"label-position\": \"top\",\n \"label-width\": \"80px\"\n }\n },\n [\n _c(\n \"el-form-item\",\n { attrs: { label: \"节点文本\" } },\n [\n _c(\"el-input\", {\n on: { change: _vm.saveNodeAttribute },\n model: {\n value: _vm.nodeAttributeForm.label,\n callback: function($$v) {\n _vm.$set(\n _vm.nodeAttributeForm,\n \"label\",\n $$v\n )\n },\n expression: \"nodeAttributeForm.label\"\n }\n })\n ],\n 1\n ),\n _c(\n \"el-form-item\",\n { attrs: { label: \"宽度\" } },\n [\n _c(\"el-input\", {\n on: { change: _vm.saveNodeAttribute },\n model: {\n value: _vm.nodeAttributeForm.width,\n callback: function($$v) {\n _vm.$set(\n _vm.nodeAttributeForm,\n \"width\",\n $$v\n )\n },\n expression: \"nodeAttributeForm.width\"\n }\n })\n ],\n 1\n ),\n _c(\n \"el-form-item\",\n { attrs: { label: \"高度\" } },\n [\n _c(\"el-input\", {\n on: { change: _vm.saveNodeAttribute },\n model: {\n value: _vm.nodeAttributeForm.height,\n callback: function($$v) {\n _vm.$set(\n _vm.nodeAttributeForm,\n \"height\",\n $$v\n )\n },\n expression: \"nodeAttributeForm.height\"\n }\n })\n ],\n 1\n ),\n _c(\n \"el-form-item\",\n { attrs: { label: \"颜色\" } },\n [\n _c(\"el-color-picker\", {\n on: { change: _vm.saveNodeAttribute },\n model: {\n value: _vm.nodeAttributeForm.color,\n callback: function($$v) {\n _vm.$set(\n _vm.nodeAttributeForm,\n \"color\",\n $$v\n )\n },\n expression: \"nodeAttributeForm.color\"\n }\n })\n ],\n 1\n )\n ],\n 1\n )\n ],\n 1\n )\n ]\n ),\n _c(\n \"div\",\n {\n staticClass: \"pannel\",\n attrs: {\n id: \"edgeAttributeBar\",\n \"data-status\": \"edge-selected\"\n }\n },\n [\n _c(\"div\", { staticClass: \"title\" }, [_vm._v(\"边属性\")]),\n _c(\n \"div\",\n { staticClass: \"main\" },\n [\n _c(\n \"el-form\",\n {\n attrs: {\n model: _vm.edgeAttributeForm,\n \"label-position\": \"top\",\n \"label-width\": \"80px\"\n }\n },\n [\n _c(\n \"el-form-item\",\n { attrs: { label: \"边文本\" } },\n [\n _c(\"el-input\", {\n on: { change: _vm.saveEdgeAttribute },\n model: {\n value: _vm.edgeAttributeForm.label,\n callback: function($$v) {\n _vm.$set(\n _vm.edgeAttributeForm,\n \"label\",\n $$v\n )\n },\n expression: \"edgeAttributeForm.label\"\n }\n })\n ],\n 1\n ),\n _c(\n \"el-form-item\",\n { attrs: { label: \"边文本\" } },\n [\n _c(\n \"el-select\",\n {\n on: { change: _vm.saveEdgeAttribute },\n model: {\n value: _vm.edgeAttributeForm.shape,\n callback: function($$v) {\n _vm.$set(\n _vm.edgeAttributeForm,\n \"shape\",\n $$v\n )\n },\n expression: \"edgeAttributeForm.shape\"\n }\n },\n [\n _c(\"el-option\", {\n attrs: {\n label: \"流程图折线\",\n value: \"flow-polyline\"\n }\n }),\n _c(\"el-option\", {\n attrs: {\n label: \"流程图圆⻆折线\",\n value: \"flow-polyline-round\"\n }\n }),\n _c(\"el-option\", {\n attrs: {\n label: \"流程图曲线\",\n value: \"flow-smooth\"\n }\n })\n ],\n 1\n )\n ],\n 1\n )\n ],\n 1\n )\n ],\n 1\n )\n ]\n ),\n _c(\n \"div\",\n {\n staticClass: \"pannel\",\n attrs: {\n id: \"groupAttributeBar\",\n \"data-status\": \"group-selected\"\n }\n },\n [_c(\"div\", { staticClass: \"title\" }, [_vm._v(\"群组属性栏\")])]\n ),\n _c(\n \"div\",\n {\n staticClass: \"pannel\",\n attrs: {\n id: \"canvasAttributeBar\",\n \"data-status\": \"canvas-selected\"\n }\n },\n [\n _c(\"div\", { staticClass: \"title\" }, [_vm._v(\"画布属性栏\")]),\n _c(\n \"div\",\n { staticClass: \"main\" },\n [\n _c(\n \"el-form\",\n {\n attrs: {\n \"label-width\": \"80px\",\n \"label-position\": \"right\"\n }\n },\n [\n _c(\n \"el-form-item\",\n { attrs: { label: \"网格对齐\" } },\n [\n _c(\"el-checkbox\", {\n on: { change: _vm.toggleGridShowStatus },\n model: {\n value: _vm.canvasAttributeForm.grid,\n callback: function($$v) {\n _vm.$set(\n _vm.canvasAttributeForm,\n \"grid\",\n $$v\n )\n },\n expression: \"canvasAttributeForm.grid\"\n }\n })\n ],\n 1\n )\n ],\n 1\n )\n ],\n 1\n )\n ]\n ),\n _c(\n \"div\",\n {\n staticClass: \"pannel\",\n attrs: {\n id: \"multiAttributeBar\",\n \"data-status\": \"multi-selected\"\n }\n },\n [\n _c(\"div\", { staticClass: \"title\" }, [\n _vm._v(\"多选时属性栏\")\n ])\n ]\n )\n ]),\n _c(\"div\", { attrs: { id: \"minimap\" } }, [\n _c(\"div\", { staticClass: \"title\" }, [_vm._v(\"缩略图\")])\n ])\n ])\n ])\n ],\n 1\n ),\n _c(\"article\", [\n _c(\n \"section\",\n { staticClass: \"save-as-image-dialog\" },\n [\n _c(\n \"el-dialog\",\n {\n attrs: {\n title: \"下载图片\",\n visible: _vm.saveAsImageDialogVisible,\n width: \"360px\"\n },\n on: {\n \"update:visible\": function($event) {\n _vm.saveAsImageDialogVisible = $event\n }\n }\n },\n [\n _c(\n \"el-form\",\n {\n attrs: { \"label-width\": \"100px\", \"label-position\": \"top\" }\n },\n [\n _c(\n \"el-form-item\",\n { attrs: { label: \"选择图片格式\" } },\n [\n _c(\n \"el-select\",\n {\n model: {\n value: _vm.saveAsImageFormat,\n callback: function($$v) {\n _vm.saveAsImageFormat = $$v\n },\n expression: \"saveAsImageFormat\"\n }\n },\n [\n _c(\n \"el-option\",\n { attrs: { label: \"jpg\", value: \"jpg\" } },\n [\n _c(\"span\", { staticStyle: { float: \"left\" } }, [\n _vm._v(\"jpg\")\n ]),\n _c(\n \"span\",\n {\n staticStyle: {\n float: \"right\",\n color: \"#8492a6\",\n \"font-size\": \"13px\"\n }\n },\n [_vm._v(\"白色背景\")]\n )\n ]\n ),\n _c(\n \"el-option\",\n { attrs: { label: \"png\", value: \"png\" } },\n [\n _c(\"span\", { staticStyle: { float: \"left\" } }, [\n _vm._v(\"png\")\n ]),\n _c(\n \"span\",\n {\n staticStyle: {\n float: \"right\",\n color: \"#8492a6\",\n \"font-size\": \"13px\"\n }\n },\n [_vm._v(\"透明背景\")]\n )\n ]\n )\n ],\n 1\n )\n ],\n 1\n )\n ],\n 1\n ),\n _c(\n \"span\",\n { attrs: { slot: \"footer\" }, slot: \"footer\" },\n [\n _c(\n \"el-button\",\n {\n on: {\n click: function($event) {\n _vm.saveAsImageDialogVisible = false\n }\n }\n },\n [_vm._v(\"取 消\")]\n ),\n _c(\n \"el-button\",\n {\n attrs: { type: \"primary\" },\n on: { click: _vm.saveAsImage }\n },\n [_vm._v(\"确 定\")]\n )\n ],\n 1\n )\n ],\n 1\n )\n ],\n 1\n )\n ]),\n _c(\"section\", [\n _c(\"div\", { attrs: { id: \"contextmenu\" } }, [\n _c(\n \"div\",\n { staticClass: \"menu\", attrs: { \"data-status\": \"node-selected\" } },\n [\n _c(\n \"el-button\",\n { staticClass: \"command\", attrs: { \"data-command\": \"copy\" } },\n [_vm._v(\"复制\")]\n ),\n _c(\n \"el-button\",\n { staticClass: \"command\", attrs: { \"data-command\": \"paste\" } },\n [_vm._v(\"粘贴\")]\n ),\n _c(\n \"el-button\",\n { staticClass: \"command\", attrs: { \"data-command\": \"delete\" } },\n [_vm._v(\"删除\")]\n )\n ],\n 1\n ),\n _c(\n \"div\",\n { staticClass: \"menu\", attrs: { \"data-status\": \"edge-selected\" } },\n [\n _c(\n \"el-button\",\n { staticClass: \"command\", attrs: { \"data-command\": \"delete\" } },\n [_vm._v(\"删除\")]\n )\n ],\n 1\n ),\n _c(\n \"div\",\n { staticClass: \"menu\", attrs: { \"data-status\": \"group-selected\" } },\n [\n _c(\n \"el-button\",\n { staticClass: \"command\", attrs: { \"data-command\": \"copy\" } },\n [_vm._v(\"复制\")]\n ),\n _c(\n \"el-button\",\n { staticClass: \"command\", attrs: { \"data-command\": \"paste\" } },\n [_vm._v(\"粘贴\")]\n ),\n _c(\n \"el-button\",\n {\n staticClass: \"command\",\n attrs: { \"data-command\": \"unGroup\" }\n },\n [_vm._v(\"取消组合\")]\n ),\n _c(\n \"el-button\",\n { staticClass: \"command\", attrs: { \"data-command\": \"delete\" } },\n [_vm._v(\"删除\")]\n )\n ],\n 1\n ),\n _c(\n \"div\",\n {\n staticClass: \"menu\",\n attrs: { \"data-status\": \"canvas-selected\" }\n },\n [\n _c(\n \"el-button\",\n { staticClass: \"command\", attrs: { \"data-command\": \"undo\" } },\n [_vm._v(\"撤销\")]\n ),\n _c(\n \"el-button\",\n {\n staticClass: \"command disable\",\n attrs: { \"data-command\": \"redo\" }\n },\n [_vm._v(\"重做\")]\n )\n ],\n 1\n ),\n _c(\n \"div\",\n { staticClass: \"menu\", attrs: { \"data-status\": \"multi-selected\" } },\n [\n _c(\n \"el-button\",\n { staticClass: \"command\", attrs: { \"data-command\": \"copy\" } },\n [_vm._v(\"复制\")]\n ),\n _c(\n \"el-button\",\n { staticClass: \"command\", attrs: { \"data-command\": \"paste\" } },\n [_vm._v(\"粘贴\")]\n ),\n _c(\n \"el-button\",\n {\n staticClass: \"command\",\n attrs: { \"data-command\": \"addGroup\" }\n },\n [_vm._v(\"组合\")]\n )\n ],\n 1\n )\n ])\n ])\n ],\n 1\n )\n}\nvar staticRenderFns = []\nrender._withStripped = true\n\n\n\n//# sourceURL=webpack:///./src/views/index.vue?./node_modules/cache-loader/dist/cjs.js?%7B%22cacheDirectory%22:%22node_modules/.cache/vue-loader%22,%22cacheIdentifier%22:%2247ae9142-vue-loader-template%22%7D!./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options"); 227 | 228 | /***/ }), 229 | 230 | /***/ "./node_modules/css-loader/dist/cjs.js?!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src/index.js?!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader/lib/index.js?!./src/views/cankao.vue?vue&type=style&index=0&lang=css&": 231 | /*!****************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\ 232 | !*** ./node_modules/css-loader/dist/cjs.js??ref--6-oneOf-1-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--6-oneOf-1-2!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/views/cankao.vue?vue&type=style&index=0&lang=css& ***! 233 | \****************************************************************************************************************************************************************************************************************************************************************************************************************************************/ 234 | /*! no static exports found */ 235 | /***/ (function(module, exports, __webpack_require__) { 236 | 237 | eval("// Imports\nvar ___CSS_LOADER_API_IMPORT___ = __webpack_require__(/*! ../../node_modules/css-loader/dist/runtime/api.js */ \"./node_modules/css-loader/dist/runtime/api.js\");\nexports = ___CSS_LOADER_API_IMPORT___(false);\n// Module\nexports.push([module.i, \"\\n.wrap {\\r\\n border: 1px solid #eee;\\r\\n height: 833px;\\n}\\n.ph {\\r\\n height: 800px;\\n}\\n.el-icon {\\r\\n font-size: 20px;\\r\\n margin-right: 20px;\\r\\n cursor: pointer;\\n}\\n.el-icon:hover {\\r\\n color: blue;\\n}\\n.toolbar {\\r\\n padding: 6px 0;\\r\\n background: #eee;\\n}\\n.left {\\r\\n border-right: 1px solid #eee;\\r\\n background: #fcfcfc;\\n}\\n.left .getItem {\\r\\n float: left;\\r\\n width: 100px;\\r\\n height: 100px;\\r\\n margin-left: 15px;\\r\\n display: -webkit-box;\\r\\n display: -ms-flexbox;\\r\\n display: flex;\\r\\n -webkit-box-pack: center;\\r\\n -ms-flex-pack: center;\\r\\n justify-content: center;\\r\\n -webkit-box-align: center;\\r\\n -ms-flex-align: center;\\r\\n align-items: center;\\n}\\n.right {\\r\\n border-left: 1px solid #eee;\\r\\n background: #fcfcfc;\\r\\n display: -webkit-box;\\r\\n display: -ms-flexbox;\\r\\n display: flex;\\r\\n -webkit-box-orient: vertical;\\r\\n -webkit-box-direction: normal;\\r\\n -ms-flex-direction: column;\\r\\n flex-direction: column;\\n}\\n.detailpannel {\\r\\n -webkit-box-flex: 1;\\r\\n -ms-flex: 1;\\r\\n flex: 1;\\n}\\n.minimap {\\r\\n height: 226px;\\n}\\n.panel-title {\\r\\n margin-top: 10px;\\r\\n margin-left: 10px;\\r\\n font-size: 12px;\\n}\\n.block-container {\\r\\n padding: 10px;\\n}\\r\\n\", \"\"]);\n// Exports\nmodule.exports = exports;\n\n\n//# sourceURL=webpack:///./src/views/cankao.vue?./node_modules/css-loader/dist/cjs.js??ref--6-oneOf-1-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--6-oneOf-1-2!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options"); 238 | 239 | /***/ }), 240 | 241 | /***/ "./node_modules/css-loader/dist/cjs.js?!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src/index.js?!./node_modules/less-loader/dist/cjs.js?!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader/lib/index.js?!./src/views/index.vue?vue&type=style&index=0&lang=less&": 242 | /*!****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\ 243 | !*** ./node_modules/css-loader/dist/cjs.js??ref--10-oneOf-1-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--10-oneOf-1-2!./node_modules/less-loader/dist/cjs.js??ref--10-oneOf-1-3!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/views/index.vue?vue&type=style&index=0&lang=less& ***! 244 | \****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/ 245 | /*! no static exports found */ 246 | /***/ (function(module, exports, __webpack_require__) { 247 | 248 | eval("// Imports\nvar ___CSS_LOADER_API_IMPORT___ = __webpack_require__(/*! ../../node_modules/css-loader/dist/runtime/api.js */ \"./node_modules/css-loader/dist/runtime/api.js\");\nexports = ___CSS_LOADER_API_IMPORT___(false);\n// Module\nexports.push([module.i, \"body {\\n margin: 0;\\n overflow: hidden;\\n}\\n#vue-g6-editor header:nth-of-type(1) {\\n background: #fbfbfb;\\n line-height: 40px;\\n padding-left: 20px;\\n border-bottom: 1px solid #dadce0;\\n -webkit-box-sizing: border-box;\\n box-sizing: border-box;\\n}\\n#vue-g6-editor #toolbar {\\n background: #fbfbfb;\\n border-bottom: 1px solid #dadce0;\\n padding: 4px 14px;\\n}\\n#vue-g6-editor #toolbar i {\\n font-size: 18px;\\n padding: 4px;\\n margin-right: 8px;\\n color: #999999;\\n}\\n#vue-g6-editor #toolbar i:hover {\\n cursor: pointer;\\n background-color: #eeeeee;\\n color: #5cb6ff;\\n}\\n#vue-g6-editor #itempannel {\\n -webkit-box-sizing: border-box;\\n box-sizing: border-box;\\n background-color: #fbfbfb;\\n border-right: 1px solid #dadce0;\\n height: calc(100vh - 41px - 37px);\\n padding-top: 10px;\\n overflow: hidden;\\n display: -webkit-box;\\n display: -ms-flexbox;\\n display: flex;\\n -webkit-box-orient: horizontal;\\n -webkit-box-direction: normal;\\n -ms-flex-direction: row;\\n flex-direction: row;\\n -ms-flex-wrap: wrap;\\n flex-wrap: wrap;\\n -ms-flex-pack: distribute;\\n justify-content: space-around;\\n -ms-flex-line-pack: start;\\n align-content: flex-start;\\n}\\n#vue-g6-editor #itempannel .getItem {\\n cursor: move;\\n width: 80px;\\n height: 80px;\\n margin-bottom: 20px;\\n display: -webkit-box;\\n display: -ms-flexbox;\\n display: flex;\\n -webkit-box-pack: center;\\n -ms-flex-pack: center;\\n justify-content: center;\\n -webkit-box-align: center;\\n -ms-flex-align: center;\\n align-items: center;\\n}\\n#vue-g6-editor #itempannel .getItem img {\\n width: 100%;\\n}\\n#vue-g6-editor #page {\\n height: calc(100vh - 41px - 37px);\\n}\\n#vue-g6-editor #page canvas {\\n display: block;\\n width: 100%;\\n}\\n#vue-g6-editor .right-part {\\n height: calc(100vh - 41px - 37px);\\n display: -webkit-box;\\n display: -ms-flexbox;\\n display: flex;\\n -webkit-box-orient: vertical;\\n -webkit-box-direction: normal;\\n -ms-flex-direction: column;\\n flex-direction: column;\\n -webkit-box-pack: start;\\n -ms-flex-pack: start;\\n justify-content: flex-start;\\n}\\n#vue-g6-editor #detailpannel {\\n -webkit-box-flex: 1;\\n -ms-flex-positive: 1;\\n flex-grow: 1;\\n background-color: #fbfbfb;\\n border-left: 1px solid #dadce0;\\n overflow-y: scroll;\\n}\\n#vue-g6-editor #detailpannel #nodeAttributeBar .title,\\n#vue-g6-editor #detailpannel #edgeAttributeBar .title,\\n#vue-g6-editor #detailpannel #groupAttributeBar .title,\\n#vue-g6-editor #detailpannel #canvasAttributeBar .title,\\n#vue-g6-editor #detailpannel #multiAttributeBar .title {\\n height: 34px;\\n line-height: 34px;\\n text-align: center;\\n -webkit-box-sizing: border-box;\\n box-sizing: border-box;\\n font-weight: bold;\\n font-size: 13px;\\n border-width: 0 0 1px 0;\\n border-style: solid;\\n border-color: #dadce0;\\n}\\n#vue-g6-editor #detailpannel #nodeAttributeBar .main,\\n#vue-g6-editor #detailpannel #edgeAttributeBar .main,\\n#vue-g6-editor #detailpannel #groupAttributeBar .main,\\n#vue-g6-editor #detailpannel #canvasAttributeBar .main,\\n#vue-g6-editor #detailpannel #multiAttributeBar .main {\\n padding: 10px;\\n}\\n#vue-g6-editor #minimap {\\n background-color: #fbfbfb;\\n border-top: 1px solid #ccc;\\n border-left: 1px solid #ccc;\\n}\\n#vue-g6-editor #minimap .title {\\n height: 34px;\\n line-height: 34px;\\n text-align: center;\\n -webkit-box-sizing: border-box;\\n box-sizing: border-box;\\n font-weight: bold;\\n font-size: 13px;\\n border-width: 0 0 1px 0;\\n border-style: solid;\\n border-color: #dadce0;\\n}\\n#vue-g6-editor #contextmenu {\\n display: none;\\n}\\n#vue-g6-editor #contextmenu .menu /deep/ .el-button {\\n width: 100%;\\n display: block;\\n margin-left: 0;\\n border-radius: 0 !important;\\n border-bottom: none;\\n}\\n#vue-g6-editor #contextmenu .menu /deep/ .el-button:nth-last-of-type(1) {\\n border-bottom: 1px solid #dcdfe6;\\n}\\n#vue-g6-editor .save-as-image-dialog /deep/ .el-select {\\n display: block;\\n}\\n.wrap {\\n border: 1px solid #eee;\\n height: 650px;\\n}\\n.ph {\\n height: 610px;\\n width: 100%;\\n}\\n.el-icon {\\n font-size: 20px;\\n margin-right: 20px;\\n cursor: pointer;\\n}\\n.el-icon:hover {\\n color: blue;\\n}\\n.toolbar {\\n padding: 6px 0;\\n background: #eee;\\n}\\n.left {\\n border-right: 1px solid #eee;\\n background: #fcfcfc;\\n}\\n.left .getItem {\\n float: left;\\n width: 100px;\\n height: 100px;\\n margin-left: 15px;\\n display: -webkit-box;\\n display: -ms-flexbox;\\n display: flex;\\n -webkit-box-pack: center;\\n -ms-flex-pack: center;\\n justify-content: center;\\n -webkit-box-align: center;\\n -ms-flex-align: center;\\n align-items: center;\\n}\\n.input1 {\\n width: 85%;\\n float: none !important;\\n}\\n.input2 {\\n width: 60%;\\n float: none !important;\\n}\\n.elform1 {\\n /*height: 380px;*/\\n}\\n.addC {\\n padding: 0px !important;\\n}\\n.inputStyle {\\n /*width: 292px!important;*/\\n}\\n.change .el-form-item__label {\\n margin-top: 16px !important;\\n}\\n.inputStyle1 {\\n width: 120px !important;\\n}\\n\", \"\"]);\n// Exports\nmodule.exports = exports;\n\n\n//# sourceURL=webpack:///./src/views/index.vue?./node_modules/css-loader/dist/cjs.js??ref--10-oneOf-1-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--10-oneOf-1-2!./node_modules/less-loader/dist/cjs.js??ref--10-oneOf-1-3!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options"); 249 | 250 | /***/ }), 251 | 252 | /***/ "./node_modules/vue-style-loader/index.js?!./node_modules/css-loader/dist/cjs.js?!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src/index.js?!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader/lib/index.js?!./src/views/cankao.vue?vue&type=style&index=0&lang=css&": 253 | /*!******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\ 254 | !*** ./node_modules/vue-style-loader??ref--6-oneOf-1-0!./node_modules/css-loader/dist/cjs.js??ref--6-oneOf-1-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--6-oneOf-1-2!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/views/cankao.vue?vue&type=style&index=0&lang=css& ***! 255 | \******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/ 256 | /*! no static exports found */ 257 | /***/ (function(module, exports, __webpack_require__) { 258 | 259 | eval("// style-loader: Adds some css to the DOM by adding a