├── src ├── style │ ├── common │ │ ├── extends.scss │ │ ├── mixins.scss │ │ ├── color.scss │ │ └── base.scss │ ├── index.scss │ ├── components │ │ ├── menu.scss │ │ └── layout.scss │ └── page │ │ └── jsplumb-demo.scss ├── images │ ├── logo.png │ ├── circle.png │ ├── diamond.png │ ├── ellipse.png │ ├── rectangle.png │ ├── triangle.png │ ├── icon_end32px.png │ ├── icon_ren32px.png │ ├── icon_ren72px.png │ ├── img_zntitle.png │ ├── triangle_90.png │ ├── bj_searchpage.jpg │ ├── button_type01.png │ ├── button_type02.png │ ├── button_type03.png │ ├── button_type04.png │ ├── icon_chaji32px.png │ ├── icon_chaji72px.png │ ├── icon_excel32px.png │ ├── icon_excel72px.png │ ├── icon_imsi32px.png │ ├── icon_imsi72px.png │ ├── img_zhuangjia.png │ ├── bg_zhinengmokuai.png │ ├── icon_bingji32px.png │ ├── icon_bingji72px.png │ ├── icon_chepai32px.png │ ├── icon_chepai72px.png │ ├── icon_jiaoji32px.png │ ├── icon_jiaoji72px.png │ ├── icon_zn_end54px;.png │ ├── img_zhuangjialist.png │ ├── icon_zn_begin54px;.png │ └── logo-medium-jsplumb.png ├── store │ └── index.js ├── App.vue ├── views │ ├── layout │ │ └── index.vue │ ├── HelloWorld.vue │ ├── official-demos │ │ ├── PerimeterAnchors.vue │ │ ├── Chart.vue │ │ ├── DynamicAnchors.vue │ │ ├── SourcesAndTargets.vue │ │ ├── StateMachine.vue │ │ ├── FlowChart.vue │ │ ├── Groups.vue │ │ └── DragAndDrop.vue │ ├── DragToWorkplace.vue │ └── DemoChart.vue ├── components │ ├── menu │ │ ├── AppMenu.vue │ │ └── SubMenu.vue │ ├── ChartNode.vue │ ├── MyHeader.vue │ └── ChartGroup.vue ├── main.js ├── router │ ├── index.js │ └── route-official.js ├── assets │ ├── json │ │ └── group-demo.json │ └── js │ │ ├── rgbcolor.min.js │ │ ├── stackblur.min.js │ │ ├── rgbcolor.js │ │ └── stackblur.js └── utils │ └── menu.js ├── docs ├── README.md ├── Config.md └── Concepts.md ├── public ├── json │ ├── demo.json │ ├── json.2.json │ └── json.1.json └── favicon.ico ├── .eslintignore ├── jsconfig.json ├── .gitignore ├── vite.config.js ├── index.html ├── README.md ├── .eslintrc.js └── package.json /src/style/common/extends.scss: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /docs/README.md: -------------------------------------------------------------------------------- 1 | ## Home 2 | ```jsplumb```简易中文文档 -------------------------------------------------------------------------------- /public/json/demo.json: -------------------------------------------------------------------------------- 1 | { 2 | "data":1 3 | } -------------------------------------------------------------------------------- /.eslintignore: -------------------------------------------------------------------------------- 1 | index.html 2 | /dist 3 | /src/assets/js -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wangyu142857/jsplumb-example/HEAD/public/favicon.ico -------------------------------------------------------------------------------- /src/images/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wangyu142857/jsplumb-example/HEAD/src/images/logo.png -------------------------------------------------------------------------------- /src/images/circle.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wangyu142857/jsplumb-example/HEAD/src/images/circle.png -------------------------------------------------------------------------------- /src/images/diamond.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wangyu142857/jsplumb-example/HEAD/src/images/diamond.png -------------------------------------------------------------------------------- /src/images/ellipse.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wangyu142857/jsplumb-example/HEAD/src/images/ellipse.png -------------------------------------------------------------------------------- /src/images/rectangle.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wangyu142857/jsplumb-example/HEAD/src/images/rectangle.png -------------------------------------------------------------------------------- /src/images/triangle.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wangyu142857/jsplumb-example/HEAD/src/images/triangle.png -------------------------------------------------------------------------------- /src/images/icon_end32px.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wangyu142857/jsplumb-example/HEAD/src/images/icon_end32px.png -------------------------------------------------------------------------------- /src/images/icon_ren32px.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wangyu142857/jsplumb-example/HEAD/src/images/icon_ren32px.png -------------------------------------------------------------------------------- /src/images/icon_ren72px.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wangyu142857/jsplumb-example/HEAD/src/images/icon_ren72px.png -------------------------------------------------------------------------------- /src/images/img_zntitle.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wangyu142857/jsplumb-example/HEAD/src/images/img_zntitle.png -------------------------------------------------------------------------------- /src/images/triangle_90.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wangyu142857/jsplumb-example/HEAD/src/images/triangle_90.png -------------------------------------------------------------------------------- /src/images/bj_searchpage.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wangyu142857/jsplumb-example/HEAD/src/images/bj_searchpage.jpg -------------------------------------------------------------------------------- /src/images/button_type01.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wangyu142857/jsplumb-example/HEAD/src/images/button_type01.png -------------------------------------------------------------------------------- /src/images/button_type02.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wangyu142857/jsplumb-example/HEAD/src/images/button_type02.png -------------------------------------------------------------------------------- /src/images/button_type03.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wangyu142857/jsplumb-example/HEAD/src/images/button_type03.png -------------------------------------------------------------------------------- /src/images/button_type04.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wangyu142857/jsplumb-example/HEAD/src/images/button_type04.png -------------------------------------------------------------------------------- /src/images/icon_chaji32px.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wangyu142857/jsplumb-example/HEAD/src/images/icon_chaji32px.png -------------------------------------------------------------------------------- /src/images/icon_chaji72px.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wangyu142857/jsplumb-example/HEAD/src/images/icon_chaji72px.png -------------------------------------------------------------------------------- /src/images/icon_excel32px.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wangyu142857/jsplumb-example/HEAD/src/images/icon_excel32px.png -------------------------------------------------------------------------------- /src/images/icon_excel72px.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wangyu142857/jsplumb-example/HEAD/src/images/icon_excel72px.png -------------------------------------------------------------------------------- /src/images/icon_imsi32px.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wangyu142857/jsplumb-example/HEAD/src/images/icon_imsi32px.png -------------------------------------------------------------------------------- /src/images/icon_imsi72px.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wangyu142857/jsplumb-example/HEAD/src/images/icon_imsi72px.png -------------------------------------------------------------------------------- /src/images/img_zhuangjia.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wangyu142857/jsplumb-example/HEAD/src/images/img_zhuangjia.png -------------------------------------------------------------------------------- /src/images/bg_zhinengmokuai.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wangyu142857/jsplumb-example/HEAD/src/images/bg_zhinengmokuai.png -------------------------------------------------------------------------------- /src/images/icon_bingji32px.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wangyu142857/jsplumb-example/HEAD/src/images/icon_bingji32px.png -------------------------------------------------------------------------------- /src/images/icon_bingji72px.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wangyu142857/jsplumb-example/HEAD/src/images/icon_bingji72px.png -------------------------------------------------------------------------------- /src/images/icon_chepai32px.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wangyu142857/jsplumb-example/HEAD/src/images/icon_chepai32px.png -------------------------------------------------------------------------------- /src/images/icon_chepai72px.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wangyu142857/jsplumb-example/HEAD/src/images/icon_chepai72px.png -------------------------------------------------------------------------------- /src/images/icon_jiaoji32px.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wangyu142857/jsplumb-example/HEAD/src/images/icon_jiaoji32px.png -------------------------------------------------------------------------------- /src/images/icon_jiaoji72px.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wangyu142857/jsplumb-example/HEAD/src/images/icon_jiaoji72px.png -------------------------------------------------------------------------------- /src/images/icon_zn_end54px;.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wangyu142857/jsplumb-example/HEAD/src/images/icon_zn_end54px;.png -------------------------------------------------------------------------------- /src/images/img_zhuangjialist.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wangyu142857/jsplumb-example/HEAD/src/images/img_zhuangjialist.png -------------------------------------------------------------------------------- /src/images/icon_zn_begin54px;.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wangyu142857/jsplumb-example/HEAD/src/images/icon_zn_begin54px;.png -------------------------------------------------------------------------------- /src/images/logo-medium-jsplumb.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wangyu142857/jsplumb-example/HEAD/src/images/logo-medium-jsplumb.png -------------------------------------------------------------------------------- /src/store/index.js: -------------------------------------------------------------------------------- 1 | import { createStore } from 'vuex'; 2 | 3 | export default createStore({ 4 | state: { 5 | couter: 0, 6 | }, 7 | }); 8 | -------------------------------------------------------------------------------- /src/App.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 11 | -------------------------------------------------------------------------------- /src/style/common/mixins.scss: -------------------------------------------------------------------------------- 1 | @mixin flex($justify: flex-start, $align: flex-start) { 2 | display: flex; 3 | justify-content: $justify; 4 | align-items: $align; 5 | } 6 | -------------------------------------------------------------------------------- /jsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "baseUrl": ".", 4 | "paths": { 5 | "@/*": [ 6 | "./src/*" 7 | ], 8 | "style/*": [ 9 | "./src/style/*" 10 | ], 11 | } 12 | }, 13 | "exclude": [ 14 | "node_modules" 15 | ] 16 | } -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules/ 3 | dist/ 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | /test/unit/coverage/ 8 | /test/e2e/reports/ 9 | selenium-debug.log 10 | 11 | # Editor directories and files 12 | .idea 13 | .vscode 14 | *.suo 15 | *.ntvs* 16 | *.njsproj 17 | *.sln 18 | *.local 19 | -------------------------------------------------------------------------------- /vite.config.js: -------------------------------------------------------------------------------- 1 | import vue from '@vitejs/plugin-vue'; 2 | import path from 'path'; 3 | 4 | /** 5 | * @type {import('vite').UserConfig} 6 | */ 7 | export default { 8 | plugins: [vue()], 9 | alias: { 10 | '@': path.resolve(__dirname, 'src'), 11 | style: path.resolve(__dirname, 'src/style'), 12 | }, 13 | }; 14 | -------------------------------------------------------------------------------- /src/style/index.scss: -------------------------------------------------------------------------------- 1 | // 通用 2 | @import "./common/color.scss"; 3 | @import "./common/mixins.scss"; // 混合 4 | @import "./common/extends.scss"; // 继承 5 | @import "./common/base.scss"; 6 | 7 | // 组件 8 | @import "./components/layout.scss"; 9 | @import "./components/menu.scss"; 10 | 11 | // page 12 | @import "./page/jsplumb-demo.scss"; 13 | -------------------------------------------------------------------------------- /src/style/common/color.scss: -------------------------------------------------------------------------------- 1 | $black: #000; 2 | $black-light: #333; 3 | $white: #fff; 4 | $white-light: #f0f2f5; 5 | $white-light2: #ddd; 6 | $blue: #1890ff; 7 | $blue-light: #e6f7ff; 8 | 9 | $font: $black-light; 10 | $font-title: $black; 11 | 12 | $font-header: $white; 13 | $bg-header: $black; 14 | $bg-main: $white-light; 15 | 16 | $border: $white-light2; 17 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | jsplumb-example 9 | 10 | 11 | 12 |
13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # jsplumb-example 2 | 3 | demos: [https://wangyu142857.github.io/jsplumb-example/dist](https://wangyu142857.github.io/jsplumb-example/dist) 4 | 5 | > Use Jsplumb draw flow chart 6 | 7 | 简易`jsplumb`项目，实现基本流程图功能 8 | 9 | ## install 10 | 11 | ```bash 12 | npm ci 13 | ``` 14 | 15 | ## run 16 | 17 | ```bash 18 | npm run dev 19 | ``` 20 | 21 | > [Jsplumb官网 https://jsplumbtoolkit.com](https://jsplumbtoolkit.com) 22 | > [Jsplumb github https://github.com/jsplumb/jsplumb](https://github.com/jsplumb/jsplumb) 23 | -------------------------------------------------------------------------------- /src/views/layout/index.vue: -------------------------------------------------------------------------------- 1 | 17 | 18 | 26 | -------------------------------------------------------------------------------- /src/style/components/menu.scss: -------------------------------------------------------------------------------- 1 | .app-menu { 2 | padding-bottom: 20px; 3 | border-right: none; 4 | .el-menu-item { 5 | box-sizing: border-box; 6 | &:hover { 7 | color: $blue; 8 | background: transparent; 9 | } 10 | &.is-active { 11 | color: $blue; 12 | background: $blue-light; 13 | &::after { 14 | content: ""; 15 | position: absolute; 16 | top: 0; 17 | right: 0; 18 | bottom: 0; 19 | border-right: 4px solid $blue; 20 | } 21 | } 22 | } 23 | .menu-icon { 24 | width: 18px; 25 | text-align: center; 26 | margin-right: 5px; 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | env: { 3 | browser: true, 4 | es2021: true, 5 | node: true, 6 | }, 7 | extends: [ 8 | 'plugin:vue/vue3-recommended', 9 | 'airbnb-base', 10 | ], 11 | parserOptions: { 12 | ecmaVersion: 12, 13 | sourceType: 'module', 14 | }, 15 | plugins: [ 16 | 'vue', 17 | ], 18 | rules: { 19 | 'linebreak-style': ['off', 'windows'], 20 | 'no-plusplus': 'off', 21 | 'max-len': 'off', 22 | }, 23 | settings: { 24 | 'import/resolver': { 25 | alias: { 26 | map: [ 27 | ['@', './src'], 28 | ['style', './src/style'], 29 | ], 30 | }, 31 | }, 32 | }, 33 | }; 34 | -------------------------------------------------------------------------------- /src/components/menu/AppMenu.vue: -------------------------------------------------------------------------------- 1 | 15 | 16 | 35 | -------------------------------------------------------------------------------- /src/main.js: -------------------------------------------------------------------------------- 1 | import { createApp } from 'vue'; 2 | import ElementPlus from 'element-plus'; 3 | import 'element-plus/packages/theme-chalk/src/index.scss'; 4 | import router from '@/router/index'; 5 | import store from '@/store'; 6 | import App from './App.vue'; 7 | import 'normalize.css'; 8 | import 'style/index.scss'; 9 | 10 | const app = createApp(App) 11 | .use(ElementPlus) 12 | .use(router) 13 | .use(store); 14 | 15 | if (process.env.NODE_ENV === 'development') { 16 | app.config.devtools = true; 17 | } 18 | 19 | app.mount('#app'); 20 | // // jsplumb 21 | // import 'jsplumb/dist/js/jsplumb.min.js'; 22 | // import 'jsplumb/css/jsplumbtoolkit-defaults.css'; 23 | 24 | // // html2canvas 25 | // import html2canvas from 'html2canvas'; 26 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "juplumb-example", 3 | "version": "2.0.0", 4 | "description": "A juplumb project with vue", 5 | "author": "wangy", 6 | "private": true, 7 | "scripts": { 8 | "dev": "vite", 9 | "build": "vite build" 10 | }, 11 | "dependencies": { 12 | "@vitejs/plugin-vue": "^1.0.4", 13 | "axios": "^0.21.1", 14 | "element-plus": "latest", 15 | "font-awesome": "^4.7.0", 16 | "jsplumb": "^2.15.6", 17 | "loadsh": "0.0.4", 18 | "normalize.css": "^8.0.1", 19 | "vue": "^3.0.5", 20 | "vue-router": "^4.0.10", 21 | "vuex": "^4.0.2" 22 | }, 23 | "devDependencies": { 24 | "@vue/compiler-sfc": "^3.0.5", 25 | "eslint": "^7.29.0", 26 | "eslint-config-airbnb-base": "^14.2.1", 27 | "eslint-import-resolver-alias": "^1.1.2", 28 | "eslint-plugin-import": "^2.23.4", 29 | "eslint-plugin-vue": "^7.12.1", 30 | "sass": "^1.35.1", 31 | "vite": "^2.0.0-beta.12" 32 | }, 33 | "browserslist": [ 34 | "> 1%", 35 | "last 2 versions", 36 | "not ie <= 11" 37 | ] 38 | } 39 | -------------------------------------------------------------------------------- /src/router/index.js: -------------------------------------------------------------------------------- 1 | import { createRouter, createWebHashHistory } from 'vue-router'; 2 | 3 | import routeOfficial from './route-official'; // official-demos 4 | 5 | // import.meta.globEager 替换 webpack require.context 6 | const router = createRouter({ 7 | history: createWebHashHistory(), 8 | routes: [ 9 | { 10 | path: '/', 11 | redirect: '/layout', 12 | component: () => import('@/views/layout/index.vue'), 13 | children: [ 14 | { 15 | path: '/layout', 16 | component: () => import('@/views/HelloWorld.vue'), 17 | }, 18 | ...routeOfficial, 19 | // { 20 | // path: '/layout/demos/drag-to-workplace', 21 | // name: 'DragToWorkplace', 22 | // component: () => import('@/views/DragToWorkplace.vue'), 23 | // }, 24 | // { 25 | // path: '/layout/demos/demo-chart', 26 | // name: 'DemoChart', 27 | // component: () => import('@/views/DemoChart.vue'), 28 | // }, 29 | ], 30 | }, 31 | ], 32 | }); 33 | 34 | export default router; 35 | -------------------------------------------------------------------------------- /src/components/menu/SubMenu.vue: -------------------------------------------------------------------------------- 1 | 8 | 33 | 34 | 47 | -------------------------------------------------------------------------------- /src/assets/json/group-demo.json: -------------------------------------------------------------------------------- 1 | [{ 2 | "icon": "el-icon-loading", 3 | "id": "start", 4 | "nodeStyle": { 5 | "top": "10px", 6 | "left": "10px" 7 | }, 8 | "text": "开始", 9 | "type": "circle" 10 | }, 11 | { 12 | "icon": "el-icon-menu", 13 | "id": "038f9f38-b7f1-4ee3-bea5-db8c36130624", 14 | "nodeStyle": { 15 | "top": "387px", 16 | "left": "160px" 17 | }, 18 | "text": "节点", 19 | "type": "diamond" 20 | }, 21 | { 22 | "icon": "el-icon-location", 23 | "id": "1b87fc6f-e0d2-4ee4-9df9-b4952494eee6", 24 | "nodeStyle": { 25 | "top": "620px", 26 | "left": "160px" 27 | }, 28 | "text": "节点", 29 | "type": "diamond" 30 | }, 31 | { 32 | "icon": "el-icon-date", 33 | "id": "744627f4-5fc8-47d2-8fd2-cd1b3605d542", 34 | "nodeStyle": { 35 | "top": "387px", 36 | "left": "481px" 37 | }, 38 | "text": "节点", 39 | "type": "diamond" 40 | }, 41 | { 42 | "icon": "el-icon-upload", 43 | "id": "end", 44 | "nodeStyle": { 45 | "top": "387px", 46 | "left": "776px" 47 | }, 48 | "text": "结束", 49 | "type": "circle" 50 | } 51 | ] 52 | -------------------------------------------------------------------------------- /src/views/HelloWorld.vue: -------------------------------------------------------------------------------- 1 | 16 | 17 | 32 | 51 | -------------------------------------------------------------------------------- /src/style/common/base.scss: -------------------------------------------------------------------------------- 1 | body { 2 | font-size: 14px; 3 | color: $font; 4 | } 5 | 6 | * { 7 | scrollbar-face-color: rgba(22, 39, 67, 0.3); 8 | /*面子*/ 9 | scrollbar-arrow-color: #00adfe; 10 | /*箭头*/ 11 | scrollbar-3dlight-color: #c0c0c0; 12 | /*最外左*/ 13 | scrollbar-highlight-color: #ffffff; 14 | /*左二*/ 15 | scrollbar-shadow-color: #ffffff; 16 | /*右二*/ 17 | scrollbar-darkshadow-color: #c0c0c0; 18 | /*右一*/ 19 | scrollbar-track-color: rgba(22, 39, 67, 0.3); 20 | /*滑道*/ 21 | } 22 | 23 | /*滚动条整体*/ 24 | 25 | ::-webkit-scrollbar { 26 | width: 5px; 27 | height: 5px; 28 | /*滚动条宽度*/ 29 | } 30 | 31 | ::-webkit-scrollbar-track { 32 | background-color: rgba(22, 39, 67, 0.3); 33 | /*滑道全部*/ 34 | } 35 | ::-webkit-scrollbar-track-piece { 36 | background-color: rgba(22, 39, 67, 0.3); 37 | /*滑道*/ 38 | -webkit-border-radius: 4px; 39 | /*滑道圆角宽度*/ 40 | } 41 | 42 | ::-webkit-scrollbar-thumb { 43 | background-color: rgba(255, 255, 255, 0.2); 44 | /*滑动条表面*/ 45 | border: solid 1px rgba(255, 255, 255, 0.2); 46 | /*滑动条边框*/ 47 | border-radius: 4px; 48 | /*滑动条圆角宽度*/ 49 | } 50 | 51 | /*横竖滚动条交角*/ 52 | ::-webkit-scrollbar-corner { 53 | background-color: rgba(22, 39, 67, 0.3); 54 | } 55 | 56 | /*横竖滚动条交角图案*/ 57 | ::-webkit-resizer { 58 | /*background-image: url(/public/img/resizer-inactive.png);*/ 59 | background-repeat: no-repeat; 60 | background-position: bottom right; 61 | } 62 | 63 | /*鼠标滑过滑动条*/ 64 | ::-webkit-scrollbar-thumb:hover { 65 | background-color: #00adfe; 66 | } 67 | 68 | /*滚动条的重写end*/ 69 | -------------------------------------------------------------------------------- /src/router/route-official.js: -------------------------------------------------------------------------------- 1 | // official-demos 2 | import FlowChart from '@/views/official-demos/FlowChart.vue'; 3 | import Chart from '@/views/official-demos/Chart.vue'; 4 | import StateMachine from '@/views/official-demos/StateMachine.vue'; 5 | import PerimeterAnchors from '@/views/official-demos/PerimeterAnchors.vue'; 6 | import DragAndDrop from '@/views/official-demos/DragAndDrop.vue'; 7 | import DynamicAnchors from '@/views/official-demos/DynamicAnchors.vue'; 8 | import Groups from '@/views/official-demos/Groups.vue'; 9 | import SourcesAndTargets from '@/views/official-demos/SourcesAndTargets.vue'; 10 | 11 | const base = '/layout/official-demo/'; 12 | 13 | const router = [ 14 | { 15 | path: `${base}chart`, 16 | name: 'Chart', 17 | component: Chart, 18 | }, 19 | { 20 | path: `${base}flow-chart`, 21 | name: 'FlowChart', 22 | component: FlowChart, 23 | }, 24 | { 25 | path: `${base}state-machine`, 26 | name: 'StateMachine', 27 | component: StateMachine, 28 | }, 29 | { 30 | path: `${base}perimeter-anchors`, 31 | name: 'PerimeterAnchors', 32 | component: PerimeterAnchors, 33 | }, 34 | { 35 | path: `${base}drag-and-drop`, 36 | name: 'DragAndDrop', 37 | component: DragAndDrop, 38 | }, 39 | { 40 | path: `${base}dynamic-anchors`, 41 | name: 'DynamicAnchors', 42 | component: DynamicAnchors, 43 | }, 44 | { 45 | path: `${base}groups`, 46 | name: 'Groups', 47 | component: Groups, 48 | }, 49 | { 50 | path: `${base}sources-and-targets`, 51 | name: 'SourcesAndTargets', 52 | component: SourcesAndTargets, 53 | }, 54 | ]; 55 | 56 | export default router; 57 | -------------------------------------------------------------------------------- /public/json/json.2.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": "节点", 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 | -------------------------------------------------------------------------------- /public/json/json.1.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": "节点", 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 | -------------------------------------------------------------------------------- /src/style/components/layout.scss: -------------------------------------------------------------------------------- 1 | #app { 2 | width: 100vw; 3 | height: 100vh; 4 | position: relative; 5 | overflow: hidden; 6 | } 7 | 8 | .el-header { 9 | background-color: $bg-header; 10 | color: $font-header; 11 | @include flex($align: center); 12 | .title { 13 | font-size: 18px; 14 | } 15 | } 16 | 17 | .el-main { 18 | background-color: $bg-main; 19 | padding: 0; 20 | } 21 | 22 | .container { 23 | width: 100%; 24 | height: 100%; 25 | 26 | .main { 27 | height: 100%; 28 | width: 100%; 29 | } 30 | } 31 | 32 | .template-box { 33 | padding: 10px 20px; 34 | 35 | .header { 36 | padding: 5px; 37 | border-bottom: 1px solid #000; 38 | font-size: 16px; 39 | 40 | .add { 41 | float: right; 42 | font-size: 20px; 43 | color: #409eff; 44 | cursor: pointer; 45 | } 46 | } 47 | 48 | .template-list { 49 | padding: 5px; 50 | color: #000; 51 | } 52 | 53 | .item { 54 | line-height: 35px; 55 | cursor: pointer; 56 | color: #545c64; 57 | font-size: 14px; 58 | 59 | &.active { 60 | color: #409eff; 61 | } 62 | 63 | &:hover { 64 | color: #409eff; 65 | } 66 | 67 | a { 68 | text-decoration: none; 69 | color: #545c64; 70 | font-size: 14px; 71 | 72 | &:hover { 73 | color: #409eff; 74 | } 75 | } 76 | } 77 | } 78 | 79 | .btn-save { 80 | position: absolute; 81 | top: 70px; 82 | right: 220px; 83 | z-index: 999999; 84 | } 85 | 86 | .btn-save-img { 87 | position: absolute; 88 | top: 70px; 89 | right: 320px; 90 | z-index: 999999; 91 | } 92 | 93 | .workplace { 94 | .chart-dot { 95 | opacity: 0; 96 | } 97 | 98 | .chart-dot-hover { 99 | opacity: 1; 100 | 101 | circle { 102 | fill: #00adfe; 103 | } 104 | } 105 | } 106 | -------------------------------------------------------------------------------- /src/utils/menu.js: -------------------------------------------------------------------------------- 1 | export default [ 2 | { 3 | title: '首页', 4 | name: 'Home', 5 | path: '/', 6 | icon: 'fa-home', 7 | }, 8 | { 9 | title: '官方demo', 10 | name: 'OfficialDemo', 11 | path: '/official-demo', 12 | icon: 'fa-eercast', 13 | children: [ 14 | { 15 | title: 'FlowChart', 16 | name: 'FlowChart', 17 | path: '/official-demo/flow-chart', 18 | }, 19 | { 20 | title: 'Hierarchical Chart', 21 | name: 'HierarchicalChart', 22 | path: '/official-demo/chart', 23 | }, 24 | { 25 | title: 'state machine', 26 | name: 'StateMachine', 27 | path: '/official-demo/state-machine', 28 | }, 29 | { 30 | title: 'perimeter anchors', 31 | name: 'PerimeterAnchors', 32 | path: '/official-demo/perimeter-anchors', 33 | }, 34 | { 35 | title: 'drag and drop', 36 | name: 'DragAndDrop', 37 | path: '/official-demo/drag-and-drop', 38 | }, 39 | { 40 | title: 'Dynamic anchors', 41 | name: 'DynamicAnchors', 42 | path: '/official-demo/dynamic-anchors', 43 | }, 44 | { 45 | title: 'groups', 46 | name: 'Groups', 47 | path: '/official-demo/groups', 48 | }, 49 | { 50 | title: 'sources and targets', 51 | name: 'SourcesAndTargets', 52 | path: '/official-demo/sources-and-targets', 53 | }, 54 | ], 55 | }, 56 | { 57 | title: '示例', 58 | name: 'Demos', 59 | path: '/demos', 60 | icon: 'fa-space-shuttle', 61 | children: [ 62 | { 63 | title: 'drag to workplace', 64 | name: 'DragToWorkplace', 65 | path: '/demos/drag-to-workplace', 66 | }, 67 | { 68 | title: 'demo-chart', 69 | name: 'DemoChart', 70 | path: '/demos/demo-chart', 71 | }, 72 | ], 73 | }, 74 | ]; 75 | -------------------------------------------------------------------------------- /src/components/ChartNode.vue: -------------------------------------------------------------------------------- 1 | 8 | 42 | 100 | 101 | 102 | -------------------------------------------------------------------------------- /src/components/MyHeader.vue: -------------------------------------------------------------------------------- 1 | 74 | 75 | 91 | -------------------------------------------------------------------------------- /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/assets/js/rgbcolor.min.js: -------------------------------------------------------------------------------- 1 | !function(e){function f(e){this.ok=!1,"#"==e.charAt(0)&&(e=e.substr(1,6)),e=(e=e.replace(/ /g,"")).toLowerCase();var a={aliceblue:"f0f8ff",antiquewhite:"faebd7",aqua:"00ffff",aquamarine:"7fffd4",azure:"f0ffff",beige:"f5f5dc",bisque:"ffe4c4",black:"000000",blanchedalmond:"ffebcd",blue:"0000ff",blueviolet:"8a2be2",brown:"a52a2a",burlywood:"deb887",cadetblue:"5f9ea0",chartreuse:"7fff00",chocolate:"d2691e",coral:"ff7f50",cornflowerblue:"6495ed",cornsilk:"fff8dc",crimson:"dc143c",cyan:"00ffff",darkblue:"00008b",darkcyan:"008b8b",darkgoldenrod:"b8860b",darkgray:"a9a9a9",darkgreen:"006400",darkkhaki:"bdb76b",darkmagenta:"8b008b",darkolivegreen:"556b2f",darkorange:"ff8c00",darkorchid:"9932cc",darkred:"8b0000",darksalmon:"e9967a",darkseagreen:"8fbc8f",darkslateblue:"483d8b",darkslategray:"2f4f4f",darkturquoise:"00ced1",darkviolet:"9400d3",deeppink:"ff1493",deepskyblue:"00bfff",dimgray:"696969",dodgerblue:"1e90ff",feldspar:"d19275",firebrick:"b22222",floralwhite:"fffaf0",forestgreen:"228b22",fuchsia:"ff00ff",gainsboro:"dcdcdc",ghostwhite:"f8f8ff",gold:"ffd700",goldenrod:"daa520",gray:"808080",green:"008000",greenyellow:"adff2f",honeydew:"f0fff0",hotpink:"ff69b4",indianred:"cd5c5c",indigo:"4b0082",ivory:"fffff0",khaki:"f0e68c",lavender:"e6e6fa",lavenderblush:"fff0f5",lawngreen:"7cfc00",lemonchiffon:"fffacd",lightblue:"add8e6",lightcoral:"f08080",lightcyan:"e0ffff",lightgoldenrodyellow:"fafad2",lightgrey:"d3d3d3",lightgreen:"90ee90",lightpink:"ffb6c1",lightsalmon:"ffa07a",lightseagreen:"20b2aa",lightskyblue:"87cefa",lightslateblue:"8470ff",lightslategray:"778899",lightsteelblue:"b0c4de",lightyellow:"ffffe0",lime:"00ff00",limegreen:"32cd32",linen:"faf0e6",magenta:"ff00ff",maroon:"800000",mediumaquamarine:"66cdaa",mediumblue:"0000cd",mediumorchid:"ba55d3",mediumpurple:"9370d8",mediumseagreen:"3cb371",mediumslateblue:"7b68ee",mediumspringgreen:"00fa9a",mediumturquoise:"48d1cc",mediumvioletred:"c71585",midnightblue:"191970",mintcream:"f5fffa",mistyrose:"ffe4e1",moccasin:"ffe4b5",navajowhite:"ffdead",navy:"000080",oldlace:"fdf5e6",olive:"808000",olivedrab:"6b8e23",orange:"ffa500",orangered:"ff4500",orchid:"da70d6",palegoldenrod:"eee8aa",palegreen:"98fb98",paleturquoise:"afeeee",palevioletred:"d87093",papayawhip:"ffefd5",peachpuff:"ffdab9",peru:"cd853f",pink:"ffc0cb",plum:"dda0dd",powderblue:"b0e0e6",purple:"800080",red:"ff0000",rosybrown:"bc8f8f",royalblue:"4169e1",saddlebrown:"8b4513",salmon:"fa8072",sandybrown:"f4a460",seagreen:"2e8b57",seashell:"fff5ee",sienna:"a0522d",silver:"c0c0c0",skyblue:"87ceeb",slateblue:"6a5acd",slategray:"708090",snow:"fffafa",springgreen:"00ff7f",steelblue:"4682b4",tan:"d2b48c",teal:"008080",thistle:"d8bfd8",tomato:"ff6347",turquoise:"40e0d0",violet:"ee82ee",violetred:"d02090",wheat:"f5deb3",white:"ffffff",whitesmoke:"f5f5f5",yellow:"ffff00",yellowgreen:"9acd32"};for(var r in a)e==r&&(e=a[r]);for(var t=[{re:/^rgb\((\d{1,3}),\s*(\d{1,3}),\s*(\d{1,3})\)$/,example:["rgb(123, 234, 45)","rgb(255,234,245)"],process:function(e){return[parseInt(e[1]),parseInt(e[2]),parseInt(e[3])]}},{re:/^(\w{2})(\w{2})(\w{2})$/,example:["#00ff00","336699"],process:function(e){return[parseInt(e[1],16),parseInt(e[2],16),parseInt(e[3],16)]}},{re:/^(\w{1})(\w{1})(\w{1})$/,example:["#fb0","f0f"],process:function(e){return[parseInt(e[1]+e[1],16),parseInt(e[2]+e[2],16),parseInt(e[3]+e[3],16)]}}],d=0;d255?255:this.r,this.g=this.g<0||isNaN(this.g)?0:this.g>255?255:this.g,this.b=this.b<0||isNaN(this.b)?0:this.b>255?255:this.b,this.toRGB=function(){return"rgb("+this.r+", "+this.g+", "+this.b+")"},this.toHex=function(){var e=this.r.toString(16),f=this.g.toString(16),a=this.b.toString(16);return 1==e.length&&(e="0"+e),1==f.length&&(f="0"+f),1==a.length&&(a="0"+a),"#"+e+f+a},this.getHelpXML=function(){for(var e=new Array,r=0;r "+s.toRGB()+" -> "+s.toHex());o.appendChild(c),o.appendChild(b),l.appendChild(o)}catch(e){}return l}}"undefined"!=typeof define&&define.amd?define(function(){return f}):"undefined"!=typeof module&&module.exports&&(module.exports=f),e.RGBColor=f}("undefined"!=typeof window?window:this); -------------------------------------------------------------------------------- /src/views/official-demos/PerimeterAnchors.vue: -------------------------------------------------------------------------------- 1 | 49 | 95 | 96 | 169 | -------------------------------------------------------------------------------- /src/components/ChartGroup.vue: -------------------------------------------------------------------------------- 1 | 19 | 135 | 218 | 219 | 220 | -------------------------------------------------------------------------------- /src/views/official-demos/Chart.vue: -------------------------------------------------------------------------------- 1 | 46 | 129 | 130 | 232 | -------------------------------------------------------------------------------- /src/assets/js/stackblur.min.js: -------------------------------------------------------------------------------- 1 | !function(a){if("object"==typeof exports&&"undefined"!=typeof module)module.exports=a();else if("function"==typeof define&&define.amd)define([],a);else{var b;b="undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self?self:this,b.StackBlur=a()}}(function(){return function a(b,c,d){function e(g,h){if(!c[g]){if(!b[g]){var i="function"==typeof require&&require;if(!h&&i)return i(g,!0);if(f)return f(g,!0);var j=new Error("Cannot find module '"+g+"'");throw j.code="MODULE_NOT_FOUND",j}var k=c[g]={exports:{}};b[g][0].call(k.exports,function(a){var c=b[g][1][a];return e(c?c:a)},k,k.exports,a,b,c,d)}return c[g].exports}for(var f="function"==typeof require&&require,g=0;g>T,0!=F?(F=255/F,H[o]=(q*S>>T)*F,H[o+1]=(r*S>>T)*F,H[o+2]=(s*S>>T)*F):H[o]=H[o+1]=H[o+2]=0,q-=u,r-=v,s-=w,t-=x,u-=Q.r,v-=Q.g,w-=Q.b,x-=Q.a,m=p+((m=g+f+1)>T,F>0?(F=255/F,H[m]=(q*S>>T)*F,H[m+1]=(r*S>>T)*F,H[m+2]=(s*S>>T)*F):H[m]=H[m+1]=H[m+2]=0,q-=u,r-=v,s-=w,t-=x,u-=Q.r,v-=Q.g,w-=Q.b,x-=Q.a,m=g+((m=h+L)>P,D[o+1]=r*O>>P,D[o+2]=s*O>>P,q-=t,r-=u,s-=v,t-=M.r,u-=M.g,v-=M.b,m=p+((m=g+f+1)>P,D[m+1]=r*O>>P,D[m+2]=s*O>>P,q-=t,r-=u,s-=v,t-=M.r,u-=M.g,v-=M.b,m=g+((m=h+H) 2 |
3 |
7 |
11 | 1

