├── .gitignore
├── README.md
├── demo
    ├── .prettierignore
    ├── .prettierrc
    ├── README.md
    ├── babel.config.js
    ├── package-lock.json
    ├── package.json
    ├── public
    │   ├── favicon.ico
    │   └── index.html
    ├── src
    │   ├── App.vue
    │   ├── components
    │   │   ├── CustomNodeContent.vue
    │   │   ├── CustomNodeTypeContent.vue
    │   │   └── Example1.vue
    │   ├── exmaples
    │   │   └── default.js
    │   └── main.js
    └── vue.config.js
├── docs
    ├── css
    │   ├── app.42168777.css
    │   └── chunk-vendors.8e911b4c.css
    ├── favicon.ico
    ├── fonts
    │   ├── element-icons.535877f5.woff
    │   └── element-icons.732389de.ttf
    ├── img
    │   └── arrow.0390e83b.svg
    ├── index.html
    └── js
    │   ├── app.189fc154.js
    │   ├── app.189fc154.js.map
    │   ├── chunk-vendors.dc13fd8e.js
    │   └── chunk-vendors.dc13fd8e.js.map
└── simple-flow-chart
    ├── .prettierignore
    ├── .prettierrc
    ├── dist
        ├── demo.html
        ├── img
        │   └── arrow.0390e83b.svg
        ├── simpleFlowChart.common.js
        ├── simpleFlowChart.common.js.map
        ├── simpleFlowChart.css
        ├── simpleFlowChart.umd.js
        ├── simpleFlowChart.umd.js.map
        ├── simpleFlowChart.umd.min.js
        └── simpleFlowChart.umd.min.js.map
    ├── index.js
    ├── package-lock.json
    ├── package.json
    └── src
        ├── assets
            └── svg
            │   └── arrow.svg
        ├── components
            ├── ActionBar.vue
            ├── AddNode.vue
            ├── ArrowLine.vue
            ├── ConditionNode.vue
            ├── DeleteNode.vue
            ├── EndNode.vue
            ├── Node.vue
            ├── NodeContent.vue
            ├── NodeTypeContent.vue
            ├── NormalNode.vue
            └── StartNode.vue
        ├── constant.js
        ├── emit.js
        ├── index.vue
        └── utils.js


/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules
 3 | 
 4 | # local env files
 5 | .env.local
 6 | .env.*.local
 7 | 
 8 | # Log files
 9 | npm-debug.log*
10 | yarn-debug.log*
11 | yarn-error.log*
12 | pnpm-debug.log*
13 | 
14 | # Editor directories and files
15 | .idea
16 | .vscode
17 | *.suo
18 | *.ntvs*
19 | *.njsproj
20 | *.sln
21 | *.sw?


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # 一个基于Vue2的极简流程设计组件
  2 | 
  3 | > 如果需要在`React`项目中使用，可以移步`kne-union`实现的`react`版本：
  4 | > 
  5 | > 项目地址：https://github.com/kne-union/react-flow-chart
  6 | >
  7 | > 在线文档和示例：https://www.kne-union.top/#/libs/ReactFlowChart
  8 | 
  9 | ## 安装
 10 | 
 11 | ```bash
 12 | npm i @wanglin1994/simple-flow-chart
 13 | ```
 14 | 
 15 | ## 引入
 16 | 
 17 | ```js
 18 | import SimpleFlowChart from '@wanglin1994/simple-flow-chart'
 19 | 
 20 | 
 21 | Vue.use(SimpleFlowChart, {
 22 |   notRegisterNodeContent: false, // 如果需要自己编写节点内容组件，设为true
 23 |   notRegisterNodeTypeContent: false // 如果需要自己编写添加节点的悬浮面板组件，设为true
 24 | })
 25 | ```
 26 | 
 27 | 
 28 | 
 29 | ## 使用
 30 | 
 31 | ```html
 32 | <div class="flowChartContainer">
 33 |     <SimpleFlowChart v-model="data"></SimpleFlowChart>
 34 | </div>
 35 | ```
 36 | 
 37 | 提供一个宽高固定的容器，双向绑定的数据`data`可以回传完整数据，或者初始传一个空数组即可。
 38 | 
 39 | 
 40 | 
 41 | # 详细文档
 42 | 
 43 | ### 数据
 44 | 
 45 | ```html
 46 | <SimpleFlowChart v-model="data"></SimpleFlowChart>
 47 | ```
 48 | 
 49 | `data`数据结构示例如下：
 50 | 
 51 | ```js
 52 | [
 53 |   { id: 'startEvent', type: 'start', title: '开始' },
 54 |   {
 55 |     id: '随机id',
 56 |     type: 'normal',
 57 |     title: '申请人',
 58 |     content: '员工',
 59 |     configData: {},
 60 |     nodeList: []
 61 |   },
 62 |   {
 63 |     id: '随机id',
 64 |     type: 'condition',
 65 |     title: '条件分支',
 66 |     children: [
 67 |       {
 68 |         id: '随机id',
 69 |         title: '通过',
 70 |         content: '理由充分',
 71 |         type: 'normal',
 72 |         configData: {},
 73 |         nodeList: [
 74 |           {
 75 |             id: '随机id',
 76 |             type: 'normal',
 77 |             title: '审批人',
 78 |             content: '上级主管',
 79 |             configData: {},
 80 |             nodeList: []
 81 |       },
 82 |       {
 83 |         id: '随机id',
 84 |         type: 'normal',
 85 |         title: '指派',
 86 |         content: 'HR',
 87 |         configData: {},
 88 |         nodeList: []
 89 |       }
 90 |     ]
 91 |   },
 92 |   { id: 'endEvent', type: 'end', title: '结束' }
 93 | ]
 94 | ```
 95 | 
 96 | `title`字段为节点标题，会显示在节点上，`content`为节点内容，也会显示在节点上，如果有不需要显示的自定义数据都可以保存在`configData`里。
 97 | 
 98 | `id`默认会使用`uuid`随机生成，也可以自定义生成。
 99 | 
100 | 
101 | 
102 | ## 属性
103 | 
104 | ```html
105 | <SimpleFlowChart v-model="data"></SimpleFlowChart>
106 | ```
107 | 
108 | `SimpleFlowChart`组件还支持以下属性：
109 | 
110 | ### initFit
111 | 
112 | > v0.0.4+
113 | 
114 | 类型：`Boolean`，默认为`false`
115 | 
116 | 是否在第一次渲染时将流程图自动缩放至全部显示。
117 | 
118 | 如果你想在容器大小改变后自动缩放，那么需要手动调用组件实例的`fit()`方法。
119 | 
120 | ### showScrollBar
121 | 
122 | > v0.0.4+
123 | 
124 | 类型：`Boolean`，默认为`true`
125 | 
126 | 是否显示滚动条。
127 | 
128 | ### enableDrag
129 | 
130 | > v0.0.3+
131 | 
132 | 类型：`Boolean`，默认为`true`
133 | 
134 | 是否必传：否
135 | 
136 | 是否开启按住画布拖拽功能。
137 | 
138 | ### customCreateNode
139 | 
140 | 类型：`Function`
141 | 
142 | 是否必传：否
143 | 
144 | 回调参数：`nodeList`（当前被点击添加新节点的节点所在节点列表）, `nodeData`（当前被点击添加新节点的节点）, `type`（悬浮面板里点击要添加的节点类型数据）
145 | 
146 | 自定义创建新节点，当点击添加节点的时候会调用该函数，需要返回一个要添加的新节点的数据结构。
147 | 
148 | 
149 | 
150 | ### customCreateConditionBranchNode
151 | 
152 | 类型：`Function`
153 | 
154 | 是否必传：否 
155 | 
156 | 回调参数：`nodeData`
157 | 
158 | 自定义创建新的分支节点。需要返回一个要添加的新节点的数据结构。
159 | 
160 | 
161 | 
162 | ### beforeDeleteNode
163 | 
164 | 类型：`Function`
165 | 
166 | 是否必传：否
167 | 
168 | 回调参数：`nodeList`, `childrenList`, `belongConditionNodeData`, `nodeData`
169 | 
170 | 删除节点前的回调函数，需要返回一个`Promise`，如果结果是`resolve` ，那么会执行删除，否则什么也不做。如果需要进行删除前的二次确认那么这个函数是你需要的。
171 | 
172 | 
173 | 
174 | ### background
175 | 
176 | 类型：`String`
177 | 
178 | 是否必传：否
179 | 
180 | 默认值：`rgba(0, 0, 0, 0.03)`
181 | 
182 | 画布背景颜色。
183 | 
184 | 
185 | 
186 | ### readonly
187 | 
188 | 类型：`Boolean`
189 | 
190 | 是否必传：否
191 | 
192 | 默认值：`false`
193 | 
194 | 是否只读。
195 | 
196 | 
197 | 
198 | ### nodeTypeList
199 | 
200 | 类型：`Array`
201 | 
202 | 是否必传：否
203 | 
204 | 默认可以添加的节点列表数据如下：
205 | 
206 | ```js
207 | [
208 |   {
209 |     name: '普通节点',
210 |     list: [
211 |       {
212 |         type: 'normal',
213 |         name: '普通节点'
214 |       }
215 |     ]
216 |   },
217 |   {
218 |     name: '分支节点',
219 |     list: [
220 |       {
221 |         type: 'condition',
222 |         name: '条件分支'
223 |       }
224 |     ]
225 |   }
226 | ]
227 | ```
228 | 
229 | 你可以通过该属性自定义可添加的节点类型列表。
230 | 
231 | 
232 | 
233 | ### vertical
234 | 
235 | 类型：`Boolean`
236 | 
237 | 是否必传：否
238 | 
239 | 是否垂直显示。
240 | 
241 | 
242 | 
243 | ### showScaleBar
244 | 
245 | 类型：`Boolean`
246 | 
247 | 是否必传：否
248 | 
249 | 是否显示右上角的放大缩小控件。
250 | 
251 | 
252 | 
253 | ### customCreateNodeId
254 | 
255 | 类型：`Function`
256 | 
257 | 是否必传：否
258 | 
259 | 自定义创建节点的唯一的`id`。
260 | 
261 | ## 方法
262 | 
263 | ### fit()
264 | 
265 | > v0.0.4+
266 | 
267 | 将流程图缩放至全部显示。
268 | 
269 | ## 事件
270 | 
271 | `SimpleFlowChart`组件上可以监听如下事件：
272 | 
273 | 
274 | 
275 | ### add-node
276 | 
277 | 数据：`newNode`
278 | 
279 | 添加完新节点后触发。
280 | 
281 | 
282 | 
283 | ### delete-node
284 | 
285 | 数据：`nodeData`
286 | 
287 | 删除一个节点后触发。
288 | 
289 | 
290 | 
291 | ### add-condition-branch
292 | 
293 | 数据：`newNode`
294 | 
295 | 添加完新的分支节点后触发。
296 | 
297 | 
298 | 
299 | ### node-content-click
300 | 
301 | 数据：`nodeData`、`nodeList`
302 | 
303 | 一个节点被点击时触发，一般用于配置某个节点数据时使用。
304 | 
305 | 
306 | 
307 | ## 自定义节点
308 | 
309 | 如果想自定义节点的样式，首先需要在注册组件时传入如下选项：
310 | 
311 | ```js
312 | Vue.use(SimpleFlowChart, {
313 |   notRegisterNodeContent: true, // 如果需要自己编写节点内容组件，设为true
314 | })
315 | ```
316 | 
317 | 然后你就可以自己编写一个节点内容的组件了，组件的名称，也就是`name`必须为`SFCNodeContent`，然后再使用前先全局注册即可。
318 | 
319 | 组件的数据可以通过名为`data`的`props`来接收。
320 | 
321 | 
322 | 
323 | ## 自定义节点添加悬浮面板
324 | 
325 | 如果想自定义添加节点类型的悬浮选择面板，首先需要在注册组件时传入如下选项：
326 | 
327 | ```js
328 | Vue.use(SimpleFlowChart, {
329 |   notRegisterNodeContent: true, 
330 | })
331 | ```
332 | 
333 | 然后你就可以自己编写一个组件了，组件的名称，也就是`name`必须为`SFCNodeTypeContent`，然后再使用前先全局注册即可。
334 | 


--------------------------------------------------------------------------------
/demo/.prettierignore:
--------------------------------------------------------------------------------
 1 | src/assets
 2 | */.DS_Store
 3 | node_modules
 4 | public
 5 | *.json
 6 | *.md
 7 | .eslintrc.js
 8 | .prettierignore
 9 | .prettierrc
10 | package-lock.json
11 | package.json


--------------------------------------------------------------------------------
/demo/.prettierrc:
--------------------------------------------------------------------------------
1 | semi: false
2 | singleQuote: true
3 | printWidth: 80
4 | trailingComma: 'none'
5 | arrowParens: 'avoid'


--------------------------------------------------------------------------------
/demo/README.md:
--------------------------------------------------------------------------------
 1 | # example
 2 | 
 3 | ## Project setup
 4 | ```
 5 | npm install
 6 | ```
 7 | 
 8 | ### Compiles and hot-reloads for development
 9 | ```
10 | npm run serve
11 | ```
12 | 
13 | ### Compiles and minifies for production
14 | ```
15 | npm run build
16 | ```
17 | 
18 | ### Lints and fixes files
19 | ```
20 | npm run lint
21 | ```
22 | 
23 | ### Customize configuration
24 | See [Configuration Reference](https://cli.vuejs.org/config/).
25 | 


--------------------------------------------------------------------------------
/demo/babel.config.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   presets: ['@vue/cli-plugin-babel/preset'],
 3 |   plugins: [
 4 |     [
 5 |       'component',
 6 |       {
 7 |         libraryName: 'element-ui',
 8 |         styleLibraryName: 'theme-chalk'
 9 |       }
10 |     ]
11 |   ]
12 | }
13 | 


--------------------------------------------------------------------------------
/demo/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "example",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "serve": "vue-cli-service serve",
 7 |     "build": "vue-cli-service build",
 8 |     "buildLibrary": "vue-cli-service build --target lib --name simpleFlowChart ../simple-flow-chart/index.js --dest ../simple-flow-chart/dist",
 9 |     "lint": "vue-cli-service lint",
10 |     "format": "prettier --write src/*"
11 |   },
12 |   "dependencies": {
13 |     "core-js": "^3.6.5",
14 |     "element-ui": "^2.15.12",
15 |     "vue": "^2.6.11"
16 |   },
17 |   "devDependencies": {
18 |     "@vue/cli-plugin-babel": "~4.5.13",
19 |     "@vue/cli-plugin-eslint": "~4.5.13",
20 |     "@vue/cli-service": "~4.5.13",
21 |     "babel-eslint": "^10.1.0",
22 |     "babel-plugin-component": "^1.1.1",
23 |     "eslint": "^6.7.2",
24 |     "eslint-plugin-vue": "^6.2.2",
25 |     "less-loader": "^7.3.0",
26 |     "prettier": "^2.8.1",
27 |     "vue-template-compiler": "^2.6.11"
28 |   },
29 |   "eslintConfig": {
30 |     "root": true,
31 |     "env": {
32 |       "node": true
33 |     },
34 |     "extends": [
35 |       "plugin:vue/essential",
36 |       "eslint:recommended"
37 |     ],
38 |     "parserOptions": {
39 |       "parser": "babel-eslint"
40 |     },
41 |     "rules": {}
42 |   },
43 |   "browserslist": [
44 |     "> 1%",
45 |     "last 2 versions",
46 |     "not dead"
47 |   ]
48 | }
49 | 


--------------------------------------------------------------------------------
/demo/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wanglin2/simple-flow-chart/c0d4dae463ccbfe7674da8a78aeff6cf76a2bda4/demo/public/favicon.ico


--------------------------------------------------------------------------------
/demo/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width,initial-scale=1.0">
 7 |     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
 8 |     <title>一个极简的流程设计器</title>
 9 |   </head>
10 |   <body>
11 |     <noscript>
12 |       <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
13 |     </noscript>
14 |     <div id="app"></div>
15 |     <!-- built files will be auto injected -->
16 |   </body>
17 | </html>
18 | 


--------------------------------------------------------------------------------
/demo/src/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div id="app">
 3 |     <Example1></Example1>
 4 |   </div>
 5 | </template>
 6 | 
 7 | <script>
 8 | import Example1 from './components/Example1.vue'
 9 | 
10 | export default {
11 |   name: 'App',
12 |   components: {
13 |     Example1
14 |   }
15 | }
16 | </script>
17 | 
18 | <style>
19 | html,
20 | body,
21 | #app {
22 |   width: 100%;
23 |   height: 100%;
24 |   display: flex;
25 |   justify-content: center;
26 |   align-items: center;
27 |   margin: 0;
28 | }
29 | </style>
30 | 


--------------------------------------------------------------------------------
/demo/src/components/CustomNodeContent.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="sfcNormalNodeContent">
 3 |     <div class="sfcNormalNodeTitle">
 4 |       {{ data.title || '' }}
 5 |     </div>
 6 |     <div class="sfcNormalNodeData">
 7 |       <div class="sfcNormalNodeDataText">{{ data.content || '' }}</div>
 8 |     </div>
 9 |   </div>
10 | </template>
11 | 
12 | <script>
13 | /**
14 |  * @Author: 王林25
15 |  * @Date: 2022-12-15 09:33:21
16 |  * @Desc: 普通节点内容
17 |  */
18 | export default {
19 |   name: 'SFCNodeContent',
20 |   props: {
21 |     data: {
22 |       type: Object,
23 |       default: null
24 |     }
25 |   }
26 | }
27 | </script>
28 | 
29 | <style lang="less" scoped>
30 | .sfcNormalNodeContent {
31 |   width: 200px;
32 |   min-height: 70px;
33 |   padding: 5px 10px 8px;
34 |   border: 2px solid transparent;
35 |   border-radius: 8px;
36 |   box-shadow: 0 1px 4px 0 rgba(10, 30, 65, 0.16);
37 |   transition: all 0.1s cubic-bezier(0.645, 0.045, 0.355, 1);
38 |   background-color: #fff;
39 |   border-radius: 8px;
40 |   cursor: pointer;
41 | 
42 |   .sfcNormalNodeTitle {
43 |     position: relative;
44 |     display: flex;
45 |     align-items: center;
46 |     border-radius: 4px 4px 0 0;
47 |     cursor: pointer;
48 |     font-size: 14px;
49 |     text-align: left;
50 |     color: #1f1f1f;
51 |     font-weight: 600;
52 |     word-break: break-all;
53 |     min-height: 20px;
54 |   }
55 | 
56 |   .sfcNormalNodeData {
57 |     display: flex;
58 |     min-height: 32px;
59 |     align-items: center;
60 |     justify-content: space-between;
61 |     padding: 4px 8px;
62 |     margin-top: 10px;
63 |     background: rgba(0, 0, 0, 0.03);
64 |     border-radius: 4px;
65 | 
66 |     .sfcNormalNodeDataText {
67 |       color: #111f2c;
68 |       font-size: 14px;
69 |       line-height: 32px;
70 |       word-break: break-all;
71 |     }
72 | 
73 |     .sfcNormalNodeDataIcon {
74 |       width: 20px;
75 |     }
76 |   }
77 | }
78 | </style>
79 | 


--------------------------------------------------------------------------------
/demo/src/components/CustomNodeTypeContent.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="sfcNodeTypeContent">
 3 |     <div
 4 |       class="sfcNodeTypeGroup"
 5 |       v-for="(group, groupIndex) in nodeTypeList"
 6 |       :key="groupIndex"
 7 |     >
 8 |       <div class="sfcNodeTypeGroupName">{{ group.name }}</div>
 9 |       <div class="sfcNodeTypeList">
10 |         <div
11 |           class="sfcNodeTypeItem"
12 |           v-for="(type, typeIndex) in group.list"
13 |           :key="typeIndex"
14 |           @click="onNodeTypeClick(type, group)"
15 |         >
16 |           {{ type.name }}
17 |         </div>
18 |       </div>
19 |     </div>
20 |   </div>
21 | </template>
22 | 
23 | <script>
24 | import { defaultNodeTypeList } from '@wanglin1994/simple-flow-chart/src/constant'
25 | 
26 | export default {
27 |   name: 'SFCNodeTypeContent',
28 |   data() {
29 |     return {
30 |       nodeTypeList: defaultNodeTypeList
31 |     }
32 |   },
33 |   methods: {
34 |     onNodeTypeClick(...args) {
35 |       this.$emit('click', ...args)
36 |     }
37 |   }
38 | }
39 | </script>
40 | 
41 | <style lang="less" scoped>
42 | .sfcNodeTypeContent {
43 |   padding: 30px 20px;
44 |   width: 400px;
45 |   background-color: #fff;
46 |   border-radius: 4px;
47 | 
48 |   .sfcNodeTypeGroup {
49 |     width: 100%;
50 |     margin-bottom: 12px;
51 | 
52 |     &:last-of-type {
53 |       margin-bottom: 0;
54 |     }
55 | 
56 |     .sfcNodeTypeGroupName {
57 |       color: #888;
58 |       margin-bottom: 12px;
59 |     }
60 | 
61 |     .sfcNodeTypeList {
62 |       width: 100%;
63 |       display: flex;
64 |       flex-wrap: wrap;
65 |       justify-content: space-between;
66 |       margin-bottom: -12px;
67 | 
68 |       .sfcNodeTypeItem {
69 |         display: flex;
70 |         width: 136px;
71 |         padding: 4px 8px;
72 |         border: 1px solid #2e2e2e;
73 |         background: #fff;
74 |         color: #000;
75 |         font-size: 14px;
76 |         cursor: pointer;
77 |         margin-bottom: 12px;
78 | 
79 |         &:hover {
80 |           border-color: #595959;
81 |           background: #f5f5f5;
82 |         }
83 |       }
84 |     }
85 |   }
86 | }
87 | </style>
88 | 


--------------------------------------------------------------------------------
/demo/src/components/Example1.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="flowChartContainer">
  3 |     <SimpleFlowChart
  4 |       ref="SimpleFlowChart"
  5 |       v-model="data"
  6 |       :initFit="true"
  7 |       :enableDrag="true"
  8 |       :showScrollBar="true"
  9 |       :readonly="false"
 10 |       :beforeDeleteNode="beforeDeleteNode"
 11 |       :nodeTypeList="nodeTypeList"
 12 |       :vertical="false"
 13 |       @node-content-click="onNodeContentClick"
 14 |     >
 15 |     </SimpleFlowChart>
 16 |     <el-drawer :visible.sync="showNodeEdit" :with-header="false">
 17 |       <div class="nodeEditBox" v-if="showNodeEdit">
 18 |         <div class="nodeEditTitle">
 19 |           <div class="editTitle" v-if="isEditingTitle">
 20 |             <el-input
 21 |               v-model="editNodeData.title"
 22 |               @keyup.native.enter="isEditingTitle = false"
 23 |               @blur="isEditingTitle = false"
 24 |             ></el-input>
 25 |           </div>
 26 |           <div class="showTitle" v-else>
 27 |             <div class="title">{{ editNodeData.title }}</div>
 28 |             <div class="icon el-icon-edit" @click="isEditingTitle = true"></div>
 29 |           </div>
 30 |         </div>
 31 |         <div class="nodeEditContent">
 32 |           <el-input type="textarea" :rows="3" v-model="editNodeData.content">
 33 |           </el-input>
 34 |         </div>
 35 |       </div>
 36 |     </el-drawer>
 37 |   </div>
 38 | </template>
 39 | 
 40 | <script>
 41 | import example from '../exmaples/default'
 42 | import { Drawer, Dialog, Icon, Input, MessageBox } from 'element-ui'
 43 | 
 44 | export default {
 45 |   components: {
 46 |     [Drawer.name]: Drawer,
 47 |     [Dialog.name]: Dialog,
 48 |     [Icon.name]: Icon,
 49 |     [Input.name]: Input
 50 |   },
 51 |   data() {
 52 |     return {
 53 |       data: example,
 54 |       showNodeEdit: false,
 55 |       editNodeData: null,
 56 |       isEditingTitle: false,
 57 |       nodeTypeList: [
 58 |         {
 59 |           name: '普通节点',
 60 |           list: [
 61 |             {
 62 |               type: 'normal',
 63 |               name: '普通节点'
 64 |             }
 65 |           ]
 66 |         },
 67 |         {
 68 |           name: '分支节点',
 69 |           list: [
 70 |             {
 71 |               type: 'condition',
 72 |               name: '条件分支'
 73 |             }
 74 |           ]
 75 |         }
 76 |       ]
 77 |     }
 78 |   },
 79 |   mounted() {
 80 |     window.addEventListener('resize', this.onResize)
 81 |   },
 82 |   methods: {
 83 |     beforeDeleteNode(...args) {
 84 |       console.log(args)
 85 |       return MessageBox.confirm('确定删除该节点？', '提示', {
 86 |         confirmButtonText: '确定',
 87 |         cancelButtonText: '取消',
 88 |         type: 'warning'
 89 |       })
 90 |     },
 91 | 
 92 |     onNodeContentClick(node) {
 93 |       console.log(node)
 94 |       this.editNodeData = node
 95 |       this.showNodeEdit = true
 96 |     },
 97 | 
 98 |     onResize() {
 99 |       this.$refs.SimpleFlowChart.fit()
100 |     }
101 |   }
102 | }
103 | </script>
104 | 
105 | <style lang="less" scoped>
106 | .flowChartContainer {
107 |   width: 100%;
108 |   height: 100%;
109 | }
110 | 
111 | .nodeEditBox {
112 |   padding: 20px;
113 | 
114 |   .nodeEditTitle {
115 |     margin-bottom: 20px;
116 | 
117 |     .showTitle {
118 |       display: flex;
119 |       align-items: center;
120 | 
121 |       .title {
122 |         color: rgba(0, 0, 0, 0.85);
123 |         font-size: 20px;
124 |         font-weight: bold;
125 |         margin-right: 5px;
126 |       }
127 | 
128 |       .icon {
129 |         cursor: pointer;
130 |       }
131 |     }
132 |   }
133 | 
134 |   .nodeEditContent {
135 |   }
136 | }
137 | </style>
138 | 


--------------------------------------------------------------------------------
/demo/src/exmaples/default.js:
--------------------------------------------------------------------------------
  1 | export default [
  2 |   { id: 'startEvent', type: 'start', title: '开始' },
  3 |   {
  4 |     id: '随机id1',
  5 |     type: 'normal',
  6 |     title: '申请人',
  7 |     content: '员工',
  8 |     configData: {},
  9 |     nodeList: []
 10 |   },
 11 |   {
 12 |     id: '随机id2',
 13 |     type: 'normal',
 14 |     title: '审批人',
 15 |     content: '主管',
 16 |     configData: {},
 17 |     nodeList: []
 18 |   },
 19 |   {
 20 |     id: '随机id3',
 21 |     type: 'condition',
 22 |     title: '条件分支',
 23 |     children: [
 24 |       {
 25 |         id: '随机id3-1',
 26 |         title: '通过',
 27 |         content: '理由充分',
 28 |         type: 'normal',
 29 |         configData: {},
 30 |         nodeList: [
 31 |           {
 32 |             id: '随机id3-1-1',
 33 |             type: 'normal',
 34 |             title: '审批人',
 35 |             content: '上级主管',
 36 |             configData: {},
 37 |             nodeList: [
 38 |               {
 39 |                 id: '随机id3-1-1-1',
 40 |                 type: 'condition',
 41 |                 title: '条件分支',
 42 |                 children: [
 43 |                   {
 44 |                     id: '随机id3-1-1-1-1',
 45 |                     title: '通过',
 46 |                     content: '理由充分',
 47 |                     type: 'normal',
 48 |                     configData: {},
 49 |                     nodeList: []
 50 |                   },
 51 |                   {
 52 |                     id: '随机id3-1-1-1-2',
 53 |                     type: 'normal',
 54 |                     title: '驳回',
 55 |                     content: '理由不充分',
 56 |                     configData: {},
 57 |                     nodeList: []
 58 |                   }
 59 |                 ]
 60 |               }
 61 |             ]
 62 |           }
 63 |         ]
 64 |       },
 65 |       {
 66 |         id: '随机id3-2',
 67 |         type: 'normal',
 68 |         title: '指派',
 69 |         content: 'HR',
 70 |         configData: {},
 71 |         nodeList: [
 72 |           {
 73 |             id: '随机id3-2-1',
 74 |             type: 'condition',
 75 |             title: '条件分支',
 76 |             children: [
 77 |               {
 78 |                 id: '随机id3-2-1-1',
 79 |                 title: '通过',
 80 |                 content: '理由充分',
 81 |                 type: 'normal',
 82 |                 configData: {},
 83 |                 nodeList: []
 84 |               },
 85 |               {
 86 |                 id: '随机id3-2-1-2',
 87 |                 type: 'normal',
 88 |                 title: '驳回',
 89 |                 content: '理由不充分',
 90 |                 configData: {},
 91 |                 nodeList: []
 92 |               }
 93 |             ]
 94 |           }
 95 |         ]
 96 |       },
 97 |       {
 98 |         id: '随机id3-3',
 99 |         type: 'normal',
100 |         title: '驳回',
101 |         content: '理由不充分',
102 |         configData: {},
103 |         nodeList: []
104 |       }
105 |     ]
106 |   },
107 |   { id: 'endEvent', type: 'end', title: '结束' }
108 | ]
109 | 


--------------------------------------------------------------------------------
/demo/src/main.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import App from './App.vue'
 3 | import SimpleFlowChart from '@wanglin1994/simple-flow-chart'
 4 | // import '@wanglin1994/simple-flow-chart/dist/simpleFlowChart.css'
 5 | // import CustomNodeContent from './components/CustomNodeContent'
 6 | // import CustomNodeTypeContent from './components/CustomNodeTypeContent'
 7 | 
 8 | Vue.config.productionTip = false
 9 | // Vue.component(CustomNodeContent.name, CustomNodeContent)
10 | // Vue.component(CustomNodeTypeContent.name, CustomNodeTypeContent)
11 | Vue.use(SimpleFlowChart, {
12 |   notRegisterNodeContent: false, // 自定义节点内容
13 |   notRegisterNodeTypeContent: false // 自定义添加节点的悬浮面板
14 | })
15 | 
16 | new Vue({
17 |   render: h => h(App)
18 | }).$mount('#app')
19 | 


