vue-wiring-diagram 1.1.25 → 1.1.26

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (32) hide show
  1. package/README.md +93 -93
  2. package/dist/style.css +1 -1
  3. package/dist/vue-wiring-diagram.es.js +4502 -4489
  4. package/dist/vue-wiring-diagram.umd.js +35 -35
  5. package/package.json +1 -1
  6. package/packages/components/Shortcuts.vue +31 -31
  7. package/packages/components/baseShape.js +62 -62
  8. package/packages/components/common.js +105 -105
  9. package/packages/components/edge-control/arrow-line.vue +292 -292
  10. package/packages/components/edge-control/condition.vue +110 -110
  11. package/packages/components/edge-control/default-line.vue +156 -156
  12. package/packages/components/edge-control/index.vue +94 -94
  13. package/packages/components/edge-control/pipe-line.vue +354 -354
  14. package/packages/components/editor/index.vue +590 -590
  15. package/packages/components/enums.js +80 -80
  16. package/packages/components/graph-control/index.vue +121 -121
  17. package/packages/components/image-control/group-form.vue +114 -114
  18. package/packages/components/image-control/image-condition.vue +117 -117
  19. package/packages/components/image-control/image-form.vue +184 -184
  20. package/packages/components/image-control/image-management.vue +213 -213
  21. package/packages/components/image-control/index.vue +290 -290
  22. package/packages/components/portsOptions.js +21 -21
  23. package/packages/components/preview/index.vue +399 -400
  24. package/packages/components/settings.js +262 -262
  25. package/packages/components/text-control/index.vue +472 -457
  26. package/packages/components/tools.js +256 -256
  27. package/packages/http.js +104 -104
  28. package/packages/index.js +43 -43
  29. package/packages/styles/animation.scss +27 -27
  30. package/packages/styles/dialog.scss +4 -4
  31. package/packages/styles/editor.scss +165 -165
  32. package/packages/styles/elPath.scss +257 -257