12 |
13 |
17 | 2

18 |
19 |
23 | 3

24 |
25 |
29 | 4

30 |
31 |
35 | 5

36 |
37 |
41 | 6

42 |
43 |
44 |
45 | 46 | 177 | 178 | 279 | -------------------------------------------------------------------------------- /src/views/official-demos/SourcesAndTargets.vue: -------------------------------------------------------------------------------- 1 | 70 | 177 | 178 | 300 | -------------------------------------------------------------------------------- /src/style/page/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 | position: relative; 10 | } 11 | 12 | .jtk-bootstrap { 13 | min-height: 100vh; 14 | display: flex; 15 | flex-direction: column; 16 | } 17 | 18 | .jtk-bootstrap .jtk-page-container { 19 | display: flex; 20 | width: 100vw; 21 | justify-content: center; 22 | flex: 1; 23 | } 24 | 25 | .jtk-bootstrap .jtk-container { 26 | width: 60%; 27 | max-width: 800px; 28 | } 29 | 30 | .jtk-bootstrap-wide .jtk-container { 31 | width: 80%; 32 | max-width: 1187px; 33 | } 34 | 35 | .jtk-demo-main { 36 | position: relative; 37 | margin-top: 98px; 38 | } 39 | 40 | .jtk-demo-main .description { 41 | font-size: 13px; 42 | margin-top: 25px; 43 | padding: 13px; 44 | margin-bottom: 22px; 45 | background-color: #f4f5ef; 46 | } 47 | 48 | .jtk-demo-main .description li { 49 | list-style-type: disc !important; 50 | } 51 | 52 | .jtk-demo-canvas { 53 | border: 1px solid #ccc; 54 | background-color: white; 55 | display: flex; 56 | } 57 | 58 | .canvas-wide { 59 | margin-left: 0; 60 | } 61 | 62 | .miniview { 63 | position: absolute; 64 | top: 25px; 65 | right: 25px; 66 | z-index: 100; 67 | } 68 | 69 | .jtk-demo-dataset { 70 | text-align: left; 71 | max-height: 600px; 72 | overflow: auto; 73 | } 74 | 75 | .demo-title { 76 | float: left; 77 | font-size: 18px; 78 | } 79 | 80 | .controls { 81 | top: 25px; 82 | color: #fff; 83 | margin-right: 10px; 84 | position: absolute; 85 | left: 25px; 86 | z-index: 1; 87 | } 88 | 89 | .controls i { 90 | background-color: #3e7e9c; 91 | border-radius: 4px; 92 | cursor: pointer; 93 | margin-right: 0; 94 | padding: 4px; 95 | } 96 | 97 | li { 98 | list-style-type: none; 99 | } 100 | 101 | /* ------------------------ node palette -------------------- */ 102 | 103 | .sidebar { 104 | margin: 0; 105 | padding: 0; 106 | padding-top: 7px; 107 | padding-right: 10px; 108 | width: 150px; 109 | float: left; 110 | text-align: center; 111 | height: 550px; 112 | background-color: #84acb3; 113 | } 114 | 115 | .sidebar ul li { 116 | background-color: #234b5e; 117 | border-radius: 11px; 118 | color: #f7ebca; 119 | cursor: move; 120 | margin-bottom: 10px; 121 | margin-left: 6px; 122 | padding: 8px; 123 | width: 128px; 124 | } 125 | 126 | .sidebar ul { 127 | width: 100%; 128 | padding: 0; 129 | } 130 | 131 | .sidebar ul li:hover { 132 | background-color: #577a8b; 133 | } 134 | 135 | .sidebar i { 136 | float: left; 137 | } 138 | 139 | @media (max-width: 600px) { 140 | .sidebar { 141 | float: none; 142 | height: 55px; 143 | width: 100%; 144 | padding-top: 0; 145 | } 146 | .sidebar ul li { 147 | display: inline-block; 148 | margin-top: 7px; 149 | width: 67px; 150 | } 151 | .jtk-demo-canvas { 152 | margin-left: 0; 153 | margin-top: 10px; 154 | height: 364px; 155 | } 156 | } 157 | 158 | /* ---------------------------------------------------------------------------------------------------- */ 159 | 160 | /* --- jsPlumb setup ---------------------------------------------------------------------------------- */ 161 | 162 | /* ---------------------------------------------------------------------------------------------------- */ 163 | 164 | .jtk-connector { 165 | z-index: 9; 166 | } 167 | 168 | .jtk-endpoint { 169 | z-index: 12; 170 | opacity: 0.8; 171 | cursor: pointer; 172 | } 173 | 174 | .jtk-overlay { 175 | background-color: white; 176 | color: #434343; 177 | font-weight: 400; 178 | padding: 4px; 179 | z-index: 10; 180 | } 181 | 182 | .jtk-overlay.jtk-hover { 183 | color: #434343; 184 | } 185 | 186 | path { 187 | cursor: pointer; 188 | } 189 | 190 | .delete { 191 | padding: 2px; 192 | cursor: pointer; 193 | float: left; 194 | font-size: 10px; 195 | line-height: 20px; 196 | } 197 | 198 | .add, 199 | .edit { 200 | cursor: pointer; 201 | float: right; 202 | font-size: 10px; 203 | line-height: 20px; 204 | margin-right: 2px; 205 | padding: 2px; 206 | } 207 | 208 | .edit:hover { 209 | color: #ff8000; 210 | } 211 | 212 | .selected-mode { 213 | color: #e4f013; 214 | } 215 | 216 | .connect { 217 | width: 10px; 218 | height: 10px; 219 | background-color: #f76258; 220 | position: absolute; 221 | bottom: 13px; 222 | right: 5px; 223 | } 224 | 225 | /* header styles */ 226 | 227 | .demo-links { 228 | position: fixed; 229 | right: 0; 230 | top: 57px; 231 | font-size: 11px; 232 | background-color: white; 233 | opacity: 0.8; 234 | padding-right: 10px; 235 | padding-left: 5px; 236 | text-transform: uppercase; 237 | z-index: 100001; 238 | } 239 | 240 | .demo-links div { 241 | display: inline; 242 | margin-right: 7px; 243 | margin-left: 7px; 244 | } 245 | 246 | .demo-links i { 247 | padding: 4px; 248 | } 249 | 250 | .workplace { 251 | padding: 20px; 252 | .chart-item { 253 | position: absolute; 254 | } 255 | .workplace-chart { 256 | position: absolute; 257 | } 258 | } 259 | 260 | .box-card { 261 | .header { 262 | padding: 10px 20px; 263 | border-bottom: 1px solid #000; 264 | } 265 | .card-body { 266 | padding: 20px; 267 | cursor: pointer; // text-align: center; 268 | .item { 269 | margin-bottom: 20px; 270 | i { 271 | margin-right: 10px; 272 | } 273 | &.ui-draggable-dragging { 274 | text-align: center; 275 | margin: 0; 276 | i { 277 | display: inline-block; 278 | margin-right: 0; 279 | margin-bottom: 5px; 280 | font-size: 20px; 281 | color: #409eff; 282 | background-repeat: no-repeat; 283 | background-position: center; 284 | cursor: pointer; 285 | touch-action: none; 286 | -moz-user-select: none; 287 | -khtml-user-select: none; 288 | user-select: none; 289 | &.circle { 290 | background-image: url(../images/circle.png); 291 | width: 60px; 292 | height: 60px; 293 | line-height: 60px; 294 | background-size: 100%; 295 | } 296 | &.diamond { 297 | background-image: url(../images/diamond.png); 298 | width: 60px; 299 | height: 60px; 300 | line-height: 60px; 301 | background-size: 100%; 302 | } 303 | } 304 | span { 305 | display: block; 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(../images/circle.png); 324 | width: 50px; 325 | height: 50px; 326 | line-height: 50px; 327 | background-size: 100%; 328 | } 329 | &.diamond { 330 | background-image: url(../images/diamond.png); 331 | width: 50px; 332 | height: 50px; 333 | line-height: 50px; 334 | background-size: 100%; 335 | } 336 | &.ellipse { 337 | background-image: url(../images/ellipse.png); 338 | width: 90px; 339 | height: 30px; 340 | line-height: 30px; 341 | background-size: 100%; 342 | } 343 | &.rectangle { 344 | background-image: url(../images/rectangle.png); 345 | width: 90px; 346 | height: 30px; 347 | line-height: 30px; 348 | background-size: 100%; 349 | } 350 | } 351 | 352 | .demo-groups { 353 | .workplace { 354 | width: 100%; 355 | height: 100%; 356 | overflow: auto; 357 | } 358 | .group { 359 | width: 300px; 360 | height: 300px; 361 | border: 1px solid #ccc; 362 | position: absolute; 363 | .ep { 364 | opacity: 0; 365 | position: absolute; 366 | right: 0; 367 | top: 0; 368 | width: 10px; 369 | height: 10px; 370 | background: #409eff; 371 | border-radius: 5px; 372 | } 373 | &:hover { 374 | > .ep { 375 | opacity: 1; 376 | } 377 | } 378 | &.dragHover { 379 | > .ep { 380 | opacity: 0; 381 | } 382 | } 383 | } 384 | } 385 | -------------------------------------------------------------------------------- /src/views/official-demos/StateMachine.vue: -------------------------------------------------------------------------------- 1 | 60 | 197 | 198 | 303 | -------------------------------------------------------------------------------- /src/views/DragToWorkplace.vue: -------------------------------------------------------------------------------- 1 | 34 | 35 | 266 | 273 | -------------------------------------------------------------------------------- /src/assets/js/rgbcolor.js: -------------------------------------------------------------------------------- 1 | /** 2 | * A class to parse color values 3 | * @author Stoyan Stefanov 4 | * @link http://www.phpied.com/rgb-color-parser-in-javascript/ 5 | * @license Use it if you like it 6 | */ 7 | 8 | (function ( global ) { 9 | 10 | function RGBColor(color_string) 11 | { 12 | this.ok = false; 13 | 14 | // strip any leading # 15 | if (color_string.charAt(0) == '#') { // remove # if any 16 | color_string = color_string.substr(1,6); 17 | } 18 | 19 | color_string = color_string.replace(/ /g,''); 20 | color_string = color_string.toLowerCase(); 21 | 22 | // before getting into regexps, try simple matches 23 | // and overwrite the input 24 | var simple_colors = { 25 | aliceblue: 'f0f8ff', 26 | antiquewhite: 'faebd7', 27 | aqua: '00ffff', 28 | aquamarine: '7fffd4', 29 | azure: 'f0ffff', 30 | beige: 'f5f5dc', 31 | bisque: 'ffe4c4', 32 | black: '000000', 33 | blanchedalmond: 'ffebcd', 34 | blue: '0000ff', 35 | blueviolet: '8a2be2', 36 | brown: 'a52a2a', 37 | burlywood: 'deb887', 38 | cadetblue: '5f9ea0', 39 | chartreuse: '7fff00', 40 | chocolate: 'd2691e', 41 | coral: 'ff7f50', 42 | cornflowerblue: '6495ed', 43 | cornsilk: 'fff8dc', 44 | crimson: 'dc143c', 45 | cyan: '00ffff', 46 | darkblue: '00008b', 47 | darkcyan: '008b8b', 48 | darkgoldenrod: 'b8860b', 49 | darkgray: 'a9a9a9', 50 | darkgreen: '006400', 51 | darkkhaki: 'bdb76b', 52 | darkmagenta: '8b008b', 53 | darkolivegreen: '556b2f', 54 | darkorange: 'ff8c00', 55 | darkorchid: '9932cc', 56 | darkred: '8b0000', 57 | darksalmon: 'e9967a', 58 | darkseagreen: '8fbc8f', 59 | darkslateblue: '483d8b', 60 | darkslategray: '2f4f4f', 61 | darkturquoise: '00ced1', 62 | darkviolet: '9400d3', 63 | deeppink: 'ff1493', 64 | deepskyblue: '00bfff', 65 | dimgray: '696969', 66 | dodgerblue: '1e90ff', 67 | feldspar: 'd19275', 68 | firebrick: 'b22222', 69 | floralwhite: 'fffaf0', 70 | forestgreen: '228b22', 71 | fuchsia: 'ff00ff', 72 | gainsboro: 'dcdcdc', 73 | ghostwhite: 'f8f8ff', 74 | gold: 'ffd700', 75 | goldenrod: 'daa520', 76 | gray: '808080', 77 | green: '008000', 78 | greenyellow: 'adff2f', 79 | honeydew: 'f0fff0', 80 | hotpink: 'ff69b4', 81 | indianred : 'cd5c5c', 82 | indigo : '4b0082', 83 | ivory: 'fffff0', 84 | khaki: 'f0e68c', 85 | lavender: 'e6e6fa', 86 | lavenderblush: 'fff0f5', 87 | lawngreen: '7cfc00', 88 | lemonchiffon: 'fffacd', 89 | lightblue: 'add8e6', 90 | lightcoral: 'f08080', 91 | lightcyan: 'e0ffff', 92 | lightgoldenrodyellow: 'fafad2', 93 | lightgrey: 'd3d3d3', 94 | lightgreen: '90ee90', 95 | lightpink: 'ffb6c1', 96 | lightsalmon: 'ffa07a', 97 | lightseagreen: '20b2aa', 98 | lightskyblue: '87cefa', 99 | lightslateblue: '8470ff', 100 | lightslategray: '778899', 101 | lightsteelblue: 'b0c4de', 102 | lightyellow: 'ffffe0', 103 | lime: '00ff00', 104 | limegreen: '32cd32', 105 | linen: 'faf0e6', 106 | magenta: 'ff00ff', 107 | maroon: '800000', 108 | mediumaquamarine: '66cdaa', 109 | mediumblue: '0000cd', 110 | mediumorchid: 'ba55d3', 111 | mediumpurple: '9370d8', 112 | mediumseagreen: '3cb371', 113 | mediumslateblue: '7b68ee', 114 | mediumspringgreen: '00fa9a', 115 | mediumturquoise: '48d1cc', 116 | mediumvioletred: 'c71585', 117 | midnightblue: '191970', 118 | mintcream: 'f5fffa', 119 | mistyrose: 'ffe4e1', 120 | moccasin: 'ffe4b5', 121 | navajowhite: 'ffdead', 122 | navy: '000080', 123 | oldlace: 'fdf5e6', 124 | olive: '808000', 125 | olivedrab: '6b8e23', 126 | orange: 'ffa500', 127 | orangered: 'ff4500', 128 | orchid: 'da70d6', 129 | palegoldenrod: 'eee8aa', 130 | palegreen: '98fb98', 131 | paleturquoise: 'afeeee', 132 | palevioletred: 'd87093', 133 | papayawhip: 'ffefd5', 134 | peachpuff: 'ffdab9', 135 | peru: 'cd853f', 136 | pink: 'ffc0cb', 137 | plum: 'dda0dd', 138 | powderblue: 'b0e0e6', 139 | purple: '800080', 140 | red: 'ff0000', 141 | rosybrown: 'bc8f8f', 142 | royalblue: '4169e1', 143 | saddlebrown: '8b4513', 144 | salmon: 'fa8072', 145 | sandybrown: 'f4a460', 146 | seagreen: '2e8b57', 147 | seashell: 'fff5ee', 148 | sienna: 'a0522d', 149 | silver: 'c0c0c0', 150 | skyblue: '87ceeb', 151 | slateblue: '6a5acd', 152 | slategray: '708090', 153 | snow: 'fffafa', 154 | springgreen: '00ff7f', 155 | steelblue: '4682b4', 156 | tan: 'd2b48c', 157 | teal: '008080', 158 | thistle: 'd8bfd8', 159 | tomato: 'ff6347', 160 | turquoise: '40e0d0', 161 | violet: 'ee82ee', 162 | violetred: 'd02090', 163 | wheat: 'f5deb3', 164 | white: 'ffffff', 165 | whitesmoke: 'f5f5f5', 166 | yellow: 'ffff00', 167 | yellowgreen: '9acd32' 168 | }; 169 | for (var key in simple_colors) { 170 | if (color_string == key) { 171 | color_string = simple_colors[key]; 172 | } 173 | } 174 | // emd of simple type-in colors 175 | 176 | // array of color definition objects 177 | var color_defs = [ 178 | { 179 | re: /^rgb\((\d{1,3}),\s*(\d{1,3}),\s*(\d{1,3})\)$/, 180 | example: ['rgb(123, 234, 45)', 'rgb(255,234,245)'], 181 | process: function (bits){ 182 | return [ 183 | parseInt(bits[1]), 184 | parseInt(bits[2]), 185 | parseInt(bits[3]) 186 | ]; 187 | } 188 | }, 189 | { 190 | re: /^(\w{2})(\w{2})(\w{2})$/, 191 | example: ['#00ff00', '336699'], 192 | process: function (bits){ 193 | return [ 194 | parseInt(bits[1], 16), 195 | parseInt(bits[2], 16), 196 | parseInt(bits[3], 16) 197 | ]; 198 | } 199 | }, 200 | { 201 | re: /^(\w{1})(\w{1})(\w{1})$/, 202 | example: ['#fb0', 'f0f'], 203 | process: function (bits){ 204 | return [ 205 | parseInt(bits[1] + bits[1], 16), 206 | parseInt(bits[2] + bits[2], 16), 207 | parseInt(bits[3] + bits[3], 16) 208 | ]; 209 | } 210 | } 211 | ]; 212 | 213 | // search through the definitions to find a match 214 | for (var i = 0; i < color_defs.length; i++) { 215 | var re = color_defs[i].re; 216 | var processor = color_defs[i].process; 217 | var bits = re.exec(color_string); 218 | if (bits) { 219 | channels = processor(bits); 220 | this.r = channels[0]; 221 | this.g = channels[1]; 222 | this.b = channels[2]; 223 | this.ok = true; 224 | } 225 | 226 | } 227 | 228 | // validate/cleanup values 229 | this.r = (this.r < 0 || isNaN(this.r)) ? 0 : ((this.r > 255) ? 255 : this.r); 230 | this.g = (this.g < 0 || isNaN(this.g)) ? 0 : ((this.g > 255) ? 255 : this.g); 231 | this.b = (this.b < 0 || isNaN(this.b)) ? 0 : ((this.b > 255) ? 255 : this.b); 232 | 233 | // some getters 234 | this.toRGB = function () { 235 | return 'rgb(' + this.r + ', ' + this.g + ', ' + this.b + ')'; 236 | } 237 | this.toHex = function () { 238 | var r = this.r.toString(16); 239 | var g = this.g.toString(16); 240 | var b = this.b.toString(16); 241 | if (r.length == 1) r = '0' + r; 242 | if (g.length == 1) g = '0' + g; 243 | if (b.length == 1) b = '0' + b; 244 | return '#' + r + g + b; 245 | } 246 | 247 | // help 248 | this.getHelpXML = function () { 249 | 250 | var examples = new Array(); 251 | // add regexps 252 | for (var i = 0; i < color_defs.length; i++) { 253 | var example = color_defs[i].example; 254 | for (var j = 0; j < example.length; j++) { 255 | examples[examples.length] = example[j]; 256 | } 257 | } 258 | // add type-in colors 259 | for (var sc in simple_colors) { 260 | examples[examples.length] = sc; 261 | } 262 | 263 | var xml = document.createElement('ul'); 264 | xml.setAttribute('id', 'rgbcolor-examples'); 265 | for (var i = 0; i < examples.length; i++) { 266 | try { 267 | var list_item = document.createElement('li'); 268 | var list_color = new RGBColor(examples[i]); 269 | var example_div = document.createElement('div'); 270 | example_div.style.cssText = 271 | 'margin: 3px; ' 272 | + 'border: 1px solid black; ' 273 | + 'background:' + list_color.toHex() + '; ' 274 | + 'color:' + list_color.toHex() 275 | ; 276 | example_div.appendChild(document.createTextNode('test')); 277 | var list_item_value = document.createTextNode( 278 | ' ' + examples[i] + ' -> ' + list_color.toRGB() + ' -> ' + list_color.toHex() 279 | ); 280 | list_item.appendChild(example_div); 281 | list_item.appendChild(list_item_value); 282 | xml.appendChild(list_item); 283 | 284 | } catch(e){} 285 | } 286 | return xml; 287 | 288 | } 289 | 290 | } 291 | 292 | // export as AMD... 293 | if ( typeof define !== 'undefined' && define.amd ) { 294 | define( function () { return RGBColor; }); 295 | } 296 | 297 | // ...or as browserify 298 | else if ( typeof module !== 'undefined' && module.exports ) { 299 | module.exports = RGBColor; 300 | } 301 | 302 | global.RGBColor = RGBColor; 303 | 304 | }( typeof window !== 'undefined' ? window : this )); -------------------------------------------------------------------------------- /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 | ### Event 事件 311 | - group:add 添加 回调函数参数 {group:Group} 312 | - group:remove 移除 回调函数参数 {group:Group} 313 | - group:addMember 新增子元素 回调函数参数 {group:Group, el:Element, [sourceGroup]:Group} 314 | - group:removeMember 移除子元素 回调函数参数 {group:Group, el:Element, [sourceGroup]:Group} 315 | - group:collapse 折叠 回调函数参数 {group:Group} 316 | - group:expand 展开 回调函数参数 {group:Group} 317 | --- 318 | ### methods 319 | - addToGroup(group, el) 添加 320 | - removeGromGroup(el) 移除 321 | - collapseGroup(group) 折叠 322 | - expandGroup(group) 展开 323 | - getGroup(ID) 检索 324 | - getGroupFor(el/ID) 找出元素所属的组 325 | - getMembers 获取组的成员 326 | --- 327 | ## Element Dragging 元素拖动 328 | `基于Katavio.js插件`[https://github.com/jsplumb/katavorio](https://github.com/jsplumb/katavorio) 329 | 330 | --- 331 | -------------------------------------------------------------------------------- /src/views/official-demos/FlowChart.vue: -------------------------------------------------------------------------------- 1 | 34 | 288 | 289 | 400 | -------------------------------------------------------------------------------- /src/views/official-demos/Groups.vue: -------------------------------------------------------------------------------- 1 | 269 | 450 | 451 | 621 | -------------------------------------------------------------------------------- /src/views/official-demos/DragAndDrop.vue: -------------------------------------------------------------------------------- 1 | 95 | 384 | 385 | 497 | -------------------------------------------------------------------------------- /src/assets/js/stackblur.js: -------------------------------------------------------------------------------- 1 | (function(f){if(typeof exports==="object"&&typeof module!=="undefined"){module.exports=f()}else if(typeof define==="function"&&define.amd){define([],f)}else{var g;if(typeof window!=="undefined"){g=window}else if(typeof global!=="undefined"){g=global}else if(typeof self!=="undefined"){g=self}else{g=this}g.StackBlur = f()}})(function(){var define,module,exports;return (function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o> shg_sum; 231 | if (pa != 0) 232 | { 233 | pa = 255 / pa; 234 | pixels[yi] = ((r_sum * mul_sum) >> shg_sum) * pa; 235 | pixels[yi+1] = ((g_sum * mul_sum) >> shg_sum) * pa; 236 | pixels[yi+2] = ((b_sum * mul_sum) >> shg_sum) * pa; 237 | } else { 238 | pixels[yi] = pixels[yi+1] = pixels[yi+2] = 0; 239 | } 240 | 241 | r_sum -= r_out_sum; 242 | g_sum -= g_out_sum; 243 | b_sum -= b_out_sum; 244 | a_sum -= a_out_sum; 245 | 246 | r_out_sum -= stackIn.r; 247 | g_out_sum -= stackIn.g; 248 | b_out_sum -= stackIn.b; 249 | a_out_sum -= stackIn.a; 250 | 251 | p = (yw + ((p = x + radius + 1) < widthMinus1 ? p : widthMinus1)) << 2; 252 | 253 | r_in_sum += (stackIn.r = pixels[p]); 254 | g_in_sum += (stackIn.g = pixels[p+1]); 255 | b_in_sum += (stackIn.b = pixels[p+2]); 256 | a_in_sum += (stackIn.a = pixels[p+3]); 257 | 258 | r_sum += r_in_sum; 259 | g_sum += g_in_sum; 260 | b_sum += b_in_sum; 261 | a_sum += a_in_sum; 262 | 263 | stackIn = stackIn.next; 264 | 265 | r_out_sum += (pr = stackOut.r); 266 | g_out_sum += (pg = stackOut.g); 267 | b_out_sum += (pb = stackOut.b); 268 | a_out_sum += (pa = stackOut.a); 269 | 270 | r_in_sum -= pr; 271 | g_in_sum -= pg; 272 | b_in_sum -= pb; 273 | a_in_sum -= pa; 274 | 275 | stackOut = stackOut.next; 276 | 277 | yi += 4; 278 | } 279 | yw += width; 280 | } 281 | 282 | 283 | for (x = 0; x < width; x++) 284 | { 285 | g_in_sum = b_in_sum = a_in_sum = r_in_sum = g_sum = b_sum = a_sum = r_sum = 0; 286 | 287 | yi = x << 2; 288 | r_out_sum = radiusPlus1 * (pr = pixels[yi]); 289 | g_out_sum = radiusPlus1 * (pg = pixels[yi+1]); 290 | b_out_sum = radiusPlus1 * (pb = pixels[yi+2]); 291 | a_out_sum = radiusPlus1 * (pa = pixels[yi+3]); 292 | 293 | r_sum += sumFactor * pr; 294 | g_sum += sumFactor * pg; 295 | b_sum += sumFactor * pb; 296 | a_sum += sumFactor * pa; 297 | 298 | stack = stackStart; 299 | 300 | for (i = 0; i < radiusPlus1; i++) 301 | { 302 | stack.r = pr; 303 | stack.g = pg; 304 | stack.b = pb; 305 | stack.a = pa; 306 | stack = stack.next; 307 | } 308 | 309 | yp = width; 310 | 311 | for (i = 1; i <= radius; i++) 312 | { 313 | yi = (yp + x) << 2; 314 | 315 | r_sum += (stack.r = (pr = pixels[yi])) * (rbs = radiusPlus1 - i); 316 | g_sum += (stack.g = (pg = pixels[yi+1])) * rbs; 317 | b_sum += (stack.b = (pb = pixels[yi+2])) * rbs; 318 | a_sum += (stack.a = (pa = pixels[yi+3])) * rbs; 319 | 320 | r_in_sum += pr; 321 | g_in_sum += pg; 322 | b_in_sum += pb; 323 | a_in_sum += pa; 324 | 325 | stack = stack.next; 326 | 327 | if(i < heightMinus1) 328 | { 329 | yp += width; 330 | } 331 | } 332 | 333 | yi = x; 334 | stackIn = stackStart; 335 | stackOut = stackEnd; 336 | for (y = 0; y < height; y++) 337 | { 338 | p = yi << 2; 339 | pixels[p+3] = pa = (a_sum * mul_sum) >> shg_sum; 340 | if (pa > 0) 341 | { 342 | pa = 255 / pa; 343 | pixels[p] = ((r_sum * mul_sum) >> shg_sum) * pa; 344 | pixels[p+1] = ((g_sum * mul_sum) >> shg_sum) * pa; 345 | pixels[p+2] = ((b_sum * mul_sum) >> shg_sum) * pa; 346 | } else { 347 | pixels[p] = pixels[p+1] = pixels[p+2] = 0; 348 | } 349 | 350 | r_sum -= r_out_sum; 351 | g_sum -= g_out_sum; 352 | b_sum -= b_out_sum; 353 | a_sum -= a_out_sum; 354 | 355 | r_out_sum -= stackIn.r; 356 | g_out_sum -= stackIn.g; 357 | b_out_sum -= stackIn.b; 358 | a_out_sum -= stackIn.a; 359 | 360 | p = (x + (((p = y + radiusPlus1) < heightMinus1 ? p : heightMinus1) * width)) << 2; 361 | 362 | r_sum += (r_in_sum += (stackIn.r = pixels[p])); 363 | g_sum += (g_in_sum += (stackIn.g = pixels[p+1])); 364 | b_sum += (b_in_sum += (stackIn.b = pixels[p+2])); 365 | a_sum += (a_in_sum += (stackIn.a = pixels[p+3])); 366 | 367 | stackIn = stackIn.next; 368 | 369 | r_out_sum += (pr = stackOut.r); 370 | g_out_sum += (pg = stackOut.g); 371 | b_out_sum += (pb = stackOut.b); 372 | a_out_sum += (pa = stackOut.a); 373 | 374 | r_in_sum -= pr; 375 | g_in_sum -= pg; 376 | b_in_sum -= pb; 377 | a_in_sum -= pa; 378 | 379 | stackOut = stackOut.next; 380 | 381 | yi += width; 382 | } 383 | } 384 | return imageData; 385 | } 386 | 387 | function processCanvasRGB(canvas, top_x, top_y, width, height, radius) 388 | { 389 | if (isNaN(radius) || radius < 1) return; 390 | radius |= 0; 391 | 392 | var imageData = getImageDataFromCanvas(canvas, top_x, top_y, width, height); 393 | imageData = processImageDataRGB(imageData, top_x, top_y, width, height, radius); 394 | 395 | canvas.getContext('2d').putImageData(imageData, top_x, top_y); 396 | } 397 | 398 | function processImageDataRGB(imageData, top_x, top_y, width, height, radius) 399 | { 400 | var pixels = imageData.data; 401 | 402 | var x, y, i, p, yp, yi, yw, r_sum, g_sum, b_sum, 403 | r_out_sum, g_out_sum, b_out_sum, 404 | r_in_sum, g_in_sum, b_in_sum, 405 | pr, pg, pb, rbs; 406 | 407 | var div = radius + radius + 1; 408 | var w4 = width << 2; 409 | var widthMinus1 = width - 1; 410 | var heightMinus1 = height - 1; 411 | var radiusPlus1 = radius + 1; 412 | var sumFactor = radiusPlus1 * (radiusPlus1 + 1) / 2; 413 | 414 | var stackStart = new BlurStack(); 415 | var stack = stackStart; 416 | for (i = 1; i < div; i++) 417 | { 418 | stack = stack.next = new BlurStack(); 419 | if (i == radiusPlus1) var stackEnd = stack; 420 | } 421 | stack.next = stackStart; 422 | var stackIn = null; 423 | var stackOut = null; 424 | 425 | yw = yi = 0; 426 | 427 | var mul_sum = mul_table[radius]; 428 | var shg_sum = shg_table[radius]; 429 | 430 | for (y = 0; y < height; y++) 431 | { 432 | r_in_sum = g_in_sum = b_in_sum = r_sum = g_sum = b_sum = 0; 433 | 434 | r_out_sum = radiusPlus1 * (pr = pixels[yi]); 435 | g_out_sum = radiusPlus1 * (pg = pixels[yi+1]); 436 | b_out_sum = radiusPlus1 * (pb = pixels[yi+2]); 437 | 438 | r_sum += sumFactor * pr; 439 | g_sum += sumFactor * pg; 440 | b_sum += sumFactor * pb; 441 | 442 | stack = stackStart; 443 | 444 | for (i = 0; i < radiusPlus1; i++) 445 | { 446 | stack.r = pr; 447 | stack.g = pg; 448 | stack.b = pb; 449 | stack = stack.next; 450 | } 451 | 452 | for (i = 1; i < radiusPlus1; i++) 453 | { 454 | p = yi + ((widthMinus1 < i ? widthMinus1 : i) << 2); 455 | r_sum += (stack.r = (pr = pixels[p])) * (rbs = radiusPlus1 - i); 456 | g_sum += (stack.g = (pg = pixels[p+1])) * rbs; 457 | b_sum += (stack.b = (pb = pixels[p+2])) * rbs; 458 | 459 | r_in_sum += pr; 460 | g_in_sum += pg; 461 | b_in_sum += pb; 462 | 463 | stack = stack.next; 464 | } 465 | 466 | 467 | stackIn = stackStart; 468 | stackOut = stackEnd; 469 | for (x = 0; x < width; x++) 470 | { 471 | pixels[yi] = (r_sum * mul_sum) >> shg_sum; 472 | pixels[yi+1] = (g_sum * mul_sum) >> shg_sum; 473 | pixels[yi+2] = (b_sum * mul_sum) >> shg_sum; 474 | 475 | r_sum -= r_out_sum; 476 | g_sum -= g_out_sum; 477 | b_sum -= b_out_sum; 478 | 479 | r_out_sum -= stackIn.r; 480 | g_out_sum -= stackIn.g; 481 | b_out_sum -= stackIn.b; 482 | 483 | p = (yw + ((p = x + radius + 1) < widthMinus1 ? p : widthMinus1)) << 2; 484 | 485 | r_in_sum += (stackIn.r = pixels[p]); 486 | g_in_sum += (stackIn.g = pixels[p+1]); 487 | b_in_sum += (stackIn.b = pixels[p+2]); 488 | 489 | r_sum += r_in_sum; 490 | g_sum += g_in_sum; 491 | b_sum += b_in_sum; 492 | 493 | stackIn = stackIn.next; 494 | 495 | r_out_sum += (pr = stackOut.r); 496 | g_out_sum += (pg = stackOut.g); 497 | b_out_sum += (pb = stackOut.b); 498 | 499 | r_in_sum -= pr; 500 | g_in_sum -= pg; 501 | b_in_sum -= pb; 502 | 503 | stackOut = stackOut.next; 504 | 505 | yi += 4; 506 | } 507 | yw += width; 508 | } 509 | 510 | 511 | for (x = 0; x < width; x++) 512 | { 513 | g_in_sum = b_in_sum = r_in_sum = g_sum = b_sum = r_sum = 0; 514 | 515 | yi = x << 2; 516 | r_out_sum = radiusPlus1 * (pr = pixels[yi]); 517 | g_out_sum = radiusPlus1 * (pg = pixels[yi+1]); 518 | b_out_sum = radiusPlus1 * (pb = pixels[yi+2]); 519 | 520 | r_sum += sumFactor * pr; 521 | g_sum += sumFactor * pg; 522 | b_sum += sumFactor * pb; 523 | 524 | stack = stackStart; 525 | 526 | for (i = 0; i < radiusPlus1; i++) 527 | { 528 | stack.r = pr; 529 | stack.g = pg; 530 | stack.b = pb; 531 | stack = stack.next; 532 | } 533 | 534 | yp = width; 535 | 536 | for (i = 1; i <= radius; i++) 537 | { 538 | yi = (yp + x) << 2; 539 | 540 | r_sum += (stack.r = (pr = pixels[yi])) * (rbs = radiusPlus1 - i); 541 | g_sum += (stack.g = (pg = pixels[yi+1])) * rbs; 542 | b_sum += (stack.b = (pb = pixels[yi+2])) * rbs; 543 | 544 | r_in_sum += pr; 545 | g_in_sum += pg; 546 | b_in_sum += pb; 547 | 548 | stack = stack.next; 549 | 550 | if(i < heightMinus1) 551 | { 552 | yp += width; 553 | } 554 | } 555 | 556 | yi = x; 557 | stackIn = stackStart; 558 | stackOut = stackEnd; 559 | for (y = 0; y < height; y++) 560 | { 561 | p = yi << 2; 562 | pixels[p] = (r_sum * mul_sum) >> shg_sum; 563 | pixels[p+1] = (g_sum * mul_sum) >> shg_sum; 564 | pixels[p+2] = (b_sum * mul_sum) >> shg_sum; 565 | 566 | r_sum -= r_out_sum; 567 | g_sum -= g_out_sum; 568 | b_sum -= b_out_sum; 569 | 570 | r_out_sum -= stackIn.r; 571 | g_out_sum -= stackIn.g; 572 | b_out_sum -= stackIn.b; 573 | 574 | p = (x + (((p = y + radiusPlus1) < heightMinus1 ? p : heightMinus1) * width)) << 2; 575 | 576 | r_sum += (r_in_sum += (stackIn.r = pixels[p])); 577 | g_sum += (g_in_sum += (stackIn.g = pixels[p+1])); 578 | b_sum += (b_in_sum += (stackIn.b = pixels[p+2])); 579 | 580 | stackIn = stackIn.next; 581 | 582 | r_out_sum += (pr = stackOut.r); 583 | g_out_sum += (pg = stackOut.g); 584 | b_out_sum += (pb = stackOut.b); 585 | 586 | r_in_sum -= pr; 587 | g_in_sum -= pg; 588 | b_in_sum -= pb; 589 | 590 | stackOut = stackOut.next; 591 | 592 | yi += width; 593 | } 594 | } 595 | 596 | return imageData; 597 | } 598 | 599 | function BlurStack() 600 | { 601 | this.r = 0; 602 | this.g = 0; 603 | this.b = 0; 604 | this.a = 0; 605 | this.next = null; 606 | } 607 | 608 | module.exports = { 609 | image: processImage, 610 | canvasRGBA: processCanvasRGBA, 611 | canvasRGB: processCanvasRGB, 612 | imageDataRGBA: processImageDataRGBA, 613 | imageDataRGB: processImageDataRGB 614 | }; 615 | 616 | },{}]},{},[1])(1) 617 | }); -------------------------------------------------------------------------------- /src/views/DemoChart.vue: -------------------------------------------------------------------------------- 1 | 131 | 132 | 716 | 735 | 736 | 737 | --------------------------------------------------------------------------------