--------------------------------------------------------------------------------
/demo/vue.config.js:
--------------------------------------------------------------------------------
1 | const isDev = process.env.NODE_ENV === 'development'
2 | module.exports = {
3 |   publicPath: './',
4 |   outputDir: '../docs',
5 |   transpileDependencies: [],
6 |   lintOnSave: false
7 | }


--------------------------------------------------------------------------------
/docs/css/app.42168777.css:
--------------------------------------------------------------------------------
1 | .flowChartContainer[data-v-db16d6ae]{width:100%;height:100%}.nodeEditBox[data-v-db16d6ae]{padding:20px}.nodeEditBox .nodeEditTitle[data-v-db16d6ae]{margin-bottom:20px}.nodeEditBox .nodeEditTitle .showTitle[data-v-db16d6ae]{display:flex;align-items:center}.nodeEditBox .nodeEditTitle .showTitle .title[data-v-db16d6ae]{color:rgba(0,0,0,.85);font-size:20px;font-weight:700;margin-right:5px}.nodeEditBox .nodeEditTitle .showTitle .icon[data-v-db16d6ae]{cursor:pointer}#app,body,html{width:100%;height:100%;display:flex;justify-content:center;align-items:center;margin:0}.sfcActionBar[data-v-1f05bb34]{position:absolute;right:30px;top:12px;z-index:3;-webkit-user-select:none;-moz-user-select:none;user-select:none}.sfcActionBar .sfcActionScale[data-v-1f05bb34]{display:flex;align-items:center}.sfcActionBar .sfcActionScale .sfcActionScaleBtn[data-v-1f05bb34]{width:30px;height:30px;background-color:#fff;box-shadow:0 1px 5px 0 rgba(10,30,65,.08);border-radius:6px;display:flex;justify-content:center;align-items:center;cursor:pointer}.sfcActionBar .sfcActionScale .sfcActionScaleBtn svg[data-v-1f05bb34]{width:20px;height:20px;fill:rgba(0,0,0,.85)}.sfcActionBar .sfcActionScale .sfcActionScaleNum[data-v-1f05bb34]{width:50px;color:rgba(0,0,0,.85);font-size:14px;text-align:center}.sfcContainer[data-v-73cb8b1b]{width:100%;height:100%;overflow:hidden;box-sizing:border-box}.sfcContainer.showScrollBar[data-v-73cb8b1b]{overflow:auto}.sfcContainer[data-v-73cb8b1b] *{box-sizing:border-box;margin:0;padding:0}.sfcContainer .sfcContent[data-v-73cb8b1b]{display:flex;align-items:center;padding:20px;min-width:100%;min-height:100%;width:-moz-max-content;width:max-content;height:-moz-max-content;height:max-content;transform-origin:left top}.sfcContainer .sfcContent.transformOriginCenter[data-v-73cb8b1b]{transform-origin:center center}.sfcContainer .sfcContent.vertical[data-v-73cb8b1b]{flex-direction:column;justify-content:center}.sfcArrowLine[data-v-3f68034b]{position:relative;width:65px;-webkit-user-select:none;-moz-user-select:none;user-select:none}.sfcArrowLine.vertical[data-v-3f68034b]{width:auto;height:65px}.sfcArrowLine.vertical[data-v-3f68034b]:before{width:2px;height:100%;transform:translateX(-50%)}.sfcArrowLine.vertical.showArrow[data-v-3f68034b]:after{right:auto;bottom:0;top:auto;border-top:10px solid #dedede;border-left:6px solid transparent;border-right:6px solid transparent;border-bottom:none;transform:translateX(-50%)}.sfcArrowLine[data-v-3f68034b]:before{position:absolute;z-index:0;top:0;left:0;transform:translateY(-50%);height:2px;width:100%;background-color:#dedede;content:""}.sfcArrowLine.showArrow[data-v-3f68034b]:after{position:absolute;width:0;height:0;border-left:10px solid #dedede;border-top:6px solid transparent;border-bottom:6px solid transparent;content:"";right:0;top:0;transform:translateY(-50%)}.sfcAddNode[data-v-5cefb234]{position:absolute;right:0;top:0;width:65px;height:100%;display:flex;justify-content:center;align-items:center}.sfcAddNode.vertical[data-v-5cefb234]{right:auto;top:auto;left:0;bottom:0;width:100%;height:65px}.sfcAddNode .sfcAddNodeBtn[data-v-5cefb234]{position:relative;background:#0089ff;width:30px;height:30px;border-radius:50%;box-shadow:0 2px 4px 0 rgba(0,0,0,.1);display:flex;justify-content:center;align-items:center;cursor:pointer;transform:scale(0);transition:all .3s;z-index:2}.sfcAddNode .sfcAddNodeBtn[data-v-5cefb234]:hover{z-index:3}.sfcAddNode .sfcAddNodeBtn.dot[data-v-5cefb234]{transform:scale(.3)}.sfcAddNode .sfcAddNodeBtn.dot svg[data-v-5cefb234]{transform:scale(0)}.sfcAddNode .sfcAddNodeBtn.normal[data-v-5cefb234],.sfcAddNode .sfcAddNodeBtn.normal svg[data-v-5cefb234]{transform:scale(1)}.sfcAddNode .sfcAddNodeBtn svg[data-v-5cefb234]{fill:#fff;width:24px;height:24px;transform:scale(0)}.sfcAddNode .sfcNodeTypePopover[data-v-5cefb234]{position:absolute;visibility:hidden;transform:scale(0);transition:all .3s}.sfcAddNode .sfcNodeTypePopover[data-v-5cefb234]:after,.sfcAddNode .sfcNodeTypePopover[data-v-5cefb234]:before{content:"";position:absolute;top:0;width:20px;height:100%}.sfcAddNode .sfcNodeTypePopover[data-v-5cefb234]:before{left:-20px}.sfcAddNode .sfcNodeTypePopover[data-v-5cefb234]:after{right:-20px}.sfcAddNode .sfcNodeTypePopover.show[data-v-5cefb234]{visibility:visible;transform:scale(1)}.sfcConditionNodeContainer[data-v-7ca3100a]{position:relative;display:flex;align-items:center}.sfcConditionNodeContainer.vertical[data-v-7ca3100a]{flex-direction:column}.sfcConditionNodeContainer.vertical .sfcConditionAddBtn[data-v-7ca3100a]{left:50%;top:-18px;transform:translateX(-50%);width:auto;height:36px;padding-top:0;padding-bottom:0;line-height:32px}.sfcConditionNodeContainer.vertical .sfcConditionNodeItemList[data-v-7ca3100a]{display:flex}.sfcConditionNodeContainer.vertical .sfcConditionNodeItemList .sfcConditionNodeItem[data-v-7ca3100a]{padding-right:30px;padding-bottom:0}.sfcConditionNodeContainer.vertical .sfcConditionNodeItemList .sfcConditionNodeItem .sfcConditionNodeItemLine[data-v-7ca3100a]{height:2px;width:100%;top:0;left:0}.sfcConditionNodeContainer.vertical .sfcConditionNodeItemList .sfcConditionNodeItem .sfcConditionNodeItemLine.sfcConditionNodeItemLastLine[data-v-7ca3100a]{left:0;top:100%}.sfcConditionNodeContainer.vertical .sfcConditionNodeItemList .sfcConditionNodeItem:first-of-type>.sfcConditionNodeItemLine[data-v-7ca3100a]{left:50%;width:50%;height:2px;top:0}.sfcConditionNodeContainer.vertical .sfcConditionNodeItemList .sfcConditionNodeItem:first-of-type>.sfcConditionNodeItemLine.sfcConditionNodeItemLastLine[data-v-7ca3100a]{top:100%}.sfcConditionNodeContainer.vertical .sfcConditionNodeItemList .sfcConditionNodeItem:last-of-type>.sfcConditionNodeItemLine[data-v-7ca3100a]{left:0;width:50%;height:2px;top:0}.sfcConditionNodeContainer.vertical .sfcConditionNodeItemList .sfcConditionNodeItem:last-of-type>.sfcConditionNodeItemLine.sfcConditionNodeItemLastLine[data-v-7ca3100a]{top:100%}.sfcConditionNodeContainer.vertical .sfcConditionNodeItemList .sfcConditionNodeItem .sfcConditionNodeItemLinkLine[data-v-7ca3100a]{height:30px;width:2px;top:0;left:50%;transform:translateX(-50%)}.sfcConditionNodeContainer.vertical .sfcConditionNodeItemList .sfcConditionNodeItem .sfcConditionNodeItemNodeWrap[data-v-7ca3100a]{flex-direction:column;height:100%}.sfcConditionNodeContainer.vertical .sfcConditionNodeItemList .sfcConditionNodeItem .sfcConditionNodeItemNodeWrap .sfcConditionNodeItemLinkCrossLine[data-v-7ca3100a]{width:2px}.sfcConditionNodeContainer .sfcConditionAddBtn[data-v-7ca3100a]{position:absolute;left:-18px;top:50%;transform:translateY(-50%);z-index:2;width:36px;display:flex;flex-wrap:wrap;border:2px solid #dedede;background:#fff;border-radius:18px;color:#222;cursor:pointer;font-size:12px;padding:10px;text-align:center}.sfcConditionNodeContainer .sfcConditionNodeItemList .sfcConditionNodeItem[data-v-7ca3100a]{padding:30px;padding-right:0;position:relative}.sfcConditionNodeContainer .sfcConditionNodeItemList .sfcConditionNodeItem .sfcConditionNodeItemLine[data-v-7ca3100a]{position:absolute;height:100%;width:2px;left:0;top:0;background-color:#dedede}.sfcConditionNodeContainer .sfcConditionNodeItemList .sfcConditionNodeItem .sfcConditionNodeItemLine.sfcConditionNodeItemLastLine[data-v-7ca3100a]{left:100%}.sfcConditionNodeContainer .sfcConditionNodeItemList .sfcConditionNodeItem:first-of-type>.sfcConditionNodeItemLine[data-v-7ca3100a]{top:50%;height:50%}.sfcConditionNodeContainer .sfcConditionNodeItemList .sfcConditionNodeItem:last-of-type>.sfcConditionNodeItemLine[data-v-7ca3100a]{top:0;height:50%}.sfcConditionNodeContainer .sfcConditionNodeItemList .sfcConditionNodeItem .sfcConditionNodeItemLinkLine[data-v-7ca3100a]{position:absolute;width:30px;height:2px;left:0;top:50%;transform:translateY(-50%);background-color:#dedede}.sfcConditionNodeContainer .sfcConditionNodeItemList .sfcConditionNodeItem .sfcConditionNodeItemNodeWrap[data-v-7ca3100a]{display:flex;align-items:center}.sfcConditionNodeContainer .sfcConditionNodeItemList .sfcConditionNodeItem .sfcConditionNodeItemNodeWrap .sfcConditionNodeItemLinkCrossLine[data-v-7ca3100a]{height:2px;flex-grow:1;background-color:#dedede}.sfcEndNodeContainer[data-v-f1309ae2]{width:90px;height:40px;border-radius:30px;box-shadow:0 1px 5px 0 rgba(10,30,65,.08);color:#fff;line-height:40px;text-align:center;background:#6e6e6e}.sfcNodeContainer[data-v-2ae6cee8]{position:relative}.sfcNormalNodeContainer[data-v-f3fe072c]{position:relative;display:flex;flex-shrink:0;align-items:center}.sfcNormalNodeContainer.vertical .sfcNormalNodeWrap[data-v-f3fe072c],.sfcNormalNodeContainer.vertical[data-v-f3fe072c]{flex-direction:column}.sfcNormalNodeContainer .sfcNormalNodeWrap[data-v-f3fe072c]{position:relative;display:flex;align-items:center}.sfcNormalNodeContainer .sfcNormalNodeWrap .sfcNormalNodeContentWrap[data-v-f3fe072c]{position:relative}.sfcStartNodeContainer[data-v-aee8cabe]{display:flex;align-items:center}.sfcStartNodeContainer.vertical[data-v-aee8cabe]{flex-direction:column}.sfcStartNodeContainer .sfcStartNodeContent[data-v-aee8cabe]{width:90px;height:40px;border-radius:30px;box-shadow:0 1px 5px 0 rgba(10,30,65,.08);color:#fff;line-height:40px;text-align:center;background:#2c2c2c}.sfcNormalNodeContent[data-v-645aa214]{width:200px;min-height:70px;padding:5px 10px 8px;border:2px solid transparent;box-shadow:0 1px 4px 0 rgba(10,30,65,.16);transition:all .1s cubic-bezier(.645,.045,.355,1);background-color:#fff;border-radius:8px;cursor:pointer}.sfcNormalNodeContent .sfcNormalNodeTitle[data-v-645aa214]{position:relative;display:flex;align-items:center;border-radius:4px 4px 0 0;cursor:pointer;font-size:14px;text-align:left;color:#1f1f1f;font-weight:600;word-break:break-all;min-height:20px}.sfcNormalNodeContent .sfcNormalNodeData[data-v-645aa214]{display:flex;min-height:32px;align-items:center;justify-content:space-between;padding:4px 8px;margin-top:10px;background:rgba(0,0,0,.03);border-radius:4px}.sfcNormalNodeContent .sfcNormalNodeData .sfcNormalNodeDataText[data-v-645aa214]{color:#111f2c;font-size:14px;line-height:32px;word-break:break-all}.sfcNormalNodeContent .sfcNormalNodeData .sfcNormalNodeDataIcon[data-v-645aa214]{width:20px}.sfcNodeTypeContent[data-v-1c26e8bd]{padding:12px 8px;width:300px;background-color:#000;border-radius:4px}.sfcNodeTypeContent .sfcNodeTypeGroup[data-v-1c26e8bd]{width:100%;margin-bottom:12px}.sfcNodeTypeContent .sfcNodeTypeGroup[data-v-1c26e8bd]:last-of-type{margin-bottom:0}.sfcNodeTypeContent .sfcNodeTypeGroup .sfcNodeTypeGroupName[data-v-1c26e8bd]{color:#888;margin-bottom:12px}.sfcNodeTypeContent .sfcNodeTypeGroup .sfcNodeTypeList[data-v-1c26e8bd]{width:100%;display:flex;flex-wrap:wrap;justify-content:space-between;margin-bottom:-12px}.sfcNodeTypeContent .sfcNodeTypeGroup .sfcNodeTypeList .sfcNodeTypeItem[data-v-1c26e8bd]{display:flex;width:136px;padding:4px 8px;border:1px solid #2e2e2e;background:#000;color:#fff;font-size:14px;cursor:pointer;margin-bottom:12px}.sfcNodeTypeContent .sfcNodeTypeGroup .sfcNodeTypeList .sfcNodeTypeItem[data-v-1c26e8bd]:hover{border-color:#595959;background:#3b3b3b}.sfcDeleteNode[data-v-0246b6f9]{position:absolute;top:-28px;right:0;background:#0089ff;width:24px;height:24px;border-radius:2px;display:flex;justify-content:center;align-items:center;cursor:pointer;animation:show-0246b6f9 1s}.sfcDeleteNode[data-v-0246b6f9]:after{content:"";position:absolute;width:100%;height:4px;left:0;bottom:-4px}.sfcDeleteNode svg[data-v-0246b6f9]{fill:#fff;width:16px;height:16px}@keyframes show-0246b6f9{0%{opacity:0}to{opacity:1}}


