@xyflow/vue 2.0.0-next.1 → 2.0.0-next.3
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.
- package/dist/base.css +161 -79
- package/dist/index.d.mts +7 -8
- package/dist/index.d.ts +7 -8
- package/dist/index.js +15 -63
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +17 -65
- package/dist/index.mjs.map +1 -1
- package/dist/style.css +203 -133
- package/package.json +1 -1
package/dist/base.css
CHANGED
|
@@ -1,29 +1,34 @@
|
|
|
1
1
|
/* this will be exported as base.css and can be used for a basic styling */
|
|
2
|
+
|
|
3
|
+
@layer xyflow {
|
|
4
|
+
|
|
2
5
|
/* these are the necessary styles for React/Svelte Flow, they get used by base.css and style.css */
|
|
6
|
+
|
|
3
7
|
.vue-flow {
|
|
4
8
|
direction: ltr;
|
|
9
|
+
color-scheme: light dark;
|
|
5
10
|
|
|
6
|
-
--xy-edge-stroke-default: #b1b1b7;
|
|
11
|
+
--xy-edge-stroke-default: light-dark(#b1b1b7, #3e3e3e);
|
|
7
12
|
--xy-edge-stroke-width-default: 1;
|
|
8
|
-
--xy-edge-stroke-selected-default: #555;
|
|
13
|
+
--xy-edge-stroke-selected-default: light-dark(#555, #727272);
|
|
9
14
|
|
|
10
15
|
--xy-connectionline-stroke-default: #b1b1b7;
|
|
11
16
|
--xy-connectionline-stroke-width-default: 1;
|
|
12
17
|
|
|
13
|
-
--xy-attribution-background-color-default: rgba(255, 255, 255, 0.5);
|
|
18
|
+
--xy-attribution-background-color-default: light-dark(rgba(255, 255, 255, 0.5), rgba(150, 150, 150, 0.25));
|
|
14
19
|
|
|
15
|
-
--xy-minimap-background-color-default: #fff;
|
|
16
|
-
--xy-minimap-mask-background-color-default: rgba(240, 240, 240, 0.6);
|
|
20
|
+
--xy-minimap-background-color-default: light-dark(#fff, #141414);
|
|
21
|
+
--xy-minimap-mask-background-color-default: light-dark(rgba(240, 240, 240, 0.6), rgba(60, 60, 60, 0.6));
|
|
17
22
|
--xy-minimap-mask-stroke-color-default: transparent;
|
|
18
23
|
--xy-minimap-mask-stroke-width-default: 1;
|
|
19
|
-
--xy-minimap-node-background-color-default: #e2e2e2;
|
|
24
|
+
--xy-minimap-node-background-color-default: light-dark(#e2e2e2, #2b2b2b);
|
|
20
25
|
--xy-minimap-node-stroke-color-default: transparent;
|
|
21
26
|
--xy-minimap-node-stroke-width-default: 2;
|
|
22
27
|
|
|
23
|
-
--xy-background-color-default: transparent;
|
|
24
|
-
--xy-background-pattern-dots-color-default: #91919a;
|
|
25
|
-
--xy-background-pattern-lines-color-default: #eee;
|
|
26
|
-
--xy-background-pattern-cross-color-default: #e2e2e2;
|
|
28
|
+
--xy-background-color-default: light-dark(transparent, #141414);
|
|
29
|
+
--xy-background-pattern-dots-color-default: light-dark(#91919a, #555);
|
|
30
|
+
--xy-background-pattern-lines-color-default: light-dark(#eee, #333);
|
|
31
|
+
--xy-background-pattern-cross-color-default: light-dark(#e2e2e2, #333);
|
|
27
32
|
background-color: var(--xy-background-color, var(--xy-background-color-default));
|
|
28
33
|
--xy-node-border-default: 1px solid #bbb;
|
|
29
34
|
--xy-node-border-selected-default: 1px solid #555;
|
|
@@ -34,35 +39,23 @@
|
|
|
34
39
|
--xy-selection-border-default: 1px dotted rgba(155, 155, 155, 0.8);
|
|
35
40
|
--xy-resize-background-color-default: #3367d9;
|
|
36
41
|
}
|
|
37
|
-
.vue-flow.dark {
|
|
38
|
-
--xy-edge-stroke-default: #3e3e3e;
|
|
39
|
-
--xy-edge-stroke-width-default: 1;
|
|
40
|
-
--xy-edge-stroke-selected-default: #727272;
|
|
41
|
-
|
|
42
|
-
--xy-connectionline-stroke-default: #b1b1b7;
|
|
43
|
-
--xy-connectionline-stroke-width-default: 1;
|
|
44
|
-
|
|
45
|
-
--xy-attribution-background-color-default: rgba(150, 150, 150, 0.25);
|
|
46
42
|
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
--xy-minimap-node-background-color-default: #2b2b2b;
|
|
52
|
-
--xy-minimap-node-stroke-color-default: transparent;
|
|
53
|
-
--xy-minimap-node-stroke-width-default: 2;
|
|
43
|
+
[data-theme='dark'] .vue-flow,
|
|
44
|
+
.vue-flow.dark {
|
|
45
|
+
color-scheme: dark;
|
|
46
|
+
}
|
|
54
47
|
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
--xy-background-pattern-cross-color-default: #777;
|
|
59
|
-
--xy-node-color-default: #f8f8f8;
|
|
48
|
+
[data-theme='light'] .vue-flow,
|
|
49
|
+
.vue-flow.light {
|
|
50
|
+
color-scheme: light;
|
|
60
51
|
}
|
|
52
|
+
|
|
61
53
|
.vue-flow__background {
|
|
62
54
|
background-color: var(--xy-background-color-props, var(--xy-background-color, var(--xy-background-color-default)));
|
|
63
55
|
pointer-events: none;
|
|
64
56
|
z-index: -1;
|
|
65
57
|
}
|
|
58
|
+
|
|
66
59
|
.vue-flow__container {
|
|
67
60
|
position: absolute;
|
|
68
61
|
width: 100%;
|
|
@@ -70,111 +63,139 @@
|
|
|
70
63
|
top: 0;
|
|
71
64
|
left: 0;
|
|
72
65
|
}
|
|
66
|
+
|
|
73
67
|
.vue-flow__pane {
|
|
74
68
|
z-index: 1;
|
|
75
69
|
touch-action: none;
|
|
76
70
|
}
|
|
77
|
-
|
|
71
|
+
|
|
72
|
+
.vue-flow__pane.draggable {
|
|
78
73
|
cursor: grab;
|
|
79
74
|
}
|
|
80
|
-
|
|
75
|
+
|
|
76
|
+
.vue-flow__pane.dragging {
|
|
81
77
|
cursor: grabbing;
|
|
82
78
|
}
|
|
83
|
-
|
|
79
|
+
|
|
80
|
+
.vue-flow__pane.selection {
|
|
84
81
|
cursor: pointer;
|
|
85
82
|
}
|
|
83
|
+
|
|
86
84
|
.vue-flow__viewport {
|
|
87
85
|
transform-origin: 0 0;
|
|
88
86
|
z-index: 2;
|
|
89
87
|
pointer-events: none;
|
|
90
88
|
}
|
|
89
|
+
|
|
91
90
|
.vue-flow__renderer {
|
|
92
91
|
z-index: 4;
|
|
93
92
|
}
|
|
93
|
+
|
|
94
94
|
.vue-flow__selection {
|
|
95
95
|
z-index: 6;
|
|
96
96
|
}
|
|
97
|
+
|
|
97
98
|
.vue-flow__nodesselection-rect:focus,
|
|
98
99
|
.vue-flow__nodesselection-rect:focus-visible {
|
|
99
100
|
outline: none;
|
|
100
101
|
}
|
|
102
|
+
|
|
101
103
|
.vue-flow__edge-path {
|
|
102
104
|
stroke: var(--xy-edge-stroke, var(--xy-edge-stroke-default));
|
|
103
105
|
stroke-width: var(--xy-edge-stroke-width, var(--xy-edge-stroke-width-default));
|
|
104
106
|
fill: none;
|
|
105
107
|
}
|
|
108
|
+
|
|
106
109
|
.vue-flow__connection-path {
|
|
107
110
|
stroke: var(--xy-connectionline-stroke, var(--xy-connectionline-stroke-default));
|
|
108
111
|
stroke-width: var(--xy-connectionline-stroke-width, var(--xy-connectionline-stroke-width-default));
|
|
109
112
|
fill: none;
|
|
110
113
|
}
|
|
114
|
+
|
|
111
115
|
.vue-flow .vue-flow__edges {
|
|
112
116
|
position: absolute;
|
|
113
117
|
}
|
|
114
|
-
|
|
118
|
+
|
|
119
|
+
.vue-flow .vue-flow__edges svg {
|
|
115
120
|
overflow: visible;
|
|
116
121
|
position: absolute;
|
|
117
122
|
pointer-events: none;
|
|
118
123
|
}
|
|
124
|
+
|
|
119
125
|
.vue-flow__edge {
|
|
120
126
|
pointer-events: visibleStroke;
|
|
121
127
|
}
|
|
122
|
-
|
|
128
|
+
|
|
129
|
+
.vue-flow__edge.selectable {
|
|
123
130
|
cursor: pointer;
|
|
124
131
|
}
|
|
125
|
-
|
|
132
|
+
|
|
133
|
+
.vue-flow__edge.animated path {
|
|
126
134
|
stroke-dasharray: 5;
|
|
127
135
|
animation: dashdraw 0.5s linear infinite;
|
|
128
136
|
}
|
|
129
|
-
|
|
137
|
+
|
|
138
|
+
.vue-flow__edge.animated path.vue-flow__edge-interaction {
|
|
130
139
|
stroke-dasharray: none;
|
|
131
140
|
animation: none;
|
|
132
141
|
}
|
|
133
|
-
|
|
142
|
+
|
|
143
|
+
.vue-flow__edge.inactive {
|
|
134
144
|
pointer-events: none;
|
|
135
145
|
}
|
|
136
|
-
|
|
146
|
+
|
|
147
|
+
.vue-flow__edge.selected,
|
|
137
148
|
.vue-flow__edge:focus,
|
|
138
149
|
.vue-flow__edge:focus-visible {
|
|
139
150
|
outline: none;
|
|
140
151
|
}
|
|
141
|
-
|
|
152
|
+
|
|
153
|
+
.vue-flow__edge.selected .vue-flow__edge-path,
|
|
142
154
|
.vue-flow__edge.selectable:focus .vue-flow__edge-path,
|
|
143
155
|
.vue-flow__edge.selectable:focus-visible .vue-flow__edge-path {
|
|
144
156
|
stroke: var(--xy-edge-stroke-selected, var(--xy-edge-stroke-selected-default));
|
|
145
157
|
}
|
|
146
|
-
|
|
158
|
+
|
|
159
|
+
.vue-flow__edge-textwrapper {
|
|
147
160
|
pointer-events: all;
|
|
148
161
|
}
|
|
149
|
-
|
|
162
|
+
|
|
163
|
+
.vue-flow__edge .vue-flow__edge-text {
|
|
150
164
|
pointer-events: none;
|
|
151
165
|
-webkit-user-select: none;
|
|
152
166
|
-moz-user-select: none;
|
|
153
167
|
user-select: none;
|
|
154
168
|
}
|
|
169
|
+
|
|
155
170
|
/* Arrowhead marker styles - use CSS custom properties as default */
|
|
156
171
|
.vue-flow__arrowhead polyline {
|
|
157
172
|
stroke: var(--xy-edge-stroke, var(--xy-edge-stroke-default));
|
|
158
173
|
}
|
|
174
|
+
|
|
159
175
|
.vue-flow__arrowhead polyline.arrowclosed {
|
|
160
176
|
fill: var(--xy-edge-stroke, var(--xy-edge-stroke-default));
|
|
161
177
|
}
|
|
178
|
+
|
|
162
179
|
.vue-flow__connection {
|
|
163
180
|
pointer-events: none;
|
|
164
181
|
}
|
|
165
|
-
|
|
182
|
+
|
|
183
|
+
.vue-flow__connection .animated {
|
|
166
184
|
stroke-dasharray: 5;
|
|
167
185
|
animation: dashdraw 0.5s linear infinite;
|
|
168
186
|
}
|
|
187
|
+
|
|
169
188
|
svg.vue-flow__connectionline {
|
|
170
189
|
z-index: 1001;
|
|
171
190
|
overflow: visible;
|
|
172
191
|
position: absolute;
|
|
173
192
|
}
|
|
193
|
+
|
|
174
194
|
.vue-flow__nodes {
|
|
175
195
|
pointer-events: none;
|
|
176
196
|
transform-origin: 0 0;
|
|
177
197
|
}
|
|
198
|
+
|
|
178
199
|
.vue-flow__node {
|
|
179
200
|
position: absolute;
|
|
180
201
|
-webkit-user-select: none;
|
|
@@ -185,26 +206,32 @@ svg.vue-flow__connectionline {
|
|
|
185
206
|
box-sizing: border-box;
|
|
186
207
|
cursor: default;
|
|
187
208
|
}
|
|
188
|
-
|
|
209
|
+
|
|
210
|
+
.vue-flow__node.selectable {
|
|
189
211
|
cursor: pointer;
|
|
190
212
|
}
|
|
191
|
-
|
|
213
|
+
|
|
214
|
+
.vue-flow__node.draggable {
|
|
192
215
|
cursor: grab;
|
|
193
216
|
pointer-events: all;
|
|
194
217
|
}
|
|
195
|
-
|
|
218
|
+
|
|
219
|
+
.vue-flow__node.draggable.dragging {
|
|
196
220
|
cursor: grabbing;
|
|
197
221
|
}
|
|
222
|
+
|
|
198
223
|
.vue-flow__nodesselection {
|
|
199
224
|
z-index: 3;
|
|
200
225
|
transform-origin: left top;
|
|
201
226
|
pointer-events: none;
|
|
202
227
|
}
|
|
203
|
-
|
|
228
|
+
|
|
229
|
+
.vue-flow__nodesselection-rect {
|
|
204
230
|
position: absolute;
|
|
205
231
|
pointer-events: all;
|
|
206
232
|
cursor: grab;
|
|
207
233
|
}
|
|
234
|
+
|
|
208
235
|
.vue-flow__handle {
|
|
209
236
|
position: absolute;
|
|
210
237
|
pointer-events: none;
|
|
@@ -212,81 +239,98 @@ svg.vue-flow__connectionline {
|
|
|
212
239
|
min-height: 5px;
|
|
213
240
|
background-color: var(--xy-handle-background-color, var(--xy-handle-background-color-default));
|
|
214
241
|
}
|
|
215
|
-
|
|
242
|
+
|
|
243
|
+
.vue-flow__handle.connectingfrom {
|
|
216
244
|
pointer-events: all;
|
|
217
245
|
}
|
|
218
|
-
|
|
246
|
+
|
|
247
|
+
.vue-flow__handle.connectionindicator {
|
|
219
248
|
pointer-events: all;
|
|
220
249
|
cursor: crosshair;
|
|
221
250
|
}
|
|
222
|
-
|
|
251
|
+
|
|
252
|
+
.vue-flow__handle-bottom {
|
|
223
253
|
top: auto;
|
|
224
254
|
left: 50%;
|
|
225
255
|
bottom: 0;
|
|
226
256
|
transform: translate(-50%, 50%);
|
|
227
257
|
}
|
|
228
|
-
|
|
258
|
+
|
|
259
|
+
.vue-flow__handle-top {
|
|
229
260
|
top: 0;
|
|
230
261
|
left: 50%;
|
|
231
262
|
transform: translate(-50%, -50%);
|
|
232
263
|
}
|
|
233
|
-
|
|
264
|
+
|
|
265
|
+
.vue-flow__handle-left {
|
|
234
266
|
top: 50%;
|
|
235
267
|
left: 0;
|
|
236
268
|
transform: translate(-50%, -50%);
|
|
237
269
|
}
|
|
238
|
-
|
|
270
|
+
|
|
271
|
+
.vue-flow__handle-right {
|
|
239
272
|
top: 50%;
|
|
240
273
|
right: 0;
|
|
241
274
|
transform: translate(50%, -50%);
|
|
242
275
|
}
|
|
276
|
+
|
|
243
277
|
.vue-flow__edgeupdater {
|
|
244
278
|
cursor: move;
|
|
245
279
|
pointer-events: all;
|
|
246
280
|
}
|
|
281
|
+
|
|
247
282
|
.vue-flow__pane.selection .vue-flow__panel {
|
|
248
283
|
pointer-events: none;
|
|
249
284
|
}
|
|
285
|
+
|
|
250
286
|
.vue-flow__panel {
|
|
251
287
|
position: absolute;
|
|
252
288
|
z-index: 5;
|
|
253
289
|
margin: 15px;
|
|
254
290
|
}
|
|
255
|
-
|
|
291
|
+
|
|
292
|
+
.vue-flow__panel.top {
|
|
256
293
|
top: 0;
|
|
257
294
|
}
|
|
258
|
-
|
|
295
|
+
|
|
296
|
+
.vue-flow__panel.bottom {
|
|
259
297
|
bottom: 0;
|
|
260
298
|
}
|
|
261
|
-
.vue-flow__panel.top.center, .vue-flow__panel.bottom.center {
|
|
299
|
+
.vue-flow__panel.top.center, .vue-flow__panel.bottom.center {
|
|
262
300
|
left: 50%;
|
|
263
301
|
transform: translateX(-15px) translateX(-50%);
|
|
264
302
|
}
|
|
265
|
-
|
|
303
|
+
|
|
304
|
+
.vue-flow__panel.left {
|
|
266
305
|
left: 0;
|
|
267
306
|
}
|
|
268
|
-
|
|
307
|
+
|
|
308
|
+
.vue-flow__panel.right {
|
|
269
309
|
right: 0;
|
|
270
310
|
}
|
|
271
|
-
.vue-flow__panel.left.center, .vue-flow__panel.right.center {
|
|
311
|
+
.vue-flow__panel.left.center, .vue-flow__panel.right.center {
|
|
272
312
|
top: 50%;
|
|
273
313
|
transform: translateY(-15px) translateY(-50%);
|
|
274
314
|
}
|
|
315
|
+
|
|
275
316
|
.vue-flow__attribution {
|
|
276
317
|
font-size: 10px;
|
|
277
318
|
background: var(--xy-attribution-background-color, var(--xy-attribution-background-color-default));
|
|
278
319
|
padding: 2px 3px;
|
|
279
320
|
margin: 0;
|
|
280
321
|
}
|
|
281
|
-
|
|
322
|
+
|
|
323
|
+
.vue-flow__attribution a {
|
|
282
324
|
text-decoration: none;
|
|
283
325
|
color: #999;
|
|
284
326
|
}
|
|
327
|
+
|
|
285
328
|
@keyframes dashdraw {
|
|
286
329
|
from {
|
|
287
330
|
stroke-dashoffset: 10;
|
|
288
331
|
}
|
|
289
332
|
}
|
|
333
|
+
|
|
290
334
|
.vue-flow__edgelabel-renderer {
|
|
291
335
|
position: absolute;
|
|
292
336
|
width: 100%;
|
|
@@ -298,6 +342,7 @@ svg.vue-flow__connectionline {
|
|
|
298
342
|
left: 0;
|
|
299
343
|
top: 0;
|
|
300
344
|
}
|
|
345
|
+
|
|
301
346
|
.vue-flow__viewport-portal {
|
|
302
347
|
position: absolute;
|
|
303
348
|
width: 100%;
|
|
@@ -308,16 +353,19 @@ svg.vue-flow__connectionline {
|
|
|
308
353
|
-moz-user-select: none;
|
|
309
354
|
user-select: none;
|
|
310
355
|
}
|
|
356
|
+
|
|
311
357
|
.vue-flow__minimap {
|
|
312
358
|
background: var(
|
|
313
359
|
--xy-minimap-background-color-props,
|
|
314
360
|
var(--xy-minimap-background-color, var(--xy-minimap-background-color-default))
|
|
315
361
|
);
|
|
316
362
|
}
|
|
317
|
-
|
|
363
|
+
|
|
364
|
+
.vue-flow__minimap-svg {
|
|
318
365
|
display: block;
|
|
319
366
|
}
|
|
320
|
-
|
|
367
|
+
|
|
368
|
+
.vue-flow__minimap-mask {
|
|
321
369
|
fill: var(
|
|
322
370
|
--xy-minimap-mask-background-color-props,
|
|
323
371
|
var(--xy-minimap-mask-background-color, var(--xy-minimap-mask-background-color-default))
|
|
@@ -331,7 +379,8 @@ svg.vue-flow__connectionline {
|
|
|
331
379
|
var(--xy-minimap-mask-stroke-width, var(--xy-minimap-mask-stroke-width-default))
|
|
332
380
|
);
|
|
333
381
|
}
|
|
334
|
-
|
|
382
|
+
|
|
383
|
+
.vue-flow__minimap-node {
|
|
335
384
|
fill: var(
|
|
336
385
|
--xy-minimap-node-background-color-props,
|
|
337
386
|
var(--xy-minimap-node-background-color, var(--xy-minimap-node-background-color-default))
|
|
@@ -345,32 +394,37 @@ svg.vue-flow__connectionline {
|
|
|
345
394
|
var(--xy-minimap-node-stroke-width, var(--xy-minimap-node-stroke-width-default))
|
|
346
395
|
);
|
|
347
396
|
}
|
|
348
|
-
.vue-flow__background-pattern.dots {
|
|
397
|
+
.vue-flow__background-pattern.dots {
|
|
349
398
|
fill: var(
|
|
350
399
|
--xy-background-pattern-color-props,
|
|
351
400
|
var(--xy-background-pattern-color, var(--xy-background-pattern-dots-color-default))
|
|
352
401
|
);
|
|
353
402
|
}
|
|
354
|
-
|
|
403
|
+
|
|
404
|
+
.vue-flow__background-pattern.lines {
|
|
355
405
|
stroke: var(
|
|
356
406
|
--xy-background-pattern-color-props,
|
|
357
407
|
var(--xy-background-pattern-color, var(--xy-background-pattern-lines-color-default))
|
|
358
408
|
);
|
|
359
409
|
}
|
|
360
|
-
|
|
410
|
+
|
|
411
|
+
.vue-flow__background-pattern.cross {
|
|
361
412
|
stroke: var(
|
|
362
413
|
--xy-background-pattern-color-props,
|
|
363
414
|
var(--xy-background-pattern-color, var(--xy-background-pattern-cross-color-default))
|
|
364
415
|
);
|
|
365
416
|
}
|
|
417
|
+
|
|
366
418
|
.vue-flow__controls {
|
|
367
419
|
display: flex;
|
|
368
420
|
flex-direction: column;
|
|
369
421
|
}
|
|
370
|
-
|
|
422
|
+
|
|
423
|
+
.vue-flow__controls.horizontal {
|
|
371
424
|
flex-direction: row;
|
|
372
425
|
}
|
|
373
|
-
|
|
426
|
+
|
|
427
|
+
.vue-flow__controls-button {
|
|
374
428
|
display: flex;
|
|
375
429
|
justify-content: center;
|
|
376
430
|
align-items: center;
|
|
@@ -378,12 +432,17 @@ svg.vue-flow__connectionline {
|
|
|
378
432
|
width: 26px;
|
|
379
433
|
padding: 4px;
|
|
380
434
|
}
|
|
381
|
-
|
|
435
|
+
|
|
436
|
+
.vue-flow__controls-button svg {
|
|
382
437
|
width: 100%;
|
|
383
438
|
max-width: 12px;
|
|
384
439
|
max-height: 12px;
|
|
385
440
|
fill: currentColor;
|
|
386
441
|
}
|
|
442
|
+
}
|
|
443
|
+
|
|
444
|
+
@layer xyflow {
|
|
445
|
+
|
|
387
446
|
.vue-flow__node-input,
|
|
388
447
|
.vue-flow__node-default,
|
|
389
448
|
.vue-flow__node-output,
|
|
@@ -391,7 +450,8 @@ svg.vue-flow__connectionline {
|
|
|
391
450
|
border: var(--xy-node-border, var(--xy-node-border-default));
|
|
392
451
|
color: var(--xy-node-color, var(--xy-node-color-default));
|
|
393
452
|
}
|
|
394
|
-
|
|
453
|
+
|
|
454
|
+
.vue-flow__node-input.selected,
|
|
395
455
|
.vue-flow__node-input:focus,
|
|
396
456
|
.vue-flow__node-input:focus-visible,
|
|
397
457
|
.vue-flow__node-default.selected,
|
|
@@ -406,30 +466,40 @@ svg.vue-flow__connectionline {
|
|
|
406
466
|
outline: none;
|
|
407
467
|
border: var(--xy-node-border-selected, var(--xy-node-border-selected-default));
|
|
408
468
|
}
|
|
469
|
+
|
|
409
470
|
.vue-flow__nodesselection-rect,
|
|
410
471
|
.vue-flow__selection {
|
|
411
472
|
background: var(--xy-selection-background-color, var(--xy-selection-background-color-default));
|
|
412
473
|
border: var(--xy-selection-border, var(--xy-selection-border-default));
|
|
413
474
|
}
|
|
475
|
+
}
|
|
476
|
+
|
|
477
|
+
@layer xyflow {
|
|
478
|
+
|
|
414
479
|
.vue-flow__resize-control {
|
|
415
480
|
position: absolute;
|
|
416
481
|
}
|
|
482
|
+
|
|
417
483
|
.vue-flow__resize-control.left,
|
|
418
484
|
.vue-flow__resize-control.right {
|
|
419
485
|
cursor: ew-resize;
|
|
420
486
|
}
|
|
487
|
+
|
|
421
488
|
.vue-flow__resize-control.top,
|
|
422
489
|
.vue-flow__resize-control.bottom {
|
|
423
490
|
cursor: ns-resize;
|
|
424
491
|
}
|
|
492
|
+
|
|
425
493
|
.vue-flow__resize-control.top.left,
|
|
426
494
|
.vue-flow__resize-control.bottom.right {
|
|
427
495
|
cursor: nwse-resize;
|
|
428
496
|
}
|
|
497
|
+
|
|
429
498
|
.vue-flow__resize-control.bottom.left,
|
|
430
499
|
.vue-flow__resize-control.top.right {
|
|
431
500
|
cursor: nesw-resize;
|
|
432
501
|
}
|
|
502
|
+
|
|
433
503
|
/* handle styles */
|
|
434
504
|
.vue-flow__resize-control.handle {
|
|
435
505
|
width: 5px;
|
|
@@ -439,6 +509,7 @@ svg.vue-flow__connectionline {
|
|
|
439
509
|
background-color: var(--xy-resize-background-color, var(--xy-resize-background-color-default));
|
|
440
510
|
translate: -50% -50%;
|
|
441
511
|
}
|
|
512
|
+
|
|
442
513
|
.vue-flow__resize-control.handle.left {
|
|
443
514
|
left: 0;
|
|
444
515
|
top: 50%;
|
|
@@ -467,12 +538,14 @@ svg.vue-flow__connectionline {
|
|
|
467
538
|
.vue-flow__resize-control.handle.bottom.right {
|
|
468
539
|
left: 100%;
|
|
469
540
|
}
|
|
541
|
+
|
|
470
542
|
/* line styles */
|
|
471
543
|
.vue-flow__resize-control.line {
|
|
472
544
|
border-color: var(--xy-resize-background-color, var(--xy-resize-background-color-default));
|
|
473
545
|
border-width: 0;
|
|
474
546
|
border-style: solid;
|
|
475
547
|
}
|
|
548
|
+
|
|
476
549
|
.vue-flow__resize-control.line.left,
|
|
477
550
|
.vue-flow__resize-control.line.right {
|
|
478
551
|
width: 1px;
|
|
@@ -480,14 +553,17 @@ svg.vue-flow__connectionline {
|
|
|
480
553
|
top: 0;
|
|
481
554
|
height: 100%;
|
|
482
555
|
}
|
|
556
|
+
|
|
483
557
|
.vue-flow__resize-control.line.left {
|
|
484
558
|
left: 0;
|
|
485
559
|
border-left-width: 1px;
|
|
486
560
|
}
|
|
561
|
+
|
|
487
562
|
.vue-flow__resize-control.line.right {
|
|
488
563
|
left: 100%;
|
|
489
564
|
border-right-width: 1px;
|
|
490
565
|
}
|
|
566
|
+
|
|
491
567
|
.vue-flow__resize-control.line.top,
|
|
492
568
|
.vue-flow__resize-control.line.bottom {
|
|
493
569
|
height: 1px;
|
|
@@ -495,20 +571,26 @@ svg.vue-flow__connectionline {
|
|
|
495
571
|
left: 0;
|
|
496
572
|
width: 100%;
|
|
497
573
|
}
|
|
574
|
+
|
|
498
575
|
.vue-flow__resize-control.line.top {
|
|
499
576
|
top: 0;
|
|
500
577
|
border-top-width: 1px;
|
|
501
578
|
}
|
|
579
|
+
|
|
502
580
|
.vue-flow__resize-control.line.bottom {
|
|
503
581
|
border-bottom-width: 1px;
|
|
504
582
|
top: 100%;
|
|
505
583
|
}
|
|
506
|
-
|
|
507
|
-
|
|
508
|
-
|
|
509
|
-
|
|
510
|
-
|
|
511
|
-
|
|
512
|
-
|
|
513
|
-
|
|
584
|
+
}
|
|
585
|
+
|
|
586
|
+
@layer xyflow {
|
|
587
|
+
/* root container layout — @xyflow/system's CSS only declares vars + theme on `.vue-flow`; the framework
|
|
588
|
+
owns the layout box (xyflow/react applies the equivalent inline). */
|
|
589
|
+
.vue-flow {
|
|
590
|
+
width: 100%;
|
|
591
|
+
height: 100%;
|
|
592
|
+
overflow: hidden;
|
|
593
|
+
position: relative;
|
|
594
|
+
z-index: 0;
|
|
595
|
+
}
|
|
514
596
|
}
|
package/dist/index.d.mts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { CSSProperties, Component, ComputedRef, DefineComponent, HTMLAttributes, InjectionKey, MaybeRefOrGetter, SVGAttributes, ToRefs, VNode } from "vue";
|
|
2
|
-
import { Align, AriaLabelConfig, AriaLabelConfig as AriaLabelConfig$1, ColorMode, ColorMode as ColorMode$1,
|
|
2
|
+
import { Align, AriaLabelConfig, AriaLabelConfig as AriaLabelConfig$1, ColorMode, ColorMode as ColorMode$1, Connection, Connection as Connection$1, ConnectionLineType, ConnectionLineType as ConnectionLineType$1, ConnectionMode, ConnectionMode as ConnectionMode$1, ControlLinePosition, ControlLinePosition as ControlLinePosition$1, ControlPosition, ControlPosition as ControlPosition$1, CoordinateExtent, CoordinateExtent as CoordinateExtent$1, Dimensions, Dimensions as Dimensions$1, DistributivePick, EdgeBase, EdgeRemoveChange, EdgeRemoveChange as EdgeRemoveChange$1, EdgeSelectionChange, EdgeSelectionChange as EdgeSelectionChange$1, FinalConnectionState, FinalConnectionState as FinalConnectionState$1, FitViewOptionsBase, FitViewOptionsBase as FitViewOptions, GetViewport, GetViewport as GetViewport$1, HandleType, HandleType as HandleType$1, InternalNodeBase, NodeBase, NodeConnection, NodeConnection as NodeConnection$1, NodeDimensionChange, NodeDimensionChange as NodeDimensionChange$1, NodePositionChange, NodePositionChange as NodePositionChange$1, NodeRemoveChange, NodeRemoveChange as NodeRemoveChange$1, NodeSelectionChange, NodeSelectionChange as NodeSelectionChange$1, Padding, Padding as Padding$1, PaddingUnit, PaddingWithUnit, PanOnScrollMode, PanOnScrollMode as PanOnScrollMode$1, PanZoomInstance, PanelPosition, Position, Position as Position$1, Project, Project as Project$1, Rect, Rect as Rect$1, ResizeControlVariant, ResizeControlVariant as ResizeControlVariant$1, ResizeControlVariant as ResizeControlVariant$2, ResizeDragEvent, ResizeDragEvent as ResizeDragEvent$1, ResizeParams, ResizeParams as ResizeParams$1, ResizeParamsWithDirection, ResizeParamsWithDirection as ResizeParamsWithDirection$1, SelectionMode, SelectionMode as SelectionMode$1, SelectionRect, SelectionRect as SelectionRect$1, SetCenter, SetCenter as SetCenter$1, SetCenterOptions, SetViewport, SetViewport as SetViewport$1, ShouldResize, ShouldResize as ShouldResize$1, SnapGrid, SnapGrid as SnapGrid$1, Transform, Viewport, Viewport as Viewport$1, ViewportHelperFunctionOptions, ViewportHelperFunctionOptions as ViewportHelperFunctionOptions$1, XYPosition, XYPosition as XYPosition$1, ZIndexMode, ZIndexMode as ZIndexMode$1, ZoomInOut, ZoomInOut as ZoomInOut$1, ZoomTo, ZoomTo as ZoomTo$1, clamp, getBezierEdgeCenter, getBezierPath, getBoundsOfBoxes, getBoundsOfRects, getConnectedEdges, getConnectionStatus, getIncomers, getMarkerId, getNodesBounds, getNodesInside, getOutgoers, getSmoothStepPath, getStraightPath, getViewportForBounds, isEdgeBase, isInternalNodeBase, isMacOs, isNodeBase, pointToRendererPoint, rendererPointToPoint } from "@xyflow/system";
|
|
3
3
|
import { KeyFilter } from "@vueuse/core";
|
|
4
4
|
|
|
5
5
|
//#region src/components/Background/types.d.ts
|
|
@@ -671,7 +671,6 @@ interface State<NodeType extends Node = Node, EdgeType extends Edge = Edge> exte
|
|
|
671
671
|
translateExtent: CoordinateExtent$1;
|
|
672
672
|
nodeExtent: CoordinateExtent$1;
|
|
673
673
|
nodeOrigin: NodeOrigin;
|
|
674
|
-
colorMode: ColorMode$1;
|
|
675
674
|
/** viewport dimensions - do not change! */
|
|
676
675
|
readonly dimensions: Dimensions$1;
|
|
677
676
|
/** canonical viewport transform `[x, y, zoom]` (the `@xyflow/system` representation) - do not change! Read `viewport` for the `{ x, y, zoom }` shape. */
|
|
@@ -1212,8 +1211,8 @@ interface FlowProps<NodeType extends Node = Node, EdgeType extends Edge = Edge>
|
|
|
1212
1211
|
nodeExtent?: CoordinateExtent$1;
|
|
1213
1212
|
/** origin of all nodes relative to their position — `[0, 0]` top-left, `[0.5, 0.5]` center, `[1, 1]` bottom-right */
|
|
1214
1213
|
nodeOrigin?: NodeOrigin;
|
|
1215
|
-
/**
|
|
1216
|
-
|
|
1214
|
+
/** Forces a color scheme on the flow container via class name. Page-level theming is typically done by setting `data-theme` on `<html>`. */
|
|
1215
|
+
forceColorMode?: ColorMode$1;
|
|
1217
1216
|
/** color of edge markers; pass `null` to drive the arrowhead color from the `--xy-edge-stroke` CSS variable @default '#b1b1b7' */
|
|
1218
1217
|
defaultMarkerColor?: string | null;
|
|
1219
1218
|
zoomOnScroll?: boolean;
|
|
@@ -1359,14 +1358,14 @@ interface FlowEmits<NodeType extends Node = Node, EdgeType extends Edge = Edge>
|
|
|
1359
1358
|
nodeDrag: [nodeDragEvent: NodeDragEvent<NodeType>];
|
|
1360
1359
|
nodeDragStop: [nodeDragEvent: NodeDragEvent<NodeType>];
|
|
1361
1360
|
}
|
|
1362
|
-
type NodeByType<NodeType extends Node, T extends string> = NodeType extends any ?
|
|
1363
|
-
type EdgeByType<EdgeType extends Edge, T extends string> = EdgeType extends any ?
|
|
1361
|
+
type NodeByType<NodeType extends Node, T extends string> = NodeType extends any ? T extends NonNullable<NodeType['type']> ? NodeType : never : never;
|
|
1362
|
+
type EdgeByType<EdgeType extends Edge, T extends string> = EdgeType extends any ? T extends NonNullable<EdgeType['type']> ? EdgeType : never : never;
|
|
1364
1363
|
type NodeSlots<NodeType extends Node = Node> = Partial<{ [T in NonNullable<NodeType['type']> as `node-${T}`]: (nodeProps: NodeProps<NodeByType<NodeType, T>>) => any } & Record<`node-${string}`, (nodeProps: NodeProps<NodeType>) => any>>;
|
|
1365
1364
|
type EdgeSlots<EdgeType extends Edge = Edge> = Partial<{ [T in NonNullable<EdgeType['type']> as `edge-${T}`]: (edgeProps: EdgeProps<EdgeByType<EdgeType, T>>) => any } & Record<`edge-${string}`, (edgeProps: EdgeProps<EdgeType>) => any>>;
|
|
1366
1365
|
type FlowSlots<NodeType extends Node = Node, EdgeType extends Edge = Edge> = NodeSlots<NodeType> & EdgeSlots<EdgeType> & {
|
|
1367
1366
|
'connection-line'?: (connectionLineProps: ConnectionLineProps<NodeType>) => any;
|
|
1368
1367
|
'zoom-pane'?: () => any;
|
|
1369
|
-
|
|
1368
|
+
default?: () => any;
|
|
1370
1369
|
};
|
|
1371
1370
|
//#endregion
|
|
1372
1371
|
//#region src/types/node.d.ts
|
|
@@ -2204,5 +2203,5 @@ declare const NodeId: InjectionKey<string>;
|
|
|
2204
2203
|
declare const defaultNodeTypes: DefaultNodeTypes;
|
|
2205
2204
|
declare const defaultEdgeTypes: DefaultEdgeTypes;
|
|
2206
2205
|
//#endregion
|
|
2207
|
-
export { Actions, AddEdges, AddNodes, type Align, type AriaLabelConfig, _default as Background, BackgroundProps, BackgroundVariant, _default$1 as BaseEdge, BaseEdgeProps, BezierEdge, BezierEdgeProps, BezierEdgeType, BezierPathOptions, BuiltInNode, CSSVars, ClassValue, type ColorMode,
|
|
2206
|
+
export { Actions, AddEdges, AddNodes, type Align, type AriaLabelConfig, _default as Background, BackgroundProps, BackgroundVariant, _default$1 as BaseEdge, BaseEdgeProps, BezierEdge, BezierEdgeProps, BezierEdgeType, BezierPathOptions, BuiltInNode, CSSVars, ClassValue, type ColorMode, ComputedGetters, ConnectEndEvent, ConnectingHandle, type Connection, ConnectionInProgress, ConnectionLineOptions, ConnectionLineProps, ConnectionLineType, ConnectionLookup, ConnectionMode, ConnectionState, ConnectionStatus, Connector, _default$2 as ControlButton, ControlEmits, type ControlLinePosition, type ControlPosition, ControlProps, _default$3 as Controls, type CoordinateExtent, CustomThemeVars, DefaultEdge, DefaultEdgeOptions, DefaultEdgeTypes, DefaultNodeTypes, DeleteElements, type Dimensions, Edge, EdgeAddChange, EdgeChange, EdgeComponent, EdgeEventsHandler, EdgeEventsOn, EdgeLabelOptions, _default$4 as EdgeLabelRenderer, EdgeLookup, EdgeMarker, EdgeMarkerType, EdgeMouseEvent, EdgePositions, EdgeProps, EdgeReconnectEndEvent, EdgeReconnectEvent, EdgeReconnectStartEvent, EdgeReconnectable, type EdgeRemoveChange, type EdgeSelectionChange, EdgeSlots, _default$5 as EdgeText, EdgeTextProps, EdgeTypesObject, ElementChange, ErrorCode, type FinalConnectionState, FitBounds, FitBoundsOptions, FitView, type FitViewOptions, FlowEmits, FlowEvents, FlowExportObject, FlowHooks, FlowHooksEmit, FlowHooksOn, FlowOptions, FlowProps, FlowSlots, GetEdge, GetInternalNode, GetIntersectingNodes, GetNode, type GetViewport, Getters, _default$6 as Handle, HandleConnectable, HandleConnectableFunc, HandleElement, HandleProps, type HandleType, InternalNode, IsNodeIntersecting, IsValidParams, MarkerProps, MarkerType, _default$7 as MiniMap, MiniMapEmits, _default$8 as MiniMapNode, MiniMapNodeEmits, MiniMapNodeFunc, MiniMapNodeProps, MiniMapProps, MiniMapSlots, MouseTouchEvent, NoConnection, Node, NodeAddChange, NodeChange, NodeComponent, type NodeConnection, type NodeDimensionChange, NodeDragEvent, NodeDragItem, NodeEventsHandler, NodeEventsOn, NodeHandleBounds, NodeId as NodeIdInjection, NodeLookup, NodeMouseEvent, NodeOrigin, type NodePositionChange, NodeProps, type NodeRemoveChange, _default$9 as NodeResizeControl, _default$10 as NodeResizer, NodeResizerEmits, NodeResizerProps, type NodeSelectionChange, NodeSlots, _default$11 as NodeToolbar, NodeToolbarProps, NodeTypesObject, OnBeforeDelete, OnConnectStartParams, OnResize, OnResizeEnd, OnResizeStart, type Padding, type PaddingUnit, type PaddingWithUnit, PanOnScrollMode, _default$12 as Panel, PanelProps, Position, type Project, ReconnectEdge, type Rect, RemoveEdges, RemoveNodes, ResizeControlLineProps, ResizeControlProps, ResizeControlVariant, type ResizeDragEvent, type ResizeParams, type ResizeParamsWithDirection, Result, SelectionChangeEvent, SelectionMode, type SelectionRect, type SetCenter, type SetCenterOptions, SetEdges, SetNodes, SetState, SetStateOptions, type SetViewport, ShapeRendering, type ShouldResize, SimpleBezierEdge, SimpleBezierEdgeProps, Slots, SmoothStepEdge, SmoothStepEdgeProps, SmoothStepEdgeType, SmoothStepPathOptions, type SnapGrid, State, StepEdge, StepEdgeProps, StraightEdge, StraightEdgeProps, Styles, ThemeVars, UpdateEdge, UpdateEdgeData, UpdateNode, UpdateNodeData, UpdateNodeDimensions, UpdateNodeDimensionsParams, UpdateNodeInternals, UpdateNodePosition, ValidConnectionFunc, type Viewport, ViewportFunctions, type ViewportHelperFunctionOptions, _default$13 as VueFlow, VueFlowError, VueFlow as VueFlowInjection, VueFlowInstance, _default$14 as VueFlowProvider, VueFlowState, VueFlowStoreHandle, type XYPosition, type ZIndexMode, type ZoomInOut, type ZoomTo, applyChanges, applyEdgeChanges, applyNodeChanges, clamp, connectionExists, defaultEdgeTypes, defaultNodeTypes, getBezierEdgeCenter, getBezierPath, getBoundsOfBoxes, getBoundsOfRects, getConnectedEdges, getConnectionStatus, getIncomers, getMarkerId, getNodesBounds, getNodesInside, getOutgoers, getSimpleBezierPath, getSmoothStepPath, getStraightPath, getViewportForBounds, isEdge, isEdgeBase, isErrorOfType, isInternalNode, isInternalNodeBase, isMacOs, isNode, isNodeBase, pointToRendererPoint, rendererPointToPoint, storeToRefs, useConnection, useEdge, useEdgesData, useHandle, useInternalNode, useKeyPress, useNode, useNodeConnections, useNodeId, useNodesData, useNodesInitialized, useStore, useVueFlow };
|
|
2208
2207
|
//# sourceMappingURL=index.d.mts.map
|