├── .eslintignore
├── .eslintrc.js
├── .gitignore
├── .npmignore
├── README.md
├── babel.config.js
├── examples
    ├── App.vue
    ├── main.js
    └── model
    │   └── flow.json
├── lib
    ├── BaseFlow.common.js
    ├── BaseFlow.common.js.map
    ├── BaseFlow.css
    ├── BaseFlow.umd.js
    ├── BaseFlow.umd.js.map
    ├── BaseFlow.umd.min.js
    ├── BaseFlow.umd.min.js.map
    ├── demo.html
    ├── fonts
    │   ├── font.9479e0b5.ttf
    │   ├── font_IE6.3d2483c7.eot
    │   └── font_IE9.3d2483c7.eot
    └── img
    │   └── font.f668b28b.svg
├── package.json
├── packages
    ├── assets
    │   ├── icon
    │   │   ├── font.css
    │   │   ├── font.svg
    │   │   ├── font.ttf
    │   │   ├── font_IE6.eot
    │   │   └── font_IE9.eot
    │   ├── logo.png
    │   └── nodes
    │   │   ├── 分叉节点.svg
    │   │   ├── 常规节点.svg
    │   │   ├── 模型节点.svg
    │   │   └── 起止节点.svg
    ├── index.js
    └── vue-g6-editor
    │   ├── index.js
    │   └── src
    │       └── BaseFlow.vue
├── public
    ├── favicon.ico
    └── index.html
├── vue.config.js
└── yarn.lock