--------------------------------------------------------------------------------
/docs/css/chunk-vendors.8e911b4c.css:
--------------------------------------------------------------------------------
1 | .el-message-box,.el-popup-parent--hidden{overflow:hidden}.el-button{display:inline-block;line-height:1;white-space:nowrap;cursor:pointer;background:#fff;border:1px solid #dcdfe6;color:#606266;-webkit-appearance:none;text-align:center;box-sizing:border-box;outline:0;margin:0;transition:.1s;font-weight:500;-moz-user-select:none;-webkit-user-select:none;-ms-user-select:none;padding:12px 20px;font-size:14px;border-radius:4px}.el-button+.el-button{margin-left:10px}.el-button:focus,.el-button:hover{color:#409eff;border-color:#c6e2ff;background-color:#ecf5ff}.el-button:active{color:#3a8ee6;border-color:#3a8ee6;outline:0}.el-button::-moz-focus-inner{border:0}.el-button [class*=el-icon-]+span{margin-left:5px}.el-button.is-plain:focus,.el-button.is-plain:hover{background:#fff;border-color:#409eff;color:#409eff}.el-button.is-active,.el-button.is-plain:active{color:#3a8ee6;border-color:#3a8ee6}.el-button.is-plain:active{background:#fff;outline:0}.el-button.is-disabled,.el-button.is-disabled:focus,.el-button.is-disabled:hover{color:#c0c4cc;cursor:not-allowed;background-image:none;background-color:#fff;border-color:#ebeef5}.el-button.is-disabled.el-button--text{background-color:transparent}.el-button.is-disabled.is-plain,.el-button.is-disabled.is-plain:focus,.el-button.is-disabled.is-plain:hover{background-color:#fff;border-color:#ebeef5;color:#c0c4cc}.el-button.is-loading{position:relative;pointer-events:none}.el-button.is-loading:before{pointer-events:none;content:"";position:absolute;left:-1px;top:-1px;right:-1px;bottom:-1px;border-radius:inherit;background-color:hsla(0,0%,100%,.35)}.el-button.is-round{border-radius:20px;padding:12px 23px}.el-button.is-circle{border-radius:50%;padding:12px}.el-button--primary{color:#fff;background-color:#409eff;border-color:#409eff}.el-button--primary:focus,.el-button--primary:hover{background:#66b1ff;border-color:#66b1ff;color:#fff}.el-button--primary.is-active,.el-button--primary:active{background:#3a8ee6;border-color:#3a8ee6;color:#fff}.el-button--primary:active{outline:0}.el-button--primary.is-disabled,.el-button--primary.is-disabled:active,.el-button--primary.is-disabled:focus,.el-button--primary.is-disabled:hover{color:#fff;background-color:#a0cfff;border-color:#a0cfff}.el-button--primary.is-plain{color:#409eff;background:#ecf5ff;border-color:#b3d8ff}.el-button--primary.is-plain:focus,.el-button--primary.is-plain:hover{background:#409eff;border-color:#409eff;color:#fff}.el-button--primary.is-plain:active{background:#3a8ee6;border-color:#3a8ee6;color:#fff;outline:0}.el-button--primary.is-plain.is-disabled,.el-button--primary.is-plain.is-disabled:active,.el-button--primary.is-plain.is-disabled:focus,.el-button--primary.is-plain.is-disabled:hover{color:#8cc5ff;background-color:#ecf5ff;border-color:#d9ecff}.el-button--success{color:#fff;background-color:#67c23a;border-color:#67c23a}.el-button--success:focus,.el-button--success:hover{background:#85ce61;border-color:#85ce61;color:#fff}.el-button--success.is-active,.el-button--success:active{background:#5daf34;border-color:#5daf34;color:#fff}.el-button--success:active{outline:0}.el-button--success.is-disabled,.el-button--success.is-disabled:active,.el-button--success.is-disabled:focus,.el-button--success.is-disabled:hover{color:#fff;background-color:#b3e19d;border-color:#b3e19d}.el-button--success.is-plain{color:#67c23a;background:#f0f9eb;border-color:#c2e7b0}.el-button--success.is-plain:focus,.el-button--success.is-plain:hover{background:#67c23a;border-color:#67c23a;color:#fff}.el-button--success.is-plain:active{background:#5daf34;border-color:#5daf34;color:#fff;outline:0}.el-button--success.is-plain.is-disabled,.el-button--success.is-plain.is-disabled:active,.el-button--success.is-plain.is-disabled:focus,.el-button--success.is-plain.is-disabled:hover{color:#a4da89;background-color:#f0f9eb;border-color:#e1f3d8}.el-button--warning{color:#fff;background-color:#e6a23c;border-color:#e6a23c}.el-button--warning:focus,.el-button--warning:hover{background:#ebb563;border-color:#ebb563;color:#fff}.el-button--warning.is-active,.el-button--warning:active{background:#cf9236;border-color:#cf9236;color:#fff}.el-button--warning:active{outline:0}.el-button--warning.is-disabled,.el-button--warning.is-disabled:active,.el-button--warning.is-disabled:focus,.el-button--warning.is-disabled:hover{color:#fff;background-color:#f3d19e;border-color:#f3d19e}.el-button--warning.is-plain{color:#e6a23c;background:#fdf6ec;border-color:#f5dab1}.el-button--warning.is-plain:focus,.el-button--warning.is-plain:hover{background:#e6a23c;border-color:#e6a23c;color:#fff}.el-button--warning.is-plain:active{background:#cf9236;border-color:#cf9236;color:#fff;outline:0}.el-button--warning.is-plain.is-disabled,.el-button--warning.is-plain.is-disabled:active,.el-button--warning.is-plain.is-disabled:focus,.el-button--warning.is-plain.is-disabled:hover{color:#f0c78a;background-color:#fdf6ec;border-color:#faecd8}.el-button--danger{color:#fff;background-color:#f56c6c;border-color:#f56c6c}.el-button--danger:focus,.el-button--danger:hover{background:#f78989;border-color:#f78989;color:#fff}.el-button--danger.is-active,.el-button--danger:active{background:#dd6161;border-color:#dd6161;color:#fff}.el-button--danger:active{outline:0}.el-button--danger.is-disabled,.el-button--danger.is-disabled:active,.el-button--danger.is-disabled:focus,.el-button--danger.is-disabled:hover{color:#fff;background-color:#fab6b6;border-color:#fab6b6}.el-button--danger.is-plain{color:#f56c6c;background:#fef0f0;border-color:#fbc4c4}.el-button--danger.is-plain:focus,.el-button--danger.is-plain:hover{background:#f56c6c;border-color:#f56c6c;color:#fff}.el-button--danger.is-plain:active{background:#dd6161;border-color:#dd6161;color:#fff;outline:0}.el-button--danger.is-plain.is-disabled,.el-button--danger.is-plain.is-disabled:active,.el-button--danger.is-plain.is-disabled:focus,.el-button--danger.is-plain.is-disabled:hover{color:#f9a7a7;background-color:#fef0f0;border-color:#fde2e2}.el-button--info{color:#fff;background-color:#909399;border-color:#909399}.el-button--info:focus,.el-button--info:hover{background:#a6a9ad;border-color:#a6a9ad;color:#fff}.el-button--info.is-active,.el-button--info:active{background:#82848a;border-color:#82848a;color:#fff}.el-button--info:active{outline:0}.el-button--info.is-disabled,.el-button--info.is-disabled:active,.el-button--info.is-disabled:focus,.el-button--info.is-disabled:hover{color:#fff;background-color:#c8c9cc;border-color:#c8c9cc}.el-button--info.is-plain{color:#909399;background:#f4f4f5;border-color:#d3d4d6}.el-button--info.is-plain:focus,.el-button--info.is-plain:hover{background:#909399;border-color:#909399;color:#fff}.el-button--info.is-plain:active{background:#82848a;border-color:#82848a;color:#fff;outline:0}.el-button--info.is-plain.is-disabled,.el-button--info.is-plain.is-disabled:active,.el-button--info.is-plain.is-disabled:focus,.el-button--info.is-plain.is-disabled:hover{color:#bcbec2;background-color:#f4f4f5;border-color:#e9e9eb}.el-button--medium{padding:10px 20px;font-size:14px;border-radius:4px}.el-button--mini,.el-button--small{font-size:12px;border-radius:3px}.el-button--medium.is-round{padding:10px 20px}.el-button--medium.is-circle{padding:10px}.el-button--small,.el-button--small.is-round{padding:9px 15px}.el-button--small.is-circle{padding:9px}.el-button--mini,.el-button--mini.is-round{padding:7px 15px}.el-button--mini.is-circle{padding:7px}.el-button--text{border-color:transparent;color:#409eff;background:0 0;padding-left:0;padding-right:0}.el-button--text:focus,.el-button--text:hover{color:#66b1ff;border-color:transparent;background-color:transparent}.el-button--text:active{color:#3a8ee6;background-color:transparent}.el-button--text.is-disabled,.el-button--text.is-disabled:focus,.el-button--text.is-disabled:hover,.el-button--text:active{border-color:transparent}.el-button-group .el-button--danger:last-child,.el-button-group .el-button--danger:not(:first-child):not(:last-child),.el-button-group .el-button--info:last-child,.el-button-group .el-button--info:not(:first-child):not(:last-child),.el-button-group .el-button--primary:last-child,.el-button-group .el-button--primary:not(:first-child):not(:last-child),.el-button-group .el-button--success:last-child,.el-button-group .el-button--success:not(:first-child):not(:last-child),.el-button-group .el-button--warning:last-child,.el-button-group .el-button--warning:not(:first-child):not(:last-child),.el-button-group>.el-dropdown>.el-button{border-left-color:hsla(0,0%,100%,.5)}.el-button-group .el-button--danger:first-child,.el-button-group .el-button--danger:not(:first-child):not(:last-child),.el-button-group .el-button--info:first-child,.el-button-group .el-button--info:not(:first-child):not(:last-child),.el-button-group .el-button--primary:first-child,.el-button-group .el-button--primary:not(:first-child):not(:last-child),.el-button-group .el-button--success:first-child,.el-button-group .el-button--success:not(:first-child):not(:last-child),.el-button-group .el-button--warning:first-child,.el-button-group .el-button--warning:not(:first-child):not(:last-child){border-right-color:hsla(0,0%,100%,.5)}.el-button-group{display:inline-block;vertical-align:middle}.el-button-group:after,.el-button-group:before{display:table;content:""}.el-button-group:after{clear:both}.el-button-group>.el-button{float:left;position:relative}.el-button-group>.el-button+.el-button{margin-left:0}.el-button-group>.el-button.is-disabled{z-index:1}.el-button-group>.el-button:first-child{border-top-right-radius:0;border-bottom-right-radius:0}.el-button-group>.el-button:last-child{border-top-left-radius:0;border-bottom-left-radius:0}.el-button-group>.el-button:first-child:last-child,.el-input__inner{border-radius:4px}.el-button-group>.el-button:first-child:last-child.is-round{border-radius:20px}.el-button-group>.el-button:first-child:last-child.is-circle{border-radius:50%}.el-button-group>.el-button:not(:first-child):not(:last-child){border-radius:0}.el-button-group>.el-button:not(:last-child){margin-right:-1px}.el-button-group>.el-button.is-active,.el-button-group>.el-button:not(.is-disabled):active,.el-button-group>.el-button:not(.is-disabled):focus,.el-button-group>.el-button:not(.is-disabled):hover{z-index:1}.el-button-group>.el-dropdown>.el-button{border-top-left-radius:0;border-bottom-left-radius:0}.el-input__inner,.el-textarea__inner{background-image:none}.el-input-group__append .el-button,.el-input-group__append .el-input,.el-input-group__prepend .el-button,.el-input-group__prepend .el-input,.el-input__inner{font-size:inherit}.el-message-box{display:inline-block;width:420px;padding-bottom:10px;vertical-align:middle;background-color:#fff;border-radius:4px;border:1px solid #ebeef5;font-size:18px;box-shadow:0 2px 12px 0 rgba(0,0,0,.1);text-align:left;backface-visibility:hidden}.el-message-box__wrapper{position:fixed;top:0;bottom:0;left:0;right:0;text-align:center}.el-message-box__wrapper:after{content:"";display:inline-block;height:100%;width:0;vertical-align:middle}.el-message-box__header{position:relative;padding:15px 15px 10px}.el-message-box__title{padding-left:0;margin-bottom:0;font-size:18px;line-height:1;color:#303133}.el-message-box__headerbtn{position:absolute;top:15px;right:15px;padding:0;border:none;outline:0;background:0 0;font-size:16px;cursor:pointer}.el-message-box__headerbtn .el-message-box__close{color:#909399}.el-message-box__headerbtn:focus .el-message-box__close,.el-message-box__headerbtn:hover .el-message-box__close{color:#409eff}.el-message-box__content{padding:10px 15px;color:#606266;font-size:14px}.el-message-box__container{position:relative}.el-message-box__input{padding-top:15px}.el-message-box__input input.invalid,.el-message-box__input input.invalid:focus{border-color:#f56c6c}.el-message-box__status{position:absolute;top:50%;transform:translateY(-50%);font-size:24px!important}.el-message-box__status:before{padding-left:1px}.el-message-box__status+.el-message-box__message{padding-left:36px;padding-right:12px}.el-message-box__status.el-icon-success{color:#67c23a}.el-message-box__status.el-icon-info{color:#909399}.el-message-box__status.el-icon-warning{color:#e6a23c}.el-message-box__status.el-icon-error{color:#f56c6c}.el-message-box__message{margin:0}.el-message-box__message p{margin:0;line-height:24px}.el-message-box__errormsg{color:#f56c6c;font-size:12px;min-height:18px;margin-top:2px}.el-message-box__btns{padding:5px 15px 0;text-align:right}.el-message-box__btns button:nth-child(2){margin-left:10px}.el-message-box__btns-reverse{flex-direction:row-reverse}.el-message-box--center{padding-bottom:30px}.el-message-box--center .el-message-box__header{padding-top:30px}.el-message-box--center .el-message-box__title{position:relative;display:flex;align-items:center;justify-content:center}.el-message-box--center .el-message-box__status{position:relative;top:auto;padding-right:5px;text-align:center;transform:translateY(-1px)}.el-message-box--center .el-message-box__message{margin-left:0}.el-message-box--center .el-message-box__btns,.el-message-box--center .el-message-box__content{text-align:center}.el-message-box--center .el-message-box__content{padding-left:27px;padding-right:27px}.msgbox-fade-enter-active{animation:msgbox-fade-in .3s}.msgbox-fade-leave-active{animation:msgbox-fade-out .3s}@keyframes msgbox-fade-in{0%{transform:translate3d(0,-20px,0);opacity:0}to{transform:translateZ(0);opacity:1}}@keyframes msgbox-fade-out{0%{transform:translateZ(0);opacity:1}to{transform:translate3d(0,-20px,0);opacity:0}}.fade-in-linear-enter-active,.fade-in-linear-leave-active{transition:opacity .2s linear}.fade-in-linear-enter,.fade-in-linear-leave,.fade-in-linear-leave-active{opacity:0}.el-fade-in-linear-enter-active,.el-fade-in-linear-leave-active{transition:opacity .2s linear}.el-fade-in-linear-enter,.el-fade-in-linear-leave,.el-fade-in-linear-leave-active{opacity:0}.el-fade-in-enter-active,.el-fade-in-leave-active{transition:all .3s cubic-bezier(.55,0,.1,1)}.el-fade-in-enter,.el-fade-in-leave-active{opacity:0}.el-zoom-in-center-enter-active,.el-zoom-in-center-leave-active{transition:all .3s cubic-bezier(.55,0,.1,1)}.el-zoom-in-center-enter,.el-zoom-in-center-leave-active{opacity:0;transform:scaleX(0)}.el-zoom-in-top-enter-active,.el-zoom-in-top-leave-active{opacity:1;transform:scaleY(1);transition:transform .3s cubic-bezier(.23,1,.32,1),opacity .3s cubic-bezier(.23,1,.32,1);transform-origin:center top}.el-zoom-in-top-enter,.el-zoom-in-top-leave-active{opacity:0;transform:scaleY(0)}.el-zoom-in-bottom-enter-active,.el-zoom-in-bottom-leave-active{opacity:1;transform:scaleY(1);transition:transform .3s cubic-bezier(.23,1,.32,1),opacity .3s cubic-bezier(.23,1,.32,1);transform-origin:center bottom}.el-zoom-in-bottom-enter,.el-zoom-in-bottom-leave-active{opacity:0;transform:scaleY(0)}.el-zoom-in-left-enter-active,.el-zoom-in-left-leave-active{opacity:1;transform:scale(1);transition:transform .3s cubic-bezier(.23,1,.32,1),opacity .3s cubic-bezier(.23,1,.32,1);transform-origin:top left}.el-zoom-in-left-enter,.el-zoom-in-left-leave-active{opacity:0;transform:scale(.45)}.collapse-transition{transition:height .3s ease-in-out,padding-top .3s ease-in-out,padding-bottom .3s ease-in-out}.horizontal-collapse-transition{transition:width .3s ease-in-out,padding-left .3s ease-in-out,padding-right .3s ease-in-out}.el-list-enter-active,.el-list-leave-active{transition:all 1s}.el-list-enter,.el-list-leave-active{opacity:0;transform:translateY(-30px)}.el-opacity-transition{transition:opacity .3s cubic-bezier(.55,0,.1,1)}.el-input__inner,.el-textarea__inner{background-image:none;-webkit-box-sizing:border-box;-webkit-transition:border-color .2s cubic-bezier(.645,.045,.355,1)}.el-textarea{position:relative;display:inline-block;width:100%;vertical-align:bottom;font-size:14px}.el-textarea__inner{display:block;resize:vertical;padding:5px 15px;line-height:1.5;box-sizing:border-box;width:100%;font-size:inherit;color:#606266;background-color:#fff;border:1px solid #dcdfe6;border-radius:4px;transition:border-color .2s cubic-bezier(.645,.045,.355,1)}.el-textarea__inner::-moz-placeholder{color:#c0c4cc}.el-textarea__inner::placeholder{color:#c0c4cc}.el-textarea__inner:hover{border-color:#c0c4cc}.el-textarea__inner:focus{outline:0;border-color:#409eff}.el-textarea .el-input__count{color:#909399;background:#fff;position:absolute;font-size:12px;bottom:5px;right:10px}.el-textarea.is-disabled .el-textarea__inner{background-color:#f5f7fa;border-color:#e4e7ed;color:#c0c4cc;cursor:not-allowed}.el-textarea.is-disabled .el-textarea__inner::-moz-placeholder{color:#c0c4cc}.el-textarea.is-disabled .el-textarea__inner::placeholder{color:#c0c4cc}.el-textarea.is-exceed .el-textarea__inner{border-color:#f56c6c}.el-textarea.is-exceed .el-input__count{color:#f56c6c}.el-input{position:relative;font-size:14px;display:inline-block;width:100%}.el-input::-webkit-scrollbar{z-index:11;width:6px}.el-input::-webkit-scrollbar:horizontal{height:6px}.el-input::-webkit-scrollbar-thumb{border-radius:5px;width:6px;background:#b4bccc}.el-input::-webkit-scrollbar-corner,.el-input::-webkit-scrollbar-track{background:#fff}.el-input::-webkit-scrollbar-track-piece{background:#fff;width:6px}.el-input .el-input__clear{color:#c0c4cc;font-size:14px;cursor:pointer;transition:color .2s cubic-bezier(.645,.045,.355,1)}.el-input .el-input__clear:hover{color:#909399}.el-input .el-input__count{height:100%;display:inline-flex;align-items:center;color:#909399;font-size:12px}.el-input-group__append .el-button,.el-input-group__append .el-input,.el-input-group__prepend .el-button,.el-input-group__prepend .el-input,.el-input__inner{font-size:inherit}.el-input .el-input__count .el-input__count-inner{background:#fff;line-height:normal;display:inline-block;padding:0 5px}.el-input__inner{-webkit-appearance:none;background-color:#fff;border-radius:4px;border:1px solid #dcdfe6;box-sizing:border-box;color:#606266;display:inline-block;height:40px;line-height:40px;outline:0;padding:0 15px;transition:border-color .2s cubic-bezier(.645,.045,.355,1);width:100%}.el-input__prefix,.el-input__suffix{position:absolute;top:0;-webkit-transition:all .3s;text-align:center;height:100%;color:#c0c4cc}.el-input__inner::-ms-reveal{display:none}.el-input__inner::-moz-placeholder{color:#c0c4cc}.el-input__inner::placeholder{color:#c0c4cc}.el-input__inner:hover{border-color:#c0c4cc}.el-input.is-active .el-input__inner,.el-input__inner:focus{border-color:#409eff;outline:0}.el-input__suffix{right:5px;transition:all .3s;pointer-events:none}.el-input__suffix-inner{pointer-events:all}.el-input__prefix{left:5px;transition:all .3s}.el-input__icon{height:100%;width:25px;text-align:center;transition:all .3s;line-height:40px}.el-input__icon:after{content:"";height:100%;width:0;display:inline-block;vertical-align:middle}.el-input__validateIcon{pointer-events:none}.el-input.is-disabled .el-input__inner{background-color:#f5f7fa;border-color:#e4e7ed;color:#c0c4cc;cursor:not-allowed}.el-input.is-disabled .el-input__inner::-moz-placeholder{color:#c0c4cc}.el-input.is-disabled .el-input__inner::placeholder{color:#c0c4cc}.el-input.is-disabled .el-input__icon{cursor:not-allowed}.el-input.is-exceed .el-input__inner{border-color:#f56c6c}.el-input.is-exceed .el-input__suffix .el-input__count{color:#f56c6c}.el-input--suffix .el-input__inner{padding-right:30px}.el-input--prefix .el-input__inner{padding-left:30px}.el-input--medium{font-size:14px}.el-input--medium .el-input__inner{height:36px;line-height:36px}.el-input--medium .el-input__icon{line-height:36px}.el-input--small{font-size:13px}.el-input--small .el-input__inner{height:32px;line-height:32px}.el-input--small .el-input__icon{line-height:32px}.el-input--mini{font-size:12px}.el-input--mini .el-input__inner{height:28px;line-height:28px}.el-input--mini .el-input__icon{line-height:28px}.el-input-group{line-height:normal;display:inline-table;width:100%;border-collapse:separate;border-spacing:0}.el-input-group>.el-input__inner{vertical-align:middle;display:table-cell}.el-input-group__append,.el-input-group__prepend{background-color:#f5f7fa;color:#909399;vertical-align:middle;display:table-cell;position:relative;border:1px solid #dcdfe6;border-radius:4px;padding:0 20px;width:1px;white-space:nowrap}.el-input-group--prepend .el-input__inner,.el-input-group__append{border-top-left-radius:0;border-bottom-left-radius:0}.el-input-group--append .el-input__inner,.el-input-group__prepend{border-top-right-radius:0;border-bottom-right-radius:0}.el-input-group__append:focus,.el-input-group__prepend:focus{outline:0}.el-input-group__append .el-button,.el-input-group__append .el-select,.el-input-group__prepend .el-button,.el-input-group__prepend .el-select{display:inline-block;margin:-10px -20px}.el-input-group__append button.el-button,.el-input-group__append div.el-select .el-input__inner,.el-input-group__append div.el-select:hover .el-input__inner,.el-input-group__prepend button.el-button,.el-input-group__prepend div.el-select .el-input__inner,.el-input-group__prepend div.el-select:hover .el-input__inner{border-color:transparent;background-color:transparent;color:inherit;border-top:0;border-bottom:0}.el-input-group__prepend{border-right:0}.el-input-group__append{border-left:0}.el-input-group--append .el-select .el-input.is-focus .el-input__inner,.el-input-group--prepend .el-select .el-input.is-focus .el-input__inner{border-color:transparent}.el-input__inner::-ms-clear{display:none;width:0;height:0}@font-face{font-family:element-icons;src:url(../fonts/element-icons.535877f5.woff) format("woff"),url(../fonts/element-icons.732389de.ttf) format("truetype");font-weight:400;font-display:"auto";font-style:normal}[class*=" el-icon-"],[class^=el-icon-]{font-family:element-icons!important;speak:none;font-style:normal;font-weight:400;font-variant:normal;text-transform:none;line-height:1;vertical-align:baseline;display:inline-block;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.el-icon-ice-cream-round:before{content:"\e6a0"}.el-icon-ice-cream-square:before{content:"\e6a3"}.el-icon-lollipop:before{content:"\e6a4"}.el-icon-potato-strips:before{content:"\e6a5"}.el-icon-milk-tea:before{content:"\e6a6"}.el-icon-ice-drink:before{content:"\e6a7"}.el-icon-ice-tea:before{content:"\e6a9"}.el-icon-coffee:before{content:"\e6aa"}.el-icon-orange:before{content:"\e6ab"}.el-icon-pear:before{content:"\e6ac"}.el-icon-apple:before{content:"\e6ad"}.el-icon-cherry:before{content:"\e6ae"}.el-icon-watermelon:before{content:"\e6af"}.el-icon-grape:before{content:"\e6b0"}.el-icon-refrigerator:before{content:"\e6b1"}.el-icon-goblet-square-full:before{content:"\e6b2"}.el-icon-goblet-square:before{content:"\e6b3"}.el-icon-goblet-full:before{content:"\e6b4"}.el-icon-goblet:before{content:"\e6b5"}.el-icon-cold-drink:before{content:"\e6b6"}.el-icon-coffee-cup:before{content:"\e6b8"}.el-icon-water-cup:before{content:"\e6b9"}.el-icon-hot-water:before{content:"\e6ba"}.el-icon-ice-cream:before{content:"\e6bb"}.el-icon-dessert:before{content:"\e6bc"}.el-icon-sugar:before{content:"\e6bd"}.el-icon-tableware:before{content:"\e6be"}.el-icon-burger:before{content:"\e6bf"}.el-icon-knife-fork:before{content:"\e6c1"}.el-icon-fork-spoon:before{content:"\e6c2"}.el-icon-chicken:before{content:"\e6c3"}.el-icon-food:before{content:"\e6c4"}.el-icon-dish-1:before{content:"\e6c5"}.el-icon-dish:before{content:"\e6c6"}.el-icon-moon-night:before{content:"\e6ee"}.el-icon-moon:before{content:"\e6f0"}.el-icon-cloudy-and-sunny:before{content:"\e6f1"}.el-icon-partly-cloudy:before{content:"\e6f2"}.el-icon-cloudy:before{content:"\e6f3"}.el-icon-sunny:before{content:"\e6f6"}.el-icon-sunset:before{content:"\e6f7"}.el-icon-sunrise-1:before{content:"\e6f8"}.el-icon-sunrise:before{content:"\e6f9"}.el-icon-heavy-rain:before{content:"\e6fa"}.el-icon-lightning:before{content:"\e6fb"}.el-icon-light-rain:before{content:"\e6fc"}.el-icon-wind-power:before{content:"\e6fd"}.el-icon-baseball:before{content:"\e712"}.el-icon-soccer:before{content:"\e713"}.el-icon-football:before{content:"\e715"}.el-icon-basketball:before{content:"\e716"}.el-icon-ship:before{content:"\e73f"}.el-icon-truck:before{content:"\e740"}.el-icon-bicycle:before{content:"\e741"}.el-icon-mobile-phone:before{content:"\e6d3"}.el-icon-service:before{content:"\e6d4"}.el-icon-key:before{content:"\e6e2"}.el-icon-unlock:before{content:"\e6e4"}.el-icon-lock:before{content:"\e6e5"}.el-icon-watch:before{content:"\e6fe"}.el-icon-watch-1:before{content:"\e6ff"}.el-icon-timer:before{content:"\e702"}.el-icon-alarm-clock:before{content:"\e703"}.el-icon-map-location:before{content:"\e704"}.el-icon-delete-location:before{content:"\e705"}.el-icon-add-location:before{content:"\e706"}.el-icon-location-information:before{content:"\e707"}.el-icon-location-outline:before{content:"\e708"}.el-icon-location:before{content:"\e79e"}.el-icon-place:before{content:"\e709"}.el-icon-discover:before{content:"\e70a"}.el-icon-first-aid-kit:before{content:"\e70b"}.el-icon-trophy-1:before{content:"\e70c"}.el-icon-trophy:before{content:"\e70d"}.el-icon-medal:before{content:"\e70e"}.el-icon-medal-1:before{content:"\e70f"}.el-icon-stopwatch:before{content:"\e710"}.el-icon-mic:before{content:"\e711"}.el-icon-copy-document:before{content:"\e718"}.el-icon-full-screen:before{content:"\e719"}.el-icon-switch-button:before{content:"\e71b"}.el-icon-aim:before{content:"\e71c"}.el-icon-crop:before{content:"\e71d"}.el-icon-odometer:before{content:"\e71e"}.el-icon-time:before{content:"\e71f"}.el-icon-bangzhu:before{content:"\e724"}.el-icon-close-notification:before{content:"\e726"}.el-icon-microphone:before{content:"\e727"}.el-icon-turn-off-microphone:before{content:"\e728"}.el-icon-position:before{content:"\e729"}.el-icon-postcard:before{content:"\e72a"}.el-icon-message:before{content:"\e72b"}.el-icon-chat-line-square:before{content:"\e72d"}.el-icon-chat-dot-square:before{content:"\e72e"}.el-icon-chat-dot-round:before{content:"\e72f"}.el-icon-chat-square:before{content:"\e730"}.el-icon-chat-line-round:before{content:"\e731"}.el-icon-chat-round:before{content:"\e732"}.el-icon-set-up:before{content:"\e733"}.el-icon-turn-off:before{content:"\e734"}.el-icon-open:before{content:"\e735"}.el-icon-connection:before{content:"\e736"}.el-icon-link:before{content:"\e737"}.el-icon-cpu:before{content:"\e738"}.el-icon-thumb:before{content:"\e739"}.el-icon-female:before{content:"\e73a"}.el-icon-male:before{content:"\e73b"}.el-icon-guide:before{content:"\e73c"}.el-icon-news:before{content:"\e73e"}.el-icon-price-tag:before{content:"\e744"}.el-icon-discount:before{content:"\e745"}.el-icon-wallet:before{content:"\e747"}.el-icon-coin:before{content:"\e748"}.el-icon-money:before{content:"\e749"}.el-icon-bank-card:before{content:"\e74a"}.el-icon-box:before{content:"\e74b"}.el-icon-present:before{content:"\e74c"}.el-icon-sell:before{content:"\e6d5"}.el-icon-sold-out:before{content:"\e6d6"}.el-icon-shopping-bag-2:before{content:"\e74d"}.el-icon-shopping-bag-1:before{content:"\e74e"}.el-icon-shopping-cart-2:before{content:"\e74f"}.el-icon-shopping-cart-1:before{content:"\e750"}.el-icon-shopping-cart-full:before{content:"\e751"}.el-icon-smoking:before{content:"\e752"}.el-icon-no-smoking:before{content:"\e753"}.el-icon-house:before{content:"\e754"}.el-icon-table-lamp:before{content:"\e755"}.el-icon-school:before{content:"\e756"}.el-icon-office-building:before{content:"\e757"}.el-icon-toilet-paper:before{content:"\e758"}.el-icon-notebook-2:before{content:"\e759"}.el-icon-notebook-1:before{content:"\e75a"}.el-icon-files:before{content:"\e75b"}.el-icon-collection:before{content:"\e75c"}.el-icon-receiving:before{content:"\e75d"}.el-icon-suitcase-1:before{content:"\e760"}.el-icon-suitcase:before{content:"\e761"}.el-icon-film:before{content:"\e763"}.el-icon-collection-tag:before{content:"\e765"}.el-icon-data-analysis:before{content:"\e766"}.el-icon-pie-chart:before{content:"\e767"}.el-icon-data-board:before{content:"\e768"}.el-icon-data-line:before{content:"\e76d"}.el-icon-reading:before{content:"\e769"}.el-icon-magic-stick:before{content:"\e76a"}.el-icon-coordinate:before{content:"\e76b"}.el-icon-mouse:before{content:"\e76c"}.el-icon-brush:before{content:"\e76e"}.el-icon-headset:before{content:"\e76f"}.el-icon-umbrella:before{content:"\e770"}.el-icon-scissors:before{content:"\e771"}.el-icon-mobile:before{content:"\e773"}.el-icon-attract:before{content:"\e774"}.el-icon-monitor:before{content:"\e775"}.el-icon-search:before{content:"\e778"}.el-icon-takeaway-box:before{content:"\e77a"}.el-icon-paperclip:before{content:"\e77d"}.el-icon-printer:before{content:"\e77e"}.el-icon-document-add:before{content:"\e782"}.el-icon-document:before{content:"\e785"}.el-icon-document-checked:before{content:"\e786"}.el-icon-document-copy:before{content:"\e787"}.el-icon-document-delete:before{content:"\e788"}.el-icon-document-remove:before{content:"\e789"}.el-icon-tickets:before{content:"\e78b"}.el-icon-folder-checked:before{content:"\e77f"}.el-icon-folder-delete:before{content:"\e780"}.el-icon-folder-remove:before{content:"\e781"}.el-icon-folder-add:before{content:"\e783"}.el-icon-folder-opened:before{content:"\e784"}.el-icon-folder:before{content:"\e78a"}.el-icon-edit-outline:before{content:"\e764"}.el-icon-edit:before{content:"\e78c"}.el-icon-date:before{content:"\e78e"}.el-icon-c-scale-to-original:before{content:"\e7c6"}.el-icon-view:before{content:"\e6ce"}.el-icon-loading:before{content:"\e6cf"}.el-icon-rank:before{content:"\e6d1"}.el-icon-sort-down:before{content:"\e7c4"}.el-icon-sort-up:before{content:"\e7c5"}.el-icon-sort:before{content:"\e6d2"}.el-icon-finished:before{content:"\e6cd"}.el-icon-refresh-left:before{content:"\e6c7"}.el-icon-refresh-right:before{content:"\e6c8"}.el-icon-refresh:before{content:"\e6d0"}.el-icon-video-play:before{content:"\e7c0"}.el-icon-video-pause:before{content:"\e7c1"}.el-icon-d-arrow-right:before{content:"\e6dc"}.el-icon-d-arrow-left:before{content:"\e6dd"}.el-icon-arrow-up:before{content:"\e6e1"}.el-icon-arrow-down:before{content:"\e6df"}.el-icon-arrow-right:before{content:"\e6e0"}.el-icon-arrow-left:before{content:"\e6de"}.el-icon-top-right:before{content:"\e6e7"}.el-icon-top-left:before{content:"\e6e8"}.el-icon-top:before{content:"\e6e6"}.el-icon-bottom:before{content:"\e6eb"}.el-icon-right:before{content:"\e6e9"}.el-icon-back:before{content:"\e6ea"}.el-icon-bottom-right:before{content:"\e6ec"}.el-icon-bottom-left:before{content:"\e6ed"}.el-icon-caret-top:before{content:"\e78f"}.el-icon-caret-bottom:before{content:"\e790"}.el-icon-caret-right:before{content:"\e791"}.el-icon-caret-left:before{content:"\e792"}.el-icon-d-caret:before{content:"\e79a"}.el-icon-share:before{content:"\e793"}.el-icon-menu:before{content:"\e798"}.el-icon-s-grid:before{content:"\e7a6"}.el-icon-s-check:before{content:"\e7a7"}.el-icon-s-data:before{content:"\e7a8"}.el-icon-s-opportunity:before{content:"\e7aa"}.el-icon-s-custom:before{content:"\e7ab"}.el-icon-s-claim:before{content:"\e7ad"}.el-icon-s-finance:before{content:"\e7ae"}.el-icon-s-comment:before{content:"\e7af"}.el-icon-s-flag:before{content:"\e7b0"}.el-icon-s-marketing:before{content:"\e7b1"}.el-icon-s-shop:before{content:"\e7b4"}.el-icon-s-open:before{content:"\e7b5"}.el-icon-s-management:before{content:"\e7b6"}.el-icon-s-ticket:before{content:"\e7b7"}.el-icon-s-release:before{content:"\e7b8"}.el-icon-s-home:before{content:"\e7b9"}.el-icon-s-promotion:before{content:"\e7ba"}.el-icon-s-operation:before{content:"\e7bb"}.el-icon-s-unfold:before{content:"\e7bc"}.el-icon-s-fold:before{content:"\e7a9"}.el-icon-s-platform:before{content:"\e7bd"}.el-icon-s-order:before{content:"\e7be"}.el-icon-s-cooperation:before{content:"\e7bf"}.el-icon-bell:before{content:"\e725"}.el-icon-message-solid:before{content:"\e799"}.el-icon-video-camera:before{content:"\e772"}.el-icon-video-camera-solid:before{content:"\e796"}.el-icon-camera:before{content:"\e779"}.el-icon-camera-solid:before{content:"\e79b"}.el-icon-download:before{content:"\e77c"}.el-icon-upload2:before{content:"\e77b"}.el-icon-upload:before{content:"\e7c3"}.el-icon-picture-outline-round:before{content:"\e75f"}.el-icon-picture-outline:before{content:"\e75e"}.el-icon-picture:before{content:"\e79f"}.el-icon-close:before{content:"\e6db"}.el-icon-check:before{content:"\e6da"}.el-icon-plus:before{content:"\e6d9"}.el-icon-minus:before{content:"\e6d8"}.el-icon-help:before{content:"\e73d"}.el-icon-s-help:before{content:"\e7b3"}.el-icon-circle-close:before{content:"\e78d"}.el-icon-circle-check:before{content:"\e720"}.el-icon-circle-plus-outline:before{content:"\e723"}.el-icon-remove-outline:before{content:"\e722"}.el-icon-zoom-out:before{content:"\e776"}.el-icon-zoom-in:before{content:"\e777"}.el-icon-error:before{content:"\e79d"}.el-icon-success:before{content:"\e79c"}.el-icon-circle-plus:before{content:"\e7a0"}.el-icon-remove:before{content:"\e7a2"}.el-icon-info:before{content:"\e7a1"}.el-icon-question:before{content:"\e7a4"}.el-icon-warning-outline:before{content:"\e6c9"}.el-icon-warning:before{content:"\e7a3"}.el-icon-goods:before{content:"\e7c2"}.el-icon-s-goods:before{content:"\e7b2"}.el-icon-star-off:before{content:"\e717"}.el-icon-star-on:before{content:"\e797"}.el-icon-more-outline:before{content:"\e6cc"}.el-icon-more:before{content:"\e794"}.el-icon-phone-outline:before{content:"\e6cb"}.el-icon-phone:before{content:"\e795"}.el-icon-user:before{content:"\e6e3"}.el-icon-user-solid:before{content:"\e7a5"}.el-icon-setting:before{content:"\e6ca"}.el-icon-s-tools:before{content:"\e7ac"}.el-icon-delete:before{content:"\e6d7"}.el-icon-delete-solid:before{content:"\e7c9"}.el-icon-eleme:before{content:"\e7c7"}.el-icon-platform-eleme:before{content:"\e7ca"}.el-icon-loading{animation:rotating 2s linear infinite}.el-icon--right{margin-left:5px}.el-icon--left{margin-right:5px}@keyframes rotating{0%{transform:rotate(0)}to{transform:rotate(1turn)}}.v-modal-enter{animation:v-modal-in .2s ease}.v-modal-leave{animation:v-modal-out .2s ease forwards}@keyframes v-modal-in{0%{opacity:0}}@keyframes v-modal-out{to{opacity:0}}.v-modal{position:fixed;left:0;top:0;width:100%;height:100%;opacity:.5;background:#000}.el-popup-parent--hidden{overflow:hidden}.el-dialog{position:relative;margin:0 auto 50px;background:#fff;border-radius:2px;box-shadow:0 1px 3px rgba(0,0,0,.3);box-sizing:border-box;width:50%}.el-dialog.is-fullscreen{width:100%;margin-top:0;margin-bottom:0;height:100%;overflow:auto}.el-dialog__wrapper{position:fixed;top:0;right:0;bottom:0;left:0;overflow:auto;margin:0}.el-dialog__header{padding:20px 20px 10px}.el-dialog__headerbtn{position:absolute;top:20px;right:20px;padding:0;background:0 0;border:none;outline:0;cursor:pointer;font-size:16px}.el-dialog__headerbtn .el-dialog__close{color:#909399}.el-dialog__headerbtn:focus .el-dialog__close,.el-dialog__headerbtn:hover .el-dialog__close{color:#409eff}.el-dialog__title{line-height:24px;font-size:18px;color:#303133}.el-dialog__body{padding:30px 20px;color:#606266;font-size:14px;word-break:break-all}.el-dialog__footer{padding:10px 20px 20px;text-align:right;box-sizing:border-box}.el-dialog--center{text-align:center}.el-dialog--center .el-dialog__body{text-align:initial;padding:25px 25px 30px}.el-dialog--center .el-dialog__footer{text-align:inherit}.dialog-fade-enter-active{animation:dialog-fade-in .3s}.dialog-fade-leave-active{animation:dialog-fade-out .3s}@keyframes dialog-fade-in{0%{transform:translate3d(0,-20px,0);opacity:0}to{transform:translateZ(0);opacity:1}}@keyframes dialog-fade-out{0%{transform:translateZ(0);opacity:1}to{transform:translate3d(0,-20px,0);opacity:0}}.el-drawer.btt,.el-drawer.ttb,.el-drawer__container{left:0;right:0;width:100%}@keyframes el-drawer-fade-in{0%{opacity:0}to{opacity:1}}@keyframes rtl-drawer-in{0%{transform:translate(100%)}to{transform:translate(0)}}@keyframes rtl-drawer-out{0%{transform:translate(0)}to{transform:translate(100%)}}@keyframes ltr-drawer-in{0%{transform:translate(-100%)}to{transform:translate(0)}}@keyframes ltr-drawer-out{0%{transform:translate(0)}to{transform:translate(-100%)}}@keyframes ttb-drawer-in{0%{transform:translateY(-100%)}to{transform:translate(0)}}@keyframes ttb-drawer-out{0%{transform:translate(0)}to{transform:translateY(-100%)}}@keyframes btt-drawer-in{0%{transform:translateY(100%)}to{transform:translate(0)}}@keyframes btt-drawer-out{0%{transform:translate(0)}to{transform:translateY(100%)}}.el-drawer{position:absolute;box-sizing:border-box;background-color:#fff;display:flex;flex-direction:column;box-shadow:0 8px 10px -5px rgba(0,0,0,.2),0 16px 24px 2px rgba(0,0,0,.14),0 6px 30px 5px rgba(0,0,0,.12);overflow:hidden;outline:0}.el-drawer.rtl{animation:rtl-drawer-out .3s;right:0}.el-drawer__open .el-drawer.rtl{animation:rtl-drawer-in .3s 1ms}.el-drawer.ltr{animation:ltr-drawer-out .3s;left:0}.el-drawer__open .el-drawer.ltr{animation:ltr-drawer-in .3s 1ms}.el-drawer.ttb{animation:ttb-drawer-out .3s;top:0}.el-drawer__open .el-drawer.ttb{animation:ttb-drawer-in .3s 1ms}.el-drawer.btt{animation:btt-drawer-out .3s;bottom:0}.el-drawer__open .el-drawer.btt{animation:btt-drawer-in .3s 1ms}.el-drawer__wrapper{position:fixed;top:0;right:0;bottom:0;left:0;overflow:hidden;margin:0}.el-drawer__header{align-items:center;color:#72767b;display:flex;margin-bottom:32px;padding:20px 20px 0}.el-drawer__header>:first-child{flex:1}.el-drawer__title{margin:0;flex:1;line-height:inherit;font-size:1rem}.el-drawer__close-btn{border:none;cursor:pointer;font-size:20px;color:inherit;background-color:transparent}.el-drawer__body{flex:1;overflow:auto}.el-drawer__body>*{box-sizing:border-box}.el-drawer.ltr,.el-drawer.rtl,.el-drawer__container{height:100%;top:0;bottom:0}.el-drawer__container{position:relative}.el-drawer-fade-enter-active{animation:el-drawer-fade-in .3s}.el-drawer-fade-leave-active{animation:el-drawer-fade-in .3s reverse}


--------------------------------------------------------------------------------
/docs/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wanglin2/simple-flow-chart/c0d4dae463ccbfe7674da8a78aeff6cf76a2bda4/docs/favicon.ico


--------------------------------------------------------------------------------
/docs/fonts/element-icons.535877f5.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wanglin2/simple-flow-chart/c0d4dae463ccbfe7674da8a78aeff6cf76a2bda4/docs/fonts/element-icons.535877f5.woff


--------------------------------------------------------------------------------
/docs/fonts/element-icons.732389de.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wanglin2/simple-flow-chart/c0d4dae463ccbfe7674da8a78aeff6cf76a2bda4/docs/fonts/element-icons.732389de.ttf


--------------------------------------------------------------------------------
/docs/img/arrow.0390e83b.svg:
--------------------------------------------------------------------------------
1 | <?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1671180017363" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1156" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M312.888889 995.555556c-17.066667 0-28.444444-5.688889-39.822222-17.066667-22.755556-22.755556-17.066667-56.888889 5.688889-79.644445l364.088888-329.955555c11.377778-11.377778 17.066667-22.755556 17.066667-34.133333 0-11.377778-5.688889-22.755556-17.066667-34.133334L273.066667 187.733333c-22.755556-22.755556-28.444444-56.888889-5.688889-79.644444 22.755556-22.755556 56.888889-28.444444 79.644444-5.688889l364.088889 312.888889c34.133333 28.444444 56.888889 73.955556 56.888889 119.466667s-17.066667 85.333333-51.2 119.466666l-364.088889 329.955556c-11.377778 5.688889-28.444444 11.377778-39.822222 11.377778z" fill="#999999" p-id="1157"></path></svg>


--------------------------------------------------------------------------------
/docs/index.html:
--------------------------------------------------------------------------------
1 | <!DOCTYPE html><html lang=""><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="icon" href="favicon.ico"><title>一个极简的流程设计器</title><link href="css/app.42168777.css" rel="preload" as="style"><link href="css/chunk-vendors.8e911b4c.css" rel="preload" as="style"><link href="js/app.189fc154.js" rel="preload" as="script"><link href="js/chunk-vendors.dc13fd8e.js" rel="preload" as="script"><link href="css/chunk-vendors.8e911b4c.css" rel="stylesheet"><link href="css/app.42168777.css" rel="stylesheet"></head><body><noscript><strong>We're sorry but example doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div><script src="js/chunk-vendors.dc13fd8e.js"></script><script src="js/app.189fc154.js"></script></body></html>


--------------------------------------------------------------------------------
/docs/js/app.189fc154.js:
--------------------------------------------------------------------------------
1 | (function(e){function t(t){for(var o,a,d=t[0],l=t[1],r=t[2],u=0,p=[];u<d.length;u++)a=d[u],Object.prototype.hasOwnProperty.call(i,a)&&i[a]&&p.push(i[a][0]),i[a]=0;for(o in l)Object.prototype.hasOwnProperty.call(l,o)&&(e[o]=l[o]);c&&c(t);while(p.length)p.shift()();return s.push.apply(s,r||[]),n()}function n(){for(var e,t=0;t<s.length;t++){for(var n=s[t],o=!0,d=1;d<n.length;d++){var l=n[d];0!==i[l]&&(o=!1)}o&&(s.splice(t--,1),e=a(a.s=n[0]))}return e}var o={},i={app:0},s=[];function a(t){if(o[t])return o[t].exports;var n=o[t]={i:t,l:!1,exports:{}};return e[t].call(n.exports,n,n.exports,a),n.l=!0,n.exports}a.m=e,a.c=o,a.d=function(e,t,n){a.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:n})},a.r=function(e){"undefined"!==typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},a.t=function(e,t){if(1&t&&(e=a(e)),8&t)return e;if(4&t&&"object"===typeof e&&e&&e.__esModule)return e;var n=Object.create(null);if(a.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)a.d(n,o,function(t){return e[t]}.bind(null,o));return n},a.n=function(e){var t=e&&e.__esModule?function(){return e["default"]}:function(){return e};return a.d(t,"a",t),t},a.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},a.p="";var d=window["webpackJsonp"]=window["webpackJsonp"]||[],l=d.push.bind(d);d.push=t,d=d.slice();for(var r=0;r<d.length;r++)t(d[r]);var c=l;s.push([0,"chunk-vendors"]),n()})({0:function(e,t,n){e.exports=n("56d7")},"0a68":function(e,t,n){"use strict";n("1acc")},"11c5":function(e,t,n){"use strict";n("22da")},1937:function(e,t,n){"use strict";n("99e8")},"1acc":function(e,t,n){},"22da":function(e,t,n){},"2d0f":function(e,t,n){},"42ba":function(e,t,n){"use strict";n("6620")},4328:function(e,t,n){},"43f2":function(e,t,n){"use strict";n("f132")},"46b3":function(e,t,n){},"48ee":function(e,t,n){"use strict";n("7b7f")},5023:function(e,t,n){},5405:function(e,t,n){"use strict";n("6c50")},"56d7":function(e,t,n){"use strict";n.r(t);var o=n("2b0e"),i=function(){var e=this,t=e._self._c;return t("div",{attrs:{id:"app"}},[t("Example1")],1)},s=[],a=function(){var e=this,t=e._self._c;return t("div",{staticClass:"flowChartContainer"},[t("SimpleFlowChart",{ref:"SimpleFlowChart",attrs:{initFit:!0,enableDrag:!0,showScrollBar:!0,readonly:!1,beforeDeleteNode:e.beforeDeleteNode,nodeTypeList:e.nodeTypeList,vertical:!1},on:{"node-content-click":e.onNodeContentClick},model:{value:e.data,callback:function(t){e.data=t},expression:"data"}}),t("el-drawer",{attrs:{visible:e.showNodeEdit,"with-header":!1},on:{"update:visible":function(t){e.showNodeEdit=t}}},[e.showNodeEdit?t("div",{staticClass:"nodeEditBox"},[t("div",{staticClass:"nodeEditTitle"},[e.isEditingTitle?t("div",{staticClass:"editTitle"},[t("el-input",{on:{blur:function(t){e.isEditingTitle=!1}},nativeOn:{keyup:function(t){if(!t.type.indexOf("key")&&e._k(t.keyCode,"enter",13,t.key,"Enter"))return null;e.isEditingTitle=!1}},model:{value:e.editNodeData.title,callback:function(t){e.$set(e.editNodeData,"title",t)},expression:"editNodeData.title"}})],1):t("div",{staticClass:"showTitle"},[t("div",{staticClass:"title"},[e._v(e._s(e.editNodeData.title))]),t("div",{staticClass:"icon el-icon-edit",on:{click:function(t){e.isEditingTitle=!0}}})])]),t("div",{staticClass:"nodeEditContent"},[t("el-input",{attrs:{type:"textarea",rows:3},model:{value:e.editNodeData.content,callback:function(t){e.$set(e.editNodeData,"content",t)},expression:"editNodeData.content"}})],1)]):e._e()])],1)},d=[],l=(n("9e1f"),n("450d"),n("6ed5")),r=n.n(l),c=(n("10cb"),n("f3ad")),u=n.n(c),p=(n("aaa5"),n("a578")),f=n.n(p),h=(n("a7cc"),n("df33")),v=n.n(h),y=(n("0fb4"),n("9944")),m=n.n(y),C=[{id:"startEvent",type:"start",title:"开始"},{id:"随机id1",type:"normal",title:"申请人",content:"员工",configData:{},nodeList:[]},{id:"随机id2",type:"normal",title:"审批人",content:"主管",configData:{},nodeList:[]},{id:"随机id3",type:"condition",title:"条件分支",children:[{id:"随机id3-1",title:"通过",content:"理由充分",type:"normal",configData:{},nodeList:[{id:"随机id3-1-1",type:"normal",title:"审批人",content:"上级主管",configData:{},nodeList:[{id:"随机id3-1-1-1",type:"condition",title:"条件分支",children:[{id:"随机id3-1-1-1-1",title:"通过",content:"理由充分",type:"normal",configData:{},nodeList:[]},{id:"随机id3-1-1-1-2",type:"normal",title:"驳回",content:"理由不充分",configData:{},nodeList:[]}]}]}]},{id:"随机id3-2",type:"normal",title:"指派",content:"HR",configData:{},nodeList:[{id:"随机id3-2-1",type:"condition",title:"条件分支",children:[{id:"随机id3-2-1-1",title:"通过",content:"理由充分",type:"normal",configData:{},nodeList:[]},{id:"随机id3-2-1-2",type:"normal",title:"驳回",content:"理由不充分",configData:{},nodeList:[]}]}]},{id:"随机id3-3",type:"normal",title:"驳回",content:"理由不充分",configData:{},nodeList:[]}]},{id:"endEvent",type:"end",title:"结束"}],N={components:{[m.a.name]:m.a,[v.a.name]:v.a,[f.a.name]:f.a,[u.a.name]:u.a},data(){return{data:C,showNodeEdit:!1,editNodeData:null,isEditingTitle:!1,nodeTypeList:[{name:"普通节点",list:[{type:"normal",name:"普通节点"}]},{name:"分支节点",list:[{type:"condition",name:"条件分支"}]}]}},mounted(){window.addEventListener("resize",this.onResize)},methods:{beforeDeleteNode(...e){return console.log(e),r.a.confirm("确定删除该节点？","提示",{confirmButtonText:"确定",cancelButtonText:"取消",type:"warning"})},onNodeContentClick(e){console.log(e),this.editNodeData=e,this.showNodeEdit=!0},onResize(){this.$refs.SimpleFlowChart.fit()}}},w=N,b=(n("efc4"),n("2877")),g=Object(b["a"])(w,a,d,!1,null,"db16d6ae",null),L=g.exports,k={name:"App",components:{Example1:L}},T=k,S=(n("1937"),Object(b["a"])(T,i,s,!1,null,null,null)),D=S.exports,M=function(){var e=this,t=e._self._c;return t("div",{ref:"sfcContainer",staticClass:"sfcContainer",class:{showScrollBar:e.showScrollBar},style:{background:e.background},on:{mousedown:e.onMousedown}},[e.showScaleBar?t("SFCActionBar",{attrs:{scale:e.scale},on:{"update:scale":function(t){e.scale=t}}}):e._e(),t("div",{ref:"sfcContent",staticClass:"sfcContent",class:{vertical:e.vertical,transformOriginCenter:e.scale<=100},style:{transform:`scale(${e.scale/100})`}},e._l(e.data,(function(n){return t("SFCNode",{key:n.id,attrs:{nodeList:e.data,data:n}})})),1),e.showHideDiv?t("div"):e._e()],1)},_=[],x=(n("bf67"),n("f3a2"),n("1159")),B=n.n(x),E=new B.a,A=n("73d5");const F={},P=[{id:"startEvent",type:"start",title:"开始"},{id:"endEvent",type:"end",title:"结束"}],O=[{name:"普通节点",list:[{type:"normal",name:"普通节点"}]},{name:"分支节点",list:[{type:"condition",name:"条件分支"}]}],j=(e,t="普通节点",n="节点内容")=>{const o=F.customCreateNodeId||A["a"];switch(e){case"normal":return{id:o(),type:"normal",title:t,content:n,configData:{},nodeList:[]};case"condition":return{id:o(),type:"condition",title:"条件分支",children:[{id:o(),title:"条件1",content:"条件1的内容",type:"normal",configData:{},nodeList:[]},{id:o(),type:"normal",title:"条件2",content:"条件2的内容",configData:{},nodeList:[]}]};default:break}};var $=function(){var e=this,t=e._self._c;return t("div",{staticClass:"sfcActionBar"},[t("div",{staticClass:"sfcActionScale"},[t("div",{staticClass:"sfcActionScaleBtn",on:{click:e.scaleIn}},[t("svg",{attrs:{viewBox:"0 0 1024 1024",version:"1.1",xmlns:"http://www.w3.org/2000/svg"}},[t("path",{attrs:{d:"M580.722174 437.990403 580.722174 78.171384 436.794158 78.171384 436.794158 437.990403 76.975139 437.990403 76.975139 581.918419 436.794158 581.918419 436.794158 941.737438 580.722174 941.737438 580.722174 581.918419 940.542216 581.918419 940.542216 437.990403Z"}})])]),t("div",{staticClass:"sfcActionScaleNum"},[e._v(e._s(e.scale.toFixed(0))+"%")]),t("div",{staticClass:"sfcActionScaleBtn",on:{click:e.scaleOut}},[t("svg",{attrs:{viewBox:"0 0 1024 1024",version:"1.1",xmlns:"http://www.w3.org/2000/svg"}},[t("path",{attrs:{d:"M587.229378 437.990403 580.722174 437.990403 76.975139 437.990403 76.975139 581.918419 580.722174 581.918419 587.229378 581.918419 940.542216 581.918419 940.542216 437.990403Z"}})])])])])},I=[],H={name:"SFCActionBar",props:{scale:{type:Number}},methods:{scaleIn(){this.$emit("update:scale",this.scale+10)},scaleOut(){this.scale<=0||this.$emit("update:scale",this.scale-10)}}},z=H,R=(n("43f2"),Object(b["a"])(z,$,I,!1,null,"1f05bb34",null)),V=R.exports,W={name:"SimpleFlowChart",components:{[V.name]:V},model:{prop:"data",event:"change"},props:{data:{type:Array,default(){return[]}},customCreateNode:{type:Function},customCreateConditionBranchNode:{type:Function},beforeDeleteNode:{type:Function},background:{type:String,default:"rgba(0, 0, 0, 0.03)"},readonly:{type:Boolean,default:!1},nodeTypeList:{type:Array},vertical:{type:Boolean,default:!1},showScaleBar:{type:Boolean,default:!0},customCreateNodeId:{type:Function},enableDrag:{type:Boolean,default:!0},initFit:{type:Boolean,default:!1},showScrollBar:{type:Boolean,default:!0}},data(){return{scale:100,showHideDiv:!1,isMousedown:!1,mousedownPos:{x:0,y:0},mousedownScrollPos:{x:0,y:0}}},watch:{scale(){this.showHideDiv=!this.showHideDiv}},created(){F.readonly=this.readonly,F.nodeTypeList=this.nodeTypeList,F.vertical=this.vertical,F.customCreateNodeId=this.customCreateNodeId,this.data.length<=0&&this.data.push(...P),E.on("add-node-type-click",this.onAddNodeTypeClick),E.on("delete-node-click",this.onNodeDeleteClick),E.on("add-condition-branch-click",this.onAddConditionBranchClick),E.on("node-content-click",this.onNodeContentClick),window.addEventListener("mousemove",this.onMousemove),window.addEventListener("mouseup",this.onMouseup)},mounted(){this.initFit&&this.fit()},beforeDestroy(){E.off("add-node-type-click",this.onAddNodeTypeClick),E.off("delete-node-click",this.onNodeDeleteClick),E.off("add-condition-branch-click",this.onAddConditionBranchClick),E.off("node-content-click",this.onNodeContentClick),window.removeEventListener("mousemove",this.onMousemove),window.removeEventListener("mouseup",this.onMouseup)},methods:{fit(){this.scale=100,this.$nextTick(()=>{const e=this.$refs.sfcContainer.getBoundingClientRect(),t=e.width/e.height,n=this.$refs.sfcContent.getBoundingClientRect(),o=n.width/n.height;let i,s;t>o?(s=e.height,i=o*s):(i=e.width,s=i/o),this.scale=i/n.width*100,console.log(n.width,e.width);const a=(n.width-e.width)/2,d=(n.height-e.height)/2;this.$refs.sfcContainer.scrollTo(a,d)})},onAddNodeTypeClick(e,t,n){let o=null;this.customCreateNode&&(o=this.customCreateNode(e,t,n)),o||(o=j(n.type)),this.addNode(e,t,o),this.$emit("add-node",o)},addNode(e,t,n){if(e){let o=this.findNodeIndex(e,t);e.splice(o+1,0,n)}else t.nodeList.unshift(n)},onNodeDeleteClick(...e){this.beforeDeleteNode?this.beforeDeleteNode(...e).then(()=>{this.deleteNode(...e)}):(this.deleteNode(...e),this.$emit("delete-node",e[3]))},deleteNode(e,t,n,o){if(e){let t=this.findNodeIndex(e,o);e.splice(t,1)}else if(t){let e=this.findNodeIndex(t,o);t.splice(e,1),t.length<=1&&this.removeNodeFromData(n)}},onAddConditionBranchClick(e){let t=null;this.customCreateConditionBranchNode&&(t=this.customCreateConditionBranchNode(e)),t||(t=j("normal","条件","条件内容")),e.children.push(t),this.$emit("add-condition-branch",t)},onNodeContentClick(...e){this.$emit("node-content-click",...e)},findNodeIndex(e,t){return e.findIndex(e=>e===t)},removeNodeFromData(e){let t=n=>{for(let o=0;o<n.length;o++){let i=n[o];if(i===e)return n.splice(o,1),!0;let s=!1;if(i.children&&i.children.length>0&&(s=t(i.children)),!s&&i.nodeList&&i.nodeList.length>0&&(s=t(i.nodeList)),s)break}};t(this.data)},onMousedown(e){this.isMousedown=!0,this.mousedownPos.x=e.clientX,this.mousedownPos.y=e.clientY,this.mousedownScrollPos.x=this.$refs.sfcContainer.scrollLeft,this.mousedownScrollPos.y=this.$refs.sfcContainer.scrollTop},onMousemove(e){if(!this.isMousedown||!this.$refs.sfcContainer||!this.enableDrag)return;e.preventDefault();let t=this.mousedownScrollPos.x-(e.clientX-this.mousedownPos.x),n=this.mousedownScrollPos.y-(e.clientY-this.mousedownPos.y);this.$refs.sfcContainer.scrollTo(t,n)},onMouseup(){this.isMousedown=!1}}},G=W,J=(n("42ba"),Object(b["a"])(G,M,_,!1,null,"73cb8b1b",null)),X=J.exports,Y=function(){var e=this,t=e._self._c;return t("div",{staticClass:"sfcConditionNodeContainer",class:{vertical:e.vertical}},[e.readonly?e._e():t("div",{staticClass:"sfcConditionAddBtn",on:{click:e.onAddConditionBranchClick}},[e._v(" 添加条件 ")]),t("div",{staticClass:"sfcConditionNodeItemList"},e._l(e.data.children,(function(n){return t("div",{key:n.id,staticClass:"sfcConditionNodeItem"},[t("div",{staticClass:"sfcConditionNodeItemLine sfcConditionNodeItemFirstLine"}),t("div",{staticClass:"sfcConditionNodeItemLine sfcConditionNodeItemLastLine"}),t("div",{staticClass:"sfcConditionNodeItemLinkLine"}),t("div",{staticClass:"sfcConditionNodeItemNodeWrap"},[t("SFCNode",{attrs:{nodeList:null,childrenList:e.data.children,data:n,belongConditionNodeData:e.data,isMouseEnter:e.isMouseEnter}}),t("div",{staticClass:"sfcConditionNodeItemLinkCrossLine"})],1)])})),0),t("SFCArrowLine"),t("SFCAddNode",{attrs:{nodeList:e.nodeList,nodeData:e.data,btnType:e.isMouseEnter?"dot":""}})],1)},Z=[],q=function(){var e=this,t=e._self._c;return t("div",{staticClass:"sfcArrowLine",class:{showArrow:e.showArrow,vertical:e.vertical}})},K=[],Q={name:"SFCArrowLine",props:{showArrow:{type:Boolean,default:!0}},data(){return{vertical:F.vertical}}},U=Q,ee=(n("11c5"),Object(b["a"])(U,q,K,!1,null,"3f68034b",null)),te=ee.exports,ne=function(){var e=this,t=e._self._c;return e.readonly?e._e():t("div",{staticClass:"sfcAddNode",class:{vertical:e.vertical},on:{mouseenter:function(t){return t.stopPropagation(),e.onMouseenter.apply(null,arguments)},mouseleave:function(t){return t.stopPropagation(),e.onMouseleave.apply(null,arguments)}}},[t("div",{staticClass:"sfcAddNodeBtn",class:[e.type],on:{mouseenter:e.onAddBtnMouseenter,mouseleave:e.onAddBtnMouseleave}},[t("svg",{attrs:{viewBox:"0 0 1024 1024",version:"1.1",xmlns:"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink"}},[t("path",{attrs:{d:"M896 480H544.8V128h-65.6v352H128v66.4h351.2V896h65.6V546.4H896z"}})]),t("div",{ref:"nodeTypePopover",staticClass:"sfcNodeTypePopover",class:{show:e.showNodeTypePopover},style:e.nodeTypePopoverStyle},[t("SFCNodeTypeContent",{on:{click:e.onNodeTypeClick}})],1)])])},oe=[],ie={name:"SFCAddNode",props:{nodeList:{type:[Array,null],default(){return null}},nodeData:{type:Object,default:null},btnType:{type:String,default:""}},data(){return{readonly:F.readonly,vertical:F.vertical,addNodeBtnType:"",showNodeTypePopover:!1,nodeTypePopoverStyle:{}}},computed:{type(){return"normal"===this.addNodeBtnType?this.addNodeBtnType:this.btnType||this.addNodeBtnType}},watch:{showNodeTypePopover(e){e?this.$nextTick(()=>{this.setNodeTypePopoverStyle()}):setTimeout(()=>{this.resetNodeTypePopoverStyle()},300)}},created(){this.resetNodeTypePopoverStyle()},methods:{setNodeTypePopoverStyle(){let e=this.$refs.nodeTypePopover;if(!e)return;let t=e.offsetWidth,n=e.offsetHeight,{left:o,top:i}=e.getBoundingClientRect(),s=window.innerWidth,a=window.innerHeight,d={};d[i+n>a?"bottom":"top"]=0,d[o+t>s?"right":"left"]="42px",this.nodeTypePopoverStyle=d},resetNodeTypePopoverStyle(){this.nodeTypePopoverStyle={left:"42px",top:0}},onMouseenter(){this.addNodeBtnType="normal"},onMouseleave(){this.addNodeBtnType=""},onAddBtnMouseenter(){this.showNodeTypePopover=!0},onAddBtnMouseleave(){this.showNodeTypePopover=!1},onNodeTypeClick(...e){E.emit("add-node-type-click",this.nodeList,this.nodeData,...e),this.showNodeTypePopover=!1}}},se=ie,ae=(n("5ab0"),Object(b["a"])(se,ne,oe,!1,null,"5cefb234",null)),de=ae.exports,le={name:"SFCConditionNode",components:{[te.name]:te,[de.name]:de},props:{nodeList:{type:[Array,null],default(){return null}},data:{type:Object,default:null},isMouseEnter:{type:Boolean,default:!1}},data(){return{readonly:F.readonly,vertical:F.vertical}},methods:{onAddConditionBranchClick(){E.emit("add-condition-branch-click",this.data)}}},re=le,ce=(n("c64e"),Object(b["a"])(re,Y,Z,!1,null,"7ca3100a",null)),ue=ce.exports,pe=function(){var e=this,t=e._self._c;return t("div",{staticClass:"sfcEndNodeContainer"},[e._v(e._s(e.data.title))])},fe=[],he={name:"SFCEndNode",props:{data:{type:Object,default:null}}},ve=he,ye=(n("a00c"),Object(b["a"])(ve,pe,fe,!1,null,"f1309ae2",null)),me=ye.exports,Ce=function(){var e=this,t=e._self._c;return t("div",{staticClass:"sfcNodeContainer",on:{mouseenter:function(t){return t.stopPropagation(),e.onMouseenter.apply(null,arguments)},mouseleave:function(t){return t.stopPropagation(),e.onMouseleave.apply(null,arguments)}}},["start"===e.data.type?t("SFCStartNode",{attrs:{nodeList:e.nodeList,data:e.data,isMouseEnter:e.isMouseEnter||e.isCurrentMouseEnter}}):"end"===e.data.type?t("SFCEndNode",{attrs:{data:e.data}}):"condition"===e.data.type?t("SFCConditionNode",{attrs:{nodeList:e.nodeList,data:e.data,isMouseEnter:e.isMouseEnter||e.isCurrentMouseEnter}}):t("SFCNormalNode",{attrs:{nodeList:e.nodeList,childrenList:e.childrenList,data:e.data,belongConditionNodeData:e.belongConditionNodeData,isMouseEnter:e.isMouseEnter||e.isCurrentMouseEnter}})],1)},Ne=[],we={name:"SFCNode",props:{nodeList:{type:[Array,null],default(){return null}},childrenList:{type:[Array,null],default(){return null}},data:{type:Object,default:null},belongConditionNodeData:{type:Object,default:null},isMouseEnter:{type:Boolean,default:!1}},data(){return{isCurrentMouseEnter:!1}},methods:{onMouseenter(){this.isCurrentMouseEnter=!0},onMouseleave(){this.isCurrentMouseEnter=!1}}},be=we,ge=(n("a933"),Object(b["a"])(be,Ce,Ne,!1,null,"2ae6cee8",null)),Le=ge.exports,ke=function(){var e=this,t=e._self._c;return t("div",{staticClass:"sfcNormalNodeContainer",class:{vertical:e.vertical}},[t("div",{staticClass:"sfcNormalNodeWrap"},[t("div",{staticClass:"sfcNormalNodeContentWrap",on:{mouseenter:function(t){return t.stopPropagation(),e.onContentMouseenter.apply(null,arguments)},mouseleave:function(t){return t.stopPropagation(),e.onContentMouseleave.apply(null,arguments)},click:function(t){return t.stopPropagation(),e.onContentClick.apply(null,arguments)}}},[t("SFCNodeContent",{attrs:{data:e.data}}),e.showDeleteBtn&&!e.readonly?t("SFCDeleteNode",{on:{click:e.onDeleteNode}}):e._e()],1),t("SFCArrowLine"),t("SFCAddNode",{attrs:{nodeList:e.nodeList,nodeData:e.data,btnType:e.isMouseEnter?"dot":""}})],1),e._l(e.data.nodeList||[],(function(n){return t("SFCNode",{key:n.id,attrs:{nodeList:e.data.nodeList,data:n,isMouseEnter:e.isMouseEnter}})}))],2)},Te=[],Se={name:"SFCNormalNode",components:{[te.name]:te,[de.name]:de},props:{nodeList:{type:[Array,null],default(){return null}},childrenList:{type:[Array,null],default(){return null}},data:{type:Object,default:null},belongConditionNodeData:{type:Object,default:null},isMouseEnter:{type:Boolean,default:!1}},data(){return{readonly:F.readonly,vertical:F.vertical,showDeleteBtn:!1}},methods:{onContentMouseenter(){this.showDeleteBtn=!0},onContentMouseleave(){this.showDeleteBtn=!1},onContentClick(){E.emit("node-content-click",this.data,this.nodeList)},onDeleteNode(){E.emit("delete-node-click",this.nodeList,this.childrenList,this.belongConditionNodeData,this.data)}}},De=Se,Me=(n("48ee"),Object(b["a"])(De,ke,Te,!1,null,"f3fe072c",null)),_e=Me.exports,xe=function(){var e=this,t=e._self._c;return t("div",{staticClass:"sfcStartNodeContainer",class:{vertical:e.vertical}},[t("div",{staticClass:"sfcStartNodeContent"},[e._v(e._s(e.data.title))]),t("SFCArrowLine"),t("SFCAddNode",{attrs:{nodeList:e.nodeList,nodeData:e.data,btnType:e.isMouseEnter?"dot":""}})],1)},Be=[],Ee={name:"SFCStartNode",components:{[te.name]:te,[de.name]:de},props:{nodeList:{type:[Array,null],default(){return null}},data:{type:Object,default:null},isMouseEnter:{type:Boolean,default:!1}},data(){return{vertical:F.vertical}}},Ae=Ee,Fe=(n("0a68"),Object(b["a"])(Ae,xe,Be,!1,null,"aee8cabe",null)),Pe=Fe.exports,Oe=function(){var e=this,t=e._self._c;return t("div",{staticClass:"sfcNormalNodeContent"},[t("div",{staticClass:"sfcNormalNodeTitle"},[e._v(" "+e._s(e.data.title||"")+" ")]),t("div",{staticClass:"sfcNormalNodeData"},[t("div",{staticClass:"sfcNormalNodeDataText"},[e._v(e._s(e.data.content||""))]),t("img",{staticClass:"sfcNormalNodeDataIcon",attrs:{src:n("ee92"),alt:""}})])])},je=[],$e={name:"SFCNodeContent",props:{data:{type:Object,default:null}}},Ie=$e,He=(n("5405"),Object(b["a"])(Ie,Oe,je,!1,null,"645aa214",null)),ze=He.exports,Re=function(){var e=this,t=e._self._c;return t("div",{staticClass:"sfcNodeTypeContent"},e._l(e.nodeTypeList,(function(n,o){return t("div",{key:o,staticClass:"sfcNodeTypeGroup"},[t("div",{staticClass:"sfcNodeTypeGroupName"},[e._v(e._s(n.name))]),t("div",{staticClass:"sfcNodeTypeList"},e._l(n.list,(function(o,i){return t("div",{key:i,staticClass:"sfcNodeTypeItem",on:{click:function(t){return e.onNodeTypeClick(o,n)}}},[e._v(" "+e._s(o.name)+" ")])})),0)])})),0)},Ve=[],We={name:"SFCNodeTypeContent",data(){return{nodeTypeList:F.nodeTypeList||O}},methods:{onNodeTypeClick(...e){this.$emit("click",...e)}}},Ge=We,Je=(n("c110"),Object(b["a"])(Ge,Re,Ve,!1,null,"1c26e8bd",null)),Xe=Je.exports,Ye=function(){var e=this,t=e._self._c;return t("div",{staticClass:"sfcDeleteNode",on:{click:function(t){return t.stopPropagation(),e.$emit("click")}}},[t("svg",{attrs:{viewBox:"0 0 1024 1024",version:"1.1",xmlns:"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink"}},[t("path",{attrs:{d:"M106.666667 213.333333h810.666666v42.666667H106.666667z"}}),t("path",{attrs:{d:"M640 128v42.666667h42.666667V128c0-23.573333-19.093333-42.666667-42.538667-42.666667H383.872A42.496 42.496 0 0 0 341.333333 128v42.666667h42.666667V128h256z"}}),t("path",{attrs:{d:"M213.333333 896V256H170.666667v639.957333C170.666667 919.552 189.653333 938.666667 213.376 938.666667h597.248C834.218667 938.666667 853.333333 919.68 853.333333 895.957333V256h-42.666666v640H213.333333z"}}),t("path",{attrs:{d:"M320 341.333333h42.666667v384h-42.666667zM490.666667 341.333333h42.666666v384h-42.666666zM661.333333 341.333333h42.666667v384h-42.666667z"}})])])},Ze=[],qe={name:"SFCDeleteNode"},Ke=qe,Qe=(n("76ad"),Object(b["a"])(Ke,Ye,Ze,!1,null,"0246b6f9",null)),Ue=Qe.exports;const et=function(e,{notRegisterNodeContent:t,notRegisterNodeTypeContent:n}={}){e.component(ue.name,ue),e.component(me.name,me),e.component(Le.name,Le),e.component(_e.name,_e),e.component(Pe.name,Pe),e.component(Ue.name,Ue),e.component(X.name,X),t||e.component(ze.name,ze),n||e.component(Xe.name,Xe)};var tt={install:et};o["default"].config.productionTip=!1,o["default"].use(tt,{notRegisterNodeContent:!1,notRegisterNodeTypeContent:!1}),new o["default"]({render:e=>e(D)}).$mount("#app")},"5ab0":function(e,t,n){"use strict";n("d44e")},6620:function(e,t,n){},"6c50":function(e,t,n){},"76ad":function(e,t,n){"use strict";n("5023")},"7b7f":function(e,t,n){},"80d3":function(e,t,n){},"99e8":function(e,t,n){},"9ab1":function(e,t,n){},a00c:function(e,t,n){"use strict";n("2d0f")},a933:function(e,t,n){"use strict";n("46b3")},c110:function(e,t,n){"use strict";n("4328")},c64e:function(e,t,n){"use strict";n("80d3")},d44e:function(e,t,n){},ee92:function(e,t,n){e.exports=n.p+"img/arrow.0390e83b.svg"},efc4:function(e,t,n){"use strict";n("9ab1")},f132:function(e,t,n){}});
2 | //# sourceMappingURL=app.189fc154.js.map


