├── static ├── .gitkeep ├── json │ ├── demo.json │ ├── json2.json │ └── json1.json └── css │ └── reset.css ├── docs ├── README.md ├── Config.md └── Concepts.md ├── src ├── common │ └── style │ │ ├── index.scss │ │ └── base.scss ├── assets │ ├── logo.png │ └── images │ │ ├── bigdot.png │ │ ├── circle.png │ │ ├── diamond.png │ │ ├── ellipse.png │ │ ├── littledot.png │ │ ├── littledot.xcf │ │ ├── rectangle.png │ │ ├── triangle.png │ │ └── triangle_90.png ├── App.vue ├── components │ ├── layout │ │ ├── Main.vue │ │ └── Menu.vue │ ├── Home.vue │ ├── ChartNode.vue │ ├── ChartNode.1.vue │ ├── Opt14.vue │ ├── Opt15.vue │ ├── Opt18.vue │ ├── Opt16.vue │ ├── Opt21.vue │ ├── Opt12.vue │ ├── Opt17.vue │ ├── Opt11.vue │ ├── Opt31.vue │ ├── Opt19.vue │ ├── Opt13.vue │ └── Opt22.vue ├── main.js ├── router │ └── index.js ├── template │ └── emr.vue └── style │ ├── jsplumbtoolkit-demo.scss │ ├── index.scss │ └── jsplumb-demo.scss ├── dist ├── static │ ├── json │ │ ├── demo.json │ │ ├── json2.json │ │ └── json1.json │ ├── img │ │ └── bigdot.33faf17.png │ ├── fonts │ │ └── element-icons.6f0a763.ttf │ ├── js │ │ ├── manifest.3ad1d5771e9b13dbdad2.js │ │ └── manifest.3ad1d5771e9b13dbdad2.js.map │ └── css │ │ └── reset.css └── index.html ├── config ├── prod.env.js ├── dev.env.js └── index.js ├── .editorconfig ├── .gitignore ├── .babelrc ├── .postcssrc.js ├── index.html ├── README.md └── package.json /static/.gitkeep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /docs/README.md: -------------------------------------------------------------------------------- 1 | ## Home 2 | ```jsplumb```简易中文文档 -------------------------------------------------------------------------------- /src/common/style/index.scss: -------------------------------------------------------------------------------- 1 | @import './base'; -------------------------------------------------------------------------------- /static/json/demo.json: -------------------------------------------------------------------------------- 1 | { 2 | "data":1 3 | } -------------------------------------------------------------------------------- /dist/static/json/demo.json: -------------------------------------------------------------------------------- 1 | { 2 | "data":1 3 | } -------------------------------------------------------------------------------- /config/prod.env.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | module.exports = { 3 | NODE_ENV: '"production"' 4 | } 5 | -------------------------------------------------------------------------------- /src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yys-0505/vue-jsplumb/HEAD/src/assets/logo.png -------------------------------------------------------------------------------- /src/assets/images/bigdot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yys-0505/vue-jsplumb/HEAD/src/assets/images/bigdot.png -------------------------------------------------------------------------------- /src/assets/images/circle.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yys-0505/vue-jsplumb/HEAD/src/assets/images/circle.png -------------------------------------------------------------------------------- /src/assets/images/diamond.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yys-0505/vue-jsplumb/HEAD/src/assets/images/diamond.png -------------------------------------------------------------------------------- /src/assets/images/ellipse.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yys-0505/vue-jsplumb/HEAD/src/assets/images/ellipse.png -------------------------------------------------------------------------------- /src/assets/images/littledot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yys-0505/vue-jsplumb/HEAD/src/assets/images/littledot.png -------------------------------------------------------------------------------- /src/assets/images/littledot.xcf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yys-0505/vue-jsplumb/HEAD/src/assets/images/littledot.xcf -------------------------------------------------------------------------------- /src/assets/images/rectangle.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yys-0505/vue-jsplumb/HEAD/src/assets/images/rectangle.png -------------------------------------------------------------------------------- /src/assets/images/triangle.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yys-0505/vue-jsplumb/HEAD/src/assets/images/triangle.png -------------------------------------------------------------------------------- /src/assets/images/triangle_90.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yys-0505/vue-jsplumb/HEAD/src/assets/images/triangle_90.png -------------------------------------------------------------------------------- /dist/static/img/bigdot.33faf17.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yys-0505/vue-jsplumb/HEAD/dist/static/img/bigdot.33faf17.png -------------------------------------------------------------------------------- /dist/static/fonts/element-icons.6f0a763.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yys-0505/vue-jsplumb/HEAD/dist/static/fonts/element-icons.6f0a763.ttf -------------------------------------------------------------------------------- /config/dev.env.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | const merge = require('webpack-merge') 3 | const prodEnv = require('./prod.env') 4 | 5 | module.exports = merge(prodEnv, { 6 | NODE_ENV: '"development"' 7 | }) 8 | -------------------------------------------------------------------------------- /src/App.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 11 | 12 | 14 | -------------------------------------------------------------------------------- /src/common/style/base.scss: -------------------------------------------------------------------------------- 1 | html, body { 2 | font-weight: 200; 3 | line-height: 1; 4 | height: 100%; 5 | font-family: 'PingFang SC', 'STHeitiSC-Light', 'Helvetica-Light', arial, sans-serif; 6 | } -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | charset = utf-8 5 | indent_style = space 6 | indent_size = 2 7 | end_of_line = lf 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules/ 3 | npm-debug.log* 4 | yarn-debug.log* 5 | yarn-error.log* 6 | 7 | # Editor directories and files 8 | .idea 9 | .vscode 10 | *.suo 11 | *.ntvs* 12 | *.njsproj 13 | *.sln 14 | -------------------------------------------------------------------------------- /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | ["env", { 4 | "modules": false, 5 | "targets": { 6 | "browsers": ["> 1%", "last 2 versions", "not ie <= 8"] 7 | } 8 | }], 9 | "stage-2" 10 | ], 11 | "plugins": ["transform-vue-jsx", "transform-runtime"] 12 | } 13 | -------------------------------------------------------------------------------- /.postcssrc.js: -------------------------------------------------------------------------------- 1 | // https://github.com/michael-ciniawsky/postcss-load-config 2 | 3 | module.exports = { 4 | "plugins": { 5 | "postcss-import": {}, 6 | "postcss-url": {}, 7 | // to edit target browsers: use "browserslist" field in package.json 8 | "autoprefixer": {} 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /src/components/layout/Main.vue: -------------------------------------------------------------------------------- 1 | 8 | 13 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | vue-jsplumb 7 | 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /src/components/Home.vue: -------------------------------------------------------------------------------- 1 | 7 | 17 | -------------------------------------------------------------------------------- /dist/index.html: -------------------------------------------------------------------------------- 1 | vue-jsplumb
-------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # vue-jsplumb 2 | 3 | > A Vue.js project 4 | 5 | # preview 6 | 7 | https://yys-0505.github.io/vue-jsplumb/dist/index.html 8 | 9 | ## Build Setup 10 | 11 | ``` bash 12 | # install dependencies 13 | npm install 14 | 15 | # serve with hot reload at localhost:8080 16 | npm run dev 17 | 18 | # build for production with minification 19 | npm run build 20 | 21 | # build for production and view the bundle analyzer report 22 | npm run build --report 23 | ``` 24 | 25 | For a detailed explanation on how things work, check out the [guide](http://vuejs-templates.github.io/webpack/) and [docs for vue-loader](http://vuejs.github.io/vue-loader). 26 | -------------------------------------------------------------------------------- /dist/static/js/manifest.3ad1d5771e9b13dbdad2.js: -------------------------------------------------------------------------------- 1 | !function(r){var n=window.webpackJsonp;window.webpackJsonp=function(e,u,c){for(var f,i,p,a=0,l=[];a' 36 | }) 37 | -------------------------------------------------------------------------------- /src/router/index.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import Router from 'vue-router' 3 | import Home from 'components/Home' 4 | import Opt11 from 'components/Opt11' 5 | import Opt12 from 'components/Opt12' 6 | import Opt13 from 'components/Opt13' 7 | import Opt14 from 'components/Opt14' 8 | import Opt15 from 'components/Opt15' 9 | import Opt16 from 'components/Opt16' 10 | import Opt17 from 'components/Opt17' 11 | import Opt18 from 'components/Opt18' 12 | import Opt19 from 'components/Opt19' 13 | import Opt21 from 'components/Opt21' 14 | import Opt22 from 'components/Opt22' 15 | import Opt31 from 'components/Opt31' 16 | 17 | Vue.use(Router) 18 | 19 | const router = new Router({ 20 | routes: [ 21 | { 22 | path: '/', 23 | component: Home, 24 | redirect: '/opt11', 25 | children: [ 26 | {path: '/opt11', component: Opt11}, 27 | {path: '/opt12', component: Opt12}, 28 | {path: '/opt13', component: Opt13}, 29 | {path: '/opt14', component: Opt14}, 30 | {path: '/opt15', component: Opt15}, 31 | {path: '/opt16', component: Opt16}, 32 | {path: '/opt17', component: Opt17}, 33 | {path: '/opt18', component: Opt18}, 34 | {path: '/opt19', component: Opt19}, 35 | {path: '/opt21', component: Opt21}, 36 | {path: '/opt22', component: Opt22}, 37 | {path: '/opt31', component: Opt31} 38 | ] 39 | }, 40 | {path: '*', redirect: '/'} 41 | ] 42 | }); 43 | 44 | export default router; -------------------------------------------------------------------------------- /static/json/json2.json: -------------------------------------------------------------------------------- 1 | { 2 | "nodes": [{ 3 | "icon": "el-icon-loading", 4 | "id": "start", 5 | "nodeStyle": { 6 | "top": "80px", 7 | "left": "186px" 8 | }, 9 | "text": "开始", 10 | "type": "circle" 11 | }, 12 | { 13 | "icon": "el-icon-menu", 14 | "id": "038f9f38-b7f1-4ee3-bea5-db8c36130624", 15 | "nodeStyle": { 16 | "top": "80px", 17 | "left": "486px" 18 | }, 19 | "text": "伴随车牌", 20 | "type": "diamond" 21 | }, 22 | { 23 | "icon": "el-icon-location", 24 | "id": "1b87fc6f-e0d2-4ee4-9df9-b4952494eee6", 25 | "nodeStyle": { 26 | "top": "80px", 27 | "left": "786px" 28 | }, 29 | "text": "伴随imsi", 30 | "type": "diamond" 31 | }, 32 | { 33 | "icon": "el-icon-date", 34 | "id": "744627f4-5fc8-47d2-8fd2-cd1b3605d542", 35 | "nodeStyle": { 36 | "top": "369px", 37 | "left": "486px" 38 | }, 39 | "text": "差集", 40 | "type": "diamond" 41 | }, 42 | { 43 | "icon": "el-icon-upload", 44 | "id": "end", 45 | "nodeStyle": { 46 | "top": "696px", 47 | "left": "486px" 48 | }, 49 | "text": "结束", 50 | "type": "circle" 51 | } 52 | ], 53 | "connections": [{ 54 | "sourceId": "start", 55 | "targetId": "744627f4-5fc8-47d2-8fd2-cd1b3605d542" 56 | }, 57 | { 58 | "sourceId": "038f9f38-b7f1-4ee3-bea5-db8c36130624", 59 | "targetId": "744627f4-5fc8-47d2-8fd2-cd1b3605d542" 60 | }, 61 | { 62 | "sourceId": "1b87fc6f-e0d2-4ee4-9df9-b4952494eee6", 63 | "targetId": "744627f4-5fc8-47d2-8fd2-cd1b3605d542" 64 | }, 65 | { 66 | "sourceId": "744627f4-5fc8-47d2-8fd2-cd1b3605d542", 67 | "targetId": "end" 68 | } 69 | ], 70 | "props": { 71 | "name": "模板二" 72 | } 73 | } 74 | -------------------------------------------------------------------------------- /dist/static/json/json2.json: -------------------------------------------------------------------------------- 1 | { 2 | "nodes": [{ 3 | "icon": "el-icon-loading", 4 | "id": "start", 5 | "nodeStyle": { 6 | "top": "80px", 7 | "left": "186px" 8 | }, 9 | "text": "开始", 10 | "type": "circle" 11 | }, 12 | { 13 | "icon": "el-icon-menu", 14 | "id": "038f9f38-b7f1-4ee3-bea5-db8c36130624", 15 | "nodeStyle": { 16 | "top": "80px", 17 | "left": "486px" 18 | }, 19 | "text": "伴随车牌", 20 | "type": "diamond" 21 | }, 22 | { 23 | "icon": "el-icon-location", 24 | "id": "1b87fc6f-e0d2-4ee4-9df9-b4952494eee6", 25 | "nodeStyle": { 26 | "top": "80px", 27 | "left": "786px" 28 | }, 29 | "text": "伴随imsi", 30 | "type": "diamond" 31 | }, 32 | { 33 | "icon": "el-icon-date", 34 | "id": "744627f4-5fc8-47d2-8fd2-cd1b3605d542", 35 | "nodeStyle": { 36 | "top": "369px", 37 | "left": "486px" 38 | }, 39 | "text": "差集", 40 | "type": "diamond" 41 | }, 42 | { 43 | "icon": "el-icon-upload", 44 | "id": "end", 45 | "nodeStyle": { 46 | "top": "696px", 47 | "left": "486px" 48 | }, 49 | "text": "结束", 50 | "type": "circle" 51 | } 52 | ], 53 | "connections": [{ 54 | "sourceId": "start", 55 | "targetId": "744627f4-5fc8-47d2-8fd2-cd1b3605d542" 56 | }, 57 | { 58 | "sourceId": "038f9f38-b7f1-4ee3-bea5-db8c36130624", 59 | "targetId": "744627f4-5fc8-47d2-8fd2-cd1b3605d542" 60 | }, 61 | { 62 | "sourceId": "1b87fc6f-e0d2-4ee4-9df9-b4952494eee6", 63 | "targetId": "744627f4-5fc8-47d2-8fd2-cd1b3605d542" 64 | }, 65 | { 66 | "sourceId": "744627f4-5fc8-47d2-8fd2-cd1b3605d542", 67 | "targetId": "end" 68 | } 69 | ], 70 | "props": { 71 | "name": "模板二" 72 | } 73 | } 74 | -------------------------------------------------------------------------------- /static/json/json1.json: -------------------------------------------------------------------------------- 1 | { 2 | "nodes": [{ 3 | "icon": "el-icon-loading", 4 | "id": "start", 5 | "nodeStyle": { 6 | "top": "100px", 7 | "left": "160px" 8 | }, 9 | "text": "开始", 10 | "type": "circle" 11 | }, 12 | { 13 | "icon": "el-icon-menu", 14 | "id": "038f9f38-b7f1-4ee3-bea5-db8c36130624", 15 | "nodeStyle": { 16 | "top": "387px", 17 | "left": "160px" 18 | }, 19 | "text": "伴随车牌", 20 | "type": "diamond" 21 | }, 22 | { 23 | "icon": "el-icon-location", 24 | "id": "1b87fc6f-e0d2-4ee4-9df9-b4952494eee6", 25 | "nodeStyle": { 26 | "top": "620px", 27 | "left": "160px" 28 | }, 29 | "text": "伴随imsi", 30 | "type": "diamond" 31 | }, 32 | { 33 | "icon": "el-icon-date", 34 | "id": "744627f4-5fc8-47d2-8fd2-cd1b3605d542", 35 | "nodeStyle": { 36 | "top": "387px", 37 | "left": "481px" 38 | }, 39 | "text": "差集", 40 | "type": "diamond" 41 | }, 42 | { 43 | "icon": "el-icon-upload", 44 | "id": "end", 45 | "nodeStyle": { 46 | "top": "387px", 47 | "left": "776px" 48 | }, 49 | "text": "结束", 50 | "type": "circle" 51 | } 52 | ], 53 | "connections": [{ 54 | "sourceId": "start", 55 | "targetId": "744627f4-5fc8-47d2-8fd2-cd1b3605d542" 56 | }, 57 | { 58 | "sourceId": "038f9f38-b7f1-4ee3-bea5-db8c36130624", 59 | "targetId": "744627f4-5fc8-47d2-8fd2-cd1b3605d542" 60 | }, 61 | { 62 | "sourceId": "1b87fc6f-e0d2-4ee4-9df9-b4952494eee6", 63 | "targetId": "744627f4-5fc8-47d2-8fd2-cd1b3605d542" 64 | }, 65 | { 66 | "sourceId": "744627f4-5fc8-47d2-8fd2-cd1b3605d542", 67 | "targetId": "end" 68 | } 69 | ], 70 | "props": { 71 | "name": "模板一" 72 | } 73 | } 74 | -------------------------------------------------------------------------------- /dist/static/json/json1.json: -------------------------------------------------------------------------------- 1 | { 2 | "nodes": [{ 3 | "icon": "el-icon-loading", 4 | "id": "start", 5 | "nodeStyle": { 6 | "top": "100px", 7 | "left": "160px" 8 | }, 9 | "text": "开始", 10 | "type": "circle" 11 | }, 12 | { 13 | "icon": "el-icon-menu", 14 | "id": "038f9f38-b7f1-4ee3-bea5-db8c36130624", 15 | "nodeStyle": { 16 | "top": "387px", 17 | "left": "160px" 18 | }, 19 | "text": "伴随车牌", 20 | "type": "diamond" 21 | }, 22 | { 23 | "icon": "el-icon-location", 24 | "id": "1b87fc6f-e0d2-4ee4-9df9-b4952494eee6", 25 | "nodeStyle": { 26 | "top": "620px", 27 | "left": "160px" 28 | }, 29 | "text": "伴随imsi", 30 | "type": "diamond" 31 | }, 32 | { 33 | "icon": "el-icon-date", 34 | "id": "744627f4-5fc8-47d2-8fd2-cd1b3605d542", 35 | "nodeStyle": { 36 | "top": "387px", 37 | "left": "481px" 38 | }, 39 | "text": "差集", 40 | "type": "diamond" 41 | }, 42 | { 43 | "icon": "el-icon-upload", 44 | "id": "end", 45 | "nodeStyle": { 46 | "top": "387px", 47 | "left": "776px" 48 | }, 49 | "text": "结束", 50 | "type": "circle" 51 | } 52 | ], 53 | "connections": [{ 54 | "sourceId": "start", 55 | "targetId": "744627f4-5fc8-47d2-8fd2-cd1b3605d542" 56 | }, 57 | { 58 | "sourceId": "038f9f38-b7f1-4ee3-bea5-db8c36130624", 59 | "targetId": "744627f4-5fc8-47d2-8fd2-cd1b3605d542" 60 | }, 61 | { 62 | "sourceId": "1b87fc6f-e0d2-4ee4-9df9-b4952494eee6", 63 | "targetId": "744627f4-5fc8-47d2-8fd2-cd1b3605d542" 64 | }, 65 | { 66 | "sourceId": "744627f4-5fc8-47d2-8fd2-cd1b3605d542", 67 | "targetId": "end" 68 | } 69 | ], 70 | "props": { 71 | "name": "模板一" 72 | } 73 | } 74 | -------------------------------------------------------------------------------- /static/css/reset.css: -------------------------------------------------------------------------------- 1 | /* http://meyerweb.com/eric/tools/css/reset/ 2 | v2.0 | 20110126 3 | License: none (public domain) 4 | */ 5 | 6 | html, body, div, span, applet, object, iframe, 7 | h1, h2, h3, h4, h5, h6, p, blockquote, pre, 8 | a, abbr, acronym, address, big, cite, code, 9 | del, dfn, em, img, ins, kbd, q, s, samp, 10 | small, strike, strong, sub, sup, tt, var, 11 | b, u, i, center, 12 | dl, dt, dd, ol, ul, li, 13 | fieldset, form, label, legend, 14 | table, caption, tbody, tfoot, thead, tr, th, td, 15 | article, aside, canvas, details, embed, 16 | figure, figcaption, footer, header, hgroup, 17 | menu, nav, output, ruby, section, summary, 18 | time, mark, audio, video { 19 | margin: 0; 20 | padding: 0; 21 | border: 0; 22 | font-size: 100%; 23 | font-weight: normal; 24 | vertical-align: baseline; 25 | } 26 | /* HTML5 display-role reset for older browsers */ 27 | article, aside, details, figcaption, figure, 28 | footer, header, hgroup, menu, nav, section { 29 | display: block; 30 | } 31 | body { 32 | line-height: 1; 33 | } 34 | ol, ul { 35 | list-style: none; 36 | } 37 | blockquote, q { 38 | quotes: none; 39 | } 40 | blockquote:before, blockquote:after, 41 | q:before, q:after { 42 | content: ''; 43 | content: none; 44 | } 45 | table { 46 | border-collapse: collapse; 47 | border-spacing: 0; 48 | } 49 | 50 | /* custom */ 51 | a { 52 | color: #7e8c8d; 53 | text-decoration: none; 54 | -webkit-backface-visibility: hidden; 55 | } 56 | 57 | li { 58 | list-style: none; 59 | } 60 | 61 | ::-webkit-scrollbar { 62 | width: 5px; 63 | height: 5px; 64 | } 65 | 66 | ::-webkit-scrollbar-track-piece { 67 | background-color: rgba(0, 0, 0, 0.2); 68 | -webkit-border-radius: 6px; 69 | } 70 | 71 | ::-webkit-scrollbar-thumb:vertical { 72 | height: 5px; 73 | background-color: rgba(125, 125, 125, 0.7); 74 | -webkit-border-radius: 6px; 75 | } 76 | 77 | ::-webkit-scrollbar-thumb:horizontal { 78 | width: 5px; 79 | background-color: rgba(125, 125, 125, 0.7); 80 | -webkit-border-radius: 6px; 81 | } 82 | 83 | html, body { 84 | width: 100%; 85 | } 86 | 87 | body { 88 | -webkit-text-size-adjust: none; 89 | -webkit-tap-highlight-color: rgba(0, 0, 0, 0); 90 | } 91 | -------------------------------------------------------------------------------- /dist/static/css/reset.css: -------------------------------------------------------------------------------- 1 | /* http://meyerweb.com/eric/tools/css/reset/ 2 | v2.0 | 20110126 3 | License: none (public domain) 4 | */ 5 | 6 | html, body, div, span, applet, object, iframe, 7 | h1, h2, h3, h4, h5, h6, p, blockquote, pre, 8 | a, abbr, acronym, address, big, cite, code, 9 | del, dfn, em, img, ins, kbd, q, s, samp, 10 | small, strike, strong, sub, sup, tt, var, 11 | b, u, i, center, 12 | dl, dt, dd, ol, ul, li, 13 | fieldset, form, label, legend, 14 | table, caption, tbody, tfoot, thead, tr, th, td, 15 | article, aside, canvas, details, embed, 16 | figure, figcaption, footer, header, hgroup, 17 | menu, nav, output, ruby, section, summary, 18 | time, mark, audio, video { 19 | margin: 0; 20 | padding: 0; 21 | border: 0; 22 | font-size: 100%; 23 | font-weight: normal; 24 | vertical-align: baseline; 25 | } 26 | /* HTML5 display-role reset for older browsers */ 27 | article, aside, details, figcaption, figure, 28 | footer, header, hgroup, menu, nav, section { 29 | display: block; 30 | } 31 | body { 32 | line-height: 1; 33 | } 34 | ol, ul { 35 | list-style: none; 36 | } 37 | blockquote, q { 38 | quotes: none; 39 | } 40 | blockquote:before, blockquote:after, 41 | q:before, q:after { 42 | content: ''; 43 | content: none; 44 | } 45 | table { 46 | border-collapse: collapse; 47 | border-spacing: 0; 48 | } 49 | 50 | /* custom */ 51 | a { 52 | color: #7e8c8d; 53 | text-decoration: none; 54 | -webkit-backface-visibility: hidden; 55 | } 56 | 57 | li { 58 | list-style: none; 59 | } 60 | 61 | ::-webkit-scrollbar { 62 | width: 5px; 63 | height: 5px; 64 | } 65 | 66 | ::-webkit-scrollbar-track-piece { 67 | background-color: rgba(0, 0, 0, 0.2); 68 | -webkit-border-radius: 6px; 69 | } 70 | 71 | ::-webkit-scrollbar-thumb:vertical { 72 | height: 5px; 73 | background-color: rgba(125, 125, 125, 0.7); 74 | -webkit-border-radius: 6px; 75 | } 76 | 77 | ::-webkit-scrollbar-thumb:horizontal { 78 | width: 5px; 79 | background-color: rgba(125, 125, 125, 0.7); 80 | -webkit-border-radius: 6px; 81 | } 82 | 83 | html, body { 84 | width: 100%; 85 | } 86 | 87 | body { 88 | -webkit-text-size-adjust: none; 89 | -webkit-tap-highlight-color: rgba(0, 0, 0, 0); 90 | } 91 | -------------------------------------------------------------------------------- /config/index.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | // Template version: 1.3.1 3 | // see http://vuejs-templates.github.io/webpack for documentation. 4 | 5 | const path = require('path') 6 | 7 | module.exports = { 8 | dev: { 9 | 10 | // Paths 11 | assetsSubDirectory: 'static', 12 | assetsPublicPath: '/', 13 | proxyTable: {}, 14 | 15 | // Various Dev Server settings 16 | host: 'localhost', // can be overwritten by process.env.HOST 17 | port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined 18 | autoOpenBrowser: false, 19 | errorOverlay: true, 20 | notifyOnErrors: true, 21 | poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions- 22 | 23 | 24 | /** 25 | * Source Maps 26 | */ 27 | 28 | // https://webpack.js.org/configuration/devtool/#development 29 | devtool: 'cheap-module-eval-source-map', 30 | 31 | // If you have problems debugging vue-files in devtools, 32 | // set this to false - it *may* help 33 | // https://vue-loader.vuejs.org/en/options.html#cachebusting 34 | cacheBusting: true, 35 | 36 | cssSourceMap: true 37 | }, 38 | 39 | build: { 40 | // Template for index.html 41 | index: path.resolve(__dirname, '../dist/index.html'), 42 | 43 | // Paths 44 | assetsRoot: path.resolve(__dirname, '../dist'), 45 | assetsSubDirectory: 'static', 46 | assetsPublicPath: './', 47 | 48 | /** 49 | * Source Maps 50 | */ 51 | 52 | productionSourceMap: true, 53 | // https://webpack.js.org/configuration/devtool/#production 54 | devtool: '#source-map', 55 | 56 | // Gzip off by default as many popular static hosts such as 57 | // Surge or Netlify already gzip all static assets for you. 58 | // Before setting to `true`, make sure to: 59 | // npm install --save-dev compression-webpack-plugin 60 | productionGzip: false, 61 | productionGzipExtensions: ['js', 'css'], 62 | 63 | // Run the build command with an extra argument to 64 | // View the bundle analyzer report after build finishes: 65 | // `npm run build --report` 66 | // Set to `true` or `false` to always turn it on or off 67 | bundleAnalyzerReport: process.env.npm_config_report 68 | } 69 | } 70 | -------------------------------------------------------------------------------- /src/components/ChartNode.vue: -------------------------------------------------------------------------------- 1 | 8 | 42 | 100 | -------------------------------------------------------------------------------- /src/components/layout/Menu.vue: -------------------------------------------------------------------------------- 1 | 49 | 52 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue-jsplumb", 3 | "version": "1.0.0", 4 | "description": "A Vue.js project", 5 | "author": "yys-0505 ", 6 | "private": true, 7 | "scripts": { 8 | "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js", 9 | "start": "npm run dev", 10 | "build": "node build/build.js" 11 | }, 12 | "dependencies": { 13 | "axios": "^0.18.0", 14 | "element-ui": "^2.4.11", 15 | "html2canvas": "^1.0.0-alpha.12", 16 | "jquery": "^3.3.1", 17 | "jquery-ui-dist": "^1.12.1", 18 | "jsplumb": "^2.8.5", 19 | "vue": "^2.5.2", 20 | "vue-router": "^3.0.2" 21 | }, 22 | "devDependencies": { 23 | "autoprefixer": "^7.1.2", 24 | "babel-core": "^6.22.1", 25 | "babel-helper-vue-jsx-merge-props": "^2.0.3", 26 | "babel-loader": "^7.1.1", 27 | "babel-plugin-syntax-jsx": "^6.18.0", 28 | "babel-plugin-transform-runtime": "^6.22.0", 29 | "babel-plugin-transform-vue-jsx": "^3.5.0", 30 | "babel-preset-env": "^1.3.2", 31 | "babel-preset-stage-2": "^6.22.0", 32 | "chalk": "^2.0.1", 33 | "copy-webpack-plugin": "^4.0.1", 34 | "css-loader": "^0.28.0", 35 | "extract-text-webpack-plugin": "^3.0.0", 36 | "file-loader": "^1.1.4", 37 | "friendly-errors-webpack-plugin": "^1.6.1", 38 | "html-webpack-plugin": "^2.30.1", 39 | "node-notifier": "^5.1.2", 40 | "node-sass": "^4.10.0", 41 | "optimize-css-assets-webpack-plugin": "^3.2.0", 42 | "ora": "^1.2.0", 43 | "portfinder": "^1.0.13", 44 | "postcss-import": "^11.0.0", 45 | "postcss-loader": "^2.0.8", 46 | "postcss-url": "^7.2.1", 47 | "rimraf": "^2.6.0", 48 | "sass-loader": "^7.1.0", 49 | "semver": "^5.3.0", 50 | "shelljs": "^0.7.6", 51 | "stylus": "^0.54.5", 52 | "stylus-loader": "^3.0.2", 53 | "uglifyjs-webpack-plugin": "^1.1.1", 54 | "url-loader": "^0.5.8", 55 | "vue-loader": "^13.3.0", 56 | "vue-style-loader": "^3.0.1", 57 | "vue-template-compiler": "^2.5.2", 58 | "webpack": "^3.6.0", 59 | "webpack-bundle-analyzer": "^2.9.0", 60 | "webpack-dev-server": "^2.9.1", 61 | "webpack-merge": "^4.1.0" 62 | }, 63 | "engines": { 64 | "node": ">= 6.0.0", 65 | "npm": ">= 3.0.0" 66 | }, 67 | "browserslist": [ 68 | "> 1%", 69 | "last 2 versions", 70 | "not ie <= 8" 71 | ] 72 | } 73 | -------------------------------------------------------------------------------- /src/components/ChartNode.1.vue: -------------------------------------------------------------------------------- 1 | 13 | 58 | 109 | -------------------------------------------------------------------------------- /src/template/emr.vue: -------------------------------------------------------------------------------- 1 | 8 | 42 | 100 | -------------------------------------------------------------------------------- /docs/Config.md: -------------------------------------------------------------------------------- 1 | ## Configuring Defaults 2 | jsPlumb附带的默认值存储在```jsPlumb.Defaults```Javascript对象中 3 | ### 覆盖默认值 4 | 1. 修改 5 | ``` 6 | jsPlumb.importDefaults({ 7 | PaintStyle : { 8 | strokeWidth:13, 9 | stroke: 'rgba(200,0,0,0.5)' 10 | }, 11 | DragOptions : { cursor: "crosshair" }, 12 | Endpoints : [ [ "Dot", { radius:7 } ], [ "Dot", { radius:11 } ] ], 13 | EndpointStyles : [{ fill:"#225588" }, { fill:"#558822" }] 14 | }); 15 | ``` 16 | 2. 设置默认值 17 | ``` 18 | jsPlumb.getInstance({ 19 | PaintStyle : { 20 | strokeWidth:13, 21 | stroke: 'rgba(200,0,0,100)' 22 | }, 23 | DragOptions : { cursor: "crosshair" }, 24 | Endpoints : [ [ "Dot", { radius:7 } ], [ "Dot", { radius:11 } ] ], 25 | EndpointStyles : [ 26 | { fill:"#225588" }, 27 | { fill:"#558822" } 28 | ] 29 | }); 30 | ``` 31 | ### 默认配置 32 | ``` 33 | Anchor : "BottomCenter", // 锚点 34 | Anchors : [ null, null ], // default source and target Anchors for Connections. 35 | ConnectionsDetachable : true, // 连接是否响应鼠标 36 | ConnectionOverlays : [], // 连接器覆盖 37 | Connector : "Bezier", // 连接器 38 | Container : null, // 容器 39 | DoNotThrowErrors : false, // 40 | DragOptions : { }, // 用于配置可拖动的任何元素的默认选项 jsPlumb.draggable 41 | DropOptions : { }, // 用于配置任何目标端点的可放置行为的默认选项 42 | Endpoint : "Dot", // 默认的端点定义。无论何时添加端点或以其他方式创建端点，并且jsPlumb未被赋予任何明确的端点定义。 43 | Endpoints : [ null, null ], // 默认源和目标端点定义 jsPlumb.connect 44 | EndpointOverlays : [ ], // 每个端点的默认覆盖 45 | EndpointStyle : { fill : "#456" }, // 端点样式 46 | EndpointStyles : [ null, null ], // 源和目标端点样式 47 | EndpointHoverStyle : null, // 鼠标悬停端点样式 48 | EndpointHoverStyles : [ null, null ], // 鼠标悬停连接端点样式 49 | HoverPaintStyle : null, // 悬停Connection的默认样式 50 | LabelStyle : { color : "black" }, // 已弃用 51 | LogEnabled : false, // 是否打开jsPlumb的内部日志记录 52 | Overlays : [ ], // 覆盖 53 | MaxConnections : 1, // 任何给定端点支持的默认最大连接数 54 | PaintStyle : { strokeWidth : 8, stroke : "#456" }, // 连接器的默认样式 55 | ReattachConnections : false, // 是否重新连接使用鼠标分离的连接，然后既不重新连接到其原始端点也不连接到其他端点 56 | RenderMode : "svg", // 渲染模式 57 | Scope : "jsPlumb_DefaultScope" // 端点和连接的默认范围。范围提供了对哪些端点可以连接到哪些其他端点的基本控制。 58 | ``` -------------------------------------------------------------------------------- /src/components/Opt14.vue: -------------------------------------------------------------------------------- 1 | 15 | 57 | -------------------------------------------------------------------------------- /dist/static/js/manifest.3ad1d5771e9b13dbdad2.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sources":["webpack:///webpack/bootstrap c15ed175fa384db97fc5"],"names":["parentJsonpFunction","window","chunkIds","moreModules","executeModules","moduleId","chunkId","result","i","resolves","length","installedChunks","push","Object","prototype","hasOwnProperty","call","modules","shift","__webpack_require__","s","installedModules","2","exports","module","l","m","c","d","name","getter","o","defineProperty","configurable","enumerable","get","n","__esModule","object","property","p","oe","err","console","error"],"mappings":"aACA,IAAAA,EAAAC,OAAA,aACAA,OAAA,sBAAAC,EAAAC,EAAAC,GAIA,IADA,IAAAC,EAAAC,EAAAC,EAAAC,EAAA,EAAAC,KACQD,EAAAN,EAAAQ,OAAoBF,IAC5BF,EAAAJ,EAAAM,GACAG,EAAAL,IACAG,EAAAG,KAAAD,EAAAL,GAAA,IAEAK,EAAAL,GAAA,EAEA,IAAAD,KAAAF,EACAU,OAAAC,UAAAC,eAAAC,KAAAb,EAAAE,KACAY,EAAAZ,GAAAF,EAAAE,IAIA,IADAL,KAAAE,EAAAC,EAAAC,GACAK,EAAAC,QACAD,EAAAS,OAAAT,GAEA,GAAAL,EACA,IAAAI,EAAA,EAAYA,EAAAJ,EAAAM,OAA2BF,IACvCD,EAAAY,IAAAC,EAAAhB,EAAAI,IAGA,OAAAD,GAIA,IAAAc,KAGAV,GACAW,EAAA,GAIA,SAAAH,EAAAd,GAGA,GAAAgB,EAAAhB,GACA,OAAAgB,EAAAhB,GAAAkB,QAGA,IAAAC,EAAAH,EAAAhB,IACAG,EAAAH,EACAoB,GAAA,EACAF,YAUA,OANAN,EAAAZ,GAAAW,KAAAQ,EAAAD,QAAAC,IAAAD,QAAAJ,GAGAK,EAAAC,GAAA,EAGAD,EAAAD,QAKAJ,EAAAO,EAAAT,EAGAE,EAAAQ,EAAAN,EAGAF,EAAAS,EAAA,SAAAL,EAAAM,EAAAC,GACAX,EAAAY,EAAAR,EAAAM,IACAhB,OAAAmB,eAAAT,EAAAM,GACAI,cAAA,EACAC,YAAA,EACAC,IAAAL,KAMAX,EAAAiB,EAAA,SAAAZ,GACA,IAAAM,EAAAN,KAAAa,WACA,WAA2B,OAAAb,EAAA,SAC3B,WAAiC,OAAAA,GAEjC,OADAL,EAAAS,EAAAE,EAAA,IAAAA,GACAA,GAIAX,EAAAY,EAAA,SAAAO,EAAAC,GAAsD,OAAA1B,OAAAC,UAAAC,eAAAC,KAAAsB,EAAAC,IAGtDpB,EAAAqB,EAAA,KAGArB,EAAAsB,GAAA,SAAAC,GAA8D,MAApBC,QAAAC,MAAAF,GAAoBA","file":"static/js/manifest.3ad1d5771e9b13dbdad2.js","sourcesContent":[" \t// install a JSONP callback for chunk loading\n \tvar parentJsonpFunction = window[\"webpackJsonp\"];\n \twindow[\"webpackJsonp\"] = function webpackJsonpCallback(chunkIds, moreModules, executeModules) {\n \t\t// add \"moreModules\" to the modules object,\n \t\t// then flag all \"chunkIds\" as loaded and fire callback\n \t\tvar moduleId, chunkId, i = 0, resolves = [], result;\n \t\tfor(;i < chunkIds.length; i++) {\n \t\t\tchunkId = chunkIds[i];\n \t\t\tif(installedChunks[chunkId]) {\n \t\t\t\tresolves.push(installedChunks[chunkId][0]);\n \t\t\t}\n \t\t\tinstalledChunks[chunkId] = 0;\n \t\t}\n \t\tfor(moduleId in moreModules) {\n \t\t\tif(Object.prototype.hasOwnProperty.call(moreModules, moduleId)) {\n \t\t\t\tmodules[moduleId] = moreModules[moduleId];\n \t\t\t}\n \t\t}\n \t\tif(parentJsonpFunction) parentJsonpFunction(chunkIds, moreModules, executeModules);\n \t\twhile(resolves.length) {\n \t\t\tresolves.shift()();\n \t\t}\n \t\tif(executeModules) {\n \t\t\tfor(i=0; i < executeModules.length; i++) {\n \t\t\t\tresult = __webpack_require__(__webpack_require__.s = executeModules[i]);\n \t\t\t}\n \t\t}\n \t\treturn result;\n \t};\n\n \t// The module cache\n \tvar installedModules = {};\n\n \t// objects to store loaded and loading chunks\n \tvar installedChunks = {\n \t\t2: 0\n \t};\n\n \t// The require function\n \tfunction __webpack_require__(moduleId) {\n\n \t\t// Check if module is in cache\n \t\tif(installedModules[moduleId]) {\n \t\t\treturn installedModules[moduleId].exports;\n \t\t}\n \t\t// Create a new module (and put it into the cache)\n \t\tvar module = installedModules[moduleId] = {\n \t\t\ti: moduleId,\n \t\t\tl: false,\n \t\t\texports: {}\n \t\t};\n\n \t\t// Execute the module function\n \t\tmodules[moduleId].call(module.exports, module, module.exports, __webpack_require__);\n\n \t\t// Flag the module as loaded\n \t\tmodule.l = true;\n\n \t\t// Return the exports of the module\n \t\treturn module.exports;\n \t}\n\n\n \t// expose the modules object (__webpack_modules__)\n \t__webpack_require__.m = modules;\n\n \t// expose the module cache\n \t__webpack_require__.c = installedModules;\n\n \t// define getter function for harmony exports\n \t__webpack_require__.d = function(exports, name, getter) {\n \t\tif(!__webpack_require__.o(exports, name)) {\n \t\t\tObject.defineProperty(exports, name, {\n \t\t\t\tconfigurable: false,\n \t\t\t\tenumerable: true,\n \t\t\t\tget: getter\n \t\t\t});\n \t\t}\n \t};\n\n \t// getDefaultExport function for compatibility with non-harmony modules\n \t__webpack_require__.n = function(module) {\n \t\tvar getter = module && module.__esModule ?\n \t\t\tfunction getDefault() { return module['default']; } :\n \t\t\tfunction getModuleExports() { return module; };\n \t\t__webpack_require__.d(getter, 'a', getter);\n \t\treturn getter;\n \t};\n\n \t// Object.prototype.hasOwnProperty.call\n \t__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };\n\n \t// __webpack_public_path__\n \t__webpack_require__.p = \"./\";\n\n \t// on error function for async loading\n \t__webpack_require__.oe = function(err) { console.error(err); throw err; };\n\n\n\n// WEBPACK FOOTER //\n// webpack/bootstrap c15ed175fa384db97fc5"],"sourceRoot":""} -------------------------------------------------------------------------------- /src/components/Opt15.vue: -------------------------------------------------------------------------------- 1 | 15 | 76 | -------------------------------------------------------------------------------- /src/style/jsplumbtoolkit-demo.scss: -------------------------------------------------------------------------------- 1 | /* ---------------------------------------------------------------------------------------------------- */ 2 | /* --- page structure --------------------------------------------------------------------------------- */ 3 | /* ---------------------------------------------------------------------------------------------------- */ 4 | 5 | body { 6 | background-color: #FFF; 7 | color: #434343; 8 | font-family: "Lato", sans-serif; 9 | font-size: 14px; 10 | font-weight: 400; 11 | height: 100%; 12 | padding: 0; 13 | } 14 | 15 | .jtk-bootstrap { 16 | min-height:100vh; 17 | display:flex; 18 | flex-direction: column; 19 | } 20 | 21 | .jtk-bootstrap .jtk-page-container { 22 | display:flex; 23 | width:100vw; 24 | justify-content: center; 25 | flex:1; 26 | } 27 | 28 | .jtk-bootstrap .jtk-container { 29 | width: 60%; 30 | max-width:800px; 31 | } 32 | 33 | .jtk-bootstrap-wide .jtk-container { 34 | width: 80%; 35 | max-width:1187px; 36 | } 37 | 38 | .jtk-demo-main { 39 | position: relative; 40 | width: 100%; 41 | } 42 | 43 | .jtk-demo-main .description { 44 | font-size: 13px; 45 | margin-top: 25px; 46 | padding: 13px; 47 | margin-bottom: 22px; 48 | background-color: #f4f5ef; 49 | } 50 | 51 | .jtk-demo-main .description li { 52 | list-style-type: disc !important; 53 | } 54 | 55 | .jtk-demo-canvas { 56 | height:100%; 57 | max-height:700px; 58 | border:1px solid #CCC; 59 | background-color:white; 60 | display: flex; 61 | } 62 | 63 | .canvas-wide { 64 | margin-left:0; 65 | } 66 | 67 | .miniview { 68 | position: absolute; 69 | top: 25px; 70 | right: 25px; 71 | z-index: 100; 72 | } 73 | 74 | 75 | .jtk-demo-dataset { 76 | text-align: left; 77 | max-height: 600px; 78 | overflow: auto; 79 | } 80 | 81 | .demo-title { 82 | float:left; 83 | font-size:18px; 84 | } 85 | 86 | .controls { 87 | top: 25px; 88 | color: #FFF; 89 | margin-right: 10px; 90 | position: absolute; 91 | left: 25px; 92 | z-index: 1; 93 | } 94 | 95 | .controls i { 96 | background-color: #3E7E9C; 97 | border-radius: 4px; 98 | cursor: pointer; 99 | margin-right: 0; 100 | padding: 4px; 101 | } 102 | 103 | li { 104 | list-style-type: none; 105 | } 106 | 107 | /* ------------------------ node palette -------------------- */ 108 | 109 | .sidebar { 110 | margin:0; 111 | padding:0; 112 | padding-top: 7px; 113 | padding-right: 10px; 114 | width:150px; 115 | float:left; 116 | text-align:center; 117 | height: 550px; 118 | background-color: #84acb3; 119 | } 120 | 121 | .sidebar ul li { 122 | background-color: #234b5e; 123 | border-radius: 11px; 124 | color: #f7ebca; 125 | cursor: move; 126 | margin-bottom: 10px; 127 | margin-left: 6px; 128 | padding: 8px; 129 | width:128px; 130 | } 131 | 132 | .sidebar ul { 133 | width:100%; 134 | padding:0; 135 | } 136 | 137 | .sidebar ul li:hover { 138 | background-color: #577a8b; 139 | } 140 | 141 | .sidebar i { 142 | float:left; 143 | } 144 | 145 | @media (max-width: 600px) { 146 | .sidebar { 147 | float:none; 148 | height: 55px; 149 | width: 100%; 150 | padding-top:0; 151 | } 152 | 153 | .sidebar ul li { 154 | display:inline-block; 155 | margin-top: 7px; 156 | width:67px; 157 | } 158 | .jtk-demo-canvas { 159 | margin-left: 0; 160 | margin-top:10px; 161 | height:364px; 162 | } 163 | } 164 | 165 | /* ---------------------------------------------------------------------------------------------------- */ 166 | /* --- jsPlumb setup ---------------------------------------------------------------------------------- */ 167 | /* ---------------------------------------------------------------------------------------------------- */ 168 | 169 | .jtk-connector { 170 | z-index:9; 171 | } 172 | 173 | .jtk-endpoint { 174 | z-index:12; 175 | opacity:0.8; 176 | cursor:pointer; 177 | } 178 | 179 | .jtk-overlay { 180 | background-color: white; 181 | color: #434343; 182 | font-weight: 400; 183 | padding: 4px; 184 | z-index:10; 185 | 186 | } 187 | 188 | .jtk-overlay.jtk-hover { 189 | color: #434343; 190 | } 191 | 192 | path { 193 | cursor:pointer; 194 | } 195 | 196 | .delete { 197 | padding: 2px; 198 | cursor: pointer; 199 | float: left; 200 | font-size: 10px; 201 | line-height: 20px; 202 | } 203 | 204 | .add, .edit { 205 | cursor: pointer; 206 | float:right; 207 | font-size: 10px; 208 | line-height: 20px; 209 | margin-right:2px; 210 | padding: 2px; 211 | } 212 | 213 | .edit:hover { 214 | color: #ff8000; 215 | } 216 | 217 | .selected-mode { 218 | color:#E4F013; 219 | } 220 | 221 | .connect { 222 | width:10px; 223 | height:10px; 224 | background-color:#f76258; 225 | position:absolute; 226 | bottom: 13px; 227 | right: 5px; 228 | } 229 | 230 | /* header styles */ 231 | 232 | .demo-links { 233 | position: fixed; 234 | right: 0; 235 | top: 57px; 236 | font-size: 11px; 237 | background-color: white; 238 | opacity: 0.8; 239 | padding-right: 10px; 240 | padding-left: 5px; 241 | text-transform: uppercase; 242 | z-index:100001; 243 | } 244 | 245 | .demo-links div { 246 | display:inline; 247 | margin-right:7px; 248 | margin-left:7px; 249 | } 250 | 251 | .demo-links i { 252 | padding:4px; 253 | } 254 | 255 | /* 256 | .navbar-top { 257 | background-color: #3c565d; 258 | border:none; 259 | font-size: 14px; 260 | font-weight: 700; 261 | } 262 | 263 | .navbar-nav > li > a { 264 | border: none; 265 | color: #FFF; 266 | padding: 6px 10px; 267 | text-decoration: none; 268 | } 269 | 270 | .social-nav { 271 | color: #FFF; 272 | float: right; 273 | font-size: 22px; 274 | } 275 | 276 | .nav > li > a:hover, .nav > li > a:focus { 277 | background-color: transparent; 278 | color: #cdcc73; 279 | text-decoration: none; 280 | } 281 | */ 282 | 283 | 284 | 285 | -------------------------------------------------------------------------------- /src/components/Opt18.vue: -------------------------------------------------------------------------------- 1 | 13 | 132 | -------------------------------------------------------------------------------- /src/style/index.scss: -------------------------------------------------------------------------------- 1 | @import './jsplumbtoolkit-demo'; 2 | @import './jsplumb-demo'; 3 | // @import './main'; 4 | 5 | 6 | * { 7 | margin: 0; 8 | padding: 0; 9 | box-sizing: border-box; 10 | &::before, 11 | &::after { 12 | box-sizing: border-box; 13 | } 14 | } 15 | 16 | body { 17 | font-size: 14px; 18 | color: #000; 19 | } 20 | 21 | * { 22 | scrollbar-face-color: rgba(22, 39, 67, 0.3); 23 | /*面子*/ 24 | scrollbar-arrow-color: #00adfe; 25 | /*箭头*/ 26 | scrollbar-3dlight-color: #C0C0C0; 27 | /*最外左*/ 28 | scrollbar-highlight-color: #FFFFFF; 29 | /*左二*/ 30 | scrollbar-shadow-color: #FFFFFF; 31 | /*右二*/ 32 | scrollbar-darkshadow-color: #C0C0C0; 33 | /*右一*/ 34 | scrollbar-track-color: rgba(22, 39, 67, 0.3); 35 | /*滑道*/ 36 | } 37 | 38 | /*滚动条整体*/ 39 | 40 | ::-webkit-scrollbar { 41 | // width: 10px; 42 | // height: 10px; 43 | /*滚动条宽度*/ 44 | } 45 | 46 | ::-moz-scrollbar { 47 | // width: 10px; 48 | /*滚动条宽度*/ 49 | } 50 | 51 | ::-o-scrollbar { 52 | // width: 10px; 53 | /*滚动条宽度*/ 54 | } 55 | 56 | ::-ms-scrollbar { 57 | // width: 10px; 58 | /*滚动条宽度*/ 59 | } 60 | 61 | ::-webkit-scrollbar-track { 62 | // background-color: rgba(22, 39, 67, 0.3); 63 | /*滑道全部*/ 64 | } 65 | 66 | ::-moz-scrollbar-track { 67 | // background-color: rgba(22, 39, 67, 0.3); 68 | /*滑道全部*/ 69 | } 70 | 71 | ::-o-scrollbar-track { 72 | // background-color: rgba(22, 39, 67, 0.3); 73 | /*滑道全部*/ 74 | } 75 | 76 | ::-ms-scrollbar-track { 77 | // background-color: rgba(22, 39, 67, 0.3); 78 | /*滑道全部*/ 79 | } 80 | 81 | ::-webkit-scrollbar-track-piece { 82 | // background-color: rgba(22, 39, 67, 0.3); 83 | /*滑道*/ 84 | -webkit-border-radius: 4px; 85 | /*滑道圆角宽度*/ 86 | } 87 | 88 | ::-moz-scrollbar-track-piece { 89 | // background-color: rgba(22, 39, 67, 0.3); 90 | /*滑道*/ 91 | -webkit-border-radius: 4px; 92 | /*滑道圆角宽度*/ 93 | } 94 | 95 | ::-o-scrollbar-track-piece { 96 | // background-color: rgba(22, 39, 67, 0.3); 97 | /*滑道*/ 98 | -webkit-border-radius: 4px; 99 | /*滑道圆角宽度*/ 100 | } 101 | 102 | ::-ms-scrollbar-track-piece { 103 | // background-color: rgba(22, 39, 67, 0.3); 104 | /*滑道*/ 105 | -webkit-border-radius: 4px; 106 | /*滑道圆角宽度*/ 107 | } 108 | 109 | ::-webkit-scrollbar-thumb { 110 | background-color: #00adfe; 111 | /*滑动条表面*/ 112 | border: solid 1px rgba(255, 255, 255, 0.2); 113 | /*滑动条边框*/ 114 | border-radius: 4px; 115 | /*滑动条圆角宽度*/ 116 | } 117 | 118 | ::-moz-scrollbar-thumb { 119 | background-color: #00adfe; 120 | /*滑动条表面*/ 121 | border: solid 1px rgba(255, 255, 255, 0.2); 122 | /*滑动条边框*/ 123 | border-radius: 4px; 124 | /*滑动条圆角宽度*/ 125 | } 126 | 127 | ::-o-scrollbar-thumb { 128 | background-color: #00adfe; 129 | /*滑动条表面*/ 130 | border: solid 1px rgba(255, 255, 255, 0.2); 131 | /*滑动条边框*/ 132 | border-radius: 4px; 133 | /*滑动条圆角宽度*/ 134 | } 135 | 136 | ::-ms-scrollbar-thumb { 137 | background-color: #00adfe; 138 | /*滑动条表面*/ 139 | border: solid 1px rgba(255, 255, 255, 0.2); 140 | /*滑动条边框*/ 141 | border-radius: 4px; 142 | /*滑动条圆角宽度*/ 143 | } 144 | 145 | /*横竖滚动条交角*/ 146 | 147 | ::-webkit-scrollbar-corner { 148 | background-color: rgba(22, 39, 67, 0.3); 149 | } 150 | 151 | ::-moz-scrollbar-corner { 152 | background-color: rgba(22, 39, 67, 0.3); 153 | } 154 | 155 | ::-o-scrollbar-corner { 156 | background-color: rgba(22, 39, 67, 0.3); 157 | } 158 | 159 | ::-ms-scrollbar-corner { 160 | background-color: rgba(22, 39, 67, 0.3); 161 | } 162 | 163 | /*横竖滚动条交角图案*/ 164 | 165 | ::-webkit-resizer { 166 | /*background-image: url(/public/img/resizer-inactive.png);*/ 167 | background-repeat: no-repeat; 168 | background-position: bottom right; 169 | } 170 | 171 | ::-moz-resizer { 172 | /*background-image: url(/public/img/resizer-inactive.png);*/ 173 | background-repeat: no-repeat; 174 | background-position: bottom right; 175 | } 176 | 177 | ::-o-resizer { 178 | /*background-image: url(/public/img/resizer-inactive.png);*/ 179 | background-repeat: no-repeat; 180 | background-position: bottom right; 181 | } 182 | 183 | ::-ms-resizer { 184 | /*background-image: url(/public/img/resizer-inactive.png);*/ 185 | background-repeat: no-repeat; 186 | background-position: bottom right; 187 | } 188 | 189 | /*鼠标滑过滑动条*/ 190 | 191 | ::-webkit-scrollbar-thumb:hover { 192 | background-color: #00adfe; 193 | } 194 | 195 | ::-moz-scrollbar-thumb:hover { 196 | background-color: #00adfe; 197 | } 198 | 199 | ::-o-scrollbar-thumb:hover { 200 | background-color: #00adfe; 201 | } 202 | 203 | ::-ms-scrollbar-thumb:hover { 204 | background-color: #00adfe; 205 | } 206 | 207 | /*滚动条的重写end*/ 208 | 209 | /*添加滚动条start*/ 210 | 211 | textarea { 212 | overflow-y: auto; 213 | } 214 | 215 | /*添加滚动条end*/ 216 | 217 | #app { 218 | width: 100vw; 219 | height: 100vh; 220 | position: relative; 221 | } 222 | 223 | .el-header, 224 | .el-footer { 225 | background-color: #545c64; 226 | color: #333; 227 | } 228 | 229 | .el-aside { 230 | background-color: #D3DCE6; 231 | color: #333; 232 | } 233 | 234 | .el-main { 235 | background-color: #E9EEF3; 236 | color: #333; 237 | padding: 0; 238 | } 239 | 240 | .container { 241 | width: 100%; 242 | height: 100%; 243 | .main { 244 | height: 100%; 245 | width: 100%; 246 | } 247 | } 248 | 249 | .template-box { 250 | padding: 10px 20px; 251 | .header { 252 | padding: 5px; 253 | border-bottom: 1px solid #000; 254 | font-size: 16px; 255 | .add { 256 | float: right; 257 | font-size: 20px; 258 | color: #409EFF; 259 | cursor: pointer; 260 | } 261 | } 262 | .template-list { 263 | padding: 5px; 264 | color: #000; 265 | } 266 | .item { 267 | line-height: 35px; 268 | cursor: pointer; 269 | color: #545c64; 270 | font-size: 14px; 271 | &.active { 272 | color: #409EFF; 273 | } 274 | &:hover { 275 | color: #409EFF; 276 | } 277 | a { 278 | text-decoration: none; 279 | color: #545c64; 280 | font-size: 14px; 281 | &:hover { 282 | color: #409EFF; 283 | } 284 | } 285 | } 286 | } 287 | 288 | .btn-save { 289 | position: absolute; 290 | top: 0; 291 | right: 10px; 292 | z-index: 999999; 293 | } 294 | .btn-save-img { 295 | position: absolute; 296 | top: 0; 297 | right: 90px; 298 | z-index: 999999; 299 | } 300 | 301 | .workplace { 302 | .chart-dot { 303 | opacity: 0; 304 | } 305 | .chart-dot-hover { 306 | opacity: 1; 307 | circle { 308 | fill: #00adfe; 309 | } 310 | } 311 | } 312 | -------------------------------------------------------------------------------- /src/style/jsplumb-demo.scss: -------------------------------------------------------------------------------- 1 | .jtk-demo { 2 | width: 100%; 3 | height: 100%; 4 | position: relative; 5 | } 6 | 7 | .jtk-demo-canvas { 8 | height: 100%; 9 | } 10 | 11 | .jtk-bootstrap { 12 | min-height: 100vh; 13 | display: flex; 14 | flex-direction: column; 15 | } 16 | 17 | .jtk-bootstrap .jtk-page-container { 18 | display: flex; 19 | width: 100vw; 20 | justify-content: center; 21 | flex: 1; 22 | } 23 | 24 | .jtk-bootstrap .jtk-container { 25 | width: 60%; 26 | max-width: 800px; 27 | } 28 | 29 | .jtk-bootstrap-wide .jtk-container { 30 | width: 80%; 31 | max-width: 1187px; 32 | } 33 | 34 | .jtk-demo-main { 35 | position: relative; 36 | } 37 | 38 | .jtk-demo-main .description { 39 | font-size: 13px; 40 | margin-top: 25px; 41 | padding: 13px; 42 | margin-bottom: 22px; 43 | background-color: #f4f5ef; 44 | } 45 | 46 | .jtk-demo-main .description li { 47 | list-style-type: disc !important; 48 | } 49 | 50 | .jtk-demo-canvas { 51 | border: 1px solid #CCC; 52 | background-color: white; 53 | display: flex; 54 | } 55 | 56 | .canvas-wide { 57 | margin-left: 0; 58 | } 59 | 60 | .miniview { 61 | position: absolute; 62 | top: 25px; 63 | right: 25px; 64 | z-index: 100; 65 | } 66 | 67 | .jtk-demo-dataset { 68 | text-align: left; 69 | max-height: 600px; 70 | overflow: auto; 71 | } 72 | 73 | .demo-title { 74 | float: left; 75 | font-size: 18px; 76 | } 77 | 78 | .controls { 79 | top: 25px; 80 | color: #FFF; 81 | margin-right: 10px; 82 | position: absolute; 83 | left: 25px; 84 | z-index: 1; 85 | } 86 | 87 | .controls i { 88 | background-color: #3E7E9C; 89 | border-radius: 4px; 90 | cursor: pointer; 91 | margin-right: 0; 92 | padding: 4px; 93 | } 94 | 95 | li { 96 | list-style-type: none; 97 | } 98 | 99 | /* ------------------------ node palette -------------------- */ 100 | 101 | .sidebar { 102 | margin: 0; 103 | padding: 0; 104 | padding-top: 7px; 105 | padding-right: 10px; 106 | width: 150px; 107 | float: left; 108 | text-align: center; 109 | height: 550px; 110 | background-color: #84acb3; 111 | } 112 | 113 | .sidebar ul li { 114 | background-color: #234b5e; 115 | border-radius: 11px; 116 | color: #f7ebca; 117 | cursor: move; 118 | margin-bottom: 10px; 119 | margin-left: 6px; 120 | padding: 8px; 121 | width: 128px; 122 | } 123 | 124 | .sidebar ul { 125 | width: 100%; 126 | padding: 0; 127 | } 128 | 129 | .sidebar ul li:hover { 130 | background-color: #577a8b; 131 | } 132 | 133 | .sidebar i { 134 | float: left; 135 | } 136 | 137 | @media (max-width: 600px) { 138 | .sidebar { 139 | float: none; 140 | height: 55px; 141 | width: 100%; 142 | padding-top: 0; 143 | } 144 | .sidebar ul li { 145 | display: inline-block; 146 | margin-top: 7px; 147 | width: 67px; 148 | } 149 | .jtk-demo-canvas { 150 | margin-left: 0; 151 | margin-top: 10px; 152 | height: 364px; 153 | } 154 | } 155 | 156 | /* ---------------------------------------------------------------------------------------------------- */ 157 | 158 | /* --- jsPlumb setup ---------------------------------------------------------------------------------- */ 159 | 160 | /* ---------------------------------------------------------------------------------------------------- */ 161 | 162 | .jtk-connector { 163 | z-index: 9; 164 | } 165 | 166 | .jtk-endpoint { 167 | z-index: 12; 168 | opacity: 0.8; 169 | cursor: pointer; 170 | } 171 | 172 | .jtk-overlay { 173 | background-color: white; 174 | color: #434343; 175 | font-weight: 400; 176 | padding: 4px; 177 | z-index: 10; 178 | } 179 | 180 | .jtk-overlay.jtk-hover { 181 | color: #434343; 182 | } 183 | 184 | path { 185 | cursor: pointer; 186 | } 187 | 188 | .delete { 189 | padding: 2px; 190 | cursor: pointer; 191 | float: left; 192 | font-size: 10px; 193 | line-height: 20px; 194 | } 195 | 196 | .add, 197 | .edit { 198 | cursor: pointer; 199 | float: right; 200 | font-size: 10px; 201 | line-height: 20px; 202 | margin-right: 2px; 203 | padding: 2px; 204 | } 205 | 206 | .edit:hover { 207 | color: #ff8000; 208 | } 209 | 210 | .selected-mode { 211 | color: #E4F013; 212 | } 213 | 214 | .connect { 215 | width: 10px; 216 | height: 10px; 217 | background-color: #f76258; 218 | position: absolute; 219 | bottom: 13px; 220 | right: 5px; 221 | } 222 | 223 | /* header styles */ 224 | 225 | .demo-links { 226 | position: fixed; 227 | right: 0; 228 | top: 57px; 229 | font-size: 11px; 230 | background-color: white; 231 | opacity: 0.8; 232 | padding-right: 10px; 233 | padding-left: 5px; 234 | text-transform: uppercase; 235 | z-index: 100001; 236 | } 237 | 238 | .demo-links div { 239 | display: inline; 240 | margin-right: 7px; 241 | margin-left: 7px; 242 | } 243 | 244 | .demo-links i { 245 | padding: 4px; 246 | } 247 | 248 | .workplace { 249 | // padding: 20px; 250 | .chart-item { 251 | position: absolute; 252 | } 253 | .workplace-chart { 254 | position: absolute; 255 | } 256 | } 257 | 258 | .box-card { 259 | .header { 260 | padding: 10px 20px; 261 | border-bottom: 1px solid #000; 262 | } 263 | .card-body { 264 | padding: 20px; 265 | cursor: pointer; // text-align: center; 266 | .item { 267 | margin-bottom: 20px; 268 | i { 269 | margin-right: 10px 270 | } 271 | &.ui-draggable-dragging { 272 | z-index: 1; 273 | text-align: center; 274 | margin: 0; 275 | i { 276 | display: inline-block; 277 | margin-right: 0; 278 | margin-bottom: 5px; 279 | font-size: 20px; 280 | color: #409EFF; 281 | background-repeat: no-repeat; 282 | background-position: center; 283 | cursor: pointer; 284 | touch-action: none; 285 | -moz-user-select: none; 286 | -khtml-user-select: none; 287 | user-select: none; 288 | &.circle { 289 | background-image: url(../assets/images/circle.png); 290 | width: 60px; 291 | height: 60px; 292 | line-height: 60px; 293 | background-size: 100%; 294 | } 295 | &.diamond { 296 | background-image: url(../assets/images/diamond.png); 297 | width: 60px; 298 | height: 60px; 299 | line-height: 60px; 300 | background-size: 100%; 301 | } 302 | } 303 | span { 304 | display: block; 305 | } 306 | } 307 | } 308 | } 309 | } 310 | 311 | 312 | .chart-item { 313 | display: inline-block; 314 | text-align: center; 315 | background-repeat: no-repeat; 316 | background-position: center; 317 | cursor: pointer; 318 | touch-action: none; 319 | -moz-user-select: none; 320 | -khtml-user-select: none; 321 | user-select: none; 322 | &.circle { 323 | background-image: url(../assets/images/circle.png); 324 | width: 50px; 325 | height: 51px; 326 | line-height: 50px; 327 | background-size: 100%; 328 | } 329 | &.diamond { 330 | background-image: url(../assets/images/diamond.png); 331 | width: 50px; 332 | height: 50px; 333 | line-height: 50px; 334 | background-size: 100%; 335 | } 336 | &.ellipse { 337 | background-image: url(../assets/images/ellipse.png); 338 | width: 90px; 339 | height: 30px; 340 | line-height: 30px; 341 | background-size: 100%; 342 | } 343 | &.rectangle { 344 | background-image: url(../assets/images/rectangle.png); 345 | width: 90px; 346 | height: 30px; 347 | line-height: 30px; 348 | background-size: 100%; 349 | } 350 | } 351 | -------------------------------------------------------------------------------- /src/components/Opt16.vue: -------------------------------------------------------------------------------- 1 | 18 | 108 | -------------------------------------------------------------------------------- /src/components/Opt21.vue: -------------------------------------------------------------------------------- 1 | 18 | 240 | -------------------------------------------------------------------------------- /src/components/Opt12.vue: -------------------------------------------------------------------------------- 1 | 24 | 144 | -------------------------------------------------------------------------------- /src/components/Opt17.vue: -------------------------------------------------------------------------------- 1 | 15 | 141 | -------------------------------------------------------------------------------- /docs/Concepts.md: -------------------------------------------------------------------------------- 1 | ## 基本概念 2 | ### 介绍 3 | - Anchor - 锚点。一个位置，相对于元素的原点、终点存在。 向各种jsPlumb函数提供提示，并根据需要创建它们。他们没有视觉表现; 他们只是一个```合乎逻辑```的位置。可以通过名称引用锚，对于jsPlumb附带的Anchors或包含各种参数的数组，可以进行更好的控制。```不要自己创造锚点``` 4 | - Endpoint - 端点。可以创建这些元素并将它们附加到元素上，需要执行这些元素才能支持```drag drop```操作，或者让jsPlumb在创建```Connection``` ```jsPlumb.connect(...)```时创建它们。可以将它们作为参数传递给两个端点```jsPlumb.connect(...)``` 5 | - Connector - 连接器。连接页面中两个元素的直线的直观表示。jsPlumb有四种类型的默认值可供选择 - ``` a Bezier curve, a straight line, 'flowchart' connectors and 'state machine' connectors```贝塞尔曲线，直线，折线和'状态机'连接器。使用时只需要定义即可。 6 | - Overlay - 覆盖。用于装饰连接器的UI组件，例如标签，箭头等。 7 | - Group - 组。包含在某个其他元素中的一组元素，可以将其折叠，从而导致与所有组成员的连接被集中到折叠的组容器中。 8 | --- 9 | > 无论何时你需要定义一个Connector，Endpoint，Anchor或Overlay，你都必须使用它的“定义”，而不是直接构造一个。 10 | 全部四种定义示例 11 | ``` 12 | var common = { 13 | cssClass:"myCssClass" 14 | }; 15 | jsPlumb.connect({ 16 | source:"someDiv", 17 | target:"someOtherDiv", 18 | anchor:[ "Continuous", { faces:["top","bottom"] }], 19 | endpoint:[ "Dot", { radius:5, hoverClass:"myEndpointHover" }, common ], 20 | connector:[ "Bezier", { curviness:100 }, common ], 21 | overlays: [ 22 | [ "Arrow", { foldback:0.2 }, common ], 23 | [ "Label", { cssClass:"labelClass" } ] 24 | ] 25 | }); 26 | ``` 27 | ## Anchor - 锚点 28 | ### 静态锚 29 | jsPlumb有九个默认锚点位置，可用于指定连接器连接到元素的位置：这些元素是元素的四个角点，元素的中心和元素每个边缘的中点 30 | - Top（也作为别名TopCenter） 31 | - TopRight 32 | - Right（也作为别名RightMiddle） 33 | - BottomRight 34 | - Bottom（也作为别名BottomCenter） 35 | - BottomLeft 36 | - Left（也作为别名LeftMiddle） 37 | - TopLeft 38 | - Center 39 | 40 | 每个这些字符串表示的仅仅是围绕着底层基于阵列的语法的包装 [x, y, dx, dy]。其中，x和y是在间隔坐标[0,1]指定锚的位置，并且dx和dy，其指定曲线入射的定向至锚定，可具有一个值为0,1或-1。一下两种方式均表示向下连接： 41 | ``` 42 | jsPlumb.connect({...., anchor:"Bottom", ... }); 43 | jsPlumb.connect({...., anchor:[ 0.5, 1, 0, 1 ], ... }); 44 | ``` 45 | 除了提供锚点的位置和方向之外，还可以选择提供另外两个参数，这些参数用于定义距给定位置的像素偏移量。这是上面指定的锚点，但是在y轴的元素下方有一个50像素的偏移量： 46 | ``` 47 | jsPlumb.connect({...., anchor:[ 0.5, 1, 0, 1, 0, 50 ], ... }); 48 | ``` 49 | ### 动态锚 50 | 这些锚可以放置在多个位置之一，选择一个最适合的位置。 51 | ``` 52 | // 没有用于创建动态锚的特殊语法; 您只需提供一组单独的静态锚定规范，例如： 53 | var dynamicAnchors = [ [ 0.2, 0, 0, -1 ], [ 1, 0.2, 1, 0 ], [ 0.8, 1, 0, 1 ], [ 0, 0.8, -1, 0 ] ]; 54 | jsPlumb.connect({...., anchor:dynamicAnchors, ... }); 55 | 56 | // 请注意，您可以混合使用这些单独的静态锚定规范的类型： 57 | var dynamicAnchors = [ [ 0.2, 0, 0, -1 ], [ 1, 0.2, 1, 0 ], "Top", "Bottom" ]; 58 | jsPlumb.connect({...., anchor:dynamicAnchors, ... }); 59 | 60 | // jsPlumb提供了一个默认动态锚AutoDefault，从Top，Right，Bottom和Left中选择 61 | jsPlumb.connect({...., anchor:"AutoDefault", ... }); 62 | ``` 63 | ### 周长锚 64 | 这些是动态锚的一种形式，锚定位置是从某个给定形状的周边中选择的。jsPlumb支持六种形状： 65 | - Circle 66 | - Ellipse 67 | - Triangle 68 | - Diamond 69 | - Rectangle 70 | - Square 71 | 72 | 默认60个锚点，可更改 73 | ``` 74 | jsPlumb.addEndpoint("someDiv", { 75 | endpoint:"Dot", 76 | anchor:[ "Perimeter", { shape:"Square", anchorCount:150 }] 77 | }); 78 | ``` 79 | 旋转.`请注意，必须以度数而非弧度提供该值，并且该数字可以是正数也可以是负数。` 80 | ``` 81 | jsPlumb.connect({ 82 | source:"someDiv", 83 | target:"someOtherDiv", 84 | endpoint:"Dot", 85 | anchors:[ 86 | [ "Perimeter", { shape:"Triangle", rotation:25 } ], 87 | [ "Perimeter", { shape:"Triangle", rotation:-335 } ] 88 | ] 89 | }); 90 | ``` 91 | ### 连续锚 92 | 这些锚点的位置由jsPlumb根据Connection中元素之间的方向计算，还有多少个其他连续锚点恰好共享该元素。您可以使用字符串语法来指定要使用连续锚点，您将使用该语法来指定默认静态锚点之一: 93 | ``` 94 | // 连接中指定 95 | jsPlumb.connect({ 96 | source:someDiv, 97 | target:someOtherDiv, 98 | anchor:"Continuous" 99 | }); 100 | jsPlumb.connect({ 101 | source:someDiv, 102 | target:someOtherDiv, 103 | anchors:["Bottom", "Continuous"] 104 | }); 105 | 106 | // addEndpoint中指定 107 | jsPlumb.addEndpoint(someDiv, { 108 | anchor:"Continuous", 109 | paintStyle:{ fill:"red" } 110 | }); 111 | 112 | // makeSource/makeTarget 中指定 113 | jsPlumb.makeSource(someDiv, { 114 | anchor:"Continuous", 115 | paintStyle:{ fill:"red" } 116 | }); 117 | 118 | jsPlumb.makeTarget(someDiv, { 119 | anchor:"Continuous", 120 | paintStyle:{ fill:"red" } 121 | }); 122 | 123 | // 默认值中指定 124 | jsPlumb.Defaults.Anchor = "Continuous"; 125 | ``` 126 | 连续锚允许值,设置faces指定。允许值为： - top - left - right -bottom。如果为faces参数提供了一个空数组，jsPlumb将默认使用全部四个面。 127 | ``` 128 | jsPlumb.makeSource(someDiv, { 129 | anchor:["Continuous", { faces:[ "top", "left" ] } ] 130 | }); 131 | ``` 132 | ### 关联css 133 | 默认前缀`endpointAnchorClass`，该值为`jtk-endpoint-anchor-` 134 | ``` 135 | var ep = jsPlumb.addEndpoint("someDiv", { 136 | anchor:[0.5, 0, 0, -1, 0, 0, "top" ] 137 | }; 138 | ``` 139 | 然后，由jsPlumb创建的端点以及该元素someDiv将会为其分配这个类：`jtk-endpoint-anchor-top`. 140 | > 如果您提供的类名由多个词组成，则jsPlumb不会在该类中的每个词语前加上前缀 141 | ``` 142 | var ep = jsPlumb.addEndpoint("someDiv", { 143 | anchor:[ 0.5, 0, 0, -1, 0, 0, "foo bar" ] 144 | }); 145 | ``` 146 | 将导致2个类被添加到端点和元素`jtk-endpoint-anchor-foo`和`bar` 147 | 更改前缀可用下列方法 148 | ``` 149 | jsPlumb.endpointAnchorClass = "anchor_"; 150 | ``` 151 | 或 152 | ``` 153 | var jp = jsPlumb.getInstance(); 154 | jp.endpointAnchorClass = "anchor_"; 155 | ``` 156 | --- 157 | ## Endpoint - 端点 158 | - 创建方式 159 | - 当您调用jsPlumb.connect(..)并传递元素ID或DOM元素作为源/目标时，会创建并分配新的端点。 160 | - 当你调用jsPlumb.addEndpoint(...)一个新的端点被创建（并从调用返回） 161 | - 当您使用jsPlumb.makeSource(...)后续配置元素并随后从该元素拖动连接时，会创建并分配新的端点。 162 | - 端点类型 163 | - Dot 点 164 | - radius 165 | - cssClass 166 | - hoverClass 167 | - Rectangle 矩形 168 | - width 169 | - height 170 | - cssClass 171 | - hoverClass 172 | - Image 图片 173 | - src 174 | - cssClass 175 | - hoverClass 176 | - Blank 空白不可见 177 | --- 178 | ## Connector - 连接器 179 | - Bezier 180 | - curviness 可选的; 默认值为150.弯曲度 181 | - Straight 182 | - stub 可选的; 默认值为0. 183 | - gap 可选的; 默认值为0.间隔 184 | - Flowchart 185 | - stub 这是从端点发出的初始线的最小长度（以像素为单位）。可选，可以是指定连接器每个端点的存根的整数，也可以是指定连接端点的两个整数数组。默认为一个值为30像素的整数 186 | - alwaysRespectStubs 可选，默认为false。 187 | - gap 可选的; 默认值为0.间隔 188 | - midpoint 可选，默认为0.5。长部分将被绘制的两个元素之间的距离 189 | - cornerRadius 可选的; 默认值为0.弯曲的角部分 190 | - State Machine 191 | - margin 可选的; 默认为5.定义连接器开始/结束元素的距离。 192 | - curviness 可选的; 默认值为150.弯曲度 193 | - proximityLimit 可选，默认值为80.连接器两端之间的最小距离将其绘制为直线而不是二次贝塞尔曲线。 194 | --- 195 | ## Overlay - 覆盖 196 | - Overlays types 类型 197 | - Arrow 箭头 198 | - width 199 | - length 200 | - location 201 | - direction 202 | - foldback 203 | - paintStyle 204 | - Label 标签 205 | - label 206 | - cssClass 207 | - labelStyle 208 | - font 209 | - fill 210 | - color 211 | - padding 212 | - borderWidth 213 | - borderStyle 214 | - location 215 | - PlainArrow 三角形 216 | - Diamond 菱形 217 | - Custom 自定义 218 | - Position 219 | - 作为[0..1]范围内的小数，表示沿连接器刻出的路径的一定比例的行程量 220 | - 作为大于0的整数，表示从起点沿着连接器偏移的像素值 221 | - 作为小于0的整数，表示从终点点沿着连接器偏移的像素值 222 | - get/set 223 | - getLocation 224 | - setLocation 225 | - Add 添加 226 | - jsPlumb.connect 227 | ``` 228 | // 连接在它的一半处有一个箭头，并且标签“foo”的四分之一处 229 | jsPlumb.connect({ 230 | ... 231 | overlays:[ 232 | "Arrow", 233 | [ "Label", { label:"foo", location:0.25, id:"myLabel" } ] 234 | ], 235 | ... 236 | }); 237 | ``` 238 | - jsPlumb.addEndpoint 239 | ``` 240 | // 该连接将在连接的头部有一个10x30箭头，标签“foo”位于中间点。端点本身也有一个覆盖层，位于相对于端点顶部左角的[-0.5 *宽度，-0.5 *高度] 241 | jsPlumb.addEndpoint("someDiv", { 242 | ... 243 | overlays:[ 244 | [ "Label", { label:"foo", id:"label", location:[-0.5, -0.5] } ] 245 | ], 246 | connectorOverlays:[ 247 | [ "Arrow", { width:10, length:30, location:1, id:"arrow" } ], 248 | [ "Label", { label:"foo", id:"label" } ] 249 | ], 250 | ... 251 | }); 252 | ``` 253 | - jsPlumb.makeSource 254 | ``` 255 | // 该连接将在连接的头部有一个10x30箭头，标签“foo”位于中间点。 256 | jsPlumb.makeSource("someDiv", { 257 | ... 258 | endpoint:{ 259 | connectorOverlays:[ 260 | [ "Arrow", { width:10, length:30, location:1, id:"arrow" } ], 261 | [ "Label", { label:"foo", id:"label" } ] 262 | ] 263 | } 264 | ... 265 | }); 266 | ``` 267 | - Hiding/Showing 268 | 您可以使用`setVisible`叠加层本身的方法或使用`showOverlay(id)`或`hideOverlay(id)`在连接上控制`overlay`的可见性。 269 | - Removing 270 | 使用`removeOverlay`删除`overlay` 271 | --- 272 | ## group - 组 273 | ### Adding a Group 添加 274 | ``` 275 | jsPlumb.addGroup({ 276 | el:"foo", 277 | id:"aGroup", 278 | collapsed:true // 折叠 279 | 280 | }); 281 | ``` 282 | 这里我们创建了一个带ID的组aGroup。它的元素foo将会被拖放，并且它也将被配置为接受被拖放到它上面的元素。默认情况下，子元素可以在组元素之外拖动，但是如果它们没有被拖放到另一个组上，它们将在被拖动之前恢复到它们在组元素内的位置。 283 | - Group element parameters 组元素参数 284 | - draggable 默认值为true 285 | - dragOptions 拖拽参数 286 | - filter 元素过滤 287 | - droppable 默认值为true 288 | - dropOptions 拖放参数 289 | - proxied 代理，默认值为true。代理子元素的连接 290 | - Child element behaviour parameters 子元素参数 291 | - revert 恢复，默认值为true。 292 | - prune 剪裁，默认值为false。如果为true，超出组元素外的空白子元素将删除，包括从实例中以及连接。 293 | - orphan 孤立，默认值为false。如果为true，超出组元素外的空白子元素将删除，不包括从实例中删除。 294 | - ghost 孤立，默认值为false。If true, a child element that is dragged outside of the Group element will have its original element left in place, and a 'ghost' element - a clone of the original - substituted, which tracks with the mouse. 295 | - dropOverride 默认值为false。如果为true，则可以将子元素拖到Group元素之外（假设没有其他标志阻止），但可能不会将其放到其他组中。 296 | ### Removing a Group 删除 297 | ``` 298 | jsPlumb.removeGroup("aGroup"); 299 | jsPlumb.removeGroup("aGroup", true); // 删除全部包括子元素 300 | ``` 301 | ### Proxy Endpoints 代理端点 302 | ``` 303 | jsPlumb.addGroup({ 304 | el:someElement, 305 | id:"aGroup", 306 | anchor:"TopLeft", 307 | endpoint:[ "Rectangle", { width:10, height:10 } ] 308 | }); 309 | ``` 310 | ### methods 311 | - addToGroup(group, el) 添加 312 | - removeGromGroup(el) 移除 313 | - collapseGroup(group) 折叠 314 | - expandGroup(group) 展开 315 | - getGroup(ID) 检索 316 | - getGroupFor(el/ID) 找出元素所属的组 317 | - getMembers 获取组的成员 318 | --- 319 | ## Element Dragging 元素拖动 320 | `基于Katavio.js插件`[https://github.com/jsplumb/katavorio](https://github.com/jsplumb/katavorio) 321 | 322 | --- 323 | -------------------------------------------------------------------------------- /src/components/Opt11.vue: -------------------------------------------------------------------------------- 1 | 13 | 186 | -------------------------------------------------------------------------------- /src/components/Opt31.vue: -------------------------------------------------------------------------------- 1 | 66 | 67 | 361 | -------------------------------------------------------------------------------- /src/components/Opt19.vue: -------------------------------------------------------------------------------- 1 | 105 | 262 | -------------------------------------------------------------------------------- /src/components/Opt13.vue: -------------------------------------------------------------------------------- 1 | 14 | 249 | -------------------------------------------------------------------------------- /src/components/Opt22.vue: -------------------------------------------------------------------------------- 1 | 80 | 81 | 653 | --------------------------------------------------------------------------------