/.eslintignore:
--------------------------------------------------------------------------------
1 | /public/
2 | /dist/
3 | /*.js


--------------------------------------------------------------------------------
/.eslintrc.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   root: true,
 3 |   env: {
 4 |     node: true
 5 |   },
 6 |   extends: ['plugin:vue/essential', '@vue/airbnb'],
 7 |   rules: {
 8 |     'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
 9 |     'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
10 |     // 在这里自定义修改
11 |     'linebreak-style': 0,
12 |     semi: [2, 'never'], // 不加分号
13 |     'no-unused-expressions': [2, { allowShortCircuit: true, allowTernary: true }], // 允许三元
14 |     'no-plusplus': 0, // 开启i++
15 |     'comma-dangle': [2, 'never'], // 结尾不使用逗号
16 |     'import/no-unresolved': [2, { ignore: ['esri', 'dojo'] }], // 解决import esri/xxx编译不通过
17 |     'import/extensions': 0,
18 |     // 'no-console': 0,
19 |     'arrow-parens': [2, 'as-needed'], // 箭头函数参数只有一个时无需加括号
20 |     'no-param-reassign': [2, { props: false }],
21 |     'vue/no-parsing-error': [2, { 'x-invalid-end-tag': false }]
22 |   },
23 |   parserOptions: {
24 |     parser: 'babel-eslint'
25 |   }
26 | }


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


--------------------------------------------------------------------------------
/.npmignore:
--------------------------------------------------------------------------------
 1 | # 忽略目录
 2 | examples/
 3 | packages/
 4 | public/
 5 | node_modules/
 6 | 
 7 | # 忽略指定文件
 8 | vue.config.js
 9 | babel.config.js
10 | *.map
11 | .eslintignore
12 | .eslintrc.js
13 | yarn-error.log
14 | yarn.lock


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # vue-g6-editor
 2 | 
 3 | 一个基于vue & antv/g6-editor封装的基础流程图插件
 4 | 
 5 | ## 写在前言
 6 | 
 7 | 仅供学习，切勿商用。阿里经已放弃维护原版编辑器，鄙人也不会维护此插件，参考https://github.com/antvis/g6-editor，谢谢。
 8 | 
 9 | ## install
10 | ```
11 | npm install --save vue-g6-editor 
12 | ```
13 | 
14 | ## use
15 | ```
16 | import BaseFlow from 'vue-g6-editor'
17 | import 'vue-g6-editor/lib/BaseFlow.css'
18 | 
19 | <BaseFlow :data=data :getData=getData />
20 | 
21 | properties:
22 |   data: 传入数据，数据格式参考：https://www.yuque.com/antv/g6-editor/flow-api#tg9kpf
23 |         或者参考example/model文件夹下的flow.json
24 | 
25 | methods:
26 |   getData: 获取数据接口，传入callback，如：
27 |   getData(data) {
28 |     console.log(data)
29 |     ...
30 |   }
31 | ```
32 | 
33 | # online preview
34 | 
35 | http://www.coderlyc.xyz/vue-g6-editor/
36 | 


--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   presets: ["@vue/app"]
3 | };
4 | 


--------------------------------------------------------------------------------
/examples/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div id="container">
 3 |     <BaseFlow :data="data" :getData="save" />
 4 |   </div>
 5 | </template>
 6 | 
 7 | <script>
 8 | import FlowData from './model/flow'
 9 | 
10 | export default {
11 |   name: 'app',
12 |   data() {
13 |     return {
14 |       data: FlowData
15 |     }
16 |   },
17 |   components: {
18 |   },
19 |   methods: {
20 |     save() {}
21 |   }
22 | }
23 | </script>
24 | 
25 | <style lang="scss">
26 | #container {
27 |   font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB",
28 |     "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
29 |   -webkit-font-smoothing: antialiased;
30 |   -moz-osx-font-smoothing: grayscale;
31 |   color: #2c3e50;
32 |   height: 100%;
33 | }
34 | * {
35 |   box-sizing: border-box;
36 |   margin: 0px;
37 | }
38 | </style>
39 | 


--------------------------------------------------------------------------------
/examples/main.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import ElementUI from 'element-ui'
 3 | import 'element-ui/lib/theme-chalk/index.css'
 4 | import BaseFlow from 'vue-g6-editor'
 5 | import App from './App.vue'
 6 | 
 7 | import 'vue-g6-editor/lib/BaseFlow.css'
 8 | 
 9 | Vue.config.productionTip = false
10 | Vue.use(ElementUI)
11 | Vue.use(BaseFlow)
12 | 
13 | new Vue({
14 |   render: h => h(App)
15 | }).$mount('#app')
16 | 


--------------------------------------------------------------------------------
/examples/model/flow.json:
--------------------------------------------------------------------------------
  1 | {
  2 |   "nodes": [
  3 |     {
  4 |       "id": "node1",
  5 |       "x": 50,
  6 |       "y": 100,
  7 |       "color": "#1890FF",
  8 |       "size": "80*48",
  9 |       "shape": "rect",
 10 |       "label": "文本标签1",
 11 |       "parent": "group1",
 12 |       "index": 1
 13 |     },
 14 |     {
 15 |       "id": "node2",
 16 |       "x": 50,
 17 |       "y": 200,
 18 |       "color": "#1890FF",
 19 |       "size": "80*48",
 20 |       "shape": "rect",
 21 |       "label": "文本标签2",
 22 |       "parent": "group1",
 23 |       "index": 1
 24 |     },
 25 |     {
 26 |       "id": "node3",
 27 |       "x": 50,
 28 |       "y": 300,
 29 |       "color": "#1890FF",
 30 |       "size": "80*48",
 31 |       "shape": "rect",
 32 |       "label": "文本标签3",
 33 |       "parent": "group1",
 34 |       "index": 1
 35 |     },
 36 |     {
 37 |       "id": "node4",
 38 |       "x": 200,
 39 |       "y": 150,
 40 |       "color": "#1890FF",
 41 |       "size": "80*48",
 42 |       "shape": "rect",
 43 |       "label": "文本标签4",
 44 |       "parent": "group1",
 45 |       "index": 1
 46 |     },
 47 |     {
 48 |       "id": "node5",
 49 |       "x": 200,
 50 |       "y": 250,
 51 |       "color": "#1890FF",
 52 |       "size": "80*48",
 53 |       "shape": "rect",
 54 |       "label": "文本标签5",
 55 |       "parent": "group1",
 56 |       "index": 1
 57 |     },
 58 |     {
 59 |       "id": "node6",
 60 |       "x": 350,
 61 |       "y": 150,
 62 |       "color": "#1890FF",
 63 |       "size": "80*48",
 64 |       "shape": "rect",
 65 |       "label": "文本标签6",
 66 |       "parent": "group1",
 67 |       "index": 1
 68 |     },
 69 |     {
 70 |       "id": "node7",
 71 |       "x": 350,
 72 |       "y": 250,
 73 |       "color": "#1890FF",
 74 |       "size": "80*48",
 75 |       "shape": "rect",
 76 |       "label": "文本标签7",
 77 |       "parent": "group1",
 78 |       "index": 1
 79 |     },
 80 |     {
 81 |       "id": "node8",
 82 |       "x": 500,
 83 |       "y": 50,
 84 |       "color": "#1890FF",
 85 |       "size": "80*48",
 86 |       "shape": "rect",
 87 |       "label": "文本标签8",
 88 |       "parent": "group1",
 89 |       "index": 1
 90 |     },
 91 |     {
 92 |       "id": "node9",
 93 |       "x": 500,
 94 |       "y": 150,
 95 |       "color": "#1890FF",
 96 |       "size": "80*48",
 97 |       "shape": "rect",
 98 |       "label": "文本标签9",
 99 |       "parent": "group1",
100 |       "index": 1
101 |     },
102 |     {
103 |       "id": "node10",
104 |       "x": 500,
105 |       "y": 250,
106 |       "color": "#1890FF",
107 |       "size": "80*48",
108 |       "shape": "rect",
109 |       "label": "文本标签10",
110 |       "parent": "group1",
111 |       "index": 1
112 |     },
113 |     {
114 |       "id": "node11",
115 |       "x": 500,
116 |       "y": 350,
117 |       "color": "#1890FF",
118 |       "size": "80*48",
119 |       "shape": "rect",
120 |       "label": "文本标签11",
121 |       "parent": "group1",
122 |       "index": 1
123 |     }
124 |   ],
125 |   "edges": [
126 |     {
127 |       "id": "edge1",
128 |       "source": "node1",
129 |       "target": "node4",
130 |       "controlPoints": [
131 |         {
132 |           "x": 10,
133 |           "y": 10
134 |         }
135 |       ],
136 |       "sourceAnchor": 1,
137 |       "targetAnchor": 3,
138 |       "shape": "flow-polyline-round",
139 |       "style": {
140 |         "stroke": "#79838e"
141 |       },
142 |       "labelRectStyle": {
143 |         "fill": "#515759"
144 |       },
145 |       "parent": "group1",
146 |       "index": 1
147 |     },
148 |     {
149 |       "id": "edge2",
150 |       "source": "node2",
151 |       "target": "node4",
152 |       "controlPoints": [
153 |         {
154 |           "x": 10,
155 |           "y": 10
156 |         }
157 |       ],
158 |       "sourceAnchor": 1,
159 |       "targetAnchor": 3,
160 |       "shape": "flow-polyline-round",
161 |       "style": {
162 |         "stroke": "#79838e"
163 |       },
164 |       "labelRectStyle": {
165 |         "fill": "#515759"
166 |       },
167 |       "parent": "group1",
168 |       "index": 1
169 |     },
170 |     {
171 |       "id": "edge3",
172 |       "source": "node2",
173 |       "target": "node5",
174 |       "controlPoints": [
175 |         {
176 |           "x": 10,
177 |           "y": 10
178 |         }
179 |       ],
180 |       "sourceAnchor": 1,
181 |       "targetAnchor": 3,
182 |       "shape": "flow-polyline-round",
183 |       "style": {
184 |         "stroke": "#79838e"
185 |       },
186 |       "labelRectStyle": {
187 |         "fill": "#515759"
188 |       },
189 |       "parent": "group1",
190 |       "index": 1
191 |     },
192 |     {
193 |       "id": "edge4",
194 |       "source": "node3",
195 |       "target": "node5",
196 |       "controlPoints": [
197 |         {
198 |           "x": 10,
199 |           "y": 10
200 |         }
201 |       ],
202 |       "sourceAnchor": 1,
203 |       "targetAnchor": 3,
204 |       "shape": "flow-polyline-round",
205 |       "style": {
206 |         "stroke": "#79838e"
207 |       },
208 |       "labelRectStyle": {
209 |         "fill": "#515759"
210 |       },
211 |       "parent": "group1",
212 |       "index": 1
213 |     },
214 |     {
215 |       "id": "edge5",
216 |       "source": "node4",
217 |       "target": "node6",
218 |       "controlPoints": [
219 |         {
220 |           "x": 10,
221 |           "y": 10
222 |         }
223 |       ],
224 |       "sourceAnchor": 1,
225 |       "targetAnchor": 3,
226 |       "shape": "flow-polyline-round",
227 |       "style": {
228 |         "stroke": "#79838e"
229 |       },
230 |       "labelRectStyle": {
231 |         "fill": "#515759"
232 |       },
233 |       "parent": "group1",
234 |       "index": 1
235 |     },
236 |     {
237 |       "id": "edge6",
238 |       "source": "node5",
239 |       "target": "node7",
240 |       "controlPoints": [
241 |         {
242 |           "x": 10,
243 |           "y": 10
244 |         }
245 |       ],
246 |       "sourceAnchor": 1,
247 |       "targetAnchor": 3,
248 |       "shape": "flow-polyline-round",
249 |       "style": {
250 |         "stroke": "#79838e"
251 |       },
252 |       "labelRectStyle": {
253 |         "fill": "#515759"
254 |       },
255 |       "parent": "group1",
256 |       "index": 1
257 |     },
258 |     {
259 |       "id": "edge7",
260 |       "source": "node6",
261 |       "target": "node9",
262 |       "controlPoints": [
263 |         {
264 |           "x": 10,
265 |           "y": 10
266 |         }
267 |       ],
268 |       "sourceAnchor": 1,
269 |       "targetAnchor": 3,
270 |       "shape": "flow-polyline-round",
271 |       "style": {
272 |         "stroke": "#79838e"
273 |       },
274 |       "labelRectStyle": {
275 |         "fill": "#515759"
276 |       },
277 |       "parent": "group1",
278 |       "index": 1
279 |     },
280 |     {
281 |       "id": "edge8",
282 |       "source": "node7",
283 |       "target": "node10",
284 |       "controlPoints": [
285 |         {
286 |           "x": 10,
287 |           "y": 10
288 |         }
289 |       ],
290 |       "sourceAnchor": 1,
291 |       "targetAnchor": 3,
292 |       "shape": "flow-polyline-round",
293 |       "style": {
294 |         "stroke": "#79838e"
295 |       },
296 |       "labelRectStyle": {
297 |         "fill": "#515759"
298 |       },
299 |       "parent": "group1",
300 |       "index": 1
301 |     },
302 |     {
303 |       "id": "edge9",
304 |       "source": "node8",
305 |       "target": "node9",
306 |       "controlPoints": [
307 |         {
308 |           "x": 10,
309 |           "y": 10
310 |         }
311 |       ],
312 |       "sourceAnchor": 2,
313 |       "targetAnchor": 0,
314 |       "shape": "flow-polyline-round",
315 |       "style": {
316 |         "stroke": "#79838e"
317 |       },
318 |       "labelRectStyle": {
319 |         "fill": "#515759"
320 |       },
321 |       "parent": "group1",
322 |       "index": 1
323 |     },
324 |     {
325 |       "id": "edge10",
326 |       "source": "node9",
327 |       "target": "node10",
328 |       "controlPoints": [
329 |         {
330 |           "x": 10,
331 |           "y": 10
332 |         }
333 |       ],
334 |       "sourceAnchor": 2,
335 |       "targetAnchor": 0,
336 |       "shape": "flow-polyline-round",
337 |       "style": {
338 |         "stroke": "#79838e"
339 |       },
340 |       "labelRectStyle": {
341 |         "fill": "#515759"
342 |       },
343 |       "parent": "group1",
344 |       "index": 1
345 |     },
346 |     {
347 |       "id": "edge11",
348 |       "source": "node10",
349 |       "target": "node11",
350 |       "controlPoints": [
351 |         {
352 |           "x": 100,
353 |           "y": 100
354 |         }
355 |       ],
356 |       "sourceAnchor": 2,
357 |       "targetAnchor": 0,
358 |       "shape": "flow-polyline-round",
359 |       "style": {
360 |         "stroke": "#79838e"
361 |       },
362 |       "labelRectStyle": {
363 |         "fill": "#ffffff"
364 |       },
365 |       "label": {
366 |         "text": "边名称"
367 |       },
368 |       "parent": "group1",
369 |       "index": 1
370 |     }
371 |   ]
372 | }


--------------------------------------------------------------------------------
/lib/BaseFlow.css:
--------------------------------------------------------------------------------
1 | @font-face{font-family:iconfont;src:url(fonts/font_IE9.3d2483c7.eot);src:url(fonts/font_IE6.3d2483c7.eot) format("embedded-opentype"),url("data:application/x-font-woff;charset=utf-8;base64,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") format("woff"),url(fonts/font.9479e0b5.ttf) format("truetype"),url(img/font.f668b28b.svg) format("svg")}.iconfont{font-family:iconfont!important;font-size:16px;font-style:normal;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.icon-cut:before{content:"\e8a2"}.icon-actual-size-o:before{content:"\e8a3"}.icon-copy-o:before{content:"\e8a4"}.icon-delete-o:before{content:"\e8a5"}.icon-fit:before{content:"\e8a6"}.icon-select:before{content:"\e8a7"}.icon-paster-o:before{content:"\e8a8"}.icon-redo:before{content:"\e8a9"}.icon-to-front:before{content:"\e8aa"}.icon-undo:before{content:"\e8ab"}.icon-zoom-in-o:before{content:"\e8ac"}.icon-ungroup:before{content:"\e8ad"}.icon-zoom-out-o:before{content:"\e8ae"}.icon-group:before{content:"\e8af"}.icon-to-back:before{content:"\e8b0"}.editor[data-v-116254f6]{position:relative;width:100%;height:100%}.editor .top-container[data-v-116254f6]{position:absolute;padding:5px 20px;width:100%;border:1px solid #e9e9e9;height:42px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background:#fff;-webkit-box-shadow:0 8px 12px 0 rgba(0,52,107,.04);box-shadow:0 8px 12px 0 rgba(0,52,107,.04)}.editor .top-container .toolbar[data-v-116254f6]{height:100%;width:80%}.editor .top-container .toolbar .command[data-v-116254f6]{width:27px;height:27px;margin:0 6px;border-radius:2px;padding-left:4px;display:inline-block;border:1px solid rgba(2,2,2,0)}.editor .top-container .toolbar .disable[data-v-116254f6]{color:rgba(0,0,0,.25)}.editor .top-container .data-opt[data-v-116254f6]{width:20%;height:100%;text-align:right}.editor .bottom-container[data-v-116254f6]{padding-top:41px;width:100%;height:100%;display:-webkit-box;display:-ms-flexbox;display:flex;background:#f7f9fb;-ms-flex-pack:distribute;justify-content:space-around}.editor .bottom-container .title[data-v-116254f6]{display:-webkit-box;display:-ms-flexbox;display:flex;width:100%;-webkit-box-align:center;-ms-flex-align:center;align-items:center;height:34px;font-weight:600;font-size:16px;padding:0 20px;background:#cfd4d9}.editor .bottom-container .left-pannel[data-v-116254f6]{width:15%;min-width:300px;height:100%;padding:20px;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.editor .bottom-container .left-pannel .itempannel-container[data-v-116254f6]{width:199px;height:192px}.editor .bottom-container .left-pannel .itempannel-container img[data-v-116254f6]{width:92px;height:96px;padding:4px;margin-left:4px;border-radius:2px;border:1px solid transparent;vertical-align:middle;cursor:pointer}.editor .bottom-container .center-pannel[data-v-116254f6]{background:#fff;display:inline-block;width:70%;height:100%;border:1px solid #dedbe2}.editor .bottom-container .center-pannel .flow[data-v-116254f6]{width:100%;height:100%;overflow:hidden}.editor .bottom-container .center-pannel .contextmenu[data-v-116254f6]{margin:0;width:200px;background:#fff;-webkit-box-shadow:0 1px 4px rgba(0,0,0,.25);box-shadow:0 1px 4px rgba(0,0,0,.25);color:#000;font-size:12px;display:none}.editor .bottom-container .center-pannel .contextmenu .command[data-v-116254f6]{height:12px;padding:8px;-webkit-box-sizing:content-box;box-sizing:content-box}.editor .bottom-container .center-pannel .contextmenu .command[data-v-116254f6]:hover{cursor:pointer;background:#e6f7ff}.editor .bottom-container .center-pannel .contextmenu .disable[data-v-116254f6]{color:rgba(0,0,0,.25)}.editor .bottom-container .right-pannel[data-v-116254f6]{width:15%;min-width:300px;height:100%;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.editor .bottom-container .right-pannel .detail-pannel[data-v-116254f6]{width:100%;height:70%;background:#f7f9fb;border-left:1px solid #e6e9ed;font-size:13px}.editor .bottom-container .right-pannel .detail-pannel .pannel-title[data-v-116254f6]{height:32px;border-top:1px solid #dce3e8;border-bottom:1px solid #dce3e8;background:#ebeef2;color:#000;line-height:28px;padding-left:12px}.editor .bottom-container .right-pannel .detail-pannel .block-container[data-v-116254f6]{padding:16px 8px}.editor .bottom-container .right-pannel .detail-pannel .block-container .p[data-v-116254f6]{margin-bottom:12px}.editor .bottom-container .right-pannel .detail-pannel .block-container .p.name .el-input[data-v-116254f6]{width:60%;padding:0 10px}.editor .bottom-container .right-pannel .detail-pannel .block-container .p.size .el-input[data-v-116254f6]{width:30%;padding:0 10px}.editor .bottom-container .right-pannel .detail-pannel .block-container .p.color .el-color-picker[data-v-116254f6]{vertical-align:middle}.editor .bottom-container .right-pannel .navigator[data-v-116254f6]{width:100%;height:25%;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1}.editor .bottom-container .right-pannel .navigator .pannel-title[data-v-116254f6]{display:block;height:32px;border-top:1px solid #dce3e8;border-bottom:1px solid #dce3e8;background:#ebeef2;color:#000;line-height:28px;padding-left:12px}.editor .bottom-container .right-pannel .navigator .mini-map[data-v-116254f6]{width:100%;height:calc(100% - 34px)}.editor .bottom-container .right-pannel .zoom-slider[data-v-116254f6]{width:100%;height:5%;padding:5px 10px;background:#fff}


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


--------------------------------------------------------------------------------
/lib/fonts/font.9479e0b5.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/LLLeno/vue-g6-editor/95d628285544043cad4243895fbb29643e3f7971/lib/fonts/font.9479e0b5.ttf


--------------------------------------------------------------------------------
/lib/fonts/font_IE6.3d2483c7.eot:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/LLLeno/vue-g6-editor/95d628285544043cad4243895fbb29643e3f7971/lib/fonts/font_IE6.3d2483c7.eot


--------------------------------------------------------------------------------
/lib/fonts/font_IE9.3d2483c7.eot:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/LLLeno/vue-g6-editor/95d628285544043cad4243895fbb29643e3f7971/lib/fonts/font_IE9.3d2483c7.eot


--------------------------------------------------------------------------------
/lib/img/font.f668b28b.svg:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" standalone="no"?>
 2 | <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
 3 | <!--
 4 | 2013-9-30: Created.
 5 | -->
 6 | <svg>
 7 | <metadata>
 8 | Created by iconfont
 9 | </metadata>
10 | <defs>
11 | 
12 | <font id="iconfont" horiz-adv-x="1024" >
13 |   <font-face
14 |     font-family="iconfont"
15 |     font-weight="500"
16 |     font-stretch="normal"
17 |     units-per-em="1024"
18 |     ascent="896"
19 |     descent="-128"
20 |   />
21 |     <missing-glyph />
22 |     
23 |     <glyph glyph-name="x" unicode="x" horiz-adv-x="1001"
24 | d="M281 543q-27 -1 -53 -1h-83q-18 0 -36.5 -6t-32.5 -18.5t-23 -32t-9 -45.5v-76h912v41q0 16 -0.5 30t-0.5 18q0 13 -5 29t-17 29.5t-31.5 22.5t-49.5 9h-133v-97h-438v97zM955 310v-52q0 -23 0.5 -52t0.5 -58t-10.5 -47.5t-26 -30t-33 -16t-31.5 -4.5q-14 -1 -29.5 -0.5
25 | t-29.5 0.5h-32l-45 128h-439l-44 -128h-29h-34q-20 0 -45 1q-25 0 -41 9.5t-25.5 23t-13.5 29.5t-4 30v167h911zM163 247q-12 0 -21 -8.5t-9 -21.5t9 -21.5t21 -8.5q13 0 22 8.5t9 21.5t-9 21.5t-22 8.5zM316 123q-8 -26 -14 -48q-5 -19 -10.5 -37t-7.5 -25t-3 -15t1 -14.5
26 | t9.5 -10.5t21.5 -4h37h67h81h80h64h36q23 0 34 12t2 38q-5 13 -9.5 30.5t-9.5 34.5q-5 19 -11 39h-368zM336 498v228q0 11 2.5 23t10 21.5t20.5 15.5t34 6h188q31 0 51.5 -14.5t20.5 -52.5v-227h-327z" />
27 |     
28 | 
29 |     
30 |     <glyph glyph-name="cut" unicode="&#59554;" d="M864 659.2s0 6.4 0 0c51.2 96 0 172.8 0 172.8l-166.4-166.4-76.8-76.8-115.2-115.2-345.6 345.6s-44.8-70.4 0-160c25.6-51.2 147.2-172.8 256-281.6l-64-64c-83.2 44.8-160 25.6-224-38.4-76.8-76.8-76.8-198.4 0-275.2 76.8-76.8 198.4-76.8 275.2 0 57.6 57.6 70.4 134.4 44.8 204.8l70.4 70.4 70.4-70.4c-25.6-70.4-12.8-153.6 44.8-204.8 76.8-76.8 198.4-76.8 275.2 0 76.8 76.8 70.4 192-6.4 268.8-57.6 57.6-147.2 76.8-230.4 32l-64 64c76.8 76.8 153.6 160 204.8 217.6-6.4 6.4 44.8 64 51.2 76.8z m-524.8-601.6c-44.8-44.8-121.6-44.8-166.4 0-44.8 44.8-44.8 121.6 0 166.4 44.8 44.8 121.6 44.8 166.4 0 44.8-44.8 44.8-121.6 0-166.4z m134.4 352c19.2 19.2 51.2 19.2 70.4 0 19.2-19.2 19.2-51.2 0-70.4-19.2-19.2-51.2-19.2-70.4 0-19.2 19.2-19.2 51.2 0 70.4z m377.6-185.6c44.8-44.8 44.8-121.6 0-166.4-44.8-44.8-121.6-44.8-166.4 0-44.8 44.8-44.8 121.6 0 166.4 44.8 44.8 121.6 44.8 166.4 0z"  horiz-adv-x="1024" />
31 | 
32 |     
33 |     <glyph glyph-name="actual-size-o" unicode="&#59555;" d="M256 768h64v-768h-64v768z m512 0h64v-768h-64v768z m-256-192h64v-64h-64v64z m0-256h64v-64h-64v64z"  horiz-adv-x="1024" />
34 | 
35 |     
36 |     <glyph glyph-name="copy-o" unicode="&#59556;" d="M998.4-128h-518.4c-12.8 0-25.6 12.8-25.6 25.6v582.4c0 12.8 12.8 25.6 32 25.6h352l192-192v-422.4c-6.4-6.4-19.2-19.2-32-19.2z m-166.4 576v-128h128l-128 128z m128-192h-192v192h-256v-512h448v320z m-576-64h-256v576h256v-192h256v64l-192 192h-352c-19.2 0-32-12.8-32-25.6v-646.4c0-12.8 12.8-25.6 25.6-25.6h294.4v57.6z m64 576l128-128h-128v128z"  horiz-adv-x="1030" />
37 | 
38 |     
39 |     <glyph glyph-name="delete-o" unicode="&#59557;" d="M896 576v-576c0-38.4-19.2-64-57.6-64h-582.4c-38.4 0-64 25.6-64 64v576h-64c0 38.4 25.6 64 64 64h192v64c0 38.4 25.6 64 64 64h192c38.4 0 64-25.6 64-64v-64h185.6c38.4 0 64-25.6 64-64h-57.6z m-256 128h-198.4v-64h198.4v64z m192-128h-582.4v-576h582.4v576z m-384-384h-57.6v256h57.6v-256z m256 0h-64v256h64v-256z"  horiz-adv-x="1024" />
40 | 
41 |     
42 |     <glyph glyph-name="fit" unicode="&#59558;" d="M640 608v192c0 19.2 12.8 32 32 32s32-12.8 32-32v-160h160c19.2 0 32-12.8 32-32s-12.8-32-32-32h-192c-6.4 0-12.8 0-19.2 6.4h-6.4c0 12.8-6.4 19.2-6.4 25.6z m-352 224c-19.2 0-32-12.8-32-32v-160h-160c-19.2 0-32-12.8-32-32s12.8-32 32-32h192c6.4 0 12.8 0 19.2 6.4h6.4c6.4 6.4 6.4 12.8 6.4 19.2v192c0 25.6-12.8 38.4-32 38.4z m576-576h-192c-6.4 0-12.8 0-19.2-6.4h-6.4c-6.4-6.4-6.4-12.8-6.4-19.2v-192c0-19.2 12.8-32 32-32s32 12.8 32 32V192h160c19.2 0 32 12.8 32 32s-12.8 32-32 32z m-550.4-12.8c-6.4 6.4-6.4 6.4 0 0-12.8 6.4-19.2 12.8-25.6 12.8h-192c-19.2 0-32-12.8-32-32s12.8-32 32-32h160v-160c0-19.2 12.8-32 32-32s32 12.8 32 32v192c0 6.4-6.4 12.8-6.4 19.2z m166.4 300.8c-70.4 0-128-57.6-128-128s57.6-128 128-128 128 57.6 128 128-57.6 128-128 128z"  horiz-adv-x="1024" />
43 | 
44 |     
45 |     <glyph glyph-name="select" unicode="&#59559;" d="M64 704h64v-64h-64v64z m0-128h64v-64h-64v64z m0-128h64v-64h-64v64z m0-128h64v-64h-64v64z m0-128h64v-64h-64v64z m0 576v64h64v-64h-64z m128 0v64h64v-64h-64z m128 0v64h64v-64h-64z m128 0v64h64v-64h-64z m128 0v64h64v-64h-64z m128 0v64h64v-64h-64z m128 64h64v-64h-64v64z m0-128h64v-64h-64v64z m0-128h64v-64h-64v64z m0-128h64v-64h-64v64z m0-128h64v-64h-64v64z m-768-320v64h64v-64h-64z m128 0v64h64v-64h-64z m128 0v64h64v-64h-64z m128 0v64h64v-64h-64z m384 64v128h64v-128h128v-64h-128v-128h-64v128h-128v64h128z m-256-64v64h64v-64h-64z m-128 576v-64h256v64h-256z m0 64h256c38.4 0 64-25.6 64-64v-64c0-38.4-25.6-64-64-64h-256c-38.4 0-64 25.6-64 64v64c0 38.4 25.6 64 64 64z m-192-320v-64h256v64h-256z m0 64h256c38.4 0 64-25.6 64-64v-64c0-38.4-25.6-64-64-64h-256c-38.4 0-64 25.6-64 64v64c0 38.4 25.6 64 64 64z"  horiz-adv-x="1024" />
46 | 
47 |     
48 |     <glyph glyph-name="paster-o" unicode="&#59560;" d="M774.4 646.4h-70.4v57.6h102.4c12.8 0 25.6-12.8 25.6-25.6v-96h-57.6v64z m-518.4-652.8h-70.4v652.8h70.4v57.6h-102.4c-12.8 0-25.6-12.8-25.6-25.6v-710.4c0-12.8 12.8-25.6 25.6-25.6h96l6.4 51.2z m384 582.4h-320v128h64v70.4c0 32 25.6 57.6 57.6 57.6h70.4c32 0 57.6-25.6 57.6-57.6v-70.4h70.4v-128z m-128 198.4h-70.4v-70.4h70.4v70.4z m377.6-876.8V320l-185.6 192h-352c-19.2 0-32-12.8-32-25.6v-582.4c0-12.8 12.8-25.6 25.6-25.6h512c19.2-6.4 32 6.4 32 19.2z m-64 409.6h-128V448l128-140.8z m6.4-384h-454.4V448h262.4v-198.4h192v-326.4z"  horiz-adv-x="1024" />
49 | 
50 |     
51 |     <glyph glyph-name="redo" unicode="&#59561;" d="M832 409.6c-76.8 102.4-204.8 166.4-345.6 166.4-211.2 0-384-147.2-428.8-345.6 64 121.6 198.4 204.8 345.6 204.8 121.6 0 230.4-57.6 307.2-147.2l-108.8-108.8c-6.4-6.4-6.4-19.2 0-32 6.4-6.4 6.4-6.4 12.8-6.4h313.6c12.8 0 25.6 12.8 25.6 25.6v313.6c0 12.8-6.4 19.2-19.2 19.2-6.4 0-12.8 0-12.8-6.4l-89.6-83.2z"  horiz-adv-x="1024" />
52 | 
53 |     
54 |     <glyph glyph-name="to-front" unicode="&#59562;" d="M768 300.79999999999995c-6.4 12.8-12.8 19.2-25.6 19.2l-102.4 12.8 115.2 102.4c6.4 6.4 12.8 19.2 6.4 25.6-6.4 12.8-12.8 19.2-25.6 19.2l-102.4 12.8 115.2 102.4c6.4 6.4 12.8 19.2 6.4 25.6-6.4 12.8-12.8 19.2-25.6 19.2l-371.2 57.6c-6.4 0-19.2 0-25.6-6.4l-320-230.4c-6.4-6.4-12.8-19.2-12.8-25.6 0-12.8 12.8-19.2 19.2-19.2l115.2-25.6-121.6-89.6c-6.4-6.4-12.8-19.2-12.8-25.6 0-12.8 12.8-19.2 19.2-19.2l115.2-25.6-121.6-89.6c-6.4-6.4-12.8-19.2-12.8-25.6 0-12.8 12.8-19.2 19.2-19.2l390.4-96c6.4 0 19.2 0 25.6 6.4l307.2 268.8c25.6 6.4 25.6 19.2 25.6 25.6z m-550.4 76.8l204.8-51.2c6.4 0 19.2 0 25.6 6.4l134.4 121.6 83.2-12.8-249.6-217.6-320 76.8 121.6 76.8z m204.8-320l-320 76.8 108.8 76.8 204.8-51.2c6.4 0 19.2 0 25.6 6.4l134.4 121.6 83.2-12.8-236.8-217.6z m473.6 448l140.8-179.2h-96c-6.4-115.2-76.8-211.2-179.2-262.4 51.2 70.4 83.2 153.6 83.2 249.6v12.8h-96l147.2 179.2z"  horiz-adv-x="1024" />
55 | 
56 |     
57 |     <glyph glyph-name="undo" unicode="&#59563;" d="M192 409.6c76.8 102.4 204.8 166.4 345.6 166.4 211.2 0 384-147.2 428.8-345.6-64 121.6-198.4 204.8-345.6 204.8-121.6 0-230.4-57.6-307.2-147.2l108.8-108.8c6.4-6.4 6.4-19.2 0-32-6.4-6.4-6.4-6.4-12.8-6.4h-313.6c-12.8 0-25.6 12.8-25.6 25.6v313.6c0 12.8 6.4 19.2 19.2 19.2 6.4 0 12.8 0 12.8-6.4l89.6-83.2z"  horiz-adv-x="1024" />
58 | 
59 |     
60 |     <glyph glyph-name="zoom-in-o" unicode="&#59564;" d="M640 480c0-19.2-12.8-32-32-32h-96v-96c0-19.2-12.8-32-32-32s-32 12.8-32 32V448h-96c-19.2 0-32 12.8-32 32s12.8 32 32 32h96v96c0 19.2 12.8 32 32 32s32-12.8 32-32v-96h96c19.2 0 32-12.8 32-32z m288-505.6c-19.2-12.8-44.8-12.8-57.6 6.4l-185.6 211.2c-57.6-44.8-128-70.4-204.8-70.4-192 0-352 160-352 352s160 352 352 352 352-160 352-352c0-89.6-32-166.4-83.2-230.4l185.6-217.6c12.8-6.4 12.8-32-6.4-51.2z m-448 217.6c160 0 288 128 288 288s-128 288-288 288-288-128-288-288 128-288 288-288z"  horiz-adv-x="1024" />
61 | 
62 |     
63 |     <glyph glyph-name="ungroup" unicode="&#59565;" d="M704 640h-384c-38.4 0-64-25.6-64-64v-64c0-38.4 25.6-64 64-64h384c38.4 0 64 25.6 64 64v64c0 38.4-25.6 64-64 64z m0-128h-384v64h384v-64zM704 384h-384c-38.4 0-64-25.6-64-64v-64c0-38.4 25.6-64 64-64h384c38.4 0 64 25.6 64 64v64c0 38.4-25.6 64-64 64z m0-128h-384v64h384v-64zM128 864c-51.2 0-96-44.8-96-96s44.8-96 96-96 96 44.8 96 96-44.8 96-96 96z m0-128c-19.2 0-32 12.8-32 32s12.8 32 32 32 32-12.8 32-32-12.8-32-32-32zM896 672c51.2 0 96 44.8 96 96s-44.8 96-96 96-96-44.8-96-96 44.8-96 96-96z m0 128c19.2 0 32-12.8 32-32s-12.8-32-32-32-32 12.8-32 32 12.8 32 32 32zM128 128c-51.2 0-96-44.8-96-96s44.8-96 96-96 96 44.8 96 96-44.8 96-96 96z m0-128c-19.2 0-32 12.8-32 32s12.8 32 32 32 32-12.8 32-32-12.8-32-32-32zM896 128c-51.2 0-96-44.8-96-96s44.8-96 96-96 96 44.8 96 96-44.8 96-96 96z m0-128c-19.2 0-32 12.8-32 32s12.8 32 32 32 32-12.8 32-32-12.8-32-32-32z"  horiz-adv-x="1024" />
64 | 
65 |     
66 |     <glyph glyph-name="zoom-out-o" unicode="&#59566;" d="M640 480c0-19.2-12.8-32-32-32h-256c-19.2 0-32 12.8-32 32s12.8 32 32 32h256c19.2 0 32-12.8 32-32z m288-505.6c-19.2-12.8-44.8-12.8-57.6 6.4l-185.6 211.2c-57.6-44.8-128-70.4-204.8-70.4-192 0-352 160-352 352s160 352 352 352 352-160 352-352c0-89.6-32-166.4-83.2-230.4l185.6-217.6c12.8-6.4 12.8-32-6.4-51.2z m-448 217.6c160 0 288 128 288 288s-128 288-288 288-288-128-288-288 128-288 288-288z"  horiz-adv-x="1024" />
67 | 
68 |     
69 |     <glyph glyph-name="group" unicode="&#59567;" d="M320 576v-64h384v64h-384z m0 64h384c38.4 0 64-25.6 64-64v-64c0-38.4-25.6-64-64-64h-384c-38.4 0-64 25.6-64 64v64c0 38.4 25.6 64 64 64zM320 320v-64h384v64h-384z m0 64h384c38.4 0 64-25.6 64-64v-64c0-38.4-25.6-64-64-64h-384c-38.4 0-64 25.6-64 64v64c0 38.4 25.6 64 64 64zM128 672c-51.2 0-96 44.8-96 96s44.8 96 96 96 96-44.8 96-96-44.8-96-96-96z m0 64c19.2 0 32 12.8 32 32s-12.8 32-32 32-32-12.8-32-32 12.8-32 32-32zM896 672c-51.2 0-96 44.8-96 96s44.8 96 96 96 96-44.8 96-96-44.8-96-96-96z m0 64c19.2 0 32 12.8 32 32s-12.8 32-32 32-32-12.8-32-32 12.8-32 32-32zM128-96c-51.2 0-96 44.8-96 96s44.8 96 96 96 96-44.8 96-96-44.8-96-96-96z m0 64c19.2 0 32 12.8 32 32s-12.8 32-32 32-32-12.8-32-32 12.8-32 32-32zM896-96c-51.2 0-96 44.8-96 96s44.8 96 96 96 96-44.8 96-96-44.8-96-96-96z m0 64c19.2 0 32 12.8 32 32s-12.8 32-32 32-32-12.8-32-32 12.8-32 32-32zM262.4 736v64h64v-64h-64z m128 0v64h64v-64h-64z m128 0v64h64v-64h-64z m128 0v64h64v-64h-64z m-550.4-128h64v-64h-64v64z m0-128h64v-64h-64v64z m0-128h64v-64h-64v64z m0-128h64v-64h-64v64z m768 384h64v-64h-64v64z m0-128h64v-64h-64v64z m0-128h64v-64h-64v64z m0-128h64v-64h-64v64z m-601.6-256v64h64v-64h-64z m128 0v64h64v-64h-64z m128 0v64h64v-64h-64z m128 0v64h64v-64h-64z"  horiz-adv-x="1024" />
70 | 
71 |     
72 |     <glyph glyph-name="to-back" unicode="&#59568;" d="M729.6 320l-96 12.8 115.2 102.4c6.4 6.4 12.8 19.2 6.4 25.6 0 12.8-12.8 19.2-25.6 19.2l-96 12.8 115.2 102.4c6.4 6.4 12.8 19.2 6.4 25.6 0 12.8-12.8 19.2-25.6 19.2l-364.8 57.6c-6.4 0-12.8 0-19.2-6.4l-320-230.4c-6.4-6.4-12.8-19.2-12.8-25.6 0-12.8 12.8-19.2 19.2-19.2l108.8-25.6-121.6-89.6c-6.4-6.4-12.8-19.2-12.8-25.6s12.8-19.2 19.2-19.2l108.8-25.6-121.6-89.6c-6.4-6.4-12.8-19.2-12.8-25.6 0-12.8 12.8-19.2 19.2-19.2l300.8-70.4 83.2-19.2c6.4 0 19.2 0 25.6 6.4l300.8 268.8c6.4 6.4 12.8 19.2 6.4 25.6 12.8 6.4 6.4 12.8-6.4 12.8z m-364.8 326.4l300.8-44.8-249.6-217.6-313.6 76.8 262.4 185.6z m-147.2-268.8l204.8-51.2c6.4 0 19.2 0 25.6 6.4l134.4 121.6 83.2-12.8-249.6-217.6-313.6 76.8 115.2 76.8z m723.2-134.4h96l-140.8-179.2-140.8 179.2h96v12.8c0 96-32 179.2-83.2 249.6 102.4-51.2 172.8-153.6 172.8-262.4z"  horiz-adv-x="1024" />
73 | 
74 |     
75 | 
76 | 
77 |   </font>
78 | </defs></svg>
79 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue-g6-editor",
 3 |   "version": "0.2.0",
 4 |   "private": false,
 5 |   "description": "基于vue的G6-Editor基础流程图",
 6 |   "author": "liyucan <1206497655@qq.com>",
 7 |   "keywords": [
 8 |     "vue.js",
 9 |     "vue-plugin",
10 |     "flow"
11 |   ],
12 |   "main": "lib/BaseFlow.umd.min.js",
13 |   "license": "MIT",
14 |   "scripts": {
15 |     "serve": "vue-cli-service serve",
16 |     "build": "vue-cli-service build",
17 |     "lint": "vue-cli-service lint",
18 |     "lib": "vue-cli-service build --target lib --name BaseFlow --dest lib packages/index.js"
19 |   },
20 |   "dependencies": {
21 |     "@antv/g6-editor": "^1.2.0",
22 |     "@vue/eslint-config-airbnb": "^4.0.0",
23 |     "element-ui": "^2.4.11",
24 |     "jspdf": "^1.5.3",
25 |     "vue": "^2.5.17",
26 |     "vue-g6-editor": "^0.2.0"
27 |   },
28 |   "devDependencies": {
29 |     "@vue/cli-plugin-babel": "^3.0.4",
30 |     "@vue/cli-plugin-eslint": "^3.0.4",
31 |     "@vue/cli-service": "^3.0.4",
32 |     "@vue/eslint-config-prettier": "^4.0.0",
33 |     "babel": "^6.23.0",
34 |     "babel-core": "^6.26.3",
35 |     "babel-eslint": "^10.0.1",
36 |     "babel-loader": "^8.0.5",
37 |     "babel-preset-env": "^1.7.0",
38 |     "cross-env": "^5.2.0",
39 |     "css-loader": "^2.1.0",
40 |     "eslint": "^5.8.0",
41 |     "eslint-plugin-vue": "^5.0.0-0",
42 |     "file-loader": "^3.0.1",
43 |     "node-sass": "^4.9.0",
44 |     "sass-loader": "^7.0.1",
45 |     "vue-loader": "^15.6.0",
46 |     "vue-template-compiler": "^2.5.17"
47 |   },
48 |   "eslintConfig": {
49 |     "root": true,
50 |     "env": {
51 |       "node": true
52 |     },
53 |     "extends": [
54 |       "plugin:vue/essential",
55 |       "@vue/prettier"
56 |     ],
57 |     "rules": {},
58 |     "parserOptions": {
59 |       "parser": "babel-eslint"
60 |     }
61 |   },
62 |   "postcss": {
63 |     "plugins": {
64 |       "autoprefixer": {}
65 |     }
66 |   },
67 |   "browserslist": [
68 |     "> 1%",
69 |     "last 2 versions",
70 |     "not ie <= 8"
71 |   ]
72 | }
73 | 


--------------------------------------------------------------------------------
/packages/assets/icon/font.css:
--------------------------------------------------------------------------------
 1 | 
 2 | @font-face {font-family: "iconfont";
 3 |   src: url('./font_IE9.eot'); /* IE9*/
 4 |   src: url('./font_IE6.eot') format('embedded-opentype'), /* IE6-IE8 */
 5 |   url('data:application/x-font-woff;charset=utf-8;base64,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') format('woff'),
 6 |   url('./font.ttf') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
 7 |   url('./font.svg') format('svg'); /* iOS 4.1- */
 8 | }
 9 | 