--------------------------------------------------------------------------------
/simple-flow-chart/.prettierignore:
--------------------------------------------------------------------------------
 1 | src/assets
 2 | */.DS_Store
 3 | node_modules
 4 | public
 5 | *.json
 6 | *.md
 7 | .eslintrc.js
 8 | .prettierignore
 9 | .prettierrc
10 | package-lock.json
11 | package.json


--------------------------------------------------------------------------------
/simple-flow-chart/.prettierrc:
--------------------------------------------------------------------------------
1 | semi: false
2 | singleQuote: true
3 | printWidth: 80
4 | trailingComma: 'none'
5 | arrowParens: 'avoid'


--------------------------------------------------------------------------------
/simple-flow-chart/dist/demo.html:
--------------------------------------------------------------------------------
 1 | <meta charset="utf-8">
 2 | <title>simpleFlowChart demo</title>
 3 | <script src="./simpleFlowChart.umd.js"></script>
 4 | 
 5 | <link rel="stylesheet" href="./simpleFlowChart.css">
 6 | 
 7 | 
 8 | <script>
 9 | console.log(simpleFlowChart)
10 | </script>
11 | 


--------------------------------------------------------------------------------
/simple-flow-chart/dist/img/arrow.0390e83b.svg:
--------------------------------------------------------------------------------
1 | <?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1671180017363" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1156" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M312.888889 995.555556c-17.066667 0-28.444444-5.688889-39.822222-17.066667-22.755556-22.755556-17.066667-56.888889 5.688889-79.644445l364.088888-329.955555c11.377778-11.377778 17.066667-22.755556 17.066667-34.133333 0-11.377778-5.688889-22.755556-17.066667-34.133334L273.066667 187.733333c-22.755556-22.755556-28.444444-56.888889-5.688889-79.644444 22.755556-22.755556 56.888889-28.444444 79.644444-5.688889l364.088889 312.888889c34.133333 28.444444 56.888889 73.955556 56.888889 119.466667s-17.066667 85.333333-51.2 119.466666l-364.088889 329.955556c-11.377778 5.688889-28.444444 11.377778-39.822222 11.377778z" fill="#999999" p-id="1157"></path></svg>


