├── .browserslistrc ├── .editorconfig ├── .env.build-lib ├── .env.development ├── .env.production ├── .eslintignore ├── .eslintrc.js ├── .github └── FUNDING.yml ├── .gitignore ├── License ├── README.md ├── README.version.md ├── babel.config.js ├── docs ├── css │ └── app.8e555a42.css ├── favicon.ico ├── fonts │ ├── iconfont.8f378f6e.ttf │ ├── iconfont.9e996946.woff │ ├── iconfont.e673e8a4.eot │ ├── ionicons.143146fa.woff2 │ ├── ionicons.99ac3308.woff │ └── ionicons.d535a25a.ttf ├── img │ ├── iconfont.aefa9158.svg │ └── ionicons.a2c4a261.svg ├── index.html └── js │ ├── app.0664da8e.js │ └── chunk-vendors.79c25a07.js ├── document ├── FlowChart │ ├── 20200101101220.png │ └── XFC_20200101103214.json ├── IMG_20191109_153609.jpg ├── Introduction.md ├── README.md ├── preview_001.png ├── preview_v3.0.2_20200711_232652.png └── 节点与边属性梳理.xlsx ├── example ├── App.vue ├── assets │ └── images │ │ ├── langs │ │ ├── en-US.png │ │ └── zh-CN.png │ │ ├── logo.png │ │ └── rotate.png └── main.js ├── package.json ├── postcss.config.js ├── public ├── favicon.ico └── index.html ├── src ├── Editor │ ├── Index.vue │ ├── components │ │ ├── CardBox.vue │ │ ├── CardItem.vue │ │ ├── Handler.vue │ │ ├── Navigator.vue │ │ ├── NodeElement.vue │ │ ├── Options.vue │ │ └── ToolBox │ │ │ ├── Index.vue │ │ │ └── ToolItem.vue │ └── containers │ │ ├── AboutXFC.vue │ │ ├── ContextMenu.vue │ │ ├── History.vue │ │ ├── PanelLeft.vue │ │ ├── PanelRight.vue │ │ ├── PreviewModel.vue │ │ ├── ShortcutList.vue │ │ ├── Sketchpad.vue │ │ └── ToolBar.vue ├── assets │ ├── iconfont │ │ ├── iconfont.css │ │ ├── iconfont.eot │ │ ├── iconfont.svg │ │ ├── iconfont.ttf │ │ ├── iconfont.woff │ │ └── iconfont.woff2 │ ├── images │ │ ├── clipart │ │ │ ├── Credit_Card_128x128.png │ │ │ ├── Database_128x128.png │ │ │ ├── Doctor1_128x128.png │ │ │ ├── Earth_globe_128x128.png │ │ │ ├── Email_128x128.png │ │ │ ├── Empty_Folder_128x128.png │ │ │ ├── Firewall_02_128x128.png │ │ │ ├── Full_Folder_128x128.png │ │ │ ├── Gear_128x128.png │ │ │ ├── Graph_128x128.png │ │ │ ├── Laptop_128x128.png │ │ │ ├── Lock_128x128.png │ │ │ ├── MacBook_128x128.png │ │ │ ├── Monitor_Tower_128x128.png │ │ │ ├── Piggy_Bank_128x128.png │ │ │ ├── Pilot1_128x128.png │ │ │ ├── Printer_128x128.png │ │ │ ├── Router_Icon_128x128.png │ │ │ ├── Safe_128x128.png │ │ │ ├── Security1_128x128.png │ │ │ ├── Server_Tower_128x128.png │ │ │ ├── Shopping_Cart_128x128.png │ │ │ ├── Software_128x128.png │ │ │ ├── Soldier1_128x128.png │ │ │ ├── Suit1_128x128.png │ │ │ ├── Suit2_128x128.png │ │ │ ├── Suit3_128x128.png │ │ │ ├── Tech1_128x128.png │ │ │ ├── Telesales1_128x128.png │ │ │ ├── Virus_128x128.png │ │ │ ├── Wireless_Router_N_128x128.png │ │ │ ├── Worker1_128x128.png │ │ │ ├── Workstation_128x128.png │ │ │ ├── iMac_128x128.png │ │ │ └── iPad_128x128.png │ │ ├── langs │ │ │ ├── en-US.png │ │ │ └── zh-CN.png │ │ ├── logo.png │ │ ├── logo_01.png │ │ ├── logo_02.png │ │ ├── logo_03.png │ │ ├── logo_04.png │ │ ├── logo_10.png │ │ ├── logo_11.png │ │ ├── logo_12.png │ │ ├── logo_13.png │ │ ├── logo_14.png │ │ └── rotate.png │ └── styles │ │ └── main.less ├── config │ ├── index.js │ ├── infoPanel.js │ ├── materials.js │ ├── storage.js │ ├── system.js │ └── tools.js ├── global │ ├── components │ │ ├── ColorPicker │ │ │ └── Index.vue │ │ ├── Divider │ │ │ └── Index.vue │ │ ├── Icon │ │ │ └── Index.vue │ │ ├── NoData │ │ │ └── Index.vue │ │ ├── Tooltip │ │ │ └── Index.vue │ │ └── index.js │ ├── g6 │ │ ├── behavior │ │ │ ├── index.js │ │ │ ├── nodeControl.js │ │ │ └── previewCanvas.js │ │ ├── config │ │ │ ├── anchor.js │ │ │ ├── anchorBg.js │ │ │ ├── dottedNode.js │ │ │ ├── edge.js │ │ │ ├── edgeAnimate.js │ │ │ ├── index.js │ │ │ └── shapeControl.js │ │ ├── edge │ │ │ ├── base.js │ │ │ ├── broken.js │ │ │ ├── cubic.js │ │ │ ├── index.js │ │ │ └── line.js │ │ ├── index.js │ │ ├── node │ │ │ ├── arrow │ │ │ │ ├── arrow-down.js │ │ │ │ ├── arrow-left.js │ │ │ │ ├── arrow-right.js │ │ │ │ ├── arrow-up.js │ │ │ │ ├── bent-left-arrow.js │ │ │ │ ├── bent-right-arrow.js │ │ │ │ ├── bent-up-arrow.js │ │ │ │ ├── callout-double-arrow.js │ │ │ │ ├── callout-quad-arrow.js │ │ │ │ ├── callout-up-arrow.js │ │ │ │ ├── chevron-arrow.js │ │ │ │ ├── circular-arrow.js │ │ │ │ ├── index.js │ │ │ │ ├── jump-in-left-arrow.js │ │ │ │ ├── jump-in-right-arrow.js │ │ │ │ ├── left-and-up-arrow.js │ │ │ │ ├── left-sharp-edged-head-arrow.js │ │ │ │ ├── notched-signal-in-arrow.js │ │ │ │ ├── quad-arrow.js │ │ │ │ ├── right-notched-arrow.js │ │ │ │ ├── sharp-edged-arrow.js │ │ │ │ ├── signal-in-arrow.js │ │ │ │ ├── slender-left-arrow.js │ │ │ │ ├── slender-two-way-arrow.js │ │ │ │ ├── slender-wide-tailed-arrow.js │ │ │ │ ├── stylised-notched-arrow.js │ │ │ │ ├── triad-arrow.js │ │ │ │ ├── two-way-arrow-horizontal.js │ │ │ │ ├── two-way-arrow-vertical.js │ │ │ │ ├── u-turn-arrow.js │ │ │ │ └── u-turn-down-arrow.js │ │ │ ├── base.js │ │ │ ├── general │ │ │ │ ├── actor.js │ │ │ │ ├── and.js │ │ │ │ ├── arrow.js │ │ │ │ ├── bidirectional-arrow.js │ │ │ │ ├── callout.js │ │ │ │ ├── card.js │ │ │ │ ├── circle.js │ │ │ │ ├── cloud.js │ │ │ │ ├── cube.js │ │ │ │ ├── cylinder.js │ │ │ │ ├── data-storage.js │ │ │ │ ├── diamond.js │ │ │ │ ├── document.js │ │ │ │ ├── ellipse.js │ │ │ │ ├── hexagon.js │ │ │ │ ├── index.js │ │ │ │ ├── internal-storage.js │ │ │ │ ├── note.js │ │ │ │ ├── or.js │ │ │ │ ├── parallelogram.js │ │ │ │ ├── process.js │ │ │ │ ├── rectangle.js │ │ │ │ ├── rounded-rectangle.js │ │ │ │ ├── square.js │ │ │ │ ├── step.js │ │ │ │ ├── tape.js │ │ │ │ ├── text.js │ │ │ │ ├── textbox.js │ │ │ │ ├── trapezoid.js │ │ │ │ └── triangle.js │ │ │ └── index.js │ │ ├── plugins │ │ │ ├── XBackground.js │ │ │ └── XGrid.js │ │ └── utils │ │ │ ├── anchor │ │ │ ├── draw.js │ │ │ ├── index.js │ │ │ ├── rotate.js │ │ │ ├── setState.js │ │ │ └── update.js │ │ │ ├── common.js │ │ │ ├── edge │ │ │ ├── destroyAnimate.js │ │ │ ├── drawAnimate.js │ │ │ ├── index.js │ │ │ ├── polylineFinding.js │ │ │ ├── setState.js │ │ │ └── update.js │ │ │ ├── index.js │ │ │ ├── node │ │ │ ├── calculateArrow.js │ │ │ └── index.js │ │ │ └── shapeControl │ │ │ ├── draw.js │ │ │ ├── index.js │ │ │ ├── rotate.js │ │ │ ├── setState.js │ │ │ └── update.js │ └── utils │ │ ├── bus.js │ │ ├── filters.js │ │ ├── index.js │ │ └── storage.js ├── i18n.js ├── langs │ ├── en-US.js │ ├── index.js │ └── zh-CN.js ├── main.js ├── registerServiceWorker.js └── xfc.js └── vue.config.js /.browserslistrc: -------------------------------------------------------------------------------- 1 | > 1% 2 | last 2 versions 3 | -------------------------------------------------------------------------------- /.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 | -------------------------------------------------------------------------------- /.env.build-lib: -------------------------------------------------------------------------------- 1 | NODE_ENV = 'production' 2 | IS_BUILD_LIB = true -------------------------------------------------------------------------------- /.env.development: -------------------------------------------------------------------------------- 1 | NODE_ENV = 'development' -------------------------------------------------------------------------------- /.env.production: -------------------------------------------------------------------------------- 1 | NODE_ENV = 'production' -------------------------------------------------------------------------------- /.eslintignore: -------------------------------------------------------------------------------- 1 | ./src/global/lib/g6/G6/* 2 | -------------------------------------------------------------------------------- /.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | env: { 4 | browser: true 5 | }, 6 | extends: [ 7 | 'plugin:vue/essential', 8 | '@vue/standard' 9 | ], 10 | rules: { 11 | // allow async-await 12 | 'generator-star-spacing': 'off', 13 | 'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off', 14 | 'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off', 15 | 'prefer-const': ['warn', { 'destructuring': 'any', 'ignoreReadBeforeAssign': false }], 16 | 'indent': 'off', 17 | 'vue/script-indent': ['warn', 2, { 'baseIndent': 1, 'switchCase': 1 }], 18 | 'vue/no-parsing-error': [2, { 'x-invalid-end-tag': false }] 19 | }, 20 | overrides: [ 21 | { 22 | 'files': ['*.vue'], 23 | 'rules': { 24 | 'indent': 'off' 25 | } 26 | } 27 | ], 28 | parserOptions: { 29 | parser: 'babel-eslint' 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /.github/FUNDING.yml: -------------------------------------------------------------------------------- 1 | # These are supported funding model platforms 2 | 3 | github: # Replace with up to 4 GitHub Sponsors-enabled usernames e.g., [user1, user2] 4 | patreon: # Replace with a single Patreon username 5 | open_collective: # Replace with a single Open Collective username 6 | ko_fi: # Replace with a single Ko-fi username 7 | tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel 8 | community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry 9 | liberapay: # Replace with a single Liberapay username 10 | issuehunt: # Replace with a single IssueHunt username 11 | otechie: # Replace with a single Otechie username 12 | lfx_crowdfunding: # Replace with a single LFX Crowdfunding project-name e.g., cloud-foundry 13 | # custom: # Replace with up to 4 custom sponsorship URLs e.g., ['link1', 'link2'] 14 | custom: https://raw.githubusercontent.com/OXOYO/OXOYO/refs/heads/master/pay_me_wx.png 15 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | /dist 4 | 5 | # lock 6 | package-lock.json 7 | 8 | # local env files 9 | .env.local 10 | .env.*.local 11 | 12 | # Log files 13 | npm-debug.log* 14 | yarn-debug.log* 15 | yarn-error.log* 16 | 17 | # Editor directories and files 18 | .idea 19 | .vscode 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /License: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2019-present OXOYO 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.version.md: -------------------------------------------------------------------------------- 1 | ## V4.0.0 2 | 3 | 基于@antv/X6和Vue的可视化图形编辑器。 4 | A visual graph editor based on @antv/X6 and Vue. 5 | 6 | ## V3.0.0 7 | 8 | 基于G6和Vue的可视化图形编辑器。 9 | A visual graph editor based on G6 and Vue. 10 | 11 | 12 | ## V2.0.0 13 | A flowchart editor plugin based on vue. 14 | 15 | ## V1.0.0 16 | 17 | X-Flowchart 18 | -------------------------------------------------------------------------------- /babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | '@vue/app' 4 | ], 5 | sourceType: 'unambiguous' 6 | } 7 | -------------------------------------------------------------------------------- /docs/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/OXOYO/X-Flowchart-Vue/2c75c97ed228bed0a7c3ea07fb4c8ef3dab94796/docs/favicon.ico -------------------------------------------------------------------------------- /docs/fonts/iconfont.8f378f6e.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/OXOYO/X-Flowchart-Vue/2c75c97ed228bed0a7c3ea07fb4c8ef3dab94796/docs/fonts/iconfont.8f378f6e.ttf -------------------------------------------------------------------------------- /docs/fonts/iconfont.9e996946.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/OXOYO/X-Flowchart-Vue/2c75c97ed228bed0a7c3ea07fb4c8ef3dab94796/docs/fonts/iconfont.9e996946.woff -------------------------------------------------------------------------------- /docs/fonts/iconfont.e673e8a4.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/OXOYO/X-Flowchart-Vue/2c75c97ed228bed0a7c3ea07fb4c8ef3dab94796/docs/fonts/iconfont.e673e8a4.eot -------------------------------------------------------------------------------- /docs/fonts/ionicons.143146fa.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/OXOYO/X-Flowchart-Vue/2c75c97ed228bed0a7c3ea07fb4c8ef3dab94796/docs/fonts/ionicons.143146fa.woff2 -------------------------------------------------------------------------------- /docs/fonts/ionicons.99ac3308.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/OXOYO/X-Flowchart-Vue/2c75c97ed228bed0a7c3ea07fb4c8ef3dab94796/docs/fonts/ionicons.99ac3308.woff -------------------------------------------------------------------------------- /docs/fonts/ionicons.d535a25a.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/OXOYO/X-Flowchart-Vue/2c75c97ed228bed0a7c3ea07fb4c8ef3dab94796/docs/fonts/ionicons.d535a25a.ttf -------------------------------------------------------------------------------- /docs/index.html: -------------------------------------------------------------------------------- 1 | x-flowchart-vue
-------------------------------------------------------------------------------- /document/FlowChart/20200101101220.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/OXOYO/X-Flowchart-Vue/2c75c97ed228bed0a7c3ea07fb4c8ef3dab94796/document/FlowChart/20200101101220.png -------------------------------------------------------------------------------- /document/IMG_20191109_153609.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/OXOYO/X-Flowchart-Vue/2c75c97ed228bed0a7c3ea07fb4c8ef3dab94796/document/IMG_20191109_153609.jpg -------------------------------------------------------------------------------- /document/preview_001.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/OXOYO/X-Flowchart-Vue/2c75c97ed228bed0a7c3ea07fb4c8ef3dab94796/document/preview_001.png -------------------------------------------------------------------------------- /document/preview_v3.0.2_20200711_232652.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/OXOYO/X-Flowchart-Vue/2c75c97ed228bed0a7c3ea07fb4c8ef3dab94796/document/preview_v3.0.2_20200711_232652.png -------------------------------------------------------------------------------- /document/节点与边属性梳理.xlsx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/OXOYO/X-Flowchart-Vue/2c75c97ed228bed0a7c3ea07fb4c8ef3dab94796/document/节点与边属性梳理.xlsx -------------------------------------------------------------------------------- /example/assets/images/langs/en-US.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/OXOYO/X-Flowchart-Vue/2c75c97ed228bed0a7c3ea07fb4c8ef3dab94796/example/assets/images/langs/en-US.png -------------------------------------------------------------------------------- /example/assets/images/langs/zh-CN.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/OXOYO/X-Flowchart-Vue/2c75c97ed228bed0a7c3ea07fb4c8ef3dab94796/example/assets/images/langs/zh-CN.png -------------------------------------------------------------------------------- /example/assets/images/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/OXOYO/X-Flowchart-Vue/2c75c97ed228bed0a7c3ea07fb4c8ef3dab94796/example/assets/images/logo.png -------------------------------------------------------------------------------- /example/assets/images/rotate.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/OXOYO/X-Flowchart-Vue/2c75c97ed228bed0a7c3ea07fb4c8ef3dab94796/example/assets/images/rotate.png -------------------------------------------------------------------------------- /example/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 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@oxoyo/xfc", 3 | "version": "3.0.2", 4 | "description": "A visual graph editor based on G6 and Vue.", 5 | "main": "dist/xfc.umd.min.js", 6 | "scripts": { 7 | "serve": "vue-cli-service serve --mode development", 8 | "example": "npx --max_old_space_size=4096 vue-cli-service serve --mode development ./example/main.js", 9 | "build": "vue-cli-service build --mode production", 10 | "build-lib": "vue-cli-service build --mode build-lib --target lib --name xfc ./src/xfc.js --dest ./dist", 11 | "lint": "vue-cli-service lint" 12 | }, 13 | "files": [ 14 | "dist" 15 | ], 16 | "repository": { 17 | "type": "git", 18 | "url": "git+https://github.com/OXOYO/X-Flowchart-Vue.git" 19 | }, 20 | "keywords": [ 21 | "flowchart", 22 | "vue-flowchart", 23 | "g6", 24 | "g6-editor", 25 | "mind" 26 | ], 27 | "author": "OXOYO", 28 | "license": "MIT", 29 | "bugs": { 30 | "url": "https://github.com/OXOYO/X-Flowchart-Vue/issues" 31 | }, 32 | "homepage": "https://github.com/OXOYO/X-Flowchart-Vue#readme", 33 | "dependencies": { 34 | "@antv/g6": "^3.5.6", 35 | "iview": "^3.4.2", 36 | "mousetrap": "^1.6.3", 37 | "register-service-worker": "^1.6.2", 38 | "screenfull": "^4.2.1", 39 | "v-click-outside": "^2.1.4", 40 | "vue": "^2.6.10", 41 | "vue-color": "^2.7.0", 42 | "vue-i18n": "^8.14.0" 43 | }, 44 | "devDependencies": { 45 | "@vue/cli-plugin-babel": "^3.11.0", 46 | "@vue/cli-plugin-eslint": "^3.11.0", 47 | "@vue/cli-service": "^3.11.0", 48 | "@vue/eslint-config-standard": "^4.0.0", 49 | "babel-eslint": "^8.2.2", 50 | "eslint": "^5.16.0", 51 | "eslint-plugin-vue": "^5.0.0", 52 | "less": "^3.0.4", 53 | "less-loader": "^5.0.0", 54 | "vue-template-compiler": "^2.6.10" 55 | } 56 | } 57 | -------------------------------------------------------------------------------- /postcss.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: { 3 | autoprefixer: {} 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/OXOYO/X-Flowchart-Vue/2c75c97ed228bed0a7c3ea07fb4c8ef3dab94796/public/favicon.ico -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | x-flowchart-vue 9 | 10 | 11 | 14 |
15 | 16 | 17 | -------------------------------------------------------------------------------- /src/Editor/components/CardItem.vue: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by OXOYO on 2019/7/1. 3 | * 4 | * CardItem 5 | */ 6 | 7 | 53 | 54 | 68 | 69 | 116 | -------------------------------------------------------------------------------- /src/Editor/components/Navigator.vue: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by OXOYO on 2019/7/1. 3 | * 4 | * Navigator 导航器面板 5 | */ 6 | 7 | 15 | 16 | 19 | 20 | 25 | -------------------------------------------------------------------------------- /src/Editor/components/NodeElement.vue: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by OXOYO on 2019/7/2. 3 | * 4 | * NodeElement 节点元素 5 | */ 6 | 7 | 34 | 35 | 47 | 48 | 101 | -------------------------------------------------------------------------------- /src/Editor/components/ToolBox/Index.vue: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by OXOYO on 2019/5/18. 3 | * 4 | */ 5 | 6 | 61 | 62 | 67 | 68 | 83 | -------------------------------------------------------------------------------- /src/Editor/components/ToolBox/ToolItem.vue: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by OXOYO on 2019/5/18. 3 | * 4 | */ 5 | 6 | 12 | 13 | 19 | 20 | 30 | -------------------------------------------------------------------------------- /src/Editor/containers/PanelLeft.vue: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by OXOYO on 2019/7/2. 3 | * 4 | * PanelLeft 左侧面板 5 | */ 6 | 7 | 17 | 18 | 37 | 38 | 69 | -------------------------------------------------------------------------------- /src/Editor/containers/PanelRight.vue: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by OXOYO on 2019/7/2. 3 | * 4 | * PanelRight 右侧面板 5 | */ 6 | 7 | 8 | 9 | 26 | 27 | 68 | -------------------------------------------------------------------------------- /src/Editor/containers/PreviewModel.vue: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by OXOYO on 2019/10/15. 3 | * 4 | * 预览窗口 5 | */ 6 | 7 | 24 | 25 | 56 | 57 | 105 | -------------------------------------------------------------------------------- /src/Editor/containers/ShortcutList.vue: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by OXOYO on 2020/5/15 3 | * 4 | * 快捷键列表 5 | */ 6 | 7 | 10 | 11 | 21 | 22 | 71 | -------------------------------------------------------------------------------- /src/Editor/containers/Sketchpad.vue: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by OXOYO on 2019/7/1. 3 | * 4 | * Sketchpad 画板 5 | */ 6 | 7 | 34 | 35 | 43 | 44 | 87 | -------------------------------------------------------------------------------- /src/assets/iconfont/iconfont.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/OXOYO/X-Flowchart-Vue/2c75c97ed228bed0a7c3ea07fb4c8ef3dab94796/src/assets/iconfont/iconfont.eot -------------------------------------------------------------------------------- /src/assets/iconfont/iconfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/OXOYO/X-Flowchart-Vue/2c75c97ed228bed0a7c3ea07fb4c8ef3dab94796/src/assets/iconfont/iconfont.ttf -------------------------------------------------------------------------------- /src/assets/iconfont/iconfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/OXOYO/X-Flowchart-Vue/2c75c97ed228bed0a7c3ea07fb4c8ef3dab94796/src/assets/iconfont/iconfont.woff -------------------------------------------------------------------------------- /src/assets/iconfont/iconfont.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/OXOYO/X-Flowchart-Vue/2c75c97ed228bed0a7c3ea07fb4c8ef3dab94796/src/assets/iconfont/iconfont.woff2 -------------------------------------------------------------------------------- /src/assets/images/clipart/Credit_Card_128x128.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/OXOYO/X-Flowchart-Vue/2c75c97ed228bed0a7c3ea07fb4c8ef3dab94796/src/assets/images/clipart/Credit_Card_128x128.png -------------------------------------------------------------------------------- /src/assets/images/clipart/Database_128x128.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/OXOYO/X-Flowchart-Vue/2c75c97ed228bed0a7c3ea07fb4c8ef3dab94796/src/assets/images/clipart/Database_128x128.png -------------------------------------------------------------------------------- /src/assets/images/clipart/Doctor1_128x128.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/OXOYO/X-Flowchart-Vue/2c75c97ed228bed0a7c3ea07fb4c8ef3dab94796/src/assets/images/clipart/Doctor1_128x128.png -------------------------------------------------------------------------------- /src/assets/images/clipart/Earth_globe_128x128.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/OXOYO/X-Flowchart-Vue/2c75c97ed228bed0a7c3ea07fb4c8ef3dab94796/src/assets/images/clipart/Earth_globe_128x128.png -------------------------------------------------------------------------------- /src/assets/images/clipart/Email_128x128.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/OXOYO/X-Flowchart-Vue/2c75c97ed228bed0a7c3ea07fb4c8ef3dab94796/src/assets/images/clipart/Email_128x128.png -------------------------------------------------------------------------------- /src/assets/images/clipart/Empty_Folder_128x128.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/OXOYO/X-Flowchart-Vue/2c75c97ed228bed0a7c3ea07fb4c8ef3dab94796/src/assets/images/clipart/Empty_Folder_128x128.png -------------------------------------------------------------------------------- /src/assets/images/clipart/Firewall_02_128x128.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/OXOYO/X-Flowchart-Vue/2c75c97ed228bed0a7c3ea07fb4c8ef3dab94796/src/assets/images/clipart/Firewall_02_128x128.png -------------------------------------------------------------------------------- /src/assets/images/clipart/Full_Folder_128x128.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/OXOYO/X-Flowchart-Vue/2c75c97ed228bed0a7c3ea07fb4c8ef3dab94796/src/assets/images/clipart/Full_Folder_128x128.png -------------------------------------------------------------------------------- /src/assets/images/clipart/Gear_128x128.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/OXOYO/X-Flowchart-Vue/2c75c97ed228bed0a7c3ea07fb4c8ef3dab94796/src/assets/images/clipart/Gear_128x128.png -------------------------------------------------------------------------------- /src/assets/images/clipart/Graph_128x128.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/OXOYO/X-Flowchart-Vue/2c75c97ed228bed0a7c3ea07fb4c8ef3dab94796/src/assets/images/clipart/Graph_128x128.png -------------------------------------------------------------------------------- /src/assets/images/clipart/Laptop_128x128.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/OXOYO/X-Flowchart-Vue/2c75c97ed228bed0a7c3ea07fb4c8ef3dab94796/src/assets/images/clipart/Laptop_128x128.png -------------------------------------------------------------------------------- /src/assets/images/clipart/Lock_128x128.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/OXOYO/X-Flowchart-Vue/2c75c97ed228bed0a7c3ea07fb4c8ef3dab94796/src/assets/images/clipart/Lock_128x128.png -------------------------------------------------------------------------------- /src/assets/images/clipart/MacBook_128x128.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/OXOYO/X-Flowchart-Vue/2c75c97ed228bed0a7c3ea07fb4c8ef3dab94796/src/assets/images/clipart/MacBook_128x128.png -------------------------------------------------------------------------------- /src/assets/images/clipart/Monitor_Tower_128x128.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/OXOYO/X-Flowchart-Vue/2c75c97ed228bed0a7c3ea07fb4c8ef3dab94796/src/assets/images/clipart/Monitor_Tower_128x128.png -------------------------------------------------------------------------------- /src/assets/images/clipart/Piggy_Bank_128x128.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/OXOYO/X-Flowchart-Vue/2c75c97ed228bed0a7c3ea07fb4c8ef3dab94796/src/assets/images/clipart/Piggy_Bank_128x128.png -------------------------------------------------------------------------------- /src/assets/images/clipart/Pilot1_128x128.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/OXOYO/X-Flowchart-Vue/2c75c97ed228bed0a7c3ea07fb4c8ef3dab94796/src/assets/images/clipart/Pilot1_128x128.png -------------------------------------------------------------------------------- /src/assets/images/clipart/Printer_128x128.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/OXOYO/X-Flowchart-Vue/2c75c97ed228bed0a7c3ea07fb4c8ef3dab94796/src/assets/images/clipart/Printer_128x128.png -------------------------------------------------------------------------------- /src/assets/images/clipart/Router_Icon_128x128.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/OXOYO/X-Flowchart-Vue/2c75c97ed228bed0a7c3ea07fb4c8ef3dab94796/src/assets/images/clipart/Router_Icon_128x128.png -------------------------------------------------------------------------------- /src/assets/images/clipart/Safe_128x128.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/OXOYO/X-Flowchart-Vue/2c75c97ed228bed0a7c3ea07fb4c8ef3dab94796/src/assets/images/clipart/Safe_128x128.png -------------------------------------------------------------------------------- /src/assets/images/clipart/Security1_128x128.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/OXOYO/X-Flowchart-Vue/2c75c97ed228bed0a7c3ea07fb4c8ef3dab94796/src/assets/images/clipart/Security1_128x128.png -------------------------------------------------------------------------------- /src/assets/images/clipart/Server_Tower_128x128.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/OXOYO/X-Flowchart-Vue/2c75c97ed228bed0a7c3ea07fb4c8ef3dab94796/src/assets/images/clipart/Server_Tower_128x128.png -------------------------------------------------------------------------------- /src/assets/images/clipart/Shopping_Cart_128x128.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/OXOYO/X-Flowchart-Vue/2c75c97ed228bed0a7c3ea07fb4c8ef3dab94796/src/assets/images/clipart/Shopping_Cart_128x128.png -------------------------------------------------------------------------------- /src/assets/images/clipart/Software_128x128.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/OXOYO/X-Flowchart-Vue/2c75c97ed228bed0a7c3ea07fb4c8ef3dab94796/src/assets/images/clipart/Software_128x128.png -------------------------------------------------------------------------------- /src/assets/images/clipart/Soldier1_128x128.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/OXOYO/X-Flowchart-Vue/2c75c97ed228bed0a7c3ea07fb4c8ef3dab94796/src/assets/images/clipart/Soldier1_128x128.png -------------------------------------------------------------------------------- /src/assets/images/clipart/Suit1_128x128.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/OXOYO/X-Flowchart-Vue/2c75c97ed228bed0a7c3ea07fb4c8ef3dab94796/src/assets/images/clipart/Suit1_128x128.png -------------------------------------------------------------------------------- /src/assets/images/clipart/Suit2_128x128.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/OXOYO/X-Flowchart-Vue/2c75c97ed228bed0a7c3ea07fb4c8ef3dab94796/src/assets/images/clipart/Suit2_128x128.png -------------------------------------------------------------------------------- /src/assets/images/clipart/Suit3_128x128.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/OXOYO/X-Flowchart-Vue/2c75c97ed228bed0a7c3ea07fb4c8ef3dab94796/src/assets/images/clipart/Suit3_128x128.png -------------------------------------------------------------------------------- /src/assets/images/clipart/Tech1_128x128.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/OXOYO/X-Flowchart-Vue/2c75c97ed228bed0a7c3ea07fb4c8ef3dab94796/src/assets/images/clipart/Tech1_128x128.png -------------------------------------------------------------------------------- /src/assets/images/clipart/Telesales1_128x128.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/OXOYO/X-Flowchart-Vue/2c75c97ed228bed0a7c3ea07fb4c8ef3dab94796/src/assets/images/clipart/Telesales1_128x128.png -------------------------------------------------------------------------------- /src/assets/images/clipart/Virus_128x128.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/OXOYO/X-Flowchart-Vue/2c75c97ed228bed0a7c3ea07fb4c8ef3dab94796/src/assets/images/clipart/Virus_128x128.png -------------------------------------------------------------------------------- /src/assets/images/clipart/Wireless_Router_N_128x128.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/OXOYO/X-Flowchart-Vue/2c75c97ed228bed0a7c3ea07fb4c8ef3dab94796/src/assets/images/clipart/Wireless_Router_N_128x128.png -------------------------------------------------------------------------------- /src/assets/images/clipart/Worker1_128x128.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/OXOYO/X-Flowchart-Vue/2c75c97ed228bed0a7c3ea07fb4c8ef3dab94796/src/assets/images/clipart/Worker1_128x128.png -------------------------------------------------------------------------------- /src/assets/images/clipart/Workstation_128x128.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/OXOYO/X-Flowchart-Vue/2c75c97ed228bed0a7c3ea07fb4c8ef3dab94796/src/assets/images/clipart/Workstation_128x128.png -------------------------------------------------------------------------------- /src/assets/images/clipart/iMac_128x128.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/OXOYO/X-Flowchart-Vue/2c75c97ed228bed0a7c3ea07fb4c8ef3dab94796/src/assets/images/clipart/iMac_128x128.png -------------------------------------------------------------------------------- /src/assets/images/clipart/iPad_128x128.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/OXOYO/X-Flowchart-Vue/2c75c97ed228bed0a7c3ea07fb4c8ef3dab94796/src/assets/images/clipart/iPad_128x128.png -------------------------------------------------------------------------------- /src/assets/images/langs/en-US.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/OXOYO/X-Flowchart-Vue/2c75c97ed228bed0a7c3ea07fb4c8ef3dab94796/src/assets/images/langs/en-US.png -------------------------------------------------------------------------------- /src/assets/images/langs/zh-CN.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/OXOYO/X-Flowchart-Vue/2c75c97ed228bed0a7c3ea07fb4c8ef3dab94796/src/assets/images/langs/zh-CN.png -------------------------------------------------------------------------------- /src/assets/images/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/OXOYO/X-Flowchart-Vue/2c75c97ed228bed0a7c3ea07fb4c8ef3dab94796/src/assets/images/logo.png -------------------------------------------------------------------------------- /src/assets/images/logo_01.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/OXOYO/X-Flowchart-Vue/2c75c97ed228bed0a7c3ea07fb4c8ef3dab94796/src/assets/images/logo_01.png -------------------------------------------------------------------------------- /src/assets/images/logo_02.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/OXOYO/X-Flowchart-Vue/2c75c97ed228bed0a7c3ea07fb4c8ef3dab94796/src/assets/images/logo_02.png -------------------------------------------------------------------------------- /src/assets/images/logo_03.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/OXOYO/X-Flowchart-Vue/2c75c97ed228bed0a7c3ea07fb4c8ef3dab94796/src/assets/images/logo_03.png -------------------------------------------------------------------------------- /src/assets/images/logo_04.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/OXOYO/X-Flowchart-Vue/2c75c97ed228bed0a7c3ea07fb4c8ef3dab94796/src/assets/images/logo_04.png -------------------------------------------------------------------------------- /src/assets/images/logo_10.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/OXOYO/X-Flowchart-Vue/2c75c97ed228bed0a7c3ea07fb4c8ef3dab94796/src/assets/images/logo_10.png -------------------------------------------------------------------------------- /src/assets/images/logo_11.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/OXOYO/X-Flowchart-Vue/2c75c97ed228bed0a7c3ea07fb4c8ef3dab94796/src/assets/images/logo_11.png -------------------------------------------------------------------------------- /src/assets/images/logo_12.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/OXOYO/X-Flowchart-Vue/2c75c97ed228bed0a7c3ea07fb4c8ef3dab94796/src/assets/images/logo_12.png -------------------------------------------------------------------------------- /src/assets/images/logo_13.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/OXOYO/X-Flowchart-Vue/2c75c97ed228bed0a7c3ea07fb4c8ef3dab94796/src/assets/images/logo_13.png -------------------------------------------------------------------------------- /src/assets/images/logo_14.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/OXOYO/X-Flowchart-Vue/2c75c97ed228bed0a7c3ea07fb4c8ef3dab94796/src/assets/images/logo_14.png -------------------------------------------------------------------------------- /src/assets/images/rotate.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/OXOYO/X-Flowchart-Vue/2c75c97ed228bed0a7c3ea07fb4c8ef3dab94796/src/assets/images/rotate.png -------------------------------------------------------------------------------- /src/assets/styles/main.less: -------------------------------------------------------------------------------- 1 | @import '~iview/src/styles/index.less'; 2 | @import url('../iconfont/iconfont.css'); 3 | 4 | // Here are the variables to cover, such as: 5 | @border-radius-base : 0; 6 | @border-radius-small : 0; 7 | @btn-border-radius : 0; 8 | @btn-border-radius-small: 0; 9 | 10 | .ivu-radio-inner { 11 | &:after { 12 | border-radius: 6px; 13 | } 14 | } 15 | 16 | html { 17 | margin: 0; 18 | padding: 0; 19 | } 20 | body { 21 | position: absolute; 22 | top: 0; 23 | right: 0; 24 | bottom: 0; 25 | left: 0; 26 | overflow: hidden; 27 | margin: 0; 28 | padding: 0; 29 | font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif; 30 | -webkit-font-smoothing: antialiased; 31 | -moz-osx-font-smoothing: grayscale; 32 | } 33 | .clear { 34 | clear: both; 35 | } 36 | 37 | .x-fade-enter-active { 38 | transition: all .2s ease; 39 | } 40 | .x-fade-leave-active { 41 | transition: all .2s ease; 42 | } 43 | 44 | .view { 45 | display: inline-block; 46 | } -------------------------------------------------------------------------------- /src/config/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by OXOYO on 2019/5/18. 3 | * 4 | * 项目配置 5 | */ 6 | 7 | import system from './system' 8 | import materials from './materials' 9 | import tools from './tools' 10 | import storage from './storage' 11 | import infoPanel from './infoPanel' 12 | 13 | export default { 14 | system, 15 | materials, 16 | tools, 17 | storage, 18 | infoPanel 19 | } 20 | -------------------------------------------------------------------------------- /src/config/infoPanel.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by OXOYO on 2020/7/2 3 | * 4 | * 信息面板相关配置 5 | */ 6 | 7 | export default { 8 | options: { 9 | enable: true 10 | }, 11 | navigator: { 12 | enable: true, 13 | config: { 14 | type: 'delegate', 15 | delegateStyle: { 16 | fill: '#ffffff', 17 | stroke: '#000000' 18 | } 19 | } 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /src/config/storage.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by OXOYO on 2020/6/30 3 | * 4 | * 存储配置 5 | */ 6 | 7 | export default { 8 | prefix: 'xfc' 9 | } 10 | -------------------------------------------------------------------------------- /src/config/system.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by OXOYO on 2019/5/18. 3 | * 4 | * 系统相关配置 5 | */ 6 | const { version, name, author, description } = require('../../package') 7 | export default { 8 | version, 9 | name, 10 | author, 11 | description, 12 | title: 'XFC', 13 | logo: require('@/assets/images/logo_12.png'), 14 | github: 'https://github.com/OXOYO/X-Flowchart-Vue', 15 | site: 'http://oxoyo.co/X-Flowchart-Vue/', 16 | feedback: 'https://github.com/OXOYO/X-Flowchart-Vue/issues/new', 17 | copyright: '©2019 - 2020 OXOYO All Rights Reserved.' 18 | } 19 | -------------------------------------------------------------------------------- /src/global/components/Divider/Index.vue: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by OXOYO on 2019/9/23. 3 | * 4 | * Divider 5 | */ 6 | 7 | 24 | 25 | 28 | 29 | 41 | -------------------------------------------------------------------------------- /src/global/components/Icon/Index.vue: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by OXOYO on 2019/5/29. 3 | * 4 | * Icon 5 | */ 6 | 7 | 18 | 19 | 26 | 27 | 38 | -------------------------------------------------------------------------------- /src/global/components/NoData/Index.vue: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by OXOYO on 2020/5/18 3 | * 4 | * 暂无数据 5 | */ 6 | 7 | 47 | 48 | 56 | 57 | 114 | -------------------------------------------------------------------------------- /src/global/components/Tooltip/Index.vue: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by OXOYO on 2019/5/29. 3 | * 4 | * Tooltip 5 | */ 6 | 7 | 50 | 51 | 66 | 67 | 99 | -------------------------------------------------------------------------------- /src/global/components/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by OXOYO on 2019/5/29. 3 | * 4 | * 全局组件 5 | */ 6 | 7 | import { 8 | Menu, 9 | MenuItem, 10 | Tooltip, 11 | Divider, 12 | InputNumber, 13 | Dropdown, 14 | DropdownMenu, 15 | DropdownItem, 16 | Icon, 17 | Message, 18 | Modal, 19 | Input, 20 | Form, 21 | FormItem, 22 | Slider, 23 | Select, 24 | Option, 25 | Button, 26 | Table 27 | } from 'iview' 28 | 29 | import { Sketch } from 'vue-color' 30 | 31 | import XIcon from './Icon/Index' 32 | import XTooltip from './Tooltip/Index' 33 | import XDivider from './Divider/Index' 34 | import XColorPicker from './ColorPicker/Index' 35 | import XNoData from './NoData/Index' 36 | 37 | const obj = { 38 | // ui组件 39 | Menu, 40 | MenuItem, 41 | Tooltip, 42 | Divider, 43 | InputNumber, 44 | Dropdown, 45 | DropdownMenu, 46 | DropdownItem, 47 | Icon, 48 | Message, 49 | Modal, 50 | Input, 51 | Form, 52 | FormItem, 53 | Slider, 54 | Select, 55 | Option, 56 | Button, 57 | Table, 58 | // 颜色选择器 59 | SketchPicker: Sketch, 60 | // 自定义组件 61 | XIcon, 62 | XTooltip, 63 | XDivider, 64 | XColorPicker, 65 | XNoData 66 | } 67 | 68 | const components = {} 69 | components.install = function (Vue, options) { 70 | for (const name in obj) { 71 | if (name && obj[name]) { 72 | Vue.component(name, obj[name]) 73 | if (['Message', 'Modal'].includes(name)) { 74 | Vue.prototype[`$${name}`] = obj[name] 75 | } 76 | } 77 | } 78 | } 79 | 80 | export default components 81 | -------------------------------------------------------------------------------- /src/global/g6/behavior/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by OXOYO on 2019/7/4. 3 | * 4 | * 注册自定义交互 5 | */ 6 | 7 | // 综合节点控制交互 8 | import nodeControl from './nodeControl' 9 | // 预览画布交互 10 | import previewCanvas from './previewCanvas' 11 | 12 | const obj = { 13 | nodeControl, 14 | previewCanvas 15 | } 16 | 17 | export default function (G6) { 18 | Object.values(obj).forEach(item => { 19 | G6.registerBehavior(item.name, item.options) 20 | }) 21 | } 22 | -------------------------------------------------------------------------------- /src/global/g6/behavior/previewCanvas.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by OXOYO on 2019/9/27. 3 | * 4 | * 预览画布交互 5 | */ 6 | 7 | export default { 8 | name: 'preview-canvas', 9 | options: { 10 | getDefaultCfg () { 11 | return { 12 | config: {} 13 | } 14 | }, 15 | getEvents () { 16 | return { 17 | 'node:contextmenu': 'onNodeContextmenu', 18 | 'canvas:contextmenu': 'onCanvasContextmenu', 19 | 'edge:contextmenu': 'onEdgeContextmenu' 20 | } 21 | }, 22 | onNodeContextmenu (event) { 23 | const _t = this 24 | _t.graph.emit('editor:contextmenu', { 25 | type: 'node', 26 | x: event.clientX, 27 | y: event.clientY, 28 | canvasX: event.canvasX, 29 | canvasY: event.canvasY 30 | }) 31 | }, 32 | onCanvasContextmenu (event) { 33 | const _t = this 34 | _t.graph.emit('editor:contextmenu', { 35 | type: 'canvas', 36 | x: event.clientX, 37 | y: event.clientY, 38 | canvasX: event.canvasX, 39 | canvasY: event.canvasY 40 | }) 41 | }, 42 | onEdgeContextmenu (event) { 43 | const _t = this 44 | _t.graph.emit('editor:contextmenu', { 45 | type: 'edge', 46 | x: event.clientX, 47 | y: event.clientY, 48 | canvasX: event.canvasX, 49 | canvasY: event.canvasY 50 | }) 51 | } 52 | } 53 | } 54 | -------------------------------------------------------------------------------- /src/global/g6/config/anchor.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by OXOYO on 2019/7/8. 3 | * 4 | * 锚点配置 5 | */ 6 | 7 | export default { 8 | style: { 9 | default: { 10 | r: 3, 11 | symbol: 'circle', 12 | fill: '#FFFFFF', 13 | fillOpacity: 0, 14 | stroke: '#1890FF', 15 | strokeOpacity: 0, 16 | cursor: 'crosshair' 17 | }, 18 | hover: { 19 | fillOpacity: 1, 20 | strokeOpacity: 1 21 | }, 22 | unhover: { 23 | fillOpacity: 0, 24 | strokeOpacity: 0 25 | }, 26 | active: { 27 | fillOpacity: 1, 28 | strokeOpacity: 1 29 | }, 30 | inactive: { 31 | fillOpacity: 0, 32 | strokeOpacity: 0 33 | } 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /src/global/g6/config/anchorBg.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by OXOYO on 2019/7/8. 3 | * 4 | * 锚点背景配置 5 | */ 6 | 7 | export default { 8 | style: { 9 | default: { 10 | r: 10, 11 | symbol: 'circle', 12 | fill: '#1890FF', 13 | fillOpacity: 0, 14 | stroke: '#1890FF', 15 | strokeOpacity: 0, 16 | cursor: 'crosshair' 17 | }, 18 | hover: { 19 | fillOpacity: 1, 20 | strokeOpacity: 1 21 | }, 22 | unhover: { 23 | fillOpacity: 0, 24 | strokeOpacity: 0 25 | }, 26 | active: { 27 | fillOpacity: 0.3, 28 | strokeOpacity: 0.5 29 | }, 30 | inactive: { 31 | fillOpacity: 0, 32 | strokeOpacity: 0 33 | } 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /src/global/g6/config/dottedNode.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by OXOYO on 2019/7/8. 3 | * 4 | * 虚线框 5 | */ 6 | 7 | export default { 8 | style: { 9 | default: { 10 | fill: '#FFFFFF', 11 | fillOpacity: 1, 12 | stroke: '#1890FF', 13 | strokeOpacity: 1, 14 | lineDash: [ 5, 5 ] 15 | } 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /src/global/g6/config/edge.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by OXOYO on 2019/7/16. 3 | * 4 | * 边配置 5 | */ 6 | 7 | export default { 8 | style: { 9 | default: { 10 | stroke: '#000000', 11 | strokeOpacity: 1 12 | }, 13 | active: { 14 | shadowColor: 'red', 15 | shadowBlur: 4, 16 | shadowOffsetX: 0, 17 | shadowOffsetY: 0 18 | }, 19 | inactive: { 20 | shadowColor: '' 21 | } 22 | }, 23 | type: { 24 | solid: { 25 | lineDash: [] 26 | }, 27 | dashed: { 28 | lineDash: [ 5, 5 ] 29 | }, 30 | dot: { 31 | lineDash: [ 2, 2 ] 32 | } 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /src/global/g6/config/edgeAnimate.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by OXOYO on 2019/7/11. 3 | * 4 | * 边动画配置 5 | */ 6 | 7 | export default { 8 | style: { 9 | default: { 10 | fill: 'red', 11 | r: 3 12 | } 13 | }, 14 | duration: 3000 15 | } 16 | -------------------------------------------------------------------------------- /src/global/g6/config/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by OXOYO on 2019/7/4. 3 | * 4 | * 配置 5 | * 6 | */ 7 | 8 | import anchor from './anchor' 9 | import anchorBg from './anchorBg' 10 | import dottedNode from './dottedNode' 11 | import edgeAnimate from './edgeAnimate' 12 | import shapeControl from './shapeControl' 13 | import edge from './edge' 14 | 15 | export default { 16 | anchor, 17 | anchorBg, 18 | dottedNode, 19 | edgeAnimate, 20 | shapeControl, 21 | edge 22 | } 23 | -------------------------------------------------------------------------------- /src/global/g6/config/shapeControl.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by OXOYO on 2019/7/11. 3 | * 4 | * 图形控制 5 | */ 6 | 7 | export default { 8 | style: { 9 | default: { 10 | point: { 11 | r: 3, 12 | symbol: 'square', 13 | fill: '#FFFFFF', 14 | fillOpacity: 0, 15 | stroke: '#29B6F2', 16 | strokeOpacity: 0 17 | }, 18 | edge: { 19 | lineDash: [ 5, 5 ], 20 | fillOpacity: 0, 21 | stroke: '#29B6F2', 22 | strokeOpacity: 0 23 | }, 24 | rotate: { 25 | opacity: 0 26 | } 27 | }, 28 | active: { 29 | point: { 30 | fillOpacity: 1, 31 | strokeOpacity: 1 32 | }, 33 | edge: { 34 | fillOpacity: 0, 35 | strokeOpacity: 1 36 | }, 37 | rotate: { 38 | opacity: 1 39 | } 40 | }, 41 | inactive: { 42 | point: { 43 | fillOpacity: 0, 44 | strokeOpacity: 0 45 | }, 46 | edge: { 47 | fillOpacity: 0, 48 | strokeOpacity: 0 49 | }, 50 | rotate: { 51 | opacity: 0 52 | } 53 | } 54 | } 55 | } 56 | -------------------------------------------------------------------------------- /src/global/g6/edge/base.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by OXOYO on 2019/8/7. 3 | * 4 | * 线条公共方法 5 | */ 6 | 7 | import utils from '../utils' 8 | 9 | export default { 10 | // 自定义边配置，需要配置时在各个图形中覆写 11 | options: {}, 12 | draw (cfg, group) { 13 | const { startPoint, endPoint } = cfg 14 | const keyShape = group.addShape('path', { 15 | name: 'edgeShape', 16 | className: 'edge-shape', 17 | attrs: { 18 | ...cfg, 19 | path: [ 20 | [ 'M', startPoint.x, startPoint.y ], 21 | [ 'L', endPoint.x, endPoint.y ] 22 | ] 23 | } 24 | }) 25 | return keyShape 26 | }, 27 | setState (name, value, item) { 28 | // 设置边状态 29 | utils.edge.setState(name, value, item) 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /src/global/g6/edge/broken.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by OXOYO on 2019/8/14. 3 | * 4 | * 折线 5 | */ 6 | import base from './base' 7 | import utils from '../utils' 8 | 9 | export default { 10 | name: 'x-broken', 11 | extendName: 'single-edge', 12 | options: { 13 | ...base, 14 | draw (cfg, group) { 15 | const { startPoint, endPoint } = cfg 16 | const controlPoints = this.getControlPoints(cfg) 17 | const points = [startPoint] 18 | if (controlPoints) { 19 | points.push(controlPoints) 20 | } 21 | points.push(endPoint) 22 | const path = this.getPath(points) 23 | const keyShape = group.addShape('path', { 24 | name: 'edgeShape', 25 | className: 'edge-shape', 26 | attrs: { 27 | ...cfg, 28 | path: path 29 | } 30 | }) 31 | return keyShape 32 | }, 33 | getPath (points) { 34 | const path = [] 35 | for (let i = 0; i < points.length; i++) { 36 | const point = points[i] 37 | if (i === 0) { 38 | path.push([ 'M', point.x, point.y ]) 39 | } else if (i === points.length - 1) { 40 | path.push([ 'L', point.x, point.y ]) 41 | } else { 42 | const prevPoint = points[i - 1] 43 | const nextPoint = points[i + 1] 44 | let cornerLen = 5 45 | if (Math.abs(point.y - prevPoint.y) > cornerLen || Math.abs(point.x - prevPoint.x) > cornerLen) { 46 | if (prevPoint.x === point.x) { 47 | path.push(['L', point.x, point.y > prevPoint.y ? point.y - cornerLen : point.y + cornerLen]) 48 | } else if (prevPoint.y === point.y) { 49 | path.push(['L', point.x > prevPoint.x ? point.x - cornerLen : point.x + cornerLen, point.y]) 50 | } 51 | } 52 | const yLen = Math.abs(point.y - nextPoint.y) 53 | const xLen = Math.abs(point.x - nextPoint.x) 54 | if (yLen > 0 && yLen < cornerLen) { 55 | cornerLen = yLen 56 | } else if (xLen > 0 && xLen < cornerLen) { 57 | cornerLen = xLen 58 | } 59 | if (prevPoint.x !== nextPoint.x && nextPoint.x === point.x) { 60 | path.push(['Q', point.x, point.y, point.x, point.y > nextPoint.y ? point.y - cornerLen : point.y + cornerLen]) 61 | } else if (prevPoint.y !== nextPoint.y && nextPoint.y === point.y) { 62 | path.push(['Q', point.x, point.y, point.x > nextPoint.x ? point.x - cornerLen : point.x + cornerLen, point.y]) 63 | } 64 | } 65 | } 66 | return path 67 | }, 68 | getControlPoints (cfg) { 69 | if (!cfg.sourceNode) { 70 | return cfg.controlPoints 71 | } 72 | return utils.edge.polylineFinding(cfg.sourceNode, cfg.targetNode, cfg.startPoint, cfg.endPoint, 40) 73 | } 74 | } 75 | } 76 | -------------------------------------------------------------------------------- /src/global/g6/edge/cubic.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by OXOYO on 2019/7/11. 3 | * 4 | * 曲线 5 | */ 6 | 7 | import base from './base' 8 | 9 | export default { 10 | name: 'x-cubic', 11 | extendName: 'cubic', 12 | options: { 13 | ...base 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /src/global/g6/edge/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by OXOYO on 2019/7/4. 3 | * 4 | * 注册自定义边 5 | */ 6 | 7 | import line from './line' 8 | import cubic from './cubic' 9 | import broken from './broken' 10 | 11 | const obj = { 12 | line, 13 | cubic, 14 | broken 15 | } 16 | 17 | export default function (G6) { 18 | Object.values(obj).forEach(item => { 19 | G6.registerEdge(item.name, item.options, item.extendName) 20 | }) 21 | } 22 | -------------------------------------------------------------------------------- /src/global/g6/edge/line.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by OXOYO on 2019/7/11. 3 | * 4 | * 直线 5 | */ 6 | 7 | import base from './base' 8 | 9 | export default { 10 | name: 'x-line', 11 | extendName: 'line', 12 | options: { 13 | ...base 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /src/global/g6/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by OXOYO on 2019/7/3. 3 | * 4 | * 封装G6 5 | */ 6 | 7 | import G6 from '@antv/g6' 8 | import registerBehavior from './behavior/index' 9 | import registerEdge from './edge/index' 10 | import registerNode from './node/index' 11 | 12 | import config from './config/index' 13 | 14 | // 挂载config 15 | G6.$C = config 16 | 17 | // 注册自定义交互 18 | registerBehavior(G6) 19 | // 注册自定义边 20 | registerEdge(G6) 21 | // 注册自定义节点 22 | registerNode(G6) 23 | 24 | export default G6 25 | -------------------------------------------------------------------------------- /src/global/g6/node/arrow/arrow-down.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by OXOYO on 2019/11/9. 3 | * 4 | * 下箭头 5 | */ 6 | 7 | import * as G6Util from '@antv/util' 8 | import base from '../base' 9 | import utils from '../../utils' 10 | 11 | export default { 12 | name: 'arrow-down', 13 | extendName: 'single-node', 14 | options: { 15 | ...base, 16 | shapeType: 'path', 17 | getShapeStyle (cfg) { 18 | const size = this.getSize(cfg) 19 | const width = size[0] 20 | const height = size[1] 21 | const x = 0 - width / 2 22 | const y = 0 - height / 2 23 | // 计算箭头 24 | const { L1, L7 } = utils.node.calculateArrow({ 25 | deg: 85, 26 | L1: height / 3, 27 | L7: width / 4 28 | }) 29 | // 箭头顶点 30 | const P0 = { 31 | x: 0, 32 | y: height / 2 33 | } 34 | 35 | // 左下顶点 36 | const P1 = { 37 | x: -width / 2, 38 | y: P0.y - L1 39 | } 40 | // 左下中 41 | const P2 = { 42 | x: P0.x - L7, 43 | y: P1.y 44 | } 45 | // 左上 46 | const P3 = { 47 | x: P2.x, 48 | y: -height / 2 49 | } 50 | // 右上 51 | const P4 = { 52 | x: P0.x + L7, 53 | y: -height / 2 54 | } 55 | // 右下中 56 | const P5 = { 57 | x: P4.x, 58 | y: P2.y 59 | } 60 | // 右下顶点 61 | const P6 = { 62 | x: width / 2, 63 | y: P1.y 64 | } 65 | 66 | const path = [ 67 | [ 'M', P0.x, P0.y ], 68 | [ 'L', P1.x, P1.y ], 69 | [ 'L', P2.x, P2.y ], 70 | [ 'L', P3.x, P3.y ], 71 | [ 'L', P4.x, P4.y ], 72 | [ 'L', P5.x, P5.y ], 73 | [ 'L', P6.x, P6.y ], 74 | [ 'Z' ] 75 | ] 76 | const color = cfg.color 77 | const style = G6Util.mix({}, { 78 | // 节点的位置在上层确定，所以这里仅使用相对位置即可 79 | x, 80 | y, 81 | width, 82 | height, 83 | path, 84 | stroke: color 85 | }, cfg.style) 86 | return style 87 | } 88 | } 89 | } 90 | -------------------------------------------------------------------------------- /src/global/g6/node/arrow/arrow-left.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by OXOYO on 2019/12/26. 3 | * 4 | * 左箭头 5 | */ 6 | 7 | import * as G6Util from '@antv/util' 8 | import base from '../base' 9 | import utils from '../../utils' 10 | 11 | export default { 12 | name: 'arrow-left', 13 | extendName: 'single-node', 14 | options: { 15 | ...base, 16 | shapeType: 'path', 17 | getShapeStyle (cfg) { 18 | const size = this.getSize(cfg) 19 | const width = size[0] 20 | const height = size[1] 21 | const x = 0 - width / 2 22 | const y = 0 - height / 2 23 | // 计算箭头 24 | const { L1, L7 } = utils.node.calculateArrow({ 25 | deg: 85, 26 | L1: width / 3, 27 | L7: height / 4 28 | }) 29 | // 箭头顶点 30 | const P0 = { 31 | x: -width / 2, 32 | y: 0 33 | } 34 | 35 | // 左上顶点 36 | const P1 = { 37 | x: -width / 2 + L1, 38 | y: height / 2 39 | } 40 | // 左上中 41 | const P2 = { 42 | x: -width / 2 + L1, 43 | y: L7 44 | } 45 | // 右上 46 | const P3 = { 47 | x: width / 2, 48 | y: L7 49 | } 50 | // 右下 51 | const P4 = { 52 | x: width / 2, 53 | y: -L7 54 | } 55 | // 左下中 56 | const P5 = { 57 | x: -width / 2 + L1, 58 | y: -L7 59 | } 60 | // 左下顶点 61 | const P6 = { 62 | x: -width / 2 + L1, 63 | y: -height / 2 64 | } 65 | 66 | const path = [ 67 | [ 'M', P0.x, P0.y ], 68 | [ 'L', P1.x, P1.y ], 69 | [ 'L', P2.x, P2.y ], 70 | [ 'L', P3.x, P3.y ], 71 | [ 'L', P4.x, P4.y ], 72 | [ 'L', P5.x, P5.y ], 73 | [ 'L', P6.x, P6.y ], 74 | [ 'Z' ] 75 | ] 76 | const color = cfg.color 77 | const style = G6Util.mix({}, { 78 | // 节点的位置在上层确定，所以这里仅使用相对位置即可 79 | x, 80 | y, 81 | width, 82 | height, 83 | path, 84 | stroke: color 85 | }, cfg.style) 86 | return style 87 | } 88 | } 89 | } 90 | -------------------------------------------------------------------------------- /src/global/g6/node/arrow/arrow-right.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by OXOYO on 2019/12/26. 3 | * 4 | * 右箭头 5 | */ 6 | 7 | import * as G6Util from '@antv/util' 8 | import base from '../base' 9 | import utils from '../../utils' 10 | 11 | export default { 12 | name: 'arrow-right', 13 | extendName: 'single-node', 14 | options: { 15 | ...base, 16 | shapeType: 'path', 17 | getShapeStyle (cfg) { 18 | const size = this.getSize(cfg) 19 | const width = size[0] 20 | const height = size[1] 21 | const x = 0 - width / 2 22 | const y = 0 - height / 2 23 | // 计算箭头 24 | const { L1, L7 } = utils.node.calculateArrow({ 25 | deg: 85, 26 | L1: width / 3, 27 | L7: height / 4 28 | }) 29 | // 箭头顶点 30 | const P0 = { 31 | x: width / 2, 32 | y: 0 33 | } 34 | 35 | // 右下顶点 36 | const P1 = { 37 | x: width / 2 - L1, 38 | y: height / 2 39 | } 40 | // 右下中 41 | const P2 = { 42 | x: width / 2 - L1, 43 | y: L7 44 | } 45 | // 左下 46 | const P3 = { 47 | x: -width / 2, 48 | y: L7 49 | } 50 | // 左上 51 | const P4 = { 52 | x: -width / 2, 53 | y: -L7 54 | } 55 | // 右下中 56 | const P5 = { 57 | x: width / 2 - L1, 58 | y: -L7 59 | } 60 | // 右上顶点 61 | const P6 = { 62 | x: width / 2 - L1, 63 | y: -height / 2 64 | } 65 | 66 | const path = [ 67 | [ 'M', P0.x, P0.y ], 68 | [ 'L', P1.x, P1.y ], 69 | [ 'L', P2.x, P2.y ], 70 | [ 'L', P3.x, P3.y ], 71 | [ 'L', P4.x, P4.y ], 72 | [ 'L', P5.x, P5.y ], 73 | [ 'L', P6.x, P6.y ], 74 | [ 'Z' ] 75 | ] 76 | const color = cfg.color 77 | const style = G6Util.mix({}, { 78 | // 节点的位置在上层确定，所以这里仅使用相对位置即可 79 | x, 80 | y, 81 | width, 82 | height, 83 | path, 84 | stroke: color 85 | }, cfg.style) 86 | return style 87 | } 88 | } 89 | } 90 | -------------------------------------------------------------------------------- /src/global/g6/node/arrow/arrow-up.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by OXOYO on 2019/12/26. 3 | * 4 | * 上箭头 5 | */ 6 | 7 | import * as G6Util from '@antv/util' 8 | import base from '../base' 9 | import utils from '../../utils' 10 | 11 | export default { 12 | name: 'arrow-up', 13 | extendName: 'single-node', 14 | options: { 15 | ...base, 16 | shapeType: 'path', 17 | getShapeStyle (cfg) { 18 | const size = this.getSize(cfg) 19 | const width = size[0] 20 | const height = size[1] 21 | const x = 0 - width / 2 22 | const y = 0 - height / 2 23 | // 计算箭头 24 | const { L1, L7 } = utils.node.calculateArrow({ 25 | deg: 85, 26 | L1: height / 3, 27 | L7: width / 4 28 | }) 29 | // 箭头顶点 30 | const P0 = { 31 | x: 0, 32 | y: -height / 2 33 | } 34 | 35 | // 右上顶点 36 | const P1 = { 37 | x: width / 2, 38 | y: -height / 2 + L1 39 | } 40 | // 右上中 41 | const P2 = { 42 | x: L7, 43 | y: P1.y 44 | } 45 | // 右下 46 | const P3 = { 47 | x: L7, 48 | y: height / 2 49 | } 50 | // 左下 51 | const P4 = { 52 | x: -L7, 53 | y: height / 2 54 | } 55 | // 左上中 56 | const P5 = { 57 | x: P4.x, 58 | y: P2.y 59 | } 60 | // 左顶点 61 | const P6 = { 62 | x: -width / 2, 63 | y: P1.y 64 | } 65 | 66 | const path = [ 67 | [ 'M', P0.x, P0.y ], 68 | [ 'L', P1.x, P1.y ], 69 | [ 'L', P2.x, P2.y ], 70 | [ 'L', P3.x, P3.y ], 71 | [ 'L', P4.x, P4.y ], 72 | [ 'L', P5.x, P5.y ], 73 | [ 'L', P6.x, P6.y ], 74 | [ 'Z' ] 75 | ] 76 | const color = cfg.color 77 | const style = G6Util.mix({}, { 78 | // 节点的位置在上层确定，所以这里仅使用相对位置即可 79 | x, 80 | y, 81 | width, 82 | height, 83 | path, 84 | stroke: color 85 | }, cfg.style) 86 | return style 87 | } 88 | } 89 | } 90 | -------------------------------------------------------------------------------- /src/global/g6/node/arrow/bent-left-arrow.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by OXOYO on 2019/12/26. 3 | * 4 | * 左弯箭头 5 | */ 6 | 7 | import * as G6Util from '@antv/util' 8 | import base from '../base' 9 | import utils from '../../utils' 10 | 11 | export default { 12 | name: 'bent-left-arrow', 13 | extendName: 'single-node', 14 | options: { 15 | ...base, 16 | shapeType: 'path', 17 | getShapeStyle (cfg) { 18 | const size = this.getSize(cfg) 19 | const width = size[0] 20 | const height = size[1] 21 | const x = 0 - width / 2 22 | const y = 0 - height / 2 23 | // 计算箭头 24 | const { L1, L2, L7 } = utils.node.calculateArrow({ 25 | deg: 85, 26 | L1: width / 3, 27 | L7: height / 8 28 | }) 29 | // 箭头顶点 30 | const P0 = { 31 | x: -width / 2, 32 | y: -height / 2 + L2 33 | } 34 | 35 | // 左上顶点 36 | const P1 = { 37 | x: P0.x + L1, 38 | y: P0.y - L2 39 | } 40 | // 左上中 41 | const P2 = { 42 | x: P1.x, 43 | y: P0.y - L7 44 | } 45 | // 右上弧起点 46 | const P3 = { 47 | x: width / 2 - 2 * L7, 48 | y: P0.y - L7 49 | } 50 | // 右上弧终点 51 | const P4 = { 52 | x: width / 2, 53 | y: P0.y + L7 54 | } 55 | // 右下右顶点 56 | const P5 = { 57 | x: width / 2, 58 | y: height / 2 59 | } 60 | // 右下左顶点 61 | const P6 = { 62 | x: P5.x - 2 * L7, 63 | y: P5.y 64 | } 65 | // 左下中拐点 66 | const P7 = { 67 | x: P6.x, 68 | y: P0.y + L7 69 | } 70 | // 左下中 71 | const P8 = { 72 | x: P0.x + L1, 73 | y: P7.y 74 | } 75 | // 左下顶点 76 | const P9 = { 77 | x: P8.x, 78 | y: P0.y + L2 79 | } 80 | 81 | const path = [ 82 | [ 'M', P0.x, P0.y ], 83 | [ 'L', P1.x, P1.y ], 84 | [ 'L', P2.x, P2.y ], 85 | [ 'L', P3.x, P3.y ], 86 | [ 'A', 2 * L7, 2 * L7, 45, 0, 1, P4.x, P4.y ], 87 | [ 'L', P5.x, P5.y ], 88 | [ 'L', P6.x, P6.y ], 89 | [ 'L', P7.x, P7.y ], 90 | [ 'L', P8.x, P8.y ], 91 | [ 'L', P9.x, P9.y ], 92 | [ 'Z' ] 93 | ] 94 | const color = cfg.color 95 | const style = G6Util.mix({}, { 96 | // 节点的位置在上层确定，所以这里仅使用相对位置即可 97 | x, 98 | y, 99 | width, 100 | height, 101 | path, 102 | stroke: color 103 | }, cfg.style) 104 | return style 105 | } 106 | } 107 | } 108 | -------------------------------------------------------------------------------- /src/global/g6/node/arrow/bent-right-arrow.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by OXOYO on 2019/12/26. 3 | * 4 | * 右弯箭头 5 | */ 6 | 7 | import * as G6Util from '@antv/util' 8 | import base from '../base' 9 | import utils from '../../utils' 10 | 11 | export default { 12 | name: 'bent-right-arrow', 13 | extendName: 'single-node', 14 | options: { 15 | ...base, 16 | shapeType: 'path', 17 | getShapeStyle (cfg) { 18 | const size = this.getSize(cfg) 19 | const width = size[0] 20 | const height = size[1] 21 | const x = 0 - width / 2 22 | const y = 0 - height / 2 23 | // 计算箭头 24 | const { L1, L2, L7 } = utils.node.calculateArrow({ 25 | deg: 85, 26 | L1: width / 3, 27 | L7: height / 8 28 | }) 29 | // 箭头顶点 30 | const P0 = { 31 | x: width / 2, 32 | y: -height / 2 + L2 33 | } 34 | 35 | // 右下顶点 36 | const P1 = { 37 | x: P0.x - L1, 38 | y: P0.y + L2 39 | } 40 | // 右下中 41 | const P2 = { 42 | x: P1.x, 43 | y: P0.y + L7 44 | } 45 | // 左下中拐点 46 | const P3 = { 47 | x: -width / 2 + 2 * L7, 48 | y: P0.y + L7 49 | } 50 | // 左下右顶点 51 | const P4 = { 52 | x: P3.x, 53 | y: height / 2 54 | } 55 | // 左下左顶点 56 | const P5 = { 57 | x: -width / 2, 58 | y: height / 2 59 | } 60 | // 左上弧起点 61 | const P6 = { 62 | x: -width / 2, 63 | y: P0.y + L7 64 | } 65 | // 左上弧终点 66 | const P7 = { 67 | x: -width / 2 + 2 * L7, 68 | y: P0.y - L7 69 | } 70 | // 左上中 71 | const P8 = { 72 | x: P1.x, 73 | y: P0.y - L7 74 | } 75 | // 左上顶点 76 | const P9 = { 77 | x: P1.x, 78 | y: P0.y - L2 79 | } 80 | 81 | const path = [ 82 | [ 'M', P0.x, P0.y ], 83 | [ 'L', P1.x, P1.y ], 84 | [ 'L', P2.x, P2.y ], 85 | [ 'L', P3.x, P3.y ], 86 | [ 'L', P4.x, P4.y ], 87 | [ 'L', P5.x, P5.y ], 88 | [ 'L', P6.x, P6.y ], 89 | [ 'A', 2 * L7, 2 * L7, 45, 0, 1, P7.x, P7.y ], 90 | [ 'L', P8.x, P8.y ], 91 | [ 'L', P9.x, P9.y ], 92 | [ 'Z' ] 93 | ] 94 | const color = cfg.color 95 | const style = G6Util.mix({}, { 96 | // 节点的位置在上层确定，所以这里仅使用相对位置即可 97 | x, 98 | y, 99 | width, 100 | height, 101 | path, 102 | stroke: color 103 | }, cfg.style) 104 | return style 105 | } 106 | } 107 | } 108 | -------------------------------------------------------------------------------- /src/global/g6/node/arrow/bent-up-arrow.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by OXOYO on 2019/12/26. 3 | * 4 | * 上弯箭头 5 | */ 6 | 7 | import * as G6Util from '@antv/util' 8 | import base from '../base' 9 | import utils from '../../utils' 10 | 11 | export default { 12 | name: 'bent-up-arrow', 13 | extendName: 'single-node', 14 | options: { 15 | ...base, 16 | shapeType: 'path', 17 | getShapeStyle (cfg) { 18 | const size = this.getSize(cfg) 19 | const width = size[0] 20 | const height = size[1] 21 | const x = 0 - width / 2 22 | const y = 0 - height / 2 23 | // 计算箭头 24 | const { L1, L2, L7 } = utils.node.calculateArrow({ 25 | deg: 85, 26 | L1: width / 3, 27 | L7: height / 8 28 | }) 29 | // 箭头顶点 30 | const P0 = { 31 | x: width / 2 - L2, 32 | y: -height / 2 33 | } 34 | 35 | // 右上顶点 36 | const P1 = { 37 | x: width / 2, 38 | y: -height / 2 + L1 39 | } 40 | // 右上中 41 | const P2 = { 42 | x: P1.x - L2 + L7, 43 | y: P1.y 44 | } 45 | // 右下顶点 46 | const P3 = { 47 | x: P2.x, 48 | y: height / 2 49 | } 50 | // 左下下顶点 51 | const P4 = { 52 | x: -width / 2, 53 | y: height / 2 54 | } 55 | // 左下上顶点 56 | const P5 = { 57 | x: -width / 2, 58 | y: height / 2 - 2 * L7 59 | } 60 | // 左下拐点 61 | const P6 = { 62 | x: width / 2 - L2 - L7, 63 | y: P5.y 64 | } 65 | // 左上中 66 | const P7 = { 67 | x: width / 2 - L2 - L7, 68 | y: P2.y 69 | } 70 | // 左上顶点 71 | const P8 = { 72 | x: width / 2 - 2 * L2, 73 | y: P7.y 74 | } 75 | 76 | const path = [ 77 | [ 'M', P0.x, P0.y ], 78 | [ 'L', P1.x, P1.y ], 79 | [ 'L', P2.x, P2.y ], 80 | [ 'L', P3.x, P3.y ], 81 | [ 'L', P4.x, P4.y ], 82 | [ 'L', P5.x, P5.y ], 83 | [ 'L', P6.x, P6.y ], 84 | [ 'L', P7.x, P7.y ], 85 | [ 'L', P8.x, P8.y ], 86 | [ 'Z' ] 87 | ] 88 | const color = cfg.color 89 | const style = G6Util.mix({}, { 90 | // 节点的位置在上层确定，所以这里仅使用相对位置即可 91 | x, 92 | y, 93 | width, 94 | height, 95 | path, 96 | stroke: color 97 | }, cfg.style) 98 | return style 99 | } 100 | } 101 | } 102 | -------------------------------------------------------------------------------- /src/global/g6/node/arrow/callout-up-arrow.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by OXOYO on 2019/12/27. 3 | * 4 | * 标注上箭头 5 | */ 6 | 7 | import * as G6Util from '@antv/util' 8 | import base from '../base' 9 | import utils from '../../utils' 10 | 11 | export default { 12 | name: 'callout-up-arrow', 13 | extendName: 'single-node', 14 | options: { 15 | ...base, 16 | shapeType: 'path', 17 | getShapeStyle (cfg) { 18 | const size = this.getSize(cfg) 19 | const width = size[0] 20 | const height = size[1] 21 | const x = 0 - width / 2 22 | const y = 0 - height / 2 23 | // 计算箭头 24 | const { L1, L2, L7 } = utils.node.calculateArrow({ 25 | deg: 85, 26 | L1: height * 0.2, 27 | L7: width * 0.17 28 | }) 29 | // 上箭头 30 | const A0 = { 31 | 1: { x: -L7, y: -height / 2 + L1 + 2 * L7 }, 32 | 2: { x: -L7, y: -height / 2 + L1 + L7 }, 33 | 3: { x: -L2, y: -height / 2 + L1 + L7 }, 34 | 4: { x: 0, y: -height / 2 }, 35 | 5: { x: L2, y: -height / 2 + L1 + L7 }, 36 | 6: { x: L7, y: -height / 2 + L1 + L7 }, 37 | 7: { x: L7, y: -height / 2 + L1 + 2 * L7 } 38 | } 39 | // 右上顶点 40 | const P1 = { x: width / 2, y: A0[1].y } 41 | // 右下顶点 42 | const P2 = { x: width / 2, y: height / 2 } 43 | // 左下顶点 44 | const P3 = { x: -width / 2, y: height / 2 } 45 | // 左上顶点 46 | const P4 = { x: -width / 2, y: A0[1].y } 47 | 48 | const path = [ 49 | [ 'M', A0[1].x, A0[1].y ], 50 | [ 'L', A0[2].x, A0[2].y ], 51 | [ 'L', A0[3].x, A0[3].y ], 52 | [ 'L', A0[4].x, A0[4].y ], 53 | [ 'L', A0[5].x, A0[5].y ], 54 | [ 'L', A0[6].x, A0[6].y ], 55 | [ 'L', A0[7].x, A0[7].y ], 56 | [ 'L', P1.x, P1.y ], 57 | [ 'L', P2.x, P2.y ], 58 | [ 'L', P3.x, P3.y ], 59 | [ 'L', P4.x, P4.y ], 60 | [ 'Z' ] 61 | ] 62 | const color = cfg.color 63 | const style = G6Util.mix({}, { 64 | // 节点的位置在上层确定，所以这里仅使用相对位置即可 65 | x, 66 | y, 67 | width, 68 | height, 69 | path, 70 | stroke: color 71 | }, cfg.style) 72 | return style 73 | } 74 | } 75 | } 76 | -------------------------------------------------------------------------------- /src/global/g6/node/arrow/chevron-arrow.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by OXOYO on 2019/12/27. 3 | * 4 | * 人形箭头 5 | */ 6 | 7 | import * as G6Util from '@antv/util' 8 | import base from '../base' 9 | import utils from '../../utils' 10 | 11 | export default { 12 | name: 'chevron-arrow', 13 | extendName: 'single-node', 14 | options: { 15 | ...base, 16 | shapeType: 'path', 17 | getShapeStyle (cfg) { 18 | const size = this.getSize(cfg) 19 | const width = size[0] 20 | const height = size[1] 21 | const x = 0 - width / 2 22 | const y = 0 - height / 2 23 | // 计算箭头 24 | const { L1 } = utils.node.calculateArrow({ 25 | deg: 85, 26 | L1: width / 3, 27 | L7: width / 4 28 | }) 29 | // 右箭头 30 | const A0 = { 31 | 1: { x: width / 2 - L1, y: -height / 2 }, 32 | // 顶点 33 | 2: { x: width / 2, y: 0 }, 34 | 3: { x: width / 2 - L1, y: height / 2 } 35 | } 36 | // 左箭头 37 | const A1 = { 38 | 1: { x: -width / 2, y: height / 2 }, 39 | // 顶点 40 | 2: { x: -width / 2 + L1, y: 0 }, 41 | 3: { x: -width / 2, y: -height / 2 } 42 | } 43 | 44 | const path = [ 45 | [ 'M', A0[1].x, A0[1].y ], 46 | [ 'L', A0[2].x, A0[2].y ], 47 | [ 'L', A0[3].x, A0[3].y ], 48 | [ 'L', A1[1].x, A1[1].y ], 49 | [ 'L', A1[2].x, A1[2].y ], 50 | [ 'L', A1[3].x, A1[3].y ], 51 | [ 'Z' ] 52 | ] 53 | const color = cfg.color 54 | const style = G6Util.mix({}, { 55 | // 节点的位置在上层确定，所以这里仅使用相对位置即可 56 | x, 57 | y, 58 | width, 59 | height, 60 | path, 61 | stroke: color 62 | }, cfg.style) 63 | return style 64 | } 65 | } 66 | } 67 | -------------------------------------------------------------------------------- /src/global/g6/node/arrow/circular-arrow.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by OXOYO on 2019/12/27. 3 | * 4 | * 圆弧箭头 5 | */ 6 | 7 | import * as G6Util from '@antv/util' 8 | import base from '../base' 9 | import utils from '../../utils' 10 | 11 | export default { 12 | name: 'circular-arrow', 13 | extendName: 'single-node', 14 | options: { 15 | ...base, 16 | shapeType: 'path', 17 | getShapeStyle (cfg) { 18 | const size = this.getSize(cfg) 19 | const width = size[0] 20 | const height = size[1] 21 | const x = 0 - width / 2 22 | const y = 0 - height / 2 23 | // 计算箭头 24 | const { L1, L2, L7 } = utils.node.calculateArrow({ 25 | deg: 85, 26 | L1: height / 3, 27 | L7: width / 8 28 | }) 29 | // 下箭头 30 | const A0 = { 31 | 1: { x: width / 2 - L2 + L7, y: L1 * 0.25 }, 32 | 2: { x: width / 2, y: L1 * 0.25 }, 33 | // 顶点 34 | 3: { x: width / 2 - L2, y: height / 2 }, 35 | 4: { x: width / 2 - 2 * L2, y: L1 * 0.25 }, 36 | 5: { x: width / 2 - L2 - L7, y: L1 * 0.25 } 37 | } 38 | // 左下左 39 | const P1 = { x: -width / 2, y: L1 * 0.25 } 40 | // 左下右 41 | const P2 = { x: -width / 2 + 2 * L7, y: L1 * 0.25 } 42 | const path = [ 43 | [ 'M', P1.x, P1.y ], 44 | // FIXME 圆弧的中心点不在坐标原点上 45 | [ 'A', (width - (L2 - L7)) / 2, height / 2 + L1 * 0.25, 0, 1, 1, A0[1].x, A0[1].y ], 46 | [ 'L', A0[2].x, A0[2].y ], 47 | [ 'L', A0[3].x, A0[3].y ], 48 | [ 'L', A0[4].x, A0[4].y ], 49 | [ 'L', A0[5].x, A0[5].y ], 50 | // FIXME 圆弧的中心点不在坐标原点上 51 | [ 'A', (width - (L2 - L7)) / 2 - 2 * L7, height / 2 + L1 * 0.25 - 2 * L7, 0, 1, 0, P2.x, P2.y ], 52 | [ 'Z' ] 53 | ] 54 | const color = cfg.color 55 | const style = G6Util.mix({}, { 56 | // 节点的位置在上层确定，所以这里仅使用相对位置即可 57 | x, 58 | y, 59 | width, 60 | height, 61 | path, 62 | stroke: color 63 | }, cfg.style) 64 | return style 65 | } 66 | } 67 | } 68 | -------------------------------------------------------------------------------- /src/global/g6/node/arrow/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by OXOYO on 2019/11/9. 3 | * 4 | * 箭头节点 5 | */ 6 | 7 | import arrowDown from './arrow-down' 8 | import arrowLeft from './arrow-left' 9 | import arrowRight from './arrow-right' 10 | import arrowUp from './arrow-up' 11 | import bentLeftArrow from './bent-left-arrow' 12 | import bentRightArrow from './bent-right-arrow' 13 | import bentUpArrow from './bent-up-arrow' 14 | import calloutDoubleArrow from './callout-double-arrow' 15 | import calloutQuadArrow from './callout-quad-arrow' 16 | import calloutUpArrow from './callout-up-arrow' 17 | import chevronArrow from './chevron-arrow' 18 | import circularArrow from './circular-arrow' 19 | import jumpInRightArrow from './jump-in-right-arrow' 20 | import jumpInLeftArrow from './jump-in-left-arrow' 21 | import leftAdnUpArrow from './left-and-up-arrow' 22 | import leftSharpEdgedHeadArrow from './left-sharp-edged-head-arrow' 23 | import notchedSignalInArrow from './notched-signal-in-arrow' 24 | import quadArrow from './quad-arrow' 25 | import rightNotchedArrow from './right-notched-arrow' 26 | import sharpEdgedArrow from './sharp-edged-arrow' 27 | import signalInArrow from './signal-in-arrow' 28 | import slenderLeftArrow from './slender-left-arrow' 29 | import slenderTwoWayArrow from './slender-two-way-arrow' 30 | import slenderWideTailedArrow from './slender-wide-tailed-arrow' 31 | import stylisedNotchedArrow from './stylised-notched-arrow' 32 | import triadArrow from './triad-arrow' 33 | import twoWayArrowHorizontal from './two-way-arrow-horizontal' 34 | import twoWayArrowVertical from './two-way-arrow-vertical' 35 | import uTurnArrow from './u-turn-arrow' 36 | import uTurnDownArrow from './u-turn-down-arrow' 37 | 38 | export default { 39 | arrowDown, 40 | arrowLeft, 41 | arrowRight, 42 | arrowUp, 43 | bentLeftArrow, 44 | bentRightArrow, 45 | bentUpArrow, 46 | calloutDoubleArrow, 47 | calloutQuadArrow, 48 | calloutUpArrow, 49 | chevronArrow, 50 | circularArrow, 51 | jumpInRightArrow, 52 | jumpInLeftArrow, 53 | leftAdnUpArrow, 54 | leftSharpEdgedHeadArrow, 55 | notchedSignalInArrow, 56 | quadArrow, 57 | rightNotchedArrow, 58 | sharpEdgedArrow, 59 | signalInArrow, 60 | slenderLeftArrow, 61 | slenderTwoWayArrow, 62 | slenderWideTailedArrow, 63 | stylisedNotchedArrow, 64 | triadArrow, 65 | twoWayArrowHorizontal, 66 | twoWayArrowVertical, 67 | uTurnArrow, 68 | uTurnDownArrow 69 | } 70 | -------------------------------------------------------------------------------- /src/global/g6/node/arrow/jump-in-left-arrow.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by OXOYO on 2019/12/27. 3 | * 4 | * 向左跳箭头 5 | */ 6 | 7 | import * as G6Util from '@antv/util' 8 | import base from '../base' 9 | import utils from '../../utils' 10 | 11 | export default { 12 | name: 'jump-in-left-arrow', 13 | extendName: 'single-node', 14 | options: { 15 | ...base, 16 | shapeType: 'path', 17 | getShapeStyle (cfg) { 18 | const size = this.getSize(cfg) 19 | const width = size[0] 20 | const height = size[1] 21 | const x = 0 - width / 2 22 | const y = 0 - height / 2 23 | // 计算箭头 24 | const { L1, L2, L7 } = utils.node.calculateArrow({ 25 | deg: 85, 26 | L1: height * 0.4, 27 | L7: width * 0.08 28 | }) 29 | // 下箭头 30 | const A0 = { 31 | 1: { x: -width / 2 + L2 + L7, y: height / 2 - L1 }, 32 | 2: { x: -width / 2 + 2 * L2, y: height / 2 - L1 }, 33 | // 顶点 34 | 3: { x: -width / 2 + L2, y: height / 2 }, 35 | 4: { x: -width / 2, y: height / 2 - L1 }, 36 | 5: { x: -width / 2 + L2 - L7, y: height / 2 - L1 } 37 | } 38 | // 右上顶点 39 | const P1 = { x: width / 2, y: -height / 2 } 40 | 41 | const path = [ 42 | [ 'M', P1.x, P1.y ], 43 | // FIXME 圆弧的中心点不在坐标原点上 44 | [ 'A', width - (L2 - L7) - 2 * L7, height - L1, 0, 0, 0, A0[1].x, A0[1].y ], 45 | [ 'L', A0[2].x, A0[2].y ], 46 | [ 'L', A0[3].x, A0[3].y ], 47 | [ 'L', A0[4].x, A0[4].y ], 48 | [ 'L', A0[5].x, A0[5].y ], 49 | // FIXME 圆弧的中心点不在坐标原点上 50 | [ 'A', width - (L2 - L7), height - L1, 0, 0, 1, P1.x, P1.y ], 51 | [ 'Z' ] 52 | ] 53 | const color = cfg.color 54 | const style = G6Util.mix({}, { 55 | // 节点的位置在上层确定，所以这里仅使用相对位置即可 56 | x, 57 | y, 58 | width, 59 | height, 60 | path, 61 | stroke: color 62 | }, cfg.style) 63 | return style 64 | } 65 | } 66 | } 67 | -------------------------------------------------------------------------------- /src/global/g6/node/arrow/jump-in-right-arrow.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by OXOYO on 2019/12/27. 3 | * 4 | * 向右跳箭头 5 | */ 6 | 7 | import * as G6Util from '@antv/util' 8 | import base from '../base' 9 | import utils from '../../utils' 10 | 11 | export default { 12 | name: 'jump-in-right-arrow', 13 | extendName: 'single-node', 14 | options: { 15 | ...base, 16 | shapeType: 'path', 17 | getShapeStyle (cfg) { 18 | const size = this.getSize(cfg) 19 | const width = size[0] 20 | const height = size[1] 21 | const x = 0 - width / 2 22 | const y = 0 - height / 2 23 | // 计算箭头 24 | const { L1, L2, L7 } = utils.node.calculateArrow({ 25 | deg: 85, 26 | L1: height * 0.4, 27 | L7: width * 0.08 28 | }) 29 | // 下箭头 30 | const A0 = { 31 | 1: { x: width / 2 - L2 + L7, y: height / 2 - L1 }, 32 | 2: { x: width / 2, y: height / 2 - L1 }, 33 | // 顶点 34 | 3: { x: width / 2 - L2, y: height / 2 }, 35 | 4: { x: width / 2 - 2 * L2, y: height / 2 - L1 }, 36 | 5: { x: width / 2 - L2 - L7, y: height / 2 - L1 } 37 | } 38 | // 左上顶点 39 | const P1 = { x: -width / 2, y: -height / 2 } 40 | 41 | const path = [ 42 | [ 'M', P1.x, P1.y ], 43 | // FIXME 圆弧的中心点不在坐标原点上 44 | [ 'A', width - (L2 - L7), height - L1, 0, 0, 1, A0[1].x, A0[1].y ], 45 | [ 'L', A0[2].x, A0[2].y ], 46 | [ 'L', A0[3].x, A0[3].y ], 47 | [ 'L', A0[4].x, A0[4].y ], 48 | [ 'L', A0[5].x, A0[5].y ], 49 | // FIXME 圆弧的中心点不在坐标原点上 50 | [ 'A', width - (L2 - L7) - 2 * L7, height - L1, 0, 0, 0, P1.x, P1.y ], 51 | [ 'Z' ] 52 | ] 53 | const color = cfg.color 54 | const style = G6Util.mix({}, { 55 | // 节点的位置在上层确定，所以这里仅使用相对位置即可 56 | x, 57 | y, 58 | width, 59 | height, 60 | path, 61 | stroke: color 62 | }, cfg.style) 63 | return style 64 | } 65 | } 66 | } 67 | -------------------------------------------------------------------------------- /src/global/g6/node/arrow/left-and-up-arrow.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by OXOYO on 2019/12/27. 3 | * 4 | * 左上箭头 5 | */ 6 | 7 | import * as G6Util from '@antv/util' 8 | import base from '../base' 9 | import utils from '../../utils' 10 | 11 | export default { 12 | name: 'left-and-up-arrow', 13 | extendName: 'single-node', 14 | options: { 15 | ...base, 16 | shapeType: 'path', 17 | getShapeStyle (cfg) { 18 | const size = this.getSize(cfg) 19 | const width = size[0] 20 | const height = size[1] 21 | const x = 0 - width / 2 22 | const y = 0 - height / 2 23 | // 计算箭头 24 | const { L1, L2, L7 } = utils.node.calculateArrow({ 25 | deg: 85, 26 | L1: width / 4, 27 | L7: width * 0.15 28 | }) 29 | // 上箭头 30 | const A0 = { 31 | 1: { x: width / 2 - L2 - L7, y: -height / 2 + L1 }, 32 | 2: { x: width / 2 - 2 * L2, y: -height / 2 + L1 }, 33 | // 顶点 34 | 3: { x: width / 2 - L2, y: -height / 2 }, 35 | 4: { x: width / 2, y: -height / 2 + L1 }, 36 | 5: { x: width / 2 - L2 + L7, y: -height / 2 + L1 } 37 | } 38 | // 左箭头 39 | const A1 = { 40 | 1: { x: -width / 2 + L1, y: height / 2 - L2 + L7 }, 41 | 2: { x: -width / 2 + L1, y: height / 2 }, 42 | // 顶点 43 | 3: { x: -width / 2, y: height / 2 - L2 }, 44 | 4: { x: -width / 2 + L1, y: height / 2 - 2 * L2 }, 45 | 5: { x: -width / 2 + L1, y: height / 2 - L2 - L7 } 46 | } 47 | 48 | // 右下顶点 49 | const P1 = { x: A0[5].x, y: A1[1].y } 50 | // 左中拐点 51 | const P2 = { x: A0[1].x, y: A1[5].y } 52 | const path = [ 53 | [ 'M', A0[1].x, A0[1].y ], 54 | [ 'L', A0[2].x, A0[2].y ], 55 | [ 'L', A0[3].x, A0[3].y ], 56 | [ 'L', A0[4].x, A0[4].y ], 57 | [ 'L', A0[5].x, A0[5].y ], 58 | [ 'L', P1.x, P1.y ], 59 | [ 'L', A1[1].x, A1[1].y ], 60 | [ 'L', A1[2].x, A1[2].y ], 61 | [ 'L', A1[3].x, A1[3].y ], 62 | [ 'L', A1[4].x, A1[4].y ], 63 | [ 'L', A1[5].x, A1[5].y ], 64 | [ 'L', P2.x, P2.y ], 65 | [ 'Z' ] 66 | ] 67 | const color = cfg.color 68 | const style = G6Util.mix({}, { 69 | // 节点的位置在上层确定，所以这里仅使用相对位置即可 70 | x, 71 | y, 72 | width, 73 | height, 74 | path, 75 | stroke: color 76 | }, cfg.style) 77 | return style 78 | } 79 | } 80 | } 81 | -------------------------------------------------------------------------------- /src/global/g6/node/arrow/left-sharp-edged-head-arrow.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by OXOYO on 2019/12/27. 3 | * 4 | * 锋利的左箭头 5 | */ 6 | 7 | import * as G6Util from '@antv/util' 8 | import base from '../base' 9 | import utils from '../../utils' 10 | 11 | export default { 12 | name: 'left-sharp-edged-head-arrow', 13 | extendName: 'single-node', 14 | options: { 15 | ...base, 16 | shapeType: 'path', 17 | getShapeStyle (cfg) { 18 | const size = this.getSize(cfg) 19 | const width = size[0] 20 | const height = size[1] 21 | const x = 0 - width / 2 22 | const y = 0 - height / 2 23 | // 计算箭头 24 | // 箭头角度 25 | const deg = 116 26 | const { L1, L2, L7 } = utils.node.calculateArrow({ 27 | deg: deg, 28 | L1: height / 4, 29 | L7: height / 6 30 | }) 31 | // 计算夹角临边长度 32 | const L99 = (L2 - L7) / Math.tan(deg / 2 * Math.PI / 180) 33 | // 左箭头 34 | const A0 = { 35 | 1: { x: -width / 2 + L1 + L7 - L99, y: L7 }, 36 | 2: { x: -width / 2 + L1 + L7, y: height / 2 }, 37 | 3: { x: -width / 2 + L1, y: height / 2 }, 38 | // 顶点 39 | 4: { x: -width / 2, y: 0 }, 40 | 5: { x: -width / 2 + L1, y: -height / 2 }, 41 | 6: { x: -width / 2 + L1 + L7, y: -height / 2 }, 42 | 7: { x: -width / 2 + L1 + L7 - L99, y: -L7 } 43 | } 44 | // 右上顶点 45 | const P1 = { x: width / 2, y: -L7 } 46 | // 右下顶点 47 | const P2 = { x: width / 2, y: L7 } 48 | 49 | const path = [ 50 | [ 'M', A0[1].x, A0[1].y ], 51 | [ 'L', A0[2].x, A0[2].y ], 52 | [ 'L', A0[3].x, A0[3].y ], 53 | [ 'L', A0[4].x, A0[4].y ], 54 | [ 'L', A0[5].x, A0[5].y ], 55 | [ 'L', A0[6].x, A0[6].y ], 56 | [ 'L', A0[7].x, A0[7].y ], 57 | [ 'L', P1.x, P1.y ], 58 | [ 'L', P2.x, P2.y ], 59 | [ 'Z' ] 60 | ] 61 | const color = cfg.color 62 | const style = G6Util.mix({}, { 63 | // 节点的位置在上层确定，所以这里仅使用相对位置即可 64 | x, 65 | y, 66 | width, 67 | height, 68 | path, 69 | stroke: color 70 | }, cfg.style) 71 | return style 72 | } 73 | } 74 | } 75 | -------------------------------------------------------------------------------- /src/global/g6/node/arrow/notched-signal-in-arrow.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by OXOYO on 2019/12/26. 3 | * 4 | * 缺口信号箭头 5 | */ 6 | 7 | import * as G6Util from '@antv/util' 8 | import base from '../base' 9 | import utils from '../../utils' 10 | 11 | export default { 12 | name: 'notched-signal-in-arrow', 13 | extendName: 'single-node', 14 | options: { 15 | ...base, 16 | shapeType: 'path', 17 | getShapeStyle (cfg) { 18 | const size = this.getSize(cfg) 19 | const width = size[0] 20 | const height = size[1] 21 | const x = 0 - width / 2 22 | const y = 0 - height / 2 23 | // 计算箭头 24 | const { L1, L7 } = utils.node.calculateArrow({ 25 | deg: 100, 26 | L1: width / 6, 27 | L7: height / 2 28 | }) 29 | // 箭头顶点 30 | const P0 = { 31 | x: width / 2, 32 | y: 0 33 | } 34 | 35 | // 右下顶点 36 | const P1 = { 37 | x: width / 2 - L1, 38 | y: L7 39 | } 40 | // 左下顶点 41 | const P2 = { 42 | x: -width / 2, 43 | y: L7 44 | } 45 | // 左中 46 | const P3 = { 47 | x: -width / 2 + L1, 48 | y: 0 49 | } 50 | // 左上顶点 51 | const P4 = { 52 | x: -width / 2, 53 | y: -L7 54 | } 55 | // 右上顶点 56 | const P5 = { 57 | x: width / 2 - L1, 58 | y: -L7 59 | } 60 | const path = [ 61 | [ 'M', P0.x, P0.y ], 62 | [ 'L', P1.x, P1.y ], 63 | [ 'L', P2.x, P2.y ], 64 | [ 'L', P3.x, P3.y ], 65 | [ 'L', P4.x, P4.y ], 66 | [ 'L', P5.x, P5.y ], 67 | [ 'Z' ] 68 | ] 69 | const color = cfg.color 70 | const style = G6Util.mix({}, { 71 | // 节点的位置在上层确定，所以这里仅使用相对位置即可 72 | x, 73 | y, 74 | width, 75 | height, 76 | path, 77 | stroke: color 78 | }, cfg.style) 79 | return style 80 | } 81 | } 82 | } 83 | -------------------------------------------------------------------------------- /src/global/g6/node/arrow/right-notched-arrow.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by OXOYO on 2019/12/26. 3 | * 4 | * 右缺口箭头 5 | */ 6 | 7 | import * as G6Util from '@antv/util' 8 | import base from '../base' 9 | import utils from '../../utils' 10 | 11 | export default { 12 | name: 'right-notched-arrow', 13 | extendName: 'single-node', 14 | options: { 15 | ...base, 16 | shapeType: 'path', 17 | getShapeStyle (cfg) { 18 | const size = this.getSize(cfg) 19 | const width = size[0] 20 | const height = size[1] 21 | const x = 0 - width / 2 22 | const y = 0 - height / 2 23 | // 计算右箭头 24 | const { L1, L7 } = utils.node.calculateArrow({ 25 | deg: 85, 26 | L1: width / 3, 27 | L7: height / 4 28 | }) 29 | // 计算左箭头 30 | const { L1: LL1 } = utils.node.calculateArrow({ 31 | deg: 100, 32 | L1: width / 6, 33 | L7: height / 6 34 | }) 35 | // 箭头顶点 36 | const P0 = { 37 | x: width / 2, 38 | y: 0 39 | } 40 | 41 | // 右下顶点 42 | const P1 = { 43 | x: width / 2 - L1, 44 | y: height / 2 45 | } 46 | // 右下中 47 | const P2 = { 48 | x: width / 2 - L1, 49 | y: L7 50 | } 51 | // 左下 52 | const P3 = { 53 | x: -width / 2, 54 | y: L7 55 | } 56 | // 左中 57 | const P4 = { 58 | x: -width / 2 + LL1, 59 | y: 0 60 | } 61 | // 左上 62 | const P5 = { 63 | x: -width / 2, 64 | y: -L7 65 | } 66 | // 右下中 67 | const P6 = { 68 | x: width / 2 - L1, 69 | y: -L7 70 | } 71 | // 右上顶点 72 | const P7 = { 73 | x: width / 2 - L1, 74 | y: -height / 2 75 | } 76 | 77 | const path = [ 78 | [ 'M', P0.x, P0.y ], 79 | [ 'L', P1.x, P1.y ], 80 | [ 'L', P2.x, P2.y ], 81 | [ 'L', P3.x, P3.y ], 82 | [ 'L', P4.x, P4.y ], 83 | [ 'L', P5.x, P5.y ], 84 | [ 'L', P6.x, P6.y ], 85 | [ 'L', P7.x, P7.y ], 86 | [ 'Z' ] 87 | ] 88 | const color = cfg.color 89 | const style = G6Util.mix({}, { 90 | // 节点的位置在上层确定，所以这里仅使用相对位置即可 91 | x, 92 | y, 93 | width, 94 | height, 95 | path, 96 | stroke: color 97 | }, cfg.style) 98 | return style 99 | } 100 | } 101 | } 102 | -------------------------------------------------------------------------------- /src/global/g6/node/arrow/sharp-edged-arrow.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by OXOYO on 2019/12/27. 3 | * 4 | * 锋利的箭头 5 | */ 6 | 7 | import * as G6Util from '@antv/util' 8 | import base from '../base' 9 | import utils from '../../utils' 10 | 11 | export default { 12 | name: 'sharp-edged-arrow', 13 | extendName: 'single-node', 14 | options: { 15 | ...base, 16 | shapeType: 'path', 17 | getShapeStyle (cfg) { 18 | const size = this.getSize(cfg) 19 | const width = size[0] 20 | const height = size[1] 21 | const x = 0 - width / 2 22 | const y = 0 - height / 2 23 | // 计算箭头 24 | // 箭头角度 25 | const deg = 116 26 | const { L1, L2, L7 } = utils.node.calculateArrow({ 27 | deg: deg, 28 | L1: height / 4, 29 | L7: height / 6 30 | }) 31 | // 计算夹角临边长度 32 | const L99 = (L2 - L7) / Math.tan(deg / 2 * Math.PI / 180) 33 | // 左箭头 34 | const A0 = { 35 | 1: { x: -width / 2 + L1 + L7 - L99, y: L7 }, 36 | 2: { x: -width / 2 + L1 + L7, y: height / 2 - L7 / 2 }, 37 | 3: { x: -width / 2 + L1, y: height / 2 }, 38 | // 顶点 39 | 4: { x: -width / 2, y: 0 }, 40 | 5: { x: -width / 2 + L1, y: -height / 2 }, 41 | 6: { x: -width / 2 + L1 + L7, y: -height / 2 + L7 / 2 }, 42 | 7: { x: -width / 2 + L1 + L7 - L99, y: -L7 } 43 | } 44 | // 右上顶点 45 | const P1 = { x: width / 2, y: -L7 } 46 | // 右下顶点 47 | const P2 = { x: width / 2, y: L7 } 48 | 49 | const path = [ 50 | [ 'M', A0[1].x, A0[1].y ], 51 | [ 'L', A0[2].x, A0[2].y ], 52 | [ 'L', A0[3].x, A0[3].y ], 53 | [ 'L', A0[4].x, A0[4].y ], 54 | [ 'L', A0[5].x, A0[5].y ], 55 | [ 'L', A0[6].x, A0[6].y ], 56 | [ 'L', A0[7].x, A0[7].y ], 57 | [ 'L', P1.x, P1.y ], 58 | [ 'L', P2.x, P2.y ], 59 | [ 'Z' ] 60 | ] 61 | const color = cfg.color 62 | const style = G6Util.mix({}, { 63 | // 节点的位置在上层确定，所以这里仅使用相对位置即可 64 | x, 65 | y, 66 | width, 67 | height, 68 | path, 69 | stroke: color 70 | }, cfg.style) 71 | return style 72 | } 73 | } 74 | } 75 | -------------------------------------------------------------------------------- /src/global/g6/node/arrow/signal-in-arrow.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by OXOYO on 2019/12/26. 3 | * 4 | * 信号箭头 5 | */ 6 | 7 | import * as G6Util from '@antv/util' 8 | import base from '../base' 9 | import utils from '../../utils' 10 | 11 | export default { 12 | name: 'signal-in-arrow', 13 | extendName: 'single-node', 14 | options: { 15 | ...base, 16 | shapeType: 'path', 17 | getShapeStyle (cfg) { 18 | const size = this.getSize(cfg) 19 | const width = size[0] 20 | const height = size[1] 21 | const x = 0 - width / 2 22 | const y = 0 - height / 2 23 | // 计算箭头 24 | const { L1, L7 } = utils.node.calculateArrow({ 25 | deg: 100, 26 | L1: width / 6, 27 | L7: height / 2 28 | }) 29 | // 箭头顶点 30 | const P0 = { 31 | x: width / 2, 32 | y: 0 33 | } 34 | 35 | // 右下顶点 36 | const P1 = { 37 | x: width / 2 - L1, 38 | y: L7 39 | } 40 | // 左下顶点 41 | const P2 = { 42 | x: -width / 2, 43 | y: L7 44 | } 45 | // 左中 46 | // let P3 = { 47 | // x: -width / 2 + L1, 48 | // y: 0 49 | // } 50 | // 左上顶点 51 | const P4 = { 52 | x: -width / 2, 53 | y: -L7 54 | } 55 | // 右上顶点 56 | const P5 = { 57 | x: width / 2 - L1, 58 | y: -L7 59 | } 60 | const path = [ 61 | [ 'M', P0.x, P0.y ], 62 | [ 'L', P1.x, P1.y ], 63 | [ 'L', P2.x, P2.y ], 64 | // [ 'L', P3.x, P3.y ], 65 | [ 'L', P4.x, P4.y ], 66 | [ 'L', P5.x, P5.y ], 67 | [ 'Z' ] 68 | ] 69 | const color = cfg.color 70 | const style = G6Util.mix({}, { 71 | // 节点的位置在上层确定，所以这里仅使用相对位置即可 72 | x, 73 | y, 74 | width, 75 | height, 76 | path, 77 | stroke: color 78 | }, cfg.style) 79 | return style 80 | } 81 | } 82 | } 83 | -------------------------------------------------------------------------------- /src/global/g6/node/arrow/slender-left-arrow.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by OXOYO on 2019/12/26. 3 | * 4 | * 细长左箭头 5 | */ 6 | 7 | import * as G6Util from '@antv/util' 8 | import base from '../base' 9 | import utils from '../../utils' 10 | 11 | export default { 12 | name: 'slender-left-arrow', 13 | extendName: 'single-node', 14 | options: { 15 | ...base, 16 | shapeType: 'path', 17 | getShapeStyle (cfg) { 18 | const size = this.getSize(cfg) 19 | const width = size[0] 20 | const height = size[1] 21 | const x = 0 - width / 2 22 | const y = 0 - height / 2 23 | // 计算箭头 24 | const { L1, L7 } = utils.node.calculateArrow({ 25 | deg: 120, 26 | L1: width / 6, 27 | L7: height / 6 28 | }) 29 | // 箭头顶点 30 | const P0 = { 31 | x: -width / 2, 32 | y: 0 33 | } 34 | 35 | // 左上顶点 36 | const P1 = { 37 | x: -width / 2 + L1, 38 | y: height / 2 39 | } 40 | // 左上中 41 | const P2 = { 42 | x: -width / 2 + L1, 43 | y: L7 44 | } 45 | // 右上 46 | const P3 = { 47 | x: width / 2, 48 | y: L7 49 | } 50 | // 右下 51 | const P4 = { 52 | x: width / 2, 53 | y: -L7 54 | } 55 | // 左下中 56 | const P5 = { 57 | x: -width / 2 + L1, 58 | y: -L7 59 | } 60 | // 左下顶点 61 | const P6 = { 62 | x: -width / 2 + L1, 63 | y: -height / 2 64 | } 65 | 66 | const path = [ 67 | [ 'M', P0.x, P0.y ], 68 | [ 'L', P1.x, P1.y ], 69 | [ 'L', P2.x, P2.y ], 70 | [ 'L', P3.x, P3.y ], 71 | [ 'L', P4.x, P4.y ], 72 | [ 'L', P5.x, P5.y ], 73 | [ 'L', P6.x, P6.y ], 74 | [ 'Z' ] 75 | ] 76 | const color = cfg.color 77 | const style = G6Util.mix({}, { 78 | // 节点的位置在上层确定，所以这里仅使用相对位置即可 79 | x, 80 | y, 81 | width, 82 | height, 83 | path, 84 | stroke: color 85 | }, cfg.style) 86 | return style 87 | } 88 | } 89 | } 90 | -------------------------------------------------------------------------------- /src/global/g6/node/arrow/slender-two-way-arrow.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by OXOYO on 2019/12/26. 3 | * 4 | * 细长双向箭头 5 | */ 6 | 7 | import * as G6Util from '@antv/util' 8 | import base from '../base' 9 | import utils from '../../utils' 10 | 11 | export default { 12 | name: 'slender-two-way-arrow', 13 | extendName: 'single-node', 14 | options: { 15 | ...base, 16 | shapeType: 'path', 17 | getShapeStyle (cfg) { 18 | const size = this.getSize(cfg) 19 | const width = size[0] 20 | const height = size[1] 21 | const x = 0 - width / 2 22 | const y = 0 - height / 2 23 | // 计算箭头 24 | const { L1, L7 } = utils.node.calculateArrow({ 25 | deg: 120, 26 | L1: width / 6, 27 | L7: height / 6 28 | }) 29 | // 左箭头顶点 30 | const P0 = { 31 | x: -width / 2, 32 | y: 0 33 | } 34 | 35 | // 左上顶点 36 | const P1 = { 37 | x: -width / 2 + L1, 38 | y: height / 2 39 | } 40 | // 左上中 41 | const P2 = { 42 | x: -width / 2 + L1, 43 | y: L7 44 | } 45 | // 右上中 46 | const P3 = { 47 | x: width / 2 - L1, 48 | y: L7 49 | } 50 | // 右上顶点 51 | const P4 = { 52 | x: width / 2 - L1, 53 | y: height / 2 54 | } 55 | // 右箭头顶点 56 | const P5 = { 57 | x: width / 2, 58 | y: 0 59 | } 60 | // 右下顶点 61 | const P6 = { 62 | x: width / 2 - L1, 63 | y: -height / 2 64 | } 65 | // 右下中 66 | const P7 = { 67 | x: width / 2 - L1, 68 | y: -L7 69 | } 70 | // 左下中 71 | const P8 = { 72 | x: -width / 2 + L1, 73 | y: -L7 74 | } 75 | // 左下顶点 76 | const P9 = { 77 | x: -width / 2 + L1, 78 | y: -height / 2 79 | } 80 | 81 | const path = [ 82 | [ 'M', P0.x, P0.y ], 83 | [ 'L', P1.x, P1.y ], 84 | [ 'L', P2.x, P2.y ], 85 | [ 'L', P3.x, P3.y ], 86 | [ 'L', P4.x, P4.y ], 87 | [ 'L', P5.x, P5.y ], 88 | [ 'L', P6.x, P6.y ], 89 | [ 'L', P7.x, P7.y ], 90 | [ 'L', P8.x, P8.y ], 91 | [ 'L', P9.x, P9.y ], 92 | [ 'Z' ] 93 | ] 94 | const color = cfg.color 95 | const style = G6Util.mix({}, { 96 | // 节点的位置在上层确定，所以这里仅使用相对位置即可 97 | x, 98 | y, 99 | width, 100 | height, 101 | path, 102 | stroke: color 103 | }, cfg.style) 104 | return style 105 | } 106 | } 107 | } 108 | -------------------------------------------------------------------------------- /src/global/g6/node/arrow/slender-wide-tailed-arrow.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by OXOYO on 2019/12/26. 3 | * 4 | * 细长尾箭头 5 | */ 6 | 7 | import * as G6Util from '@antv/util' 8 | import base from '../base' 9 | import utils from '../../utils' 10 | 11 | export default { 12 | name: 'slender-wide-tailed-arrow', 13 | extendName: 'single-node', 14 | options: { 15 | ...base, 16 | shapeType: 'path', 17 | getShapeStyle (cfg) { 18 | const size = this.getSize(cfg) 19 | const width = size[0] 20 | const height = size[1] 21 | const x = 0 - width / 2 22 | const y = 0 - height / 2 23 | // 计算箭头 24 | const { L1, L7 } = utils.node.calculateArrow({ 25 | deg: 120, 26 | L1: width / 6, 27 | L7: height / 6 28 | }) 29 | // 左箭头顶点 30 | const P0 = { 31 | x: -width / 2, 32 | y: 0 33 | } 34 | 35 | // 左上顶点 36 | const P1 = { 37 | x: -width / 2 + L1, 38 | y: height / 2 39 | } 40 | // 左上中 41 | const P2 = { 42 | x: -width / 2 + L1, 43 | y: L7 44 | } 45 | // 右左上中 46 | const P3 = { 47 | x: width / 2 - 2 * L1 - L7, 48 | y: L7 49 | } 50 | // 右左上顶点 51 | const P4 = { 52 | x: width / 2 - L1 - L7, 53 | y: height / 2 54 | } 55 | // 右上顶点 56 | const P5 = { 57 | x: width / 2, 58 | y: height / 2 59 | } 60 | // 右箭头顶点 61 | const P6 = { 62 | x: width / 2 - L1, 63 | y: 0 64 | } 65 | // 右下顶点 66 | const P7 = { 67 | x: width / 2, 68 | y: -height / 2 69 | } 70 | // 右左下顶点 71 | const P8 = { 72 | x: width / 2 - L1 - L7, 73 | y: -height / 2 74 | } 75 | // 右左下中 76 | const P9 = { 77 | x: width / 2 - 2 * L1 - L7, 78 | y: -L7 79 | } 80 | // 左下中 81 | const P10 = { 82 | x: -width / 2 + L1, 83 | y: -L7 84 | } 85 | // 左下顶点 86 | const P11 = { 87 | x: -width / 2 + L1, 88 | y: -height / 2 89 | } 90 | 91 | const path = [ 92 | [ 'M', P0.x, P0.y ], 93 | [ 'L', P1.x, P1.y ], 94 | [ 'L', P2.x, P2.y ], 95 | [ 'L', P3.x, P3.y ], 96 | [ 'L', P4.x, P4.y ], 97 | [ 'L', P5.x, P5.y ], 98 | [ 'L', P6.x, P6.y ], 99 | [ 'L', P7.x, P7.y ], 100 | [ 'L', P8.x, P8.y ], 101 | [ 'L', P9.x, P9.y ], 102 | [ 'L', P10.x, P10.y ], 103 | [ 'L', P11.x, P11.y ], 104 | [ 'Z' ] 105 | ] 106 | const color = cfg.color 107 | const style = G6Util.mix({}, { 108 | // 节点的位置在上层确定，所以这里仅使用相对位置即可 109 | x, 110 | y, 111 | width, 112 | height, 113 | path, 114 | stroke: color 115 | }, cfg.style) 116 | return style 117 | } 118 | } 119 | } 120 | -------------------------------------------------------------------------------- /src/global/g6/node/arrow/stylised-notched-arrow.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by OXOYO on 2019/12/26. 3 | * 4 | * 程式化缺口箭头 5 | */ 6 | 7 | import * as G6Util from '@antv/util' 8 | import base from '../base' 9 | import utils from '../../utils' 10 | 11 | export default { 12 | name: 'stylised-notched-arrow', 13 | extendName: 'single-node', 14 | options: { 15 | ...base, 16 | shapeType: 'path', 17 | getShapeStyle (cfg) { 18 | const size = this.getSize(cfg) 19 | const width = size[0] 20 | const height = size[1] 21 | const x = 0 - width / 2 22 | const y = 0 - height / 2 23 | // 计算左箭头 24 | const { L1: LL1 } = utils.node.calculateArrow({ 25 | deg: 125, 26 | L1: width / 6, 27 | L7: height / 4 28 | }) 29 | // 计算右箭头 30 | const { L1: LR1 } = utils.node.calculateArrow({ 31 | deg: 75, 32 | L1: width * 0.4, 33 | L7: height / 4 34 | }) 35 | // 左箭头 36 | const A0 = { 37 | 1: { x: -width / 2, y: -height * 0.4 }, 38 | // 顶点 39 | 2: { x: -width / 2 + LL1, y: 0 }, 40 | 3: { x: -width / 2, y: height * 0.4 } 41 | } 42 | // 右箭头 43 | const A1 = { 44 | 1: { x: width / 2 - LR1 + LL1, y: -height / 6 }, 45 | 2: { x: width / 2 - LR1, y: -height / 2 }, 46 | 3: { x: width / 2, y: 0 }, 47 | 4: { x: width / 2 - LR1, y: height / 2 }, 48 | 5: { x: width / 2 - LR1 + LL1, y: height / 6 } 49 | } 50 | const path = [ 51 | [ 'M', A0[1].x, A0[1].y ], 52 | [ 'L', A1[1].x, A1[1].y ], 53 | [ 'L', A1[2].x, A1[2].y ], 54 | [ 'L', A1[3].x, A1[3].y ], 55 | [ 'L', A1[4].x, A1[4].y ], 56 | [ 'L', A1[5].x, A1[5].y ], 57 | [ 'L', A0[3].x, A0[3].y ], 58 | [ 'L', A0[2].x, A0[2].y ], 59 | [ 'Z' ] 60 | ] 61 | const color = cfg.color 62 | const style = G6Util.mix({}, { 63 | // 节点的位置在上层确定，所以这里仅使用相对位置即可 64 | x, 65 | y, 66 | width, 67 | height, 68 | path, 69 | stroke: color 70 | }, cfg.style) 71 | return style 72 | } 73 | } 74 | } 75 | -------------------------------------------------------------------------------- /src/global/g6/node/arrow/triad-arrow.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by OXOYO on 2019/12/27. 3 | * 4 | * 三合箭头 5 | */ 6 | 7 | import * as G6Util from '@antv/util' 8 | import base from '../base' 9 | import utils from '../../utils' 10 | 11 | export default { 12 | name: 'triad-arrow', 13 | extendName: 'single-node', 14 | options: { 15 | ...base, 16 | shapeType: 'path', 17 | getShapeStyle (cfg) { 18 | const size = this.getSize(cfg) 19 | const width = size[0] 20 | const height = size[1] 21 | const x = 0 - width / 2 22 | const y = 0 - height / 2 23 | // 计算箭头 24 | const { L1, L2, L7 } = utils.node.calculateArrow({ 25 | deg: 85, 26 | L1: width / 5, 27 | L7: width / 10 28 | }) 29 | // FIXME 顺时针接续计算 30 | // 上箭头 31 | const A0 = { 32 | 1: { x: -L7, y: height / 2 - L2 - L7 }, 33 | 2: { x: -L7, y: -height / 2 + L1 }, 34 | 3: { x: -L2, y: -height / 2 + L1 }, 35 | // 箭头顶点 36 | 4: { x: 0, y: -height / 2 }, 37 | 5: { x: L2, y: -height / 2 + L1 }, 38 | 6: { x: L7, y: -height / 2 + L1 }, 39 | 7: { x: L7, y: height / 2 - L2 - L7 } 40 | } 41 | // 右箭头 42 | const A1 = { 43 | 1: { x: width / 2 - L1, y: height / 2 - L2 - L7 }, 44 | 2: { x: width / 2 - L1, y: height / 2 - 2 * L2 }, 45 | // 箭头顶点 46 | 3: { x: width / 2, y: height / 2 - L2 }, 47 | 4: { x: width / 2 - L1, y: height / 2 }, 48 | 5: { x: width / 2 - L1, y: height / 2 - L2 + L7 } 49 | } 50 | // 左箭头 51 | const A2 = { 52 | 1: { x: -width / 2 + L1, y: height / 2 - L2 + L7 }, 53 | 2: { x: -width / 2 + L1, y: height / 2 }, 54 | // 箭头顶点 55 | 3: { x: -width / 2, y: height / 2 - L2 }, 56 | 4: { x: -width / 2 + L1, y: height / 2 - 2 * L2 }, 57 | 5: { x: -width / 2 + L1, y: height / 2 - L2 - L7 } 58 | } 59 | const path = [ 60 | // 上箭头 61 | [ 'M', A0[1].x, A0[1].y ], 62 | [ 'L', A0[2].x, A0[2].y ], 63 | [ 'L', A0[3].x, A0[3].y ], 64 | [ 'L', A0[4].x, A0[4].y ], 65 | [ 'L', A0[5].x, A0[5].y ], 66 | [ 'L', A0[6].x, A0[6].y ], 67 | [ 'L', A0[7].x, A0[7].y ], 68 | // 右箭头 69 | [ 'L', A1[1].x, A1[1].y ], 70 | [ 'L', A1[2].x, A1[2].y ], 71 | [ 'L', A1[3].x, A1[3].y ], 72 | [ 'L', A1[4].x, A1[4].y ], 73 | [ 'L', A1[5].x, A1[5].y ], 74 | // 左箭头 75 | [ 'L', A2[1].x, A2[1].y ], 76 | [ 'L', A2[2].x, A2[2].y ], 77 | [ 'L', A2[3].x, A2[3].y ], 78 | [ 'L', A2[4].x, A2[4].y ], 79 | [ 'L', A2[5].x, A2[5].y ], 80 | [ 'Z' ] 81 | ] 82 | const color = cfg.color 83 | const style = G6Util.mix({}, { 84 | // 节点的位置在上层确定，所以这里仅使用相对位置即可 85 | x, 86 | y, 87 | width, 88 | height, 89 | path, 90 | stroke: color 91 | }, cfg.style) 92 | return style 93 | } 94 | } 95 | } 96 | -------------------------------------------------------------------------------- /src/global/g6/node/arrow/two-way-arrow-horizontal.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by OXOYO on 2019/12/26. 3 | * 4 | * 双向水平箭头 5 | */ 6 | 7 | import * as G6Util from '@antv/util' 8 | import base from '../base' 9 | import utils from '../../utils' 10 | 11 | export default { 12 | name: 'two-way-arrow-horizontal', 13 | extendName: 'single-node', 14 | options: { 15 | ...base, 16 | shapeType: 'path', 17 | getShapeStyle (cfg) { 18 | const size = this.getSize(cfg) 19 | const width = size[0] 20 | const height = size[1] 21 | const x = 0 - width / 2 22 | const y = 0 - height / 2 23 | // 计算箭头 24 | const { L1, L7 } = utils.node.calculateArrow({ 25 | deg: 85, 26 | L1: width * 0.35, 27 | L7: height / 4 28 | }) 29 | // 左箭头 30 | const A0 = { 31 | 1: { x: -width / 2 + L1, y: L7 }, 32 | 2: { x: -width / 2 + L1, y: height / 2 }, 33 | // 顶点 34 | 3: { x: -width / 2, y: 0 }, 35 | 4: { x: -width / 2 + L1, y: -height / 2 }, 36 | 5: { x: -width / 2 + L1, y: -L7 } 37 | } 38 | 39 | // 下箭头 40 | const A1 = { 41 | 1: { x: width / 2 - L1, y: -L7 }, 42 | 2: { x: width / 2 - L1, y: -height / 2 }, 43 | // 顶点 44 | 3: { x: width / 2, y: 0 }, 45 | 4: { x: width / 2 - L1, y: height / 2 }, 46 | 5: { x: width / 2 - L1, y: L7 } 47 | } 48 | 49 | const path = [ 50 | [ 'M', A0[1].x, A0[1].y ], 51 | [ 'L', A0[2].x, A0[2].y ], 52 | [ 'L', A0[3].x, A0[3].y ], 53 | [ 'L', A0[4].x, A0[4].y ], 54 | [ 'L', A0[5].x, A0[5].y ], 55 | [ 'L', A1[1].x, A1[1].y ], 56 | [ 'L', A1[2].x, A1[2].y ], 57 | [ 'L', A1[3].x, A1[3].y ], 58 | [ 'L', A1[4].x, A1[4].y ], 59 | [ 'L', A1[5].x, A1[5].y ], 60 | [ 'Z' ] 61 | ] 62 | const color = cfg.color 63 | const style = G6Util.mix({}, { 64 | // 节点的位置在上层确定，所以这里仅使用相对位置即可 65 | x, 66 | y, 67 | width, 68 | height, 69 | path, 70 | stroke: color 71 | }, cfg.style) 72 | return style 73 | } 74 | } 75 | } 76 | -------------------------------------------------------------------------------- /src/global/g6/node/arrow/two-way-arrow-vertical.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by OXOYO on 2019/12/26. 3 | * 4 | * 双向垂直箭头 5 | */ 6 | 7 | import * as G6Util from '@antv/util' 8 | import base from '../base' 9 | import utils from '../../utils' 10 | 11 | export default { 12 | name: 'two-way-arrow-vertical', 13 | extendName: 'single-node', 14 | options: { 15 | ...base, 16 | shapeType: 'path', 17 | getShapeStyle (cfg) { 18 | const size = this.getSize(cfg) 19 | const width = size[0] 20 | const height = size[1] 21 | const x = 0 - width / 2 22 | const y = 0 - height / 2 23 | // 计算箭头 24 | const { L1, L7 } = utils.node.calculateArrow({ 25 | deg: 85, 26 | L1: height * 0.35, 27 | L7: width / 4 28 | }) 29 | // 上箭头 30 | const A0 = { 31 | 1: { x: -L7, y: -height / 2 + L1 }, 32 | 2: { x: -width / 2, y: -height / 2 + L1 }, 33 | // 顶点 34 | 3: { x: 0, y: -height / 2 }, 35 | 4: { x: width / 2, y: -height / 2 + L1 }, 36 | 5: { x: L7, y: -height / 2 + L1 } 37 | } 38 | 39 | // 下箭头 40 | const A1 = { 41 | 1: { x: L7, y: height / 2 - L1 }, 42 | 2: { x: width / 2, y: height / 2 - L1 }, 43 | // 顶点 44 | 3: { x: 0, y: height / 2 }, 45 | 4: { x: -width / 2, y: height / 2 - L1 }, 46 | 5: { x: -L7, y: height / 2 - L1 } 47 | } 48 | 49 | const path = [ 50 | [ 'M', A0[1].x, A0[1].y ], 51 | [ 'L', A0[2].x, A0[2].y ], 52 | [ 'L', A0[3].x, A0[3].y ], 53 | [ 'L', A0[4].x, A0[4].y ], 54 | [ 'L', A0[5].x, A0[5].y ], 55 | [ 'L', A1[1].x, A1[1].y ], 56 | [ 'L', A1[2].x, A1[2].y ], 57 | [ 'L', A1[3].x, A1[3].y ], 58 | [ 'L', A1[4].x, A1[4].y ], 59 | [ 'L', A1[5].x, A1[5].y ], 60 | [ 'Z' ] 61 | ] 62 | const color = cfg.color 63 | const style = G6Util.mix({}, { 64 | // 节点的位置在上层确定，所以这里仅使用相对位置即可 65 | x, 66 | y, 67 | width, 68 | height, 69 | path, 70 | stroke: color 71 | }, cfg.style) 72 | return style 73 | } 74 | } 75 | } 76 | -------------------------------------------------------------------------------- /src/global/g6/node/arrow/u-turn-arrow.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by OXOYO on 2019/12/27. 3 | * 4 | * U箭头 5 | */ 6 | 7 | import * as G6Util from '@antv/util' 8 | import base from '../base' 9 | import utils from '../../utils' 10 | 11 | export default { 12 | name: 'u-turn-arrow', 13 | extendName: 'single-node', 14 | options: { 15 | ...base, 16 | shapeType: 'path', 17 | getShapeStyle (cfg) { 18 | const size = this.getSize(cfg) 19 | const width = size[0] 20 | const height = size[1] 21 | const x = 0 - width / 2 22 | const y = 0 - height / 2 23 | // 计算箭头 24 | const { L1, L2, L7 } = utils.node.calculateArrow({ 25 | deg: 85, 26 | L1: height / 4, 27 | L7: width / 8 28 | }) 29 | // 下箭头 30 | const A0 = { 31 | 1: { x: width / 2 - L2 + L7, y: -L1 * 0.2 }, 32 | 2: { x: width / 2, y: -L1 * 0.2 }, 33 | // 顶点 34 | 3: { x: width / 2 - L2, y: L1 * 0.8 }, 35 | 4: { x: width / 2 - 2 * L2, y: -L1 * 0.2 }, 36 | 5: { x: width / 2 - L2 - L7, y: -L1 * 0.2 } 37 | } 38 | // 左下左 39 | const P1 = { x: -width / 2, y: height / 2 } 40 | // 左下左中 41 | const P2 = { x: -width / 2, y: -L1 * 0.2 } 42 | // 左下右中 43 | const P3 = { x: -width / 2 + 2 * L7, y: -L1 * 0.2 } 44 | // 左下右 45 | const P4 = { x: -width / 2 + 2 * L7, y: height / 2 } 46 | const path = [ 47 | [ 'M', P1.x, P1.y ], 48 | [ 'L', P2.x, P2.y ], 49 | // FIXME 圆弧的中心点不在坐标原点上 50 | [ 'A', (width - (L2 - L7)) / 2, height / 2 - L1 * 0.2, 0, 1, 1, A0[1].x, A0[1].y ], 51 | [ 'L', A0[2].x, A0[2].y ], 52 | [ 'L', A0[3].x, A0[3].y ], 53 | [ 'L', A0[4].x, A0[4].y ], 54 | [ 'L', A0[5].x, A0[5].y ], 55 | // FIXME 圆弧的中心点不在坐标原点上 56 | [ 'A', (width - (L2 - L7)) / 2 - 2 * L7, height / 2 - L1 * 0.2 - 2 * L7, 0, 1, 0, P3.x, P3.y ], 57 | [ 'L', P4.x, P4.y ], 58 | [ 'Z' ] 59 | ] 60 | const color = cfg.color 61 | const style = G6Util.mix({}, { 62 | // 节点的位置在上层确定，所以这里仅使用相对位置即可 63 | x, 64 | y, 65 | width, 66 | height, 67 | path, 68 | stroke: color 69 | }, cfg.style) 70 | return style 71 | } 72 | } 73 | } 74 | -------------------------------------------------------------------------------- /src/global/g6/node/arrow/u-turn-down-arrow.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by OXOYO on 2019/12/27. 3 | * 4 | * U向下箭头 5 | */ 6 | 7 | import * as G6Util from '@antv/util' 8 | import base from '../base' 9 | import utils from '../../utils' 10 | 11 | export default { 12 | name: 'u-turn-down-arrow', 13 | extendName: 'single-node', 14 | options: { 15 | ...base, 16 | shapeType: 'path', 17 | getShapeStyle (cfg) { 18 | const size = this.getSize(cfg) 19 | const width = size[0] 20 | const height = size[1] 21 | const x = 0 - width / 2 22 | const y = 0 - height / 2 23 | // 计算箭头 24 | const { L1, L2, L7 } = utils.node.calculateArrow({ 25 | deg: 85, 26 | L1: height / 4, 27 | L7: width / 10 28 | }) 29 | // 下箭头 30 | const A0 = { 31 | 1: { x: -width / 2 + L2 + L7, y: -L1 * 0.2 }, 32 | 2: { x: -width / 2 + 2 * L2, y: -L1 * 0.2 }, 33 | // 顶点 34 | 3: { x: -width / 2 + L2, y: height / 2 }, 35 | 4: { x: -width / 2, y: -L1 * 0.2 }, 36 | 5: { x: -width / 2 + L2 - L7, y: -L1 * 0.2 } 37 | } 38 | // 右下右中 39 | const P1 = { x: width / 2, y: -L1 * 0.2 } 40 | // 右下右 41 | const P2 = { x: width / 2, y: height / 2 } 42 | // 右下左 43 | const P3 = { x: width / 2 - 2 * L7, y: height / 2 } 44 | // 右下左中 45 | const P4 = { x: width / 2 - 2 * L7, y: -L1 * 0.2 } 46 | const path = [ 47 | [ 'M', P1.x, P1.y ], 48 | [ 'L', P2.x, P2.y ], 49 | [ 'L', P3.x, P3.y ], 50 | [ 'L', P4.x, P4.y ], 51 | // FIXME 圆弧的中心点不在坐标原点上 52 | // [ 'A', (width - L2 - 2 * L7) / 2, height / 2 - L1 * 0.2 - L7 * 0.5, 0, 0, 0, width / 2 - (width - L2 - 2 * L7) / 2, -height / 2 + L7 * 0.5 ], 53 | [ 'A', width / 2 * 0.6, height / 2 - L1 * 0.2 - L7 * 0.5, 0, 0, 0, width / 2 - width / 2 * 0.6 - 2 * L7, -height / 2 + L7 * 0.5 ], 54 | [ 'A', (width - L2 - L7) / 2, height / 2 - L1 * 0.2, 0, 0, 1, P1.x, P1.y ], 55 | [ 'A', (width - L2 - L7) / 2, height / 2 - L1 * 0.2, 0, 1, 0, A0[1].x, A0[1].y ], 56 | [ 'L', A0[2].x, A0[2].y ], 57 | [ 'L', A0[3].x, A0[3].y ], 58 | [ 'L', A0[4].x, A0[4].y ], 59 | [ 'L', A0[5].x, A0[5].y ], 60 | // FIXME 圆弧的中心点不在坐标原点上 61 | [ 'A', (width - L2 - L7) / 2, height / 2 - L1 * 0.2, 0, 0, 1, -width / 2 + 1.8 * L2 + L7, -height / 2 ], 62 | [ 'L', (L2 + L7) / 2, -height / 2 ], 63 | [ 'A', (width - L2 - L7) / 2, height / 2 - L1 * 0.2, 0, 0, 1, P1.x, P1.y ] 64 | // , 65 | // [ 'Z' ] 66 | ] 67 | const color = cfg.color 68 | const style = G6Util.mix({}, { 69 | // 节点的位置在上层确定，所以这里仅使用相对位置即可 70 | x, 71 | y, 72 | width, 73 | height, 74 | path, 75 | stroke: color 76 | }, cfg.style) 77 | return style 78 | } 79 | } 80 | } 81 | -------------------------------------------------------------------------------- /src/global/g6/node/base.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by OXOYO on 2019/8/29. 3 | * 4 | * 节点基础方法 5 | */ 6 | import * as G6Util from '@antv/util' 7 | import utils from '../utils' 8 | 9 | export default { 10 | type: null, 11 | // 自定义节点配置，需要配置时在各个图形中覆写 12 | options: {}, 13 | drawShape (cfg, group) { 14 | const shapeType = this.shapeType 15 | const style = this.getShapeStyle(cfg) 16 | const keyShape = group.addShape(shapeType, { 17 | attrs: style, 18 | name: 'XFCNodeKeyShape', 19 | draggable: true 20 | }) 21 | this.keyShape = keyShape 22 | return keyShape 23 | }, 24 | getAnchorPoints (cfg) { 25 | const { anchorPoints, width, height } = cfg 26 | const keyShape = this.keyShape 27 | const points = [] 28 | if (anchorPoints && anchorPoints.length) { 29 | for (let i = 0, len = anchorPoints.length; i < len; i++) { 30 | const point = keyShape.getPoint((i + 1) / len) 31 | // 方式一：通过坐标反推占比 32 | const x = point.x 33 | const y = point.y 34 | // 坐标系转换 35 | const x1 = width / 2 + x 36 | const y1 = height / 2 + y 37 | // 百分比 38 | const px = x1 / width 39 | const py = y1 / height 40 | points.push([ px, py ]) 41 | // 方式二：覆盖坐标，有BUG 42 | // points.push([...anchorPoints[i], { 43 | // x: bbox.minX + point.x, 44 | // y: bbox.minY + point.y 45 | // }]) 46 | } 47 | } 48 | // console.log('points', points) 49 | return points 50 | }, 51 | setState (name, value, item) { 52 | // 设置锚点状态 53 | utils.anchor.setState(name, value, item) 54 | // 设置shapeControl状态 55 | utils.shapeControl.setState(name, value, item) 56 | }, 57 | update (cfg, item) { 58 | // 自定义节点配置 59 | const defaultStyle = this.options 60 | // 从新计算图形样式 61 | const shapeStyle = this.getShapeStyle(cfg) 62 | const style = G6Util.mix({}, defaultStyle, shapeStyle) 63 | // 更新图形 64 | this.updateShape(cfg, item, style) 65 | }, 66 | updateShape (cfg, item, style) { 67 | const keyShape = item.get('keyShape') 68 | keyShape.attr({ 69 | ...style 70 | }) 71 | // 更新图形文本 72 | this.updateLabel(cfg, item) 73 | }, 74 | // 绘制完成后附加锚点 75 | afterDraw (cfg, group) { 76 | // 绘制锚点 77 | utils.anchor.draw(cfg, group) 78 | // 绘制shapeControl 79 | utils.shapeControl.draw(cfg, group) 80 | }, 81 | // 更新完成后更新锚点 82 | afterUpdate (cfg, item) { 83 | const group = item.getContainer() 84 | // 更新锚点 85 | utils.anchor.update(cfg, group) 86 | // 更新shapeControl 87 | utils.shapeControl.update(cfg, group) 88 | } 89 | } 90 | -------------------------------------------------------------------------------- /src/global/g6/node/general/actor.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by OXOYO on 2019/9/3. 3 | * 4 | * 演员 5 | */ 6 | 7 | import * as G6Util from '@antv/util' 8 | import base from '../base' 9 | 10 | export default { 11 | name: 'actor', 12 | extendName: 'single-node', 13 | options: { 14 | ...base, 15 | shapeType: 'path', 16 | getShapeStyle (cfg) { 17 | const size = this.getSize(cfg) 18 | const width = size[0] 19 | const height = size[1] 20 | const x = 0 - width / 2 21 | const y = 0 - height / 2 22 | const path = [ 23 | // 左上 24 | [ 'M', -width / 2, -height / 5 ], 25 | // 上中 26 | [ 'L', 0, -height / 5 ], 27 | [ 'L', 0, -height / 4 ], 28 | // 左圆 29 | [ 'C', -width / 5, -height / 4, -width / 5, -height / 2, 0, -height / 2 ], 30 | // 右圆 31 | [ 'C', width / 5, -height / 2, width / 5, -height / 4, 0, -height / 4 ], 32 | // 右上 33 | [ 'L', 0, -height / 5 ], 34 | [ 'L', width / 2, -height / 5 ], 35 | [ 'L', 0, -height / 5 ], 36 | // 竖线 37 | [ 'L', 0, height / 4 ], 38 | // 左斜线 39 | [ 'L', -width / 2, height / 2 ], 40 | [ 'L', 0, height / 4 ], 41 | // 右斜线 42 | [ 'L', width / 2, height / 2 ], 43 | [ 'L', 0, height / 4 ], 44 | // 竖线 45 | [ 'L', 0, -height / 5 ] 46 | ] 47 | const color = cfg.color 48 | const style = G6Util.mix({}, { 49 | // 节点的位置在上层确定，所以这里仅使用相对位置即可 50 | x, 51 | y, 52 | width, 53 | height, 54 | path, 55 | stroke: color 56 | }, cfg.style) 57 | return style 58 | } 59 | } 60 | } 61 | -------------------------------------------------------------------------------- /src/global/g6/node/general/and.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by OXOYO on 2019/9/3. 3 | * 4 | * 与 5 | */ 6 | 7 | import * as G6Util from '@antv/util' 8 | import base from '../base' 9 | 10 | export default { 11 | name: 'and', 12 | extendName: 'single-node', 13 | options: { 14 | ...base, 15 | shapeType: 'path', 16 | getShapeStyle (cfg) { 17 | const size = this.getSize(cfg) 18 | const width = size[0] 19 | const height = size[1] 20 | const x = 0 - width / 2 21 | const y = 0 - height / 2 22 | const path = [ 23 | // 左上 24 | [ 'M', -width / 2, -height / 2 ], 25 | // 右弧 26 | [ 'C', width / 2, -height * 3 / 5, width / 2, height * 3 / 5, -width / 2, height / 2 ], 27 | [ 'Z' ] 28 | ] 29 | const color = cfg.color 30 | const style = G6Util.mix({}, { 31 | // 节点的位置在上层确定，所以这里仅使用相对位置即可 32 | x, 33 | y, 34 | width, 35 | height, 36 | path, 37 | stroke: color 38 | }, cfg.style) 39 | return style 40 | } 41 | } 42 | } 43 | -------------------------------------------------------------------------------- /src/global/g6/node/general/arrow.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by OXOYO on 2019/11/9. 3 | * 4 | * 箭头 5 | */ 6 | 7 | import * as G6Util from '@antv/util' 8 | import base from '../base' 9 | import utils from '../../utils' 10 | 11 | export default { 12 | name: 'arrow', 13 | extendName: 'single-node', 14 | options: { 15 | ...base, 16 | shapeType: 'path', 17 | getShapeStyle (cfg) { 18 | const size = this.getSize(cfg) 19 | const width = size[0] 20 | const height = size[1] 21 | const x = 0 - width / 2 22 | const y = 0 - height / 2 23 | // 计算箭头 24 | const { L4, L5, L6, L8, L9 } = utils.node.calculateArrow({ 25 | deg: 80, 26 | L1: 30 27 | }) 28 | // 左顶点 29 | const P1 = { 30 | x: -width / 2, 31 | y: height / 2 32 | } 33 | // 左上 34 | const P2 = { 35 | x: P1.x, 36 | y: P1.y - L9 37 | } 38 | 39 | // 右顶点 40 | const P5 = { 41 | x: width / 2, 42 | y: -height / 2 43 | } 44 | // 右上中 45 | const P3 = { 46 | x: P5.x - L6 - L8, 47 | y: P5.y + L6 - L8 48 | } 49 | // 右上 50 | const P4 = { 51 | x: P5.x - L5, 52 | y: P5.y + L4 53 | } 54 | // 右下 55 | const P6 = { 56 | x: P5.x - L4, 57 | y: P5.y + L5 58 | } 59 | // 右下中 60 | const P7 = { 61 | x: P5.x - L6 + L8, 62 | y: P5.y + L6 + L8 63 | } 64 | // 左下 65 | const P8 = { 66 | x: P1.x + L9, 67 | y: P1.y 68 | } 69 | 70 | const path = [ 71 | // 左上 72 | [ 'M', P2.x, P2.y ], 73 | // 右上中 74 | [ 'L', P3.x, P3.y ], 75 | // 右上 76 | [ 'L', P4.x, P4.y ], 77 | // 右顶点 78 | [ 'L', P5.x, P5.y ], 79 | // 右下 80 | [ 'L', P6.x, P6.y ], 81 | // 右下中 82 | [ 'L', P7.x, P7.y ], 83 | // 左下 84 | [ 'L', P8.x, P8.y ], 85 | [ 'Z' ] 86 | ] 87 | const color = cfg.color 88 | const style = G6Util.mix({}, { 89 | // 节点的位置在上层确定，所以这里仅使用相对位置即可 90 | x, 91 | y, 92 | width, 93 | height, 94 | path, 95 | stroke: color 96 | }, cfg.style) 97 | return style 98 | } 99 | } 100 | } 101 | -------------------------------------------------------------------------------- /src/global/g6/node/general/bidirectional-arrow.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by OXOYO on 2019/11/9. 3 | * 4 | * 双向箭头 5 | */ 6 | 7 | import * as G6Util from '@antv/util' 8 | import base from '../base' 9 | import utils from '../../utils' 10 | 11 | export default { 12 | name: 'bidirectional-arrow', 13 | extendName: 'single-node', 14 | options: { 15 | ...base, 16 | shapeType: 'path', 17 | getShapeStyle (cfg) { 18 | const size = this.getSize(cfg) 19 | const width = size[0] 20 | const height = size[1] 21 | const x = 0 - width / 2 22 | const y = 0 - height / 2 23 | // 计算箭头 24 | const { L4, L5, L6, L8 } = utils.node.calculateArrow({ 25 | deg: 80, 26 | L1: 30 27 | }) 28 | // 左顶点 29 | const P1 = { 30 | x: -width / 2, 31 | y: height / 2 32 | } 33 | // 左上 34 | const P2 = { 35 | x: P1.x + L4, 36 | y: P1.y - L5 37 | } 38 | // 左上中 39 | const P3 = { 40 | x: P1.x + L6 - L8, 41 | y: P1.y - L6 - L8 42 | } 43 | // 右顶点 44 | const P6 = { 45 | x: width / 2, 46 | y: -height / 2 47 | } 48 | // 右上中 49 | const P4 = { 50 | x: P6.x - L6 - L8, 51 | y: P6.y + L6 - L8 52 | } 53 | // 右上 54 | const P5 = { 55 | x: P6.x - L5, 56 | y: P6.y + L4 57 | } 58 | // 右下 59 | const P7 = { 60 | x: P6.x - L4, 61 | y: P6.y + L5 62 | } 63 | // 右下中 64 | const P8 = { 65 | x: P6.x - L6 + L8, 66 | y: P6.y + L6 + L8 67 | } 68 | // 左下中 69 | const P9 = { 70 | x: P1.x + L6 + L8, 71 | y: P1.y - L6 + L8 72 | } 73 | // 左下 74 | const P10 = { 75 | x: P1.x + L5, 76 | y: P1.y - L4 77 | } 78 | 79 | const path = [ 80 | // 左顶点 81 | [ 'M', P1.x, P1.y ], 82 | // 左上 83 | [ 'L', P2.x, P2.y ], 84 | // 左上中 85 | [ 'L', P3.x, P3.y ], 86 | // 右上中 87 | [ 'L', P4.x, P4.y ], 88 | // 右上 89 | [ 'L', P5.x, P5.y ], 90 | // 右顶点 91 | [ 'L', P6.x, P6.y ], 92 | // 右下 93 | [ 'L', P7.x, P7.y ], 94 | // 右下中 95 | [ 'L', P8.x, P8.y ], 96 | // 左下中 97 | [ 'L', P9.x, P9.y ], 98 | // 左下 99 | [ 'L', P10.x, P10.y ], 100 | [ 'Z' ] 101 | ] 102 | const color = cfg.color 103 | const style = G6Util.mix({}, { 104 | // 节点的位置在上层确定，所以这里仅使用相对位置即可 105 | x, 106 | y, 107 | width, 108 | height, 109 | path, 110 | stroke: color 111 | }, cfg.style) 112 | return style 113 | } 114 | } 115 | } 116 | -------------------------------------------------------------------------------- /src/global/g6/node/general/callout.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by OXOYO on 2019/9/3. 3 | * 4 | * 呼喊 5 | */ 6 | 7 | import * as G6Util from '@antv/util' 8 | import base from '../base' 9 | 10 | export default { 11 | name: 'callout', 12 | extendName: 'single-node', 13 | options: { 14 | ...base, 15 | shapeType: 'path', 16 | getShapeStyle (cfg) { 17 | const size = this.getSize(cfg) 18 | const width = size[0] 19 | const height = size[1] 20 | const x = 0 - width / 2 21 | const y = 0 - height / 2 22 | const path = [ 23 | // 左上 24 | [ 'M', -width / 2, -height / 2 ], 25 | // 右上 26 | [ 'L', width / 2, -height / 2 ], 27 | // 右下 28 | [ 'L', width / 2, height / 4 ], 29 | // 下拐角 30 | [ 'L', width / 4, height / 4 ], 31 | [ 'L', 0, height / 2 ], 32 | [ 'L', 0, height / 4 ], 33 | // 左下 34 | [ 'L', -width / 2, height / 4 ], 35 | [ 'Z' ] 36 | ] 37 | const color = cfg.color 38 | const style = G6Util.mix({}, { 39 | // 节点的位置在上层确定，所以这里仅使用相对位置即可 40 | x, 41 | y, 42 | width, 43 | height, 44 | path, 45 | stroke: color 46 | }, cfg.style) 47 | return style 48 | } 49 | } 50 | } 51 | -------------------------------------------------------------------------------- /src/global/g6/node/general/card.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by OXOYO on 2019/9/3. 3 | * 4 | * 卡片 5 | */ 6 | 7 | import * as G6Util from '@antv/util' 8 | import base from '../base' 9 | 10 | export default { 11 | name: 'card', 12 | extendName: 'single-node', 13 | options: { 14 | ...base, 15 | shapeType: 'path', 16 | getShapeStyle (cfg) { 17 | const size = this.getSize(cfg) 18 | const width = size[0] 19 | const height = size[1] 20 | const x = 0 - width / 2 21 | const y = 0 - height / 2 22 | const path = [ 23 | // 左上 24 | [ 'M', -width / 2, -height / 4 ], 25 | // 左上拐 26 | [ 'L', -width / 4, -height / 2 ], 27 | // 右上 28 | [ 'L', width / 2, -height / 2 ], 29 | // 右下 30 | [ 'L', width / 2, height / 2 ], 31 | // 左下 32 | [ 'L', -width / 2, height / 2 ], 33 | [ 'Z' ] 34 | ] 35 | const color = cfg.color 36 | const style = G6Util.mix({}, { 37 | // 节点的位置在上层确定，所以这里仅使用相对位置即可 38 | x, 39 | y, 40 | width, 41 | height, 42 | path, 43 | stroke: color 44 | }, cfg.style) 45 | return style 46 | } 47 | } 48 | } 49 | -------------------------------------------------------------------------------- /src/global/g6/node/general/circle.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by OXOYO on 2019/7/8. 3 | * 4 | * 圆形 5 | */ 6 | 7 | import * as G6Util from '@antv/util' 8 | import base from '../base' 9 | 10 | export default { 11 | name: 'circle', 12 | extendName: 'single-node', 13 | options: { 14 | ...base, 15 | shapeType: 'path', 16 | getShapeStyle (cfg) { 17 | const size = this.getSize(cfg) 18 | const width = size[0] 19 | const height = size[1] 20 | const x = 0 - width / 2 21 | const y = 0 - height / 2 22 | 23 | const path = [ 24 | // 左顶点 25 | [ 'M', -width / 2, 0 ], 26 | // 上弧 27 | [ 'A', width / 4, height / 4, 0, 1, 0, width / 2, 0 ], 28 | // 下弧 29 | [ 'A', width / 4, height / 4, 0, 1, 0, -width / 2, 0 ] 30 | ] 31 | const color = cfg.color 32 | const style = G6Util.mix({}, { 33 | // 节点的位置在上层确定，所以这里仅使用相对位置即可 34 | x, 35 | y, 36 | width, 37 | height, 38 | path, 39 | stroke: color 40 | }, cfg.style) 41 | return style 42 | } 43 | } 44 | } 45 | -------------------------------------------------------------------------------- /src/global/g6/node/general/cloud.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by OXOYO on 2019/9/3. 3 | * 4 | * 云 5 | */ 6 | 7 | import * as G6Util from '@antv/util' 8 | import base from '../base' 9 | 10 | export default { 11 | name: 'cloud', 12 | extendName: 'single-node', 13 | options: { 14 | ...base, 15 | shapeType: 'path', 16 | getShapeStyle (cfg) { 17 | const size = this.getSize(cfg) 18 | const width = size[0] 19 | const height = size[1] 20 | const x = 0 - width / 2 21 | const y = 0 - height / 2 22 | const path = [ 23 | // 左 24 | [ 'M', -width * 6 / 20, height * 2 / 20 ], 25 | // 弧1 左->右 26 | [ 'C', -width * 10 / 20, height * 1 / 20, -width * 7 / 20, -height * 3 / 20, -width * 4 / 20, -height * 3 / 20 ], 27 | // 弧2 左->右 28 | [ 'C', -width * 4 / 20, -height * 6 / 20, width * 2 / 20, -height * 6 / 20, width * 4 / 20, -height * 4 / 20 ], 29 | // 弧3 左->右 30 | [ 'C', width * 6 / 20, -height * 5 / 20, width * 9 / 20, -height * 4 / 20, width * 7 / 20, -height * 2 / 20 ], 31 | // 弧4 左->右 32 | [ 'C', width * 10 / 20, height * 1 / 20, width * 8 / 20, height * 2 / 20, width * 5 / 20, height * 3 / 20 ], 33 | // 弧5 左->右 34 | [ 'C', width * 3 / 20, height * 6 / 20, -width * 4 / 20, height * 5 / 20, -width * 3 / 20, height * 3 / 20 ], 35 | // 弧6 左->右 36 | [ 'C', -width * 3 / 20, height * 4 / 20, -width * 8 / 20, height * 5 / 20, -width * 6 / 20, height * 2 / 20 ] 37 | ] 38 | const color = cfg.color 39 | const style = G6Util.mix({}, { 40 | // 节点的位置在上层确定，所以这里仅使用相对位置即可 41 | x, 42 | y, 43 | width, 44 | height, 45 | path, 46 | stroke: color 47 | }, cfg.style) 48 | return style 49 | } 50 | } 51 | } 52 | -------------------------------------------------------------------------------- /src/global/g6/node/general/cube.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by OXOYO on 2019/9/5. 3 | * 4 | * 立方体 5 | */ 6 | 7 | import * as G6Util from '@antv/util' 8 | import base from '../base' 9 | 10 | export default { 11 | name: 'cube', 12 | extendName: 'single-node', 13 | options: { 14 | ...base, 15 | shapeType: 'path', 16 | getShapeStyle (cfg) { 17 | const size = this.getSize(cfg) 18 | const width = size[0] 19 | const height = size[1] 20 | const x = 0 - width / 2 21 | const y = 0 - height / 2 22 | const path = [ 23 | // 左上 24 | [ 'M', -width / 2, -height / 2 ], 25 | // 右上 26 | [ 'L', width * 3 / 8, -height / 2 ], 27 | // 右上拐 28 | [ 'L', width / 2, -height * 3 / 8 ], 29 | // 右下 30 | [ 'L', width / 2, height / 2 ], 31 | // 左下 32 | [ 'L', -width * 3 / 8, height / 2 ], 33 | // 左下拐 34 | [ 'L', -width / 2, height * 3 / 8 ], 35 | // 左上 36 | [ 'L', -width / 2, -height / 2 ], 37 | // 右上 38 | [ 'L', width * 3 / 8, -height / 2 ], 39 | // 右上拐 40 | [ 'L', width / 2, -height * 3 / 8 ], 41 | // 横线 42 | [ 'L', width / 2, -height * 3 / 8 ], 43 | [ 'L', -width * 3 / 8, -height * 3 / 8 ], 44 | // 竖线 45 | [ 'L', -width * 3 / 8, height / 2 ], 46 | // 左下拐 47 | [ 'L', -width / 2, height * 3 / 8 ], 48 | // 左上 49 | [ 'L', -width / 2, -height / 2 ], 50 | // 斜线 51 | [ 'L', -width * 3 / 8, -height * 3 / 8 ] 52 | ] 53 | const color = cfg.color 54 | const style = G6Util.mix({}, { 55 | // 节点的位置在上层确定，所以这里仅使用相对位置即可 56 | x, 57 | y, 58 | width, 59 | height, 60 | path, 61 | stroke: color 62 | }, cfg.style) 63 | return style 64 | } 65 | } 66 | } 67 | -------------------------------------------------------------------------------- /src/global/g6/node/general/cylinder.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by OXOYO on 2019/9/3. 3 | * 4 | * 圆筒 5 | */ 6 | 7 | import * as G6Util from '@antv/util' 8 | import base from '../base' 9 | 10 | export default { 11 | name: 'cylinder', 12 | extendName: 'single-node', 13 | options: { 14 | ...base, 15 | shapeType: 'path', 16 | getShapeStyle (cfg) { 17 | const size = this.getSize(cfg) 18 | const width = size[0] 19 | const height = size[1] 20 | const x = 0 - width / 2 21 | const y = 0 - height / 2 22 | const path = [ 23 | // 左上 24 | [ 'M', -width / 2, -height / 4 ], 25 | // 上弧 左->右 26 | [ 'C', -width / 2, -height * 5 / 12, width / 2, -height * 5 / 12, width / 2, -height / 4 ], 27 | // 右下 28 | [ 'L', width / 2, height / 4 ], 29 | // 下弧 右->左 30 | [ 'C', width / 2, height * 5 / 12, -width / 2, height * 5 / 12, -width / 2, height / 4 ], 31 | // 左上 32 | [ 'L', -width / 2, -height / 4 ], 33 | // 上弧 左->右 34 | [ 'C', -width / 2, -height * 5 / 12, width / 2, -height * 5 / 12, width / 2, -height / 4 ], 35 | // 中弧 右->左 36 | [ 'C', width / 2, -height * 1 / 12, -width / 2, -height * 1 / 12, -width / 2, -height / 4 ] 37 | ] 38 | const color = cfg.color 39 | const style = G6Util.mix({}, { 40 | // 节点的位置在上层确定，所以这里仅使用相对位置即可 41 | x, 42 | y, 43 | width, 44 | height, 45 | path, 46 | stroke: color 47 | }, cfg.style) 48 | return style 49 | } 50 | } 51 | } 52 | -------------------------------------------------------------------------------- /src/global/g6/node/general/data-storage.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by OXOYO on 2019/9/3. 3 | * 4 | * 数据存储 5 | */ 6 | 7 | import * as G6Util from '@antv/util' 8 | import base from '../base' 9 | 10 | export default { 11 | name: 'data-storage', 12 | extendName: 'single-node', 13 | options: { 14 | ...base, 15 | shapeType: 'path', 16 | getShapeStyle (cfg) { 17 | const size = this.getSize(cfg) 18 | const width = size[0] 19 | const height = size[1] 20 | const x = 0 - width / 2 21 | const y = 0 - height / 2 22 | const path = [ 23 | // 左上 24 | [ 'M', -width / 4, -height / 2 ], 25 | // 右上 26 | [ 'L', width / 2, -height / 2 ], 27 | // 右弧 28 | [ 'C', width * 0.3, 0, width * 0.3, 0, width / 2, height / 2 ], 29 | // 左下 30 | [ 'L', -width / 4, height / 2 ], 31 | // 左弧 32 | [ 'C', -width * 0.45, 0, -width * 0.45, 0, -width / 4, -height / 2 ] 33 | ] 34 | const color = cfg.color 35 | const style = G6Util.mix({}, { 36 | // 节点的位置在上层确定，所以这里仅使用相对位置即可 37 | x, 38 | y, 39 | width, 40 | height, 41 | path, 42 | stroke: color 43 | }, cfg.style) 44 | return style 45 | } 46 | } 47 | } 48 | -------------------------------------------------------------------------------- /src/global/g6/node/general/diamond.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by OXOYO on 2019/9/3. 3 | * 4 | * 菱形 5 | */ 6 | 7 | import * as G6Util from '@antv/util' 8 | import base from '../base' 9 | 10 | export default { 11 | name: 'diamond', 12 | extendName: 'single-node', 13 | options: { 14 | ...base, 15 | /* 16 | // 方式一：使用G Polygon实现 17 | shapeType: 'polygon', 18 | getShapeStyle (cfg) { 19 | const size = this.getSize(cfg) 20 | const width = size[0] 21 | const height = size[1] 22 | const x = 0 - width / 2 23 | const y = 0 - height / 2 24 | const points = [ 25 | [-width / 2, 0], 26 | [0, -height / 2], 27 | [width / 2, 0], 28 | [0, height / 2] 29 | ] 30 | const color = cfg.color 31 | const style = G6Util.mix({}, { 32 | // 节点的位置在上层确定，所以这里仅使用相对位置即可 33 | x, 34 | y, 35 | width, 36 | height, 37 | points, 38 | stroke: color 39 | }, cfg.style) 40 | return style 41 | } 42 | */ 43 | // 方式二：使用G Path实现 44 | shapeType: 'path', 45 | getShapeStyle (cfg) { 46 | const size = this.getSize(cfg) 47 | const width = size[0] 48 | const height = size[1] 49 | const x = 0 - width / 2 50 | const y = 0 - height / 2 51 | const path = [ 52 | // FIXME (0,0)点在图形正中心，x坐标向右增，y坐标向下增 53 | // 左顶点 54 | [ 'M', -width / 2, 0 ], 55 | // 上顶点 56 | [ 'L', 0, -height / 2 ], 57 | // 右顶点 58 | [ 'L', width / 2, 0 ], 59 | // 下顶点 60 | [ 'L', 0, height / 2 ], 61 | [ 'Z' ] 62 | ] 63 | const color = cfg.color 64 | const style = G6Util.mix({}, { 65 | // 节点的位置在上层确定，所以这里仅使用相对位置即可 66 | x, 67 | y, 68 | width, 69 | height, 70 | path, 71 | stroke: color 72 | }, cfg.style) 73 | return style 74 | } 75 | } 76 | } 77 | -------------------------------------------------------------------------------- /src/global/g6/node/general/document.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by OXOYO on 2019/9/3. 3 | * 4 | * 文档 5 | */ 6 | 7 | import * as G6Util from '@antv/util' 8 | import base from '../base' 9 | 10 | export default { 11 | name: 'document', 12 | extendName: 'single-node', 13 | options: { 14 | ...base, 15 | shapeType: 'path', 16 | getShapeStyle (cfg) { 17 | const size = this.getSize(cfg) 18 | const width = size[0] 19 | const height = size[1] 20 | const x = 0 - width / 2 21 | const y = 0 - height / 2 22 | const path = [ 23 | // 左上 24 | [ 'M', -width / 2, -height / 2 ], 25 | // 右上 26 | [ 'L', width / 2, -height / 2 ], 27 | // 右下 28 | [ 'L', width / 2, height / 4 ], 29 | // 弧 30 | [ 'C', width / 4, -height / 8, -width / 4, height * 5 / 8, -width / 2, height / 4 ], 31 | [ 'Z' ] 32 | ] 33 | const color = cfg.color 34 | const style = G6Util.mix({}, { 35 | // 节点的位置在上层确定，所以这里仅使用相对位置即可 36 | x, 37 | y, 38 | width, 39 | height, 40 | path, 41 | stroke: color 42 | }, cfg.style) 43 | return style 44 | } 45 | } 46 | } 47 | -------------------------------------------------------------------------------- /src/global/g6/node/general/ellipse.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by OXOYO on 2019/7/8. 3 | * 4 | * 椭圆 5 | */ 6 | 7 | import * as G6Util from '@antv/util' 8 | import base from '../base' 9 | 10 | export default { 11 | name: 'ellipse', 12 | extendName: 'single-node', 13 | options: { 14 | ...base, 15 | shapeType: 'path', 16 | getShapeStyle (cfg) { 17 | const size = this.getSize(cfg) 18 | const width = size[0] 19 | const height = size[1] 20 | const x = 0 - width / 2 21 | const y = 0 - height / 2 22 | 23 | const path = [ 24 | // 左顶点 25 | [ 'M', -width / 2, 0 ], 26 | // 上弧 27 | [ 'A', width / 2, height / 2, 0, 1, 1, width / 2, 0 ], 28 | // 下弧 29 | [ 'A', width / 2, height / 2, 0, 1, 1, -width / 2, 0 ] 30 | ] 31 | const color = cfg.color 32 | const style = G6Util.mix({}, { 33 | // 节点的位置在上层确定，所以这里仅使用相对位置即可 34 | x, 35 | y, 36 | width, 37 | height, 38 | path, 39 | stroke: color 40 | }, cfg.style) 41 | return style 42 | } 43 | } 44 | } 45 | -------------------------------------------------------------------------------- /src/global/g6/node/general/hexagon.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by OXOYO on 2019/9/3. 3 | * 4 | * 六边形 5 | */ 6 | 7 | import * as G6Util from '@antv/util' 8 | import base from '../base' 9 | 10 | export default { 11 | name: 'hexagon', 12 | extendName: 'single-node', 13 | options: { 14 | ...base, 15 | shapeType: 'path', 16 | getShapeStyle (cfg) { 17 | const size = this.getSize(cfg) 18 | const width = size[0] 19 | const height = size[1] 20 | const x = 0 - width / 2 21 | const y = 0 - height / 2 22 | const path = [ 23 | // 左顶点 24 | [ 'M', -width / 2, 0 ], 25 | // 左上 26 | [ 'L', -width / 4, -height / 2 ], 27 | // 右上 28 | [ 'L', width / 4, -height / 2 ], 29 | // 右顶点 30 | [ 'L', width / 2, 0 ], 31 | // 右下 32 | [ 'L', width / 4, height / 2 ], 33 | // 左下 34 | [ 'L', -width / 4, height / 2 ], 35 | [ 'Z' ] 36 | ] 37 | const color = cfg.color 38 | const style = G6Util.mix({}, { 39 | // 节点的位置在上层确定，所以这里仅使用相对位置即可 40 | x, 41 | y, 42 | width, 43 | height, 44 | path, 45 | stroke: color 46 | }, cfg.style) 47 | return style 48 | } 49 | } 50 | } 51 | -------------------------------------------------------------------------------- /src/global/g6/node/general/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by OXOYO on 2019/7/4. 3 | * 4 | * 一般节点 5 | */ 6 | 7 | import rectangle from './rectangle' 8 | import roundedRectangle from './rounded-rectangle' 9 | import text from './text' 10 | import textbox from './textbox' 11 | import ellipse from './ellipse' 12 | import square from './square' 13 | import circle from './circle' 14 | import process from './process' 15 | import diamond from './diamond' 16 | import parallelogram from './parallelogram' 17 | import hexagon from './hexagon' 18 | import triangle from './triangle' 19 | import cylinder from './cylinder' 20 | import cloud from './cloud' 21 | import document from './document' 22 | import internalStorage from './internal-storage' 23 | import cube from './cube' 24 | import step from './step' 25 | import trapezoid from './trapezoid' 26 | import tape from './tape' 27 | import note from './note' 28 | import card from './card' 29 | import callout from './callout' 30 | import actor from './actor' 31 | import or from './or' 32 | import and from './and' 33 | import dataStorage from './data-storage' 34 | import bidirectionalArrow from './bidirectional-arrow' 35 | import arrow from './arrow' 36 | 37 | export default { 38 | rectangle, 39 | roundedRectangle, 40 | text, 41 | textbox, 42 | ellipse, 43 | square, 44 | circle, 45 | process, 46 | diamond, 47 | parallelogram, 48 | hexagon, 49 | triangle, 50 | cylinder, 51 | cloud, 52 | document, 53 | internalStorage, 54 | cube, 55 | step, 56 | trapezoid, 57 | tape, 58 | note, 59 | card, 60 | callout, 61 | actor, 62 | or, 63 | and, 64 | dataStorage, 65 | bidirectionalArrow, 66 | arrow 67 | } 68 | -------------------------------------------------------------------------------- /src/global/g6/node/general/internal-storage.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by OXOYO on 2019/9/5. 3 | * 4 | * 内部存储器 5 | */ 6 | 7 | import * as G6Util from '@antv/util' 8 | import base from '../base' 9 | 10 | export default { 11 | name: 'internal-storage', 12 | extendName: 'single-node', 13 | options: { 14 | ...base, 15 | shapeType: 'path', 16 | getShapeStyle (cfg) { 17 | const size = this.getSize(cfg) 18 | const width = size[0] 19 | const height = size[1] 20 | const x = 0 - width / 2 21 | const y = 0 - height / 2 22 | const path = [ 23 | // 左上 24 | [ 'M', -width / 2, -height / 2 ], 25 | // 右上 26 | [ 'L', width / 2, -height / 2 ], 27 | // 右下 28 | [ 'L', width / 2, height / 2 ], 29 | // 左下 30 | [ 'L', -width / 2, height / 2 ], 31 | // 左上 32 | [ 'L', -width / 2, -height / 2 ], 33 | // 竖线 34 | [ 'L', -width / 4, -height / 2 ], 35 | [ 'L', -width / 4, height / 2 ], 36 | // 左下 37 | [ 'L', -width / 2, height / 2 ], 38 | // 左上 39 | [ 'L', -width / 2, -height / 2 ], 40 | // 右上 41 | [ 'L', width / 2, -height / 2 ], 42 | // 横线 43 | [ 'L', width / 2, -height / 4 ], 44 | [ 'L', -width / 2, -height / 4 ] 45 | ] 46 | const color = cfg.color 47 | const style = G6Util.mix({}, { 48 | // 节点的位置在上层确定，所以这里仅使用相对位置即可 49 | x, 50 | y, 51 | width, 52 | height, 53 | path, 54 | stroke: color 55 | }, cfg.style) 56 | return style 57 | } 58 | } 59 | } 60 | -------------------------------------------------------------------------------- /src/global/g6/node/general/note.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by OXOYO on 2019/9/3. 3 | * 4 | * 笔记 5 | */ 6 | 7 | import * as G6Util from '@antv/util' 8 | import base from '../base' 9 | 10 | export default { 11 | name: 'note', 12 | extendName: 'single-node', 13 | options: { 14 | ...base, 15 | shapeType: 'path', 16 | getShapeStyle (cfg) { 17 | const size = this.getSize(cfg) 18 | const width = size[0] 19 | const height = size[1] 20 | const x = 0 - width / 2 21 | const y = 0 - height / 2 22 | const path = [ 23 | // 左上 24 | [ 'M', -width / 2, -height / 2 ], 25 | // 左上角 26 | [ 'L', width / 4, -height / 2 ], 27 | [ 'L', width / 2, -height / 4 ], 28 | [ 'L', width / 4, -height / 4 ], 29 | [ 'L', width / 4, -height / 2 ], 30 | [ 'L', width / 2, -height / 4 ], 31 | // 右下 32 | [ 'L', width / 2, height / 2 ], 33 | // 左下 34 | [ 'L', -width / 2, height / 2 ], 35 | [ 'Z' ] 36 | ] 37 | const color = cfg.color 38 | const style = G6Util.mix({}, { 39 | // 节点的位置在上层确定，所以这里仅使用相对位置即可 40 | x, 41 | y, 42 | width, 43 | height, 44 | path, 45 | stroke: color 46 | }, cfg.style) 47 | return style 48 | } 49 | } 50 | } 51 | -------------------------------------------------------------------------------- /src/global/g6/node/general/or.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by OXOYO on 2019/9/3. 3 | * 4 | * 或 5 | */ 6 | 7 | import * as G6Util from '@antv/util' 8 | import base from '../base' 9 | 10 | export default { 11 | name: 'or', 12 | extendName: 'single-node', 13 | options: { 14 | ...base, 15 | shapeType: 'path', 16 | getShapeStyle (cfg) { 17 | const size = this.getSize(cfg) 18 | const width = size[0] 19 | const height = size[1] 20 | const x = 0 - width / 2 21 | const y = 0 - height / 2 22 | const path = [ 23 | // 左上 24 | [ 'M', -width / 2, -height / 2 ], 25 | // 右弧 26 | [ 'C', width / 2, -height * 3 / 5, width / 2, height * 3 / 5, -width / 2, height / 2 ], 27 | // 左弧 28 | [ 'C', -width / 4, 0, -width / 4, 0, -width / 2, -height / 2 ] 29 | ] 30 | const color = cfg.color 31 | const style = G6Util.mix({}, { 32 | // 节点的位置在上层确定，所以这里仅使用相对位置即可 33 | x, 34 | y, 35 | width, 36 | height, 37 | path, 38 | stroke: color 39 | }, cfg.style) 40 | return style 41 | } 42 | } 43 | } 44 | -------------------------------------------------------------------------------- /src/global/g6/node/general/parallelogram.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by OXOYO on 2019/9/3. 3 | * 4 | * 平行四边形 5 | */ 6 | 7 | import * as G6Util from '@antv/util' 8 | import base from '../base' 9 | 10 | export default { 11 | name: 'parallelogram', 12 | extendName: 'single-node', 13 | options: { 14 | ...base, 15 | shapeType: 'path', 16 | getShapeStyle (cfg) { 17 | const size = this.getSize(cfg) 18 | const width = size[0] 19 | const height = size[1] 20 | const x = 0 - width / 2 21 | const y = 0 - height / 2 22 | const path = [ 23 | // 左下 24 | [ 'M', -width / 2, height / 2 ], 25 | // 左上 26 | [ 'L', -width / 4, -height / 2 ], 27 | // 右上 28 | [ 'L', width / 2, -height / 2 ], 29 | // 右下 30 | [ 'L', width / 4, height / 2 ], 31 | [ 'Z' ] 32 | ] 33 | const color = cfg.color 34 | const style = G6Util.mix({}, { 35 | // 节点的位置在上层确定，所以这里仅使用相对位置即可 36 | x, 37 | y, 38 | width, 39 | height, 40 | path, 41 | stroke: color 42 | }, cfg.style) 43 | return style 44 | } 45 | } 46 | } 47 | -------------------------------------------------------------------------------- /src/global/g6/node/general/process.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by OXOYO on 2019/9/3. 3 | * 4 | * 处理 5 | */ 6 | 7 | import * as G6Util from '@antv/util' 8 | import base from '../base' 9 | 10 | export default { 11 | name: 'process', 12 | extendName: 'single-node', 13 | options: { 14 | ...base, 15 | shapeType: 'path', 16 | getShapeStyle (cfg) { 17 | const size = this.getSize(cfg) 18 | const width = size[0] 19 | const height = size[1] 20 | const x = 0 - width / 2 21 | const y = 0 - height / 2 22 | const path = [ 23 | // 左上 24 | [ 'M', -width / 2, -height / 2 ], 25 | // 右上 26 | [ 'L', width / 2, -height / 2 ], 27 | // 右下 28 | [ 'L', width / 2, height / 2 ], 29 | // 右竖线 30 | [ 'L', width * 3 / 8, height / 2 ], 31 | [ 'L', width * 3 / 8, -height / 2 ], 32 | [ 'L', width / 2, -height / 2 ], 33 | [ 'L', width / 2, height / 2 ], 34 | // 左下 35 | [ 'L', -width / 2, height / 2 ], 36 | // 左上 37 | [ 'L', -width / 2, -height / 2 ], 38 | // 左竖线 39 | [ 'L', -width * 3 / 8, -height / 2 ], 40 | [ 'L', -width * 3 / 8, height / 2 ], 41 | [ 'L', -width / 2, height / 2 ], 42 | [ 'L', -width / 2, -height / 2 ] 43 | ] 44 | const color = cfg.color 45 | const style = G6Util.mix({}, { 46 | // 节点的位置在上层确定，所以这里仅使用相对位置即可 47 | x, 48 | y, 49 | width, 50 | height, 51 | path, 52 | stroke: color 53 | }, cfg.style) 54 | return style 55 | } 56 | } 57 | } 58 | -------------------------------------------------------------------------------- /src/global/g6/node/general/rectangle.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by OXOYO on 2019/7/8. 3 | * 4 | * 矩形 5 | */ 6 | 7 | import * as G6Util from '@antv/util' 8 | import base from '../base' 9 | 10 | export default { 11 | name: 'rectangle', 12 | extendName: 'single-node', 13 | options: { 14 | ...base, 15 | shapeType: 'path', 16 | getShapeStyle (cfg) { 17 | const size = this.getSize(cfg) 18 | const width = size[0] 19 | const height = size[1] 20 | const x = 0 - width / 2 21 | const y = 0 - height / 2 22 | const path = [ 23 | // 左顶点 24 | [ 'M', -width / 2, 0 ], 25 | // 左上顶点 26 | [ 'L', -width / 2, -height / 2 ], 27 | // 右上顶点 28 | [ 'L', width / 2, -height / 2 ], 29 | // 右下顶点 30 | [ 'L', width / 2, height / 2 ], 31 | // 左下顶点 32 | [ 'L', -width / 2, height / 2 ], 33 | [ 'Z' ] 34 | ] 35 | const color = cfg.color 36 | const style = G6Util.mix({}, { 37 | // 节点的位置在上层确定，所以这里仅使用相对位置即可 38 | x, 39 | y, 40 | width, 41 | height, 42 | path, 43 | stroke: color 44 | }, cfg.style) 45 | return style 46 | } 47 | } 48 | } 49 | -------------------------------------------------------------------------------- /src/global/g6/node/general/rounded-rectangle.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by OXOYO on 2019/9/3. 3 | * 4 | * 圆角矩形 5 | */ 6 | 7 | import * as G6Util from '@antv/util' 8 | import base from '../base' 9 | 10 | export default { 11 | name: 'rounded-rectangle', 12 | extendName: 'single-node', 13 | options: { 14 | ...base, 15 | shapeType: 'path', 16 | getShapeStyle (cfg) { 17 | const size = this.getSize(cfg) 18 | const width = size[0] 19 | const height = size[1] 20 | const x = 0 - width / 2 21 | const y = 0 - height / 2 22 | const r = 5 23 | const path = [ 24 | // 左顶点 25 | [ 'M', -width / 2, 0 ], 26 | // 左上顶点 27 | [ 'L', -width / 2, -height / 2 + r ], 28 | // 左上弧 29 | [ 'Q', -width / 2, -height / 2, -width / 2 + r, -height / 2 ], 30 | // 右上顶点 31 | [ 'L', width / 2 - r, -height / 2 ], 32 | // 右上弧 33 | [ 'Q', width / 2, -height / 2, width / 2, -height / 2 + r ], 34 | // 右下顶点 35 | [ 'L', width / 2, height / 2 - r ], 36 | // 右下弧 37 | [ 'Q', width / 2, height / 2, width / 2 - r, height / 2 ], 38 | // 左下顶点 39 | [ 'L', -width / 2 + r, height / 2 ], 40 | // 左下弧 41 | [ 'Q', -width / 2, height / 2, -width / 2, height / 2 - r ], 42 | [ 'Z' ] 43 | ] 44 | const color = cfg.color 45 | const style = G6Util.mix({}, { 46 | // 节点的位置在上层确定，所以这里仅使用相对位置即可 47 | x, 48 | y, 49 | width, 50 | height, 51 | path, 52 | stroke: color 53 | }, cfg.style) 54 | return style 55 | } 56 | } 57 | } 58 | -------------------------------------------------------------------------------- /src/global/g6/node/general/square.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by OXOYO on 2019/7/8. 3 | * 4 | * 正方形 5 | */ 6 | 7 | import * as G6Util from '@antv/util' 8 | import base from '../base' 9 | 10 | export default { 11 | name: 'square', 12 | extendName: 'single-node', 13 | options: { 14 | ...base, 15 | shapeType: 'path', 16 | getShapeStyle (cfg) { 17 | const size = this.getSize(cfg) 18 | const width = size[0] 19 | const height = size[1] 20 | const x = 0 - width / 2 21 | const y = 0 - height / 2 22 | const path = [ 23 | // 左上顶点 24 | [ 'M', -width / 2, -height / 2 ], 25 | // 右上顶点 26 | [ 'L', width / 2, -height / 2 ], 27 | // 右下顶点 28 | [ 'L', width / 2, height / 2 ], 29 | // 左下顶点 30 | [ 'L', -width / 2, height / 2 ], 31 | [ 'Z' ] 32 | ] 33 | const color = cfg.color 34 | const style = G6Util.mix({}, { 35 | // 节点的位置在上层确定，所以这里仅使用相对位置即可 36 | x, 37 | y, 38 | width, 39 | height, 40 | path, 41 | stroke: color 42 | }, cfg.style) 43 | return style 44 | } 45 | } 46 | } 47 | -------------------------------------------------------------------------------- /src/global/g6/node/general/step.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by OXOYO on 2019/9/5. 3 | * 4 | * 步骤 5 | */ 6 | 7 | import * as G6Util from '@antv/util' 8 | import base from '../base' 9 | 10 | export default { 11 | name: 'step', 12 | extendName: 'single-node', 13 | options: { 14 | ...base, 15 | shapeType: 'path', 16 | getShapeStyle (cfg) { 17 | const size = this.getSize(cfg) 18 | const width = size[0] 19 | const height = size[1] 20 | const x = 0 - width / 2 21 | const y = 0 - height / 2 22 | const path = [ 23 | // 左上 24 | [ 'M', -width / 2, -height / 2 ], 25 | // 右上 26 | [ 'L', width * 3 / 8, -height / 2 ], 27 | // 右顶点 28 | [ 'L', width / 2, 0 ], 29 | // 右下 30 | [ 'L', width * 3 / 8, height / 2 ], 31 | // 左下 32 | [ 'L', -width / 2, height / 2 ], 33 | // 左顶点 34 | [ 'L', -width * 3 / 8, 0 ], 35 | [ 'Z' ] 36 | ] 37 | const color = cfg.color 38 | const style = G6Util.mix({}, { 39 | // 节点的位置在上层确定，所以这里仅使用相对位置即可 40 | x, 41 | y, 42 | width, 43 | height, 44 | path, 45 | stroke: color 46 | }, cfg.style) 47 | return style 48 | } 49 | } 50 | } 51 | -------------------------------------------------------------------------------- /src/global/g6/node/general/tape.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by OXOYO on 2019/9/3. 3 | * 4 | * 条带 5 | */ 6 | 7 | import * as G6Util from '@antv/util' 8 | import base from '../base' 9 | 10 | export default { 11 | name: 'tape', 12 | extendName: 'single-node', 13 | options: { 14 | ...base, 15 | shapeType: 'path', 16 | getShapeStyle (cfg) { 17 | const size = this.getSize(cfg) 18 | const width = size[0] 19 | const height = size[1] 20 | const x = 0 - width / 2 21 | const y = 0 - height / 2 22 | const path = [ 23 | // 左上 24 | [ 'M', -width / 2, -height / 4 ], 25 | // 上弧 26 | [ 'C', -width / 4, height * 1 / 8, width / 4, -height * 5 / 8, width / 2, -height / 4 ], 27 | // 右下 28 | [ 'L', width / 2, height / 4 ], 29 | // 弧 30 | [ 'C', width / 4, -height / 8, -width / 4, height * 5 / 8, -width / 2, height / 4 ], 31 | [ 'Z' ] 32 | ] 33 | const color = cfg.color 34 | const style = G6Util.mix({}, { 35 | // 节点的位置在上层确定，所以这里仅使用相对位置即可 36 | x, 37 | y, 38 | width, 39 | height, 40 | path, 41 | stroke: color 42 | }, cfg.style) 43 | return style 44 | } 45 | } 46 | } 47 | -------------------------------------------------------------------------------- /src/global/g6/node/general/text.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by OXOYO on 2019/7/8. 3 | * 4 | * 文本 5 | */ 6 | 7 | import * as G6Util from '@antv/util' 8 | import base from '../base' 9 | 10 | export default { 11 | name: 'text', 12 | extendName: 'single-node', 13 | options: { 14 | ...base, 15 | shapeType: 'path', 16 | getShapeStyle (cfg) { 17 | const size = this.getSize(cfg) 18 | const width = size[0] 19 | const height = size[1] 20 | const x = 0 - width / 2 21 | const y = 0 - height / 2 22 | const path = [ 23 | // 左顶点 24 | [ 'M', -width / 2, 0 ], 25 | // 左上顶点 26 | [ 'L', -width / 2, -height / 2 ], 27 | // 右上顶点 28 | [ 'L', width / 2, -height / 2 ], 29 | // 右下顶点 30 | [ 'L', width / 2, height / 2 ], 31 | // 左下顶点 32 | [ 'L', -width / 2, height / 2 ], 33 | [ 'Z' ] 34 | ] 35 | const color = cfg.color 36 | const style = G6Util.mix({}, { 37 | // 节点的位置在上层确定，所以这里仅使用相对位置即可 38 | x, 39 | y, 40 | width, 41 | height, 42 | path, 43 | stroke: color 44 | }, cfg.style) 45 | return style 46 | } 47 | } 48 | } 49 | -------------------------------------------------------------------------------- /src/global/g6/node/general/textbox.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by OXOYO on 2019/7/8. 3 | * 4 | * 文本框 5 | */ 6 | 7 | // import * as G6Util from '@antv/util' 8 | // import base from '../base' 9 | 10 | export default { 11 | name: 'textbox', 12 | extendName: 'single-node', 13 | options: { 14 | // ...base, 15 | draw (cfg, group) { 16 | const shape = group.addShape('dom', { 17 | name: 'dom', 18 | attrs: { 19 | width: cfg.size[0], 20 | height: cfg.size[1], 21 | html: ` 22 |
23 |
24 | 25 |
26 | ${cfg.label} 27 |
28 | ` 29 | }, 30 | draggable: true 31 | }) 32 | return shape 33 | } 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /src/global/g6/node/general/trapezoid.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by OXOYO on 2019/9/5. 3 | * 4 | * 梯形 5 | */ 6 | 7 | import * as G6Util from '@antv/util' 8 | import base from '../base' 9 | 10 | export default { 11 | name: 'trapezoid', 12 | extendName: 'single-node', 13 | options: { 14 | ...base, 15 | shapeType: 'path', 16 | getShapeStyle (cfg) { 17 | const size = this.getSize(cfg) 18 | const width = size[0] 19 | const height = size[1] 20 | const x = 0 - width / 2 21 | const y = 0 - height / 2 22 | const path = [ 23 | // 左上 24 | [ 'M', -width / 4, -height / 2 ], 25 | // 右上 26 | [ 'L', width / 4, -height / 2 ], 27 | // 右下 28 | [ 'L', width / 2, height / 2 ], 29 | // 左下 30 | [ 'L', -width / 2, height / 2 ], 31 | [ 'Z' ] 32 | ] 33 | const color = cfg.color 34 | const style = G6Util.mix({}, { 35 | // 节点的位置在上层确定，所以这里仅使用相对位置即可 36 | x, 37 | y, 38 | width, 39 | height, 40 | path, 41 | stroke: color 42 | }, cfg.style) 43 | return style 44 | } 45 | } 46 | } 47 | -------------------------------------------------------------------------------- /src/global/g6/node/general/triangle.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by OXOYO on 2019/9/3. 3 | * 4 | * 三角形 5 | */ 6 | 7 | import * as G6Util from '@antv/util' 8 | import base from '../base' 9 | 10 | export default { 11 | name: 'triangle', 12 | extendName: 'single-node', 13 | options: { 14 | ...base, 15 | shapeType: 'path', 16 | getShapeStyle (cfg) { 17 | const size = this.getSize(cfg) 18 | const width = size[0] 19 | const height = size[1] 20 | const x = 0 - width / 2 21 | const y = 0 - height / 2 22 | const path = [ 23 | // 左上 24 | [ 'M', -width / 2, -height / 2 ], 25 | // 右顶点 26 | [ 'L', width / 2, 0 ], 27 | // 右下 28 | [ 'L', -width / 2, height / 2 ], 29 | [ 'Z' ] 30 | ] 31 | const color = cfg.color 32 | const style = G6Util.mix({}, { 33 | // 节点的位置在上层确定，所以这里仅使用相对位置即可 34 | x, 35 | y, 36 | width, 37 | height, 38 | path, 39 | stroke: color 40 | }, cfg.style) 41 | return style 42 | } 43 | } 44 | } 45 | -------------------------------------------------------------------------------- /src/global/g6/node/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by OXOYO on 2019/11/9. 3 | * 4 | * 注册自定义节点 5 | */ 6 | 7 | import general from './general' 8 | import arrow from './arrow' 9 | 10 | const obj = { 11 | ...general, 12 | ...arrow 13 | } 14 | 15 | export default function (G6) { 16 | Object.values(obj).forEach(item => { 17 | G6.registerNode(item.name, item.options, item.extendName) 18 | }) 19 | } 20 | -------------------------------------------------------------------------------- /src/global/g6/plugins/XBackground.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by OXOYO on 2019/11/12. 3 | * 4 | * 背景 5 | */ 6 | 7 | // import Base from '@antv/g6/plugins/base' 8 | import { Grid } from '@antv/g6' 9 | import * as G6DomUtil from '@antv/dom-util' 10 | 11 | export default class XBackground extends Grid { 12 | init () { 13 | const _t = this 14 | const graph = _t.get('graph') 15 | const graphContainer = graph.get('container') 16 | const canvas = graph.get('canvas').get('el') 17 | const backgroundContainer = G6DomUtil.createDom( 18 | '
' 19 | ) 20 | const imgDom = G6DomUtil.createDom( 21 | '' 22 | ) 23 | backgroundContainer.appendChild(imgDom) 24 | graphContainer.insertBefore(backgroundContainer, canvas) 25 | _t.set('container', backgroundContainer) 26 | _t.set('imgDom', imgDom) 27 | } 28 | getEvents () { 29 | return { 30 | 'background:reset': 'resetBackground', 31 | 'background:update': 'updateBackground' 32 | } 33 | } 34 | // 重置背景 35 | resetBackground (e) { 36 | const _t = this 37 | const imgDom = _t.get('imgDom') 38 | if (imgDom) { 39 | imgDom.src = '' 40 | G6DomUtil.modifyCSS(imgDom, { 41 | visibility: 'hidden' 42 | }) 43 | } 44 | } 45 | updateBackground (data) { 46 | const _t = this 47 | const imgDom = _t.get('imgDom') 48 | if (imgDom) { 49 | imgDom.src = data 50 | G6DomUtil.modifyCSS(imgDom, { 51 | visibility: 'visible' 52 | }) 53 | } 54 | } 55 | updateGrid () {} 56 | getContainer () { 57 | return this.get('container') 58 | } 59 | destroy () { 60 | const _t = this 61 | const graph = _t.get('graph') 62 | const graphContainer = graph.get('container') 63 | const backgroundContainer = _t.get('container') 64 | graphContainer.removeChild(backgroundContainer) 65 | } 66 | } 67 | -------------------------------------------------------------------------------- /src/global/g6/plugins/XGrid.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by OXOYO on 2019/10/16. 3 | * 4 | * 栅格 5 | * 6 | * 扩展G6自带Grid插件 7 | */ 8 | 9 | import { Grid } from '@antv/g6' 10 | import * as G6DomUtil from '@antv/dom-util' 11 | 12 | export default class XGrid extends Grid { 13 | updateGrid (e) { 14 | const gridContainer = this.get('gridContainer') 15 | const matrix = e.matrix 16 | // 矩阵变换 17 | const transform = 'matrix(' + matrix[0] + ',' + matrix[1] + ',' + matrix[3] + ',' + matrix[4] + ',' + matrix[6] + ',' + matrix[7] + ')' 18 | G6DomUtil.modifyCSS(gridContainer, { 19 | transform 20 | }) 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /src/global/g6/utils/anchor/draw.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by OXOYO on 2019/7/8. 3 | * 4 | * 绘制锚点 5 | */ 6 | 7 | import config from '../../config' 8 | 9 | export default function (cfg, group) { 10 | const { anchorPoints, width, height, id } = cfg 11 | const shape = group.getFirst() 12 | // console.log('getAnchorPoints', id, shape, anchorPoints.length) 13 | if (anchorPoints && anchorPoints.length) { 14 | for (let i = 0, len = anchorPoints.length; i < len; i++) { 15 | let anchorX 16 | let anchorY 17 | if (shape && shape.get('type') === 'path') { 18 | const point = shape.getPoint(i / len) 19 | anchorX = point.x 20 | anchorY = point.y 21 | } else { 22 | const [x, y] = anchorPoints[i] 23 | // 计算Marker中心点坐标 24 | const originX = -width / 2 25 | const originY = -height / 2 26 | anchorX = x * width + originX 27 | anchorY = y * height + originY 28 | } 29 | // 添加锚点背景 30 | const anchorBgShape = group.addShape('marker', { 31 | id: id + '_anchor_bg_' + i, 32 | name: 'anchorBg', 33 | attrs: { 34 | boxName: 'anchor', 35 | name: 'anchorBg', 36 | x: anchorX, 37 | y: anchorY, 38 | // 锚点默认样式 39 | ...config.anchorBg.style.default 40 | }, 41 | zIndex: 100 42 | }) 43 | // 添加锚点Marker形状 44 | const anchorShape = group.addShape('marker', { 45 | id: id + '_anchor_' + i, 46 | name: 'anchorPoint', 47 | attrs: { 48 | boxName: 'anchor', 49 | name: 'anchorPoint', 50 | x: anchorX, 51 | y: anchorY, 52 | // 锚点默认样式 53 | ...config.anchor.style.default 54 | } 55 | }) 56 | // FIXME 【调试用代码】添加锚点文本 57 | // group.addShape('text', { 58 | // id: id + '_anchor_text_' + i, 59 | // name: 'anchorText', 60 | // attrs: { 61 | // x: anchorX, 62 | // y: anchorY, 63 | // fontFamily: 'PingFang SC', 64 | // fontSize: 12, 65 | // text: anchorPoints[i].toString(), 66 | // lineDash: [10, 10], 67 | // fill: 'red' 68 | // } 69 | // }) 70 | if (anchorShape) { 71 | anchorShape.on('mouseenter', function () { 72 | anchorBgShape.attr({ 73 | ...config.anchorBg.style.active 74 | }) 75 | }) 76 | anchorShape.on('mouseleave', function () { 77 | anchorBgShape.attr({ 78 | ...config.anchorBg.style.inactive 79 | }) 80 | }) 81 | } 82 | } 83 | } 84 | } 85 | -------------------------------------------------------------------------------- /src/global/g6/utils/anchor/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by OXOYO on 2019/9/2. 3 | * 4 | * 锚点 5 | */ 6 | 7 | import draw from './draw' 8 | import setState from './setState' 9 | import update from './update' 10 | import rotate from './rotate' 11 | 12 | export default { 13 | draw, 14 | setState, 15 | update, 16 | rotate 17 | } 18 | -------------------------------------------------------------------------------- /src/global/g6/utils/anchor/rotate.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by OXOYO on 2019/9/10. 3 | * 4 | * 锚点旋转 5 | */ 6 | 7 | export default function (cfg, group, radian) { 8 | const { anchorPoints, id } = cfg 9 | // 处理锚点 10 | if (anchorPoints && anchorPoints.length) { 11 | for (let i = 0, len = anchorPoints.length; i < len; i++) { 12 | // 锚点背景 13 | const anchorBgShape = group.findById(id + '_anchor_bg_' + i) 14 | // 锚点 15 | const anchorShape = group.findById(id + '_anchor_' + i) 16 | if (anchorBgShape) { 17 | anchorBgShape.resetMatrix() 18 | anchorBgShape.rotate(radian) 19 | } 20 | if (anchorShape) { 21 | anchorShape.resetMatrix() 22 | anchorShape.rotate(radian) 23 | } 24 | } 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /src/global/g6/utils/anchor/setState.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by OXOYO on 2019/7/8. 3 | * 4 | * 设置锚点状态 5 | */ 6 | 7 | import config from '../../config' 8 | 9 | export default function (name, value, item) { 10 | if (name === 'hover') { 11 | const group = item.getContainer() 12 | const children = group.get('children') 13 | for (let i = 0, len = children.length; i < len; i++) { 14 | const child = children[i] 15 | // console.log('child name', child, child.name, child.attr('name')) 16 | if (child.attr('name')) { 17 | switch (child.attr('name')) { 18 | case 'anchorPoint': 19 | if (value) { 20 | child.show() 21 | child.attr(config.anchor.style.hover) 22 | } else { 23 | child.attr(config.anchor.style.unhover) 24 | child.hide() 25 | } 26 | break 27 | case 'shapeControlPoint': 28 | case 'shapeControlRotate': 29 | child.hide() 30 | break 31 | } 32 | } 33 | } 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /src/global/g6/utils/anchor/update.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by OXOYO on 2019/7/16. 3 | * 4 | * 更新锚点 5 | */ 6 | 7 | export default function (cfg, group) { 8 | const { anchorPoints, width, height, id } = cfg 9 | const shape = group.getFirst() 10 | if (anchorPoints && anchorPoints.length) { 11 | for (let i = 0, len = anchorPoints.length; i < len; i++) { 12 | let anchorX 13 | let anchorY 14 | if (shape && shape.get('type') === 'path') { 15 | const point = shape.getPoint(i / len) 16 | anchorX = point.x 17 | anchorY = point.y 18 | } else { 19 | const [x, y] = anchorPoints[i] 20 | // 计算Marker中心点坐标 21 | const originX = -width / 2 22 | const originY = -height / 2 23 | anchorX = x * width + originX 24 | anchorY = y * height + originY 25 | } 26 | // 锚点背景 27 | const anchorBgShape = group.findById(id + '_anchor_bg_' + i) 28 | // 锚点 29 | const anchorShape = group.findById(id + '_anchor_' + i) 30 | // 文本 31 | const anchorText = group.findById(id + '_anchor_text_' + i) 32 | anchorBgShape && anchorBgShape.attr({ 33 | x: anchorX, 34 | y: anchorY 35 | }) 36 | anchorShape && anchorShape.attr({ 37 | x: anchorX, 38 | y: anchorY 39 | }) 40 | anchorText && anchorText.attr({ 41 | x: anchorX, 42 | y: anchorY 43 | }) 44 | } 45 | } 46 | } 47 | -------------------------------------------------------------------------------- /src/global/g6/utils/common.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by OXOYO on 2020/5/13 3 | * 4 | * 通用工具 5 | */ 6 | 7 | // 节流 8 | const throttle = function (func, timeFrame) { 9 | let lastTime = 0 10 | return function () { 11 | const now = new Date() 12 | if (now - lastTime >= timeFrame) { 13 | func() 14 | lastTime = now 15 | } 16 | } 17 | } 18 | 19 | // 首字母转大写 20 | const firstUpperCase = ([first, ...rest]) => first.toUpperCase() + rest.join('') 21 | 22 | // 是否左键触发 23 | const isLeftKey = (event) => event.originalEvent.button === 0 24 | 25 | export default { 26 | throttle, 27 | firstUpperCase, 28 | isLeftKey 29 | } 30 | -------------------------------------------------------------------------------- /src/global/g6/utils/edge/destroyAnimate.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by OXOYO on 2019/7/24. 3 | * 4 | * 销毁边动画 5 | */ 6 | 7 | export default function (cfg, group) { 8 | const tmpArr = group.findAll(item => { 9 | return item._cfg && item._cfg.name === 'edgeAnimatePoint' 10 | }) 11 | tmpArr.forEach(item => { 12 | item.remove && item.remove() 13 | }) 14 | } 15 | -------------------------------------------------------------------------------- /src/global/g6/utils/edge/drawAnimate.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by OXOYO on 2019/7/11. 3 | * 4 | * 绘制边动画 5 | */ 6 | 7 | import config from '../../config' 8 | 9 | export default function (cfg, group) { 10 | const node = group.getFirst() 11 | const startPoint = node.getPoint(0) 12 | if (!startPoint) { 13 | return 14 | } 15 | const circleName = 'edgeAnimatePoint' 16 | // 查找已有圆点 17 | let circle = group.find(item => item.name === circleName) 18 | if (!circle) { 19 | // 添加红色圆点 20 | circle = group.addShape('circle', { 21 | id: cfg.id + '_edge_animate_point_', 22 | name: circleName, 23 | attrs: { 24 | x: startPoint.x, 25 | y: startPoint.y, 26 | ...config.edgeAnimate.style.default 27 | } 28 | }) 29 | } 30 | 31 | // 对红色圆点添加动画 32 | circle.animate(ratio => { 33 | const tmpPoint = node.getPoint(ratio) 34 | if (tmpPoint) { 35 | return { 36 | x: tmpPoint.x, 37 | y: tmpPoint.y 38 | } 39 | } 40 | }, { 41 | repeat: true, 42 | duration: config.edgeAnimate.duration 43 | }) 44 | } 45 | -------------------------------------------------------------------------------- /src/global/g6/utils/edge/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by OXOYO on 2019/9/2. 3 | * 4 | * 边 5 | */ 6 | 7 | import drawAnimate from './drawAnimate' 8 | import destroyAnimate from './destroyAnimate' 9 | import setState from './setState' 10 | import update from './update' 11 | import polylineFinding from './polylineFinding' 12 | 13 | export default { 14 | drawAnimate, 15 | destroyAnimate, 16 | setState, 17 | update, 18 | polylineFinding 19 | } 20 | -------------------------------------------------------------------------------- /src/global/g6/utils/edge/setState.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by OXOYO on 2019/7/16. 3 | * 4 | * 设置边状态 5 | */ 6 | 7 | import config from '../../config' 8 | // import drawAnimate from './drawAnimate' 9 | // import destroyAnimate from './destroyAnimate' 10 | 11 | export default function (name, value, item) { 12 | if (name === 'active') { 13 | const group = item.getContainer() 14 | const children = group.get('children') 15 | const edge = children[0] 16 | // 处理线条状态 17 | if (edge) { 18 | if (value) { 19 | edge.attr(config.edge.style.active) 20 | // 绘制边动画 21 | // drawAnimate(item.getModel(), item.getContainer()) 22 | } else { 23 | edge.attr(config.edge.style.inactive) 24 | // 销毁边动画 25 | // destroyAnimate(item.getModel(), item.getContainer()) 26 | } 27 | } 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /src/global/g6/utils/edge/update.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by OXOYO on 2019/7/19. 3 | * 4 | * 更新边 5 | */ 6 | 7 | export default function (node, graph) { 8 | const edges = graph.getEdges() 9 | if (!edges || !edges.length) { 10 | return 11 | } 12 | const { id } = node.getModel() 13 | // 锚点数据 14 | const anchorPoints = node.getAnchorPoints() 15 | // 遍历边 16 | edges.forEach(edge => { 17 | const edgeModel = edge.getModel() 18 | let anchorIndex 19 | let anchorPoint 20 | let model 21 | if (id === edgeModel.attrs.start) { 22 | anchorIndex = edgeModel.sourceAnchor 23 | anchorPoint = anchorPoints[anchorIndex] 24 | model = { 25 | source: anchorPoint 26 | } 27 | } else if (id === edgeModel.attrs.end) { 28 | anchorIndex = edgeModel.targetAnchor 29 | anchorPoint = anchorPoints[anchorIndex] 30 | model = { 31 | target: anchorPoint 32 | } 33 | } 34 | if (anchorPoint && model) { 35 | graph.updateItem(edge, model) 36 | } 37 | }) 38 | } 39 | -------------------------------------------------------------------------------- /src/global/g6/utils/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by OXOYO on 2019/7/8. 3 | * 4 | * 工具 5 | */ 6 | 7 | import node from './node' 8 | import edge from './edge' 9 | import anchor from './anchor' 10 | import shapeControl from './shapeControl' 11 | import common from './common' 12 | 13 | export default { 14 | node, 15 | edge, 16 | anchor, 17 | shapeControl, 18 | common 19 | } 20 | -------------------------------------------------------------------------------- /src/global/g6/utils/node/calculateArrow.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by OXOYO on 2019/11/9. 3 | * 4 | * 计算箭头 5 | */ 6 | 7 | export default function (options) { 8 | // FIXME 计算图示见： @/document/IMG_20191109_153609.jpg 9 | // 箭头角度80度 10 | const deg = options.deg || 80 11 | // 5度角 12 | const deg2 = 180 - deg / 2 - 90 - 45 13 | // 箭头长度 14 | const L1 = options.L1 || 30 15 | 16 | // 计算相关边 17 | const L2 = L1 * Math.tan(deg / 2 * Math.PI / 180) 18 | const L3 = Math.sqrt(L1 * L1 + L2 * L2) 19 | const L4 = L3 * Math.sin(deg2 * Math.PI / 180) 20 | const L5 = L3 * Math.cos(deg2 * Math.PI / 180) 21 | const L6 = Math.sqrt(L1 * L1 / 2) 22 | // 箭头中间宽度 23 | const L7 = options.L7 || 10 24 | const L8 = Math.sqrt(L7 * L7 / 2) 25 | // 图形左上顶点与右下顶点所围成的等腰直角三角形的直角边边长 26 | const L9 = Math.sqrt((2 * L7) * (2 * L7) / 2) 27 | 28 | return { 29 | deg, 30 | L1, 31 | L2, 32 | L3, 33 | L4, 34 | L5, 35 | L6, 36 | L7, 37 | L8, 38 | L9 39 | } 40 | } 41 | -------------------------------------------------------------------------------- /src/global/g6/utils/node/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by OXOYO on 2019/11/9. 3 | * 4 | * 节点 5 | */ 6 | 7 | import calculateArrow from './calculateArrow' 8 | 9 | export default { 10 | calculateArrow 11 | } 12 | -------------------------------------------------------------------------------- /src/global/g6/utils/shapeControl/draw.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by OXOYO on 2019/7/11. 3 | * 4 | * 绘制图形控制 5 | */ 6 | 7 | import config from '../../config' 8 | 9 | export default function (cfg, group) { 10 | const { id, width, height, shapeControl } = cfg 11 | // 处理边框 12 | group.addShape('path', { 13 | id: id + '_shape_control_edge', 14 | name: 'shapeControlEdge', 15 | attrs: { 16 | boxName: 'shapeControl', 17 | name: 'shapeControlEdge', 18 | x: 0 - width / 2, 19 | y: 0 - height / 2, 20 | width, 21 | height, 22 | path: [ 23 | [ 'M', -width / 2, -height / 2 ], 24 | [ 'L', width / 2, -height / 2 ], 25 | [ 'L', width / 2, height / 2 ], 26 | [ 'L', -width / 2, height / 2 ], 27 | [ 'Z' ] 28 | ], 29 | // 默认样式 30 | ...config.shapeControl.style.default.edge 31 | } 32 | }) 33 | // 处理控制点 34 | if (shapeControl && shapeControl.hasOwnProperty('controllers') && shapeControl.controllers.length) { 35 | for (let i = 0, len = shapeControl.controllers.length; i < len; i++) { 36 | const [x, y, cursor] = shapeControl.controllers[i] 37 | // 计算Marker中心点坐标 38 | const originX = -width / 2 39 | const originY = -height / 2 40 | const anchorX = x * width + originX 41 | const anchorY = y * height + originY 42 | // 添加Marker形状 43 | group.addShape('marker', { 44 | id: id + '_shape_control_point_' + i, 45 | name: 'shapeControlPoint', 46 | index: i, 47 | attrs: { 48 | boxName: 'shapeControl', 49 | name: 'shapeControlPoint', 50 | x: anchorX, 51 | y: anchorY, 52 | // 原始位置数据 53 | position: { 54 | x, 55 | y 56 | }, 57 | cursor: cursor || 'pointer', 58 | // 默认样式 59 | ...config.shapeControl.style.default.point 60 | } 61 | }) 62 | } 63 | } 64 | // 处理旋转 65 | if (shapeControl && shapeControl.hasOwnProperty('rotate') && shapeControl.rotate) { 66 | const rotateW = 20 67 | const rotateH = 20 68 | group.addShape('image', { 69 | id: id + '_shape_control_rotate', 70 | name: 'shapeControlRotate', 71 | attrs: { 72 | boxName: 'shapeControl', 73 | name: 'shapeControlRotate', 74 | x: -rotateW / 2, 75 | y: -height / 2 - 40, 76 | width: rotateW, 77 | height: rotateH, 78 | cursor: 'crosshair', 79 | img: require('@/assets/images/rotate.png'), 80 | // 默认样式 81 | ...config.shapeControl.style.default.rotate 82 | } 83 | }) 84 | } 85 | } 86 | -------------------------------------------------------------------------------- /src/global/g6/utils/shapeControl/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by OXOYO on 2019/9/2. 3 | * 4 | * 图形控制 5 | */ 6 | 7 | import draw from './draw' 8 | import setState from './setState' 9 | import update from './update' 10 | import rotate from './rotate' 11 | 12 | export default { 13 | draw, 14 | setState, 15 | update, 16 | rotate 17 | } 18 | -------------------------------------------------------------------------------- /src/global/g6/utils/shapeControl/rotate.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by OXOYO on 2019/9/9. 3 | * 4 | * 图形旋转 5 | */ 6 | 7 | export default function (cfg, group, radian) { 8 | const { id, shapeControl } = cfg 9 | // 处理边框 10 | const shapeControlEdge = group.findById(id + '_shape_control_edge') 11 | if (shapeControlEdge) { 12 | // FIXME g中shape的rotate是角度累加的，所以更新时如果style中有rotate就重置一下变换 13 | shapeControlEdge.resetMatrix() 14 | shapeControlEdge.rotate(radian) 15 | } 16 | // 处理控制点 17 | if (shapeControl && shapeControl.hasOwnProperty('controllers') && shapeControl.controllers.length) { 18 | for (let i = 0, len = shapeControl.controllers.length; i < len; i++) { 19 | const shapeControlPoint = group.findById(id + '_shape_control_point_' + i) 20 | if (shapeControlPoint) { 21 | shapeControlPoint.resetMatrix() 22 | shapeControlPoint.rotate(radian) 23 | } 24 | } 25 | } 26 | // 处理旋转 27 | if (shapeControl && shapeControl.hasOwnProperty('rotate') && shapeControl.rotate) { 28 | const shapeControlRotate = group.findById(id + '_shape_control_rotate') 29 | if (shapeControlRotate) { 30 | shapeControlRotate.resetMatrix() 31 | shapeControlRotate.rotate(radian) 32 | } 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /src/global/g6/utils/shapeControl/setState.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by OXOYO on 2019/7/8. 3 | * 4 | * 设置shapeControl激活 5 | */ 6 | 7 | import config from '../../config' 8 | 9 | export default function (name, value, item) { 10 | if (name === 'active') { 11 | const group = item.getContainer() 12 | const children = group.get('children') 13 | for (let i = 0, len = children.length; i < len; i++) { 14 | const child = children[i] 15 | if (child.attr('name')) { 16 | switch (child.attr('name')) { 17 | case 'shapeControlPoint': 18 | if (value) { 19 | child.show() 20 | child.attr(config.shapeControl.style.active.point) 21 | } else { 22 | child.attr(config.shapeControl.style.inactive.point) 23 | child.hide() 24 | } 25 | break 26 | case 'shapeControlEdge': 27 | if (value) { 28 | child.show() 29 | child.attr(config.shapeControl.style.active.edge) 30 | } else { 31 | child.attr(config.shapeControl.style.inactive.edge) 32 | child.hide() 33 | } 34 | break 35 | case 'shapeControlRotate': 36 | if (value) { 37 | child.show() 38 | child.attr(config.shapeControl.style.active.rotate) 39 | } else { 40 | child.attr(config.shapeControl.style.inactive.rotate) 41 | child.hide() 42 | } 43 | break 44 | case 'anchorPoint': 45 | child.hide() 46 | } 47 | } 48 | } 49 | } 50 | } 51 | -------------------------------------------------------------------------------- /src/global/g6/utils/shapeControl/update.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by OXOYO on 2019/7/16. 3 | * 4 | * 更新图形控制 5 | */ 6 | 7 | export default function (cfg, group) { 8 | const { id, width, height, shapeControl } = cfg 9 | // 处理边框 10 | const shapeControlEdge = group.findById(id + '_shape_control_edge') 11 | if (shapeControlEdge) { 12 | shapeControlEdge.attr({ 13 | x: 0 - width / 2, 14 | y: 0 - height / 2, 15 | width, 16 | height, 17 | path: [ 18 | [ 'M', -width / 2, -height / 2 ], 19 | [ 'L', width / 2, -height / 2 ], 20 | [ 'L', width / 2, height / 2 ], 21 | [ 'L', -width / 2, height / 2 ], 22 | [ 'Z' ] 23 | ] 24 | }) 25 | } 26 | // 处理控制点 27 | if (shapeControl && shapeControl.hasOwnProperty('controllers') && shapeControl.controllers.length) { 28 | for (let i = 0, len = shapeControl.controllers.length; i < len; i++) { 29 | const [x, y] = shapeControl.controllers[i] 30 | // 计算Marker中心点坐标 31 | const originX = -width / 2 32 | const originY = -height / 2 33 | const anchorX = x * width + originX 34 | const anchorY = y * height + originY 35 | const shapeControlPoint = group.findById(id + '_shape_control_point_' + i) 36 | if (shapeControlPoint) { 37 | shapeControlPoint.attr({ 38 | x: anchorX, 39 | y: anchorY 40 | }) 41 | } 42 | } 43 | } 44 | // 处理旋转 45 | if (shapeControl && shapeControl.hasOwnProperty('rotate') && shapeControl.rotate) { 46 | const shapeControlRotate = group.findById(id + '_shape_control_rotate') 47 | if (shapeControlRotate) { 48 | shapeControlRotate.attr({ 49 | y: -height / 2 - 40 50 | }) 51 | } 52 | } 53 | } 54 | -------------------------------------------------------------------------------- /src/global/utils/bus.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by OXOYO on 2019/5/18. 3 | * 4 | * 全局BUS 5 | */ 6 | 7 | import Vue from 'vue' 8 | 9 | const bus = new Vue() 10 | 11 | export default bus 12 | -------------------------------------------------------------------------------- /src/global/utils/filters.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by OXOYO on 2019/5/18. 3 | * 4 | * 过滤器 5 | */ 6 | 7 | export default { 8 | // 日期格式化 9 | formatDate: (date, fmt = 'YYYY-MM-DD hh:mm') => { 10 | if (!(date instanceof Date)) { 11 | date = new Date(date) 12 | } 13 | const padLeftZero = (str) => { 14 | return ('00' + str).substr(str.length) 15 | } 16 | const doFormatDate = (date, fmt) => { 17 | if (/(Y+)/.test(fmt)) { 18 | fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length)) 19 | } 20 | const obj = { 21 | 'M+': date.getMonth() + 1, 22 | 'D+': date.getDate(), 23 | 'h+': date.getHours(), 24 | 'm+': date.getMinutes(), 25 | 's+': date.getSeconds() 26 | } 27 | for (const k in obj) { 28 | if (new RegExp(`(${k})`).test(fmt)) { 29 | const str = obj[k] + '' 30 | fmt = fmt.replace(RegExp.$1, RegExp.$1.length === 1 ? str : padLeftZero(str)) 31 | } 32 | } 33 | return fmt 34 | } 35 | 36 | return doFormatDate(date, fmt) 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /src/global/utils/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by OXOYO on 2019/5/18. 3 | * 4 | * 项目工具 5 | */ 6 | 7 | import bus from './bus' 8 | import filters from './filters' 9 | import storage from './storage' 10 | 11 | export default { 12 | bus, 13 | filters, 14 | storage 15 | } 16 | -------------------------------------------------------------------------------- /src/global/utils/storage.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by OXOYO on 2020/6/29 3 | * 4 | * 本地存储 5 | */ 6 | 7 | const getKey = function (key, prefix, separator = '-') { 8 | return [prefix, key].join(separator) 9 | } 10 | export default { 11 | get (keys, prefix, separator) { 12 | if (!keys) { 13 | return 14 | } 15 | const handler = function (key) { 16 | const value = sessionStorage.getItem(key) 17 | if (!value) { 18 | return 19 | } 20 | const { type, data } = JSON.parse(value) 21 | let ret 22 | switch (type) { 23 | case 'string': 24 | case 'number': 25 | case 'boolean': 26 | ret = data 27 | break 28 | case 'object': 29 | ret = JSON.parse(data) 30 | break 31 | default: 32 | ret = data 33 | } 34 | return ret 35 | } 36 | if (Array.isArray(keys)) { 37 | const ret = {} 38 | keys.forEach(key => { 39 | key = getKey(key, prefix, separator) 40 | ret[key] = handler(key) 41 | }) 42 | return ret 43 | } else if (typeof keys === 'object') { 44 | const ret = {} 45 | Object.entries(keys).forEach(item => { 46 | let aliasKey = item[0] 47 | const key = item[1] 48 | aliasKey = getKey(aliasKey, prefix, separator) 49 | ret[aliasKey] = handler(key) 50 | }) 51 | return ret 52 | } else { 53 | return handler(getKey(keys, prefix, separator)) 54 | } 55 | }, 56 | set (key, data, prefix, separator) { 57 | if (!key) { 58 | return 59 | } 60 | key = getKey(key, prefix, separator) 61 | const type = typeof data 62 | let value 63 | switch (type) { 64 | case 'string': 65 | case 'number': 66 | case 'boolean': 67 | value = { 68 | type, 69 | data 70 | } 71 | break 72 | case 'object': 73 | value = { 74 | type, 75 | data: JSON.stringify(data) 76 | } 77 | break 78 | default: 79 | value = { 80 | type, 81 | data: data.hasOwnProperty('toString') && typeof data.toString === 'function' ? data.toString() : data + '' 82 | } 83 | } 84 | sessionStorage.setItem(key, JSON.stringify(value)) 85 | }, 86 | remove (key, prefix, separator) { 87 | key = getKey(key, prefix, separator) 88 | sessionStorage.removeItem(key) 89 | }, 90 | clear (prefix) { 91 | if (prefix) { 92 | Object.keys(sessionStorage).forEach(key => { 93 | if (key.startsWith(prefix)) { 94 | sessionStorage.removeItem(key) 95 | } 96 | }) 97 | } else { 98 | sessionStorage.clear() 99 | } 100 | } 101 | } 102 | -------------------------------------------------------------------------------- /src/i18n.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by OXOYO on 2019/5/29. 3 | * 4 | * 多语言 5 | */ 6 | import VueI18n from 'vue-i18n' 7 | import langs from './langs' 8 | import locale from 'iview/src/locale/index' 9 | 10 | export default function (Vue, config) { 11 | const $X = Vue.prototype.$X 12 | let defLocale 13 | let locales 14 | if (typeof locales === 'object' && locales instanceof Object) { 15 | defLocale = config.hasOwnProperty('defLocale') ? config.defLocale : null 16 | locales = config.hasOwnProperty('locales') ? config.locales : null 17 | } 18 | // 合并语言包 19 | const langData = langs.data 20 | if (typeof locales === 'object' && locales instanceof Object) { 21 | Object.keys(locales).forEach(key => { 22 | if (langData.hasOwnProperty(key)) { 23 | langData[key] = { 24 | ...langData[key], 25 | ...locales[key] 26 | } 27 | } else { 28 | langData[key] = locales[key] 29 | } 30 | }) 31 | } 32 | // 默认语言 33 | defLocale = $X.utils.storage.get('locale', $X.config.storage.prefix) || defLocale || Object.keys(langData)[0] 34 | // 注册插件 35 | Vue.use(VueI18n) 36 | Vue.locale = () => {} 37 | // i18n实例 38 | const i18nInstance = new VueI18n({ 39 | locale: defLocale, 40 | messages: langData 41 | }) 42 | // FIXME 覆写iview i18n方法，修复$Modal弹窗报错BUG，【Issues】https://github.com/iview/iview/issues/4769#issuecomment-449851416 43 | locale.i18n((path, options) => i18nInstance.t(path, options)) 44 | Vue.prototype._i18n = i18nInstance 45 | return i18nInstance 46 | } 47 | -------------------------------------------------------------------------------- /src/langs/en-US.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by OXOYO on 2019/5/29. 3 | * 4 | * 5 | */ 6 | 7 | export default { 8 | // toolbar 9 | L10000: 'XFC', 10 | L10001: 'Undo', 11 | L10002: 'Redo', 12 | L10003: 'Copy', 13 | L10004: 'Paste', 14 | L10005: 'Empty the canvas', 15 | L10006: 'Zoom in', 16 | L10007: 'Zoom out', 17 | L10008: 'Adapt to the screen', 18 | L10009: 'Actual size', 19 | L10010: 'Delete', 20 | L10011: 'Fill color', 21 | L10012: 'Line color', 22 | L10013: 'Line width', 23 | L10014: 'Line style', 24 | L10015: 'Line type', 25 | L10016: 'Starting point', 26 | L10017: 'End point', 27 | L10018: 'Place on top', 28 | L10019: 'Place on the bottom', 29 | L10020: 'Box selection', 30 | L10021: 'Add group', 31 | L10022: 'Ungroup', 32 | L10023: 'Edit', 33 | L10024: 'Preview', 34 | L10025: 'Full screen', 35 | L10026: 'Language', 36 | L10027: 'Github', 37 | L10028: 'Feedback', 38 | L10029: 'Zoom', 39 | L10030: 'Download', 40 | L10031: 'Select all', 41 | L10032: 'Clear operation log', 42 | L10033: 'Upload', 43 | L10034: 'Canvas background', 44 | L10035: 'Layout', 45 | L10036: 'Help', 46 | L10037: 'About XFC', 47 | L10038: 'Shortcut List', 48 | L10039: 'Default Background', 49 | L10040: 'Picture Background', 50 | L10041: 'History', 51 | // right panel 52 | L10100: 'Information', 53 | L10101: 'Configuration', 54 | L10102: 'Navigator', 55 | L10103: 'Properties', 56 | L10104: 'Style', 57 | L10105: 'Text', 58 | // other 59 | L10200: 'Hint', 60 | L10201: 'Are you sure to empty the canvas? ', 61 | L10202: 'Preview', 62 | L10203: 'Close', 63 | L10204: 'Download', 64 | L10205: 'Confirm', 65 | L10206: 'Uploading JSON data will overwrite the current canvas and confirm upload? ', 66 | L10207: 'Failed to upload JSON data!', 67 | L10208: 'No data!', 68 | L10209: 'Revert', 69 | L10220: 'Version', 70 | L10221: 'Author', 71 | L10222: 'Github', 72 | // left panel 73 | L10300: 'Materials', 74 | L10301: 'General', 75 | L10302: 'Miscellaneous', 76 | L10303: 'Advanced', 77 | L10304: 'Basic', 78 | L10305: 'Arrow', 79 | L10306: 'UML', 80 | L10307: 'BPMN General', 81 | L10308: 'Flowchart', 82 | L10309: 'Clipart', 83 | // Shortcut 84 | L10450: 'Shortcut List', 85 | L10451: 'Operation', 86 | L10452: 'Shortcut', 87 | L10453: 'Description' 88 | } 89 | -------------------------------------------------------------------------------- /src/langs/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by OXOYO on 2019/5/29. 3 | * 4 | * 语言包 5 | */ 6 | // 导入iview语言包 7 | import _en from 'iview/dist/locale/en-US' 8 | import _zh from 'iview/dist/locale/zh-CN' 9 | 10 | // 导入系统语言包 11 | import zh from './zh-CN' 12 | import en from './en-US' 13 | 14 | export default { 15 | label: { 16 | 'zh-CN': '简体中文', 17 | 'en-US': 'English' 18 | }, 19 | icon: { 20 | 'zh-CN': require('@/assets/images/langs/zh-CN.png'), 21 | 'en-US': require('@/assets/images/langs/en-US.png') 22 | }, 23 | data: { 24 | 'zh-CN': { ..._zh, ...zh }, 25 | 'en-US': { ..._en, ...en } 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /src/langs/zh-CN.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by OXOYO on 2019/5/29. 3 | * 4 | * 5 | */ 6 | 7 | export default { 8 | // 工具栏 9 | L10000: 'XFC', 10 | L10001: '撤销', 11 | L10002: '重做', 12 | L10003: '复制', 13 | L10004: '粘贴', 14 | L10005: '清空画布', 15 | L10006: '放大', 16 | L10007: '缩小', 17 | L10008: '适应屏幕', 18 | L10009: '实际大小', 19 | L10010: '删除', 20 | L10011: '填充颜色', 21 | L10012: '线条颜色', 22 | L10013: '线条宽度', 23 | L10014: '线条样式', 24 | L10015: '线条类型', 25 | L10016: '起点', 26 | L10017: '终点', 27 | L10018: '置于顶层', 28 | L10019: '置于底层', 29 | L10020: '框选', 30 | L10021: '添加组', 31 | L10022: '解除组', 32 | L10023: '编辑', 33 | L10024: '预览', 34 | L10025: '全屏', 35 | L10026: '语言', 36 | L10027: 'Github', 37 | L10028: '反馈', 38 | L10029: '缩放', 39 | L10030: '下载', 40 | L10031: '全选', 41 | L10032: '清空操作日志', 42 | L10033: '上传', 43 | L10034: '画布背景', 44 | L10035: '布局', 45 | L10036: '帮助', 46 | L10037: '关于 XFC', 47 | L10038: '快捷键列表', 48 | L10039: '默认背景', 49 | L10040: '图片背景', 50 | L10041: '历史记录', 51 | // 右面板 52 | L10100: '信息', 53 | L10101: '配置器', 54 | L10102: '导航器', 55 | L10103: '属性', 56 | L10104: '样式', 57 | L10105: '文本', 58 | // 其他 59 | L10200: '提示', 60 | L10201: '确认清空画布？', 61 | L10202: '预览', 62 | L10203: '关闭', 63 | L10204: '下载', 64 | L10205: '确认', 65 | L10206: '上传JSON数据将覆盖当前画布，确认上传？', 66 | L10207: '上传JSON数据失败！', 67 | L10208: '暂无数据！', 68 | L10209: '还原', 69 | L10220: '版本', 70 | L10221: '作者', 71 | L10222: 'Github', 72 | // 左面板 73 | L10300: '物料', 74 | L10301: '一般', 75 | L10302: '杂项', 76 | L10303: '高级', 77 | L10304: '基本', 78 | L10305: '箭头', 79 | L10306: 'UML', 80 | L10307: 'BPMN一般', 81 | L10308: '流程图', 82 | L10309: '剪贴图', 83 | // 快捷键 84 | L10450: '快捷键列表', 85 | L10451: '操作', 86 | L10452: '快捷键', 87 | L10453: '描述' 88 | } 89 | -------------------------------------------------------------------------------- /src/main.js: -------------------------------------------------------------------------------- 1 | import xfc from './xfc' 2 | // 初始化 3 | xfc({ 4 | el: '#app' 5 | }) 6 | -------------------------------------------------------------------------------- /src/registerServiceWorker.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable no-console */ 2 | 3 | import { register } from 'register-service-worker' 4 | 5 | if (process.env.NODE_ENV === 'production') { 6 | register(`${process.env.BASE_URL}service-worker.js`, { 7 | ready () { 8 | console.log( 9 | 'App is being served from cache by a service worker.\n' + 10 | 'For more details, visit https://goo.gl/AFskqB' 11 | ) 12 | }, 13 | registered () { 14 | console.log('Service worker has been registered.') 15 | }, 16 | cached () { 17 | console.log('Content has been cached for offline use.') 18 | }, 19 | updatefound () { 20 | console.log('New content is downloading.') 21 | }, 22 | updated () { 23 | console.log('New content is available; please refresh.') 24 | }, 25 | offline () { 26 | console.log('No internet connection found. App is running in offline mode.') 27 | }, 28 | error (error) { 29 | console.error('XFC EDITOR ERROR:: during service worker registration:', error) 30 | } 31 | }) 32 | } 33 | -------------------------------------------------------------------------------- /vue.config.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by OXOYO on 2019/5/31. 3 | * 4 | * cli 配置文件 5 | * 6 | * 文档：https://cli.vuejs.org/zh/config/ 7 | */ 8 | 9 | module.exports = { 10 | // 部署应用包时的基本URL，置空使用相对路径 11 | publicPath: process.env.IS_BUILD_LIB ? '/' : '/X-Flowchart-Vue/', 12 | // 打包输出目录 13 | outputDir: 'docs', 14 | // 静态资源目录 15 | assetsDir: '', 16 | productionSourceMap: false, 17 | css: { 18 | loaderOptions: { 19 | less: { 20 | // 解决https://github.com/ant-design/ant-motion/issues/44问题 21 | // 相关问题：https://github.com/ant-design/ant-design/issues/7927#issuecomment-372513256 22 | javascriptEnabled: true 23 | } 24 | } 25 | } 26 | } 27 | --------------------------------------------------------------------------------