10 | .iconfont {
11 |   font-family:"iconfont" !important;
12 |   font-size:16px;
13 |   font-style:normal;
14 |   -webkit-font-smoothing: antialiased;
15 |   -moz-osx-font-smoothing: grayscale;
16 | }
17 | 
18 | .icon-cut:before { content: "\e8a2"; }
19 | 
20 | .icon-actual-size-o:before { content: "\e8a3"; }
21 | 
22 | .icon-copy-o:before { content: "\e8a4"; }
23 | 
24 | .icon-delete-o:before { content: "\e8a5"; }
25 | 
26 | .icon-fit:before { content: "\e8a6"; }
27 | 
28 | .icon-select:before { content: "\e8a7"; }
29 | 
30 | .icon-paster-o:before { content: "\e8a8"; }
31 | 
32 | .icon-redo:before { content: "\e8a9"; }
33 | 
34 | .icon-to-front:before { content: "\e8aa"; }
35 | 
36 | .icon-undo:before { content: "\e8ab"; }
37 | 
38 | .icon-zoom-in-o:before { content: "\e8ac"; }
39 | 
40 | .icon-ungroup:before { content: "\e8ad"; }
41 | 
42 | .icon-zoom-out-o:before { content: "\e8ae"; }
43 | 
44 | .icon-group:before { content: "\e8af"; }
45 | 
46 | .icon-to-back:before { content: "\e8b0"; }
47 | 


--------------------------------------------------------------------------------
/packages/assets/icon/font.svg:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" standalone="no"?>
 2 | <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
 3 | <!--
 4 | 2013-9-30: Created.
 5 | -->
 6 | <svg>
 7 | <metadata>
 8 | Created by iconfont
 9 | </metadata>