--------------------------------------------------------------------------------
/simple-flow-chart/dist/simpleFlowChart.css:
--------------------------------------------------------------------------------
1 | .sfcActionBar[data-v-6aca6e5e]{position:absolute;right:30px;top:12px;z-index:3;-webkit-user-select:none;-moz-user-select:none;user-select:none}.sfcActionBar .sfcActionScale[data-v-6aca6e5e]{display:flex;align-items:center}.sfcActionBar .sfcActionScale .sfcActionScaleBtn[data-v-6aca6e5e]{width:30px;height:30px;background-color:#fff;box-shadow:0 1px 5px 0 rgba(10,30,65,.08);border-radius:6px;display:flex;justify-content:center;align-items:center;cursor:pointer}.sfcActionBar .sfcActionScale .sfcActionScaleBtn svg[data-v-6aca6e5e]{width:20px;height:20px;fill:rgba(0,0,0,.85)}.sfcActionBar .sfcActionScale .sfcActionScaleNum[data-v-6aca6e5e]{width:50px;color:rgba(0,0,0,.85);font-size:14px;text-align:center}.sfcContainer[data-v-aa5500c6]{width:100%;height:100%;overflow:auto;box-sizing:border-box}.sfcContainer[data-v-aa5500c6] *{box-sizing:border-box;margin:0;padding:0}.sfcContainer .sfcContent[data-v-aa5500c6]{display:flex;align-items:center;padding:20px;min-width:100%;min-height:100%;width:-moz-max-content;width:max-content;height:-moz-max-content;height:max-content;transform-origin:left top}.sfcContainer .sfcContent.transformOriginCenter[data-v-aa5500c6]{transform-origin:center center}.sfcContainer .sfcContent.vertical[data-v-aa5500c6]{flex-direction:column;justify-content:center}.sfcArrowLine[data-v-3f68034b]{position:relative;width:65px;-webkit-user-select:none;-moz-user-select:none;user-select:none}.sfcArrowLine.vertical[data-v-3f68034b]{width:auto;height:65px}.sfcArrowLine.vertical[data-v-3f68034b]:before{width:2px;height:100%;transform:translateX(-50%)}.sfcArrowLine.vertical.showArrow[data-v-3f68034b]:after{right:auto;bottom:0;top:auto;border-top:10px solid #dedede;border-left:6px solid transparent;border-right:6px solid transparent;border-bottom:none;transform:translateX(-50%)}.sfcArrowLine[data-v-3f68034b]:before{position:absolute;z-index:0;top:0;left:0;transform:translateY(-50%);height:2px;width:100%;background-color:#dedede;content:""}.sfcArrowLine.showArrow[data-v-3f68034b]:after{position:absolute;width:0;height:0;border-left:10px solid #dedede;border-top:6px solid transparent;border-bottom:6px solid transparent;content:"";right:0;top:0;transform:translateY(-50%)}.sfcAddNode[data-v-5cefb234]{position:absolute;right:0;top:0;width:65px;height:100%;display:flex;justify-content:center;align-items:center}.sfcAddNode.vertical[data-v-5cefb234]{right:auto;top:auto;left:0;bottom:0;width:100%;height:65px}.sfcAddNode .sfcAddNodeBtn[data-v-5cefb234]{position:relative;background:#0089ff;width:30px;height:30px;border-radius:50%;box-shadow:0 2px 4px 0 rgba(0,0,0,.1);display:flex;justify-content:center;align-items:center;cursor:pointer;transform:scale(0);transition:all .3s;z-index:2}.sfcAddNode .sfcAddNodeBtn[data-v-5cefb234]:hover{z-index:3}.sfcAddNode .sfcAddNodeBtn.dot[data-v-5cefb234]{transform:scale(.3)}.sfcAddNode .sfcAddNodeBtn.dot svg[data-v-5cefb234]{transform:scale(0)}.sfcAddNode .sfcAddNodeBtn.normal[data-v-5cefb234],.sfcAddNode .sfcAddNodeBtn.normal svg[data-v-5cefb234]{transform:scale(1)}.sfcAddNode .sfcAddNodeBtn svg[data-v-5cefb234]{fill:#fff;width:24px;height:24px;transform:scale(0)}.sfcAddNode .sfcNodeTypePopover[data-v-5cefb234]{position:absolute;visibility:hidden;transform:scale(0);transition:all .3s}.sfcAddNode .sfcNodeTypePopover[data-v-5cefb234]:after,.sfcAddNode .sfcNodeTypePopover[data-v-5cefb234]:before{content:"";position:absolute;top:0;width:20px;height:100%}.sfcAddNode .sfcNodeTypePopover[data-v-5cefb234]:before{left:-20px}.sfcAddNode .sfcNodeTypePopover[data-v-5cefb234]:after{right:-20px}.sfcAddNode .sfcNodeTypePopover.show[data-v-5cefb234]{visibility:visible;transform:scale(1)}.sfcConditionNodeContainer[data-v-7ca3100a]{position:relative;display:flex;align-items:center}.sfcConditionNodeContainer.vertical[data-v-7ca3100a]{flex-direction:column}.sfcConditionNodeContainer.vertical .sfcConditionAddBtn[data-v-7ca3100a]{left:50%;top:-18px;transform:translateX(-50%);width:auto;height:36px;padding-top:0;padding-bottom:0;line-height:32px}.sfcConditionNodeContainer.vertical .sfcConditionNodeItemList[data-v-7ca3100a]{display:flex}.sfcConditionNodeContainer.vertical .sfcConditionNodeItemList .sfcConditionNodeItem[data-v-7ca3100a]{padding-right:30px;padding-bottom:0}.sfcConditionNodeContainer.vertical .sfcConditionNodeItemList .sfcConditionNodeItem .sfcConditionNodeItemLine[data-v-7ca3100a]{height:2px;width:100%;top:0;left:0}.sfcConditionNodeContainer.vertical .sfcConditionNodeItemList .sfcConditionNodeItem .sfcConditionNodeItemLine.sfcConditionNodeItemLastLine[data-v-7ca3100a]{left:0;top:100%}.sfcConditionNodeContainer.vertical .sfcConditionNodeItemList .sfcConditionNodeItem:first-of-type>.sfcConditionNodeItemLine[data-v-7ca3100a]{left:50%;width:50%;height:2px;top:0}.sfcConditionNodeContainer.vertical .sfcConditionNodeItemList .sfcConditionNodeItem:first-of-type>.sfcConditionNodeItemLine.sfcConditionNodeItemLastLine[data-v-7ca3100a]{top:100%}.sfcConditionNodeContainer.vertical .sfcConditionNodeItemList .sfcConditionNodeItem:last-of-type>.sfcConditionNodeItemLine[data-v-7ca3100a]{left:0;width:50%;height:2px;top:0}.sfcConditionNodeContainer.vertical .sfcConditionNodeItemList .sfcConditionNodeItem:last-of-type>.sfcConditionNodeItemLine.sfcConditionNodeItemLastLine[data-v-7ca3100a]{top:100%}.sfcConditionNodeContainer.vertical .sfcConditionNodeItemList .sfcConditionNodeItem .sfcConditionNodeItemLinkLine[data-v-7ca3100a]{height:30px;width:2px;top:0;left:50%;transform:translateX(-50%)}.sfcConditionNodeContainer.vertical .sfcConditionNodeItemList .sfcConditionNodeItem .sfcConditionNodeItemNodeWrap[data-v-7ca3100a]{flex-direction:column;height:100%}.sfcConditionNodeContainer.vertical .sfcConditionNodeItemList .sfcConditionNodeItem .sfcConditionNodeItemNodeWrap .sfcConditionNodeItemLinkCrossLine[data-v-7ca3100a]{width:2px}.sfcConditionNodeContainer .sfcConditionAddBtn[data-v-7ca3100a]{position:absolute;left:-18px;top:50%;transform:translateY(-50%);z-index:2;width:36px;display:flex;flex-wrap:wrap;border:2px solid #dedede;background:#fff;border-radius:18px;color:#222;cursor:pointer;font-size:12px;padding:10px;text-align:center}.sfcConditionNodeContainer .sfcConditionNodeItemList .sfcConditionNodeItem[data-v-7ca3100a]{padding:30px;padding-right:0;position:relative}.sfcConditionNodeContainer .sfcConditionNodeItemList .sfcConditionNodeItem .sfcConditionNodeItemLine[data-v-7ca3100a]{position:absolute;height:100%;width:2px;left:0;top:0;background-color:#dedede}.sfcConditionNodeContainer .sfcConditionNodeItemList .sfcConditionNodeItem .sfcConditionNodeItemLine.sfcConditionNodeItemLastLine[data-v-7ca3100a]{left:100%}.sfcConditionNodeContainer .sfcConditionNodeItemList .sfcConditionNodeItem:first-of-type>.sfcConditionNodeItemLine[data-v-7ca3100a]{top:50%;height:50%}.sfcConditionNodeContainer .sfcConditionNodeItemList .sfcConditionNodeItem:last-of-type>.sfcConditionNodeItemLine[data-v-7ca3100a]{top:0;height:50%}.sfcConditionNodeContainer .sfcConditionNodeItemList .sfcConditionNodeItem .sfcConditionNodeItemLinkLine[data-v-7ca3100a]{position:absolute;width:30px;height:2px;left:0;top:50%;transform:translateY(-50%);background-color:#dedede}.sfcConditionNodeContainer .sfcConditionNodeItemList .sfcConditionNodeItem .sfcConditionNodeItemNodeWrap[data-v-7ca3100a]{display:flex;align-items:center}.sfcConditionNodeContainer .sfcConditionNodeItemList .sfcConditionNodeItem .sfcConditionNodeItemNodeWrap .sfcConditionNodeItemLinkCrossLine[data-v-7ca3100a]{height:2px;flex-grow:1;background-color:#dedede}.sfcEndNodeContainer[data-v-f1309ae2]{width:90px;height:40px;border-radius:30px;box-shadow:0 1px 5px 0 rgba(10,30,65,.08);color:#fff;line-height:40px;text-align:center;background:#6e6e6e}.sfcNodeContainer[data-v-2ae6cee8]{position:relative}.sfcNormalNodeContainer[data-v-f3fe072c]{position:relative;display:flex;flex-shrink:0;align-items:center}.sfcNormalNodeContainer.vertical .sfcNormalNodeWrap[data-v-f3fe072c],.sfcNormalNodeContainer.vertical[data-v-f3fe072c]{flex-direction:column}.sfcNormalNodeContainer .sfcNormalNodeWrap[data-v-f3fe072c]{position:relative;display:flex;align-items:center}.sfcNormalNodeContainer .sfcNormalNodeWrap .sfcNormalNodeContentWrap[data-v-f3fe072c]{position:relative}.sfcStartNodeContainer[data-v-aee8cabe]{display:flex;align-items:center}.sfcStartNodeContainer.vertical[data-v-aee8cabe]{flex-direction:column}.sfcStartNodeContainer .sfcStartNodeContent[data-v-aee8cabe]{width:90px;height:40px;border-radius:30px;box-shadow:0 1px 5px 0 rgba(10,30,65,.08);color:#fff;line-height:40px;text-align:center;background:#2c2c2c}.sfcNormalNodeContent[data-v-645aa214]{width:200px;min-height:70px;padding:5px 10px 8px;border:2px solid transparent;box-shadow:0 1px 4px 0 rgba(10,30,65,.16);transition:all .1s cubic-bezier(.645,.045,.355,1);background-color:#fff;border-radius:8px;cursor:pointer}.sfcNormalNodeContent .sfcNormalNodeTitle[data-v-645aa214]{position:relative;display:flex;align-items:center;border-radius:4px 4px 0 0;cursor:pointer;font-size:14px;text-align:left;color:#1f1f1f;font-weight:600;word-break:break-all;min-height:20px}.sfcNormalNodeContent .sfcNormalNodeData[data-v-645aa214]{display:flex;min-height:32px;align-items:center;justify-content:space-between;padding:4px 8px;margin-top:10px;background:rgba(0,0,0,.03);border-radius:4px}.sfcNormalNodeContent .sfcNormalNodeData .sfcNormalNodeDataText[data-v-645aa214]{color:#111f2c;font-size:14px;line-height:32px;word-break:break-all}.sfcNormalNodeContent .sfcNormalNodeData .sfcNormalNodeDataIcon[data-v-645aa214]{width:20px}.sfcNodeTypeContent[data-v-1c26e8bd]{padding:12px 8px;width:300px;background-color:#000;border-radius:4px}.sfcNodeTypeContent .sfcNodeTypeGroup[data-v-1c26e8bd]{width:100%;margin-bottom:12px}.sfcNodeTypeContent .sfcNodeTypeGroup[data-v-1c26e8bd]:last-of-type{margin-bottom:0}.sfcNodeTypeContent .sfcNodeTypeGroup .sfcNodeTypeGroupName[data-v-1c26e8bd]{color:#888;margin-bottom:12px}.sfcNodeTypeContent .sfcNodeTypeGroup .sfcNodeTypeList[data-v-1c26e8bd]{width:100%;display:flex;flex-wrap:wrap;justify-content:space-between;margin-bottom:-12px}.sfcNodeTypeContent .sfcNodeTypeGroup .sfcNodeTypeList .sfcNodeTypeItem[data-v-1c26e8bd]{display:flex;width:136px;padding:4px 8px;border:1px solid #2e2e2e;background:#000;color:#fff;font-size:14px;cursor:pointer;margin-bottom:12px}.sfcNodeTypeContent .sfcNodeTypeGroup .sfcNodeTypeList .sfcNodeTypeItem[data-v-1c26e8bd]:hover{border-color:#595959;background:#3b3b3b}.sfcDeleteNode[data-v-0246b6f9]{position:absolute;top:-28px;right:0;background:#0089ff;width:24px;height:24px;border-radius:2px;display:flex;justify-content:center;align-items:center;cursor:pointer;animation:show-0246b6f9 1s}.sfcDeleteNode[data-v-0246b6f9]:after{content:"";position:absolute;width:100%;height:4px;left:0;bottom:-4px}.sfcDeleteNode svg[data-v-0246b6f9]{fill:#fff;width:16px;height:16px}@keyframes show-0246b6f9{0%{opacity:0}to{opacity:1}}


--------------------------------------------------------------------------------
/simple-flow-chart/dist/simpleFlowChart.umd.min.js:
--------------------------------------------------------------------------------
1 | (function(t,e){"object"===typeof exports&&"object"===typeof module?module.exports=e():"function"===typeof define&&define.amd?define([],e):"object"===typeof exports?exports["simpleFlowChart"]=e():t["simpleFlowChart"]=e()})("undefined"!==typeof self?self:this,(function(){return function(t){var e={};function n(o){if(e[o])return e[o].exports;var r=e[o]={i:o,l:!1,exports:{}};return t[o].call(r.exports,r,r.exports,n),r.l=!0,r.exports}return n.m=t,n.c=e,n.d=function(t,e,o){n.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:o})},n.r=function(t){"undefined"!==typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},n.t=function(t,e){if(1&e&&(t=n(t)),8&e)return t;if(4&e&&"object"===typeof t&&t&&t.__esModule)return t;var o=Object.create(null);if(n.r(o),Object.defineProperty(o,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var r in t)n.d(o,r,function(e){return t[e]}.bind(null,r));return o},n.n=function(t){var e=t&&t.__esModule?function(){return t["default"]}:function(){return t};return n.d(e,"a",e),e},n.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},n.p="",n(n.s="fb15")}({"04f8":function(t,e,n){var o=n("2d00"),r=n("d039");t.exports=!!Object.getOwnPropertySymbols&&!r((function(){var t=Symbol();return!String(t)||!(Object(t)instanceof Symbol)||!Symbol.sham&&o&&o<41}))},"06cf":function(t,e,n){var o=n("83ab"),r=n("c65b"),i=n("d1e7"),a=n("5c6c"),c=n("fc6a"),s=n("a04b"),u=n("1a2d"),d=n("0cfb"),l=Object.getOwnPropertyDescriptor;e.f=o?l:function(t,e){if(t=c(t),e=s(e),d)try{return l(t,e)}catch(n){}if(u(t,e))return a(!r(i.f,t,e),t[e])}},"07fa":function(t,e,n){var o=n("50c4");t.exports=function(t){return o(t.length)}},"083a":function(t,e,n){"use strict";var o=n("0d51"),r=TypeError;t.exports=function(t,e){if(!delete t[e])throw r("Cannot delete property "+o(e)+" of "+o(t))}},"0a68":function(t,e,n){"use strict";n("1acc")},"0cfb":function(t,e,n){var o=n("83ab"),r=n("d039"),i=n("cc12");t.exports=!o&&!r((function(){return 7!=Object.defineProperty(i("div"),"a",{get:function(){return 7}}).a}))},"0d51":function(t,e){var n=String;t.exports=function(t){try{return n(t)}catch(e){return"Object"}}},1159:function(t,e){function n(){}n.prototype={on:function(t,e,n){var o=this.e||(this.e={});return(o[t]||(o[t]=[])).push({fn:e,ctx:n}),this},once:function(t,e,n){var o=this;function r(){o.off(t,r),e.apply(n,arguments)}return r._=e,this.on(t,r,n)},emit:function(t){var e=[].slice.call(arguments,1),n=((this.e||(this.e={}))[t]||[]).slice(),o=0,r=n.length;for(o;o<r;o++)n[o].fn.apply(n[o].ctx,e);return this},off:function(t,e){var n=this.e||(this.e={}),o=n[t],r=[];if(o&&e)for(var i=0,a=o.length;i<a;i++)o[i].fn!==e&&o[i].fn._!==e&&r.push(o[i]);return r.length?n[t]=r:delete n[t],this}},t.exports=n,t.exports.TinyEmitter=n},"11c5":function(t,e,n){"use strict";n("22da")},"13d2":function(t,e,n){var o=n("d039"),r=n("1626"),i=n("1a2d"),a=n("83ab"),c=n("5e77").CONFIGURABLE,s=n("8925"),u=n("69f3"),d=u.enforce,l=u.get,f=Object.defineProperty,p=a&&!o((function(){return 8!==f((function(){}),"length",{value:8}).length})),v=String(String).split("String"),h=t.exports=function(t,e,n){"Symbol("===String(e).slice(0,7)&&(e="["+String(e).replace(/^Symbol\(([^)]*)\)/,"$1")+"]"),n&&n.getter&&(e="get "+e),n&&n.setter&&(e="set "+e),(!i(t,"name")||c&&t.name!==e)&&(a?f(t,"name",{value:e,configurable:!0}):t.name=e),p&&n&&i(n,"arity")&&t.length!==n.arity&&f(t,"length",{value:n.arity});try{n&&i(n,"constructor")&&n.constructor?a&&f(t,"prototype",{writable:!1}):t.prototype&&(t.prototype=void 0)}catch(r){}var o=d(t);return i(o,"source")||(o.source=v.join("string"==typeof e?e:"")),t};Function.prototype.toString=h((function(){return r(this)&&l(this).source||s(this)}),"toString")},"14d9":function(t,e,n){"use strict";var o=n("23e7"),r=n("7b0b"),i=n("07fa"),a=n("3a34"),c=n("3511"),s=n("d039"),u=s((function(){return 4294967297!==[].push.call({length:4294967296},1)})),d=!function(){try{Object.defineProperty([],"length",{writable:!1}).push()}catch(t){return t instanceof TypeError}}();o({target:"Array",proto:!0,arity:1,forced:u||d},{push:function(t){var e=r(this),n=i(e),o=arguments.length;c(n+o);for(var s=0;s<o;s++)e[n]=arguments[s],n++;return a(e,n),n}})},1626:function(t,e,n){var o=n("8ea1"),r=o.all;t.exports=o.IS_HTMLDDA?function(t){return"function"==typeof t||t===r}:function(t){return"function"==typeof t}},"1a2d":function(t,e,n){var o=n("e330"),r=n("7b0b"),i=o({}.hasOwnProperty);t.exports=Object.hasOwn||function(t,e){return i(r(t),e)}},"1acc":function(t,e,n){},"1d80":function(t,e,n){var o=n("7234"),r=TypeError;t.exports=function(t){if(o(t))throw r("Can't call method on "+t);return t}},"1e6b":function(t,e,n){"use strict";n("6d5d")},"22da":function(t,e,n){},"23cb":function(t,e,n){var o=n("5926"),r=Math.max,i=Math.min;t.exports=function(t,e){var n=o(t);return n<0?r(n+e,0):i(n,e)}},"23e7":function(t,e,n){var o=n("da84"),r=n("06cf").f,i=n("9112"),a=n("cb2d"),c=n("6374"),s=n("e893"),u=n("94ca");t.exports=function(t,e){var n,d,l,f,p,v,h=t.target,y=t.global,m=t.stat;if(d=y?o:m?o[h]||c(h,{}):(o[h]||{}).prototype,d)for(l in e){if(p=e[l],t.dontCallGetSet?(v=r(d,l),f=v&&v.value):f=d[l],n=u(y?l:h+(m?".":"#")+l,t.forced),!n&&void 0!==f){if(typeof p==typeof f)continue;s(p,f)}(t.sham||f&&f.sham)&&i(p,"sham",!0),a(d,l,p,t)}}},"241c":function(t,e,n){var o=n("ca84"),r=n("7839"),i=r.concat("length","prototype");e.f=Object.getOwnPropertyNames||function(t){return o(t,i)}},"2c8f":function(t,e,n){},"2d00":function(t,e,n){var o,r,i=n("da84"),a=n("342f"),c=i.process,s=i.Deno,u=c&&c.versions||s&&s.version,d=u&&u.v8;d&&(o=d.split("."),r=o[0]>0&&o[0]<4?1:+(o[0]+o[1])),!r&&a&&(o=a.match(/Edge\/(\d+)/),(!o||o[1]>=74)&&(o=a.match(/Chrome\/(\d+)/),o&&(r=+o[1]))),t.exports=r},"2d0f":function(t,e,n){},"342f":function(t,e,n){var o=n("d066");t.exports=o("navigator","userAgent")||""},3511:function(t,e){var n=TypeError,o=9007199254740991;t.exports=function(t){if(t>o)throw n("Maximum allowed index exceeded");return t}},"397b":function(t,e,n){"use strict";n("2c8f")},"3a34":function(t,e,n){"use strict";var o=n("83ab"),r=n("e8b5"),i=TypeError,a=Object.getOwnPropertyDescriptor,c=o&&!function(){if(void 0!==this)return!0;try{Object.defineProperty([],"length",{writable:!1}).length=1}catch(t){return t instanceof TypeError}}();t.exports=c?function(t,e){if(r(t)&&!a(t,"length").writable)throw i("Cannot set read only .length");return t.length=e}:function(t,e){return t.length=e}},"3a9b":function(t,e,n){var o=n("e330");t.exports=o({}.isPrototypeOf)},"3c65":function(t,e,n){"use strict";var o=n("23e7"),r=n("7b0b"),i=n("07fa"),a=n("3a34"),c=n("083a"),s=n("3511"),u=1!==[].unshift(0),d=!function(){try{Object.defineProperty([],"length",{writable:!1}).unshift()}catch(t){return t instanceof TypeError}}();o({target:"Array",proto:!0,arity:1,forced:u||d},{unshift:function(t){var e=r(this),n=i(e),o=arguments.length;if(o){s(n+o);var u=n;while(u--){var d=u+o;u in e?e[d]=e[u]:c(e,d)}for(var l=0;l<o;l++)e[l]=arguments[l]}return a(e,n+o)}})},"40d5":function(t,e,n){var o=n("d039");t.exports=!o((function(){var t=function(){}.bind();return"function"!=typeof t||t.hasOwnProperty("prototype")}))},4328:function(t,e,n){},"44ad":function(t,e,n){var o=n("e330"),r=n("d039"),i=n("c6b6"),a=Object,c=o("".split);t.exports=r((function(){return!a("z").propertyIsEnumerable(0)}))?function(t){return"String"==i(t)?c(t,""):a(t)}:a},"46b3":function(t,e,n){},"485a":function(t,e,n){var o=n("c65b"),r=n("1626"),i=n("861d"),a=TypeError;t.exports=function(t,e){var n,c;if("string"===e&&r(n=t.toString)&&!i(c=o(n,t)))return c;if(r(n=t.valueOf)&&!i(c=o(n,t)))return c;if("string"!==e&&r(n=t.toString)&&!i(c=o(n,t)))return c;throw a("Can't convert object to primitive value")}},"48ee":function(t,e,n){"use strict";n("7b7f")},"4d64":function(t,e,n){var o=n("fc6a"),r=n("23cb"),i=n("07fa"),a=function(t){return function(e,n,a){var c,s=o(e),u=i(s),d=r(a,u);if(t&&n!=n){while(u>d)if(c=s[d++],c!=c)return!0}else for(;u>d;d++)if((t||d in s)&&s[d]===n)return t||d||0;return!t&&-1}};t.exports={includes:a(!0),indexOf:a(!1)}},5023:function(t,e,n){},"50c4":function(t,e,n){var o=n("5926"),r=Math.min;t.exports=function(t){return t>0?r(o(t),9007199254740991):0}},5405:function(t,e,n){"use strict";n("6c50")},5692:function(t,e,n){var o=n("c430"),r=n("c6cd");(t.exports=function(t,e){return r[t]||(r[t]=void 0!==e?e:{})})("versions",[]).push({version:"3.27.0",mode:o?"pure":"global",copyright:"© 2014-2022 Denis Pushkarev (zloirock.ru)",license:"https://github.com/zloirock/core-js/blob/v3.27.0/LICENSE",source:"https://github.com/zloirock/core-js"})},"56ef":function(t,e,n){var o=n("d066"),r=n("e330"),i=n("241c"),a=n("7418"),c=n("825a"),s=r([].concat);t.exports=o("Reflect","ownKeys")||function(t){var e=i.f(c(t)),n=a.f;return n?s(e,n(t)):e}},5926:function(t,e,n){var o=n("b42e");t.exports=function(t){var e=+t;return e!==e||0===e?0:o(e)}},"59ed":function(t,e,n){var o=n("1626"),r=n("0d51"),i=TypeError;t.exports=function(t){if(o(t))return t;throw i(r(t)+" is not a function")}},"5ab0":function(t,e,n){"use strict";n("d44e")},"5c6c":function(t,e){t.exports=function(t,e){return{enumerable:!(1&t),configurable:!(2&t),writable:!(4&t),value:e}}},"5e77":function(t,e,n){var o=n("83ab"),r=n("1a2d"),i=Function.prototype,a=o&&Object.getOwnPropertyDescriptor,c=r(i,"name"),s=c&&"something"===function(){}.name,u=c&&(!o||o&&a(i,"name").configurable);t.exports={EXISTS:c,PROPER:s,CONFIGURABLE:u}},6374:function(t,e,n){var o=n("da84"),r=Object.defineProperty;t.exports=function(t,e){try{r(o,t,{value:e,configurable:!0,writable:!0})}catch(n){o[t]=e}return e}},"69f3":function(t,e,n){var o,r,i,a=n("cdce"),c=n("da84"),s=n("861d"),u=n("9112"),d=n("1a2d"),l=n("c6cd"),f=n("f772"),p=n("d012"),v="Object already initialized",h=c.TypeError,y=c.WeakMap,m=function(t){return i(t)?r(t):o(t,{})},b=function(t){return function(e){var n;if(!s(e)||(n=r(e)).type!==t)throw h("Incompatible receiver, "+t+" required");return n}};if(a||l.state){var C=l.state||(l.state=new y);C.get=C.get,C.has=C.has,C.set=C.set,o=function(t,e){if(C.has(t))throw h(v);return e.facade=t,C.set(t,e),e},r=function(t){return C.get(t)||{}},i=function(t){return C.has(t)}}else{var g=f("state");p[g]=!0,o=function(t,e){if(d(t,g))throw h(v);return e.facade=t,u(t,g,e),e},r=function(t){return d(t,g)?t[g]:{}},i=function(t){return d(t,g)}}t.exports={set:o,get:r,has:i,enforce:m,getterFor:b}},"6c50":function(t,e,n){},"6d5d":function(t,e,n){},7234:function(t,e){t.exports=function(t){return null===t||void 0===t}},7418:function(t,e){e.f=Object.getOwnPropertySymbols},"76ad":function(t,e,n){"use strict";n("5023")},7839:function(t,e){t.exports=["constructor","hasOwnProperty","isPrototypeOf","propertyIsEnumerable","toLocaleString","toString","valueOf"]},"7b0b":function(t,e,n){var o=n("1d80"),r=Object;t.exports=function(t){return r(o(t))}},"7b7f":function(t,e,n){},"80d3":function(t,e,n){},"825a":function(t,e,n){var o=n("861d"),r=String,i=TypeError;t.exports=function(t){if(o(t))return t;throw i(r(t)+" is not an object")}},"83ab":function(t,e,n){var o=n("d039");t.exports=!o((function(){return 7!=Object.defineProperty({},1,{get:function(){return 7}})[1]}))},"861d":function(t,e,n){var o=n("1626"),r=n("8ea1"),i=r.all;t.exports=r.IS_HTMLDDA?function(t){return"object"==typeof t?null!==t:o(t)||t===i}:function(t){return"object"==typeof t?null!==t:o(t)}},8925:function(t,e,n){var o=n("e330"),r=n("1626"),i=n("c6cd"),a=o(Function.toString);r(i.inspectSource)||(i.inspectSource=function(t){return a(t)}),t.exports=i.inspectSource},"8ea1":function(t,e){var n="object"==typeof document&&document.all,o="undefined"==typeof n&&void 0!==n;t.exports={all:n,IS_HTMLDDA:o}},"90e3":function(t,e,n){var o=n("e330"),r=0,i=Math.random(),a=o(1..toString);t.exports=function(t){return"Symbol("+(void 0===t?"":t)+")_"+a(++r+i,36)}},9112:function(t,e,n){var o=n("83ab"),r=n("9bf2"),i=n("5c6c");t.exports=o?function(t,e,n){return r.f(t,e,i(1,n))}:function(t,e,n){return t[e]=n,t}},"94ca":function(t,e,n){var o=n("d039"),r=n("1626"),i=/#|\.prototype\./,a=function(t,e){var n=s[c(t)];return n==d||n!=u&&(r(e)?o(e):!!e)},c=a.normalize=function(t){return String(t).replace(i,".").toLowerCase()},s=a.data={},u=a.NATIVE="N",d=a.POLYFILL="P";t.exports=a},"9bf2":function(t,e,n){var o=n("83ab"),r=n("0cfb"),i=n("aed9"),a=n("825a"),c=n("a04b"),s=TypeError,u=Object.defineProperty,d=Object.getOwnPropertyDescriptor,l="enumerable",f="configurable",p="writable";e.f=o?i?function(t,e,n){if(a(t),e=c(e),a(n),"function"===typeof t&&"prototype"===e&&"value"in n&&p in n&&!n[p]){var o=d(t,e);o&&o[p]&&(t[e]=n.value,n={configurable:f in n?n[f]:o[f],enumerable:l in n?n[l]:o[l],writable:!1})}return u(t,e,n)}:u:function(t,e,n){if(a(t),e=c(e),a(n),r)try{return u(t,e,n)}catch(o){}if("get"in n||"set"in n)throw s("Accessors not supported");return"value"in n&&(t[e]=n.value),t}},a00c:function(t,e,n){"use strict";n("2d0f")},a04b:function(t,e,n){var o=n("c04e"),r=n("d9b5");t.exports=function(t){var e=o(t,"string");return r(e)?e:e+""}},a933:function(t,e,n){"use strict";n("46b3")},aed9:function(t,e,n){var o=n("83ab"),r=n("d039");t.exports=o&&r((function(){return 42!=Object.defineProperty((function(){}),"prototype",{value:42,writable:!1}).prototype}))},b42e:function(t,e){var n=Math.ceil,o=Math.floor;t.exports=Math.trunc||function(t){var e=+t;return(e>0?o:n)(e)}},b622:function(t,e,n){var o=n("da84"),r=n("5692"),i=n("1a2d"),a=n("90e3"),c=n("04f8"),s=n("fdbf"),u=r("wks"),d=o.Symbol,l=d&&d["for"],f=s?d:d&&d.withoutSetter||a;t.exports=function(t){if(!i(u,t)||!c&&"string"!=typeof u[t]){var e="Symbol."+t;c&&i(d,t)?u[t]=d[t]:u[t]=s&&l?l(e):f(e)}return u[t]}},c04e:function(t,e,n){var o=n("c65b"),r=n("861d"),i=n("d9b5"),a=n("dc4a"),c=n("485a"),s=n("b622"),u=TypeError,d=s("toPrimitive");t.exports=function(t,e){if(!r(t)||i(t))return t;var n,s=a(t,d);if(s){if(void 0===e&&(e="default"),n=o(s,t,e),!r(n)||i(n))return n;throw u("Can't convert object to primitive value")}return void 0===e&&(e="number"),c(t,e)}},c110:function(t,e,n){"use strict";n("4328")},c430:function(t,e){t.exports=!1},c64e:function(t,e,n){"use strict";n("80d3")},c65b:function(t,e,n){var o=n("40d5"),r=Function.prototype.call;t.exports=o?r.bind(r):function(){return r.apply(r,arguments)}},c6b6:function(t,e,n){var o=n("e330"),r=o({}.toString),i=o("".slice);t.exports=function(t){return i(r(t),8,-1)}},c6cd:function(t,e,n){var o=n("da84"),r=n("6374"),i="__core-js_shared__",a=o[i]||r(i,{});t.exports=a},c8ba:function(t,e){var n;n=function(){return this}();try{n=n||new Function("return this")()}catch(o){"object"===typeof window&&(n=window)}t.exports=n},ca84:function(t,e,n){var o=n("e330"),r=n("1a2d"),i=n("fc6a"),a=n("4d64").indexOf,c=n("d012"),s=o([].push);t.exports=function(t,e){var n,o=i(t),u=0,d=[];for(n in o)!r(c,n)&&r(o,n)&&s(d,n);while(e.length>u)r(o,n=e[u++])&&(~a(d,n)||s(d,n));return d}},cb2d:function(t,e,n){var o=n("1626"),r=n("9bf2"),i=n("13d2"),a=n("6374");t.exports=function(t,e,n,c){c||(c={});var s=c.enumerable,u=void 0!==c.name?c.name:e;if(o(n)&&i(n,u,c),c.global)s?t[e]=n:a(e,n);else{try{c.unsafe?t[e]&&(s=!0):delete t[e]}catch(d){}s?t[e]=n:r.f(t,e,{value:n,enumerable:!1,configurable:!c.nonConfigurable,writable:!c.nonWritable})}return t}},cc12:function(t,e,n){var o=n("da84"),r=n("861d"),i=o.document,a=r(i)&&r(i.createElement);t.exports=function(t){return a?i.createElement(t):{}}},cdce:function(t,e,n){var o=n("da84"),r=n("1626"),i=o.WeakMap;t.exports=r(i)&&/native code/.test(String(i))},d012:function(t,e){t.exports={}},d039:function(t,e){t.exports=function(t){try{return!!t()}catch(e){return!0}}},d066:function(t,e,n){var o=n("da84"),r=n("1626"),i=function(t){return r(t)?t:void 0};t.exports=function(t,e){return arguments.length<2?i(o[t]):o[t]&&o[t][e]}},d1e7:function(t,e,n){"use strict";var o={}.propertyIsEnumerable,r=Object.getOwnPropertyDescriptor,i=r&&!o.call({1:2},1);e.f=i?function(t){var e=r(this,t);return!!e&&e.enumerable}:o},d44e:function(t,e,n){},d9b5:function(t,e,n){var o=n("d066"),r=n("1626"),i=n("3a9b"),a=n("fdbf"),c=Object;t.exports=a?function(t){return"symbol"==typeof t}:function(t){var e=o("Symbol");return r(e)&&i(e.prototype,c(t))}},da84:function(t,e,n){(function(e){var n=function(t){return t&&t.Math==Math&&t};t.exports=n("object"==typeof globalThis&&globalThis)||n("object"==typeof window&&window)||n("object"==typeof self&&self)||n("object"==typeof e&&e)||function(){return this}()||Function("return this")()}).call(this,n("c8ba"))},dc4a:function(t,e,n){var o=n("59ed"),r=n("7234");t.exports=function(t,e){var n=t[e];return r(n)?void 0:o(n)}},e330:function(t,e,n){var o=n("40d5"),r=Function.prototype,i=r.call,a=o&&r.bind.bind(i,i);t.exports=o?a:function(t){return function(){return i.apply(t,arguments)}}},e893:function(t,e,n){var o=n("1a2d"),r=n("56ef"),i=n("06cf"),a=n("9bf2");t.exports=function(t,e,n){for(var c=r(e),s=a.f,u=i.f,d=0;d<c.length;d++){var l=c[d];o(t,l)||n&&o(n,l)||s(t,l,u(e,l))}}},e8b5:function(t,e,n){var o=n("c6b6");t.exports=Array.isArray||function(t){return"Array"==o(t)}},ee92:function(t,e,n){t.exports=n.p+"img/arrow.0390e83b.svg"},f772:function(t,e,n){var o=n("5692"),r=n("90e3"),i=o("keys");t.exports=function(t){return i[t]||(i[t]=r(t))}},fb15:function(t,e,n){"use strict";if(n.r(e),"undefined"!==typeof window){var o=window.document.currentScript,r=o&&o.src.match(/(.+\/)[^/]+\.js(\?.*)?$/);r&&(n.p=r[1])}var i=function(){var t=this,e=t._self._c;return e("div",{staticClass:"sfcContainer",style:{background:t.background}},[t.showScaleBar?e("SFCActionBar",{attrs:{scale:t.scale},on:{"update:scale":function(e){t.scale=e}}}):t._e(),e("div",{staticClass:"sfcContent",class:{vertical:t.vertical,transformOriginCenter:t.scale<=100},style:{transform:`scale(${t.scale/100})`}},t._l(t.data,(function(n){return e("SFCNode",{key:n.id,attrs:{nodeList:t.data,data:n}})})),1)],1)},a=[],c=(n("14d9"),n("3c65"),n("1159")),s=n.n(c),u=new s.a;const d="undefined"!==typeof crypto&&crypto.randomUUID&&crypto.randomUUID.bind(crypto);var l={randomUUID:d};let f;const p=new Uint8Array(16);function v(){if(!f&&(f="undefined"!==typeof crypto&&crypto.getRandomValues&&crypto.getRandomValues.bind(crypto),!f))throw new Error("crypto.getRandomValues() not supported. See https://github.com/uuidjs/uuid#getrandomvalues-not-supported");return f(p)}const h=[];for(let zt=0;zt<256;++zt)h.push((zt+256).toString(16).slice(1));function y(t,e=0){return(h[t[e+0]]+h[t[e+1]]+h[t[e+2]]+h[t[e+3]]+"-"+h[t[e+4]]+h[t[e+5]]+"-"+h[t[e+6]]+h[t[e+7]]+"-"+h[t[e+8]]+h[t[e+9]]+"-"+h[t[e+10]]+h[t[e+11]]+h[t[e+12]]+h[t[e+13]]+h[t[e+14]]+h[t[e+15]]).toLowerCase()}function m(t,e,n){if(l.randomUUID&&!e&&!t)return l.randomUUID();t=t||{};const o=t.random||(t.rng||v)();if(o[6]=15&o[6]|64,o[8]=63&o[8]|128,e){n=n||0;for(let t=0;t<16;++t)e[n+t]=o[t];return e}return y(o)}var b=m;const C={},g=[{id:"startEvent",type:"start",title:"开始"},{id:"endEvent",type:"end",title:"结束"}],N=[{name:"普通节点",list:[{type:"normal",name:"普通节点"}]},{name:"分支节点",list:[{type:"condition",name:"条件分支"}]}],w=(t,e="普通节点",n="节点内容")=>{const o=C.customCreateNodeId||b;switch(t){case"normal":return{id:o(),type:"normal",title:e,content:n,configData:{},nodeList:[]};case"condition":return{id:o(),type:"condition",title:"条件分支",children:[{id:o(),title:"条件1",content:"条件1的内容",type:"normal",configData:{},nodeList:[]},{id:o(),type:"normal",title:"条件2",content:"条件2的内容",configData:{},nodeList:[]}]};default:break}};var x=function(){var t=this,e=t._self._c;return e("div",{staticClass:"sfcActionBar"},[e("div",{staticClass:"sfcActionScale"},[e("div",{staticClass:"sfcActionScaleBtn",on:{click:t.scaleIn}},[e("svg",{attrs:{viewBox:"0 0 1024 1024",version:"1.1",xmlns:"http://www.w3.org/2000/svg"}},[e("path",{attrs:{d:"M580.722174 437.990403 580.722174 78.171384 436.794158 78.171384 436.794158 437.990403 76.975139 437.990403 76.975139 581.918419 436.794158 581.918419 436.794158 941.737438 580.722174 941.737438 580.722174 581.918419 940.542216 581.918419 940.542216 437.990403Z"}})])]),e("div",{staticClass:"sfcActionScaleNum"},[t._v(t._s(t.scale)+"%")]),e("div",{staticClass:"sfcActionScaleBtn",on:{click:t.scaleOut}},[e("svg",{attrs:{viewBox:"0 0 1024 1024",version:"1.1",xmlns:"http://www.w3.org/2000/svg"}},[e("path",{attrs:{d:"M587.229378 437.990403 580.722174 437.990403 76.975139 437.990403 76.975139 581.918419 580.722174 581.918419 587.229378 581.918419 940.542216 581.918419 940.542216 437.990403Z"}})])])])])},S=[],_={name:"SFCActionBar",props:{scale:{type:Number}},methods:{scaleIn(){this.$emit("update:scale",this.scale+10)},scaleOut(){this.scale<=0||this.$emit("update:scale",this.scale-10)}}},T=_;n("1e6b");function L(t,e,n,o,r,i,a,c){var s,u="function"===typeof t?t.options:t;if(e&&(u.render=e,u.staticRenderFns=n,u._compiled=!0),o&&(u.functional=!0),i&&(u._scopeId="data-v-"+i),a?(s=function(t){t=t||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext,t||"undefined"===typeof __VUE_SSR_CONTEXT__||(t=__VUE_SSR_CONTEXT__),r&&r.call(this,t),t&&t._registeredComponents&&t._registeredComponents.add(a)},u._ssrRegister=s):r&&(s=c?function(){r.call(this,(u.functional?this.parent:this).$root.$options.shadowRoot)}:r),s)if(u.functional){u._injectStyles=s;var d=u.render;u.render=function(t,e){return s.call(e),d(t,e)}}else{var l=u.beforeCreate;u.beforeCreate=l?[].concat(l,s):[s]}return{exports:t,options:u}}var k=L(T,x,S,!1,null,"6aca6e5e",null),M=k.exports,O={name:"SimpleFlowChart",components:{[M.name]:M},model:{prop:"data",event:"change"},props:{data:{type:Array,default(){return[]}},customCreateNode:{type:Function},customCreateConditionBranchNode:{type:Function},beforeDeleteNode:{type:Function},background:{type:String,default:"rgba(0, 0, 0, 0.03)"},readonly:{type:Boolean,default:!1},nodeTypeList:{type:Array},vertical:{type:Boolean,default:!1},showScaleBar:{type:Boolean,default:!0},customCreateNodeId:{type:Function}},data(){return{scale:100}},created(){C.readonly=this.readonly,C.nodeTypeList=this.nodeTypeList,C.vertical=this.vertical,C.customCreateNodeId=this.customCreateNodeId,this.data.length<=0&&this.data.push(...g),u.on("add-node-type-click",this.onAddNodeTypeClick),u.on("delete-node-click",this.onNodeDeleteClick),u.on("add-condition-branch-click",this.onAddConditionBranchClick),u.on("node-content-click",this.onNodeContentClick)},beforeDestroy(){u.off("add-node-type-click",this.onAddNodeTypeClick),u.off("delete-node-click",this.onNodeDeleteClick),u.off("add-condition-branch-click",this.onAddConditionBranchClick),u.off("node-content-click",this.onNodeContentClick)},methods:{onAddNodeTypeClick(t,e,n){let o=null;this.customCreateNode&&(o=this.customCreateNode(t,e,n)),o||(o=w(n.type)),this.addNode(t,e,o),this.$emit("add-node",o)},addNode(t,e,n){if(t){let o=this.findNodeIndex(t,e);t.splice(o+1,0,n)}else e.nodeList.unshift(n)},onNodeDeleteClick(...t){this.beforeDeleteNode?this.beforeDeleteNode(...t).then(()=>{this.deleteNode(...t)}):(this.deleteNode(...t),this.$emit("delete-node",t[3]))},deleteNode(t,e,n,o){if(t){let e=this.findNodeIndex(t,o);t.splice(e,1)}else if(e){let t=this.findNodeIndex(e,o);e.splice(t,1),e.length<=1&&this.removeNodeFromData(n)}},onAddConditionBranchClick(t){let e=null;this.customCreateConditionBranchNode&&(e=this.customCreateConditionBranchNode(t)),e||(e=w("normal","条件","条件内容")),t.children.push(e),this.$emit("add-condition-branch",e)},onNodeContentClick(...t){this.$emit("node-content-click",...t)},findNodeIndex(t,e){return t.findIndex(t=>t===e)},removeNodeFromData(t){let e=n=>{for(let o=0;o<n.length;o++){let r=n[o];if(r===t)return n.splice(o,1),!0;let i=!1;if(r.children&&r.children.length>0&&(i=e(r.children)),!i&&r.nodeList&&r.nodeList.length>0&&(i=e(r.nodeList)),i)break}};e(this.data)}}},j=O,E=(n("397b"),L(j,i,a,!1,null,"aa5500c6",null)),P=E.exports,A=function(){var t=this,e=t._self._c;return e("div",{staticClass:"sfcConditionNodeContainer",class:{vertical:t.vertical}},[t.readonly?t._e():e("div",{staticClass:"sfcConditionAddBtn",on:{click:t.onAddConditionBranchClick}},[t._v(" 添加条件 ")]),e("div",{staticClass:"sfcConditionNodeItemList"},t._l(t.data.children,(function(n){return e("div",{key:n.id,staticClass:"sfcConditionNodeItem"},[e("div",{staticClass:"sfcConditionNodeItemLine sfcConditionNodeItemFirstLine"}),e("div",{staticClass:"sfcConditionNodeItemLine sfcConditionNodeItemLastLine"}),e("div",{staticClass:"sfcConditionNodeItemLinkLine"}),e("div",{staticClass:"sfcConditionNodeItemNodeWrap"},[e("SFCNode",{attrs:{nodeList:null,childrenList:t.data.children,data:n,belongConditionNodeData:t.data,isMouseEnter:t.isMouseEnter}}),e("div",{staticClass:"sfcConditionNodeItemLinkCrossLine"})],1)])})),0),e("SFCArrowLine"),e("SFCAddNode",{attrs:{nodeList:t.nodeList,nodeData:t.data,btnType:t.isMouseEnter?"dot":""}})],1)},D=[],F=function(){var t=this,e=t._self._c;return e("div",{staticClass:"sfcArrowLine",class:{showArrow:t.showArrow,vertical:t.vertical}})},B=[],I={name:"SFCArrowLine",props:{showArrow:{type:Boolean,default:!0}},data(){return{vertical:C.vertical}}},$=I,R=(n("11c5"),L($,F,B,!1,null,"3f68034b",null)),U=R.exports,z=function(){var t=this,e=t._self._c;return t.readonly?t._e():e("div",{staticClass:"sfcAddNode",class:{vertical:t.vertical},on:{mouseenter:function(e){return e.stopPropagation(),t.onMouseenter.apply(null,arguments)},mouseleave:function(e){return e.stopPropagation(),t.onMouseleave.apply(null,arguments)}}},[e("div",{staticClass:"sfcAddNodeBtn",class:[t.type],on:{mouseenter:t.onAddBtnMouseenter,mouseleave:t.onAddBtnMouseleave}},[e("svg",{attrs:{viewBox:"0 0 1024 1024",version:"1.1",xmlns:"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink"}},[e("path",{attrs:{d:"M896 480H544.8V128h-65.6v352H128v66.4h351.2V896h65.6V546.4H896z"}})]),e("div",{ref:"nodeTypePopover",staticClass:"sfcNodeTypePopover",class:{show:t.showNodeTypePopover},style:t.nodeTypePopoverStyle},[e("SFCNodeTypeContent",{on:{click:t.onNodeTypeClick}})],1)])])},V=[],H={name:"SFCAddNode",props:{nodeList:{type:[Array,null],default(){return null}},nodeData:{type:Object,default:null},btnType:{type:String,default:""}},data(){return{readonly:C.readonly,vertical:C.vertical,addNodeBtnType:"",showNodeTypePopover:!1,nodeTypePopoverStyle:{}}},computed:{type(){return"normal"===this.addNodeBtnType?this.addNodeBtnType:this.btnType||this.addNodeBtnType}},watch:{showNodeTypePopover(t){t?this.$nextTick(()=>{this.setNodeTypePopoverStyle()}):setTimeout(()=>{this.resetNodeTypePopoverStyle()},300)}},created(){this.resetNodeTypePopoverStyle()},methods:{setNodeTypePopoverStyle(){let t=this.$refs.nodeTypePopover;if(!t)return;let e=t.offsetWidth,n=t.offsetHeight,{left:o,top:r}=t.getBoundingClientRect(),i=window.innerWidth,a=window.innerHeight,c={};c[r+n>a?"bottom":"top"]=0,c[o+e>i?"right":"left"]="42px",this.nodeTypePopoverStyle=c},resetNodeTypePopoverStyle(){this.nodeTypePopoverStyle={left:"42px",top:0}},onMouseenter(){this.addNodeBtnType="normal"},onMouseleave(){this.addNodeBtnType=""},onAddBtnMouseenter(){this.showNodeTypePopover=!0},onAddBtnMouseleave(){this.showNodeTypePopover=!1},onNodeTypeClick(...t){u.emit("add-node-type-click",this.nodeList,this.nodeData,...t),this.showNodeTypePopover=!1}}},W=H,G=(n("5ab0"),L(W,z,V,!1,null,"5cefb234",null)),X=G.exports,Z={name:"SFCConditionNode",components:{[U.name]:U,[X.name]:X},props:{nodeList:{type:[Array,null],default(){return null}},data:{type:Object,default:null},isMouseEnter:{type:Boolean,default:!1}},data(){return{readonly:C.readonly,vertical:C.vertical}},methods:{onAddConditionBranchClick(){u.emit("add-condition-branch-click",this.data)}}},q=Z,K=(n("c64e"),L(q,A,D,!1,null,"7ca3100a",null)),Y=K.exports,J=function(){var t=this,e=t._self._c;return e("div",{staticClass:"sfcEndNodeContainer"},[t._v(t._s(t.data.title))])},Q=[],tt={name:"SFCEndNode",props:{data:{type:Object,default:null}}},et=tt,nt=(n("a00c"),L(et,J,Q,!1,null,"f1309ae2",null)),ot=nt.exports,rt=function(){var t=this,e=t._self._c;return e("div",{staticClass:"sfcNodeContainer",on:{mouseenter:function(e){return e.stopPropagation(),t.onMouseenter.apply(null,arguments)},mouseleave:function(e){return e.stopPropagation(),t.onMouseleave.apply(null,arguments)}}},["start"===t.data.type?e("SFCStartNode",{attrs:{nodeList:t.nodeList,data:t.data,isMouseEnter:t.isMouseEnter||t.isCurrentMouseEnter}}):"end"===t.data.type?e("SFCEndNode",{attrs:{data:t.data}}):"condition"===t.data.type?e("SFCConditionNode",{attrs:{nodeList:t.nodeList,data:t.data,isMouseEnter:t.isMouseEnter||t.isCurrentMouseEnter}}):e("SFCNormalNode",{attrs:{nodeList:t.nodeList,childrenList:t.childrenList,data:t.data,belongConditionNodeData:t.belongConditionNodeData,isMouseEnter:t.isMouseEnter||t.isCurrentMouseEnter}})],1)},it=[],at={name:"SFCNode",props:{nodeList:{type:[Array,null],default(){return null}},childrenList:{type:[Array,null],default(){return null}},data:{type:Object,default:null},belongConditionNodeData:{type:Object,default:null},isMouseEnter:{type:Boolean,default:!1}},data(){return{isCurrentMouseEnter:!1}},methods:{onMouseenter(){this.isCurrentMouseEnter=!0},onMouseleave(){this.isCurrentMouseEnter=!1}}},ct=at,st=(n("a933"),L(ct,rt,it,!1,null,"2ae6cee8",null)),ut=st.exports,dt=function(){var t=this,e=t._self._c;return e("div",{staticClass:"sfcNormalNodeContainer",class:{vertical:t.vertical}},[e("div",{staticClass:"sfcNormalNodeWrap"},[e("div",{staticClass:"sfcNormalNodeContentWrap",on:{mouseenter:function(e){return e.stopPropagation(),t.onContentMouseenter.apply(null,arguments)},mouseleave:function(e){return e.stopPropagation(),t.onContentMouseleave.apply(null,arguments)},click:function(e){return e.stopPropagation(),t.onContentClick.apply(null,arguments)}}},[e("SFCNodeContent",{attrs:{data:t.data}}),t.showDeleteBtn&&!t.readonly?e("SFCDeleteNode",{on:{click:t.onDeleteNode}}):t._e()],1),e("SFCArrowLine"),e("SFCAddNode",{attrs:{nodeList:t.nodeList,nodeData:t.data,btnType:t.isMouseEnter?"dot":""}})],1),t._l(t.data.nodeList||[],(function(n){return e("SFCNode",{key:n.id,attrs:{nodeList:t.data.nodeList,data:n,isMouseEnter:t.isMouseEnter}})}))],2)},lt=[],ft={name:"SFCNormalNode",components:{[U.name]:U,[X.name]:X},props:{nodeList:{type:[Array,null],default(){return null}},childrenList:{type:[Array,null],default(){return null}},data:{type:Object,default:null},belongConditionNodeData:{type:Object,default:null},isMouseEnter:{type:Boolean,default:!1}},data(){return{readonly:C.readonly,vertical:C.vertical,showDeleteBtn:!1}},methods:{onContentMouseenter(){this.showDeleteBtn=!0},onContentMouseleave(){this.showDeleteBtn=!1},onContentClick(){u.emit("node-content-click",this.data,this.nodeList)},onDeleteNode(){u.emit("delete-node-click",this.nodeList,this.childrenList,this.belongConditionNodeData,this.data)}}},pt=ft,vt=(n("48ee"),L(pt,dt,lt,!1,null,"f3fe072c",null)),ht=vt.exports,yt=function(){var t=this,e=t._self._c;return e("div",{staticClass:"sfcStartNodeContainer",class:{vertical:t.vertical}},[e("div",{staticClass:"sfcStartNodeContent"},[t._v(t._s(t.data.title))]),e("SFCArrowLine"),e("SFCAddNode",{attrs:{nodeList:t.nodeList,nodeData:t.data,btnType:t.isMouseEnter?"dot":""}})],1)},mt=[],bt={name:"SFCStartNode",components:{[U.name]:U,[X.name]:X},props:{nodeList:{type:[Array,null],default(){return null}},data:{type:Object,default:null},isMouseEnter:{type:Boolean,default:!1}},data(){return{vertical:C.vertical}}},Ct=bt,gt=(n("0a68"),L(Ct,yt,mt,!1,null,"aee8cabe",null)),Nt=gt.exports,wt=function(){var t=this,e=t._self._c;return e("div",{staticClass:"sfcNormalNodeContent"},[e("div",{staticClass:"sfcNormalNodeTitle"},[t._v(" "+t._s(t.data.title||"")+" ")]),e("div",{staticClass:"sfcNormalNodeData"},[e("div",{staticClass:"sfcNormalNodeDataText"},[t._v(t._s(t.data.content||""))]),e("img",{staticClass:"sfcNormalNodeDataIcon",attrs:{src:n("ee92"),alt:""}})])])},xt=[],St={name:"SFCNodeContent",props:{data:{type:Object,default:null}}},_t=St,Tt=(n("5405"),L(_t,wt,xt,!1,null,"645aa214",null)),Lt=Tt.exports,kt=function(){var t=this,e=t._self._c;return e("div",{staticClass:"sfcNodeTypeContent"},t._l(t.nodeTypeList,(function(n,o){return e("div",{key:o,staticClass:"sfcNodeTypeGroup"},[e("div",{staticClass:"sfcNodeTypeGroupName"},[t._v(t._s(n.name))]),e("div",{staticClass:"sfcNodeTypeList"},t._l(n.list,(function(o,r){return e("div",{key:r,staticClass:"sfcNodeTypeItem",on:{click:function(e){return t.onNodeTypeClick(o,n)}}},[t._v(" "+t._s(o.name)+" ")])})),0)])})),0)},Mt=[],Ot={name:"SFCNodeTypeContent",data(){return{nodeTypeList:C.nodeTypeList||N}},methods:{onNodeTypeClick(...t){this.$emit("click",...t)}}},jt=Ot,Et=(n("c110"),L(jt,kt,Mt,!1,null,"1c26e8bd",null)),Pt=Et.exports,At=function(){var t=this,e=t._self._c;return e("div",{staticClass:"sfcDeleteNode",on:{click:function(e){return e.stopPropagation(),t.$emit("click")}}},[e("svg",{attrs:{viewBox:"0 0 1024 1024",version:"1.1",xmlns:"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink"}},[e("path",{attrs:{d:"M106.666667 213.333333h810.666666v42.666667H106.666667z"}}),e("path",{attrs:{d:"M640 128v42.666667h42.666667V128c0-23.573333-19.093333-42.666667-42.538667-42.666667H383.872A42.496 42.496 0 0 0 341.333333 128v42.666667h42.666667V128h256z"}}),e("path",{attrs:{d:"M213.333333 896V256H170.666667v639.957333C170.666667 919.552 189.653333 938.666667 213.376 938.666667h597.248C834.218667 938.666667 853.333333 919.68 853.333333 895.957333V256h-42.666666v640H213.333333z"}}),e("path",{attrs:{d:"M320 341.333333h42.666667v384h-42.666667zM490.666667 341.333333h42.666666v384h-42.666666zM661.333333 341.333333h42.666667v384h-42.666667z"}})])])},Dt=[],Ft={name:"SFCDeleteNode"},Bt=Ft,It=(n("76ad"),L(Bt,At,Dt,!1,null,"0246b6f9",null)),$t=It.exports;const Rt=function(t,{notRegisterNodeContent:e,notRegisterNodeTypeContent:n}={}){t.component(Y.name,Y),t.component(ot.name,ot),t.component(ut.name,ut),t.component(ht.name,ht),t.component(Nt.name,Nt),t.component($t.name,$t),t.component(P.name,P),e||t.component(Lt.name,Lt),n||t.component(Pt.name,Pt)};var Ut={install:Rt};e["default"]=Ut},fc6a:function(t,e,n){var o=n("44ad"),r=n("1d80");t.exports=function(t){return o(r(t))}},fdbf:function(t,e,n){var o=n("04f8");t.exports=o&&!Symbol.sham&&"symbol"==typeof Symbol.iterator}})}));
2 | //# sourceMappingURL=simpleFlowChart.umd.min.js.map


--------------------------------------------------------------------------------
/simple-flow-chart/index.js:
--------------------------------------------------------------------------------
 1 | import Index from './src/index.vue'
 2 | import ConditionNode from './src/components/ConditionNode.vue'
 3 | import EndNode from './src/components/EndNode.vue'
 4 | import Node from './src/components/Node.vue'
 5 | import NormalNode from './src/components/NormalNode.vue'
 6 | import StartNode from './src/components/StartNode.vue'
 7 | import NodeContent from './src/components/NodeContent.vue'
 8 | import NodeTypeContent from './src/components/NodeTypeContent.vue'
 9 | import DeleteNode from './src/components/DeleteNode.vue'
10 | 
11 | const install = function (
12 |   Vue,
13 |   { notRegisterNodeContent, notRegisterNodeTypeContent } = {}
14 | ) {
15 |   Vue.component(ConditionNode.name, ConditionNode)
16 |   Vue.component(EndNode.name, EndNode)
17 |   Vue.component(Node.name, Node)
18 |   Vue.component(NormalNode.name, NormalNode)
19 |   Vue.component(StartNode.name, StartNode)
20 |   Vue.component(DeleteNode.name, DeleteNode)
21 |   Vue.component(Index.name, Index)
22 |   if (!notRegisterNodeContent) {
23 |     Vue.component(NodeContent.name, NodeContent)
24 |   }
25 |   if (!notRegisterNodeTypeContent) {
26 |     Vue.component(NodeTypeContent.name, NodeTypeContent)
27 |   }
28 | }
29 | 
30 | export default {
31 |   install
32 | }
33 | 


--------------------------------------------------------------------------------
/simple-flow-chart/package-lock.json:
--------------------------------------------------------------------------------
 1 | {
 2 |     "name": "@wanglin1994/simple-flow-chart",
 3 |     "version": "0.0.1",
 4 |     "lockfileVersion": 2,
 5 |     "requires": true,
 6 |     "packages": {
 7 |         "": {
 8 |             "name": "@wanglin1994/simple-flow-chart",
 9 |             "version": "0.0.1",
10 |             "license": "MIT",
11 |             "dependencies": {
12 |                 "tiny-emitter": "^2.1.0",
13 |                 "uuid": "^9.0.0"
14 |             },
15 |             "devDependencies": {
16 |                 "prettier": "^2.8.1"
17 |             }
18 |         },
19 |         "node_modules/prettier": {
20 |             "version": "2.8.1",
21 |             "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.8.1.tgz",
22 |             "integrity": "sha512-lqGoSJBQNJidqCHE80vqZJHWHRFoNYsSpP9AjFhlhi9ODCJA541svILes/+/1GM3VaL/abZi7cpFzOpdR9UPKg==",
23 |             "dev": true,
24 |             "bin": {
25 |                 "prettier": "bin-prettier.js"
26 |             },
27 |             "engines": {
28 |                 "node": ">=10.13.0"
29 |             },
30 |             "funding": {
31 |                 "url": "https://github.com/prettier/prettier?sponsor=1"
32 |             }
33 |         },
34 |         "node_modules/tiny-emitter": {
35 |             "version": "2.1.0",
36 |             "resolved": "https://registry.npmjs.org/tiny-emitter/-/tiny-emitter-2.1.0.tgz",
37 |             "integrity": "sha512-NB6Dk1A9xgQPMoGqC5CVXn123gWyte215ONT5Pp5a0yt4nlEoO1ZWeCwpncaekPHXO60i47ihFnZPiRPjRMq4Q=="
38 |         },
39 |         "node_modules/uuid": {
40 |             "version": "9.0.0",
41 |             "resolved": "https://registry.npmjs.org/uuid/-/uuid-9.0.0.tgz",
42 |             "integrity": "sha512-MXcSTerfPa4uqyzStbRoTgt5XIe3x5+42+q1sDuy3R5MDk66URdLMOZe5aPX/SQd+kuYAh0FdP/pO28IkQyTeg==",
43 |             "bin": {
44 |                 "uuid": "dist/bin/uuid"
45 |             }
46 |         }
47 |     },
48 |     "dependencies": {
49 |         "prettier": {
50 |             "version": "2.8.1",
51 |             "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.8.1.tgz",
52 |             "integrity": "sha512-lqGoSJBQNJidqCHE80vqZJHWHRFoNYsSpP9AjFhlhi9ODCJA541svILes/+/1GM3VaL/abZi7cpFzOpdR9UPKg==",
53 |             "dev": true
54 |         },
55 |         "tiny-emitter": {
56 |             "version": "2.1.0",
57 |             "resolved": "https://registry.npmjs.org/tiny-emitter/-/tiny-emitter-2.1.0.tgz",
58 |             "integrity": "sha512-NB6Dk1A9xgQPMoGqC5CVXn123gWyte215ONT5Pp5a0yt4nlEoO1ZWeCwpncaekPHXO60i47ihFnZPiRPjRMq4Q=="
59 |         },
60 |         "uuid": {
61 |             "version": "9.0.0",
62 |             "resolved": "https://registry.npmjs.org/uuid/-/uuid-9.0.0.tgz",
63 |             "integrity": "sha512-MXcSTerfPa4uqyzStbRoTgt5XIe3x5+42+q1sDuy3R5MDk66URdLMOZe5aPX/SQd+kuYAh0FdP/pO28IkQyTeg=="
64 |         }
65 |     }
66 | }
67 | 


--------------------------------------------------------------------------------
/simple-flow-chart/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |     "name": "@wanglin1994/simple-flow-chart",
 3 |     "version": "0.0.4",
 4 |     "description": "一个基于Vue2的简单流程图设计组件",
 5 |     "main": "./dist/simpleFlowChart.umd.min.js",
 6 |     "module": "index.js",
 7 |     "scripts": {
 8 |         "format": "prettier --write src/* index.js"
 9 |     },
10 |     "authors": [
11 |         {
12 |             "name": "街角小林",
13 |             "email": "1013335014@qq.com"
14 |         },
15 |         {
16 |             "name": "理想青年实验室",
17 |             "url": "http://lxqnsys.com/"
18 |         }
19 |     ],
20 |     "license": "MIT",
21 |     "repository": {
22 |         "type": "git",
23 |         "url": "https://github.com/wanglin2/simple-flow-chart"
24 |     },
25 |     "keywords": [
26 |         "flow-chart"
27 |     ],
28 |     "dependencies": {
29 |         "tiny-emitter": "^2.1.0",
30 |         "uuid": "^9.0.0"
31 |     },
32 |     "devDependencies": {
33 |         "prettier": "^2.8.1"
34 |     }
35 | }
36 | 


--------------------------------------------------------------------------------
/simple-flow-chart/src/assets/svg/arrow.svg:
--------------------------------------------------------------------------------
1 | <?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1671180017363" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1156" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M312.888889 995.555556c-17.066667 0-28.444444-5.688889-39.822222-17.066667-22.755556-22.755556-17.066667-56.888889 5.688889-79.644445l364.088888-329.955555c11.377778-11.377778 17.066667-22.755556 17.066667-34.133333 0-11.377778-5.688889-22.755556-17.066667-34.133334L273.066667 187.733333c-22.755556-22.755556-28.444444-56.888889-5.688889-79.644444 22.755556-22.755556 56.888889-28.444444 79.644444-5.688889l364.088889 312.888889c34.133333 28.444444 56.888889 73.955556 56.888889 119.466667s-17.066667 85.333333-51.2 119.466666l-364.088889 329.955556c-11.377778 5.688889-28.444444 11.377778-39.822222 11.377778z" fill="#999999" p-id="1157"></path></svg>


--------------------------------------------------------------------------------
/simple-flow-chart/src/components/ActionBar.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="sfcActionBar">
 3 |     <div class="sfcActionScale">
 4 |       <div class="sfcActionScaleBtn" @click="scaleIn">
 5 |         <svg
 6 |           viewBox="0 0 1024 1024"
 7 |           version="1.1"
 8 |           xmlns="http://www.w3.org/2000/svg"
 9 |         >
10 |           <path
11 |             d="M580.722174 437.990403 580.722174 78.171384 436.794158 78.171384 436.794158 437.990403 76.975139 437.990403 76.975139 581.918419 436.794158 581.918419 436.794158 941.737438 580.722174 941.737438 580.722174 581.918419 940.542216 581.918419 940.542216 437.990403Z"
12 |           ></path>
13 |         </svg>
14 |       </div>
15 |       <div class="sfcActionScaleNum">{{ scale.toFixed(0) }}%</div>
16 |       <div class="sfcActionScaleBtn" @click="scaleOut">
17 |         <svg
18 |           viewBox="0 0 1024 1024"
19 |           version="1.1"
20 |           xmlns="http://www.w3.org/2000/svg"
21 |         >
22 |           <path
23 |             d="M587.229378 437.990403 580.722174 437.990403 76.975139 437.990403 76.975139 581.918419 580.722174 581.918419 587.229378 581.918419 940.542216 581.918419 940.542216 437.990403Z"
24 |           ></path>
25 |         </svg>
26 |       </div>
27 |     </div>
28 |   </div>
29 | </template>
30 | 
31 | <script>
32 | export default {
33 |   name: 'SFCActionBar',
34 |   props: {
35 |     scale: {
36 |       type: Number
37 |     }
38 |   },
39 |   methods: {
40 |     scaleIn() {
41 |       this.$emit('update:scale', this.scale + 10)
42 |     },
43 | 
44 |     scaleOut() {
45 |       if (this.scale <= 0) {
46 |         return
47 |       }
48 |       this.$emit('update:scale', this.scale - 10)
49 |     }
50 |   }
51 | }
52 | </script>
53 | 
54 | <style lang="less" scoped>
55 | .sfcActionBar {
56 |   position: absolute;
57 |   right: 30px;
58 |   top: 12px;
59 |   z-index: 3;
60 |   user-select: none;
61 | 
62 |   .sfcActionScale {
63 |     display: flex;
64 |     align-items: center;
65 | 
66 |     .sfcActionScaleBtn {
67 |       width: 30px;
68 |       height: 30px;
69 |       background-color: #fff;
70 |       box-shadow: 0 1px 5px 0 rgba(10, 30, 65, 0.08);
71 |       border-radius: 6px;
72 |       display: flex;
73 |       justify-content: center;
74 |       align-items: center;
75 |       cursor: pointer;
76 | 
77 |       svg {
78 |         width: 20px;
79 |         height: 20px;
80 |         fill: rgba(0, 0, 0, 0.85);
81 |       }
82 |     }
83 | 
84 |     .sfcActionScaleNum {
85 |       width: 50px;
86 |       color: rgba(0, 0, 0, 0.85);
87 |       font-size: 14px;
88 |       text-align: center;
89 |     }
90 |   }
91 | }
92 | </style>
93 | 


--------------------------------------------------------------------------------
/simple-flow-chart/src/components/AddNode.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div
  3 |     v-if="!readonly"
  4 |     class="sfcAddNode"
  5 |     :class="{ vertical: vertical }"
  6 |     @mouseenter.stop="onMouseenter"
  7 |     @mouseleave.stop="onMouseleave"
  8 |   >
  9 |     <div
 10 |       class="sfcAddNodeBtn"
 11 |       :class="[type]"
 12 |       @mouseenter="onAddBtnMouseenter"
 13 |       @mouseleave="onAddBtnMouseleave"
 14 |     >
 15 |       <svg
 16 |         viewBox="0 0 1024 1024"
 17 |         version="1.1"
 18 |         xmlns="http://www.w3.org/2000/svg"
 19 |         xmlns:xlink="http://www.w3.org/1999/xlink"
 20 |       >
 21 |         <path
 22 |           d="M896 480H544.8V128h-65.6v352H128v66.4h351.2V896h65.6V546.4H896z"
 23 |         ></path>
 24 |       </svg>
 25 |       <div
 26 |         class="sfcNodeTypePopover"
 27 |         :class="{ show: showNodeTypePopover }"
 28 |         :style="nodeTypePopoverStyle"
 29 |         ref="nodeTypePopover"
 30 |       >
 31 |         <SFCNodeTypeContent @click="onNodeTypeClick"></SFCNodeTypeContent>
 32 |       </div>
 33 |     </div>
 34 |   </div>
 35 | </template>
 36 | 
 37 | <script>
 38 | import { store } from '../constant'
 39 | import emitter from '../emit'
 40 | 
 41 | export default {
 42 |   name: 'SFCAddNode',
 43 |   props: {
 44 |     nodeList: {
 45 |       type: [Array, null],
 46 |       default() {
 47 |         return null
 48 |       }
 49 |     },
 50 |     nodeData: {
 51 |       type: Object,
 52 |       default: null
 53 |     },
 54 |     btnType: {
 55 |       type: String,
 56 |       default: '' // dot、normal
 57 |     }
 58 |   },
 59 |   data() {
 60 |     return {
 61 |       readonly: store.readonly,
 62 |       vertical: store.vertical,
 63 |       addNodeBtnType: '',
 64 |       showNodeTypePopover: false,
 65 |       nodeTypePopoverStyle: {}
 66 |     }
 67 |   },
 68 |   computed: {
 69 |     type() {
 70 |       return this.addNodeBtnType === 'normal'
 71 |         ? this.addNodeBtnType
 72 |         : this.btnType || this.addNodeBtnType
 73 |     }
 74 |   },
 75 |   watch: {
 76 |     showNodeTypePopover(val) {
 77 |       if (val) {
 78 |         this.$nextTick(() => {
 79 |           this.setNodeTypePopoverStyle()
 80 |         })
 81 |       } else {
 82 |         setTimeout(() => {
 83 |           this.resetNodeTypePopoverStyle()
 84 |         }, 300)
 85 |       }
 86 |     }
 87 |   },
 88 |   created() {
 89 |     this.resetNodeTypePopoverStyle()
 90 |   },
 91 |   methods: {
 92 |     setNodeTypePopoverStyle() {
 93 |       let el = this.$refs.nodeTypePopover
 94 |       if (!el) {
 95 |         return
 96 |       }
 97 |       let elWidth = el.offsetWidth
 98 |       let elHeight = el.offsetHeight
 99 |       let { left, top } = el.getBoundingClientRect()
100 |       let windowWidth = window.innerWidth
101 |       let windowHeight = window.innerHeight
102 |       let style = {}
103 |       style[top + elHeight > windowHeight ? 'bottom' : 'top'] = 0
104 |       style[left + elWidth > windowWidth ? 'right' : 'left'] = 42 + 'px'
105 |       this.nodeTypePopoverStyle = style
106 |     },
107 | 
108 |     resetNodeTypePopoverStyle() {
109 |       this.nodeTypePopoverStyle = {
110 |         left: '42px',
111 |         top: 0
112 |       }
113 |     },
114 | 
115 |     onMouseenter() {
116 |       this.addNodeBtnType = 'normal'
117 |     },
118 | 
119 |     onMouseleave() {
120 |       this.addNodeBtnType = ''
121 |     },
122 | 
123 |     onAddBtnMouseenter() {
124 |       this.showNodeTypePopover = true
125 |     },
126 | 
127 |     onAddBtnMouseleave() {
128 |       this.showNodeTypePopover = false
129 |     },
130 | 
131 |     onNodeTypeClick(...args) {
132 |       emitter.emit('add-node-type-click', this.nodeList, this.nodeData, ...args)
133 |       this.showNodeTypePopover = false
134 |     }
135 |   }
136 | }
137 | </script>
138 | 
139 | <style lang="less" scoped>
140 | .sfcAddNode {
141 |   position: absolute;
142 |   right: 0;
143 |   top: 0;
144 |   width: 65px;
145 |   height: 100%;
146 |   display: flex;
147 |   justify-content: center;
148 |   align-items: center;
149 | 
150 |   &.vertical {
151 |     right: auto;
152 |     top: auto;
153 |     left: 0;
154 |     bottom: 0;
155 |     width: 100%;
156 |     height: 65px;
157 |   }
158 | 
159 |   .sfcAddNodeBtn {
160 |     position: relative;
161 |     background: #0089ff;
162 |     width: 30px;
163 |     height: 30px;
164 |     border-radius: 50%;
165 |     box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
166 |     display: flex;
167 |     justify-content: center;
168 |     align-items: center;
169 |     cursor: pointer;
170 |     transform: scale(0);
171 |     transition: all 0.3s;
172 |     z-index: 2;
173 | 
174 |     &:hover {
175 |       z-index: 3;
176 |     }
177 | 
178 |     &.dot {
179 |       transform: scale(0.3);
180 | 
181 |       svg {
182 |         transform: scale(0);
183 |       }
184 |     }
185 | 
186 |     &.normal {
187 |       transform: scale(1);
188 | 
189 |       svg {
190 |         transform: scale(1);
191 |       }
192 |     }
193 | 
194 |     svg {
195 |       fill: #fff;
196 |       width: 24px;
197 |       height: 24px;
198 |       transform: scale(0);
199 |     }
200 |   }
201 | 
202 |   .sfcNodeTypePopover {
203 |     position: absolute;
204 |     visibility: hidden;
205 |     transform: scale(0);
206 |     transition: all 0.3s;
207 | 
208 |     &::before,
209 |     &::after {
210 |       content: '';
211 |       position: absolute;
212 |       top: 0;
213 |       width: 20px;
214 |       height: 100%;
215 |     }
216 | 
217 |     &::before {
218 |       left: -20px;
219 |     }
220 | 
221 |     &::after {
222 |       right: -20px;
223 |     }
224 | 
225 |     &.show {
226 |       visibility: visible;
227 |       transform: scale(1);
228 |     }
229 |   }
230 | }
231 | </style>
232 | 


--------------------------------------------------------------------------------
/simple-flow-chart/src/components/ArrowLine.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div
 3 |     class="sfcArrowLine"
 4 |     :class="{ showArrow: showArrow, vertical: vertical }"
 5 |   ></div>
 6 | </template>
 7 | 
 8 | <script>
 9 | import { store } from '../constant'
10 | 
11 | /**
12 |  * @Author: 王林25
13 |  * @Date: 2022-12-15 16:34:15
14 |  * @Desc: 箭头线
15 |  */
16 | export default {
17 |   name: 'SFCArrowLine',
18 |   props: {
19 |     showArrow: {
20 |       type: Boolean,
21 |       default: true
22 |     }
23 |   },
24 |   data() {
25 |     return {
26 |       vertical: store.vertical
27 |     }
28 |   }
29 | }
30 | </script>
31 | 
32 | <style lang="less" scoped>
33 | .sfcArrowLine {
34 |   position: relative;
35 |   width: 65px;
36 |   user-select: none;
37 | 
38 |   &.vertical {
39 |     width: auto;
40 |     height: 65px;
41 | 
42 |     &::before {
43 |       width: 2px;
44 |       height: 100%;
45 |       transform: translateX(-50%);
46 |     }
47 | 
48 |     &.showArrow {
49 |       &::after {
50 |         right: auto;
51 |         bottom: 0;
52 |         top: auto;
53 |         border-top: 10px solid #dedede;
54 |         border-left: 6px solid transparent;
55 |         border-right: 6px solid transparent;
56 |         border-bottom: none;
57 |         transform: translateX(-50%);
58 |       }
59 |     }
60 |   }
61 | 
62 |   &::before {
63 |     position: absolute;
64 |     z-index: 0;
65 |     top: 0;
66 |     left: 0;
67 |     transform: translateY(-50%);
68 |     height: 2px;
69 |     width: 100%;
70 |     background-color: #dedede;
71 |     content: '';
72 |   }
73 | 
74 |   &.showArrow {
75 |     &::after {
76 |       position: absolute;
77 |       width: 0;
78 |       height: 0;
79 |       border-left: 10px solid #dedede;
80 |       border-top: 6px solid transparent;
81 |       border-bottom: 6px solid transparent;
82 |       content: '';
83 |       right: 0;
84 |       top: 0;
85 |       transform: translateY(-50%);
86 |     }
87 |   }
88 | }
89 | </style>
90 | 


--------------------------------------------------------------------------------
/simple-flow-chart/src/components/ConditionNode.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="sfcConditionNodeContainer" :class="{ vertical: vertical }">
  3 |     <div
  4 |       class="sfcConditionAddBtn"
  5 |       v-if="!readonly"
  6 |       @click="onAddConditionBranchClick"
  7 |     >
  8 |       添加条件
  9 |     </div>
 10 |     <div class="sfcConditionNodeItemList">
 11 |       <div
 12 |         class="sfcConditionNodeItem"
 13 |         v-for="node in data.children"
 14 |         :key="node.id"
 15 |       >
 16 |         <!-- 左侧的竖线 -->
 17 |         <div
 18 |           class="sfcConditionNodeItemLine sfcConditionNodeItemFirstLine"
 19 |         ></div>
 20 |         <!-- 右侧的竖线 -->
 21 |         <div
 22 |           class="sfcConditionNodeItemLine sfcConditionNodeItemLastLine"
 23 |         ></div>
 24 |         <!-- 连接竖线和节点的水平线 -->
 25 |         <div class="sfcConditionNodeItemLinkLine"></div>
 26 |         <div class="sfcConditionNodeItemNodeWrap">
 27 |           <SFCNode
 28 |             :nodeList="null"
 29 |             :childrenList="data.children"
 30 |             :data="node"
 31 |             :belongConditionNodeData="data"
 32 |             :isMouseEnter="isMouseEnter"
 33 |           ></SFCNode>
 34 |           <!-- 连接较短分支和分支整体右侧的水平线 -->
 35 |           <div class="sfcConditionNodeItemLinkCrossLine"></div>
 36 |         </div>
 37 |       </div>
 38 |     </div>
 39 |     <SFCArrowLine></SFCArrowLine>
 40 |     <SFCAddNode
 41 |       :nodeList="nodeList"
 42 |       :nodeData="data"
 43 |       :btnType="isMouseEnter ? 'dot' : ''"
 44 |     ></SFCAddNode>
 45 |   </div>
 46 | </template>
 47 | 
 48 | <script>
 49 | import ArrowLine from './ArrowLine.vue'
 50 | import AddNode from './AddNode.vue'
 51 | import emitter from '../emit'
 52 | import { store } from '../constant'
 53 | 
 54 | /**
 55 |  * @Author: 王林25
 56 |  * @Date: 2022-12-15 09:33:25
 57 |  * @Desc: 分支节点
 58 |  */
 59 | export default {
 60 |   name: 'SFCConditionNode',
 61 |   components: {
 62 |     [ArrowLine.name]: ArrowLine,
 63 |     [AddNode.name]: AddNode
 64 |   },
 65 |   props: {
 66 |     nodeList: {
 67 |       type: [Array, null],
 68 |       default() {
 69 |         return null
 70 |       }
 71 |     },
 72 |     data: {
 73 |       type: Object,
 74 |       default: null
 75 |     },
 76 |     isMouseEnter: {
 77 |       type: Boolean,
 78 |       default: false
 79 |     }
 80 |   },
 81 |   data() {
 82 |     return {
 83 |       readonly: store.readonly,
 84 |       vertical: store.vertical
 85 |     }
 86 |   },
 87 |   methods: {
 88 |     onAddConditionBranchClick() {
 89 |       emitter.emit('add-condition-branch-click', this.data)
 90 |     }
 91 |   }
 92 | }
 93 | </script>
 94 | 
 95 | <style lang="less" scoped>
 96 | .sfcConditionNodeContainer {
 97 |   position: relative;
 98 |   display: flex;
 99 |   align-items: center;
100 | 
101 |   &.vertical {
102 |     flex-direction: column;
103 | 
104 |     .sfcConditionAddBtn {
105 |       left: 50%;
106 |       top: -18px;
107 |       transform: translateX(-50%);
108 |       width: auto;
109 |       height: 36px;
110 |       padding-top: 0;
111 |       padding-bottom: 0;
112 |       line-height: 32px;
113 |     }
114 | 
115 |     .sfcConditionNodeItemList {
116 |       display: flex;
117 | 
118 |       .sfcConditionNodeItem {
119 |         padding-right: 30px;
120 |         padding-bottom: 0;
121 | 
122 |         // 中间的竖线高度100%
123 |         .sfcConditionNodeItemLine {
124 |           height: 2px;
125 |           width: 100%;
126 |           top: 0px;
127 |           left: 0;
128 | 
129 |           &.sfcConditionNodeItemLastLine {
130 |             left: 0;
131 |             top: 100%;
132 |           }
133 |         }
134 | 
135 |         // 头尾的竖线高度50%
136 |         &:first-of-type {
137 |           // 头部的竖线距顶部50%
138 |           > .sfcConditionNodeItemLine {
139 |             left: 50%;
140 |             width: 50%;
141 |             height: 2px;
142 |             top: 0;
143 | 
144 |             &.sfcConditionNodeItemLastLine {
145 |               top: 100%;
146 |             }
147 |           }
148 |         }
149 | 
150 |         &:last-of-type {
151 |           // 尾部的竖线距顶部0
152 |           > .sfcConditionNodeItemLine {
153 |             left: 0;
154 |             width: 50%;
155 |             height: 2px;
156 |             top: 0;
157 | 
158 |             &.sfcConditionNodeItemLastLine {
159 |               top: 100%;
160 |             }
161 |           }
162 |         }
163 | 
164 |         // 连接竖线和节点的水平线
165 |         .sfcConditionNodeItemLinkLine {
166 |           height: 30px;
167 |           width: 2px;
168 |           top: 0px;
169 |           left: 50%;
170 |           transform: translateX(-50%);
171 |         }
172 | 
173 |         .sfcConditionNodeItemNodeWrap {
174 |           flex-direction: column;
175 |           height: 100%;
176 | 
177 |           // 连接较短分支和分支整体右侧的水平线
178 |           .sfcConditionNodeItemLinkCrossLine {
179 |             width: 2px;
180 |           }
181 |         }
182 |       }
183 |     }
184 |   }
185 | 
186 |   .sfcConditionAddBtn {
187 |     position: absolute;
188 |     left: -18px;
189 |     top: 50%;
190 |     transform: translateY(-50%);
191 |     z-index: 2;
192 |     width: 36px;
193 |     display: flex;
194 |     flex-wrap: wrap;
195 |     border: 2px solid #dedede;
196 |     background: #fff;
197 |     border-radius: 18px;
198 |     color: #222;
199 |     cursor: pointer;
200 |     font-size: 12px;
201 |     padding: 10px;
202 |     text-align: center;
203 |   }
204 | 
205 |   .sfcConditionNodeItemList {
206 |     .sfcConditionNodeItem {
207 |       padding: 30px;
208 |       padding-right: 0;
209 |       position: relative;
210 | 
211 |       // 中间的竖线高度100%
212 |       .sfcConditionNodeItemLine {
213 |         position: absolute;
214 |         height: 100%;
215 |         width: 2px;
216 |         left: 0px;
217 |         top: 0;
218 |         background-color: #dedede;
219 | 
220 |         &.sfcConditionNodeItemLastLine {
221 |           left: 100%;
222 |         }
223 |       }
224 | 
225 |       // 头尾的竖线高度50%
226 |       &:first-of-type {
227 |         // 头部的竖线距顶部50%
228 |         > .sfcConditionNodeItemLine {
229 |           top: 50%;
230 |           height: 50%;
231 |         }
232 |       }
233 | 
234 |       &:last-of-type {
235 |         // 尾部的竖线距顶部0
236 |         > .sfcConditionNodeItemLine {
237 |           top: 0;
238 |           height: 50%;
239 |         }
240 |       }
241 | 
242 |       // 连接竖线和节点的水平线
243 |       .sfcConditionNodeItemLinkLine {
244 |         position: absolute;
245 |         width: 30px;
246 |         height: 2px;
247 |         left: 0px;
248 |         top: 50%;
249 |         transform: translateY(-50%);
250 |         background-color: #dedede;
251 |       }
252 | 
253 |       .sfcConditionNodeItemNodeWrap {
254 |         display: flex;
255 |         align-items: center;
256 | 
257 |         // 连接较短分支和分支整体右侧的水平线
258 |         .sfcConditionNodeItemLinkCrossLine {
259 |           height: 2px;
260 |           flex-grow: 1;
261 |           background-color: #dedede;
262 |         }
263 |       }
264 |     }
265 |   }
266 | }
267 | </style>
268 | 


--------------------------------------------------------------------------------
/simple-flow-chart/src/components/DeleteNode.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="sfcDeleteNode" @click.stop="$emit('click')">
 3 |     <svg
 4 |       viewBox="0 0 1024 1024"
 5 |       version="1.1"
 6 |       xmlns="http://www.w3.org/2000/svg"
 7 |       xmlns:xlink="http://www.w3.org/1999/xlink"
 8 |     >
 9 |       <path d="M106.666667 213.333333h810.666666v42.666667H106.666667z"></path>
10 |       <path
11 |         d="M640 128v42.666667h42.666667V128c0-23.573333-19.093333-42.666667-42.538667-42.666667H383.872A42.496 42.496 0 0 0 341.333333 128v42.666667h42.666667V128h256z"
12 |       ></path>
13 |       <path
14 |         d="M213.333333 896V256H170.666667v639.957333C170.666667 919.552 189.653333 938.666667 213.376 938.666667h597.248C834.218667 938.666667 853.333333 919.68 853.333333 895.957333V256h-42.666666v640H213.333333z"
15 |       ></path>
16 |       <path
17 |         d="M320 341.333333h42.666667v384h-42.666667zM490.666667 341.333333h42.666666v384h-42.666666zM661.333333 341.333333h42.666667v384h-42.666667z"
18 |       ></path>
19 |     </svg>
20 |   </div>
21 | </template>
22 | 
23 | <script>
24 | /**
25 |  * @Author: 王林
26 |  * @Date: 2022-12-28 11:09:24
27 |  * @Desc: 删除节点
28 |  */
29 | export default {
30 |   name: 'SFCDeleteNode'
31 | }
32 | </script>
33 | 
34 | <style lang="less" scoped>
35 | .sfcDeleteNode {
36 |   position: absolute;
37 |   top: -28px;
38 |   right: 0;
39 |   background: #0089ff;
40 |   width: 24px;
41 |   height: 24px;
42 |   border-radius: 2px;
43 |   display: flex;
44 |   justify-content: center;
45 |   align-items: center;
46 |   cursor: pointer;
47 |   animation: show 1s;
48 | 
49 |   &::after {
50 |     content: '';
51 |     position: absolute;
52 |     width: 100%;
53 |     height: 4px;
54 |     left: 0;
55 |     bottom: -4px;
56 |   }
57 | 
58 |   svg {
59 |     fill: #fff;
60 |     width: 16px;
61 |     height: 16px;
62 |   }
63 | }
64 | 
65 | @keyframes show {
66 |   0% {
67 |     opacity: 0;
68 |   }
69 | 
70 |   100% {
71 |     opacity: 1;
72 |   }
73 | }
74 | </style>
75 | 


--------------------------------------------------------------------------------
/simple-flow-chart/src/components/EndNode.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="sfcEndNodeContainer">{{ data.title }}</div>
 3 | </template>
 4 | 
 5 | <script>
 6 | export default {
 7 |   name: 'SFCEndNode',
 8 |   props: {
 9 |     data: {
10 |       type: Object,
11 |       default: null
12 |     }
13 |   }
14 | }
15 | </script>
16 | 
17 | <style lang="less" scoped>
18 | .sfcEndNodeContainer {
19 |   width: 90px;
20 |   height: 40px;
21 |   border-radius: 30px;
22 |   box-shadow: 0 1px 5px 0 rgba(10, 30, 65, 0.08);
23 |   color: #fff;
24 |   line-height: 40px;
25 |   text-align: center;
26 |   background: #6e6e6e;
27 | }
28 | </style>
29 | 


--------------------------------------------------------------------------------
/simple-flow-chart/src/components/Node.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div
 3 |     class="sfcNodeContainer"
 4 |     @mouseenter.stop="onMouseenter"
 5 |     @mouseleave.stop="onMouseleave"
 6 |   >
 7 |     <!-- 开始节点 -->
 8 |     <SFCStartNode
 9 |       v-if="data.type === 'start'"
10 |       :nodeList="nodeList"
11 |       :data="data"
12 |       :isMouseEnter="isMouseEnter || isCurrentMouseEnter"
13 |     ></SFCStartNode>
14 |     <!-- 结束节点 -->
15 |     <SFCEndNode v-else-if="data.type === 'end'" :data="data"></SFCEndNode>
16 |     <!-- 分支节点 -->
17 |     <SFCConditionNode
18 |       v-else-if="data.type === 'condition'"
19 |       :nodeList="nodeList"
20 |       :data="data"
21 |       :isMouseEnter="isMouseEnter || isCurrentMouseEnter"
22 |     ></SFCConditionNode>
23 |     <!-- 普通节点 -->
24 |     <SFCNormalNode
25 |       v-else
26 |       :nodeList="nodeList"
27 |       :childrenList="childrenList"
28 |       :data="data"
29 |       :belongConditionNodeData="belongConditionNodeData"
30 |       :isMouseEnter="isMouseEnter || isCurrentMouseEnter"
31 |     ></SFCNormalNode>
32 |   </div>
33 | </template>
34 | 
35 | <script>
36 | /**
37 |  * @Author: 王林25
38 |  * @Date: 2022-12-15 09:33:17
39 |  * @Desc: 节点
40 |  */
41 | export default {
42 |   name: 'SFCNode',
43 |   props: {
44 |     nodeList: {
45 |       type: [Array, null],
46 |       default() {
47 |         return null
48 |       }
49 |     },
50 |     childrenList: {
51 |       type: [Array, null],
52 |       default() {
53 |         return null
54 |       }
55 |     },
56 |     data: {
57 |       type: Object,
58 |       default: null
59 |     },
60 |     belongConditionNodeData: {
61 |       type: Object,
62 |       default: null
63 |     },
64 |     isMouseEnter: {
65 |       type: Boolean,
66 |       default: false
67 |     }
68 |   },
69 |   data() {
70 |     return {
71 |       isCurrentMouseEnter: false
72 |     }
73 |   },
74 |   methods: {
75 |     onMouseenter() {
76 |       this.isCurrentMouseEnter = true
77 |     },
78 | 
79 |     onMouseleave() {
80 |       this.isCurrentMouseEnter = false
81 |     }
82 |   }
83 | }
84 | </script>
85 | 
86 | <style lang="less" scoped>
87 | .sfcNodeContainer {
88 |   // flex-shrink: 0;
89 |   position: relative;
90 | }
91 | </style>
92 | 


--------------------------------------------------------------------------------
/simple-flow-chart/src/components/NodeContent.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="sfcNormalNodeContent">
 3 |     <div class="sfcNormalNodeTitle">
 4 |       {{ data.title || '' }}
 5 |     </div>
 6 |     <div class="sfcNormalNodeData">
 7 |       <div class="sfcNormalNodeDataText">{{ data.content || '' }}</div>
 8 |       <img class="sfcNormalNodeDataIcon" src="../assets/svg/arrow.svg" alt="" />
 9 |     </div>
10 |   </div>
11 | </template>
12 | 
13 | <script>
14 | /**
15 |  * @Author: 王林25
16 |  * @Date: 2022-12-15 09:33:21
17 |  * @Desc: 普通节点内容
18 |  */
19 | export default {
20 |   name: 'SFCNodeContent',
21 |   props: {
22 |     data: {
23 |       type: Object,
24 |       default: null
25 |     }
26 |   }
27 | }
28 | </script>
29 | 
30 | <style lang="less" scoped>
31 | .sfcNormalNodeContent {
32 |   width: 200px;
33 |   min-height: 70px;
34 |   padding: 5px 10px 8px;
35 |   border: 2px solid transparent;
36 |   border-radius: 8px;
37 |   box-shadow: 0 1px 4px 0 rgba(10, 30, 65, 0.16);
38 |   transition: all 0.1s cubic-bezier(0.645, 0.045, 0.355, 1);
39 |   background-color: #fff;
40 |   border-radius: 8px;
41 |   cursor: pointer;
42 | 
43 |   .sfcNormalNodeTitle {
44 |     position: relative;
45 |     display: flex;
46 |     align-items: center;
47 |     border-radius: 4px 4px 0 0;
48 |     cursor: pointer;
49 |     font-size: 14px;
50 |     text-align: left;
51 |     color: #1f1f1f;
52 |     font-weight: 600;
53 |     word-break: break-all;
54 |     min-height: 20px;
55 |   }
56 | 
57 |   .sfcNormalNodeData {
58 |     display: flex;
59 |     min-height: 32px;
60 |     align-items: center;
61 |     justify-content: space-between;
62 |     padding: 4px 8px;
63 |     margin-top: 10px;
64 |     background: rgba(0, 0, 0, 0.03);
65 |     border-radius: 4px;
66 | 
67 |     .sfcNormalNodeDataText {
68 |       color: #111f2c;
69 |       font-size: 14px;
70 |       line-height: 32px;
71 |       word-break: break-all;
72 |     }
73 | 
74 |     .sfcNormalNodeDataIcon {
75 |       width: 20px;
76 |     }
77 |   }
78 | }
79 | </style>
80 | 


--------------------------------------------------------------------------------
/simple-flow-chart/src/components/NodeTypeContent.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="sfcNodeTypeContent">
 3 |     <div
 4 |       class="sfcNodeTypeGroup"
 5 |       v-for="(group, groupIndex) in nodeTypeList"
 6 |       :key="groupIndex"
 7 |     >
 8 |       <div class="sfcNodeTypeGroupName">{{ group.name }}</div>
 9 |       <div class="sfcNodeTypeList">
10 |         <div
11 |           class="sfcNodeTypeItem"
12 |           v-for="(type, typeIndex) in group.list"
13 |           :key="typeIndex"
14 |           @click="onNodeTypeClick(type, group)"
15 |         >
16 |           {{ type.name }}
17 |         </div>
18 |       </div>
19 |     </div>
20 |   </div>
21 | </template>
22 | 
23 | <script>
24 | import { defaultNodeTypeList, store } from '../constant'
25 | 
26 | export default {
27 |   name: 'SFCNodeTypeContent',
28 |   data() {
29 |     return {
30 |       nodeTypeList: store.nodeTypeList || defaultNodeTypeList
31 |     }
32 |   },
33 |   methods: {
34 |     onNodeTypeClick(...args) {
35 |       this.$emit('click', ...args)
36 |     }
37 |   }
38 | }
39 | </script>
40 | 
41 | <style lang="less" scoped>
42 | .sfcNodeTypeContent {
43 |   padding: 12px 8px;
44 |   width: 300px;
45 |   background-color: #000;
46 |   border-radius: 4px;
47 | 
48 |   .sfcNodeTypeGroup {
49 |     width: 100%;
50 |     margin-bottom: 12px;
51 | 
52 |     &:last-of-type {
53 |       margin-bottom: 0;
54 |     }
55 | 
56 |     .sfcNodeTypeGroupName {
57 |       color: #888;
58 |       margin-bottom: 12px;
59 |     }
60 | 
61 |     .sfcNodeTypeList {
62 |       width: 100%;
63 |       display: flex;
64 |       flex-wrap: wrap;
65 |       justify-content: space-between;
66 |       margin-bottom: -12px;
67 | 
68 |       .sfcNodeTypeItem {
69 |         display: flex;
70 |         width: 136px;
71 |         padding: 4px 8px;
72 |         border: 1px solid #2e2e2e;
73 |         background: #000;
74 |         color: #fff;
75 |         font-size: 14px;
76 |         cursor: pointer;
77 |         margin-bottom: 12px;
78 | 
79 |         &:hover {
80 |           border-color: #595959;
81 |           background: #3b3b3b;
82 |         }
83 |       }
84 |     }
85 |   }
86 | }
87 | </style>
88 | 


--------------------------------------------------------------------------------
/simple-flow-chart/src/components/NormalNode.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="sfcNormalNodeContainer" :class="{ vertical: vertical }">
  3 |     <div class="sfcNormalNodeWrap">
  4 |       <div
  5 |         class="sfcNormalNodeContentWrap"
  6 |         @mouseenter.stop="onContentMouseenter"
  7 |         @mouseleave.stop="onContentMouseleave"
  8 |         @click.stop="onContentClick"
  9 |       >
 10 |         <SFCNodeContent :data="data"></SFCNodeContent>
 11 |         <SFCDeleteNode
 12 |           v-if="showDeleteBtn && !readonly"
 13 |           @click="onDeleteNode"
 14 |         ></SFCDeleteNode>
 15 |       </div>
 16 |       <SFCArrowLine></SFCArrowLine>
 17 |       <SFCAddNode
 18 |         :nodeList="nodeList"
 19 |         :nodeData="data"
 20 |         :btnType="isMouseEnter ? 'dot' : ''"
 21 |       ></SFCAddNode>
 22 |     </div>
 23 |     <SFCNode
 24 |       v-for="node in data.nodeList || []"
 25 |       :key="node.id"
 26 |       :nodeList="data.nodeList"
 27 |       :data="node"
 28 |       :isMouseEnter="isMouseEnter"
 29 |     ></SFCNode>
 30 |   </div>
 31 | </template>
 32 | 
 33 | <script>
 34 | import ArrowLine from './ArrowLine.vue'
 35 | import AddNode from './AddNode.vue'
 36 | import emitter from '../emit'
 37 | import { store } from '../constant'
 38 | 
 39 | /**
 40 |  * @Author: 王林25
 41 |  * @Date: 2022-12-15 09:33:21
 42 |  * @Desc: 普通节点
 43 |  */
 44 | export default {
 45 |   name: 'SFCNormalNode',
 46 |   components: {
 47 |     [ArrowLine.name]: ArrowLine,
 48 |     [AddNode.name]: AddNode
 49 |   },
 50 |   props: {
 51 |     nodeList: {
 52 |       type: [Array, null],
 53 |       default() {
 54 |         return null
 55 |       }
 56 |     },
 57 |     childrenList: {
 58 |       type: [Array, null],
 59 |       default() {
 60 |         return null
 61 |       }
 62 |     },
 63 |     data: {
 64 |       type: Object,
 65 |       default: null
 66 |     },
 67 |     belongConditionNodeData: {
 68 |       type: Object,
 69 |       default: null
 70 |     },
 71 |     isMouseEnter: {
 72 |       type: Boolean,
 73 |       default: false
 74 |     }
 75 |   },
 76 |   data() {
 77 |     return {
 78 |       readonly: store.readonly,
 79 |       vertical: store.vertical,
 80 |       showDeleteBtn: false
 81 |     }
 82 |   },
 83 |   methods: {
 84 |     onContentMouseenter() {
 85 |       this.showDeleteBtn = true
 86 |     },
 87 | 
 88 |     onContentMouseleave() {
 89 |       this.showDeleteBtn = false
 90 |     },
 91 | 
 92 |     onContentClick() {
 93 |       emitter.emit('node-content-click', this.data, this.nodeList)
 94 |     },
 95 | 
 96 |     onDeleteNode() {
 97 |       emitter.emit(
 98 |         'delete-node-click',
 99 |         this.nodeList,
100 |         this.childrenList,
101 |         this.belongConditionNodeData,
102 |         this.data
103 |       )
104 |     }
105 |   }
106 | }
107 | </script>
108 | 
109 | <style lang="less" scoped>
110 | .sfcNormalNodeContainer {
111 |   position: relative;
112 |   display: flex;
113 |   flex-shrink: 0;
114 |   align-items: center;
115 | 
116 |   &.vertical {
117 |     flex-direction: column;
118 | 
119 |     .sfcNormalNodeWrap {
120 |       flex-direction: column;
121 |     }
122 |   }
123 | 
124 |   .sfcNormalNodeWrap {
125 |     position: relative;
126 |     display: flex;
127 |     align-items: center;
128 | 
129 |     .sfcNormalNodeContentWrap {
130 |       position: relative;
131 |     }
132 |   }
133 | }
134 | </style>
135 | 


--------------------------------------------------------------------------------
/simple-flow-chart/src/components/StartNode.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="sfcStartNodeContainer" :class="{ vertical: vertical }">
 3 |     <div class="sfcStartNodeContent">{{ data.title }}</div>
 4 |     <SFCArrowLine></SFCArrowLine>
 5 |     <SFCAddNode
 6 |       :nodeList="nodeList"
 7 |       :nodeData="data"
 8 |       :btnType="isMouseEnter ? 'dot' : ''"
 9 |     ></SFCAddNode>
10 |   </div>
11 | </template>
12 | 
13 | <script>
14 | import ArrowLine from './ArrowLine.vue'
15 | import AddNode from './AddNode.vue'
16 | import { store } from '../constant'
17 | 
18 | export default {
19 |   name: 'SFCStartNode',
20 |   components: {
21 |     [ArrowLine.name]: ArrowLine,
22 |     [AddNode.name]: AddNode
23 |   },
24 |   props: {
25 |     nodeList: {
26 |       type: [Array, null],
27 |       default() {
28 |         return null
29 |       }
30 |     },
31 |     data: {
32 |       type: Object,
33 |       default: null
34 |     },
35 |     isMouseEnter: {
36 |       type: Boolean,
37 |       default: false
38 |     }
39 |   },
40 |   data() {
41 |     return {
42 |       vertical: store.vertical
43 |     }
44 |   }
45 | }
46 | </script>
47 | 
48 | <style lang="less" scoped>
49 | .sfcStartNodeContainer {
50 |   display: flex;
51 |   align-items: center;
52 | 
53 |   &.vertical {
54 |     flex-direction: column;
55 |   }
56 | 
57 |   .sfcStartNodeContent {
58 |     width: 90px;
59 |     height: 40px;
60 |     border-radius: 30px;
61 |     box-shadow: 0 1px 5px 0 rgba(10, 30, 65, 0.08);
62 |     color: #fff;
63 |     line-height: 40px;
64 |     text-align: center;
65 |     background: #2c2c2c;
66 |   }
67 | }
68 | </style>
69 | 


--------------------------------------------------------------------------------
/simple-flow-chart/src/constant.js:
--------------------------------------------------------------------------------
 1 | export const store = {}
 2 | 
 3 | export const defaultNodeList = [
 4 |   { id: 'startEvent', type: 'start', title: '开始' },
 5 |   { id: 'endEvent', type: 'end', title: '结束' }
 6 | ]
 7 | 
 8 | export const defaultNodeTypeList = [
 9 |   {
10 |     name: '普通节点',
11 |     list: [
12 |       {
13 |         type: 'normal',
14 |         name: '普通节点'
15 |       }
16 |     ]
17 |   },
18 |   {
19 |     name: '分支节点',
20 |     list: [
21 |       {
22 |         type: 'condition',
23 |         name: '条件分支'
24 |       }
25 |     ]
26 |   }
27 | ]
28 | 


--------------------------------------------------------------------------------
/simple-flow-chart/src/emit.js:
--------------------------------------------------------------------------------
1 | import Emitter from 'tiny-emitter'
2 | 
3 | export default new Emitter()
4 | 


--------------------------------------------------------------------------------
/simple-flow-chart/src/index.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div
  3 |     class="sfcContainer"
  4 |     ref="sfcContainer"
  5 |     :style="{ background: background }"
  6 |     :class="{ showScrollBar: showScrollBar }"
  7 |     @mousedown="onMousedown"
  8 |   >
  9 |     <SFCActionBar :scale.sync="scale" v-if="showScaleBar"></SFCActionBar>
 10 |     <div
 11 |       ref="sfcContent"
 12 |       class="sfcContent"
 13 |       :class="{ vertical: vertical, transformOriginCenter: scale <= 100 }"
 14 |       :style="{ transform: `scale(${scale / 100})` }"
 15 |     >
 16 |       <SFCNode
 17 |         v-for="node in data"
 18 |         :key="node.id"
 19 |         :nodeList="data"
 20 |         :data="node"
 21 |       ></SFCNode>
 22 |     </div>
 23 |     <div v-if="showHideDiv"></div>
 24 |   </div>
 25 | </template>
 26 | 
 27 | <script>
 28 | import emitter from './emit'
 29 | import { generateNode } from './utils'
 30 | import { store, defaultNodeList } from './constant'
 31 | import ActionBar from './components/ActionBar.vue'
 32 | 
 33 | export default {
 34 |   name: 'SimpleFlowChart',
 35 |   components: {
 36 |     [ActionBar.name]: ActionBar
 37 |   },
 38 |   model: {
 39 |     prop: 'data',
 40 |     event: 'change'
 41 |   },
 42 |   props: {
 43 |     data: {
 44 |       type: Array,
 45 |       default() {
 46 |         return []
 47 |       }
 48 |     },
 49 |     customCreateNode: {
 50 |       type: Function
 51 |     },
 52 |     customCreateConditionBranchNode: {
 53 |       type: Function
 54 |     },
 55 |     beforeDeleteNode: {
 56 |       type: Function
 57 |     },
 58 |     background: {
 59 |       type: String,
 60 |       default: 'rgba(0, 0, 0, 0.03)'
 61 |     },
 62 |     readonly: {
 63 |       type: Boolean,
 64 |       default: false
 65 |     },
 66 |     nodeTypeList: {
 67 |       type: Array
 68 |     },
 69 |     vertical: {
 70 |       type: Boolean,
 71 |       default: false
 72 |     },
 73 |     showScaleBar: {
 74 |       type: Boolean,
 75 |       default: true
 76 |     },
 77 |     customCreateNodeId: {
 78 |       type: Function
 79 |     },
 80 |     enableDrag: {
 81 |       type: Boolean,
 82 |       default: true
 83 |     },
 84 |     initFit: {
 85 |       type: Boolean,
 86 |       default: false
 87 |     },
 88 |     showScrollBar: {
 89 |       type: Boolean,
 90 |       default: true
 91 |     }
 92 |   },
 93 |   data() {
 94 |     return {
 95 |       scale: 100,
 96 |       showHideDiv: false,
 97 |       isMousedown: false,
 98 |       mousedownPos: {
 99 |         x: 0,
100 |         y: 0
101 |       },
102 |       mousedownScrollPos: {
103 |         x: 0,
104 |         y: 0
105 |       }
106 |     }
107 |   },
108 |   watch: {
109 |     scale() {
110 |       this.showHideDiv = !this.showHideDiv
111 |     }
112 |   },
113 |   created() {
114 |     store.readonly = this.readonly
115 |     store.nodeTypeList = this.nodeTypeList
116 |     store.vertical = this.vertical
117 |     store.customCreateNodeId = this.customCreateNodeId
118 |     if (this.data.length <= 0) {
119 |       this.data.push(...defaultNodeList)
120 |     }
121 |     emitter.on('add-node-type-click', this.onAddNodeTypeClick)
122 |     emitter.on('delete-node-click', this.onNodeDeleteClick)
123 |     emitter.on('add-condition-branch-click', this.onAddConditionBranchClick)
124 |     emitter.on('node-content-click', this.onNodeContentClick)
125 |     window.addEventListener('mousemove', this.onMousemove)
126 |     window.addEventListener('mouseup', this.onMouseup)
127 |   },
128 |   mounted() {
129 |     if (this.initFit) {
130 |       this.fit()
131 |     }
132 |   },
133 |   beforeDestroy() {
134 |     emitter.off('add-node-type-click', this.onAddNodeTypeClick)
135 |     emitter.off('delete-node-click', this.onNodeDeleteClick)
136 |     emitter.off('add-condition-branch-click', this.onAddConditionBranchClick)
137 |     emitter.off('node-content-click', this.onNodeContentClick)
138 |     window.removeEventListener('mousemove', this.onMousemove)
139 |     window.removeEventListener('mouseup', this.onMouseup)
140 |   },
141 |   methods: {
142 |     // 缩放至全部显示
143 |     fit() {
144 |       this.scale = 100
145 |       this.$nextTick(() => {
146 |         const containerSize = this.$refs.sfcContainer.getBoundingClientRect()
147 |         const containerRatio = containerSize.width / containerSize.height
148 |         const contentSize = this.$refs.sfcContent.getBoundingClientRect()
149 |         const contentRatio = contentSize.width / contentSize.height
150 |         let w, h
151 |         if (containerRatio > contentRatio) {
152 |           // 以容器的高为准
153 |           h = containerSize.height
154 |           w = contentRatio * h
155 |         } else {
156 |           // 以容器的宽为准
157 |           w = containerSize.width
158 |           h = w / contentRatio
159 |         }
160 |         this.scale = (w / contentSize.width) * 100
161 |         console.log(contentSize.width, containerSize.width)
162 |         const x = (contentSize.width - containerSize.width) / 2
163 |         const y = (contentSize.height - containerSize.height) / 2
164 |         this.$refs.sfcContainer.scrollTo(x, y)
165 |       })
166 |     },
167 | 
168 |     onAddNodeTypeClick(nodeList, nodeData, type) {
169 |       let newNode = null
170 |       if (this.customCreateNode) {
171 |         newNode = this.customCreateNode(nodeList, nodeData, type)
172 |       }
173 |       if (!newNode) {
174 |         newNode = generateNode(type.type)
175 |       }
176 |       this.addNode(nodeList, nodeData, newNode)
177 |       this.$emit('add-node', newNode)
178 |     },
179 | 
180 |     addNode(nodeList, nodeData, newNode) {
181 |       if (nodeList) {
182 |         let index = this.findNodeIndex(nodeList, nodeData)
183 |         nodeList.splice(index + 1, 0, newNode)
184 |       } else {
185 |         nodeData.nodeList.unshift(newNode)
186 |       }
187 |     },
188 | 
189 |     onNodeDeleteClick(...args) {
190 |       if (this.beforeDeleteNode) {
191 |         this.beforeDeleteNode(...args).then(() => {
192 |           this.deleteNode(...args)
193 |         })
194 |       } else {
195 |         this.deleteNode(...args)
196 |         this.$emit('delete-node', args[3])
197 |       }
198 |     },
199 | 
200 |     deleteNode(nodeList, childrenList, belongConditionNodeData, nodeData) {
201 |       if (nodeList) {
202 |         let index = this.findNodeIndex(nodeList, nodeData)
203 |         nodeList.splice(index, 1)
204 |       } else if (childrenList) {
205 |         let index = this.findNodeIndex(childrenList, nodeData)
206 |         childrenList.splice(index, 1)
207 |         if (childrenList.length <= 1) {
208 |           this.removeNodeFromData(belongConditionNodeData)
209 |         }
210 |       }
211 |     },
212 | 
213 |     onAddConditionBranchClick(nodeData) {
214 |       let newNode = null
215 |       if (this.customCreateConditionBranchNode) {
216 |         newNode = this.customCreateConditionBranchNode(nodeData)
217 |       }
218 |       if (!newNode) {
219 |         newNode = generateNode('normal', '条件', '条件内容')
220 |       }
221 |       nodeData.children.push(newNode)
222 |       this.$emit('add-condition-branch', newNode)
223 |     },
224 | 
225 |     onNodeContentClick(...args) {
226 |       this.$emit('node-content-click', ...args)
227 |     },
228 | 
229 |     findNodeIndex(list, node) {
230 |       return list.findIndex(item => {
231 |         return item === node
232 |       })
233 |     },
234 | 
235 |     removeNodeFromData(nodeData) {
236 |       let walk = arr => {
237 |         for (let i = 0; i < arr.length; i++) {
238 |           let node = arr[i]
239 |           if (node === nodeData) {
240 |             arr.splice(i, 1)
241 |             return true
242 |           }
243 |           let res = false
244 |           if (node.children && node.children.length > 0) {
245 |             res = walk(node.children)
246 |           }
247 |           if (!res && node.nodeList && node.nodeList.length > 0) {
248 |             res = walk(node.nodeList)
249 |           }
250 |           if (res) {
251 |             break
252 |           }
253 |         }
254 |       }
255 |       walk(this.data)
256 |     },
257 | 
258 |     onMousedown(e) {
259 |       this.isMousedown = true
260 |       this.mousedownPos.x = e.clientX
261 |       this.mousedownPos.y = e.clientY
262 |       this.mousedownScrollPos.x = this.$refs.sfcContainer.scrollLeft
263 |       this.mousedownScrollPos.y = this.$refs.sfcContainer.scrollTop
264 |     },
265 | 
266 |     onMousemove(e) {
267 |       if (!this.isMousedown || !this.$refs.sfcContainer || !this.enableDrag)
268 |         return
269 |       e.preventDefault()
270 |       let nx = this.mousedownScrollPos.x - (e.clientX - this.mousedownPos.x)
271 |       let ny = this.mousedownScrollPos.y - (e.clientY - this.mousedownPos.y)
272 |       this.$refs.sfcContainer.scrollTo(nx, ny)
273 |     },
274 | 
275 |     onMouseup() {
276 |       this.isMousedown = false
277 |     }
278 |   }
279 | }
280 | </script>
281 | 
282 | <style lang="less" scoped>
283 | .sfcContainer {
284 |   width: 100%;
285 |   height: 100%;
286 |   overflow: hidden;
287 |   box-sizing: border-box;
288 | 
289 |   &.showScrollBar {
290 |     overflow: auto;
291 |   }
292 | 
293 |   /deep/ * {
294 |     box-sizing: border-box;
295 |     margin: 0;
296 |     padding: 0;
297 |   }
298 | 
299 |   .sfcContent {
300 |     display: flex;
301 |     align-items: center;
302 |     padding: 20px;
303 |     min-width: 100%;
304 |     min-height: 100%;
305 |     width: max-content;
306 |     height: max-content;
307 |     transform-origin: left top;
308 | 
309 |     &.transformOriginCenter {
310 |       transform-origin: center center;
311 |     }
312 | 
313 |     &.vertical {
314 |       flex-direction: column;
315 |       justify-content: center;
316 |     }
317 |   }
318 | }
319 | </style>
320 | 


--------------------------------------------------------------------------------
/simple-flow-chart/src/utils.js:
--------------------------------------------------------------------------------
 1 | import { v4 as uuidv4 } from 'uuid'
 2 | import { store } from './constant';
 3 | 
 4 | export const generateNode = (
 5 |   type,
 6 |   title = '普通节点',
 7 |   content = '节点内容'
 8 | ) => {
 9 |   const createUid = store.customCreateNodeId || uuidv4
10 |   switch (type) {
11 |     case 'normal':
12 |       return {
13 |         id: createUid(),
14 |         type: 'normal',
15 |         title,
16 |         content,
17 |         configData: {},
18 |         nodeList: []
19 |       }
20 |     case 'condition':
21 |       return {
22 |         id: createUid(),
23 |         type: 'condition',
24 |         title: '条件分支',
25 |         children: [
26 |           {
27 |             id: createUid(),
28 |             title: '条件1',
29 |             content: '条件1的内容',
30 |             type: 'normal',
31 |             configData: {},
32 |             nodeList: []
33 |           },
34 |           {
35 |             id: createUid(),
36 |             type: 'normal',
37 |             title: '条件2',
38 |             content: '条件2的内容',
39 |             configData: {},
40 |             nodeList: []
41 |           }
42 |         ]
43 |       }
44 |     default:
45 |       break
46 |   }
47 | }
48 | 


--------------------------------------------------------------------------------