├── .eslintignore ├── .browserslistrc ├── public ├── favicon.ico └── index.html ├── src ├── assets │ └── logo.png ├── main.js ├── App.vue └── components │ ├── Modal.vue │ └── EditorCom.vue ├── babel.config.js ├── .editorconfig ├── vue.config.js ├── .gitignore ├── .eslintrc.js ├── .github └── workflows │ └── buildAndDeploy.yml ├── README.md └── package.json /.eslintignore: -------------------------------------------------------------------------------- 1 | src/components/* -------------------------------------------------------------------------------- /.browserslistrc: -------------------------------------------------------------------------------- 1 | > 1% 2 | last 2 versions 3 | not dead 4 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fastTofast/antV-X6-demo/HEAD/public/favicon.ico -------------------------------------------------------------------------------- /src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fastTofast/antV-X6-demo/HEAD/src/assets/logo.png -------------------------------------------------------------------------------- /babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | '@vue/cli-plugin-babel/preset' 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | [*.{js,jsx,ts,tsx,vue}] 2 | indent_style = space 3 | indent_size = 2 4 | trim_trailing_whitespace = true 5 | insert_final_newline = true 6 | -------------------------------------------------------------------------------- /vue.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | outputDir: 'dist', 3 | publicPath: process.env.NODE_ENV === 'production' 4 | ? '/antV-X6-demo/' 5 | : '/' 6 | } 7 | -------------------------------------------------------------------------------- /src/main.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import App from './App.vue' 3 | 4 | import ElementUI from 'element-ui' 5 | import 'element-ui/lib/theme-chalk/index.css' 6 | Vue.use(ElementUI) 7 | Vue.config.productionTip = false 8 | 9 | new Vue({ 10 | render: h => h(App) 11 | }).$mount('#app') 12 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | /dist 4 | .history 5 | 6 | # local env files 7 | .env.local 8 | .env.*.local 9 | 10 | # Log files 11 | npm-debug.log* 12 | yarn-debug.log* 13 | yarn-error.log* 14 | 15 | # Editor directories and files 16 | .idea 17 | .vscode 18 | *.suo 19 | *.ntvs* 20 | *.njsproj 21 | *.sln 22 | *.sw? 23 | -------------------------------------------------------------------------------- /.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | env: { 4 | node: true 5 | }, 6 | extends: [ 7 | 'plugin:vue/essential', 8 | '@vue/standard' 9 | ], 10 | parserOptions: { 11 | parser: 'babel-eslint' 12 | }, 13 | rules: { 14 | 'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off', 15 | 'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off' 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /.github/workflows/buildAndDeploy.yml: -------------------------------------------------------------------------------- 1 | name: buildAndDeploy 2 | on: 3 | push 4 | jobs: 5 | build-and-deploy: 6 | runs-on: ubuntu-latest # 我们选择使用最新的ubuntu系统 7 | steps: 8 | - name: checkout 9 | uses: actions/checkout@master # 将代码拷贝到虚机中 10 | 11 | - name: buildAndDeploy 12 | uses: JamesIves/github-pages-deploy-action@master 13 | env: 14 | ACCESS_TOKEN: ${{ secrets.ACTION_TOKEN }} # 使用刚新建的secret 15 | BRANCH: gh-pages # 存放产物的分支名称 16 | FOLDER: dist # 存放build后产物的目录 17 | BUILD_SCRIPT: npm install && npm run build # 执行的命令 18 | -------------------------------------------------------------------------------- /src/App.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 17 | 18 | 34 | -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | <%= htmlWebpackPlugin.options.title %> 9 | 10 | 11 | 14 |
15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # x6 2 | 3 | ### 本 demo 主要为调研 X6 实现流程可视化编辑功能的实现，是否满足业务需求 4 | 5 | ## 基本功能 6 | 7 | ### 拖拽菜单生成节点 8 | 9 | ### 自定义节点类型 10 | 11 | ### 点击节点弹出侧边栏编辑业务数据 12 | 13 | ### 修改业务数据，同步到节点更新 14 | 15 | ### 鼠标点击拖动画布 16 | 17 | ### 鼠标点击拖动节点 18 | 19 | ### 按住 ctrl+滚动鼠标滚轮缩放画布、可实现点击按钮放大缩小 20 | 21 | ### delete、backspa 删除选中节点，可实现按钮删除 22 | 23 | ### 自定义连线，锚点和链接桩 24 | 25 | ### 可实现数据生成节点 26 | 27 | ## 结论 28 | 29 | ### 优点：X6 展示了极大的灵活性与可塑性 30 | 31 | ### 缺点：缺少 API 文档，很多方法接口都需要去源码里找 32 | 33 | ## demo界面 34 | [demo地址](https://fasttofast.github.io/antV-X6-demo/) 35 | ![界面](https://github.com/fastTofast/picture/blob/master/image.png) 36 | ## Project setup 37 | 38 | ``` 39 | npm install 40 | ``` 41 | 42 | ### Compiles and hot-reloads for development 43 | 44 | ``` 45 | npm run serve 46 | ``` 47 | 48 | ### Compiles and minifies for production 49 | 50 | ``` 51 | npm run build 52 | ``` 53 | 54 | ### Run your tests 55 | 56 | ``` 57 | npm run test 58 | ``` 59 | 60 | ### Lints and fixes files 61 | 62 | ``` 63 | npm run lint 64 | ``` 65 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "x6", 3 | "version": "0.1.0", 4 | "private": true, 5 | "homepage":"https://fastTofast.github.io/antV-X6-demo", 6 | "scripts": { 7 | "serve": "vue-cli-service serve", 8 | "build": "vue-cli-service build", 9 | "lint": "vue-cli-service lint" 10 | }, 11 | "dependencies": { 12 | "@antv/x6": "^0.3.1", 13 | "core-js": "^3.6.4", 14 | "element-ui": "^2.13.0", 15 | "vue": "^2.6.11" 16 | }, 17 | "devDependencies": { 18 | "@vue/cli-plugin-babel": "^4.3.0", 19 | "@vue/cli-plugin-eslint": "^4.3.0", 20 | "@vue/cli-service": "^4.3.0", 21 | "@vue/eslint-config-standard": "^5.1.2", 22 | "babel-eslint": "^10.1.0", 23 | "eslint": "^6.7.2", 24 | "eslint-plugin-import": "^2.20.2", 25 | "eslint-plugin-node": "^11.1.0", 26 | "eslint-plugin-promise": "^4.2.1", 27 | "eslint-plugin-standard": "^4.0.0", 28 | "eslint-plugin-vue": "^6.2.2", 29 | "node-sass": "^4.12.0", 30 | "sass-loader": "^8.0.2", 31 | "vue-template-compiler": "^2.6.11" 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /src/components/Modal.vue: -------------------------------------------------------------------------------- 1 | 19 | 20 | 39 | 40 | 110 | -------------------------------------------------------------------------------- /src/components/EditorCom.vue: -------------------------------------------------------------------------------- 1 | 68 | 69 | 380 | 381 | 493 | --------------------------------------------------------------------------------