10 | <defs>
11 | 
12 | <font id="iconfont" horiz-adv-x="1024" >
13 |   <font-face
14 |     font-family="iconfont"
15 |     font-weight="500"
16 |     font-stretch="normal"
17 |     units-per-em="1024"
18 |     ascent="896"
19 |     descent="-128"
20 |   />
21 |     <missing-glyph />
22 |     
23 |     <glyph glyph-name="x" unicode="x" horiz-adv-x="1001"
24 | d="M281 543q-27 -1 -53 -1h-83q-18 0 -36.5 -6t-32.5 -18.5t-23 -32t-9 -45.5v-76h912v41q0 16 -0.5 30t-0.5 18q0 13 -5 29t-17 29.5t-31.5 22.5t-49.5 9h-133v-97h-438v97zM955 310v-52q0 -23 0.5 -52t0.5 -58t-10.5 -47.5t-26 -30t-33 -16t-31.5 -4.5q-14 -1 -29.5 -0.5
25 | t-29.5 0.5h-32l-45 128h-439l-44 -128h-29h-34q-20 0 -45 1q-25 0 -41 9.5t-25.5 23t-13.5 29.5t-4 30v167h911zM163 247q-12 0 -21 -8.5t-9 -21.5t9 -21.5t21 -8.5q13 0 22 8.5t9 21.5t-9 21.5t-22 8.5zM316 123q-8 -26 -14 -48q-5 -19 -10.5 -37t-7.5 -25t-3 -15t1 -14.5
26 | t9.5 -10.5t21.5 -4h37h67h81h80h64h36q23 0 34 12t2 38q-5 13 -9.5 30.5t-9.5 34.5q-5 19 -11 39h-368zM336 498v228q0 11 2.5 23t10 21.5t20.5 15.5t34 6h188q31 0 51.5 -14.5t20.5 -52.5v-227h-327z" />
27 |     
28 | 
29 |     
30 |     <glyph glyph-name="cut" unicode="&#59554;" d="M864 659.2s0 6.4 0 0c51.2 96 0 172.8 0 172.8l-166.4-166.4-76.8-76.8-115.2-115.2-345.6 345.6s-44.8-70.4 0-160c25.6-51.2 147.2-172.8 256-281.6l-64-64c-83.2 44.8-160 25.6-224-38.4-76.8-76.8-76.8-198.4 0-275.2 76.8-76.8 198.4-76.8 275.2 0 57.6 57.6 70.4 134.4 44.8 204.8l70.4 70.4 70.4-70.4c-25.6-70.4-12.8-153.6 44.8-204.8 76.8-76.8 198.4-76.8 275.2 0 76.8 76.8 70.4 192-6.4 268.8-57.6 57.6-147.2 76.8-230.4 32l-64 64c76.8 76.8 153.6 160 204.8 217.6-6.4 6.4 44.8 64 51.2 76.8z m-524.8-601.6c-44.8-44.8-121.6-44.8-166.4 0-44.8 44.8-44.8 121.6 0 166.4 44.8 44.8 121.6 44.8 166.4 0 44.8-44.8 44.8-121.6 0-166.4z m134.4 352c19.2 19.2 51.2 19.2 70.4 0 19.2-19.2 19.2-51.2 0-70.4-19.2-19.2-51.2-19.2-70.4 0-19.2 19.2-19.2 51.2 0 70.4z m377.6-185.6c44.8-44.8 44.8-121.6 0-166.4-44.8-44.8-121.6-44.8-166.4 0-44.8 44.8-44.8 121.6 0 166.4 44.8 44.8 121.6 44.8 166.4 0z"  horiz-adv-x="1024" />
31 | 
32 |     
33 |     <glyph glyph-name="actual-size-o" unicode="&#59555;" d="M256 768h64v-768h-64v768z m512 0h64v-768h-64v768z m-256-192h64v-64h-64v64z m0-256h64v-64h-64v64z"  horiz-adv-x="1024" />
34 | 
35 |     
36 |     <glyph glyph-name="copy-o" unicode="&#59556;" d="M998.4-128h-518.4c-12.8 0-25.6 12.8-25.6 25.6v582.4c0 12.8 12.8 25.6 32 25.6h352l192-192v-422.4c-6.4-6.4-19.2-19.2-32-19.2z m-166.4 576v-128h128l-128 128z m128-192h-192v192h-256v-512h448v320z m-576-64h-256v576h256v-192h256v64l-192 192h-352c-19.2 0-32-12.8-32-25.6v-646.4c0-12.8 12.8-25.6 25.6-25.6h294.4v57.6z m64 576l128-128h-128v128z"  horiz-adv-x="1030" />
37 | 
38 |     
39 |     <glyph glyph-name="delete-o" unicode="&#59557;" d="M896 576v-576c0-38.4-19.2-64-57.6-64h-582.4c-38.4 0-64 25.6-64 64v576h-64c0 38.4 25.6 64 64 64h192v64c0 38.4 25.6 64 64 64h192c38.4 0 64-25.6 64-64v-64h185.6c38.4 0 64-25.6 64-64h-57.6z m-256 128h-198.4v-64h198.4v64z m192-128h-582.4v-576h582.4v576z m-384-384h-57.6v256h57.6v-256z m256 0h-64v256h64v-256z"  horiz-adv-x="1024" />
40 | 
41 |     
42 |     <glyph glyph-name="fit" unicode="&#59558;" d="M640 608v192c0 19.2 12.8 32 32 32s32-12.8 32-32v-160h160c19.2 0 32-12.8 32-32s-12.8-32-32-32h-192c-6.4 0-12.8 0-19.2 6.4h-6.4c0 12.8-6.4 19.2-6.4 25.6z m-352 224c-19.2 0-32-12.8-32-32v-160h-160c-19.2 0-32-12.8-32-32s12.8-32 32-32h192c6.4 0 12.8 0 19.2 6.4h6.4c6.4 6.4 6.4 12.8 6.4 19.2v192c0 25.6-12.8 38.4-32 38.4z m576-576h-192c-6.4 0-12.8 0-19.2-6.4h-6.4c-6.4-6.4-6.4-12.8-6.4-19.2v-192c0-19.2 12.8-32 32-32s32 12.8 32 32V192h160c19.2 0 32 12.8 32 32s-12.8 32-32 32z m-550.4-12.8c-6.4 6.4-6.4 6.4 0 0-12.8 6.4-19.2 12.8-25.6 12.8h-192c-19.2 0-32-12.8-32-32s12.8-32 32-32h160v-160c0-19.2 12.8-32 32-32s32 12.8 32 32v192c0 6.4-6.4 12.8-6.4 19.2z m166.4 300.8c-70.4 0-128-57.6-128-128s57.6-128 128-128 128 57.6 128 128-57.6 128-128 128z"  horiz-adv-x="1024" />
43 | 
44 |     
45 |     <glyph glyph-name="select" unicode="&#59559;" d="M64 704h64v-64h-64v64z m0-128h64v-64h-64v64z m0-128h64v-64h-64v64z m0-128h64v-64h-64v64z m0-128h64v-64h-64v64z m0 576v64h64v-64h-64z m128 0v64h64v-64h-64z m128 0v64h64v-64h-64z m128 0v64h64v-64h-64z m128 0v64h64v-64h-64z m128 0v64h64v-64h-64z m128 64h64v-64h-64v64z m0-128h64v-64h-64v64z m0-128h64v-64h-64v64z m0-128h64v-64h-64v64z m0-128h64v-64h-64v64z m-768-320v64h64v-64h-64z m128 0v64h64v-64h-64z m128 0v64h64v-64h-64z m128 0v64h64v-64h-64z m384 64v128h64v-128h128v-64h-128v-128h-64v128h-128v64h128z m-256-64v64h64v-64h-64z m-128 576v-64h256v64h-256z m0 64h256c38.4 0 64-25.6 64-64v-64c0-38.4-25.6-64-64-64h-256c-38.4 0-64 25.6-64 64v64c0 38.4 25.6 64 64 64z m-192-320v-64h256v64h-256z m0 64h256c38.4 0 64-25.6 64-64v-64c0-38.4-25.6-64-64-64h-256c-38.4 0-64 25.6-64 64v64c0 38.4 25.6 64 64 64z"  horiz-adv-x="1024" />
46 | 
47 |     
48 |     <glyph glyph-name="paster-o" unicode="&#59560;" d="M774.4 646.4h-70.4v57.6h102.4c12.8 0 25.6-12.8 25.6-25.6v-96h-57.6v64z m-518.4-652.8h-70.4v652.8h70.4v57.6h-102.4c-12.8 0-25.6-12.8-25.6-25.6v-710.4c0-12.8 12.8-25.6 25.6-25.6h96l6.4 51.2z m384 582.4h-320v128h64v70.4c0 32 25.6 57.6 57.6 57.6h70.4c32 0 57.6-25.6 57.6-57.6v-70.4h70.4v-128z m-128 198.4h-70.4v-70.4h70.4v70.4z m377.6-876.8V320l-185.6 192h-352c-19.2 0-32-12.8-32-25.6v-582.4c0-12.8 12.8-25.6 25.6-25.6h512c19.2-6.4 32 6.4 32 19.2z m-64 409.6h-128V448l128-140.8z m6.4-384h-454.4V448h262.4v-198.4h192v-326.4z"  horiz-adv-x="1024" />
49 | 
50 |     
51 |     <glyph glyph-name="redo" unicode="&#59561;" d="M832 409.6c-76.8 102.4-204.8 166.4-345.6 166.4-211.2 0-384-147.2-428.8-345.6 64 121.6 198.4 204.8 345.6 204.8 121.6 0 230.4-57.6 307.2-147.2l-108.8-108.8c-6.4-6.4-6.4-19.2 0-32 6.4-6.4 6.4-6.4 12.8-6.4h313.6c12.8 0 25.6 12.8 25.6 25.6v313.6c0 12.8-6.4 19.2-19.2 19.2-6.4 0-12.8 0-12.8-6.4l-89.6-83.2z"  horiz-adv-x="1024" />
52 | 
53 |     
54 |     <glyph glyph-name="to-front" unicode="&#59562;" d="M768 300.79999999999995c-6.4 12.8-12.8 19.2-25.6 19.2l-102.4 12.8 115.2 102.4c6.4 6.4 12.8 19.2 6.4 25.6-6.4 12.8-12.8 19.2-25.6 19.2l-102.4 12.8 115.2 102.4c6.4 6.4 12.8 19.2 6.4 25.6-6.4 12.8-12.8 19.2-25.6 19.2l-371.2 57.6c-6.4 0-19.2 0-25.6-6.4l-320-230.4c-6.4-6.4-12.8-19.2-12.8-25.6 0-12.8 12.8-19.2 19.2-19.2l115.2-25.6-121.6-89.6c-6.4-6.4-12.8-19.2-12.8-25.6 0-12.8 12.8-19.2 19.2-19.2l115.2-25.6-121.6-89.6c-6.4-6.4-12.8-19.2-12.8-25.6 0-12.8 12.8-19.2 19.2-19.2l390.4-96c6.4 0 19.2 0 25.6 6.4l307.2 268.8c25.6 6.4 25.6 19.2 25.6 25.6z m-550.4 76.8l204.8-51.2c6.4 0 19.2 0 25.6 6.4l134.4 121.6 83.2-12.8-249.6-217.6-320 76.8 121.6 76.8z m204.8-320l-320 76.8 108.8 76.8 204.8-51.2c6.4 0 19.2 0 25.6 6.4l134.4 121.6 83.2-12.8-236.8-217.6z m473.6 448l140.8-179.2h-96c-6.4-115.2-76.8-211.2-179.2-262.4 51.2 70.4 83.2 153.6 83.2 249.6v12.8h-96l147.2 179.2z"  horiz-adv-x="1024" />
55 | 
56 |     
57 |     <glyph glyph-name="undo" unicode="&#59563;" d="M192 409.6c76.8 102.4 204.8 166.4 345.6 166.4 211.2 0 384-147.2 428.8-345.6-64 121.6-198.4 204.8-345.6 204.8-121.6 0-230.4-57.6-307.2-147.2l108.8-108.8c6.4-6.4 6.4-19.2 0-32-6.4-6.4-6.4-6.4-12.8-6.4h-313.6c-12.8 0-25.6 12.8-25.6 25.6v313.6c0 12.8 6.4 19.2 19.2 19.2 6.4 0 12.8 0 12.8-6.4l89.6-83.2z"  horiz-adv-x="1024" />
58 | 
59 |     
60 |     <glyph glyph-name="zoom-in-o" unicode="&#59564;" d="M640 480c0-19.2-12.8-32-32-32h-96v-96c0-19.2-12.8-32-32-32s-32 12.8-32 32V448h-96c-19.2 0-32 12.8-32 32s12.8 32 32 32h96v96c0 19.2 12.8 32 32 32s32-12.8 32-32v-96h96c19.2 0 32-12.8 32-32z m288-505.6c-19.2-12.8-44.8-12.8-57.6 6.4l-185.6 211.2c-57.6-44.8-128-70.4-204.8-70.4-192 0-352 160-352 352s160 352 352 352 352-160 352-352c0-89.6-32-166.4-83.2-230.4l185.6-217.6c12.8-6.4 12.8-32-6.4-51.2z m-448 217.6c160 0 288 128 288 288s-128 288-288 288-288-128-288-288 128-288 288-288z"  horiz-adv-x="1024" />
61 | 
62 |     
63 |     <glyph glyph-name="ungroup" unicode="&#59565;" d="M704 640h-384c-38.4 0-64-25.6-64-64v-64c0-38.4 25.6-64 64-64h384c38.4 0 64 25.6 64 64v64c0 38.4-25.6 64-64 64z m0-128h-384v64h384v-64zM704 384h-384c-38.4 0-64-25.6-64-64v-64c0-38.4 25.6-64 64-64h384c38.4 0 64 25.6 64 64v64c0 38.4-25.6 64-64 64z m0-128h-384v64h384v-64zM128 864c-51.2 0-96-44.8-96-96s44.8-96 96-96 96 44.8 96 96-44.8 96-96 96z m0-128c-19.2 0-32 12.8-32 32s12.8 32 32 32 32-12.8 32-32-12.8-32-32-32zM896 672c51.2 0 96 44.8 96 96s-44.8 96-96 96-96-44.8-96-96 44.8-96 96-96z m0 128c19.2 0 32-12.8 32-32s-12.8-32-32-32-32 12.8-32 32 12.8 32 32 32zM128 128c-51.2 0-96-44.8-96-96s44.8-96 96-96 96 44.8 96 96-44.8 96-96 96z m0-128c-19.2 0-32 12.8-32 32s12.8 32 32 32 32-12.8 32-32-12.8-32-32-32zM896 128c-51.2 0-96-44.8-96-96s44.8-96 96-96 96 44.8 96 96-44.8 96-96 96z m0-128c-19.2 0-32 12.8-32 32s12.8 32 32 32 32-12.8 32-32-12.8-32-32-32z"  horiz-adv-x="1024" />
64 | 
65 |     
66 |     <glyph glyph-name="zoom-out-o" unicode="&#59566;" d="M640 480c0-19.2-12.8-32-32-32h-256c-19.2 0-32 12.8-32 32s12.8 32 32 32h256c19.2 0 32-12.8 32-32z m288-505.6c-19.2-12.8-44.8-12.8-57.6 6.4l-185.6 211.2c-57.6-44.8-128-70.4-204.8-70.4-192 0-352 160-352 352s160 352 352 352 352-160 352-352c0-89.6-32-166.4-83.2-230.4l185.6-217.6c12.8-6.4 12.8-32-6.4-51.2z m-448 217.6c160 0 288 128 288 288s-128 288-288 288-288-128-288-288 128-288 288-288z"  horiz-adv-x="1024" />
67 | 
68 |     
69 |     <glyph glyph-name="group" unicode="&#59567;" d="M320 576v-64h384v64h-384z m0 64h384c38.4 0 64-25.6 64-64v-64c0-38.4-25.6-64-64-64h-384c-38.4 0-64 25.6-64 64v64c0 38.4 25.6 64 64 64zM320 320v-64h384v64h-384z m0 64h384c38.4 0 64-25.6 64-64v-64c0-38.4-25.6-64-64-64h-384c-38.4 0-64 25.6-64 64v64c0 38.4 25.6 64 64 64zM128 672c-51.2 0-96 44.8-96 96s44.8 96 96 96 96-44.8 96-96-44.8-96-96-96z m0 64c19.2 0 32 12.8 32 32s-12.8 32-32 32-32-12.8-32-32 12.8-32 32-32zM896 672c-51.2 0-96 44.8-96 96s44.8 96 96 96 96-44.8 96-96-44.8-96-96-96z m0 64c19.2 0 32 12.8 32 32s-12.8 32-32 32-32-12.8-32-32 12.8-32 32-32zM128-96c-51.2 0-96 44.8-96 96s44.8 96 96 96 96-44.8 96-96-44.8-96-96-96z m0 64c19.2 0 32 12.8 32 32s-12.8 32-32 32-32-12.8-32-32 12.8-32 32-32zM896-96c-51.2 0-96 44.8-96 96s44.8 96 96 96 96-44.8 96-96-44.8-96-96-96z m0 64c19.2 0 32 12.8 32 32s-12.8 32-32 32-32-12.8-32-32 12.8-32 32-32zM262.4 736v64h64v-64h-64z m128 0v64h64v-64h-64z m128 0v64h64v-64h-64z m128 0v64h64v-64h-64z m-550.4-128h64v-64h-64v64z m0-128h64v-64h-64v64z m0-128h64v-64h-64v64z m0-128h64v-64h-64v64z m768 384h64v-64h-64v64z m0-128h64v-64h-64v64z m0-128h64v-64h-64v64z m0-128h64v-64h-64v64z m-601.6-256v64h64v-64h-64z m128 0v64h64v-64h-64z m128 0v64h64v-64h-64z m128 0v64h64v-64h-64z"  horiz-adv-x="1024" />
70 | 
71 |     
72 |     <glyph glyph-name="to-back" unicode="&#59568;" d="M729.6 320l-96 12.8 115.2 102.4c6.4 6.4 12.8 19.2 6.4 25.6 0 12.8-12.8 19.2-25.6 19.2l-96 12.8 115.2 102.4c6.4 6.4 12.8 19.2 6.4 25.6 0 12.8-12.8 19.2-25.6 19.2l-364.8 57.6c-6.4 0-12.8 0-19.2-6.4l-320-230.4c-6.4-6.4-12.8-19.2-12.8-25.6 0-12.8 12.8-19.2 19.2-19.2l108.8-25.6-121.6-89.6c-6.4-6.4-12.8-19.2-12.8-25.6s12.8-19.2 19.2-19.2l108.8-25.6-121.6-89.6c-6.4-6.4-12.8-19.2-12.8-25.6 0-12.8 12.8-19.2 19.2-19.2l300.8-70.4 83.2-19.2c6.4 0 19.2 0 25.6 6.4l300.8 268.8c6.4 6.4 12.8 19.2 6.4 25.6 12.8 6.4 6.4 12.8-6.4 12.8z m-364.8 326.4l300.8-44.8-249.6-217.6-313.6 76.8 262.4 185.6z m-147.2-268.8l204.8-51.2c6.4 0 19.2 0 25.6 6.4l134.4 121.6 83.2-12.8-249.6-217.6-313.6 76.8 115.2 76.8z m723.2-134.4h96l-140.8-179.2-140.8 179.2h96v12.8c0 96-32 179.2-83.2 249.6 102.4-51.2 172.8-153.6 172.8-262.4z"  horiz-adv-x="1024" />
73 | 
74 |     
75 | 
76 | 
77 |   </font>
78 | </defs></svg>
79 | 