package/packages/components/settings.js CHANGED
@@ -1,262 +1,262 @@
1
- // 画布背景配置
2
- export const backgroundOptions = {
3
- color: '#000000',
4
- }
5
-
6
- // 画布网格配置
7
- export const gridOptions = {
8
- size: 10,
9
- visible: false,
10
- type: 'doubleMesh',
11
- args: [
12
- {
13
- color: '#282828', // 主网格线颜色
14
- thickness: 1, // 主网格线宽度
15
- },
16
- {
17
- color: '#363636', // 次网格线颜色
18
- thickness: 2, // 次网格线宽度
19
- factor: 4, // 主次网格线间隔
20
- },
21
- ],
22
- }
23
-
24
- // Stencil配置
25
- export const stencilOptions = {
26
- stencilGraphWidth: 300,
27
- stencilGraphHeight: 0,
28
- layoutOptions: {
29
- columns: 3,
30
- columnWidth: 74,
31
- resizeToFit: true,
32
- center: true,
33
- },
34
- }
35
-
36
- // 连接桩配置
37
- export const portOption = {
38
- position: 'absolute',
39
- args: {
40
- x: 0,
41
- y: 0,
42
- },
43
- attrs: {
44
- text: {
45
- fill: '#5174ff',
46
- fontSize: 8
47
- },
48
- circle: {
49
- magnet: true,
50
- stroke: '#5174ff',
51
- r: 4,
52
- },
53
- },
54
- label: {
55
- position: 'top',
56
- },
57
- }
58
-
59
- // 文字配置
60
- export const textOptions = {
61
- shape: 'rect',
62
- label: '文本',
63
- width: 50,
64
- height: 30,
65
- attrs: {
66
- body: {
67
- fill: '#00000000',
68
- stroke: '#00000000',
69
- strokeWidth: 1,
70
- rx: 6,
71
- ry: 6,
72
- },
73
- text: {
74
- fill: '#ffffff',
75
- },
76
- label: {
77
- textAnchor: 'start',
78
- x: -14,
79
- y: 0,
80
- }
81
- },
82
- data: {
83
- type: 'text',
84
- content: '文本',
85
- fields: []
86
- },
87
- ports: {
88
- groups: {
89
- ports: {
90
- portOption
91
- },
92
- }
93
- },
94
- }
95
-
96
- // 默认线配置
97
- export const defaultLine = {
98
- markup: [
99
- {
100
- tagName: 'path',
101
- selector: 'line',
102
- groupSelector: 'lines'
103
- },
104
- ],
105
- attrs: {
106
- wrap: {
107
- strokeWidth: 10
108
- },
109
- lines: {
110
- connection: true,
111
- strokeLinejoin: 'round',
112
- fill: 'none',
113
- strokeWidth: 2,
114
- },
115
- line: {
116
- stroke: '#ffffff',
117
- strokeWidth: 1,
118
- sourceMarker: {
119
- args: {
120
- width: 10,
121
- height: 10,
122
- offset: 0,
123
- },
124
- name: null
125
- },
126
- targetMarker: {
127
- args: {
128
- width: 10,
129
- height: 10,
130
- offset: 0,
131
- },
132
- name: null
133
- },
134
- },
135
- }
136
- }
137
-
138
- // 管道线配置
139
- export const pipeOptions = {
140
- markup: [
141
- {
142
- tagName: 'path',
143
- selector: 'line',
144
- groupSelector: 'lines'
145
- },
146
- {
147
- tagName: 'path',
148
- selector: 'pipe',
149
- groupSelector: 'lines'
150
- },
151
- ],
152
- attrs: {
153
- wrap: {
154
- strokeWidth: 10
155
- },
156
- lines: {
157
- connection: true,
158
- strokeLinejoin: 'round',
159
- fill: 'none',
160
- strokeWidth: 2,
161
- },
162
- line: {
163
- stroke: '#ffffff',
164
- strokeWidth: 1,
165
- targetMarker: null,
166
- sourceMarker: null
167
- },
168
- pipe: {
169
- stroke: '#2364DD',
170
- strokeWidth: 1,
171
- strokeDasharray: 5,
172
- sourceMarker: {
173
- args: {
174
- width: 10,
175
- height: 10,
176
- offset: 0,
177
- },
178
- name: null
179
- },
180
- targetMarker: {
181
- args: {
182
- width: 10,
183
- height: 10,
184
- offset: 0,
185
- },
186
- name: null
187
- },
188
- },
189
- }
190
- }
191
-
192
- // 正向箭头
193
- export const arrowForward = 'M 0 -6 8 0 0 6 z'
194
-
195
- // 逆向箭头
196
- export const arrowBackward = 'M 0 -6 -8 0 0 6 z'
197
-
198
-
199
- // 箭头线配置
200
- export const arrowOptions = {
201
- attrs: {
202
- wrap: {
203
- strokeWidth: 10
204
- },
205
- arrow: {
206
- d: arrowForward,
207
- fill: '#ED8A19',
208
- stroke: '#ED8A19',
209
- style: {
210
- animation: 'flashing 2s infinite linear'
211
- },
212
- display: 'block',
213
- },
214
- arrow1: {
215
- atConnectionRatio: 0.5,
216
- },
217
- lines: {
218
- connection: true,
219
- strokeLinejoin: 'round',
220
- fill: 'none',
221
- strokeWidth: 2,
222
- },
223
- line: {
224
- stroke: '#ffffff',
225
- strokeWidth: 1,
226
- sourceMarker: {
227
- args: {
228
- width: 10,
229
- height: 10,
230
- offset: 0,
231
- },
232
- name: null
233
- },
234
- targetMarker: {
235
- args: {
236
- width: 10,
237
- height: 10,
238
- offset: 0,
239
- },
240
- name: null
241
- },
242
- },
243
- },
244
- markup: [
245
- {
246
- tagName: 'path',
247
- selector: 'line',
248
- groupSelector: 'lines'
249
- },
250
- {
251
- tagName: 'path',
252
- groupSelector: 'arrow',
253
- selector: 'arrow1',
254
- },
255
- ]
256
- }
257
-
258
- // 线配置
259
- export const lineOptions = {
260
- markup: defaultLine.markup,
261
- attrs: defaultLine.attrs,
262
- }
1
+ // 画布背景配置
2
+ export const backgroundOptions = {
3
+ color: '#000000',
4
+ }
5
+
6
+ // 画布网格配置
7
+ export const gridOptions = {
8
+ size: 10,
9
+ visible: false,
10
+ type: 'doubleMesh',
11
+ args: [
12
+ {
13
+ color: '#282828', // 主网格线颜色
14
+ thickness: 1, // 主网格线宽度
15
+ },
16
+ {
17
+ color: '#363636', // 次网格线颜色
18
+ thickness: 2, // 次网格线宽度
19
+ factor: 4, // 主次网格线间隔
20
+ },
21
+ ],
22
+ }
23
+
24
+ // Stencil配置
25
+ export const stencilOptions = {
26
+ stencilGraphWidth: 300,
27
+ stencilGraphHeight: 0,
28
+ layoutOptions: {
29
+ columns: 3,
30
+ columnWidth: 74,
31
+ resizeToFit: true,
32
+ center: true,
33
+ },
34
+ }
35
+
36
+ // 连接桩配置
37
+ export const portOption = {
38
+ position: 'absolute',
39
+ args: {
40
+ x: 0,
41
+ y: 0,
42
+ },
43
+ attrs: {
44
+ text: {
45
+ fill: '#5174ff',
46
+ fontSize: 8
47
+ },
48
+ circle: {
49
+ magnet: true,
50
+ stroke: '#5174ff',
51
+ r: 4,
52
+ },
53
+ },
54
+ label: {
55
+ position: 'top',
56
+ },
57
+ }
58
+
59
+ // 文字配置
60
+ export const textOptions = {
61
+ shape: 'rect',
62
+ label: '文本',
63
+ width: 50,
64
+ height: 30,
65
+ attrs: {
66
+ body: {
67
+ fill: '#00000000',
68
+ stroke: '#00000000',
69
+ strokeWidth: 1,
70
+ rx: 6,
71
+ ry: 6,
72
+ },
73
+ text: {
74
+ fill: '#ffffff',
75
+ },
76
+ label: {
77
+ textAnchor: 'start',
78
+ x: -14,
79
+ y: 0,
80
+ }
81
+ },
82
+ data: {
83
+ type: 'text',
84
+ content: '文本',
85
+ fields: []
86
+ },
87
+ ports: {
88
+ groups: {
89
+ ports: {
90
+ portOption
91
+ },
92
+ }
93
+ },
94
+ }
95
+
96
+ // 默认线配置
97
+ export const defaultLine = {
98
+ markup: [
99
+ {
100
+ tagName: 'path',
101
+ selector: 'line',
102
+ groupSelector: 'lines'
103
+ },
104
+ ],
105
+ attrs: {
106
+ wrap: {
107
+ strokeWidth: 10
108
+ },
109
+ lines: {
110
+ connection: true,
111
+ strokeLinejoin: 'round',
112
+ fill: 'none',
113
+ strokeWidth: 2,
114
+ },
115
+ line: {
116
+ stroke: '#ffffff',
117
+ strokeWidth: 1,
118
+ sourceMarker: {
119
+ args: {
120
+ width: 10,
121
+ height: 10,
122
+ offset: 0,
123
+ },
124
+ name: null
125
+ },
126
+ targetMarker: {
127
+ args: {
128
+ width: 10,
129
+ height: 10,
130
+ offset: 0,
131
+ },
132
+ name: null
133
+ },
134
+ },
135
+ }
136
+ }
137
+
138
+ // 管道线配置
139
+ export const pipeOptions = {
140
+ markup: [
141
+ {
142
+ tagName: 'path',
143
+ selector: 'line',
144
+ groupSelector: 'lines'
145
+ },
146
+ {
147
+ tagName: 'path',
148
+ selector: 'pipe',
149
+ groupSelector: 'lines'
150
+ },
151
+ ],
152
+ attrs: {
153
+ wrap: {
154
+ strokeWidth: 10
155
+ },
156
+ lines: {
157
+ connection: true,
158
+ strokeLinejoin: 'round',
159
+ fill: 'none',
160
+ strokeWidth: 2,
161
+ },
162
+ line: {
163
+ stroke: '#ffffff',
164
+ strokeWidth: 1,
165
+ targetMarker: null,
166
+ sourceMarker: null
167
+ },
168
+ pipe: {
169
+ stroke: '#2364DD',
170
+ strokeWidth: 1,
171
+ strokeDasharray: 5,
172
+ sourceMarker: {
173
+ args: {
174
+ width: 10,
175
+ height: 10,
176
+ offset: 0,
177
+ },
178
+ name: null
179
+ },
180
+ targetMarker: {
181
+ args: {
182
+ width: 10,
183
+ height: 10,
184
+ offset: 0,
185
+ },
186
+ name: null
187
+ },
188
+ },
189
+ }
190
+ }
191
+
192
+ // 正向箭头
193
+ export const arrowForward = 'M 0 -6 8 0 0 6 z'
194
+
195
+ // 逆向箭头
196
+ export const arrowBackward = 'M 0 -6 -8 0 0 6 z'
197
+
198
+
199
+ // 箭头线配置
200
+ export const arrowOptions = {
201
+ attrs: {
202
+ wrap: {
203
+ strokeWidth: 10
204
+ },
205
+ arrow: {
206
+ d: arrowForward,
207
+ fill: '#ED8A19',
208
+ stroke: '#ED8A19',
209
+ style: {
210
+ animation: 'flashing 2s infinite linear'
211
+ },
212
+ display: 'block',
213
+ },
214
+ arrow1: {
215
+ atConnectionRatio: 0.5,
216
+ },
217
+ lines: {
218
+ connection: true,
219
+ strokeLinejoin: 'round',
220
+ fill: 'none',
221
+ strokeWidth: 2,
222
+ },
223
+ line: {
224
+ stroke: '#ffffff',
225
+ strokeWidth: 1,
226
+ sourceMarker: {
227
+ args: {
228
+ width: 10,
229
+ height: 10,
230
+ offset: 0,
231
+ },
232
+ name: null
233
+ },
234
+ targetMarker: {
235
+ args: {
236
+ width: 10,
237
+ height: 10,
238
+ offset: 0,
239
+ },
240
+ name: null
241
+ },
242
+ },
243
+ },
244
+ markup: [
245
+ {
246
+ tagName: 'path',
247
+ selector: 'line',
248
+ groupSelector: 'lines'
249
+ },
250
+ {
251
+ tagName: 'path',
252
+ groupSelector: 'arrow',
253
+ selector: 'arrow1',
254
+ },
255
+ ]
256
+ }
257
+
258
+ // 线配置
259
+ export const lineOptions = {
260
+ markup: defaultLine.markup,
261
+ attrs: defaultLine.attrs,
262
+ }