--------------------------------------------------------------------------------
/packages/assets/icon/font.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/LLLeno/vue-g6-editor/95d628285544043cad4243895fbb29643e3f7971/packages/assets/icon/font.ttf


--------------------------------------------------------------------------------
/packages/assets/icon/font_IE6.eot:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/LLLeno/vue-g6-editor/95d628285544043cad4243895fbb29643e3f7971/packages/assets/icon/font_IE6.eot


--------------------------------------------------------------------------------
/packages/assets/icon/font_IE9.eot:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/LLLeno/vue-g6-editor/95d628285544043cad4243895fbb29643e3f7971/packages/assets/icon/font_IE9.eot


--------------------------------------------------------------------------------
/packages/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/LLLeno/vue-g6-editor/95d628285544043cad4243895fbb29643e3f7971/packages/assets/logo.png


--------------------------------------------------------------------------------
/packages/assets/nodes/分叉节点.svg:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="UTF-8"?>
 2 | <svg width="86px" height="78px" viewBox="0 0 86 78" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
 3 |     <!-- Generator: Sketch 49.1 (51147) - http://www.bohemiancoding.com/sketch -->
 4 |     <title>Group 3</title>
 5 |     <desc>Created with Sketch.</desc>
 6 |     <defs>
 7 |         <path d="M42.6703722,1.66995728 L77.6353026,33.0218945 C79.2800648,34.4967003 79.4178417,37.0256099 77.9430359,38.6703722 C77.8461185,38.7784583 77.7433887,38.8811881 77.6353026,38.9781055 L42.6703722,70.3300427 C41.1508289,71.6925687 38.8491711,71.6925687 37.3296278,70.3300427 L2.36469744,38.9781055 C0.719935183,37.5032997 0.582158272,34.9743901 2.0569641,33.3296278 C2.1538815,33.2215417 2.25661129,33.1188119 2.36469744,33.0218945 L37.3296278,1.66995728 C38.8491711,0.307431303 41.1508289,0.307431303 42.6703722,1.66995728 Z" id="path-1"></path>
 8 |         <filter x="-8.8%" y="-6.9%" width="117.5%" height="119.4%" filterUnits="objectBoundingBox" id="filter-2">
 9 |             <feOffset dx="0" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
10 |             <feGaussianBlur stdDeviation="2" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
11 |             <feComposite in="shadowBlurOuter1" in2="SourceAlpha" operator="out" result="shadowBlurOuter1"></feComposite>
12 |             <feColorMatrix values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.04 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
13 |         </filter>
14 |     </defs>
15 |     <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
16 |         <g id="基础流程图-01" transform="translate(-7.000000, -184.000000)">
17 |             <g id="Group-3" transform="translate(10.000000, 185.000000)">
18 |                 <g id="Polygon">
19 |                     <use fill="black" fill-opacity="1" filter="url(#filter-2)" xlink:href="#path-1"></use>
20 |                     <use fill-opacity="0.92" fill="#E6FFFB" fill-rule="evenodd" xlink:href="#path-1"></use>
21 |                     <path stroke="#5CDBD3" stroke-width="1" d="M42.3365757,2.04222047 C41.0069753,0.850010239 38.9930247,0.850010239 37.6634243,2.04222047 L2.69849396,33.3941577 C2.60391858,33.4789604 2.51403002,33.568849 2.42922729,33.6634243 C1.13877219,35.1025913 1.25932699,37.3153872 2.69849396,38.6058423 L37.6634243,69.9577795 C38.9930247,71.1499898 41.0069753,71.1499898 42.3365757,69.9577795 L77.301506,38.6058423 C77.3960814,38.5210396 77.48597,38.431151 77.5707727,38.3365757 C78.8612278,36.8974087 78.740673,34.6846128 77.301506,33.3941577 L42.3365757,2.04222047 Z"></path>
22 |                 </g>
23 |                 <text id="分叉节点" font-family="PingFangSC-Regular, PingFang SC" font-size="12" font-weight="normal" line-spacing="12" fill="#000000" fill-opacity="0.65">
24 |                     <tspan x="16" y="42">分叉节点</tspan>
25 |                 </text>
26 |             </g>
27 |         </g>
28 |     </g>
29 | </svg>


--------------------------------------------------------------------------------
/packages/assets/nodes/常规节点.svg:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="UTF-8"?>
 2 | <svg width="88px" height="56px" viewBox="0 0 88 56" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
 3 |     <!-- Generator: Sketch 49.1 (51147) - http://www.bohemiancoding.com/sketch -->
 4 |     <title>Group</title>
 5 |     <desc>Created with Sketch.</desc>
 6 |     <defs>
 7 |         <rect id="path-1" x="0" y="0" width="80" height="48" rx="4"></rect>
 8 |         <filter x="-8.8%" y="-10.4%" width="117.5%" height="129.2%" filterUnits="objectBoundingBox" id="filter-2">
 9 |             <feOffset dx="0" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
10 |             <feGaussianBlur stdDeviation="2" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
11 |             <feComposite in="shadowBlurOuter1" in2="SourceAlpha" operator="out" result="shadowBlurOuter1"></feComposite>
12 |             <feColorMatrix values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.04 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
13 |         </filter>
14 |     </defs>
15 |     <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
16 |         <g id="基础流程图-01" transform="translate(-6.000000, -105.000000)">
17 |             <g id="Group" transform="translate(10.000000, 107.000000)">
18 |                 <g id="Rectangle-15-Copy">
19 |                     <use fill="black" fill-opacity="1" filter="url(#filter-2)" xlink:href="#path-1"></use>
20 |                     <use fill-opacity="0.92" fill="#E6F7FF" fill-rule="evenodd" xlink:href="#path-1"></use>
21 |                     <rect stroke="#1890FF" stroke-width="1" x="0.5" y="0.5" width="79" height="47" rx="4"></rect>
22 |                 </g>
23 |                 <text id="常规节点" font-family="PingFangSC-Regular, PingFang SC" font-size="12" font-weight="normal" line-spacing="12" fill="#000000" fill-opacity="0.65">
24 |                     <tspan x="16" y="29">常规节点</tspan>
25 |                 </text>
26 |             </g>
27 |         </g>
28 |     </g>
29 | </svg>


--------------------------------------------------------------------------------
/packages/assets/nodes/模型节点.svg:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="UTF-8"?>
 2 | <svg width="88px" height="56px" viewBox="0 0 88 56" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
 3 |     <!-- Generator: Sketch 49.1 (51147) - http://www.bohemiancoding.com/sketch -->
 4 |     <title>Group 4</title>
 5 |     <desc>Created with Sketch.</desc>
 6 |     <defs>
 7 |         <rect id="path-1" x="0" y="0" width="80" height="48" rx="24"></rect>
 8 |         <filter x="-8.8%" y="-10.4%" width="117.5%" height="129.2%" filterUnits="objectBoundingBox" id="filter-2">
 9 |             <feOffset dx="0" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
10 |             <feGaussianBlur stdDeviation="2" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
11 |             <feComposite in="shadowBlurOuter1" in2="SourceAlpha" operator="out" result="shadowBlurOuter1"></feComposite>
12 |             <feColorMatrix values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.04 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
13 |         </filter>
14 |     </defs>
15 |     <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
16 |         <g id="基础流程图-01" transform="translate(-102.000000, -195.000000)">
17 |             <g id="Group-4" transform="translate(106.000000, 197.000000)">
18 |                 <g id="Rectangle-15-Copy-35">
19 |                     <use fill="black" fill-opacity="1" filter="url(#filter-2)" xlink:href="#path-1"></use>
20 |                     <use fill-opacity="0.92" fill="#F9F0FF" fill-rule="evenodd" xlink:href="#path-1"></use>
21 |                     <rect stroke="#B37FEB" stroke-width="1" x="0.5" y="0.5" width="79" height="47" rx="23.5"></rect>
22 |                 </g>
23 |                 <text id="模型节点" font-family="PingFangSC-Regular, PingFang SC" font-size="12" font-weight="normal" line-spacing="12" fill="#000000" fill-opacity="0.65">
24 |                     <tspan x="16" y="29">模型节点</tspan>
25 |                 </text>
26 |             </g>
27 |         </g>
28 |     </g>
29 | </svg>


--------------------------------------------------------------------------------
/packages/assets/nodes/起止节点.svg:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="UTF-8"?>
 2 | <svg width="80px" height="80px" viewBox="0 0 80 80" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
 3 |     <!-- Generator: Sketch 49.1 (51147) - http://www.bohemiancoding.com/sketch -->
 4 |     <title>Group 2</title>
 5 |     <desc>Created with Sketch.</desc>
 6 |     <defs>
 7 |         <circle id="path-1" cx="36" cy="36" r="36"></circle>
 8 |         <filter x="-9.7%" y="-6.9%" width="119.4%" height="119.4%" filterUnits="objectBoundingBox" id="filter-2">
 9 |             <feOffset dx="0" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
10 |             <feGaussianBlur stdDeviation="2" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
11 |             <feComposite in="shadowBlurOuter1" in2="SourceAlpha" operator="out" result="shadowBlurOuter1"></feComposite>
12 |             <feColorMatrix values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.04 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
13 |         </filter>
14 |     </defs>
15 |     <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
16 |         <g id="基础流程图-01" transform="translate(-106.000000, -93.000000)">
17 |             <g id="Group-2" transform="translate(110.000000, 95.000000)">
18 |                 <g id="Oval">
19 |                     <use fill="black" fill-opacity="1" filter="url(#filter-2)" xlink:href="#path-1"></use>
20 |                     <use fill-opacity="0.92" fill="#FFF2E8" fill-rule="evenodd" xlink:href="#path-1"></use>
21 |                     <circle stroke="#FFC069" stroke-width="1" cx="36" cy="36" r="35.5"></circle>
22 |                 </g>
23 |                 <text id="起止节点" font-family="PingFangSC-Regular, PingFang SC" font-size="12" font-weight="normal" line-spacing="12" fill="#000000" fill-opacity="0.65">
24 |                     <tspan x="12" y="41">起止节点</tspan>
25 |                 </text>
26 |             </g>
27 |         </g>
28 |     </g>
29 | </svg>


--------------------------------------------------------------------------------
/packages/index.js:
--------------------------------------------------------------------------------
 1 | // 导入颜色选择器组件
 2 | import BaseFlow from './vue-g6-editor'
 3 | 
 4 | // 存储组件列表
 5 | const components = [
 6 |   BaseFlow
 7 | ]
 8 | 
 9 | // 定义 install 方法，接收 Vue 作为参数。如果使用 use 注册插件，则所有的组件都将被注册
10 | const install = function (Vue) {
11 |   // 判断是否安装
12 |   if (install.installed) return
13 |   // 遍历注册全局组件
14 |   components.map(component => Vue.component(component.name, component))
15 | }
16 | 
17 | // 判断是否是直接引入文件
18 | if (typeof window !== 'undefined' && window.Vue) {
19 |   install(window.Vue)
20 | }
21 | 
22 | export default {
23 |   // 导出的对象必须具有 install，才能被 Vue.use() 方法安装
24 |   install,
25 |   // 以下是具体的组件列表
26 |   BaseFlow
27 | }
28 | 


--------------------------------------------------------------------------------
/packages/vue-g6-editor/index.js:
--------------------------------------------------------------------------------
 1 | import BaseFlow from './src/BaseFlow.vue' // 导入组件
 2 | 
 3 | // const VueG6Editor = {
 4 | //   install(Vue) {
 5 | //     Vue.component(BaseFlow.name, BaseFlow) // Flow.name 组件的name属性
 6 | //   }
 7 | // }
 8 | 
 9 | BaseFlow.install = function (Vue) {
10 |   Vue.component(BaseFlow.name, BaseFlow)
11 | }
12 | 
13 | export default BaseFlow // 导出..
14 | 


--------------------------------------------------------------------------------
/packages/vue-g6-editor/src/BaseFlow.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="editor">
  3 |     <div class="top-container">
  4 |       <div class="toolbar" ref="toolbar">
  5 |         <i
  6 |           data-command="undo"
  7 |           class="command iconfont icon-undo"
  8 |           title="撤销"
  9 |         ></i>
 10 |         <i
 11 |           data-command="redo"
 12 |           class="command iconfont icon-redo disable"
 13 |           title="重做"
 14 |         ></i>
 15 |         <span class="separator"></span>
 16 |         <i
 17 |           data-command="copy"
 18 |           class="command iconfont icon-copy-o"
 19 |           title="复制"
 20 |         ></i>
 21 |         <i
 22 |           data-command="paste"
 23 |           class="command iconfont icon-paster-o disable"
 24 |           title="粘贴"
 25 |         ></i>
 26 |         <i
 27 |           data-command="delete"
 28 |           class="command iconfont icon-delete-o"
 29 |           title="删除"
 30 |         ></i>
 31 |         <span class="separator"></span>
 32 |         <i
 33 |           data-command="zoomIn"
 34 |           class="command iconfont icon-zoom-in-o"
 35 |           title="放大"
 36 |         ></i>
 37 |         <i
 38 |           data-command="zoomOut"
 39 |           class="command iconfont icon-zoom-out-o"
 40 |           title="缩小"
 41 |         ></i>
 42 |         <i
 43 |           data-command="autoZoom"
 44 |           class="command iconfont icon-fit"
 45 |           title="适应画布"
 46 |         ></i>
 47 |         <i
 48 |           data-command="resetZoom"
 49 |           class="command iconfont icon-actual-size-o"
 50 |           title="实际尺寸"
 51 |         ></i>
 52 |         <span class="separator"></span>
 53 |         <i
 54 |           data-command="toBack"
 55 |           class="command iconfont icon-to-back"
 56 |           title="层级后置"
 57 |         ></i>
 58 |         <i
 59 |           data-command="toFront"
 60 |           class="command iconfont icon-to-front"
 61 |           title="层级前置"
 62 |         ></i>
 63 |         <span class="separator"></span>
 64 |         <i
 65 |           data-command="multiSelect"
 66 |           class="command iconfont icon-select"
 67 |           title="多选"
 68 |         ></i>
 69 |         <!-- <i data-command="addGroup" class="command iconfont icon-group disable" title="成组"></i>
 70 |         <i data-command="unGroup" class="command iconfont icon-ungroup disable" title="解组"></i> -->
 71 |       </div>
 72 |       <div class="data-opt">
 73 |         <el-button size="mini" type="primary" @click="saveFlow">保存</el-button>
 74 |         <!-- <el-button size="mini" type="primary" @click="downloadFlow">下载</el-button> -->
 75 |       </div>
 76 |     </div>
 77 |     <div class="bottom-container">
 78 |       <div class="left-pannel">
 79 |         <div class="itempannel-container" ref="itempannel">
 80 |           <img
 81 |             draggable="false"
 82 |             src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iODBweCIgaGVpZ2h0PSI4MHB4IiB2aWV3Qm94PSIwIDAgODAgODAiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8IS0tIEdlbmVyYXRvcjogU2tldGNoIDQ5LjEgKDUxMTQ3KSAtIGh0dHA6Ly93d3cuYm9oZW1pYW5jb2RpbmcuY29tL3NrZXRjaCAtLT4KICAgIDx0aXRsZT5Hcm91cCAyPC90aXRsZT4KICAgIDxkZXNjPkNyZWF0ZWQgd2l0aCBTa2V0Y2guPC9kZXNjPgogICAgPGRlZnM+CiAgICAgICAgPGNpcmNsZSBpZD0icGF0aC0xIiBjeD0iMzYiIGN5PSIzNiIgcj0iMzYiPjwvY2lyY2xlPgogICAgICAgIDxmaWx0ZXIgeD0iLTkuNyUiIHk9Ii02LjklIiB3aWR0aD0iMTE5LjQlIiBoZWlnaHQ9IjExOS40JSIgZmlsdGVyVW5pdHM9Im9iamVjdEJvdW5kaW5nQm94IiBpZD0iZmlsdGVyLTIiPgogICAgICAgICAgICA8ZmVPZmZzZXQgZHg9IjAiIGR5PSIyIiBpbj0iU291cmNlQWxwaGEiIHJlc3VsdD0ic2hhZG93T2Zmc2V0T3V0ZXIxIj48L2ZlT2Zmc2V0PgogICAgICAgICAgICA8ZmVHYXVzc2lhbkJsdXIgc3RkRGV2aWF0aW9uPSIyIiBpbj0ic2hhZG93T2Zmc2V0T3V0ZXIxIiByZXN1bHQ9InNoYWRvd0JsdXJPdXRlcjEiPjwvZmVHYXVzc2lhbkJsdXI+CiAgICAgICAgICAgIDxmZUNvbXBvc2l0ZSBpbj0ic2hhZG93Qmx1ck91dGVyMSIgaW4yPSJTb3VyY2VBbHBoYSIgb3BlcmF0b3I9Im91dCIgcmVzdWx0PSJzaGFkb3dCbHVyT3V0ZXIxIj48L2ZlQ29tcG9zaXRlPgogICAgICAgICAgICA8ZmVDb2xvck1hdHJpeCB2YWx1ZXM9IjAgMCAwIDAgMCAgIDAgMCAwIDAgMCAgIDAgMCAwIDAgMCAgMCAwIDAgMC4wNCAwIiB0eXBlPSJtYXRyaXgiIGluPSJzaGFkb3dCbHVyT3V0ZXIxIj48L2ZlQ29sb3JNYXRyaXg+CiAgICAgICAgPC9maWx0ZXI+CiAgICA8L2RlZnM+CiAgICA8ZyBpZD0iUGFnZS0xIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgICAgICA8ZyBpZD0i5Z+656GA5rWB56iL5Zu+LTAxIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMTA2LjAwMDAwMCwgLTkzLjAwMDAwMCkiPgogICAgICAgICAgICA8ZyBpZD0iR3JvdXAtMiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTEwLjAwMDAwMCwgOTUuMDAwMDAwKSI+CiAgICAgICAgICAgICAgICA8ZyBpZD0iT3ZhbCI+CiAgICAgICAgICAgICAgICAgICAgPHVzZSBmaWxsPSJibGFjayIgZmlsbC1vcGFjaXR5PSIxIiBmaWx0ZXI9InVybCgjZmlsdGVyLTIpIiB4bGluazpocmVmPSIjcGF0aC0xIj48L3VzZT4KICAgICAgICAgICAgICAgICAgICA8dXNlIGZpbGwtb3BhY2l0eT0iMC45MiIgZmlsbD0iI0ZGRjJFOCIgZmlsbC1ydWxlPSJldmVub2RkIiB4bGluazpocmVmPSIjcGF0aC0xIj48L3VzZT4KICAgICAgICAgICAgICAgICAgICA8Y2lyY2xlIHN0cm9rZT0iI0ZGQzA2OSIgc3Ryb2tlLXdpZHRoPSIxIiBjeD0iMzYiIGN5PSIzNiIgcj0iMzUuNSI+PC9jaXJjbGU+CiAgICAgICAgICAgICAgICA8L2c+CiAgICAgICAgICAgICAgICA8dGV4dCBpZD0i6LW35q2i6IqC54K5IiBmb250LWZhbWlseT0iUGluZ0ZhbmdTQy1SZWd1bGFyLCBQaW5nRmFuZyBTQyIgZm9udC1zaXplPSIxMiIgZm9udC13ZWlnaHQ9Im5vcm1hbCIgbGluZS1zcGFjaW5nPSIxMiIgZmlsbD0iIzAwMDAwMCIgZmlsbC1vcGFjaXR5PSIwLjY1Ij4KICAgICAgICAgICAgICAgICAgICA8dHNwYW4geD0iMTIiIHk9IjQxIj7otbfmraLoioLngrk8L3RzcGFuPgogICAgICAgICAgICAgICAgPC90ZXh0PgogICAgICAgICAgICA8L2c+CiAgICAgICAgPC9nPgogICAgPC9nPgo8L3N2Zz4="
 83 |             data-type="node"
 84 |             data-shape="flow-circle"
 85 |             data-size="72*72"
 86 |             data-color="#FA8C16"
 87 |             data-label="起止节点"
 88 |             class="getItem"
 89 |           />
 90 |           <img
 91 |             draggable="false"
 92 |             src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iODhweCIgaGVpZ2h0PSI1NnB4IiB2aWV3Qm94PSIwIDAgODggNTYiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8IS0tIEdlbmVyYXRvcjogU2tldGNoIDQ5LjEgKDUxMTQ3KSAtIGh0dHA6Ly93d3cuYm9oZW1pYW5jb2RpbmcuY29tL3NrZXRjaCAtLT4KICAgIDx0aXRsZT5Hcm91cDwvdGl0bGU+CiAgICA8ZGVzYz5DcmVhdGVkIHdpdGggU2tldGNoLjwvZGVzYz4KICAgIDxkZWZzPgogICAgICAgIDxyZWN0IGlkPSJwYXRoLTEiIHg9IjAiIHk9IjAiIHdpZHRoPSI4MCIgaGVpZ2h0PSI0OCIgcng9IjQiPjwvcmVjdD4KICAgICAgICA8ZmlsdGVyIHg9Ii04LjglIiB5PSItMTAuNCUiIHdpZHRoPSIxMTcuNSUiIGhlaWdodD0iMTI5LjIlIiBmaWx0ZXJVbml0cz0ib2JqZWN0Qm91bmRpbmdCb3giIGlkPSJmaWx0ZXItMiI+CiAgICAgICAgICAgIDxmZU9mZnNldCBkeD0iMCIgZHk9IjIiIGluPSJTb3VyY2VBbHBoYSIgcmVzdWx0PSJzaGFkb3dPZmZzZXRPdXRlcjEiPjwvZmVPZmZzZXQ+CiAgICAgICAgICAgIDxmZUdhdXNzaWFuQmx1ciBzdGREZXZpYXRpb249IjIiIGluPSJzaGFkb3dPZmZzZXRPdXRlcjEiIHJlc3VsdD0ic2hhZG93Qmx1ck91dGVyMSI+PC9mZUdhdXNzaWFuQmx1cj4KICAgICAgICAgICAgPGZlQ29tcG9zaXRlIGluPSJzaGFkb3dCbHVyT3V0ZXIxIiBpbjI9IlNvdXJjZUFscGhhIiBvcGVyYXRvcj0ib3V0IiByZXN1bHQ9InNoYWRvd0JsdXJPdXRlcjEiPjwvZmVDb21wb3NpdGU+CiAgICAgICAgICAgIDxmZUNvbG9yTWF0cml4IHZhbHVlcz0iMCAwIDAgMCAwICAgMCAwIDAgMCAwICAgMCAwIDAgMCAwICAwIDAgMCAwLjA0IDAiIHR5cGU9Im1hdHJpeCIgaW49InNoYWRvd0JsdXJPdXRlcjEiPjwvZmVDb2xvck1hdHJpeD4KICAgICAgICA8L2ZpbHRlcj4KICAgIDwvZGVmcz4KICAgIDxnIGlkPSJQYWdlLTEiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxnIGlkPSLln7rnoYDmtYHnqIvlm74tMDEiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC02LjAwMDAwMCwgLTEwNS4wMDAwMDApIj4KICAgICAgICAgICAgPGcgaWQ9Ikdyb3VwIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxMC4wMDAwMDAsIDEwNy4wMDAwMDApIj4KICAgICAgICAgICAgICAgIDxnIGlkPSJSZWN0YW5nbGUtMTUtQ29weSI+CiAgICAgICAgICAgICAgICAgICAgPHVzZSBmaWxsPSJibGFjayIgZmlsbC1vcGFjaXR5PSIxIiBmaWx0ZXI9InVybCgjZmlsdGVyLTIpIiB4bGluazpocmVmPSIjcGF0aC0xIj48L3VzZT4KICAgICAgICAgICAgICAgICAgICA8dXNlIGZpbGwtb3BhY2l0eT0iMC45MiIgZmlsbD0iI0U2RjdGRiIgZmlsbC1ydWxlPSJldmVub2RkIiB4bGluazpocmVmPSIjcGF0aC0xIj48L3VzZT4KICAgICAgICAgICAgICAgICAgICA8cmVjdCBzdHJva2U9IiMxODkwRkYiIHN0cm9rZS13aWR0aD0iMSIgeD0iMC41IiB5PSIwLjUiIHdpZHRoPSI3OSIgaGVpZ2h0PSI0NyIgcng9IjQiPjwvcmVjdD4KICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgICAgIDx0ZXh0IGlkPSLluLjop4ToioLngrkiIGZvbnQtZmFtaWx5PSJQaW5nRmFuZ1NDLVJlZ3VsYXIsIFBpbmdGYW5nIFNDIiBmb250LXNpemU9IjEyIiBmb250LXdlaWdodD0ibm9ybWFsIiBsaW5lLXNwYWNpbmc9IjEyIiBmaWxsPSIjMDAwMDAwIiBmaWxsLW9wYWNpdHk9IjAuNjUiPgogICAgICAgICAgICAgICAgICAgIDx0c3BhbiB4PSIxNiIgeT0iMjkiPuW4uOinhOiKgueCuTwvdHNwYW4+CiAgICAgICAgICAgICAgICA8L3RleHQ+CiAgICAgICAgICAgIDwvZz4KICAgICAgICA8L2c+CiAgICA8L2c+Cjwvc3ZnPg=="
 93 |             data-type="node"
 94 |             data-shape="flow-rect"
 95 |             data-size="80*48"
 96 |             data-color="#1890FF"
 97 |             data-label="常规节点"
 98 |             class="getItem"
 99 |           />
100 |           <img
101 |             draggable="false"
102 |             src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iODZweCIgaGVpZ2h0PSI3OHB4IiB2aWV3Qm94PSIwIDAgODYgNzgiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8IS0tIEdlbmVyYXRvcjogU2tldGNoIDQ5LjEgKDUxMTQ3KSAtIGh0dHA6Ly93d3cuYm9oZW1pYW5jb2RpbmcuY29tL3NrZXRjaCAtLT4KICAgIDx0aXRsZT5Hcm91cCAzPC90aXRsZT4KICAgIDxkZXNjPkNyZWF0ZWQgd2l0aCBTa2V0Y2guPC9kZXNjPgogICAgPGRlZnM+CiAgICAgICAgPHBhdGggZD0iTTQyLjY3MDM3MjIsMS42Njk5NTcyOCBMNzcuNjM1MzAyNiwzMy4wMjE4OTQ1IEM3OS4yODAwNjQ4LDM0LjQ5NjcwMDMgNzkuNDE3ODQxNywzNy4wMjU2MDk5IDc3Ljk0MzAzNTksMzguNjcwMzcyMiBDNzcuODQ2MTE4NSwzOC43Nzg0NTgzIDc3Ljc0MzM4ODcsMzguODgxMTg4MSA3Ny42MzUzMDI2LDM4Ljk3ODEwNTUgTDQyLjY3MDM3MjIsNzAuMzMwMDQyNyBDNDEuMTUwODI4OSw3MS42OTI1Njg3IDM4Ljg0OTE3MTEsNzEuNjkyNTY4NyAzNy4zMjk2Mjc4LDcwLjMzMDA0MjcgTDIuMzY0Njk3NDQsMzguOTc4MTA1NSBDMC43MTk5MzUxODMsMzcuNTAzMjk5NyAwLjU4MjE1ODI3MiwzNC45NzQzOTAxIDIuMDU2OTY0MSwzMy4zMjk2Mjc4IEMyLjE1Mzg4MTUsMzMuMjIxNTQxNyAyLjI1NjYxMTI5LDMzLjExODgxMTkgMi4zNjQ2OTc0NCwzMy4wMjE4OTQ1IEwzNy4zMjk2Mjc4LDEuNjY5OTU3MjggQzM4Ljg0OTE3MTEsMC4zMDc0MzEzMDMgNDEuMTUwODI4OSwwLjMwNzQzMTMwMyA0Mi42NzAzNzIyLDEuNjY5OTU3MjggWiIgaWQ9InBhdGgtMSI+PC9wYXRoPgogICAgICAgIDxmaWx0ZXIgeD0iLTguOCUiIHk9Ii02LjklIiB3aWR0aD0iMTE3LjUlIiBoZWlnaHQ9IjExOS40JSIgZmlsdGVyVW5pdHM9Im9iamVjdEJvdW5kaW5nQm94IiBpZD0iZmlsdGVyLTIiPgogICAgICAgICAgICA8ZmVPZmZzZXQgZHg9IjAiIGR5PSIyIiBpbj0iU291cmNlQWxwaGEiIHJlc3VsdD0ic2hhZG93T2Zmc2V0T3V0ZXIxIj48L2ZlT2Zmc2V0PgogICAgICAgICAgICA8ZmVHYXVzc2lhbkJsdXIgc3RkRGV2aWF0aW9uPSIyIiBpbj0ic2hhZG93T2Zmc2V0T3V0ZXIxIiByZXN1bHQ9InNoYWRvd0JsdXJPdXRlcjEiPjwvZmVHYXVzc2lhbkJsdXI+CiAgICAgICAgICAgIDxmZUNvbXBvc2l0ZSBpbj0ic2hhZG93Qmx1ck91dGVyMSIgaW4yPSJTb3VyY2VBbHBoYSIgb3BlcmF0b3I9Im91dCIgcmVzdWx0PSJzaGFkb3dCbHVyT3V0ZXIxIj48L2ZlQ29tcG9zaXRlPgogICAgICAgICAgICA8ZmVDb2xvck1hdHJpeCB2YWx1ZXM9IjAgMCAwIDAgMCAgIDAgMCAwIDAgMCAgIDAgMCAwIDAgMCAgMCAwIDAgMC4wNCAwIiB0eXBlPSJtYXRyaXgiIGluPSJzaGFkb3dCbHVyT3V0ZXIxIj48L2ZlQ29sb3JNYXRyaXg+CiAgICAgICAgPC9maWx0ZXI+CiAgICA8L2RlZnM+CiAgICA8ZyBpZD0iUGFnZS0xIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgICAgICA8ZyBpZD0i5Z+656GA5rWB56iL5Zu+LTAxIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtNy4wMDAwMDAsIC0xODQuMDAwMDAwKSI+CiAgICAgICAgICAgIDxnIGlkPSJHcm91cC0zIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxMC4wMDAwMDAsIDE4NS4wMDAwMDApIj4KICAgICAgICAgICAgICAgIDxnIGlkPSJQb2x5Z29uIj4KICAgICAgICAgICAgICAgICAgICA8dXNlIGZpbGw9ImJsYWNrIiBmaWxsLW9wYWNpdHk9IjEiIGZpbHRlcj0idXJsKCNmaWx0ZXItMikiIHhsaW5rOmhyZWY9IiNwYXRoLTEiPjwvdXNlPgogICAgICAgICAgICAgICAgICAgIDx1c2UgZmlsbC1vcGFjaXR5PSIwLjkyIiBmaWxsPSIjRTZGRkZCIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIHhsaW5rOmhyZWY9IiNwYXRoLTEiPjwvdXNlPgogICAgICAgICAgICAgICAgICAgIDxwYXRoIHN0cm9rZT0iIzVDREJEMyIgc3Ryb2tlLXdpZHRoPSIxIiBkPSJNNDIuMzM2NTc1NywyLjA0MjIyMDQ3IEM0MS4wMDY5NzUzLDAuODUwMDEwMjM5IDM4Ljk5MzAyNDcsMC44NTAwMTAyMzkgMzcuNjYzNDI0MywyLjA0MjIyMDQ3IEwyLjY5ODQ5Mzk2LDMzLjM5NDE1NzcgQzIuNjAzOTE4NTgsMzMuNDc4OTYwNCAyLjUxNDAzMDAyLDMzLjU2ODg0OSAyLjQyOTIyNzI5LDMzLjY2MzQyNDMgQzEuMTM4NzcyMTksMzUuMTAyNTkxMyAxLjI1OTMyNjk5LDM3LjMxNTM4NzIgMi42OTg0OTM5NiwzOC42MDU4NDIzIEwzNy42NjM0MjQzLDY5Ljk1Nzc3OTUgQzM4Ljk5MzAyNDcsNzEuMTQ5OTg5OCA0MS4wMDY5NzUzLDcxLjE0OTk4OTggNDIuMzM2NTc1Nyw2OS45NTc3Nzk1IEw3Ny4zMDE1MDYsMzguNjA1ODQyMyBDNzcuMzk2MDgxNCwzOC41MjEwMzk2IDc3LjQ4NTk3LDM4LjQzMTE1MSA3Ny41NzA3NzI3LDM4LjMzNjU3NTcgQzc4Ljg2MTIyNzgsMzYuODk3NDA4NyA3OC43NDA2NzMsMzQuNjg0NjEyOCA3Ny4zMDE1MDYsMzMuMzk0MTU3NyBMNDIuMzM2NTc1NywyLjA0MjIyMDQ3IFoiPjwvcGF0aD4KICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgICAgIDx0ZXh0IGlkPSLliIblj4noioLngrkiIGZvbnQtZmFtaWx5PSJQaW5nRmFuZ1NDLVJlZ3VsYXIsIFBpbmdGYW5nIFNDIiBmb250LXNpemU9IjEyIiBmb250LXdlaWdodD0ibm9ybWFsIiBsaW5lLXNwYWNpbmc9IjEyIiBmaWxsPSIjMDAwMDAwIiBmaWxsLW9wYWNpdHk9IjAuNjUiPgogICAgICAgICAgICAgICAgICAgIDx0c3BhbiB4PSIxNiIgeT0iNDIiPuWIhuWPieiKgueCuTwvdHNwYW4+CiAgICAgICAgICAgICAgICA8L3RleHQ+CiAgICAgICAgICAgIDwvZz4KICAgICAgICA8L2c+CiAgICA8L2c+Cjwvc3ZnPg=="
103 |             data-type="node"
104 |             data-shape="flow-rhombus"
105 |             data-size="80*72"
106 |             data-color="#13C2C2"
107 |             data-label="分叉节点"
108 |             class="getItem"
109 |           />
110 |           <img
111 |             draggable="false"
112 |             src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iODhweCIgaGVpZ2h0PSI1NnB4IiB2aWV3Qm94PSIwIDAgODggNTYiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8IS0tIEdlbmVyYXRvcjogU2tldGNoIDQ5LjEgKDUxMTQ3KSAtIGh0dHA6Ly93d3cuYm9oZW1pYW5jb2RpbmcuY29tL3NrZXRjaCAtLT4KICAgIDx0aXRsZT5Hcm91cCA0PC90aXRsZT4KICAgIDxkZXNjPkNyZWF0ZWQgd2l0aCBTa2V0Y2guPC9kZXNjPgogICAgPGRlZnM+CiAgICAgICAgPHJlY3QgaWQ9InBhdGgtMSIgeD0iMCIgeT0iMCIgd2lkdGg9IjgwIiBoZWlnaHQ9IjQ4IiByeD0iMjQiPjwvcmVjdD4KICAgICAgICA8ZmlsdGVyIHg9Ii04LjglIiB5PSItMTAuNCUiIHdpZHRoPSIxMTcuNSUiIGhlaWdodD0iMTI5LjIlIiBmaWx0ZXJVbml0cz0ib2JqZWN0Qm91bmRpbmdCb3giIGlkPSJmaWx0ZXItMiI+CiAgICAgICAgICAgIDxmZU9mZnNldCBkeD0iMCIgZHk9IjIiIGluPSJTb3VyY2VBbHBoYSIgcmVzdWx0PSJzaGFkb3dPZmZzZXRPdXRlcjEiPjwvZmVPZmZzZXQ+CiAgICAgICAgICAgIDxmZUdhdXNzaWFuQmx1ciBzdGREZXZpYXRpb249IjIiIGluPSJzaGFkb3dPZmZzZXRPdXRlcjEiIHJlc3VsdD0ic2hhZG93Qmx1ck91dGVyMSI+PC9mZUdhdXNzaWFuQmx1cj4KICAgICAgICAgICAgPGZlQ29tcG9zaXRlIGluPSJzaGFkb3dCbHVyT3V0ZXIxIiBpbjI9IlNvdXJjZUFscGhhIiBvcGVyYXRvcj0ib3V0IiByZXN1bHQ9InNoYWRvd0JsdXJPdXRlcjEiPjwvZmVDb21wb3NpdGU+CiAgICAgICAgICAgIDxmZUNvbG9yTWF0cml4IHZhbHVlcz0iMCAwIDAgMCAwICAgMCAwIDAgMCAwICAgMCAwIDAgMCAwICAwIDAgMCAwLjA0IDAiIHR5cGU9Im1hdHJpeCIgaW49InNoYWRvd0JsdXJPdXRlcjEiPjwvZmVDb2xvck1hdHJpeD4KICAgICAgICA8L2ZpbHRlcj4KICAgIDwvZGVmcz4KICAgIDxnIGlkPSJQYWdlLTEiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxnIGlkPSLln7rnoYDmtYHnqIvlm74tMDEiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0xMDIuMDAwMDAwLCAtMTk1LjAwMDAwMCkiPgogICAgICAgICAgICA8ZyBpZD0iR3JvdXAtNCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTA2LjAwMDAwMCwgMTk3LjAwMDAwMCkiPgogICAgICAgICAgICAgICAgPGcgaWQ9IlJlY3RhbmdsZS0xNS1Db3B5LTM1Ij4KICAgICAgICAgICAgICAgICAgICA8dXNlIGZpbGw9ImJsYWNrIiBmaWxsLW9wYWNpdHk9IjEiIGZpbHRlcj0idXJsKCNmaWx0ZXItMikiIHhsaW5rOmhyZWY9IiNwYXRoLTEiPjwvdXNlPgogICAgICAgICAgICAgICAgICAgIDx1c2UgZmlsbC1vcGFjaXR5PSIwLjkyIiBmaWxsPSIjRjlGMEZGIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIHhsaW5rOmhyZWY9IiNwYXRoLTEiPjwvdXNlPgogICAgICAgICAgICAgICAgICAgIDxyZWN0IHN0cm9rZT0iI0IzN0ZFQiIgc3Ryb2tlLXdpZHRoPSIxIiB4PSIwLjUiIHk9IjAuNSIgd2lkdGg9Ijc5IiBoZWlnaHQ9IjQ3IiByeD0iMjMuNSI+PC9yZWN0PgogICAgICAgICAgICAgICAgPC9nPgogICAgICAgICAgICAgICAgPHRleHQgaWQ9IuaooeWei+iKgueCuSIgZm9udC1mYW1pbHk9IlBpbmdGYW5nU0MtUmVndWxhciwgUGluZ0ZhbmcgU0MiIGZvbnQtc2l6ZT0iMTIiIGZvbnQtd2VpZ2h0PSJub3JtYWwiIGxpbmUtc3BhY2luZz0iMTIiIGZpbGw9IiMwMDAwMDAiIGZpbGwtb3BhY2l0eT0iMC42NSI+CiAgICAgICAgICAgICAgICAgICAgPHRzcGFuIHg9IjE2IiB5PSIyOSI+5qih5Z6L6IqC54K5PC90c3Bhbj4KICAgICAgICAgICAgICAgIDwvdGV4dD4KICAgICAgICAgICAgPC9nPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+"
113 |             data-type="node"
114 |             data-shape="flow-capsule"
115 |             data-size="80*48"
116 |             data-color="#722ED1"
117 |             data-label="模型节点"
118 |             class="getItem"
119 |           />
120 |         </div>
121 |       </div>
122 |       <div class="center-pannel">
123 |         <div class="flow" ref="flow"></div>
124 |         <div
125 |           class="contextmenu"
126 |           ref="contextmenu"
127 |           style="position: absolute; z-index: 2;"
128 |         >
129 |           <div data-status="node-selected" class="menu" style="display: none;">
130 |             <div data-command="copy" class="command disable">
131 |               <span>复制</span>
132 |               <!-- <span>copy</span> -->
133 |             </div>
134 |             <div data-command="delete" class="command disable">
135 |               <span>删除</span>
136 |               <!-- <span>delete</span> -->
137 |             </div>
138 |           </div>
139 |           <div data-status="edge-selected" class="menu" style="display: none;">
140 |             <div data-command="delete" class="command disable">
141 |               <span>删除</span>
142 |               <!-- <span>delete</span> -->
143 |             </div>
144 |           </div>
145 |           <div data-status="group-selected" class="menu" style="display: none;">
146 |             <div data-command="copy" class="command disable">
147 |               <span>复制</span>
148 |               <!-- <span>copy</span> -->
149 |             </div>
150 |             <div data-command="delete" class="command disable">
151 |               <span>删除</span>
152 |               <!-- <span>delete</span> -->
153 |             </div>
154 |             <div data-command="unGroup" class="command disable">
155 |               <span>解组</span>
156 |               <!-- <span>unGroup</span> -->
157 |             </div>
158 |           </div>
159 |           <div
160 |             data-status="canvas-selected"
161 |             class="menu"
162 |             style="display: block;"
163 |           >
164 |             <div data-command="undo" class="command disable">
165 |               <span>撤销</span>
166 |               <!-- <span>undo</span> -->
167 |             </div>
168 |             <div data-command="redo" class="command disable">
169 |               <span>重做</span>
170 |               <!-- <span>redo</span> -->
171 |             </div>
172 |             <div data-command="pasteHere" class="command disable">
173 |               <span>粘贴</span>
174 |               <!-- <span>pasteHere</span> -->
175 |             </div>
176 |           </div>
177 |           <div data-status="multi-selected" class="menu" style="display: none;">
178 |             <div data-command="copy" class="command disable">
179 |               <span>复制</span>
180 |               <!-- <span>copy</span> -->
181 |             </div>
182 |             <div data-command="paste" class="command disable">
183 |               <span>粘贴</span>
184 |               <!-- <span>paste</span> -->
185 |             </div>
186 |             <!-- <div data-command="addGroup" class="command disable">
187 |               <span>归组</span>
188 |               <span>addGroup</span>
189 |             </div> -->
190 |             <div data-command="delete" class="command disable">
191 |               <span>删除</span>
192 |               <!-- <span>delete</span> -->
193 |             </div>
194 |           </div>
195 |         </div>
196 |       </div>
197 |       <div class="right-pannel">
198 |         <div class="detail-pannel">
199 |           <div ref="detailpannel">
200 |             <div
201 |               data-status="node-selected"
202 |               class="pannel"
203 |               style="display: none;"
204 |             >
205 |               <div class="pannel-title">节点</div>
206 |               <div class="block-container">
207 |                 <div class="p name">
208 |                   名称：
209 |                   <el-input size="mini" v-model="nodeName"></el-input>
210 |                 </div>
211 |                 <div class="p size">
212 |                   尺寸：
213 |                   <el-input size="mini" v-model="nodeWidth"></el-input>
214 |                   <el-input size="mini" v-model="nodeHeight"></el-input>
215 |                 </div>
216 |                 <div class="p color">
217 |                   颜色：
218 |                   <el-color-picker
219 |                     v-model="nodeColor"
220 |                     size="mini"
221 |                   ></el-color-picker>
222 |                 </div>
223 |               </div>
224 |             </div>
225 |             <div
226 |               data-status="edge-selected"
227 |               class="pannel"
228 |               id="edge_detailpannel"
229 |               style="display: none;"
230 |             >
231 |               <div class="pannel-title">边</div>
232 |               <div class="block-container">
233 |                 <div class="p name">
234 |                   名称：
235 |                   <el-input size="mini" v-model="edgeName"></el-input>
236 |                 </div>
237 |               </div>
238 |             </div>
239 |             <div
240 |               data-status="group-selected"
241 |               class="pannel"
242 |               id="group_detailpannel"
243 |               style="display: none;"
244 |             >
245 |               <div class="pannel-title">组</div>
246 |               <div class="block-container">
247 |                 <div class="p name">
248 |                   名称：
249 |                   <el-input size="mini" v-model="groupName"></el-input>
250 |                 </div>
251 |                 <div class="p color">
252 |                   颜色：
253 |                   <el-color-picker
254 |                     v-model="groupColor"
255 |                     size="mini"
256 |                   ></el-color-picker>
257 |                 </div>
258 |               </div>
259 |             </div>
260 |             <div
261 |               data-status="canvas-selected"
262 |               class="pannel"
263 |               id="canvas_detailpannel"
264 |               style="display: none;"
265 |             >
266 |               <div class="pannel-title">画布</div>
267 |               <div class="block-container">
268 |                 <el-checkbox v-model="gridCheck">网格对齐</el-checkbox>
269 |               </div>
270 |             </div>
271 |             <div
272 |               data-status="multi-selected"
273 |               class="pannel"
274 |               id="multi_detailpannel"
275 |               style="display: block;"
276 |             >
277 |               <div class="pannel-title">多选</div>
278 |               <div class="block-container">
279 |                 <div class="p color">
280 |                   颜色：
281 |                   <el-color-picker
282 |                     v-model="multiColor"
283 |                     size="mini"
284 |                   ></el-color-picker>
285 |                 </div>
286 |               </div>
287 |             </div>
288 |           </div>
289 |         </div>
290 |         <div class="navigator">
291 |           <span class="pannel-title">导航器</span>
292 |           <div class="mini-map" ref="minimap"></div>
293 |         </div>
294 |         <div class="zoom-slider">
295 |           <el-slider
296 |             v-model="zoomRatio"
297 |             show-input
298 |             input-size="mini"
299 |             :max="200"
300 |             :format-tooltip="formatTooltip"
301 |           ></el-slider>
302 |         </div>
303 |       </div>
304 |     </div>
305 |   </div>
306 | </template>
307 | 
308 | <script>
309 | import G6Editor from '@antv/g6-editor'
310 | // import FLowData from '@/model/flow'
311 | // import JsPDF from 'jspdf'
312 | 
313 | import '../../assets/icon/font.css'
314 | 
315 | export default {
316 |   name: 'BaseFlow',
317 |   props: {
318 |     data: Object, // 传入数据
319 |     getData: Function // 获取数据
320 |   },
321 |   components: {},
322 |   data() {
323 |     return {
324 |       page: null,
325 |       flow: null,
326 |       graph: null,
327 |       nodeId: null,
328 |       nodeName: null,
329 |       nodeWidth: null,
330 |       nodeHeight: null,
331 |       nodeColor: null,
332 |       groupId: null,
333 |       groupName: null,
334 |       groupColor: null,
335 |       edgeId: null,
336 |       edgeName: null,
337 |       multiId: [], // 多选模式选中的node节点id
338 |       multiColor: null, // 多选模式下的color，仅以最后一个为代表颜色
339 |       isMultiSelect: false, // 是否是多选模式
340 |       gridCheck: false,
341 |       zoomRatio: 100
342 |     }
343 |   },
344 |   mounted() {
345 |     this.initEditor()
346 |   },
347 |   watch: {
348 |     nodeName(newValue) {
349 |       this.flow.update(this.nodeId, {
350 |         label: newValue
351 |       })
352 |     },
353 |     nodeWidth(newValue) {
354 |       this.flow.update(this.nodeId, {
355 |         size: `${newValue}*${this.nodeHeight}`
356 |       })
357 |     },
358 |     nodeHeight(newValue) {
359 |       this.flow.update(this.nodeId, {
360 |         size: `${this.nodeWidth}*${newValue}`
361 |       })
362 |     },
363 |     multiColor(newValue) {
364 |       this.multiId.forEach(id => {
365 |         this.flow.update(id, {
366 |           color: newValue
367 |         })
368 |       })
369 |     },
370 |     nodeColor(newValue, oldValue) {
371 |       if (oldValue === null) return
372 |       this.flow.update(this.nodeId, {
373 |         color: newValue
374 |       })
375 |     },
376 |     edgeName(newValue) {
377 |       if (newValue === null) return
378 |       this.flow.update(this.edgeId, {
379 |         label: {
380 |           text: newValue
381 |         }
382 |       })
383 |     },
384 |     groupName(newValue) {
385 |       if (newValue === null) return
386 |       this.flow.update(this.groupId, {
387 |         label: newValue
388 |       })
389 |     },
390 |     groupColor(newValue) {
391 |       if (newValue === null) return
392 |       this.flow.update(this.groupId, {
393 |         color: newValue
394 |       })
395 |     },
396 |     gridCheck(newValue) {
397 |       newValue ? this.page.showGrid() : this.page.hideGrid()
398 |     },
399 |     zoomRatio(newValue) {
400 |       this.graph.zoom(newValue / 100)
401 |     }
402 |   },
403 |   methods: {
404 |     /**
405 |      * @description: 初始化编辑器
406 |      */
407 |     initEditor() {
408 |       const editor = new G6Editor()
409 |       // 关闭追踪反馈
410 |       G6Editor.track(false)
411 |       // 基础流程图
412 |       this.flow = new G6Editor.Flow({
413 |         graph: {
414 |           container: this.$refs.flow
415 |         },
416 |         align: {
417 |           grid: true // 网格对齐
418 |         },
419 |         grid: {
420 |           cell: 20 // 网孔尺寸
421 |         },
422 |         shortcut: {
423 |           zoomIn: true, // 开启放大快捷键
424 |           zoomOut: true // 开启视口缩小快捷键
425 |         }
426 |       })
427 |       // 流程图图类
428 |       this.itempannel = new G6Editor.Itempannel({
429 |         container: this.$refs.itempannel
430 |       })
431 |       // 缩略图
432 |       this.minimap = new G6Editor.Minimap({
433 |         container: this.$refs.minimap
434 |       })
435 |       // 命令工具
436 |       this.toolbar = new G6Editor.Toolbar({
437 |         container: this.$refs.toolbar
438 |       })
439 |       // 右键菜单
440 |       this.contextmenu = new G6Editor.Contextmenu({
441 |         container: this.$refs.contextmenu
442 |       })
443 |       // 详细信息面板
444 |       this.detailpannel = new G6Editor.Detailpannel({
445 |         container: this.$refs.detailpannel
446 |       })
447 | 
448 |       // 通过editor添加关联
449 |       editor.add(this.flow)
450 |       editor.add(this.itempannel)
451 |       editor.add(this.minimap)
452 |       editor.add(this.toolbar)
453 |       editor.add(this.contextmenu)
454 |       editor.add(this.detailpannel)
455 | 
456 |       // 增强清晰度
457 |       // const canvas = this.$refs.flow.childNodes[0].childNodes[0]
458 |       // const clarity = 1.5 // 清晰度
459 |       // const dpr = window.devicePixelRatio && window.devicePixelRatio >= clarity
460 |       //   ? window.devicePixelRatio : clarity
461 |       // const rect = canvas.getBoundingClientRect()
462 |       // canvas.width = rect.width * dpr
463 |       // canvas.height = rect.height * dpr
464 |       // const ctx = canvas.getContext('2d')
465 |       // ctx.scale(dpr, dpr)
466 | 
467 |       // 判断是否是多选模式
468 |       editor.on('aftercommandexecute', ev => {
469 |         switch (ev.command.name) {
470 |           case 'multiSelect':
471 |             this.multiId = [] // 多选前清空上一个状态
472 |             this.isMultiSelect = true
473 |             break
474 |           case 'undo':
475 |             this.isMultiSelect = false
476 |             break
477 |           default:
478 |             break
479 |         }
480 |       })
481 | 
482 |       // 流图读取数据
483 |       this.data && this.flow.read(this.data)
484 | 
485 |       // 获取流图的graph示例
486 |       this.graph = this.flow.getGraph()
487 |       // 居中画布中的内容
488 |       this.graph.setFitView('cc')
489 |       // 边形状映射
490 |       this.graph.edge({
491 |         style: {
492 |           stroke: '#79838e'
493 |         },
494 |         shape: 'flow-polyline-round',
495 |         labelRectStyle: {
496 |           fill: '#ffffff'
497 |         }
498 |       })
499 | 
500 |       // 获取当前页
501 |       this.page = editor.getCurrentPage()
502 |       // 默认关闭网格对齐
503 |       this.page.hideGrid()
504 |       // 修改添加边的模型
505 |       this.page.changeAddEdgeModel({
506 |         shape: 'flow-polyline-round'
507 |       })
508 |       // 选中数据处理
509 |       this.page.on('afteritemselected', ev => {
510 |         // 判断数据类型
511 |         switch (ev.item.type) {
512 |           case 'node':
513 |             if (!this.isMultiSelect) {
514 |               this.nodeId = ev.item.model.id
515 |               this.nodeName = ev.item.model.label;
516 |               [this.nodeWidth, this.nodeHeight] = ev.item.model.size.split('*')
517 |               this.nodeColor = ev.item.model.color
518 |             } else {
519 |               this.multiId.push(ev.item.model.id)
520 |               this.multiColor = ev.item.model.color
521 |             }
522 |             break
523 |           case 'edge':
524 |             this.edgeId = ev.item.model.id
525 |             this.edgeName = ev.item.model.label
526 |               ? ev.item.model.label.text
527 |               : null
528 |             break
529 |           case 'group':
530 |             this.groupId = ev.item.model.id
531 |             this.groupName = ev.item.model.label ? ev.item.model.label : null
532 |             this.groupColor = ev.item.model.color
533 |               ? ev.item.model.color
534 |               : '#f2f4f5'
535 |             break
536 |           default:
537 |             break
538 |         }
539 |       })
540 | 
541 |       // 取消多选
542 |       this.page.on('beforeitemunselected', () => {
543 |         this.isMultiSelect = false
544 |       })
545 | 
546 |       // 自动更新
547 |       this.graph.on('afterchangesize', () => {
548 |         this.graph.update()
549 |       })
550 |     },
551 | 
552 |     /**
553 |      * @description: 保存流图数据
554 |      */
555 |     saveFlow() {
556 |       const data = this.flow.save()
557 |       this.getData(data)
558 |       // this.$message({
559 |       //   message: '数据保存成功！',
560 |       //   type: 'success'
561 |       // })
562 |     },
563 | 
564 |     /**
565 |      * @description: 下载流图
566 |      */
567 |     // downloadFlow() {
568 |     //   this.page.hideGrid()
569 |     //   this.graph.setFitView('cc')
570 |     //   const canvas = this.$refs.flow.childNodes[0].childNodes[0]
571 | 
572 |     //   const imgData = canvas.toDataURL('image/png')
573 |     //   const pdf = new JsPDF({
574 |     //     orientation: 'l', // 竖排
575 |     //     unit: 'pt',
576 |     //     format: 'a4'
577 |     //   })
578 |     //   // const width = 1190.55 // a3
579 |     //   const pdfWidth = 840.51 // a4
580 |     //   pdf.addImage(imgData, 'PNG', 0, 0,
581 |     // pdfWidth, pdfWidth / canvas.width * canvas.height, '', 'FAST')
582 |     //   pdf.save('download.pdf')
583 |     // },
584 | 
585 |     /**
586 |      * @description: 格式化
587 |      */
588 |     formatTooltip(val) {
589 |       return `${val}%`
590 |     }
591 |   }
592 | }
593 | </script>
594 | 
595 | <style rel="stylesheet/scss" lang="scss" scoped>
596 | .editor {
597 |   position: relative;
598 |   width: 100%;
599 |   height: 100%;
600 |   .top-container {
601 |     position: absolute;
602 |     padding: 5px 20px;
603 |     width: 100%;
604 |     border: 1px solid #e9e9e9;
605 |     height: 42px;
606 |     display: flex;
607 |     justify-content: space-between;
608 |     align-items: center;
609 |     background: #ffffff;
610 |     box-shadow: 0px 8px 12px 0px rgba(0, 52, 107, 0.04);
611 |     .toolbar {
612 |       height: 100%;
613 |       width: 80%;
614 |       .command {
615 |         width: 27px;
616 |         height: 27px;
617 |         margin: 0px 6px;
618 |         border-radius: 2px;
619 |         padding-left: 4px;
620 |         display: inline-block;
621 |         border: 1px solid rgba(2, 2, 2, 0);
622 |       }
623 |       .disable {
624 |         color: rgba(0, 0, 0, 0.25);
625 |       }
626 |     }
627 |     .data-opt {
628 |       width: 20%;
629 |       height: 100%;
630 |       text-align: right;
631 |     }
632 |   }
633 |   .bottom-container {
634 |     padding-top: 41px;
635 |     width: 100%;
636 |     height: 100%;
637 |     display: flex;
638 |     background: #f7f9fb;
639 |     justify-content: space-around;
640 |     .title {
641 |       display: flex;
642 |       width: 100%;
643 |       align-items: center;
644 |       height: 34px;
645 |       font-weight: 600;
646 |       font-size: 16px;
647 |       padding: 0 20px;
648 |       background: #cfd4d9;
649 |     }
650 |     .left-pannel {
651 |       width: 15%;
652 |       min-width: 300px;
653 |       height: 100%;
654 |       padding: 20px;
655 |       display: inline-flex;
656 |       flex-direction: column;
657 |       align-items: center;
658 |       .itempannel-container {
659 |         width: 199px;
660 |         height: 192px;
661 |         img {
662 |           width: 92px;
663 |           height: 96px;
664 |           padding: 4px;
665 |           margin-left: 4px;
666 |           border-radius: 2px;
667 |           border: 1px solid rgba(0, 0, 0, 0);
668 |           vertical-align: middle;
669 |           cursor: pointer;
670 |         }
671 |       }
672 |     }
673 |     .center-pannel {
674 |       background: #ffffff;
675 |       display: inline-block;
676 |       width: 70%;
677 |       height: 100%;
678 |       border: 1px solid #dedbe2;
679 |       .flow {
680 |         width: 100%;
681 |         height: 100%;
682 |         overflow: hidden;
683 |       }
684 |       .contextmenu {
685 |         margin: 0px;
686 |         width: 200px;
687 |         background: white;
688 |         box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.25);
689 |         color: #000;
690 |         font-size: 12px;
691 |         display: none;
692 |         .command {
693 |           height: 12px;
694 |           padding: 8px;
695 |           box-sizing: content-box;
696 |         }
697 |         .command:hover {
698 |           cursor: pointer;
699 |           background: #e6f7ff;
700 |         }
701 |         .disable {
702 |           color: rgba(0, 0, 0, 0.25);
703 |         }
704 |       }
705 |     }
706 |     .right-pannel {
707 |       width: 15%;
708 |       min-width: 300px;
709 |       height: 100%;
710 |       display: inline-flex;
711 |       flex-direction: column;
712 |       .detail-pannel {
713 |         width: 100%;
714 |         height: 70%;
715 |         background: #f7f9fb;
716 |         border-left: 1px solid #e6e9ed;
717 |         font-size: 13px;
718 |         .pannel-title {
719 |           height: 32px;
720 |           border-top: 1px solid #dce3e8;
721 |           border-bottom: 1px solid #dce3e8;
722 |           background: #ebeef2;
723 |           color: #000;
724 |           line-height: 28px;
725 |           padding-left: 12px;
726 |         }
727 |         .block-container {
728 |           padding: 16px 8px;
729 |           .p {
730 |             margin-bottom: 12px;
731 |           }
732 |           .p.name {
733 |             .el-input {
734 |               width: 60%;
735 |               padding: 0 10px;
736 |             }
737 |           }
738 |           .p.size {
739 |             .el-input {
740 |               width: 30%;
741 |               padding: 0 10px;
742 |             }
743 |           }
744 |           .p.color {
745 |             .el-color-picker {
746 |               vertical-align: middle;
747 |             }
748 |           }
749 |         }
750 |       }
751 |       .navigator {
752 |         width: 100%;
753 |         height: 25%;
754 |         flex-grow: 1;
755 |         .pannel-title {
756 |           display: block;
757 |           height: 32px;
758 |           border-top: 1px solid #dce3e8;
759 |           border-bottom: 1px solid #dce3e8;
760 |           background: #ebeef2;
761 |           color: #000;
762 |           line-height: 28px;
763 |           padding-left: 12px;
764 |         }
765 |         .mini-map {
766 |           width: 100%;
767 |           height: calc(100% - 34px);
768 |         }
769 |       }
770 |       .zoom-slider {
771 |         width: 100%;
772 |         height: 5%;
773 |         padding: 5px 10px;
774 |         background: #ffffff;
775 |       }
776 |     }
777 |   }
778 | }
779 | </style>
780 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/LLLeno/vue-g6-editor/95d628285544043cad4243895fbb29643e3f7971/public/favicon.ico


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en" style="height: 100%;">
 3 | 
 4 | <head>
 5 |   <meta charset="utf-8">
 6 |   <meta http-equiv="X-UA-Compatible" content="IE=edge">
 7 |   <meta name="viewport" content="width=device-width,initial-scale=1.0">
 8 |   <link rel="icon" href="<%= BASE_URL %>favicon.ico">
 9 |   <title>vue-g6-editor</title>
10 | </head>
11 | 
12 | <body style="height: 100%;">
13 |   <noscript>
14 |     <strong>We're sorry but vue-g6-editor doesn't work properly without JavaScript enabled. Please enable it to
15 |       continue.</strong>
16 |   </noscript>
17 |   <div id="app"></div>
18 |   <!-- built files will be auto injected -->
19 | </body>
20 | 
21 | </html>


--------------------------------------------------------------------------------
/vue.config.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   // 修改 src 为 examples
 3 |   // css: {
 4 |   //   extract: false
 5 |   // },
 6 |   baseUrl: 'lib',
 7 |   pages: {
 8 |     index: {
 9 |       entry: 'examples/main.js',
10 |       template: 'public/index.html',
11 |       filename: 'index.html'
12 |     }
13 |   },
14 |   // 扩展 webpack 配置，使 packages 加入编译
15 |   // chainWebpack: config => {
16 |   //   config.module
17 |   //     .rule('js')
18 |   //     .include
19 |   //     .add('/packages')
20 |   //     .end()
21 |   //     .use('babel')
22 |   //     .loader('babel-loader')
23 |   //     .tap(options => {
24 |   //       // 修改它的选项...
25 |   //       return options
26 |   //     })
27 |   // }
28 | }


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