@visuallyjs/browser-ui-vue 1.2.1 → 1.2.2
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/background-component.d.ts +255 -0
- package/base.group.component.d.ts +42 -0
- package/base.node.component.d.ts +31 -0
- package/base.vertex.component.d.ts +33 -0
- package/definitions.d.ts +16 -0
- package/index.d.ts +1 -0
- package/package.json +1 -1
- package/util.d.ts +5 -90
- package/visuallyjs.browser-ui-vue.cjs.js +1 -1
- package/visuallyjs.browser-ui-vue.es.js +1 -1
- package/vue-wrapper.d.ts +45 -13
|
@@ -0,0 +1,255 @@
|
|
|
1
|
+
import { PropType } from "vue";
|
|
2
|
+
import { BackgroundOptions, Grid, GridType, Size, TilingStrategy } from "@visuallyjs/browser-ui";
|
|
3
|
+
/**
|
|
4
|
+
* Props for the background component.
|
|
5
|
+
* @group Props
|
|
6
|
+
*/
|
|
7
|
+
export type BackgroundComponentProps = {
|
|
8
|
+
options: BackgroundOptions;
|
|
9
|
+
};
|
|
10
|
+
/**
|
|
11
|
+
* Props for the grid background component.
|
|
12
|
+
* @group Props
|
|
13
|
+
*/
|
|
14
|
+
export interface GridBackgroundComponentProps {
|
|
15
|
+
/**
|
|
16
|
+
* The grid to use. This is optional; if you do not supply one the background will attempt to read the grid definition from the Surface. If that is also not set then a default grid of 50x50 pixels will be used.
|
|
17
|
+
*/
|
|
18
|
+
grid?: Grid;
|
|
19
|
+
/**
|
|
20
|
+
* Whether or not to show a thick border around the entire background. Defaults to false.
|
|
21
|
+
*/
|
|
22
|
+
showBorder?: boolean;
|
|
23
|
+
/**
|
|
24
|
+
* The minimum width for the grid. The value you provided is divided by 2 and then the grid is guaranteed to always at least span the range of (-minWidth / 2) - (minWidth / 2). Defaults to 20 000.
|
|
25
|
+
*/
|
|
26
|
+
minWidth?: number;
|
|
27
|
+
/**
|
|
28
|
+
* The minimum height for the grid. The value you provided is divided by 2 and then the grid is guaranteed to always at least span the range of (-minHeight / 2) - (minHeight / 2). Defaults to 20 000.
|
|
29
|
+
*/
|
|
30
|
+
minHeight?: number;
|
|
31
|
+
/**
|
|
32
|
+
* Defaults to false. If true, the grid will also draw tick marks between the grid lines.
|
|
33
|
+
*/
|
|
34
|
+
showTickMarks?: boolean;
|
|
35
|
+
/**
|
|
36
|
+
* Number of tick marks to draw per cell. Defaults to 2.
|
|
37
|
+
*/
|
|
38
|
+
tickMarksPerCell?: number;
|
|
39
|
+
/**
|
|
40
|
+
* The maximum width for the grid. The value you provided is divided by 2 and then the grid is guaranteed to never exceed the range of (-maxWidth / 2) - (maxWidth / 2). maxWidth takes precedence over minWidth.
|
|
41
|
+
*/
|
|
42
|
+
maxWidth?: number;
|
|
43
|
+
/**
|
|
44
|
+
* The maximum height for the grid. The value you provided is divided by 2 and then the grid is guaranteed to never exceed the range of (-maxHeight / 2) - (maxHeight / 2). maxHeight takes precedence over minHeight.
|
|
45
|
+
*/
|
|
46
|
+
maxHeight?: number;
|
|
47
|
+
/**
|
|
48
|
+
* Defaults to true, and instructs the grid that if the grid has grown beyond any minimum value set in either axis, if the content bounds subsequently shrink in that axis below the minimum, the grid should shrink back to the minimum. If you set this to false the grid will never shrink back to its minimum values once they have been exceeded.
|
|
49
|
+
*/
|
|
50
|
+
autoShrink?: boolean;
|
|
51
|
+
/**
|
|
52
|
+
* Type of grid - lines or dots. Defaults to lines.
|
|
53
|
+
*/
|
|
54
|
+
gridType?: GridType;
|
|
55
|
+
/**
|
|
56
|
+
* The radius for dots representing grid positions (when gridType id GridTypes.dotted). Defaults to 2.
|
|
57
|
+
*/
|
|
58
|
+
dotRadius?: number;
|
|
59
|
+
/**
|
|
60
|
+
* The radius for dots representing grid tick marks (when gridType id GridTypes.dotted). Defaults to 1.
|
|
61
|
+
*/
|
|
62
|
+
tickDotRadius?: number;
|
|
63
|
+
/**
|
|
64
|
+
* Whether or not the background is initially visible. Defaults to true.
|
|
65
|
+
*/
|
|
66
|
+
visible?: boolean;
|
|
67
|
+
}
|
|
68
|
+
/**
|
|
69
|
+
* Props for the image background component.
|
|
70
|
+
* @group Props
|
|
71
|
+
*/
|
|
72
|
+
export interface ImageBackgroundComponentProps {
|
|
73
|
+
/**
|
|
74
|
+
* URL of the image to load
|
|
75
|
+
*/
|
|
76
|
+
url: string;
|
|
77
|
+
}
|
|
78
|
+
/**
|
|
79
|
+
* Props for the tiled image background component
|
|
80
|
+
* @group Props
|
|
81
|
+
*/
|
|
82
|
+
export interface TiledImageBackgroundComponentProps {
|
|
83
|
+
/**
|
|
84
|
+
* URL for the background. You can supply this, or you can supply a `urlGenerator` function instead. If you supply `url` and no `urlGenerator`, the url you supply is treated as a template for the url for any given tile, and is expected to contain `{z}`, `{x}` and `{y}` placeholders. The form of the URL can be anything you like as long as it has the placeholders for z, x and y. For instance:
|
|
85
|
+
*
|
|
86
|
+
* http://foo.com/{z}/{x}/{y}
|
|
87
|
+
* https://bar.com?zoom={z}&x={x}&y={y}
|
|
88
|
+
*
|
|
89
|
+
* etc
|
|
90
|
+
*/
|
|
91
|
+
url?: string;
|
|
92
|
+
/**
|
|
93
|
+
* For tiled backgrounds, an optional function you can supply to generate the URL for a given tile. See `url` for
|
|
94
|
+
* an explanation of the default syntax for urls when using a tiled background.
|
|
95
|
+
* @param z zoom level
|
|
96
|
+
* @param x x coordinate of tile
|
|
97
|
+
* @param y y coordinate of tile
|
|
98
|
+
*/
|
|
99
|
+
urlGenerator?: (z: number, x: number, y: number) => string;
|
|
100
|
+
/**
|
|
101
|
+
* For tiled backgrounds, provides the width and height of tiles. Every tile is assumed to have these dimensions,
|
|
102
|
+
* even if the tile has whitespace in it. Required.
|
|
103
|
+
*/
|
|
104
|
+
tileSize: Size;
|
|
105
|
+
/**
|
|
106
|
+
* Required. Indicates the width of the full image.
|
|
107
|
+
*/
|
|
108
|
+
width: number;
|
|
109
|
+
/**
|
|
110
|
+
* Required. Indicates the height of the full image.
|
|
111
|
+
*/
|
|
112
|
+
height: number;
|
|
113
|
+
/**
|
|
114
|
+
* Required. Indicates the maximum zoom level. Zoom starts at 0 - fully zoomed out - and
|
|
115
|
+
* increases in integer values from there. Each successive zoom level is twice the zoom of the previous level,
|
|
116
|
+
* meaning two times as many tiles in each direction.
|
|
117
|
+
*/
|
|
118
|
+
maxZoom: number;
|
|
119
|
+
/**
|
|
120
|
+
* Default is TilingStrategies.logarithmic. See notes for `TilingStrategies` enum.
|
|
121
|
+
*/
|
|
122
|
+
tiling?: TilingStrategy;
|
|
123
|
+
/**
|
|
124
|
+
* How long to wait after a pan before reloading tiles.
|
|
125
|
+
*/
|
|
126
|
+
panDebounceTimeout?: number;
|
|
127
|
+
/**
|
|
128
|
+
* How long to wait after a zoom before reloading tiles.
|
|
129
|
+
*/
|
|
130
|
+
zoomDebounceTimeout?: number;
|
|
131
|
+
}
|
|
132
|
+
/**
|
|
133
|
+
* This is a headless component that adds a background to the surface/paper it resides in.
|
|
134
|
+
*/
|
|
135
|
+
export declare const BackgroundComponent: {
|
|
136
|
+
setup(): {
|
|
137
|
+
service: unknown;
|
|
138
|
+
};
|
|
139
|
+
name: string;
|
|
140
|
+
props: {
|
|
141
|
+
options: {
|
|
142
|
+
type: PropType<BackgroundOptions>;
|
|
143
|
+
};
|
|
144
|
+
};
|
|
145
|
+
mounted: () => void;
|
|
146
|
+
render: (_ctx: any) => any;
|
|
147
|
+
};
|
|
148
|
+
/**
|
|
149
|
+
* This is a headless component that adds a grid background to the surface/paper it resides in.
|
|
150
|
+
*/
|
|
151
|
+
export declare const GridBackgroundComponent: {
|
|
152
|
+
setup(): {
|
|
153
|
+
service: unknown;
|
|
154
|
+
};
|
|
155
|
+
name: string;
|
|
156
|
+
props: {
|
|
157
|
+
grid: {
|
|
158
|
+
type: PropType<Grid>;
|
|
159
|
+
};
|
|
160
|
+
showBorder: {
|
|
161
|
+
type: BooleanConstructor;
|
|
162
|
+
};
|
|
163
|
+
minWidth: {
|
|
164
|
+
type: NumberConstructor;
|
|
165
|
+
};
|
|
166
|
+
minHeight: {
|
|
167
|
+
type: NumberConstructor;
|
|
168
|
+
};
|
|
169
|
+
showTickMarks: {
|
|
170
|
+
type: BooleanConstructor;
|
|
171
|
+
};
|
|
172
|
+
tickMarksPerCell: {
|
|
173
|
+
type: NumberConstructor;
|
|
174
|
+
};
|
|
175
|
+
maxWidth: {
|
|
176
|
+
type: NumberConstructor;
|
|
177
|
+
};
|
|
178
|
+
maxHeight: {
|
|
179
|
+
type: NumberConstructor;
|
|
180
|
+
};
|
|
181
|
+
autoShrink: {
|
|
182
|
+
type: BooleanConstructor;
|
|
183
|
+
};
|
|
184
|
+
gridType: {
|
|
185
|
+
type: PropType<GridType>;
|
|
186
|
+
};
|
|
187
|
+
dotRadius: {
|
|
188
|
+
type: NumberConstructor;
|
|
189
|
+
};
|
|
190
|
+
tickDotRadius: {
|
|
191
|
+
type: NumberConstructor;
|
|
192
|
+
};
|
|
193
|
+
visible: {
|
|
194
|
+
type: BooleanConstructor;
|
|
195
|
+
};
|
|
196
|
+
};
|
|
197
|
+
mounted: () => void;
|
|
198
|
+
render: (_ctx: any) => any;
|
|
199
|
+
};
|
|
200
|
+
/**
|
|
201
|
+
* This is a headless component that adds an Image background to the surface/paper it resides in.
|
|
202
|
+
*/
|
|
203
|
+
export declare const ImageBackgroundComponent: {
|
|
204
|
+
setup(): {
|
|
205
|
+
service: unknown;
|
|
206
|
+
};
|
|
207
|
+
name: string;
|
|
208
|
+
props: {
|
|
209
|
+
url: {
|
|
210
|
+
type: StringConstructor;
|
|
211
|
+
};
|
|
212
|
+
};
|
|
213
|
+
mounted: () => void;
|
|
214
|
+
render: (_ctx: any) => any;
|
|
215
|
+
};
|
|
216
|
+
/**
|
|
217
|
+
* This is a headless component that adds a tiled background to the surface/paper it resides in.
|
|
218
|
+
*/
|
|
219
|
+
export declare const TiledImageBackgroundComponent: {
|
|
220
|
+
setup(): {
|
|
221
|
+
service: unknown;
|
|
222
|
+
};
|
|
223
|
+
name: string;
|
|
224
|
+
props: {
|
|
225
|
+
url: {
|
|
226
|
+
type: StringConstructor;
|
|
227
|
+
};
|
|
228
|
+
urlGenerator: {
|
|
229
|
+
type: FunctionConstructor;
|
|
230
|
+
};
|
|
231
|
+
tileSize: {
|
|
232
|
+
type: PropType<Size>;
|
|
233
|
+
};
|
|
234
|
+
width: {
|
|
235
|
+
type: NumberConstructor;
|
|
236
|
+
};
|
|
237
|
+
height: {
|
|
238
|
+
type: NumberConstructor;
|
|
239
|
+
};
|
|
240
|
+
maxZoom: {
|
|
241
|
+
type: NumberConstructor;
|
|
242
|
+
};
|
|
243
|
+
tiling: {
|
|
244
|
+
type: StringConstructor;
|
|
245
|
+
};
|
|
246
|
+
panDebounceTimeout: {
|
|
247
|
+
type: NumberConstructor;
|
|
248
|
+
};
|
|
249
|
+
zoomDebounceTimeout: {
|
|
250
|
+
type: NumberConstructor;
|
|
251
|
+
};
|
|
252
|
+
};
|
|
253
|
+
mounted: () => void;
|
|
254
|
+
render: (_ctx: any) => any;
|
|
255
|
+
};
|
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* This mixin is applied to a component that renders a group, providing a few group related methods.
|
|
3
|
+
*/
|
|
4
|
+
export declare const BaseGroupComponent: {
|
|
5
|
+
methods: {
|
|
6
|
+
/**
|
|
7
|
+
* Gets the underlying group from the model.
|
|
8
|
+
*/
|
|
9
|
+
getGroup: () => any;
|
|
10
|
+
/**
|
|
11
|
+
* Removes the group this component represents from the model.
|
|
12
|
+
* @param removeChildNodes
|
|
13
|
+
*/
|
|
14
|
+
removeGroup: (removeChildNodes?: boolean) => void;
|
|
15
|
+
/**
|
|
16
|
+
* Updates the underlying group in the model.
|
|
17
|
+
* @param data
|
|
18
|
+
*/
|
|
19
|
+
updateGroup: (data: any) => void;
|
|
20
|
+
};
|
|
21
|
+
mixins: {
|
|
22
|
+
props: {
|
|
23
|
+
data: ObjectConstructor;
|
|
24
|
+
model: typeof import("./browser-ui-vue").BrowserUIVueModel;
|
|
25
|
+
obj: typeof import("@visuallyjs/browser-ui").Vertex;
|
|
26
|
+
vertex: typeof import("@visuallyjs/browser-ui").Vertex;
|
|
27
|
+
ui: typeof import("@visuallyjs/browser-ui").BrowserUI;
|
|
28
|
+
el: {
|
|
29
|
+
new (): Element;
|
|
30
|
+
prototype: Element;
|
|
31
|
+
};
|
|
32
|
+
def: ObjectConstructor;
|
|
33
|
+
eventInfo: ObjectConstructor;
|
|
34
|
+
};
|
|
35
|
+
mounted(): void;
|
|
36
|
+
methods: {
|
|
37
|
+
getModel: () => any;
|
|
38
|
+
removeVertex: () => void;
|
|
39
|
+
};
|
|
40
|
+
updated(): void;
|
|
41
|
+
}[];
|
|
42
|
+
};
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* This mixin is applied to a component that renders a node, providing a few Node related methods.
|
|
3
|
+
*/
|
|
4
|
+
export declare const BaseNodeComponent: {
|
|
5
|
+
mixins: {
|
|
6
|
+
props: {
|
|
7
|
+
data: ObjectConstructor;
|
|
8
|
+
model: typeof import("./browser-ui-vue").BrowserUIVueModel;
|
|
9
|
+
obj: typeof import("@visuallyjs/browser-ui").Vertex;
|
|
10
|
+
vertex: typeof import("@visuallyjs/browser-ui").Vertex;
|
|
11
|
+
ui: typeof import("@visuallyjs/browser-ui").BrowserUI;
|
|
12
|
+
el: {
|
|
13
|
+
new (): Element;
|
|
14
|
+
prototype: Element;
|
|
15
|
+
};
|
|
16
|
+
def: ObjectConstructor;
|
|
17
|
+
eventInfo: ObjectConstructor;
|
|
18
|
+
};
|
|
19
|
+
mounted(): void;
|
|
20
|
+
methods: {
|
|
21
|
+
getModel: () => any;
|
|
22
|
+
removeVertex: () => void;
|
|
23
|
+
};
|
|
24
|
+
updated(): void;
|
|
25
|
+
}[];
|
|
26
|
+
methods: {
|
|
27
|
+
getNode: () => any;
|
|
28
|
+
removeNode: () => void;
|
|
29
|
+
updateNode: (data: any) => void;
|
|
30
|
+
};
|
|
31
|
+
};
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
import { BrowserUI, Vertex } from "@visuallyjs/browser-ui";
|
|
2
|
+
import { BrowserUIVueModel } from "./browser-ui-vue";
|
|
3
|
+
/**
|
|
4
|
+
* Base class for node/group components.
|
|
5
|
+
*/
|
|
6
|
+
export declare const BaseVertexComponent: {
|
|
7
|
+
props: {
|
|
8
|
+
data: ObjectConstructor;
|
|
9
|
+
model: typeof BrowserUIVueModel;
|
|
10
|
+
obj: typeof Vertex;
|
|
11
|
+
vertex: typeof Vertex;
|
|
12
|
+
ui: typeof BrowserUI;
|
|
13
|
+
el: {
|
|
14
|
+
new (): Element;
|
|
15
|
+
prototype: Element;
|
|
16
|
+
};
|
|
17
|
+
def: ObjectConstructor;
|
|
18
|
+
eventInfo: ObjectConstructor;
|
|
19
|
+
};
|
|
20
|
+
mounted(): void;
|
|
21
|
+
methods: {
|
|
22
|
+
/**
|
|
23
|
+
* get the underlying Visually Js instance.
|
|
24
|
+
*/
|
|
25
|
+
getModel: () => any;
|
|
26
|
+
/**
|
|
27
|
+
* Removed the vertex this component represents.
|
|
28
|
+
*
|
|
29
|
+
*/
|
|
30
|
+
removeVertex: () => void;
|
|
31
|
+
};
|
|
32
|
+
updated(): void;
|
|
33
|
+
};
|
package/definitions.d.ts
CHANGED
|
@@ -139,6 +139,22 @@ export interface ViewOptions {
|
|
|
139
139
|
*/
|
|
140
140
|
edges?: Record<string, VueEdgeMapping>;
|
|
141
141
|
}
|
|
142
|
+
/**
|
|
143
|
+
* Background component tag
|
|
144
|
+
*/
|
|
145
|
+
export declare const COMPONENT_BACKGROUND = "BackgroundComponent";
|
|
146
|
+
/**
|
|
147
|
+
* Grid background component tag
|
|
148
|
+
*/
|
|
149
|
+
export declare const COMPONENT_GRID_BACKGROUND = "GridBackgroundComponent";
|
|
150
|
+
/**
|
|
151
|
+
* Image background component tag
|
|
152
|
+
*/
|
|
153
|
+
export declare const COMPONENT_IMAGE_BACKGROUND = "ImageBackgroundComponent";
|
|
154
|
+
/**
|
|
155
|
+
* tiled image background component tag
|
|
156
|
+
*/
|
|
157
|
+
export declare const COMPONENT_TILED_IMAGE_BACKGROUND = "TiledImageBackgroundComponent";
|
|
142
158
|
/**
|
|
143
159
|
* Miniview component tag
|
|
144
160
|
*/
|
package/index.d.ts
CHANGED
|
@@ -13,6 +13,7 @@ export * from "./inspector-component";
|
|
|
13
13
|
export * from "./definitions";
|
|
14
14
|
export * from "./controls-component";
|
|
15
15
|
export * from "./export-controls-component";
|
|
16
|
+
export * from "./background-component";
|
|
16
17
|
export * from "./palette-component";
|
|
17
18
|
export * from './color-picker-component';
|
|
18
19
|
export * from "./miniview-component";
|
package/package.json
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"name":"@visuallyjs/browser-ui-vue","version":"1.2.
|
|
1
|
+
{"name":"@visuallyjs/browser-ui-vue","version":"1.2.2","description":"VisuallyJS Vue integration","module":"visuallyjs.browser-ui-vue.es.js","main":"visuallyjs.browser-ui-vue.cjs.js","types":"index.d.ts","files":["visuallyjs.browser-ui-vue.es.js","visuallyjs.browser-ui-vue.cjs.js","**/*.d.ts"],"author":"VisuallyJs <hello@visuallyjs.com> (https://visuallyjs.com)","license":"Commercial","dependencies":{"@visuallyjs/browser-ui":"1.2.2"},"homepage":"https://visuallyjs.com/vue","bugs":"https://github.com/visuallyjs/visuallyjs/issues"}
|
package/util.d.ts
CHANGED
|
@@ -5,96 +5,10 @@ import { RenderOptions, ViewOptions } from "./definitions";
|
|
|
5
5
|
export declare const EVENT_VERTICES_RENDERED = "vertices:rendered";
|
|
6
6
|
/** @internal */
|
|
7
7
|
export declare const EVENT_VERTEX_UPDATED = "vertex:updated";
|
|
8
|
+
export declare function vertexHasRendered<N extends Vertex>(surfaceId: string, v: N): void;
|
|
9
|
+
export declare function vertexHasUpdated<N extends Vertex>(surfaceId: string, v: N): void;
|
|
10
|
+
export declare function vertexWillRender<N extends Vertex>(surfaceId: string, v: N): void;
|
|
8
11
|
export declare function bindToDevLifecycle(surfaceId: string, event: string, handler: (a: any, e?: any) => any): void;
|
|
9
|
-
/**
|
|
10
|
-
* Provides a mixin you should use to create a component that renders a node. See documentation for details.
|
|
11
|
-
*
|
|
12
|
-
*/
|
|
13
|
-
export declare const BaseNodeComponent: {
|
|
14
|
-
mixins: {
|
|
15
|
-
props: {
|
|
16
|
-
data: ObjectConstructor;
|
|
17
|
-
model: typeof BrowserUIVueModel;
|
|
18
|
-
obj: typeof Vertex;
|
|
19
|
-
vertex: typeof Vertex;
|
|
20
|
-
ui: typeof BrowserUI;
|
|
21
|
-
el: {
|
|
22
|
-
new (): Element;
|
|
23
|
-
prototype: Element;
|
|
24
|
-
};
|
|
25
|
-
def: ObjectConstructor;
|
|
26
|
-
eventInfo: ObjectConstructor;
|
|
27
|
-
};
|
|
28
|
-
mounted(): void;
|
|
29
|
-
methods: {
|
|
30
|
-
/**
|
|
31
|
-
* get the underlying Visually Js instance.
|
|
32
|
-
*/
|
|
33
|
-
getModel: () => any;
|
|
34
|
-
/**
|
|
35
|
-
* Removed the vertex this component represents.
|
|
36
|
-
*
|
|
37
|
-
*/
|
|
38
|
-
removeVertex: () => void;
|
|
39
|
-
};
|
|
40
|
-
updated(): void;
|
|
41
|
-
}[];
|
|
42
|
-
methods: {
|
|
43
|
-
getNode: () => any;
|
|
44
|
-
removeNode: () => void;
|
|
45
|
-
updateNode: (data: any) => void;
|
|
46
|
-
};
|
|
47
|
-
};
|
|
48
|
-
/**
|
|
49
|
-
* Provides a mixin you should use to create a component that renders a group. See documentation for details.
|
|
50
|
-
*
|
|
51
|
-
*/
|
|
52
|
-
export declare const BaseGroupComponent: {
|
|
53
|
-
methods: {
|
|
54
|
-
/**
|
|
55
|
-
* Gets the underlying group from the model.
|
|
56
|
-
*/
|
|
57
|
-
getGroup: () => any;
|
|
58
|
-
/**
|
|
59
|
-
* Removes the group this component represents from the model.
|
|
60
|
-
* @param removeChildNodes
|
|
61
|
-
*/
|
|
62
|
-
removeGroup: (removeChildNodes?: boolean) => void;
|
|
63
|
-
/**
|
|
64
|
-
* Updates the underlying group in the model.
|
|
65
|
-
* @param data
|
|
66
|
-
*/
|
|
67
|
-
updateGroup: (data: any) => void;
|
|
68
|
-
};
|
|
69
|
-
mixins: {
|
|
70
|
-
props: {
|
|
71
|
-
data: ObjectConstructor;
|
|
72
|
-
model: typeof BrowserUIVueModel;
|
|
73
|
-
obj: typeof Vertex;
|
|
74
|
-
vertex: typeof Vertex;
|
|
75
|
-
ui: typeof BrowserUI;
|
|
76
|
-
el: {
|
|
77
|
-
new (): Element;
|
|
78
|
-
prototype: Element;
|
|
79
|
-
};
|
|
80
|
-
def: ObjectConstructor;
|
|
81
|
-
eventInfo: ObjectConstructor;
|
|
82
|
-
};
|
|
83
|
-
mounted(): void;
|
|
84
|
-
methods: {
|
|
85
|
-
/**
|
|
86
|
-
* get the underlying Visually Js instance.
|
|
87
|
-
*/
|
|
88
|
-
getModel: () => any;
|
|
89
|
-
/**
|
|
90
|
-
* Removed the vertex this component represents.
|
|
91
|
-
*
|
|
92
|
-
*/
|
|
93
|
-
removeVertex: () => void;
|
|
94
|
-
};
|
|
95
|
-
updated(): void;
|
|
96
|
-
}[];
|
|
97
|
-
};
|
|
98
12
|
/**
|
|
99
13
|
* Placeholder for vertices prior we're rendering. Not used by API users.
|
|
100
14
|
* @internal
|
|
@@ -104,6 +18,7 @@ export interface VertexPlaceholder {
|
|
|
104
18
|
el: BrowserElement;
|
|
105
19
|
_key: string;
|
|
106
20
|
props: Record<string, any>;
|
|
21
|
+
vertex: Vertex;
|
|
107
22
|
}
|
|
108
23
|
/**
|
|
109
24
|
* Placeholder for overlays prior we're rendering. Not used by API users.
|
|
@@ -156,7 +71,7 @@ export declare function addSurface(model: BrowserUIVueModel, surfaceId: string,
|
|
|
156
71
|
* @param renderParams
|
|
157
72
|
* @param view
|
|
158
73
|
*/
|
|
159
|
-
export declare function addPaper(model: BrowserUIVueModel,
|
|
74
|
+
export declare function addPaper(model: BrowserUIVueModel, paperId: string, container: any, vertices: Array<VertexPlaceholder>, renderParams?: RenderOptions, view?: ViewSpec<BrowserElement>): Paper;
|
|
160
75
|
/**
|
|
161
76
|
* @internal
|
|
162
77
|
* @param viewOptions
|
|
@@ -1 +1 @@
|
|
|
1
|
-
var Be=Object.defineProperty,Ho=Object.defineProperties,Wo=Object.getOwnPropertyDescriptor,zo=Object.getOwnPropertyDescriptors,Jo=Object.getOwnPropertyNames,Oo=Object.getOwnPropertySymbols;var Co=Object.prototype.hasOwnProperty,Ko=Object.prototype.propertyIsEnumerable;var Eo=(e,t,o)=>t in e?Be(e,t,{enumerable:!0,configurable:!0,writable:!0,value:o}):e[t]=o,F=(e,t)=>{for(var o in t||(t={}))Co.call(t,o)&&Eo(e,o,t[o]);if(Oo)for(var o of Oo(t))Ko.call(t,o)&&Eo(e,o,t[o]);return e},ce=(e,t)=>Ho(e,zo(t));var Yo=(e,t)=>{for(var o in t)Be(e,o,{get:t[o],enumerable:!0})},Xo=(e,t,o,n)=>{if(t&&typeof t=="object"||typeof t=="function")for(let i of Jo(t))!Co.call(e,i)&&i!==o&&Be(e,i,{get:()=>t[i],enumerable:!(n=Wo(t,i))||n.enumerable});return e};var Zo=e=>Xo(Be({},"__esModule",{value:!0}),e);var Or={};Yo(Or,{$initialiseVueOverlays:()=>Le,AreaChartComponent:()=>Xe,BarChartComponent:()=>ze,BaseGroupComponent:()=>go,BaseNodeComponent:()=>To,BaseOverlayComponent:()=>no,BrowserUIVueModel:()=>A,BubbleChartComponent:()=>qe,CLASS_VUE_GROUP:()=>Yt,CLASS_VUE_NODE:()=>Kt,CLASS_VUE_OVERLAY:()=>Xt,COMPONENT_AREA_CHART:()=>xe,COMPONENT_BAR_CHART:()=>ve,COMPONENT_BUBBLE_CHART:()=>we,COMPONENT_COLUMN_CHART:()=>Re,COMPONENT_CONTROLS:()=>Se,COMPONENT_DIAGRAM:()=>Te,COMPONENT_DIAGRAM_PALETTE:()=>ge,COMPONENT_DIAGRAM_PROVIDER:()=>Qt,COMPONENT_EXPORT_CONTROLS:()=>ye,COMPONENT_GAUGE_CHART:()=>Ve,COMPONENT_INSPECTOR:()=>be,COMPONENT_LINE_CHART:()=>Ne,COMPONENT_MINIVIEW:()=>Oe,COMPONENT_PALETTE:()=>_e,COMPONENT_PAPER:()=>Ce,COMPONENT_PAPER_PROVIDER:()=>qt,COMPONENT_PIE_CHART:()=>De,COMPONENT_SANKEY_CHART:()=>Me,COMPONENT_SCATTER_CHART:()=>Ie,COMPONENT_SURFACE:()=>Ee,COMPONENT_SURFACE_POPUP:()=>eo,COMPONENT_SURFACE_PROVIDER:()=>Zt,COMPONENT_XY_CHART:()=>Ae,ColorPickerComponent:()=>Po,ColumnChartComponent:()=>We,ControlsComponent:()=>co,DEFAULT_SHAPE_HEIGHT:()=>zt,DEFAULT_SHAPE_WIDTH:()=>Wt,DEFAULT_VUE_PAPER_ID:()=>Ot,DEFAULT_VUE_SURFACE_ID:()=>Pt,DecoratorComponent:()=>pt,DiagramComponent:()=>ho,DiagramPaletteComponent:()=>ut,DiagramProvider:()=>ct,EVENT_VERTEX_UPDATED:()=>yo,EVENT_VERTICES_RENDERED:()=>So,EdgeTypePickerComponent:()=>lt,ExportControlsComponent:()=>uo,GaugeChartComponent:()=>Qe,InspectorComponent:()=>it,InspectorGetterSymbol:()=>re,InspectorSetterSymbol:()=>Vo,LineChartComponent:()=>Ye,MiniviewComponent:()=>mo,PROP_ACTIVE_TRACKING:()=>St,PROP_ALLOW_CLICK_TO_ADD:()=>kt,PROP_ALLOW_DROP_ON_CANVAS:()=>bt,PROP_ALLOW_DROP_ON_EDGE:()=>Mt,PROP_ALLOW_DROP_ON_GROUP:()=>Lt,PROP_ALLOW_DROP_ON_NODE:()=>Ut,PROP_CANVAS_DROP_FILTER:()=>Ht,PROP_CLASS_NAME:()=>k,PROP_CLICK_TO_ADD_ONLY:()=>Ft,PROP_CLICK_TO_CENTER:()=>Ct,PROP_CSV_DATA:()=>At,PROP_DATA:()=>L,PROP_DATA_GENERATOR:()=>It,PROP_DATA_SOURCE_FILTER:()=>Ge,PROP_DRAG_SIZE:()=>$t,PROP_GROUP_IDENTIFIER:()=>Vt,PROP_ID:()=>Qo,PROP_IGNORE_DROP_ON_NODE:()=>Bt,PROP_INTERACTIVE:()=>Rt,PROP_JSON_DATA:()=>Nt,PROP_MODE:()=>gt,PROP_MODEL:()=>de,PROP_MODEL_OPTIONS:()=>$,PROP_ON_VERTEX_ADDED:()=>jt,PROP_OPTIONS:()=>J,PROP_PAPER_ID:()=>Tt,PROP_PIVOT:()=>vt,PROP_RENDER_OPTIONS:()=>ue,PROP_SELECTOR:()=>Dt,PROP_SELECT_AFTER_ADD:()=>Gt,PROP_SHOW_LASSO:()=>_t,PROP_SURFACE_ID:()=>b,PROP_TRACK_SELECTION:()=>yt,PROP_TYPE_FUNCTION:()=>Et,PROP_TYPE_GENERATOR:()=>wt,PROP_URL:()=>U,PROP_USE_MODEL:()=>xt,PROP_VIEW_OPTIONS:()=>me,PaletteComponent:()=>fo,PaperComponent:()=>lo,PaperProvider:()=>ot,PieChartComponent:()=>Ke,SankeyChartComponent:()=>et,ScatterChartComponent:()=>Ze,ShapeComponent:()=>rt,ShapePaletteComponent:()=>st,SurfaceComponent:()=>ao,SurfacePopup:()=>dt,SurfaceProvider:()=>tt,TAG_COLOR_PICKER:()=>Jt,TAG_DECORATOR:()=>to,TAG_EDGE_TYPE_PICKER:()=>Pe,TAG_SHAPE:()=>he,TAG_SHAPE_PALETTE:()=>fe,VisuallyJsPlugin:()=>ur,VisuallyJsService:()=>N,VisuallyJsServiceKey:()=>l,XYChartComponent:()=>Je,addPaper:()=>io,addSurface:()=>so,bindToDevLifecycle:()=>rr,doProvideInspector:()=>Mo,newInstance:()=>qo,useDiagram:()=>fr,usePaper:()=>Pr,useSurface:()=>hr,useVisuallyJsUpdate:()=>mr,useZoom:()=>dr});module.exports=Zo(Or);var je=require("@visuallyjs/browser-ui"),A=class extends je.BrowserUIModel{render(t,o){return(0,je.log)("render called directly on BrowserUiVue class: should not happen. Surface component should use internal render."),null}};function qo(e){return e=e||{},new A(e)}var Pt="surfaceId",Ot="paperId",Et="typeFunction",Ct="clickToCenter",_t="showLasso",St="activeTracking",yt="trackSelection",b="surfaceId",Tt="paperId",k="className",L="data",gt="mode",J="options",ue="renderOptions",$="modelOptions",de="model",me="viewOptions",U="url",Rt="interactive",vt="pivot",Ge="dataSourceFilter",At="csvData",Nt="jsonData",xt="useModel",Qo="id",Dt="selector",It="dataGenerator",wt="typeGenerator",Vt="groupIdentifier",Mt="allowDropOnEdge",bt="allowDropOnCanvas",Lt="allowDropOnGroup",Ut="allowDropOnNode",Bt="ignoreDropOnNode",jt="onVertexAdded",Gt="selectAfterAdd",Ft="clickToAddOnly",kt="allowClickToAdd",$t="dragSize",Ht="canvasDropFilter",he="Shape",fe="ShapePalette",Wt=120,zt=90,Pe="EdgeTypePickerComponent",Jt="ColorPickerComponent",Kt="vjs-vue-node",Yt="vjs-vue-group",Xt="vjs-vue-overlay",Oe="MiniviewComponent",Ee="SurfaceComponent",Zt="SurfaceProvider",Ce="PaperComponent",qt="PaperProvider",Qt="DiagramProvider",_e="PaletteComponent",Se="ControlsComponent",ye="ExportControlsComponent",Te="DiagramComponent",ge="DiagramPaletteComponent",Re="ColumnChartComponent",ve="BarChartComponent",Ae="XYChartComponent",Ne="LineChartComponent",xe="AreaChartComponent",De="PieChartComponent",Ie="ScatterChartComponent",we="BubbleChartComponent",Ve="GaugeChartComponent",Me="SankeyChartComponent",be="InspectorComponent",eo="SurfacePopup",to="Decorator";var M=require("vue"),u=require("@visuallyjs/browser-ui"),oo=class{constructor(){this.unrenderedVertices=new Map;this.eventManager=new u.OptimisticEventGenerator}vertexWillRender(t){this.unrenderedVertices.set(t.id,t)}vertexHasRendered(t){this.unrenderedVertices.delete(t.id),this.unrenderedVertices.size===0&&this.eventManager.fire(So)}vertexHasUpdated(t){this.eventManager.fire(yo,t)}},So="vertices:rendered",yo="vertex:updated",ro=new Map;function Fe(e){return ro.has(e)||ro.set(e,new oo),ro.get(e)}function er(e,t){Fe(e).vertexHasRendered(t)}function tr(e,t){Fe(e).vertexHasUpdated(t)}function or(e,t){Fe(e).vertexWillRender(t)}function rr(e,t,o){Fe(e).eventManager.bind(t,o)}var _o={props:{data:Object,model:A,obj:u.Vertex,vertex:u.Vertex,ui:u.BrowserUI,el:Element,def:Object,eventInfo:Object},mounted(){let e=this,t=(0,u.isGroup)(e.obj)?Yt:Kt;e.el.firstElementChild&&(0,u.addClass)(e.el.firstElementChild,t),e.ui.$vertexRendered(e.obj,e.el,e.def,e.eventInfo),er(e.ui.id,e.obj)},methods:{getModel:function(){return this.model},removeVertex:function(){this.model.remove(this.obj)}},updated(){this.ui.$revalidateElement(this.el),tr(this.ui.id,this.obj)}},To={mixins:[_o],methods:{getNode:function(){return this.obj},removeNode:function(){this.model.removeNode(this.getNode())},updateNode:function(e){this.model.updateNode(this.obj,e);let t=this.ui.getRenderedElement(this.obj.getFullId());this.ui.$revalidateElement(t)}}},go={methods:{getGroup:function(){return this.obj},removeGroup:function(e){this.model.removeGroup(this.obj,e)},updateGroup:function(e){this.model.updateGroup(this.obj,e);let t=this.ui.getRenderedElement(this.obj.getFullId());this.ui.$revalidateElement(t)}},mixins:[_o]},K=(e,t)=>{t.parentNode&&t.parentNode.removeChild(t)},no={props:{data:Object,model:A,obj:u.Edge,edge:u.Edge,overlay:u.Overlay,ui:u.BrowserUI,el:Element,def:Object,eventInfo:Object},mounted(){let e=this;e.el.firstElementChild&&(0,u.addClass)(e.el.firstElementChild,Xt)},updated(){this.ui.$revalidateElement(this.el)}},ke=(e,t,o,n,i,c,r,p,a)=>{let P=r.component!=null,m=(0,u.isGroup)(p),_=[];P||_.push(m?u.CLASS_DEFAULT_GROUP:u.CLASS_DEFAULT_NODE);let S=P?r.component:{render(y){return y.data.label||""}};if(S){let y=document.createElement(u.ELEMENT_DIV);(0,u.updateClasses)(y,_),S.mixins==null&&(S.mixins=[]);let R=m?go:To;S.mixins.find(Ue=>Ue===R)||S.mixins.push(R),or(c.id,p);let z={data:o,model:(0,M.markRaw)(n),ui:(0,M.markRaw)(c),obj:p,vertex:p,el:y,def:(0,M.markRaw)(r),eventInfo:a==null?null:(0,M.markRaw)(a)};if(r.inject)for(let Ue in r.inject){let ft=r.inject[Ue],$o=typeof ft=="function"?ft(p,n):ft;z[Ue]=$o}e.push({component:(0,M.markRaw)(S),el:y,e:p.getFullId(),props:z})}};function so(e,t,o,n,i,c){let r={reactive:!0,asynchronous:!0,usesWrapperElement:!1,update:(a,P,m,_)=>{},render:(a,P,m,_,S,y,R,j)=>ke(n,a,P,m,_,S,y,R,j),cleanupVertex:K,cleanupPort:K,rerender:(a,P,m,_,S,y,R,j,z)=>{K(R.id,z),ke(n,a,P,m,_,S,y,R,j)}},p=(0,u.extend)(i||{},{view:c||{},id:t});return(0,u.renderSurface)(e,o,r,p)}function io(e,t,o,n,i,c){let r={reactive:!0,asynchronous:!0,usesWrapperElement:!1,update:(a,P,m,_)=>{},render:(a,P,m,_,S,y,R,j)=>ke(n,a,P,m,_,S,y,R,j),cleanupVertex:K,cleanupPort:K,rerender:(a,P,m,_,S,y,R,j,z)=>{K(R.id,z),ke(n,a,P,m,_,S,y,R,j)}},p=(0,u.extend)(i||{},{view:c||{},id:t});return(0,u.renderPaper)(e,o,r,p)}function Le(e,t,o,n){if(e.edges)for(let i in e.edges){let c=e.edges[i];c.overlays&&(c.overlays=c.overlays.map(r=>{let p,a={};return r.component!=null?{type:u.OVERLAY_TYPE_CUSTOM,options:{create:m=>{let _=document.createElement(u.ELEMENT_DIV),S=(0,u.uuid)();r.component.mixins==null&&(r.component.mixins=[]),r.component.mixins.indexOf(no)===-1&&r.component.mixins.push(no);let y=F({data:m.edge.data,model:(0,M.markRaw)(o()),ui:(0,M.markRaw)(t()),obj:m.edge,edge:m.edge,el:_,def:(0,M.markRaw)(r),eventInfo:null},a);return n.push({component:(0,M.markRaw)(r.component),el:_,e:S,props:y}),_}}}:r}))}}var H=require("@visuallyjs/browser-ui"),Y=require("vue"),l=Symbol.for("visuallyjs-service"),N=class{constructor(t){this.context=t;this.s=[];this.i=[];this.a=[];this.l=[];this.surface=(0,Y.shallowRef)(null);this.model=(0,Y.shallowRef)(null);this.paper=(0,Y.shallowRef)(null);this.diagram=(0,Y.shallowRef)(null);this.ui=(0,Y.shallowRef)(null)}getSurface(t){this.t(this.i,t,this.p)}getDiagram(t){this.t(this.a,t,this.c)}getPaper(t){this.t(this.l,t,this.u)}getModel(t){this.t(this.s,t,this.r)}getModelDirect(){return this.r}t(t,o,n){if(n!=null)try{o(n)}catch(i){(0,H.log)(`WARN: could not dispatch ${i}`)}else t.push(o)}setSurface(t){this.surface.value=t,this.model.value=t.model,this.ui.value=t,this.p=t,this.n(t.model),this.o(this.i,t)}setDiagram(t){this.diagram.value=t,this.model.value=t.model,this.ui.value=t.$ui,this.c=t,this.n(t.model),t.$ui instanceof H.Surface?this.setSurface(t.$ui):t.$ui instanceof H.Paper&&this.setPaper(t.$ui),this.o(this.a,t)}setPaper(t){this.paper.value=t,this.model.value=t.model,this.ui.value=t,this.u=t,this.n(t.model),this.o(this.l,t)}n(t){this.r=t,this.o(this.s,t)}o(t,o){t.forEach(n=>{try{n(o)}catch(i){(0,H.log)(`WARN: could not flush all queue entries ${i}`)}})}};var x=require("vue"),O=require("@visuallyjs/browser-ui"),ao={setup(e){return{service:(0,x.inject)(l),surfaceId:e.surfaceId||Pt}},name:Ee,props:{[L]:{type:Object},[ue]:{type:Object},[$]:{type:Object},[me]:{type:Object},[de]:{type:Object},[U]:{type:String},[b]:{type:String}},data:function(){return{vertices:[],overlays:[]}},mounted(){let e=this,t=this.model||new A(this.modelOptions||{}),o=this.$refs.root;e.url?t.load({url:e.url}):e.data&&t.load({data:e.data});let n=(0,O.clone)(this.viewOptions||{});Le(n,()=>this.surface,()=>t,this.overlays),this.surface=so(t,this.surfaceId,o,this.vertices,(0,O.clone)(this.renderOptions||{}),n),this.service.setSurface(this.surface);let i=(r,p)=>{let a=()=>{let m={};return p.originalData||p.updates?m=Object.assign(p.originalData,p.updates):p.newData&&Object.assign(m,p.newData),m},P=this.vertices.find(m=>m.e===r);P!=null&&(P.props.data=a())},c=r=>{let p=this.vertices.findIndex(a=>a.e===r);p!==-1&&this.vertices.splice(p,1)};t.bind(O.EVENT_NODE_UPDATED,r=>{i(r.vertex.getFullId(),r)}),t.bind(O.EVENT_GROUP_UPDATED,r=>{i(r.vertex.getFullId(),r)}),t.bind(O.EVENT_NODE_REMOVED,r=>{c(r.node.id)}),t.bind(O.EVENT_GROUP_REMOVED,r=>{c(r.group.id)}),t.bind(O.EVENT_EDGE_UPDATED,r=>{let p=r.edge.id;this.overlays.forEach(a=>{a.props.edge&&a.props.edge.id===p&&(a.props.data=r.edge.data)})}),t.bind(O.EVENT_EDGE_REMOVED,r=>{let p=r.edge.id,a=this.overlays.length-1;for(;a>=0;)this.overlays[a].props.edge&&this.overlays[a].props.edge.id===p&&this.overlays.splice(a,1),a--}),this.surface.bind(O.EVENT_RENDER_END,()=>setTimeout(()=>this.surface.$redrawEveryConnection()))},render:function(){let e=this.vertices.map(t=>(0,x.h)(x.Teleport,{to:t.el,key:t.e},[(0,x.h)(t.component,t.props)]));return this.overlays.forEach(t=>{e.push((0,x.h)(x.Teleport,{to:t.el,key:t.e},[(0,x.h)(t.component,t.props)]))}),(0,x.h)(O.ELEMENT_DIV,{ref:"root",class:"vjs-vue-surface",style:{width:"100%",height:"100%"}},e.concat(this.$slots.hasOwnProperty("default")?this.$slots.default():[]))}};var D=require("vue"),E=require("@visuallyjs/browser-ui"),lo={setup(e){return{service:(0,D.inject)(l),paperId:e.paperId||Ot}},name:Ce,props:{[L]:{type:Object},[ue]:{type:Object},[$]:{type:Object},[me]:{type:Object},[de]:{type:Object},[U]:{type:String},[Tt]:{type:String}},data:function(){return{vertices:[],overlays:[]}},mounted(){let e=this,t=this.model||new A(this.modelOptions||{}),o=this.$refs.root;e.url?t.load({url:e.url}):e.data&&t.load({data:e.data});let n=(0,E.clone)(this.viewOptions||{});Le(n,()=>this.paper,()=>t,this.overlays),this.paper=io(t,this.paperId,o,this.vertices,(0,E.clone)(this.renderOptions||{}),n),this.service.setPaper(this.paper);let i=(r,p)=>{let a=()=>{let m={};return p.originalData||p.updates?m=Object.assign(p.originalData,p.updates):p.newData&&Object.assign(m,p.newData),m},P=this.vertices.find(m=>m.e===r);P!=null&&(P.props.data=a())},c=r=>{let p=this.vertices.findIndex(a=>a.e===r);p!==-1&&this.vertices.splice(p,1)};t.bind(E.EVENT_NODE_UPDATED,r=>{i(r.vertex.getFullId(),r)}),t.bind(E.EVENT_GROUP_UPDATED,r=>{i(r.vertex.getFullId(),r)}),t.bind(E.EVENT_NODE_REMOVED,r=>{c(r.node.id)}),t.bind(E.EVENT_GROUP_REMOVED,r=>{c(r.group.id)}),t.bind(E.EVENT_EDGE_UPDATED,r=>{let p=r.edge.id;this.overlays.forEach(a=>{a.props.edge&&a.props.edge.id===p&&(a.props.data=r.edge.data)})}),t.bind(E.EVENT_EDGE_REMOVED,r=>{let p=r.edge.id,a=this.overlays.length-1;for(;a>=0;)this.overlays[a].props.edge&&this.overlays[a].props.edge.id===p&&this.overlays.splice(a,1),a--}),this.paper.bind(E.EVENT_RENDER_END,()=>setTimeout(()=>this.paper.$redrawEveryConnection()))},render:function(){let e=this.vertices.map(t=>(0,D.h)(D.Teleport,{to:t.el,key:t.e},[(0,D.h)(t.component,t.props)]));return this.overlays.forEach(t=>{e.push((0,D.h)(D.Teleport,{to:t.el,key:t.e},[(0,D.h)(t.component,t.props)]))}),(0,D.h)(E.ELEMENT_DIV,{ref:"root",class:"vjs-vue-paper",style:{width:"100%",height:"100%"}},e.concat(this.$slots.hasOwnProperty("default")?this.$slots.default():[]))}};var d=require("vue"),s=require("@visuallyjs/browser-ui"),nr="Clear dataset?",po="vjs-selected-mode",Ro="can-undo",vo="can-redo",sr="data-undo",ir="data-redo",Ao="data-mode",ar="data-reset",lr="data-clear",pr="data-zoom-in",cr="data-zoom-out",No="vjs-controls-has-selection",co={setup(e){return{service:(0,d.inject)(l)}},name:Se,props:{clear:{type:Boolean,default:!0},[b]:{type:String},undoRedo:{type:Boolean,default:!0},orientation:{type:String,default:"row"},zoomToExtents:{type:Boolean,default:!0},zoomButtons:{type:Boolean,default:!1},clearMessage:{type:String,default:nr},onMaybeClear:{type:Function},className:{type:String,default:""}},methods:{panMode:function(){var e;(e=this.service.surface.value)==null||e.setMode(s.SURFACE_MODE_PAN)},selectMode:function(){var e;(e=this.service.surface.value)==null||e.setMode(s.SURFACE_MODE_SELECT)},zoomToFit:function(){var e;(e=this.service.surface.value)==null||e.zoomToFit()},doClear:function(){let e=this.service.surface.value;e&&(this.onMaybeClear!=null?this.onMaybeClear(()=>e.model.clear()):window.confirm(this.clearMessage)&&e.model.clear())},undo:function(){var e;(e=this.service.model.value)==null||e.undo()},redo:function(){var e;(e=this.service.model.value)==null||e.redo()},zoomIn:function(){var e;(e=this.service.surface.value)==null||e.zoomIn()},zoomOut:function(){var e;(e=this.service.surface.value)==null||e.zoomOut()},resetSelection(){let e=this.service.surface.value;e&&(e.model.clearSelection(),(0,s.supportsPathEditing)(e)&&e.stopEditingPath())},updateSelectionState:function(){let e=this.service.surface.value;e&&(e.model.getSelection().isEmpty()?this.$refs.root.removeAttribute(No):this.$refs.root.setAttribute(No,"true"))}},data:function(){return{ready:!1,hasLasso:!1}},render(){if(this.ready){let e=[];return this.showPan&&(e.push((0,d.h)("i",{class:`vjs-pan-mode ${po}`,[Ao]:s.SURFACE_MODE_PAN,onClick:()=>this.panMode(),title:"Pan mode"},[(0,d.h)("svg",{viewBox:s.PAN_VIEW_BOX,stroke:"currentColor",fill:"none"},[(0,d.h)("path",{d:s.PAN_PATH})])])),e.push((0,d.h)("i",{class:"vjs-select-mode",[Ao]:s.SURFACE_MODE_SELECT,onClick:()=>this.selectMode(),title:"Select mode"},[(0,d.h)("svg",{viewBox:s.LASSO_VIEW_BOX,stroke:"currentColor",fill:"currentColor"},[(0,d.h)("path",{d:s.LASSO_PATH})])]))),this.undoRedo&&(e.push((0,d.h)("i",{class:"vjs-undo",[sr]:!0,title:"Undo last action",onClick:()=>this.undo()})),e.push((0,d.h)("i",{class:"vjs-redo",[ir]:!0,title:"Redo last action",onClick:()=>this.redo()}))),this.zoomToExtents&&e.push((0,d.h)("i",{class:"vjs-zoom-to-fit",[ar]:"true",onClick:()=>this.zoomToFit(),title:"Zoom to Fit"},[(0,d.h)("svg",{viewBox:s.ZOOM_TO_FIT_VIEW_BOX,stroke:"currentColor",fill:"currentColor"},[(0,d.h)("path",{d:s.ZOOM_TO_FIT_PATH})])])),this.zoomButtons&&(e.push((0,d.h)("i",{class:"vjs-zoom-in",[pr]:"true",onClick:()=>this.zoomIn(),title:"Zoom In"},[(0,d.h)("svg",{viewBox:s.ZOOM_IN_OUT_VIEW_BOX,stroke:"currentColor",fill:"currentColor"},[(0,d.h)("path",{d:s.ZOOM_IN_PATH})])])),e.push((0,d.h)("i",{class:"vjs-zoom-out",[cr]:"true",onClick:()=>this.zoomOut(),title:"Zoom Out"},[(0,d.h)("svg",{viewBox:s.ZOOM_IN_OUT_VIEW_BOX,stroke:"currentColor",fill:"currentColor"},[(0,d.h)("path",{d:s.ZOOM_OUT_PATH})])]))),e.push((0,d.h)("i",{class:s.CLASS_CONTROLS_RESET_SELECTION,[s.ATTRIBUTE_RESET_SELECTION]:"true",onClick:()=>{this.resetSelection()}},[(0,d.h)("svg",{viewBox:s.RESET_SELECTION_VIEW_BOX,stroke:"currentColor",fill:"currentColor"},[(0,d.h)("path",{d:s.RESET_SELECTION_PATH})])])),this.clear&&e.push((0,d.h)("i",{class:"vjs-clear-dataset",[lr]:"true",onClick:()=>{this.doClear()}},[(0,d.h)("svg",{viewBox:s.CLEAR_VIEW_BOX,stroke:"currentColor",fill:"currentColor"},[(0,d.h)("path",{d:s.CLEAR_PATH})])])),(0,d.h)(s.ELEMENT_DIV,{class:`vjs-controls ${this.className}`,ref:"root",[Ro]:!1,[vo]:!1,[s.ATTRIBUTE_CONTROLS_ORIENTATION]:this.orientation},e)}else return(0,d.h)(s.ELEMENT_DIV,{ref:"root"})},mounted(){let e=t=>{let o=t.getPlugin(s.LassoPlugin.type);this.showPan=o!=null,t.bind(s.EVENT_SURFACE_MODE_CHANGED,n=>{t.removeClass(t.$getSelector(this.$refs.root,"[data-mode]"),po),t.addClass(t.$getSelector(this.$refs.root,"[data-mode='"+n+"']"),po)}),t.model.bind(s.EVENT_UNDOREDO_UPDATE,n=>{this.$refs.root.setAttribute(Ro,n.undoCount>0?s.TRUE:s.FALSE),this.$refs.root.setAttribute(vo,n.redoCount>0?s.TRUE:s.FALSE)}),t.model.bind(s.EVENT_SELECT,()=>this.updateSelectionState()),t.model.bind(s.EVENT_DESELECT,()=>this.updateSelectionState()),t.model.bind(s.EVENT_SELECTION_CLEARED,()=>this.updateSelectionState()),this.ready=!0};this.service.surface.value==null?(0,d.watch)(this.service.surface,e):e(this.service.surface.value)}};var I=require("vue"),C=require("@visuallyjs/browser-ui"),uo={name:ye,setup(e){return{service:(0,I.inject)(l)}},props:{surfaceId:{type:String},showLabel:{type:Boolean,default:!0},label:{type:String,default:"Export :"},margins:{type:Object},svgOptions:{type:Object},imageOptions:{type:Object},allowSvgExport:{type:Boolean,default:!0},allowPngExport:{type:Boolean,default:!0},allowJpgExport:{type:Boolean,default:!0}},methods:{loadSurface:function(e){let t=this.service.surface.value;t&&e(t)},exportSVG:function(){this.loadSurface(e=>{let t=this.svgOptions||{};this.margins!=null&&t.margins==null&&Object.assign(t,this.margins),new C.SvgExportUI(e).export(t)})},exportJPG:function(){this.loadSurface(e=>{let t=this.imageOptions||{};this.margins!=null&&t.margins==null&&Object.assign(t,this.margins),t.type="image/jpeg",new C.ImageExportUI(e).export(t)})},exportPNG:function(){this.loadSurface(e=>{let t=this.imageOptions||{};this.margins!=null&&t.margins==null&&Object.assign(t,this.margins),new C.ImageExportUI(e).export(t)})}},render(){let e=this.showLabel!==!1,t=this.allowSvgExport!==!1,o=this.allowPngExport!==!1,n=this.allowJpgExport!==!1,i=[];return t&&i.push((0,I.h)("i",{},[(0,I.h)("a",{href:"#","data-type":C.TYPE_SVG,onClick:()=>this.exportSVG()},"SVG")])),o&&i.push((0,I.h)("i",{},[(0,I.h)("a",{href:"#","data-type":C.TYPE_PNG,onClick:()=>this.exportPNG()},"PNG")])),n&&i.push((0,I.h)("i",{},[(0,I.h)("a",{href:"#","data-type":C.TYPE_JPG,onClick:()=>this.exportJPG()},"JPG")])),e&&i.unshift((0,I.h)("span",{},[this.label])),(0,I.h)(C.ELEMENT_DIV,{class:`${C.CLASS_CONTROLS} ${C.CLASS_EXPORT_CONTROLS}`},i)}};var X=require("vue"),$e=require("@visuallyjs/browser-ui"),mo={setup(e){return{service:(0,X.inject)(l)}},name:Oe,props:{[b]:{type:String},[k]:{type:String,default:""},[St]:{type:Boolean,default:!0},[Ct]:{type:Boolean,default:!0},[_t]:{type:Boolean,default:!0},[yt]:{type:Boolean,default:!0},[Et]:{type:Function}},mounted:function(){let e=t=>{t.addPlugin({type:$e.MiniviewPlugin.type,options:{container:this.$el,activeTracking:this.activeTracking,clickToCenter:this.clickToCenter,showLasso:this.showLasso,trackSelection:this.trackSelection,typeFunction:this.typeFunction}})};this.service.surface.value!=null?e(this.service.surface.value):(0,X.watch)(this.service.surface,e)},render:function(e){return(0,X.h)($e.ELEMENT_DIV,{ref:"root",class:e.className})}};var Z=require("vue"),He=require("@visuallyjs/browser-ui"),ho={setup(e){return{service:(0,Z.inject)(l)}},name:Te,props:{[L]:{type:Object},[U]:{type:String},[$]:{type:Object},[J]:{type:Object}},mounted(){let e=this.$refs.root;this.diagram=(0,Z.markRaw)((0,He.createDiagram)(e,this.options,this.modelOptions)),this.service.setDiagram(this.diagram),this.data?this.diagram.load({data:this.data}):this.url&&this.diagram.load({url:this.url})},render:function(){return(0,Z.h)(He.ELEMENT_DIV,{ref:"root",class:"vjs-vue-surface",style:{width:"100%",height:"100%"}},this.$slots.hasOwnProperty("default")?this.$slots.default():[])}};var G=require("vue"),h=require("@visuallyjs/browser-ui"),xo={[k]:{type:String},[L]:{type:Object},[U]:{type:String},[xt]:{type:Boolean,default:!1}},Do={setup(){return{service:(0,G.inject)(l)}},render:function(){return(0,G.h)(h.ELEMENT_DIV,{class:`${this.className}`,ref:"root"})}};function B(e,t,o=!0){let n=ce(F({},xo),{[J]:{type:Object}}),i={};return o&&(n[Ge]={type:Function},i[Ge]=function(c){this.chart.setDataSourceFilter(c)}),ce(F({},Do),{name:e,props:n,watch:i,data:()=>({hasMounted:!1}),mounted(){let c=this.$refs.root,r=o?Object.assign({dataSourceFilter:this.dataSourceFilter},this.options):this.options;this.data&&(r.data=this.data),this.url&&(r.url=this.url);let p=()=>{this.hasMounted=!0,this.chart=new t(c,r)};this.useModel?this.service.model.value!=null?(r.dataSource=this.service.model.value,p()):(0,G.watch)(this.service.model,a=>{this.hasMounted||(r.dataSource=a,p())}):p()}})}var We=B(Re,h.ColumnChart),ze=B(ve,h.BarChart),Je=B(Ae,h.CategoryValueChart,!1),Ke=B(De,h.PieChart),Ye=B(Ne,h.LineChart),Xe=B(xe,h.AreaChart),Ze=B(Ie,h.ScatterChart),qe=B(we,h.BubbleChart),Qe=B(Ve,h.GaugeChart,!1),et=ce(F({},Do),{name:Me,props:ce(F({},xo),{[At]:{type:String},[Nt]:{type:Object},[Rt]:{type:Boolean},[vt]:{type:String},[J]:{type:Object}}),data:()=>({hasMounted:!1}),mounted(){let e=this.$refs.root,t=Object.assign({},this.options);this.interactive!=null&&(t.interactive=this.interactive),this.pivot!=null&&(t.pivot=this.pivot),this.csvData&&(t.csvData=this.csvData),this.jsonData&&(t.jsonData=this.jsonData),this.url&&(t.url=this.url);let o=()=>{this.hasMounted=!1,this.chart=new h.SankeyChart(e,t)};if(this.useModel){let n=i=>{this.hasMounted||(t.dataSource=i,o())};this.service.model.value==null?(0,G.watch)(this.service.model,n):n(this.service.model.value)}else o()},watch:{pivot(e){this.chart&&this.chart.pivot(e)}},render:function(){return(0,G.h)(h.ELEMENT_DIV,{class:`${this.className}`,ref:"root"})}});var q=require("vue"),Q=require("@visuallyjs/browser-ui"),fo={setup(e){return{service:(0,q.inject)(l)}},name:_e,props:{[b]:{type:String},[Dt]:{type:String},[It]:{type:Function},[wt]:{type:Function},[Vt]:{type:Function},[Mt]:{type:Boolean,default:!1},[bt]:{type:Boolean,default:!0},[Lt]:{type:Boolean,default:!0},[Ut]:{type:Boolean,default:!1},[Bt]:{type:Boolean,default:!1},[$t]:Object,[jt]:Function,[Ht]:Function,[k]:String,[gt]:String,[Gt]:{type:Boolean,default:!1},[kt]:{type:Boolean,default:!1},[Ft]:{type:Boolean,default:!1}},mounted:function(){let e=t=>{let o={source:this.$refs.root,selector:this.selector,dataGenerator:n=>this.dataGenerator?this.dataGenerator(n):(0,Q.defaultDataGenerator)(n),allowDropOnEdge:this.allowDropOnEdge===!0,allowDropOnGroup:this.allowDropOnGroup!==!1,allowDropOnCanvas:this.allowDropOnCanvas!==!1,allowDropOnNode:this.allowDropOnNode===!0,ignoreDropOnNode:this.ignoreDropOnNode===!0,canvasDropFilter:this.canvasDropFilter,onVertexAdded:this.onVertexAdded,dragSize:this.dragSize,mode:this.mode};this.groupIdentifier!=null&&(o.groupIdentifier=this.groupIdentifier),this.typeGenerator!=null&&(o.typeGenerator=this.typeGenerator),this.palette=new Q.Palette(t,o)};this.service.surface.value==null?(0,q.watch)(this.service.surface,e):e(this.service.surface.value)},render:function(){return(0,q.h)(Q.ELEMENT_DIV,{ref:"root",class:this.className||""},this.$slots.hasOwnProperty("default")?this.$slots.default():[])}};var Io=require("vue"),tt={setup(){(0,Io.provide)(l,new N("SurfaceProvider"))},render(){return this.$slots.hasOwnProperty("default")?this.$slots.default():[]}};var wo=require("vue"),ot={setup(){(0,wo.provide)(l,new N("PaperProvider"))},render(){return this.$slots.hasOwnProperty("default")?this.$slots.default():[]}};var ee=require("vue"),w=require("@visuallyjs/browser-ui"),rt={name:he,props:{data:{type:Object},showLabels:{type:Boolean,default:!1},labelProperty:{type:String,default:"label"},labelStrokeWidth:{type:Number},multilineLabels:{type:Boolean,default:!0},labelFillRatio:{type:Number,default:w.DEFAULT_LABEL_FILL_RATIO},labelColor:{type:String,default:"#000000"},font:{type:Object}},setup(){return{service:(0,ee.inject)(l)}},mounted(){let e=t=>{let o=t.getShapeLibrary(),n=o.renderCompiledShape(Object.assign({sw:this.getOutlineWidth()},this.data));if(this.$refs.container.appendChild(n),this.showLabels){let i=o.renderShapeLabel(this.data,this.labelProperty,this.labelStrokeWidth,null,this.labelColor,this.labelColor,this.font);this.$refs.container.appendChild(i),this.multilineLabels!=!1&&(0,w.convertToMultilineText)(i,this.data[this.labelProperty]||"",this.getWidth()*(this.labelFillRatio||w.DEFAULT_LABEL_FILL_RATIO))}};this.service.ui.value==null?(0,ee.watch)(this.service.ui,e):e(this.service.ui.value)},updated(){let e=this.service.surface.value;if(e){let t=e.getShapeLibrary(),o=t.renderCompiledShape(Object.assign({sw:this.getOutlineWidth()},this.data));if(this.$refs.container.replaceChildren(o),this.showLabels){let n=t.renderShapeLabel(this.data,this.labelProperty,this.labelStrokeWidth,null,this.labelColor,this.labelColor,this.font);this.$refs.container.appendChild(n),this.multilineLabels!=!1&&(0,w.convertToMultilineText)(n,this.data[this.labelProperty]||"",this.getWidth()*(this.labelFillRatio||w.DEFAULT_LABEL_FILL_RATIO))}}},render:function(){return(0,ee.h)(w.ELEMENT_SVG,{ref:"container",preserveAspectRatio:"none",fill:this.getFill(),stroke:this.getOutline(),"stroke-width":this.getOutlineWidth(),viewBox:"0 0 "+this.getWidth()+" "+this.getHeight(),class:w.CLASS_SHAPE})},methods:{getWidth:function(){return this.data.width||Wt},getHeight:function(){return this.data.height||zt},getFill:function(){return this.data.fill||"#FFFFFF"},getOutline:function(){return this.data.outline||"#000000"},getOutlineWidth(){return this.data.outlineWidth||2}}};var te=require("vue"),nt=require("@visuallyjs/browser-ui"),st={name:fe,props:{surfaceId:{type:String},dragSize:Object,iconSize:Object,fill:String,outline:String,showAllMessage:String,selectAfterDrop:Boolean,paletteStrokeWidth:Number,dataGenerator:Function,initialSet:String,mode:String,allowClickToAdd:Boolean,onVertexAdded:Function,showLabels:Boolean,inspector:{type:Boolean,default:!0},preparedShapes:Array},setup(e){return{service:(0,te.inject)(l)}},data:()=>({hasMounted:!1}),mounted(){let e=t=>{this.hasMounted||(this.hasMounted=!0,new nt.ShapePalette(t,{container:this.$refs.container,shapeLibrary:t.getShapeLibrary(),dragSize:this.dragSize,iconSize:this.iconSize,fill:this.fill,outline:this.outline,showAllMessage:this.showAllMessage,selectAfterDrop:this.selectAfterDrop,paletteStrokeWidth:this.paletteStrokeWidth,dataGenerator:this.dataGenerator,initialSet:this.initialSet,mode:this.mode,allowClickToAdd:this.allowClickToAdd,onVertexAdded:this.onVertexAdded,showLabels:this.showLabels,inspector:this.inspector,preparedShapes:this.preparedShapes}))};this.service.surface.value==null?(0,te.watch)(this.service.surface,e):e(this.service.surface.value)},render:function(){return(0,te.h)(nt.ELEMENT_DIV,{ref:"container"})}};var V=require("vue"),oe=require("@visuallyjs/browser-ui"),re=Symbol.for("VueInspectorGetter"),Vo=Symbol.for("VueInspectorSetter");function Mo(){let e=[],t=null;function o(c){try{c(t)}catch(r){(0,oe.log)("WARN: inspector listener threw an exception",r)}}let n={listen:c=>{t!=null?o(c):e.push(c)}},i={inspector:c=>{t=c,e.forEach(o)}};return(0,V.provide)(Vo,i),(0,V.provide)(re,(0,V.readonly)(n)),i}var it={name:be,props:{autoCommit:{type:Boolean,default:!0},multipleSelections:{type:Boolean,default:!0},filter:Function,renderEmptyContainer:Function,refresh:Function,className:String,showCloseButton:Boolean,afterUpdate:Function,modelValue:Object},emits:["update:modelValue"],setup(e,t){let o=Mo();return{service:(0,V.inject)(l),inspectorProvider:o,inspector:null,emit:t.emit}},mounted(){let e=t=>{if(this.inspector==null){let o=new oe.Inspector({container:this.$refs.root,ui:t,renderEmptyContainer:()=>(this.emit("update:modelValue",null),this.renderEmptyContainer?this.renderEmptyContainer():""),refresh:(n,i)=>{this.emit("update:modelValue",n),this.refresh&&this.refresh(n),setTimeout(i)},autoCommit:this.autoCommit,multipleSelections:this.multipleSelections,filter:this.filter,showCloseButton:this.showCloseButton,afterUpdate:()=>this.afterUpdate?this.afterUpdate(t):null});this.inspectorProvider.inspector(o)}};this.service.surface.value==null?(0,V.watch)(this.service.surface,e):e(this.service.surface.value)},render(){return(0,V.h)(oe.ELEMENT_DIV,{ref:"root"},this.$slots.hasOwnProperty("default")?this.$slots.default():[])}};var at=require("vue"),ne=require("@visuallyjs/browser-ui"),lt={name:Pe,props:{propertyName:String},setup(){return{inspectorProvider:(0,at.inject)(re)}},mounted(){this.inspectorProvider?this.inspectorProvider.listen(e=>{let t=new ne.EdgeTypePicker(e.$ui,this.$refs.container,e.$ui.$getEdgePropertyMappings(),e.getValue(this.propertyName),(o,n)=>{e.setValue(this.propertyName,n,null)});t.render(this.propertyName,e.m),e.onChange(()=>{t.select(this.propertyName,e.getValue(this.propertyName))})}):(0,ne.log)("WARN: EdgeTypePicker not instantiated inside an InspectorComponent. Cannot mount.")},render:function(){return(0,at.h)(ne.ELEMENT_DIV,{ref:"container"})}};var W=require("vue"),f=require("@visuallyjs/browser-ui"),Po={render(){let e=this.swatches.map(t=>(0,W.h)(f.ELEMENT_DIV,{title:t,class:f.CLASS_COLOR_PICKER_SWATCH,style:`background-color:${t}`,"data-color":t,onClick:()=>this.selectSwatch(t)}));return(0,W.h)(f.ELEMENT_DIV,{class:`${f.CLASS_COLOR_PICKER}`},[(0,W.h)("input",{type:"color","vjs-att":this.propertyName,ref:"colorInput"}),(0,W.h)(f.ELEMENT_DIV,{class:f.CLASS_COLOR_PICKER_SWATCHES},e)])},props:{propertyName:String,maxColors:{type:Number,default:10}},data:()=>({CLASS_COLOR_PICKER:f.CLASS_COLOR_PICKER,CLASS_COLOR_PICKER_SWATCHES:f.CLASS_COLOR_PICKER_SWATCHES,CLASS_COLOR_PICKER_SWATCH:f.CLASS_COLOR_PICKER_SWATCH,colorInput:null,swatches:[]}),mounted(){let e=(0,W.inject)(re);e&&e.listen(t=>{this.inspector=t,this.swatches=t.ensureContext(f.INSPECTOR_CONTEXT_RECENT_COLORS,()=>[]),this.colorInput=this.$refs.colorInput,this.colorInput.addEventListener("change",this.colorPicked),t.bind(f.EVENT_CONTEXT_UPDATE,o=>{o.key===f.INSPECTOR_CONTEXT_RECENT_COLORS&&(this.swatches=o.value.slice())}),t.bind("change",this.setCurrentColor),this.setCurrentColor()})},methods:{addColor:function(e){let t=this.inspector.ensureContext(f.INSPECTOR_CONTEXT_RECENT_COLORS,()=>[]);if(e=e.toUpperCase(),!(t.find(n=>n.toUpperCase()===e)!=null)){let n=this.maxColors||10,i=t.slice();i.unshift(e),i.length>n&&(i.length=n),this.inspector.updateContext(f.INSPECTOR_CONTEXT_RECENT_COLORS,i)}},colorPicked:function(){let e=this.colorInput.value;this.inspector.setValue(this.propertyName,e,null),this.addColor(e)},selectSwatch:function(e){this.inspector.setValue(this.propertyName,e,null),this.colorInput.value=e},setCurrentColor:function(){let e=this.inspector.getValue(this.propertyName);e!=null&&(this.colorInput.value=e,this.addColor(e))}}};var T=require("vue"),se=require("@visuallyjs/browser-ui"),pt={props:{placement:{type:String,default:"floating"},position:{type:Object},constraints:{type:Object}},data:()=>({hasMounted:!1,surface:null}),setup(e){return{service:(0,T.inject)(l)}},mounted(){let e=t=>{if(!this.hasMounted){this.surface=t,this.hasMounted=!0;let o=this.position||{x:0,y:0};(0,T.nextTick)().then(()=>{this.placement==="floating"?t.floatElement(this.$refs.root,o):t.fixElement(this.$refs.fixedEl,o,this.constraints)})}};this.service.surface.value==null?(0,T.watch)(this.service.surface,e):e(this.service.surface.value)},render(){return(0,T.h)(se.ELEMENT_DIV,{ref:"root"},this.hasMounted?this.placement==="floating"?(0,T.h)(se.ELEMENT_DIV,{},this.$slots.hasOwnProperty("default")?this.$slots.default():[]):(0,T.h)(T.Teleport,{to:this.surface.vertexLayer,key:(0,se.uuid)()},(0,T.h)(se.ELEMENT_DIV,{ref:"fixedEl"},this.$slots.hasOwnProperty("default")?this.$slots.default():[])):[])}};var bo=require("vue"),ct={setup(){(0,bo.provide)(l,new N("DiagramProvider"))},render(){return this.$slots.hasOwnProperty("default")?this.$slots.default():[]}};var ie=require("vue"),ae=require("@visuallyjs/browser-ui"),ut={name:ge,props:{fill:String,outline:String,dragSize:Object,inspector:{type:Boolean,default:!0},iconSize:Object,showLabels:Boolean,paletteStrokeWidth:Number,showAllMessage:String,onCellAdded:Function,mode:String,allowClickToAdd:Boolean,autoExitDrawMode:Boolean,selectAfterAdd:{type:Boolean,default:!0},className:String,diagram:{type:Object},onVertexAdded:Function,preparedShapes:Array},setup(e){return{service:(0,ie.inject)(l)}},data:()=>({hasMounted:!1}),mounted(){if(this.service==null&&this.diagram==null)(0,ae.log)("Cannot mount DiagramPalette - no service found and Diagram not passed in as a prop");else{let e=t=>{this.hasMounted||(this.hasMounted=!0,new ae.DiagramPalette(this.$refs.container,t,{fill:this.fill,outline:this.outline,dragSize:this.dragSize,inspector:this.inspector,iconSize:this.iconSize,showLabels:this.showLabels,paletteStrokeWidth:this.paletteStrokeWidth,showAllMessage:this.showAllMessage,onCellAdded:this.onCellAdded,mode:this.mode,allowClickToAdd:this.allowClickToAdd,autoExitDrawMode:this.autoExitDrawMode,selectAfterAdd:this.selectAfterAdd,onVertexAdded:this.onVertexAdded,preparedShapes:this.preparedShapes}))};this.diagram?e(this.diagram):this.service.diagram.value!=null?e(this.service.diagram.value):(0,ie.watch)(this.service.diagram,e)}},render:function(){return(0,ie.h)(ae.ELEMENT_DIV,{ref:"container"})}};var v=require("@visuallyjs/browser-ui"),g=require("vue"),dt={name:"SurfacePopup",props:{selector:String,anchor:{type:String,default:"bottom"}},setup(e){let t=(0,g.inject)(l),o=(0,g.ref)(null),n=(0,g.ref)("block"),i=(0,g.ref)(null),c=(0,g.ref)(null),r=p=>{c.value=new v.PopupHandler(e.selector,i.value,p,a=>{o.value=a,a==null?n.value=v.NONE:(n.value=v.BLOCK,requestAnimationFrame(()=>c.value.$positionPopup()))},e.anchor)};return(0,g.onMounted)(()=>{t.surface.value==null?(0,g.watch)(t.surface,r):r(t.surface.value)}),{service:t,current:o,display:n,rootRef:i,handler:c}},render(){var e;return(0,g.h)(v.ELEMENT_DIV,{ref:"rootRef",display:this.display,position:v.ABSOLUTE,class:v.CLASS_SURFACE_POPUP},this.$slots.hasOwnProperty("default")?this.$slots.default({vertex:this.current,model:(e=this.service.surface.value)==null?void 0:e.model,ui:this.service.surface.value,hide:()=>{var t;return(t=this.handler.value)==null?void 0:t.$hide()}}):[])}};var ur={install:function(e,t){e.component(Zt,tt),e.component(qt,ot),e.component(Qt,ct),e.component(Ee,ao),e.component(Ce,lo),e.component(Te,ho),e.component(Oe,mo),e.component(Se,co),e.component(ye,uo),e.component(_e,fo),e.component(ge,ut),e.component(ve,ze),e.component(Re,We),e.component(Ae,Je),e.component(Ne,Ye),e.component(xe,Xe),e.component(De,Ke),e.component(Me,et),e.component(Ve,Qe),e.component(we,qe),e.component(Ie,Ze),e.component(he,rt),e.component(fe,st),e.component(Pe,lt),e.component(Jt,Po),e.component(be,it),e.component(to,pt),e.component(eo,dt),e.provide(l,new N("root"))}};var le=require("vue"),mt=require("@visuallyjs/browser-ui"),Lo=require("vue");function dr(){let e=(0,Lo.inject)(l),t=(0,le.shallowRef)(null),o=(0,le.shallowRef)(null),n=(0,le.shallowRef)(null),i=(0,le.ref)(1);return e==null||e.getSurface(c=>{o.value=c,o.value.bind(mt.EVENT_ZOOM,r=>{i.value=r.zoom})}),e==null||e.getDiagram(c=>{t.value=c,t.value.$ui.bind(mt.EVENT_ZOOM,r=>{i.value=r.zoom})}),e==null||e.getPaper(c=>{n.value=c,n.value.bind(mt.EVENT_ZOOM,r=>{i.value=r.zoom})}),i}var ht=require("vue"),pe=require("@visuallyjs/browser-ui");function mr(e){let t=(0,ht.inject)(l);if(t){let o=null,n=()=>{o&&e(o)},i=()=>{o&&(o.unbind(pe.EVENT_DATA_UPDATED,n),o.unbind(pe.EVENT_GRAPH_CLEARED,n))},c=r=>{i(),o=r,o&&(o.bind(pe.EVENT_DATA_UPDATED,n),o.bind(pe.EVENT_GRAPH_CLEARED,n),n())};t.getModel(r=>{c(r)}),(0,ht.onUnmounted)(()=>{i()})}}var Uo=require("vue"),Bo=require("vue");function hr(){let e=(0,Bo.inject)(l),t=(0,Uo.shallowRef)(null);return e==null||e.getSurface(o=>{t.value=o}),t}var jo=require("vue"),Go=require("vue");function fr(){let e=(0,Go.inject)(l),t=(0,jo.shallowRef)(null);return e==null||e.getDiagram(o=>{t.value=o}),t}var Fo=require("vue"),ko=require("vue");function Pr(){let e=(0,ko.inject)(l),t=(0,Fo.shallowRef)(null);return e==null||e.getPaper(o=>{t.value=o}),t}
|
|
1
|
+
var We=Object.defineProperty,nr=Object.defineProperties,ir=Object.getOwnPropertyDescriptor,sr=Object.getOwnPropertyDescriptors,ar=Object.getOwnPropertyNames,Io=Object.getOwnPropertySymbols;var wo=Object.prototype.hasOwnProperty,lr=Object.prototype.propertyIsEnumerable;var Mo=(e,t,o)=>t in e?We(e,t,{enumerable:!0,configurable:!0,writable:!0,value:o}):e[t]=o,z=(e,t)=>{for(var o in t||(t={}))wo.call(t,o)&&Mo(e,o,t[o]);if(Io)for(var o of Io(t))lr.call(t,o)&&Mo(e,o,t[o]);return e},he=(e,t)=>nr(e,sr(t));var pr=(e,t)=>{for(var o in t)We(e,o,{get:t[o],enumerable:!0})},cr=(e,t,o,n)=>{if(t&&typeof t=="object"||typeof t=="function")for(let s of ar(t))!wo.call(e,s)&&s!==o&&We(e,s,{get:()=>t[s],enumerable:!(n=ir(t,s))||n.enumerable});return e};var ur=e=>cr(We({},"__esModule",{value:!0}),e);var Ar={};pr(Ar,{$initialiseVueOverlays:()=>$e,AreaChartComponent:()=>it,BackgroundComponent:()=>No,BarChartComponent:()=>tt,BaseOverlayComponent:()=>fo,BrowserUIVueModel:()=>N,BubbleChartComponent:()=>at,CLASS_VUE_GROUP:()=>ro,CLASS_VUE_NODE:()=>oo,CLASS_VUE_OVERLAY:()=>no,COMPONENT_AREA_CHART:()=>Le,COMPONENT_BACKGROUND:()=>ye,COMPONENT_BAR_CHART:()=>be,COMPONENT_BUBBLE_CHART:()=>ke,COMPONENT_COLUMN_CHART:()=>we,COMPONENT_CONTROLS:()=>xe,COMPONENT_DIAGRAM:()=>Ie,COMPONENT_DIAGRAM_PALETTE:()=>Me,COMPONENT_DIAGRAM_PROVIDER:()=>ao,COMPONENT_EXPORT_CONTROLS:()=>De,COMPONENT_GAUGE_CHART:()=>je,COMPONENT_GRID_BACKGROUND:()=>ge,COMPONENT_IMAGE_BACKGROUND:()=>Te,COMPONENT_INSPECTOR:()=>He,COMPONENT_LINE_CHART:()=>Be,COMPONENT_MINIVIEW:()=>ve,COMPONENT_PALETTE:()=>Ae,COMPONENT_PAPER:()=>Ne,COMPONENT_PAPER_PROVIDER:()=>so,COMPONENT_PIE_CHART:()=>Ue,COMPONENT_SANKEY_CHART:()=>Fe,COMPONENT_SCATTER_CHART:()=>Ge,COMPONENT_SURFACE:()=>Re,COMPONENT_SURFACE_POPUP:()=>lo,COMPONENT_SURFACE_PROVIDER:()=>io,COMPONENT_TILED_IMAGE_BACKGROUND:()=>Se,COMPONENT_XY_CHART:()=>Ve,ColorPickerComponent:()=>Ro,ColumnChartComponent:()=>et,ControlsComponent:()=>yo,DEFAULT_SHAPE_HEIGHT:()=>eo,DEFAULT_SHAPE_WIDTH:()=>Qt,DEFAULT_VUE_PAPER_ID:()=>vt,DEFAULT_VUE_SURFACE_ID:()=>St,DecoratorComponent:()=>Et,DiagramComponent:()=>So,DiagramPaletteComponent:()=>_t,DiagramProvider:()=>Ct,EVENT_VERTEX_UPDATED:()=>Lo,EVENT_VERTICES_RENDERED:()=>Bo,EdgeTypePickerComponent:()=>Ot,ExportControlsComponent:()=>go,GaugeChartComponent:()=>lt,GridBackgroundComponent:()=>Ao,ImageBackgroundComponent:()=>xo,InspectorComponent:()=>ft,InspectorGetterSymbol:()=>ae,InspectorSetterSymbol:()=>Ko,LineChartComponent:()=>nt,MiniviewComponent:()=>To,PROP_ACTIVE_TRACKING:()=>xt,PROP_ALLOW_CLICK_TO_ADD:()=>Xt,PROP_ALLOW_DROP_ON_CANVAS:()=>Ht,PROP_ALLOW_DROP_ON_EDGE:()=>Ft,PROP_ALLOW_DROP_ON_GROUP:()=>$t,PROP_ALLOW_DROP_ON_NODE:()=>Wt,PROP_CANVAS_DROP_FILTER:()=>qt,PROP_CLASS_NAME:()=>K,PROP_CLICK_TO_ADD_ONLY:()=>Yt,PROP_CLICK_TO_CENTER:()=>Nt,PROP_CSV_DATA:()=>Vt,PROP_DATA:()=>G,PROP_DATA_GENERATOR:()=>Gt,PROP_DATA_SOURCE_FILTER:()=>Ke,PROP_DRAG_SIZE:()=>Zt,PROP_GROUP_IDENTIFIER:()=>jt,PROP_ID:()=>mr,PROP_IGNORE_DROP_ON_NODE:()=>zt,PROP_INTERACTIVE:()=>wt,PROP_JSON_DATA:()=>Bt,PROP_MODE:()=>Mt,PROP_MODEL:()=>Pe,PROP_MODEL_OPTIONS:()=>J,PROP_ON_VERTEX_ADDED:()=>Kt,PROP_OPTIONS:()=>Q,PROP_PAPER_ID:()=>It,PROP_PIVOT:()=>bt,PROP_RENDER_OPTIONS:()=>fe,PROP_SELECTOR:()=>Ut,PROP_SELECT_AFTER_ADD:()=>Jt,PROP_SHOW_LASSO:()=>At,PROP_SURFACE_ID:()=>U,PROP_TRACK_SELECTION:()=>Dt,PROP_TYPE_FUNCTION:()=>Rt,PROP_TYPE_GENERATOR:()=>kt,PROP_URL:()=>k,PROP_USE_MODEL:()=>Lt,PROP_VIEW_OPTIONS:()=>Oe,PaletteComponent:()=>vo,PaperComponent:()=>Co,PaperProvider:()=>ut,PieChartComponent:()=>rt,SankeyChartComponent:()=>pt,ScatterChartComponent:()=>st,ShapeComponent:()=>dt,ShapePaletteComponent:()=>ht,SurfaceComponent:()=>Eo,SurfacePopup:()=>yt,SurfaceProvider:()=>ct,TAG_COLOR_PICKER:()=>to,TAG_DECORATOR:()=>po,TAG_EDGE_TYPE_PICKER:()=>_e,TAG_SHAPE:()=>Ee,TAG_SHAPE_PALETTE:()=>Ce,TiledImageBackgroundComponent:()=>Do,VisuallyJsPlugin:()=>gr,VisuallyJsService:()=>x,VisuallyJsServiceKey:()=>a,XYChartComponent:()=>ot,addPaper:()=>Oo,addSurface:()=>Po,bindToDevLifecycle:()=>hr,doProvideInspector:()=>Jo,newInstance:()=>dr,useDiagram:()=>Rr,usePaper:()=>Nr,useSurface:()=>vr,useVisuallyJsUpdate:()=>Sr,useZoom:()=>Tr,vertexHasRendered:()=>co,vertexHasUpdated:()=>uo,vertexWillRender:()=>Uo});module.exports=ur(Ar);var ze=require("@visuallyjs/browser-ui"),N=class extends ze.BrowserUIModel{render(t,o){return(0,ze.log)("render called directly on BrowserUiVue class: should not happen. Surface component should use internal render."),null}};function dr(e){return e=e||{},new N(e)}var St="surfaceId",vt="paperId",Rt="typeFunction",Nt="clickToCenter",At="showLasso",xt="activeTracking",Dt="trackSelection",U="surfaceId",It="paperId",K="className",G="data",Mt="mode",Q="options",fe="renderOptions",J="modelOptions",Pe="model",Oe="viewOptions",k="url",wt="interactive",bt="pivot",Ke="dataSourceFilter",Vt="csvData",Bt="jsonData",Lt="useModel",mr="id",Ut="selector",Gt="dataGenerator",kt="typeGenerator",jt="groupIdentifier",Ft="allowDropOnEdge",Ht="allowDropOnCanvas",$t="allowDropOnGroup",Wt="allowDropOnNode",zt="ignoreDropOnNode",Kt="onVertexAdded",Jt="selectAfterAdd",Yt="clickToAddOnly",Xt="allowClickToAdd",Zt="dragSize",qt="canvasDropFilter",Ee="Shape",Ce="ShapePalette",Qt=120,eo=90,_e="EdgeTypePickerComponent",to="ColorPickerComponent",oo="vjs-vue-node",ro="vjs-vue-group",no="vjs-vue-overlay",ye="BackgroundComponent",ge="GridBackgroundComponent",Te="ImageBackgroundComponent",Se="TiledImageBackgroundComponent",ve="MiniviewComponent",Re="SurfaceComponent",io="SurfaceProvider",Ne="PaperComponent",so="PaperProvider",ao="DiagramProvider",Ae="PaletteComponent",xe="ControlsComponent",De="ExportControlsComponent",Ie="DiagramComponent",Me="DiagramPaletteComponent",we="ColumnChartComponent",be="BarChartComponent",Ve="XYChartComponent",Be="LineChartComponent",Le="AreaChartComponent",Ue="PieChartComponent",Ge="ScatterChartComponent",ke="BubbleChartComponent",je="GaugeChartComponent",Fe="SankeyChartComponent",He="InspectorComponent",lo="SurfacePopup",po="Decorator";var j=require("@visuallyjs/browser-ui"),Je={props:{data:Object,model:N,obj:j.Vertex,vertex:j.Vertex,ui:j.BrowserUI,el:Element,def:Object,eventInfo:Object},mounted(){let e=this,t=(0,j.isGroup)(e.vertex)?ro:oo;e.el.firstElementChild&&(0,j.addClass)(e.el.firstElementChild,t),e.ui.$vertexRendered(e.vertex,e.el,e.def,e.eventInfo),co(e.ui.id,e.vertex)},methods:{getModel:function(){return this.model},removeVertex:function(){this.model.remove(this.vertex)}},updated(){this.ui.$revalidateElement(this.el),uo(this.ui.id,this.vertex)}};var bo={mixins:[Je],methods:{getNode:function(){return this.obj},removeNode:function(){this.model.removeNode(this.getNode())},updateNode:function(e){this.model.updateNode(this.obj,e);let t=this.ui.getRenderedElement(this.obj.getFullId());this.ui.$revalidateElement(t)}}};var Vo={methods:{getGroup:function(){return this.obj},removeGroup:function(e){this.model.removeGroup(this.obj,e)},updateGroup:function(e){this.model.updateGroup(this.obj,e);let t=this.ui.getRenderedElement(this.obj.getFullId());this.ui.$revalidateElement(t)}},mixins:[Je]};var L=require("vue"),u=require("@visuallyjs/browser-ui"),mo=class{constructor(){this.unrenderedVertices=new Map;this.eventManager=new u.OptimisticEventGenerator}vertexWillRender(t){this.unrenderedVertices.set(t.id,t)}vertexHasRendered(t){this.unrenderedVertices.delete(t.id),this.unrenderedVertices.size===0&&this.eventManager.fire(Bo)}vertexHasUpdated(t){this.eventManager.fire(Lo,t)}},Bo="vertices:rendered",Lo="vertex:updated",ho=new Map;function Ye(e){return ho.has(e)||ho.set(e,new mo),ho.get(e)}function co(e,t){Ye(e).vertexHasRendered(t)}function uo(e,t){Ye(e).vertexHasUpdated(t)}function Uo(e,t){Ye(e).vertexWillRender(t)}function hr(e,t,o){Ye(e).eventManager.bind(t,o)}var Xe=(e,t)=>{t.parentNode&&t.parentNode.removeChild(t)},fo={props:{data:Object,model:N,obj:u.Edge,edge:u.Edge,overlay:u.Overlay,ui:u.BrowserUI,el:Element,def:Object,eventInfo:Object},mounted(){let e=this;e.el.firstElementChild&&(0,u.addClass)(e.el.firstElementChild,no)},updated(){this.ui.$revalidateElement(this.el)}},Ze=(e,t,o,n,s,c,r,l,p)=>{let f=r.component!=null,m=(0,u.isGroup)(l),y=[];f||y.push(m?u.CLASS_DEFAULT_GROUP:u.CLASS_DEFAULT_NODE);let C=f?r.component:{render(T){return T.data.label||""}};if(C){let T=document.createElement(u.ELEMENT_DIV);(0,u.updateClasses)(T,y),C.mixins==null&&(C.mixins=[]);let R=m?Vo:bo;C.mixins.find(B=>B===R)||C.mixins.push(R),Uo(c.id,l);let q={data:o,model:(0,L.markRaw)(n),ui:(0,L.markRaw)(c),obj:l,vertex:l,el:T,def:(0,L.markRaw)(r),eventInfo:p==null?null:(0,L.markRaw)(p)};if(r.inject)for(let B in r.inject){let W=r.inject[B],rr=typeof W=="function"?W(l,n):W;q[B]=rr}e.push({component:(0,L.markRaw)(C),el:T,e:l.getFullId(),props:q,vertex:l})}};function Po(e,t,o,n,s,c){let r={reactive:!0,asynchronous:!0,usesWrapperElement:!1,update:(p,f,m,y)=>{},render:(p,f,m,y,C,T,R,H)=>Ze(n,p,f,m,y,C,T,R,H),cleanupVertex:Xe,cleanupPort:Xe,rerender:(p,f,m,y,C,T,R,H,q)=>{let B=n.findIndex(W=>W.vertex===R);B!=null&&n.splice(B,1)[0].el,C.$__unmanage(q,!0,!0),requestAnimationFrame(()=>{Ze(n,p,f,m,y,C,T,R,H)})}},l=(0,u.extend)(s||{},{view:c||{},id:t});return(0,u.renderSurface)(e,o,r,l)}function Oo(e,t,o,n,s,c){let r={reactive:!0,asynchronous:!0,usesWrapperElement:!1,update:(p,f,m,y)=>{},render:(p,f,m,y,C,T,R,H)=>Ze(n,p,f,m,y,C,T,R,H),cleanupVertex:Xe,cleanupPort:Xe,rerender:(p,f,m,y,C,T,R,H,q)=>{let B=n.findIndex(W=>W.vertex===R);B!=null&&n.splice(B,1)[0].el,C.$__unmanage(q,!0,!0),requestAnimationFrame(()=>{Ze(n,p,f,m,y,C,T,R,H)})}},l=(0,u.extend)(s||{},{view:c||{},id:t});return(0,u.renderPaper)(e,o,r,l)}function $e(e,t,o,n){if(e.edges)for(let s in e.edges){let c=e.edges[s];c.overlays&&(c.overlays=c.overlays.map(r=>{let l={};return r.component!=null?{type:u.OVERLAY_TYPE_CUSTOM,options:{create:f=>{let m=document.createElement(u.ELEMENT_DIV),y=(0,u.uuid)();r.component.mixins==null&&(r.component.mixins=[]),r.component.mixins.indexOf(fo)===-1&&r.component.mixins.push(fo);let C=z({data:f.edge.data,model:(0,L.markRaw)(o()),ui:(0,L.markRaw)(t()),obj:f.edge,edge:f.edge,el:m,def:(0,L.markRaw)(r),eventInfo:null,overlay:r},l);return n.push({component:(0,L.markRaw)(r.component),el:m,e:y,props:C}),m}}}:r}))}}var Y=require("@visuallyjs/browser-ui"),ee=require("vue"),a=Symbol.for("visuallyjs-service"),x=class{constructor(t){this.context=t;this.i=[];this.s=[];this.a=[];this.l=[];this.surface=(0,ee.shallowRef)(null);this.model=(0,ee.shallowRef)(null);this.paper=(0,ee.shallowRef)(null);this.diagram=(0,ee.shallowRef)(null);this.ui=(0,ee.shallowRef)(null)}getSurface(t){this.t(this.s,t,this.p)}getDiagram(t){this.t(this.a,t,this.c)}getPaper(t){this.t(this.l,t,this.u)}getModel(t){this.t(this.i,t,this.r)}getModelDirect(){return this.r}t(t,o,n){if(n!=null)try{o(n)}catch(s){(0,Y.log)(`WARN: could not dispatch ${s}`)}else t.push(o)}setSurface(t){this.surface.value=t,this.model.value=t.model,this.ui.value=t,this.p=t,this.n(t.model),this.o(this.s,t)}setDiagram(t){this.diagram.value=t,this.model.value=t.model,this.ui.value=t.$ui,this.c=t,this.n(t.model),t.$ui instanceof Y.Surface?this.setSurface(t.$ui):t.$ui instanceof Y.Paper&&this.setPaper(t.$ui),this.o(this.a,t)}setPaper(t){this.paper.value=t,this.model.value=t.model,this.ui.value=t,this.u=t,this.n(t.model),this.o(this.l,t)}n(t){this.r=t,this.o(this.i,t)}o(t,o){t.forEach(n=>{try{n(o)}catch(s){(0,Y.log)(`WARN: could not flush all queue entries ${s}`)}})}};var D=require("vue"),P=require("@visuallyjs/browser-ui"),Eo={setup(e){return{service:(0,D.inject)(a),surfaceId:e.surfaceId||St}},name:Re,props:{[G]:{type:Object},[fe]:{type:Object},[J]:{type:Object},[Oe]:{type:Object},[Pe]:{type:Object},[k]:{type:String},[U]:{type:String}},data:function(){return{vertices:[],overlays:[]}},mounted(){let e=this,t=this.model||new N(this.modelOptions||{}),o=this.$refs.root;e.url?t.load({url:e.url}):e.data&&t.load({data:e.data});let n=(0,P.clone)(this.viewOptions||{});$e(n,()=>this.surface,()=>t,this.overlays),this.surface=Po(t,this.surfaceId,o,this.vertices,(0,P.clone)(this.renderOptions||{}),n),this.service.setSurface(this.surface);let s=(r,l)=>{let p=()=>{let m={};return l.originalData||l.updates?m=Object.assign(l.originalData,l.updates):l.newData&&Object.assign(m,l.newData),m},f=this.vertices.find(m=>m.e===r);f!=null&&(f.props.data=p())},c=r=>{let l=this.vertices.findIndex(p=>p.e===r);l!==-1&&this.vertices.splice(l,1)};t.bind(P.EVENT_NODE_UPDATED,r=>{s(r.vertex.getFullId(),r)}),t.bind(P.EVENT_GROUP_UPDATED,r=>{s(r.vertex.getFullId(),r)}),t.bind(P.EVENT_NODE_REMOVED,r=>{c(r.node.id)}),t.bind(P.EVENT_GROUP_REMOVED,r=>{c(r.group.id)}),t.bind(P.EVENT_EDGE_UPDATED,r=>{let l=r.edge.id;this.overlays.forEach(p=>{p.props.edge&&p.props.edge.id===l&&(p.props.data=r.edge.data)})}),t.bind(P.EVENT_EDGE_REMOVED,r=>{let l=r.edge.id,p=this.overlays.length-1;for(;p>=0;)this.overlays[p].props.edge&&this.overlays[p].props.edge.id===l&&this.overlays.splice(p,1),p--}),t.bind(P.EVENT_GRAPH_CLEARED,()=>{this.vertices.length=0,this.overlays.length=0}),this.surface.bind(P.EVENT_RENDER_END,()=>setTimeout(()=>this.surface.$redrawEveryConnection()))},render:function(){let e=this.vertices.map(t=>(0,D.h)(D.Teleport,{to:t.el,key:t.e},[(0,D.h)(t.component,t.props)]));return this.overlays.forEach(t=>{e.push((0,D.h)(D.Teleport,{to:t.el,key:t.e},[(0,D.h)(t.component,t.props)]))}),(0,D.h)(P.ELEMENT_DIV,{ref:"root",class:"vjs-vue-surface",style:{width:"100%",height:"100%"}},e.concat(this.$slots.hasOwnProperty("default")?this.$slots.default():[]))}};var I=require("vue"),O=require("@visuallyjs/browser-ui"),Co={setup(e){return{service:(0,I.inject)(a),paperId:e.paperId||vt}},name:Ne,props:{[G]:{type:Object},[fe]:{type:Object},[J]:{type:Object},[Oe]:{type:Object},[Pe]:{type:Object},[k]:{type:String},[It]:{type:String}},data:function(){return{vertices:[],overlays:[]}},mounted(){let e=this,t=this.model||new N(this.modelOptions||{}),o=this.$refs.root;e.url?t.load({url:e.url}):e.data&&t.load({data:e.data});let n=(0,O.clone)(this.viewOptions||{});$e(n,()=>this.paper,()=>t,this.overlays),this.paper=Oo(t,this.paperId,o,this.vertices,(0,O.clone)(this.renderOptions||{}),n),this.service.setPaper(this.paper);let s=(r,l)=>{let p=()=>{let m={};return l.originalData||l.updates?m=Object.assign(l.originalData,l.updates):l.newData&&Object.assign(m,l.newData),m},f=this.vertices.find(m=>m.e===r);f!=null&&(f.props.data=p())},c=r=>{let l=this.vertices.findIndex(p=>p.e===r);l!==-1&&this.vertices.splice(l,1)};t.bind(O.EVENT_NODE_UPDATED,r=>{s(r.vertex.getFullId(),r)}),t.bind(O.EVENT_GROUP_UPDATED,r=>{s(r.vertex.getFullId(),r)}),t.bind(O.EVENT_NODE_REMOVED,r=>{c(r.node.id)}),t.bind(O.EVENT_GROUP_REMOVED,r=>{c(r.group.id)}),t.bind(O.EVENT_EDGE_UPDATED,r=>{let l=r.edge.id;this.overlays.forEach(p=>{p.props.edge&&p.props.edge.id===l&&(p.props.data=r.edge.data)})}),t.bind(O.EVENT_EDGE_REMOVED,r=>{let l=r.edge.id,p=this.overlays.length-1;for(;p>=0;)this.overlays[p].props.edge&&this.overlays[p].props.edge.id===l&&this.overlays.splice(p,1),p--}),t.bind(O.EVENT_GRAPH_CLEARED,()=>{this.vertices.length=0,this.overlays.length=0}),this.paper.bind(O.EVENT_RENDER_END,()=>setTimeout(()=>this.paper.$redrawEveryConnection()))},render:function(){let e=this.vertices.map(t=>(0,I.h)(I.Teleport,{to:t.el,key:t.e},[(0,I.h)(t.component,t.props)]));return this.overlays.forEach(t=>{e.push((0,I.h)(I.Teleport,{to:t.el,key:t.e},[(0,I.h)(t.component,t.props)]))}),(0,I.h)(O.ELEMENT_DIV,{ref:"root",class:"vjs-vue-paper",style:{width:"100%",height:"100%"}},e.concat(this.$slots.hasOwnProperty("default")?this.$slots.default():[]))}};var d=require("vue"),i=require("@visuallyjs/browser-ui"),fr="Clear dataset?",_o="vjs-selected-mode",Go="can-undo",ko="can-redo",Pr="data-undo",Or="data-redo",jo="data-mode",Er="data-reset",Cr="data-clear",_r="data-zoom-in",yr="data-zoom-out",Fo="vjs-controls-has-selection",yo={setup(e){return{service:(0,d.inject)(a)}},name:xe,props:{clear:{type:Boolean,default:!0},[U]:{type:String},undoRedo:{type:Boolean,default:!0},orientation:{type:String,default:"row"},zoomToExtents:{type:Boolean,default:!0},zoomButtons:{type:Boolean,default:!1},clearMessage:{type:String,default:fr},onMaybeClear:{type:Function},className:{type:String,default:""}},methods:{panMode:function(){var e;(e=this.service.surface.value)==null||e.setMode(i.SURFACE_MODE_PAN)},selectMode:function(){var e;(e=this.service.surface.value)==null||e.setMode(i.SURFACE_MODE_SELECT)},zoomToFit:function(){var e;(e=this.service.surface.value)==null||e.zoomToFit()},doClear:function(){let e=this.service.surface.value;e&&(this.onMaybeClear!=null?this.onMaybeClear(()=>e.model.clear()):window.confirm(this.clearMessage)&&e.model.clear())},undo:function(){var e;(e=this.service.model.value)==null||e.undo()},redo:function(){var e;(e=this.service.model.value)==null||e.redo()},zoomIn:function(){var e;(e=this.service.surface.value)==null||e.zoomIn()},zoomOut:function(){var e;(e=this.service.surface.value)==null||e.zoomOut()},resetSelection(){let e=this.service.surface.value;e&&(e.model.clearSelection(),(0,i.supportsPathEditing)(e)&&e.stopEditingPath())},updateSelectionState:function(){let e=this.service.surface.value;e&&(e.model.getSelection().isEmpty()?this.$refs.root.removeAttribute(Fo):this.$refs.root.setAttribute(Fo,"true"))}},data:function(){return{ready:!1,hasLasso:!1}},render(){if(this.ready){let e=[];return this.showPan&&(e.push((0,d.h)("i",{class:`vjs-pan-mode ${_o}`,[jo]:i.SURFACE_MODE_PAN,onClick:()=>this.panMode(),title:"Pan mode"},[(0,d.h)("svg",{viewBox:i.PAN_VIEW_BOX,stroke:"currentColor",fill:"none"},[(0,d.h)("path",{d:i.PAN_PATH})])])),e.push((0,d.h)("i",{class:"vjs-select-mode",[jo]:i.SURFACE_MODE_SELECT,onClick:()=>this.selectMode(),title:"Select mode"},[(0,d.h)("svg",{viewBox:i.LASSO_VIEW_BOX,stroke:"currentColor",fill:"currentColor"},[(0,d.h)("path",{d:i.LASSO_PATH})])]))),this.undoRedo&&(e.push((0,d.h)("i",{class:"vjs-undo",[Pr]:!0,title:"Undo last action",onClick:()=>this.undo()})),e.push((0,d.h)("i",{class:"vjs-redo",[Or]:!0,title:"Redo last action",onClick:()=>this.redo()}))),this.zoomToExtents&&e.push((0,d.h)("i",{class:"vjs-zoom-to-fit",[Er]:"true",onClick:()=>this.zoomToFit(),title:"Zoom to Fit"},[(0,d.h)("svg",{viewBox:i.ZOOM_TO_FIT_VIEW_BOX,stroke:"currentColor",fill:"currentColor"},[(0,d.h)("path",{d:i.ZOOM_TO_FIT_PATH})])])),this.zoomButtons&&(e.push((0,d.h)("i",{class:"vjs-zoom-in",[_r]:"true",onClick:()=>this.zoomIn(),title:"Zoom In"},[(0,d.h)("svg",{viewBox:i.ZOOM_IN_OUT_VIEW_BOX,stroke:"currentColor",fill:"currentColor"},[(0,d.h)("path",{d:i.ZOOM_IN_PATH})])])),e.push((0,d.h)("i",{class:"vjs-zoom-out",[yr]:"true",onClick:()=>this.zoomOut(),title:"Zoom Out"},[(0,d.h)("svg",{viewBox:i.ZOOM_IN_OUT_VIEW_BOX,stroke:"currentColor",fill:"currentColor"},[(0,d.h)("path",{d:i.ZOOM_OUT_PATH})])]))),e.push((0,d.h)("i",{class:i.CLASS_CONTROLS_RESET_SELECTION,[i.ATTRIBUTE_RESET_SELECTION]:"true",onClick:()=>{this.resetSelection()}},[(0,d.h)("svg",{viewBox:i.RESET_SELECTION_VIEW_BOX,stroke:"currentColor",fill:"currentColor"},[(0,d.h)("path",{d:i.RESET_SELECTION_PATH})])])),this.clear&&e.push((0,d.h)("i",{class:"vjs-clear-dataset",[Cr]:"true",onClick:()=>{this.doClear()}},[(0,d.h)("svg",{viewBox:i.CLEAR_VIEW_BOX,stroke:"currentColor",fill:"currentColor"},[(0,d.h)("path",{d:i.CLEAR_PATH})])])),(0,d.h)(i.ELEMENT_DIV,{class:`vjs-controls ${this.className}`,ref:"root",[Go]:!1,[ko]:!1,[i.ATTRIBUTE_CONTROLS_ORIENTATION]:this.orientation},e)}else return(0,d.h)(i.ELEMENT_DIV,{ref:"root"})},mounted(){let e=t=>{let o=t.getPlugin(i.LassoPlugin.type);this.showPan=o!=null,t.bind(i.EVENT_SURFACE_MODE_CHANGED,n=>{t.removeClass(t.$getSelector(this.$refs.root,"[data-mode]"),_o),t.addClass(t.$getSelector(this.$refs.root,"[data-mode='"+n+"']"),_o)}),t.model.bind(i.EVENT_UNDOREDO_UPDATE,n=>{this.$refs.root.setAttribute(Go,n.undoCount>0?i.TRUE:i.FALSE),this.$refs.root.setAttribute(ko,n.redoCount>0?i.TRUE:i.FALSE)}),t.model.bind(i.EVENT_SELECT,()=>this.updateSelectionState()),t.model.bind(i.EVENT_DESELECT,()=>this.updateSelectionState()),t.model.bind(i.EVENT_SELECTION_CLEARED,()=>this.updateSelectionState()),this.ready=!0};this.service.surface.value==null?(0,d.watch)(this.service.surface,e):e(this.service.surface.value)}};var M=require("vue"),_=require("@visuallyjs/browser-ui"),go={name:De,setup(e){return{service:(0,M.inject)(a)}},props:{surfaceId:{type:String},showLabel:{type:Boolean,default:!0},label:{type:String,default:"Export :"},margins:{type:Object},svgOptions:{type:Object},imageOptions:{type:Object},allowSvgExport:{type:Boolean,default:!0},allowPngExport:{type:Boolean,default:!0},allowJpgExport:{type:Boolean,default:!0}},methods:{loadSurface:function(e){let t=this.service.surface.value;t&&e(t)},exportSVG:function(){this.loadSurface(e=>{let t=this.svgOptions||{};this.margins!=null&&t.margins==null&&Object.assign(t,this.margins),new _.SvgExportUI(e).export(t)})},exportJPG:function(){this.loadSurface(e=>{let t=this.imageOptions||{};this.margins!=null&&t.margins==null&&Object.assign(t,this.margins),t.type="image/jpeg",new _.ImageExportUI(e).export(t)})},exportPNG:function(){this.loadSurface(e=>{let t=this.imageOptions||{};this.margins!=null&&t.margins==null&&Object.assign(t,this.margins),new _.ImageExportUI(e).export(t)})}},render(){let e=this.showLabel!==!1,t=this.allowSvgExport!==!1,o=this.allowPngExport!==!1,n=this.allowJpgExport!==!1,s=[];return t&&s.push((0,M.h)("i",{},[(0,M.h)("a",{href:"#","data-type":_.TYPE_SVG,onClick:()=>this.exportSVG()},"SVG")])),o&&s.push((0,M.h)("i",{},[(0,M.h)("a",{href:"#","data-type":_.TYPE_PNG,onClick:()=>this.exportPNG()},"PNG")])),n&&s.push((0,M.h)("i",{},[(0,M.h)("a",{href:"#","data-type":_.TYPE_JPG,onClick:()=>this.exportJPG()},"JPG")])),e&&s.unshift((0,M.h)("span",{},[this.label])),(0,M.h)(_.ELEMENT_DIV,{class:`${_.CLASS_CONTROLS} ${_.CLASS_EXPORT_CONTROLS}`},s)}};var X=require("vue"),qe=require("@visuallyjs/browser-ui"),To={setup(e){return{service:(0,X.inject)(a)}},name:ve,props:{[U]:{type:String},[K]:{type:String,default:""},[xt]:{type:Boolean,default:!0},[Nt]:{type:Boolean,default:!0},[At]:{type:Boolean,default:!0},[Dt]:{type:Boolean,default:!0},[Rt]:{type:Function}},mounted:function(){let e=t=>{t.addPlugin({type:qe.MiniviewPlugin.type,options:{container:this.$el,activeTracking:this.activeTracking,clickToCenter:this.clickToCenter,showLasso:this.showLasso,trackSelection:this.trackSelection,typeFunction:this.typeFunction}})};this.service.surface.value!=null&&e(this.service.surface.value),this.service.paper.value!=null?e(this.service.paper.value):((0,X.watch)(this.service.surface,e),(0,X.watch)(this.service.paper,e))},render:function(e){return(0,X.h)(qe.ELEMENT_DIV,{ref:"root",class:e.className})}};var te=require("vue"),Qe=require("@visuallyjs/browser-ui"),So={setup(e){return{service:(0,te.inject)(a)}},name:Ie,props:{[G]:{type:Object},[k]:{type:String},[J]:{type:Object},[Q]:{type:Object}},mounted(){let e=this.$refs.root;this.diagram=(0,te.markRaw)((0,Qe.createDiagram)(e,this.options,this.modelOptions)),this.service.setDiagram(this.diagram),this.data?this.diagram.load({data:this.data}):this.url&&this.diagram.load({url:this.url})},render:function(){return(0,te.h)(Qe.ELEMENT_DIV,{ref:"root",class:"vjs-vue-surface",style:{width:"100%",height:"100%"}},this.$slots.hasOwnProperty("default")?this.$slots.default():[])}};var $=require("vue"),h=require("@visuallyjs/browser-ui"),Ho={[K]:{type:String},[G]:{type:Object},[k]:{type:String},[Lt]:{type:Boolean,default:!1}},$o={setup(){return{service:(0,$.inject)(a)}},render:function(){return(0,$.h)(h.ELEMENT_DIV,{class:`${this.className}`,ref:"root"})}};function F(e,t,o=!0){let n=he(z({},Ho),{[Q]:{type:Object}}),s={};return o&&(n[Ke]={type:Function},s[Ke]=function(c){this.chart.setDataSourceFilter(c)}),he(z({},$o),{name:e,props:n,watch:s,data:()=>({hasMounted:!1}),mounted(){let c=this.$refs.root,r=o?Object.assign({dataSourceFilter:this.dataSourceFilter},this.options):this.options;this.data&&(r.data=this.data),this.url&&(r.url=this.url);let l=()=>{this.hasMounted=!0,this.chart=new t(c,r)};this.useModel?this.service.model.value!=null?(r.dataSource=this.service.model.value,l()):(0,$.watch)(this.service.model,p=>{this.hasMounted||(r.dataSource=p,l())}):l()}})}var et=F(we,h.ColumnChart),tt=F(be,h.BarChart),ot=F(Ve,h.CategoryValueChart,!1),rt=F(Ue,h.PieChart),nt=F(Be,h.LineChart),it=F(Le,h.AreaChart),st=F(Ge,h.ScatterChart),at=F(ke,h.BubbleChart),lt=F(je,h.GaugeChart,!1),pt=he(z({},$o),{name:Fe,props:he(z({},Ho),{[Vt]:{type:String},[Bt]:{type:Object},[wt]:{type:Boolean},[bt]:{type:String},[Q]:{type:Object}}),data:()=>({hasMounted:!1}),mounted(){let e=this.$refs.root,t=Object.assign({},this.options);this.interactive!=null&&(t.interactive=this.interactive),this.pivot!=null&&(t.pivot=this.pivot),this.csvData&&(t.csvData=this.csvData),this.jsonData&&(t.jsonData=this.jsonData),this.url&&(t.url=this.url);let o=()=>{this.hasMounted=!1,this.chart=new h.SankeyChart(e,t)};if(this.useModel){let n=s=>{this.hasMounted||(t.dataSource=s,o())};this.service.model.value==null?(0,$.watch)(this.service.model,n):n(this.service.model.value)}else o()},watch:{pivot(e){this.chart&&this.chart.pivot(e)}},render:function(){return(0,$.h)(h.ELEMENT_DIV,{class:`${this.className}`,ref:"root"})}});var oe=require("vue"),re=require("@visuallyjs/browser-ui"),vo={setup(e){return{service:(0,oe.inject)(a)}},name:Ae,props:{[U]:{type:String},[Ut]:{type:String},[Gt]:{type:Function},[kt]:{type:Function},[jt]:{type:Function},[Ft]:{type:Boolean,default:!1},[Ht]:{type:Boolean,default:!0},[$t]:{type:Boolean,default:!0},[Wt]:{type:Boolean,default:!1},[zt]:{type:Boolean,default:!1},[Zt]:Object,[Kt]:Function,[qt]:Function,[K]:String,[Mt]:String,[Jt]:{type:Boolean,default:!1},[Xt]:{type:Boolean,default:!1},[Yt]:{type:Boolean,default:!1}},mounted:function(){let e=t=>{let o={source:this.$refs.root,selector:this.selector,dataGenerator:n=>this.dataGenerator?this.dataGenerator(n):(0,re.defaultDataGenerator)(n),allowDropOnEdge:this.allowDropOnEdge===!0,allowDropOnGroup:this.allowDropOnGroup!==!1,allowDropOnCanvas:this.allowDropOnCanvas!==!1,allowDropOnNode:this.allowDropOnNode===!0,ignoreDropOnNode:this.ignoreDropOnNode===!0,canvasDropFilter:this.canvasDropFilter,onVertexAdded:this.onVertexAdded,dragSize:this.dragSize,mode:this.mode};this.groupIdentifier!=null&&(o.groupIdentifier=this.groupIdentifier),this.typeGenerator!=null&&(o.typeGenerator=this.typeGenerator),this.palette=new re.Palette(t,o)};this.service.surface.value==null?(0,oe.watch)(this.service.surface,e):e(this.service.surface.value)},render:function(){return(0,oe.h)(re.ELEMENT_DIV,{ref:"root",class:this.className||""},this.$slots.hasOwnProperty("default")?this.$slots.default():[])}};var Wo=require("vue"),ct={setup(){(0,Wo.provide)(a,new x("SurfaceProvider"))},render(){return this.$slots.hasOwnProperty("default")?this.$slots.default():[]}};var zo=require("vue"),ut={setup(){(0,zo.provide)(a,new x("PaperProvider"))},render(){return this.$slots.hasOwnProperty("default")?this.$slots.default():[]}};var ne=require("vue"),w=require("@visuallyjs/browser-ui"),dt={name:Ee,props:{data:{type:Object},showLabels:{type:Boolean,default:!1},labelProperty:{type:String,default:"label"},labelStrokeWidth:{type:Number},multilineLabels:{type:Boolean,default:!0},labelFillRatio:{type:Number,default:w.DEFAULT_LABEL_FILL_RATIO},labelColor:{type:String,default:"#000000"},font:{type:Object}},setup(){return{service:(0,ne.inject)(a)}},mounted(){let e=t=>{let o=t.getShapeLibrary(),n=o.renderCompiledShape(Object.assign({sw:this.getOutlineWidth()},this.data));if(this.$refs.container.appendChild(n),this.showLabels){let s=o.renderShapeLabel(this.data,this.labelProperty,this.labelStrokeWidth,null,this.labelColor,this.labelColor,this.font);this.$refs.container.appendChild(s),this.multilineLabels!=!1&&(0,w.convertToMultilineText)(s,this.data[this.labelProperty]||"",this.getWidth()*(this.labelFillRatio||w.DEFAULT_LABEL_FILL_RATIO))}};this.service.ui.value==null?(0,ne.watch)(this.service.ui,e):e(this.service.ui.value)},updated(){let e=this.service.surface.value;if(e){let t=e.getShapeLibrary(),o=t.renderCompiledShape(Object.assign({sw:this.getOutlineWidth()},this.data));if(this.$refs.container.replaceChildren(o),this.showLabels){let n=t.renderShapeLabel(this.data,this.labelProperty,this.labelStrokeWidth,null,this.labelColor,this.labelColor,this.font);this.$refs.container.appendChild(n),this.multilineLabels!=!1&&(0,w.convertToMultilineText)(n,this.data[this.labelProperty]||"",this.getWidth()*(this.labelFillRatio||w.DEFAULT_LABEL_FILL_RATIO))}}},render:function(){return(0,ne.h)(w.ELEMENT_SVG,{ref:"container",preserveAspectRatio:"none",fill:this.getFill(),stroke:this.getOutline(),"stroke-width":this.getOutlineWidth(),viewBox:"0 0 "+this.getWidth()+" "+this.getHeight(),class:w.CLASS_SHAPE})},methods:{getWidth:function(){return this.data.width||Qt},getHeight:function(){return this.data.height||eo},getFill:function(){return this.data.fill||"#FFFFFF"},getOutline:function(){return this.data.outline||"#000000"},getOutlineWidth(){return this.data.outlineWidth||2}}};var ie=require("vue"),mt=require("@visuallyjs/browser-ui"),ht={name:Ce,props:{surfaceId:{type:String},dragSize:Object,iconSize:Object,fill:String,outline:String,showAllMessage:String,selectAfterDrop:Boolean,paletteStrokeWidth:Number,dataGenerator:Function,initialSet:String,mode:String,allowClickToAdd:Boolean,onVertexAdded:Function,showLabels:Boolean,inspector:{type:Boolean,default:!0},preparedShapes:Array},setup(e){return{service:(0,ie.inject)(a)}},data:()=>({hasMounted:!1}),mounted(){let e=t=>{this.hasMounted||(this.hasMounted=!0,new mt.ShapePalette(t,{container:this.$refs.container,shapeLibrary:t.getShapeLibrary(),dragSize:this.dragSize,iconSize:this.iconSize,fill:this.fill,outline:this.outline,showAllMessage:this.showAllMessage,selectAfterDrop:this.selectAfterDrop,paletteStrokeWidth:this.paletteStrokeWidth,dataGenerator:this.dataGenerator,initialSet:this.initialSet,mode:this.mode,allowClickToAdd:this.allowClickToAdd,onVertexAdded:this.onVertexAdded,showLabels:this.showLabels,inspector:this.inspector,preparedShapes:this.preparedShapes}))};this.service.surface.value==null?(0,ie.watch)(this.service.surface,e):e(this.service.surface.value)},render:function(){return(0,ie.h)(mt.ELEMENT_DIV,{ref:"container"})}};var b=require("vue"),se=require("@visuallyjs/browser-ui"),ae=Symbol.for("VueInspectorGetter"),Ko=Symbol.for("VueInspectorSetter");function Jo(){let e=[],t=null;function o(c){try{c(t)}catch(r){(0,se.log)("WARN: inspector listener threw an exception",r)}}let n={listen:c=>{t!=null?o(c):e.push(c)}},s={inspector:c=>{t=c,e.forEach(o)}};return(0,b.provide)(Ko,s),(0,b.provide)(ae,(0,b.readonly)(n)),s}var ft={name:He,props:{autoCommit:{type:Boolean,default:!0},multipleSelections:{type:Boolean,default:!0},filter:Function,renderEmptyContainer:Function,refresh:Function,className:String,showCloseButton:Boolean,afterUpdate:Function,modelValue:Object},emits:["update:modelValue"],setup(e,t){let o=Jo();return{service:(0,b.inject)(a),inspectorProvider:o,inspector:null,emit:t.emit}},mounted(){let e=t=>{if(this.inspector==null){let o=new se.Inspector({container:this.$refs.root,ui:t,renderEmptyContainer:()=>(this.emit("update:modelValue",null),this.renderEmptyContainer?this.renderEmptyContainer():""),refresh:(n,s)=>{this.emit("update:modelValue",n),this.refresh&&this.refresh(n),setTimeout(s)},autoCommit:this.autoCommit,multipleSelections:this.multipleSelections,filter:this.filter,showCloseButton:this.showCloseButton,afterUpdate:()=>this.afterUpdate?this.afterUpdate(t):null});this.inspectorProvider.inspector(o)}};this.service.surface.value==null?(0,b.watch)(this.service.surface,e):e(this.service.surface.value)},render(){return(0,b.h)(se.ELEMENT_DIV,{ref:"root"},this.$slots.hasOwnProperty("default")?this.$slots.default():[])}};var Pt=require("vue"),le=require("@visuallyjs/browser-ui"),Ot={name:_e,props:{propertyName:String},setup(){return{inspectorProvider:(0,Pt.inject)(ae)}},mounted(){this.inspectorProvider?this.inspectorProvider.listen(e=>{let t=new le.EdgeTypePicker(e.$ui,this.$refs.container,e.$ui.$getEdgePropertyMappings(),e.getValue(this.propertyName),(o,n)=>{e.setValue(this.propertyName,n,null)});t.render(this.propertyName,e.m),e.onChange(()=>{t.select(this.propertyName,e.getValue(this.propertyName))})}):(0,le.log)("WARN: EdgeTypePicker not instantiated inside an InspectorComponent. Cannot mount.")},render:function(){return(0,Pt.h)(le.ELEMENT_DIV,{ref:"container"})}};var Z=require("vue"),E=require("@visuallyjs/browser-ui"),Ro={render(){let e=this.swatches.map(t=>(0,Z.h)(E.ELEMENT_DIV,{title:t,class:E.CLASS_COLOR_PICKER_SWATCH,style:`background-color:${t}`,"data-color":t,onClick:()=>this.selectSwatch(t)}));return(0,Z.h)(E.ELEMENT_DIV,{class:`${E.CLASS_COLOR_PICKER}`},[(0,Z.h)("input",{type:"color","vjs-att":this.propertyName,ref:"colorInput"}),(0,Z.h)(E.ELEMENT_DIV,{class:E.CLASS_COLOR_PICKER_SWATCHES},e)])},props:{propertyName:String,maxColors:{type:Number,default:10}},data:()=>({CLASS_COLOR_PICKER:E.CLASS_COLOR_PICKER,CLASS_COLOR_PICKER_SWATCHES:E.CLASS_COLOR_PICKER_SWATCHES,CLASS_COLOR_PICKER_SWATCH:E.CLASS_COLOR_PICKER_SWATCH,colorInput:null,swatches:[]}),mounted(){let e=(0,Z.inject)(ae);e&&e.listen(t=>{this.inspector=t,this.swatches=t.ensureContext(E.INSPECTOR_CONTEXT_RECENT_COLORS,()=>[]),this.colorInput=this.$refs.colorInput,this.colorInput.addEventListener("change",this.colorPicked),t.bind(E.EVENT_CONTEXT_UPDATE,o=>{o.key===E.INSPECTOR_CONTEXT_RECENT_COLORS&&(this.swatches=o.value.slice())}),t.bind("change",this.setCurrentColor),this.setCurrentColor()})},methods:{addColor:function(e){let t=this.inspector.ensureContext(E.INSPECTOR_CONTEXT_RECENT_COLORS,()=>[]);if(e=e.toUpperCase(),!(t.find(n=>n.toUpperCase()===e)!=null)){let n=this.maxColors||10,s=t.slice();s.unshift(e),s.length>n&&(s.length=n),this.inspector.updateContext(E.INSPECTOR_CONTEXT_RECENT_COLORS,s)}},colorPicked:function(){let e=this.colorInput.value;this.inspector.setValue(this.propertyName,e,null),this.addColor(e)},selectSwatch:function(e){this.inspector.setValue(this.propertyName,e,null),this.colorInput.value=e},setCurrentColor:function(){let e=this.inspector.getValue(this.propertyName);e!=null&&(this.colorInput.value=e,this.addColor(e))}}};var S=require("vue"),pe=require("@visuallyjs/browser-ui"),Et={props:{placement:{type:String,default:"floating"},position:{type:Object},constraints:{type:Object}},data:()=>({hasMounted:!1,surface:null}),setup(e){return{service:(0,S.inject)(a)}},mounted(){let e=t=>{if(!this.hasMounted){this.surface=t,this.hasMounted=!0;let o=this.position||{x:0,y:0};(0,S.nextTick)().then(()=>{this.placement==="floating"?t.floatElement(this.$refs.root,o):t.fixElement(this.$refs.fixedEl,o,this.constraints)})}};this.service.surface.value==null?(0,S.watch)(this.service.surface,e):e(this.service.surface.value)},render(){return(0,S.h)(pe.ELEMENT_DIV,{ref:"root"},this.hasMounted?this.placement==="floating"?(0,S.h)(pe.ELEMENT_DIV,{},this.$slots.hasOwnProperty("default")?this.$slots.default():[]):(0,S.h)(S.Teleport,{to:this.surface.vertexLayer,key:(0,pe.uuid)()},(0,S.h)(pe.ELEMENT_DIV,{ref:"fixedEl"},this.$slots.hasOwnProperty("default")?this.$slots.default():[])):[])}};var Yo=require("vue"),Ct={setup(){(0,Yo.provide)(a,new x("DiagramProvider"))},render(){return this.$slots.hasOwnProperty("default")?this.$slots.default():[]}};var ce=require("vue"),ue=require("@visuallyjs/browser-ui"),_t={name:Me,props:{fill:String,outline:String,dragSize:Object,inspector:{type:Boolean,default:!0},iconSize:Object,showLabels:Boolean,paletteStrokeWidth:Number,showAllMessage:String,onCellAdded:Function,mode:String,allowClickToAdd:Boolean,autoExitDrawMode:Boolean,selectAfterAdd:{type:Boolean,default:!0},className:String,diagram:{type:Object},onVertexAdded:Function,preparedShapes:Array},setup(e){return{service:(0,ce.inject)(a)}},data:()=>({hasMounted:!1}),mounted(){if(this.service==null&&this.diagram==null)(0,ue.log)("Cannot mount DiagramPalette - no service found and Diagram not passed in as a prop");else{let e=t=>{this.hasMounted||(this.hasMounted=!0,new ue.DiagramPalette(this.$refs.container,t,{fill:this.fill,outline:this.outline,dragSize:this.dragSize,inspector:this.inspector,iconSize:this.iconSize,showLabels:this.showLabels,paletteStrokeWidth:this.paletteStrokeWidth,showAllMessage:this.showAllMessage,onCellAdded:this.onCellAdded,mode:this.mode,allowClickToAdd:this.allowClickToAdd,autoExitDrawMode:this.autoExitDrawMode,selectAfterAdd:this.selectAfterAdd,onVertexAdded:this.onVertexAdded,preparedShapes:this.preparedShapes}))};this.diagram?e(this.diagram):this.service.diagram.value!=null?e(this.service.diagram.value):(0,ce.watch)(this.service.diagram,e)}},render:function(){return(0,ce.h)(ue.ELEMENT_DIV,{ref:"container"})}};var A=require("@visuallyjs/browser-ui"),v=require("vue"),yt={name:"SurfacePopup",props:{selector:String,anchor:{type:String,default:"bottom"}},setup(e){let t=(0,v.inject)(a),o=(0,v.ref)(null),n=(0,v.ref)("block"),s=(0,v.ref)(null),c=(0,v.ref)(null),r=l=>{c.value=new A.PopupHandler(e.selector,s.value,l,p=>{o.value=p,p==null?n.value=A.NONE:(n.value=A.BLOCK,requestAnimationFrame(()=>c.value.$positionPopup()))},e.anchor)};return(0,v.onMounted)(()=>{t.surface.value==null?(0,v.watch)(t.surface,r):r(t.surface.value)}),{service:t,current:o,display:n,rootRef:s,handler:c}},render(){var e;return(0,v.h)(A.ELEMENT_DIV,{ref:"rootRef",display:this.display,position:A.ABSOLUTE,class:A.CLASS_SURFACE_POPUP},this.$slots.hasOwnProperty("default")?this.$slots.default({vertex:this.current,model:(e=this.service.surface.value)==null?void 0:e.model,ui:this.service.surface.value,hide:()=>{var t;return(t=this.handler)==null?void 0:t.$hide()}}):[])}};var g=require("vue"),V=require("@visuallyjs/browser-ui"),No={setup(){return{service:(0,g.inject)(a)}},name:ye,props:{options:{type:Object}},mounted:function(){let e=t=>{t.addPlugin({type:V.BackgroundPlugin.type,options:this.options})};this.service.surface.value!=null&&e(this.service.surface.value),this.service.paper.value!=null?e(this.service.paper.value):((0,g.watch)(this.service.surface,e),(0,g.watch)(this.service.paper,e))},render:function(e){return[]}},Ao={setup(){return{service:(0,g.inject)(a)}},name:ge,props:{grid:{type:Object},showBorder:{type:Boolean},minWidth:{type:Number},minHeight:{type:Number},showTickMarks:{type:Boolean},tickMarksPerCell:{type:Number},maxWidth:{type:Number},maxHeight:{type:Number},autoShrink:{type:Boolean},gridType:{type:String},dotRadius:{type:Number},tickDotRadius:{type:Number},visible:{type:Boolean}},mounted:function(){let e=t=>{t.addPlugin({type:V.BackgroundPlugin.type,options:{type:V.GeneratedGridBackground.type,grid:this.grid,showBorder:this.showBorder,minWidth:this.minWidth,minHeight:this.minHeight,showTickMarks:this.showTickMarks,tickMarksPerCell:this.tickMarksPerCell,maxWidth:this.maxWidth,maxHeight:this.maxHeight,autoShrink:this.autoShrink,gridType:this.gridType,dotRadius:this.dotRadius,tickDotRadius:this.tickDotRadius,visible:this.visible}})};this.service.surface.value!=null&&e(this.service.surface.value),this.service.paper.value!=null?e(this.service.paper.value):((0,g.watch)(this.service.surface,e),(0,g.watch)(this.service.paper,e))},render:function(e){return[]}},xo={setup(){return{service:(0,g.inject)(a)}},name:Te,props:{url:{type:String}},mounted:function(){let e=t=>{t.addPlugin({type:V.BackgroundPlugin.type,options:{type:V.SimpleBackground.type,url:this.url}})};this.service.surface.value!=null&&e(this.service.surface.value),this.service.paper.value!=null?e(this.service.paper.value):((0,g.watch)(this.service.surface,e),(0,g.watch)(this.service.paper,e))},render:function(e){return[]}},Do={setup(){return{service:(0,g.inject)(a)}},name:Se,props:{url:{type:String},urlGenerator:{type:Function},tileSize:{type:Object},width:{type:Number},height:{type:Number},maxZoom:{type:Number},tiling:{type:String},panDebounceTimeout:{type:Number},zoomDebounceTimeout:{type:Number}},mounted:function(){let e=t=>{t.addPlugin({type:V.BackgroundPlugin.type,options:{type:V.TiledBackground.type,url:this.url,urlGenerator:this.urlGenerator,tileSize:this.tileSize,width:this.width,height:this.height,tiling:this.tiling,panDebounceTimeout:this.panDebounceTimeout,zoomDebounceTimeout:this.zoomDebounceTimeout}})};this.service.surface.value!=null&&e(this.service.surface.value),this.service.paper.value!=null?e(this.service.paper.value):((0,g.watch)(this.service.surface,e),(0,g.watch)(this.service.paper,e))},render:function(e){return[]}};var gr={install:function(e,t){e.component(io,ct),e.component(so,ut),e.component(ao,Ct),e.component(Re,Eo),e.component(Ne,Co),e.component(Ie,So),e.component(ve,To),e.component(xe,yo),e.component(De,go),e.component(ye,No),e.component(ge,Ao),e.component(Te,xo),e.component(Se,Do),e.component(Ae,vo),e.component(Me,_t),e.component(be,tt),e.component(we,et),e.component(Ve,ot),e.component(Be,nt),e.component(Le,it),e.component(Ue,rt),e.component(Fe,pt),e.component(je,lt),e.component(ke,at),e.component(Ge,st),e.component(Ee,dt),e.component(Ce,ht),e.component(_e,Ot),e.component(to,Ro),e.component(He,ft),e.component(po,Et),e.component(lo,yt),e.provide(a,new x("root"))}};var de=require("vue"),gt=require("@visuallyjs/browser-ui"),Xo=require("vue");function Tr(){let e=(0,Xo.inject)(a),t=(0,de.shallowRef)(null),o=(0,de.shallowRef)(null),n=(0,de.shallowRef)(null),s=(0,de.ref)(1);return e==null||e.getSurface(c=>{o.value=c,o.value.bind(gt.EVENT_ZOOM,r=>{s.value=r.zoom})}),e==null||e.getDiagram(c=>{t.value=c,t.value.$ui.bind(gt.EVENT_ZOOM,r=>{s.value=r.zoom})}),e==null||e.getPaper(c=>{n.value=c,n.value.bind(gt.EVENT_ZOOM,r=>{s.value=r.zoom})}),s}var Tt=require("vue"),me=require("@visuallyjs/browser-ui");function Sr(e){let t=(0,Tt.inject)(a);if(t){let o=null,n=()=>{o&&e(o)},s=()=>{o&&(o.unbind(me.EVENT_DATA_UPDATED,n),o.unbind(me.EVENT_GRAPH_CLEARED,n))},c=r=>{s(),o=r,o&&(o.bind(me.EVENT_DATA_UPDATED,n),o.bind(me.EVENT_GRAPH_CLEARED,n),n())};t.getModel(r=>{c(r)}),(0,Tt.onUnmounted)(()=>{s()})}}var Zo=require("vue"),qo=require("vue");function vr(){let e=(0,qo.inject)(a),t=(0,Zo.shallowRef)(null);return e==null||e.getSurface(o=>{t.value=o}),t}var Qo=require("vue"),er=require("vue");function Rr(){let e=(0,er.inject)(a),t=(0,Qo.shallowRef)(null);return e==null||e.getDiagram(o=>{t.value=o}),t}var tr=require("vue"),or=require("vue");function Nr(){let e=(0,or.inject)(a),t=(0,tr.shallowRef)(null);return e==null||e.getPaper(o=>{t.value=o}),t}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
var xo=Object.defineProperty,Do=Object.defineProperties;var Io=Object.getOwnPropertyDescriptors;var ze=Object.getOwnPropertySymbols;var wo=Object.prototype.hasOwnProperty,Vo=Object.prototype.propertyIsEnumerable;var Je=(e,t,o)=>t in e?xo(e,t,{enumerable:!0,configurable:!0,writable:!0,value:o}):e[t]=o,v=(e,t)=>{for(var o in t||(t={}))wo.call(t,o)&&Je(e,o,t[o]);if(ze)for(var o of ze(t))Vo.call(t,o)&&Je(e,o,t[o]);return e},I=(e,t)=>Do(e,Io(t));import{log as Mo,BrowserUIModel as bo}from"@visuallyjs/browser-ui";var O=class extends bo{render(t,o){return Mo("render called directly on BrowserUiVue class: should not happen. Surface component should use internal render."),null}};function ks(e){return e=e||{},new O(e)}var Ke="surfaceId",Ye="paperId",Xe="typeFunction",Ze="clickToCenter",qe="showLasso",Qe="activeTracking",et="trackSelection",y="surfaceId",tt="paperId",N="className",T="data",ot="mode",w="options",B="renderOptions",x="modelOptions",j="model",G="viewOptions",g="url",rt="interactive",nt="pivot",Oe="dataSourceFilter",st="csvData",it="jsonData",at="useModel",fi="id",lt="selector",pt="dataGenerator",ct="typeGenerator",ut="groupIdentifier",dt="allowDropOnEdge",mt="allowDropOnCanvas",ht="allowDropOnGroup",ft="allowDropOnNode",Pt="ignoreDropOnNode",Ot="onVertexAdded",Et="selectAfterAdd",Ct="clickToAddOnly",_t="allowClickToAdd",St="dragSize",yt="canvasDropFilter",F="Shape",k="ShapePalette",Tt=120,gt=90,$="EdgeTypePickerComponent",Rt="ColorPickerComponent",vt="vjs-vue-node",At="vjs-vue-group",Nt="vjs-vue-overlay",H="MiniviewComponent",W="SurfaceComponent",xt="SurfaceProvider",z="PaperComponent",Dt="PaperProvider",It="DiagramProvider",J="PaletteComponent",K="ControlsComponent",Y="ExportControlsComponent",X="DiagramComponent",Z="DiagramPaletteComponent",q="ColumnChartComponent",Q="BarChartComponent",ee="XYChartComponent",te="LineChartComponent",oe="AreaChartComponent",re="PieChartComponent",ne="ScatterChartComponent",se="BubbleChartComponent",ie="GaugeChartComponent",ae="SankeyChartComponent",le="InspectorComponent",wt="SurfacePopup",Vt="Decorator";import{markRaw as C}from"vue";import{addClass as Mt,BrowserUI as bt,CLASS_DEFAULT_GROUP as Lo,CLASS_DEFAULT_NODE as Uo,ELEMENT_DIV as Lt,extend as Ut,isGroup as Bt,OptimisticEventGenerator as Bo,renderSurface as jo,updateClasses as Go,Vertex as jt,Overlay as Fo,Edge as Gt,OVERLAY_TYPE_CUSTOM as ko,uuid as $o,renderPaper as Ho}from"@visuallyjs/browser-ui";var Ee=class{constructor(){this.unrenderedVertices=new Map;this.eventManager=new Bo}vertexWillRender(t){this.unrenderedVertices.set(t.id,t)}vertexHasRendered(t){this.unrenderedVertices.delete(t.id),this.unrenderedVertices.size===0&&this.eventManager.fire(Wo)}vertexHasUpdated(t){this.eventManager.fire(zo,t)}},Wo="vertices:rendered",zo="vertex:updated",Ce=new Map;function pe(e){return Ce.has(e)||Ce.set(e,new Ee),Ce.get(e)}function Jo(e,t){pe(e).vertexHasRendered(t)}function Ko(e,t){pe(e).vertexHasUpdated(t)}function Yo(e,t){pe(e).vertexWillRender(t)}function Mi(e,t,o){pe(e).eventManager.bind(t,o)}var Ft={props:{data:Object,model:O,obj:jt,vertex:jt,ui:bt,el:Element,def:Object,eventInfo:Object},mounted(){let e=this,t=Bt(e.obj)?At:vt;e.el.firstElementChild&&Mt(e.el.firstElementChild,t),e.ui.$vertexRendered(e.obj,e.el,e.def,e.eventInfo),Jo(e.ui.id,e.obj)},methods:{getModel:function(){return this.model},removeVertex:function(){this.model.remove(this.obj)}},updated(){this.ui.$revalidateElement(this.el),Ko(this.ui.id,this.obj)}},Xo={mixins:[Ft],methods:{getNode:function(){return this.obj},removeNode:function(){this.model.removeNode(this.getNode())},updateNode:function(e){this.model.updateNode(this.obj,e);let t=this.ui.getRenderedElement(this.obj.getFullId());this.ui.$revalidateElement(t)}}},Zo={methods:{getGroup:function(){return this.obj},removeGroup:function(e){this.model.removeGroup(this.obj,e)},updateGroup:function(e){this.model.updateGroup(this.obj,e);let t=this.ui.getRenderedElement(this.obj.getFullId());this.ui.$revalidateElement(t)}},mixins:[Ft]},D=(e,t)=>{t.parentNode&&t.parentNode.removeChild(t)},kt={props:{data:Object,model:O,obj:Gt,edge:Gt,overlay:Fo,ui:bt,el:Element,def:Object,eventInfo:Object},mounted(){let e=this;e.el.firstElementChild&&Mt(e.el.firstElementChild,Nt)},updated(){this.ui.$revalidateElement(this.el)}},ce=(e,t,o,n,s,p,r,l,i)=>{let d=r.component!=null,c=Bt(l),m=[];d||m.push(c?Lo:Uo);let h=d?r.component:{render(f){return f.data.label||""}};if(h){let f=document.createElement(Lt);Go(f,m),h.mixins==null&&(h.mixins=[]);let P=c?Zo:Xo;h.mixins.find(U=>U===P)||h.mixins.push(P),Yo(p.id,l);let A={data:o,model:C(n),ui:C(p),obj:l,vertex:l,el:f,def:C(r),eventInfo:i==null?null:C(i)};if(r.inject)for(let U in r.inject){let Pe=r.inject[U],No=typeof Pe=="function"?Pe(l,n):Pe;A[U]=No}e.push({component:C(h),el:f,e:l.getFullId(),props:A})}};function $t(e,t,o,n,s,p){let r={reactive:!0,asynchronous:!0,usesWrapperElement:!1,update:(i,d,c,m)=>{},render:(i,d,c,m,h,f,P,S)=>ce(n,i,d,c,m,h,f,P,S),cleanupVertex:D,cleanupPort:D,rerender:(i,d,c,m,h,f,P,S,A)=>{D(P.id,A),ce(n,i,d,c,m,h,f,P,S)}},l=Ut(s||{},{view:p||{},id:t});return jo(e,o,r,l)}function Ht(e,t,o,n,s,p){let r={reactive:!0,asynchronous:!0,usesWrapperElement:!1,update:(i,d,c,m)=>{},render:(i,d,c,m,h,f,P,S)=>ce(n,i,d,c,m,h,f,P,S),cleanupVertex:D,cleanupPort:D,rerender:(i,d,c,m,h,f,P,S,A)=>{D(P.id,A),ce(n,i,d,c,m,h,f,P,S)}},l=Ut(s||{},{view:p||{},id:t});return Ho(e,o,r,l)}function ue(e,t,o,n){if(e.edges)for(let s in e.edges){let p=e.edges[s];p.overlays&&(p.overlays=p.overlays.map(r=>{let l,i={};return r.component!=null?{type:ko,options:{create:c=>{let m=document.createElement(Lt),h=$o();r.component.mixins==null&&(r.component.mixins=[]),r.component.mixins.indexOf(kt)===-1&&r.component.mixins.push(kt);let f=v({data:c.edge.data,model:C(o()),ui:C(t()),obj:c.edge,edge:c.edge,el:m,def:C(r),eventInfo:null},i);return n.push({component:C(r.component),el:m,e:h,props:f}),m}}}:r}))}}import{log as Wt,Paper as qo,Surface as Qo}from"@visuallyjs/browser-ui";import{shallowRef as V}from"vue";var a=Symbol.for("visuallyjs-service"),E=class{constructor(t){this.context=t;this.s=[];this.i=[];this.a=[];this.l=[];this.surface=V(null);this.model=V(null);this.paper=V(null);this.diagram=V(null);this.ui=V(null)}getSurface(t){this.t(this.i,t,this.p)}getDiagram(t){this.t(this.a,t,this.c)}getPaper(t){this.t(this.l,t,this.u)}getModel(t){this.t(this.s,t,this.r)}getModelDirect(){return this.r}t(t,o,n){if(n!=null)try{o(n)}catch(s){Wt(`WARN: could not dispatch ${s}`)}else t.push(o)}setSurface(t){this.surface.value=t,this.model.value=t.model,this.ui.value=t,this.p=t,this.n(t.model),this.o(this.i,t)}setDiagram(t){this.diagram.value=t,this.model.value=t.model,this.ui.value=t.$ui,this.c=t,this.n(t.model),t.$ui instanceof Qo?this.setSurface(t.$ui):t.$ui instanceof qo&&this.setPaper(t.$ui),this.o(this.a,t)}setPaper(t){this.paper.value=t,this.model.value=t.model,this.ui.value=t,this.u=t,this.n(t.model),this.o(this.l,t)}n(t){this.r=t,this.o(this.s,t)}o(t,o){t.forEach(n=>{try{n(o)}catch(s){Wt(`WARN: could not flush all queue entries ${s}`)}})}};import{h as M,inject as er,Teleport as zt}from"vue";import{ELEMENT_DIV as tr,EVENT_GROUP_REMOVED as or,EVENT_GROUP_UPDATED as rr,EVENT_NODE_REMOVED as nr,EVENT_NODE_UPDATED as sr,EVENT_RENDER_END as ir,clone as Jt,EVENT_EDGE_UPDATED as ar,EVENT_EDGE_REMOVED as lr}from"@visuallyjs/browser-ui";var Kt={setup(e){return{service:er(a),surfaceId:e.surfaceId||Ke}},name:W,props:{[T]:{type:Object},[B]:{type:Object},[x]:{type:Object},[G]:{type:Object},[j]:{type:Object},[g]:{type:String},[y]:{type:String}},data:function(){return{vertices:[],overlays:[]}},mounted(){let e=this,t=this.model||new O(this.modelOptions||{}),o=this.$refs.root;e.url?t.load({url:e.url}):e.data&&t.load({data:e.data});let n=Jt(this.viewOptions||{});ue(n,()=>this.surface,()=>t,this.overlays),this.surface=$t(t,this.surfaceId,o,this.vertices,Jt(this.renderOptions||{}),n),this.service.setSurface(this.surface);let s=(r,l)=>{let i=()=>{let c={};return l.originalData||l.updates?c=Object.assign(l.originalData,l.updates):l.newData&&Object.assign(c,l.newData),c},d=this.vertices.find(c=>c.e===r);d!=null&&(d.props.data=i())},p=r=>{let l=this.vertices.findIndex(i=>i.e===r);l!==-1&&this.vertices.splice(l,1)};t.bind(sr,r=>{s(r.vertex.getFullId(),r)}),t.bind(rr,r=>{s(r.vertex.getFullId(),r)}),t.bind(nr,r=>{p(r.node.id)}),t.bind(or,r=>{p(r.group.id)}),t.bind(ar,r=>{let l=r.edge.id;this.overlays.forEach(i=>{i.props.edge&&i.props.edge.id===l&&(i.props.data=r.edge.data)})}),t.bind(lr,r=>{let l=r.edge.id,i=this.overlays.length-1;for(;i>=0;)this.overlays[i].props.edge&&this.overlays[i].props.edge.id===l&&this.overlays.splice(i,1),i--}),this.surface.bind(ir,()=>setTimeout(()=>this.surface.$redrawEveryConnection()))},render:function(){let e=this.vertices.map(t=>M(zt,{to:t.el,key:t.e},[M(t.component,t.props)]));return this.overlays.forEach(t=>{e.push(M(zt,{to:t.el,key:t.e},[M(t.component,t.props)]))}),M(tr,{ref:"root",class:"vjs-vue-surface",style:{width:"100%",height:"100%"}},e.concat(this.$slots.hasOwnProperty("default")?this.$slots.default():[]))}};import{h as b,inject as pr,Teleport as Yt}from"vue";import{ELEMENT_DIV as cr,EVENT_GROUP_REMOVED as ur,EVENT_GROUP_UPDATED as dr,EVENT_NODE_REMOVED as mr,EVENT_NODE_UPDATED as hr,EVENT_RENDER_END as fr,clone as Xt,EVENT_EDGE_UPDATED as Pr,EVENT_EDGE_REMOVED as Or}from"@visuallyjs/browser-ui";var Zt={setup(e){return{service:pr(a),paperId:e.paperId||Ye}},name:z,props:{[T]:{type:Object},[B]:{type:Object},[x]:{type:Object},[G]:{type:Object},[j]:{type:Object},[g]:{type:String},[tt]:{type:String}},data:function(){return{vertices:[],overlays:[]}},mounted(){let e=this,t=this.model||new O(this.modelOptions||{}),o=this.$refs.root;e.url?t.load({url:e.url}):e.data&&t.load({data:e.data});let n=Xt(this.viewOptions||{});ue(n,()=>this.paper,()=>t,this.overlays),this.paper=Ht(t,this.paperId,o,this.vertices,Xt(this.renderOptions||{}),n),this.service.setPaper(this.paper);let s=(r,l)=>{let i=()=>{let c={};return l.originalData||l.updates?c=Object.assign(l.originalData,l.updates):l.newData&&Object.assign(c,l.newData),c},d=this.vertices.find(c=>c.e===r);d!=null&&(d.props.data=i())},p=r=>{let l=this.vertices.findIndex(i=>i.e===r);l!==-1&&this.vertices.splice(l,1)};t.bind(hr,r=>{s(r.vertex.getFullId(),r)}),t.bind(dr,r=>{s(r.vertex.getFullId(),r)}),t.bind(mr,r=>{p(r.node.id)}),t.bind(ur,r=>{p(r.group.id)}),t.bind(Pr,r=>{let l=r.edge.id;this.overlays.forEach(i=>{i.props.edge&&i.props.edge.id===l&&(i.props.data=r.edge.data)})}),t.bind(Or,r=>{let l=r.edge.id,i=this.overlays.length-1;for(;i>=0;)this.overlays[i].props.edge&&this.overlays[i].props.edge.id===l&&this.overlays.splice(i,1),i--}),this.paper.bind(fr,()=>setTimeout(()=>this.paper.$redrawEveryConnection()))},render:function(){let e=this.vertices.map(t=>b(Yt,{to:t.el,key:t.e},[b(t.component,t.props)]));return this.overlays.forEach(t=>{e.push(b(Yt,{to:t.el,key:t.e},[b(t.component,t.props)]))}),b(cr,{ref:"root",class:"vjs-vue-paper",style:{width:"100%",height:"100%"}},e.concat(this.$slots.hasOwnProperty("default")?this.$slots.default():[]))}};import{h as u,inject as Er,watch as Cr}from"vue";import{LassoPlugin as _r,SURFACE_MODE_SELECT as qt,SURFACE_MODE_PAN as Qt,PAN_PATH as Sr,PAN_VIEW_BOX as yr,LASSO_PATH as Tr,LASSO_VIEW_BOX as gr,ZOOM_TO_FIT_PATH as Rr,ZOOM_TO_FIT_VIEW_BOX as vr,EVENT_UNDOREDO_UPDATE as Ar,TRUE as eo,FALSE as to,EVENT_SURFACE_MODE_CHANGED as Nr,ELEMENT_DIV as oo,ATTRIBUTE_CONTROLS_ORIENTATION as xr,ZOOM_IN_OUT_VIEW_BOX as ro,ZOOM_IN_PATH as Dr,ZOOM_OUT_PATH as Ir,RESET_SELECTION_PATH as wr,RESET_SELECTION_VIEW_BOX as Vr,CLEAR_PATH as Mr,CLEAR_VIEW_BOX as br,ATTRIBUTE_RESET_SELECTION as Lr,CLASS_CONTROLS_RESET_SELECTION as Ur,EVENT_SELECT as Br,EVENT_DESELECT as jr,EVENT_SELECTION_CLEARED as Gr,supportsPathEditing as Fr}from"@visuallyjs/browser-ui";var kr="Clear dataset?",_e="vjs-selected-mode",no="can-undo",so="can-redo",$r="data-undo",Hr="data-redo",io="data-mode",Wr="data-reset",zr="data-clear",Jr="data-zoom-in",Kr="data-zoom-out",ao="vjs-controls-has-selection",lo={setup(e){return{service:Er(a)}},name:K,props:{clear:{type:Boolean,default:!0},[y]:{type:String},undoRedo:{type:Boolean,default:!0},orientation:{type:String,default:"row"},zoomToExtents:{type:Boolean,default:!0},zoomButtons:{type:Boolean,default:!1},clearMessage:{type:String,default:kr},onMaybeClear:{type:Function},className:{type:String,default:""}},methods:{panMode:function(){var e;(e=this.service.surface.value)==null||e.setMode(Qt)},selectMode:function(){var e;(e=this.service.surface.value)==null||e.setMode(qt)},zoomToFit:function(){var e;(e=this.service.surface.value)==null||e.zoomToFit()},doClear:function(){let e=this.service.surface.value;e&&(this.onMaybeClear!=null?this.onMaybeClear(()=>e.model.clear()):window.confirm(this.clearMessage)&&e.model.clear())},undo:function(){var e;(e=this.service.model.value)==null||e.undo()},redo:function(){var e;(e=this.service.model.value)==null||e.redo()},zoomIn:function(){var e;(e=this.service.surface.value)==null||e.zoomIn()},zoomOut:function(){var e;(e=this.service.surface.value)==null||e.zoomOut()},resetSelection(){let e=this.service.surface.value;e&&(e.model.clearSelection(),Fr(e)&&e.stopEditingPath())},updateSelectionState:function(){let e=this.service.surface.value;e&&(e.model.getSelection().isEmpty()?this.$refs.root.removeAttribute(ao):this.$refs.root.setAttribute(ao,"true"))}},data:function(){return{ready:!1,hasLasso:!1}},render(){if(this.ready){let e=[];return this.showPan&&(e.push(u("i",{class:`vjs-pan-mode ${_e}`,[io]:Qt,onClick:()=>this.panMode(),title:"Pan mode"},[u("svg",{viewBox:yr,stroke:"currentColor",fill:"none"},[u("path",{d:Sr})])])),e.push(u("i",{class:"vjs-select-mode",[io]:qt,onClick:()=>this.selectMode(),title:"Select mode"},[u("svg",{viewBox:gr,stroke:"currentColor",fill:"currentColor"},[u("path",{d:Tr})])]))),this.undoRedo&&(e.push(u("i",{class:"vjs-undo",[$r]:!0,title:"Undo last action",onClick:()=>this.undo()})),e.push(u("i",{class:"vjs-redo",[Hr]:!0,title:"Redo last action",onClick:()=>this.redo()}))),this.zoomToExtents&&e.push(u("i",{class:"vjs-zoom-to-fit",[Wr]:"true",onClick:()=>this.zoomToFit(),title:"Zoom to Fit"},[u("svg",{viewBox:vr,stroke:"currentColor",fill:"currentColor"},[u("path",{d:Rr})])])),this.zoomButtons&&(e.push(u("i",{class:"vjs-zoom-in",[Jr]:"true",onClick:()=>this.zoomIn(),title:"Zoom In"},[u("svg",{viewBox:ro,stroke:"currentColor",fill:"currentColor"},[u("path",{d:Dr})])])),e.push(u("i",{class:"vjs-zoom-out",[Kr]:"true",onClick:()=>this.zoomOut(),title:"Zoom Out"},[u("svg",{viewBox:ro,stroke:"currentColor",fill:"currentColor"},[u("path",{d:Ir})])]))),e.push(u("i",{class:Ur,[Lr]:"true",onClick:()=>{this.resetSelection()}},[u("svg",{viewBox:Vr,stroke:"currentColor",fill:"currentColor"},[u("path",{d:wr})])])),this.clear&&e.push(u("i",{class:"vjs-clear-dataset",[zr]:"true",onClick:()=>{this.doClear()}},[u("svg",{viewBox:br,stroke:"currentColor",fill:"currentColor"},[u("path",{d:Mr})])])),u(oo,{class:`vjs-controls ${this.className}`,ref:"root",[no]:!1,[so]:!1,[xr]:this.orientation},e)}else return u(oo,{ref:"root"})},mounted(){let e=t=>{let o=t.getPlugin(_r.type);this.showPan=o!=null,t.bind(Nr,n=>{t.removeClass(t.$getSelector(this.$refs.root,"[data-mode]"),_e),t.addClass(t.$getSelector(this.$refs.root,"[data-mode='"+n+"']"),_e)}),t.model.bind(Ar,n=>{this.$refs.root.setAttribute(no,n.undoCount>0?eo:to),this.$refs.root.setAttribute(so,n.redoCount>0?eo:to)}),t.model.bind(Br,()=>this.updateSelectionState()),t.model.bind(jr,()=>this.updateSelectionState()),t.model.bind(Gr,()=>this.updateSelectionState()),this.ready=!0};this.service.surface.value==null?Cr(this.service.surface,e):e(this.service.surface.value)}};import{h as R,inject as Yr}from"vue";import{CLASS_CONTROLS as Xr,CLASS_EXPORT_CONTROLS as Zr,ELEMENT_DIV as qr,ImageExportUI as po,SvgExportUI as Qr,TYPE_JPG as en,TYPE_PNG as tn,TYPE_SVG as on}from"@visuallyjs/browser-ui";var co={name:Y,setup(e){return{service:Yr(a)}},props:{surfaceId:{type:String},showLabel:{type:Boolean,default:!0},label:{type:String,default:"Export :"},margins:{type:Object},svgOptions:{type:Object},imageOptions:{type:Object},allowSvgExport:{type:Boolean,default:!0},allowPngExport:{type:Boolean,default:!0},allowJpgExport:{type:Boolean,default:!0}},methods:{loadSurface:function(e){let t=this.service.surface.value;t&&e(t)},exportSVG:function(){this.loadSurface(e=>{let t=this.svgOptions||{};this.margins!=null&&t.margins==null&&Object.assign(t,this.margins),new Qr(e).export(t)})},exportJPG:function(){this.loadSurface(e=>{let t=this.imageOptions||{};this.margins!=null&&t.margins==null&&Object.assign(t,this.margins),t.type="image/jpeg",new po(e).export(t)})},exportPNG:function(){this.loadSurface(e=>{let t=this.imageOptions||{};this.margins!=null&&t.margins==null&&Object.assign(t,this.margins),new po(e).export(t)})}},render(){let e=this.showLabel!==!1,t=this.allowSvgExport!==!1,o=this.allowPngExport!==!1,n=this.allowJpgExport!==!1,s=[];return t&&s.push(R("i",{},[R("a",{href:"#","data-type":on,onClick:()=>this.exportSVG()},"SVG")])),o&&s.push(R("i",{},[R("a",{href:"#","data-type":tn,onClick:()=>this.exportPNG()},"PNG")])),n&&s.push(R("i",{},[R("a",{href:"#","data-type":en,onClick:()=>this.exportJPG()},"JPG")])),e&&s.unshift(R("span",{},[this.label])),R(qr,{class:`${Xr} ${Zr}`},s)}};import{h as rn,inject as nn,watch as sn}from"vue";import{ELEMENT_DIV as an,MiniviewPlugin as ln}from"@visuallyjs/browser-ui";var uo={setup(e){return{service:nn(a)}},name:H,props:{[y]:{type:String},[N]:{type:String,default:""},[Qe]:{type:Boolean,default:!0},[Ze]:{type:Boolean,default:!0},[qe]:{type:Boolean,default:!0},[et]:{type:Boolean,default:!0},[Xe]:{type:Function}},mounted:function(){let e=t=>{t.addPlugin({type:ln.type,options:{container:this.$el,activeTracking:this.activeTracking,clickToCenter:this.clickToCenter,showLasso:this.showLasso,trackSelection:this.trackSelection,typeFunction:this.typeFunction}})};this.service.surface.value!=null?e(this.service.surface.value):sn(this.service.surface,e)},render:function(e){return rn(an,{ref:"root",class:e.className})}};import{h as pn,inject as cn,markRaw as un}from"vue";import{createDiagram as dn,ELEMENT_DIV as mn}from"@visuallyjs/browser-ui";var mo={setup(e){return{service:cn(a)}},name:X,props:{[T]:{type:Object},[g]:{type:String},[x]:{type:Object},[w]:{type:Object}},mounted(){let e=this.$refs.root;this.diagram=un(dn(e,this.options,this.modelOptions)),this.service.setDiagram(this.diagram),this.data?this.diagram.load({data:this.data}):this.url&&this.diagram.load({url:this.url})},render:function(){return pn(mn,{ref:"root",class:"vjs-vue-surface",style:{width:"100%",height:"100%"}},this.$slots.hasOwnProperty("default")?this.$slots.default():[])}};import{h as ho,inject as hn,watch as fo}from"vue";import{ColumnChart as fn,BarChart as Pn,CategoryValueChart as On,ELEMENT_DIV as Po,LineChart as En,AreaChart as Cn,PieChart as _n,ScatterChart as Sn,BubbleChart as yn,GaugeChart as Tn,SankeyChart as gn}from"@visuallyjs/browser-ui";var Oo={[N]:{type:String},[T]:{type:Object},[g]:{type:String},[at]:{type:Boolean,default:!1}},Eo={setup(){return{service:hn(a)}},render:function(){return ho(Po,{class:`${this.className}`,ref:"root"})}};function _(e,t,o=!0){let n=I(v({},Oo),{[w]:{type:Object}}),s={};return o&&(n[Oe]={type:Function},s[Oe]=function(p){this.chart.setDataSourceFilter(p)}),I(v({},Eo),{name:e,props:n,watch:s,data:()=>({hasMounted:!1}),mounted(){let p=this.$refs.root,r=o?Object.assign({dataSourceFilter:this.dataSourceFilter},this.options):this.options;this.data&&(r.data=this.data),this.url&&(r.url=this.url);let l=()=>{this.hasMounted=!0,this.chart=new t(p,r)};this.useModel?this.service.model.value!=null?(r.dataSource=this.service.model.value,l()):fo(this.service.model,i=>{this.hasMounted||(r.dataSource=i,l())}):l()}})}var Se=_(q,fn),ye=_(Q,Pn),Te=_(ee,On,!1),ge=_(re,_n),Re=_(te,En),ve=_(oe,Cn),Ae=_(ne,Sn),Ne=_(se,yn),xe=_(ie,Tn,!1),De=I(v({},Eo),{name:ae,props:I(v({},Oo),{[st]:{type:String},[it]:{type:Object},[rt]:{type:Boolean},[nt]:{type:String},[w]:{type:Object}}),data:()=>({hasMounted:!1}),mounted(){let e=this.$refs.root,t=Object.assign({},this.options);this.interactive!=null&&(t.interactive=this.interactive),this.pivot!=null&&(t.pivot=this.pivot),this.csvData&&(t.csvData=this.csvData),this.jsonData&&(t.jsonData=this.jsonData),this.url&&(t.url=this.url);let o=()=>{this.hasMounted=!1,this.chart=new gn(e,t)};if(this.useModel){let n=s=>{this.hasMounted||(t.dataSource=s,o())};this.service.model.value==null?fo(this.service.model,n):n(this.service.model.value)}else o()},watch:{pivot(e){this.chart&&this.chart.pivot(e)}},render:function(){return ho(Po,{class:`${this.className}`,ref:"root"})}});import{h as Rn,inject as vn,watch as An}from"vue";import{defaultDataGenerator as Nn,ELEMENT_DIV as xn,Palette as Dn}from"@visuallyjs/browser-ui";var Co={setup(e){return{service:vn(a)}},name:J,props:{[y]:{type:String},[lt]:{type:String},[pt]:{type:Function},[ct]:{type:Function},[ut]:{type:Function},[dt]:{type:Boolean,default:!1},[mt]:{type:Boolean,default:!0},[ht]:{type:Boolean,default:!0},[ft]:{type:Boolean,default:!1},[Pt]:{type:Boolean,default:!1},[St]:Object,[Ot]:Function,[yt]:Function,[N]:String,[ot]:String,[Et]:{type:Boolean,default:!1},[_t]:{type:Boolean,default:!1},[Ct]:{type:Boolean,default:!1}},mounted:function(){let e=t=>{let o={source:this.$refs.root,selector:this.selector,dataGenerator:n=>this.dataGenerator?this.dataGenerator(n):Nn(n),allowDropOnEdge:this.allowDropOnEdge===!0,allowDropOnGroup:this.allowDropOnGroup!==!1,allowDropOnCanvas:this.allowDropOnCanvas!==!1,allowDropOnNode:this.allowDropOnNode===!0,ignoreDropOnNode:this.ignoreDropOnNode===!0,canvasDropFilter:this.canvasDropFilter,onVertexAdded:this.onVertexAdded,dragSize:this.dragSize,mode:this.mode};this.groupIdentifier!=null&&(o.groupIdentifier=this.groupIdentifier),this.typeGenerator!=null&&(o.typeGenerator=this.typeGenerator),this.palette=new Dn(t,o)};this.service.surface.value==null?An(this.service.surface,e):e(this.service.surface.value)},render:function(){return Rn(xn,{ref:"root",class:this.className||""},this.$slots.hasOwnProperty("default")?this.$slots.default():[])}};import{provide as In}from"vue";var Ie={setup(){In(a,new E("SurfaceProvider"))},render(){return this.$slots.hasOwnProperty("default")?this.$slots.default():[]}};import{provide as wn}from"vue";var we={setup(){wn(a,new E("PaperProvider"))},render(){return this.$slots.hasOwnProperty("default")?this.$slots.default():[]}};import{h as Vn,inject as Mn,watch as bn}from"vue";import{CLASS_SHAPE as Ln,convertToMultilineText as _o,DEFAULT_LABEL_FILL_RATIO as Ve,ELEMENT_SVG as Un}from"@visuallyjs/browser-ui";var Me={name:F,props:{data:{type:Object},showLabels:{type:Boolean,default:!1},labelProperty:{type:String,default:"label"},labelStrokeWidth:{type:Number},multilineLabels:{type:Boolean,default:!0},labelFillRatio:{type:Number,default:Ve},labelColor:{type:String,default:"#000000"},font:{type:Object}},setup(){return{service:Mn(a)}},mounted(){let e=t=>{let o=t.getShapeLibrary(),n=o.renderCompiledShape(Object.assign({sw:this.getOutlineWidth()},this.data));if(this.$refs.container.appendChild(n),this.showLabels){let s=o.renderShapeLabel(this.data,this.labelProperty,this.labelStrokeWidth,null,this.labelColor,this.labelColor,this.font);this.$refs.container.appendChild(s),this.multilineLabels!=!1&&_o(s,this.data[this.labelProperty]||"",this.getWidth()*(this.labelFillRatio||Ve))}};this.service.ui.value==null?bn(this.service.ui,e):e(this.service.ui.value)},updated(){let e=this.service.surface.value;if(e){let t=e.getShapeLibrary(),o=t.renderCompiledShape(Object.assign({sw:this.getOutlineWidth()},this.data));if(this.$refs.container.replaceChildren(o),this.showLabels){let n=t.renderShapeLabel(this.data,this.labelProperty,this.labelStrokeWidth,null,this.labelColor,this.labelColor,this.font);this.$refs.container.appendChild(n),this.multilineLabels!=!1&&_o(n,this.data[this.labelProperty]||"",this.getWidth()*(this.labelFillRatio||Ve))}}},render:function(){return Vn(Un,{ref:"container",preserveAspectRatio:"none",fill:this.getFill(),stroke:this.getOutline(),"stroke-width":this.getOutlineWidth(),viewBox:"0 0 "+this.getWidth()+" "+this.getHeight(),class:Ln})},methods:{getWidth:function(){return this.data.width||Tt},getHeight:function(){return this.data.height||gt},getFill:function(){return this.data.fill||"#FFFFFF"},getOutline:function(){return this.data.outline||"#000000"},getOutlineWidth(){return this.data.outlineWidth||2}}};import{h as Bn,inject as jn,watch as Gn}from"vue";import{ELEMENT_DIV as Fn,ShapePalette as kn}from"@visuallyjs/browser-ui";var be={name:k,props:{surfaceId:{type:String},dragSize:Object,iconSize:Object,fill:String,outline:String,showAllMessage:String,selectAfterDrop:Boolean,paletteStrokeWidth:Number,dataGenerator:Function,initialSet:String,mode:String,allowClickToAdd:Boolean,onVertexAdded:Function,showLabels:Boolean,inspector:{type:Boolean,default:!0},preparedShapes:Array},setup(e){return{service:jn(a)}},data:()=>({hasMounted:!1}),mounted(){let e=t=>{this.hasMounted||(this.hasMounted=!0,new kn(t,{container:this.$refs.container,shapeLibrary:t.getShapeLibrary(),dragSize:this.dragSize,iconSize:this.iconSize,fill:this.fill,outline:this.outline,showAllMessage:this.showAllMessage,selectAfterDrop:this.selectAfterDrop,paletteStrokeWidth:this.paletteStrokeWidth,dataGenerator:this.dataGenerator,initialSet:this.initialSet,mode:this.mode,allowClickToAdd:this.allowClickToAdd,onVertexAdded:this.onVertexAdded,showLabels:this.showLabels,inspector:this.inspector,preparedShapes:this.preparedShapes}))};this.service.surface.value==null?Gn(this.service.surface,e):e(this.service.surface.value)},render:function(){return Bn(Fn,{ref:"container"})}};import{provide as So,readonly as $n,inject as Hn,h as Wn,watch as zn}from"vue";import{ELEMENT_DIV as Jn,Inspector as Kn,log as Yn}from"@visuallyjs/browser-ui";var L=Symbol.for("VueInspectorGetter"),Xn=Symbol.for("VueInspectorSetter");function Zn(){let e=[],t=null;function o(p){try{p(t)}catch(r){Yn("WARN: inspector listener threw an exception",r)}}let n={listen:p=>{t!=null?o(p):e.push(p)}},s={inspector:p=>{t=p,e.forEach(o)}};return So(Xn,s),So(L,$n(n)),s}var Le={name:le,props:{autoCommit:{type:Boolean,default:!0},multipleSelections:{type:Boolean,default:!0},filter:Function,renderEmptyContainer:Function,refresh:Function,className:String,showCloseButton:Boolean,afterUpdate:Function,modelValue:Object},emits:["update:modelValue"],setup(e,t){let o=Zn();return{service:Hn(a),inspectorProvider:o,inspector:null,emit:t.emit}},mounted(){let e=t=>{if(this.inspector==null){let o=new Kn({container:this.$refs.root,ui:t,renderEmptyContainer:()=>(this.emit("update:modelValue",null),this.renderEmptyContainer?this.renderEmptyContainer():""),refresh:(n,s)=>{this.emit("update:modelValue",n),this.refresh&&this.refresh(n),setTimeout(s)},autoCommit:this.autoCommit,multipleSelections:this.multipleSelections,filter:this.filter,showCloseButton:this.showCloseButton,afterUpdate:()=>this.afterUpdate?this.afterUpdate(t):null});this.inspectorProvider.inspector(o)}};this.service.surface.value==null?zn(this.service.surface,e):e(this.service.surface.value)},render(){return Wn(Jn,{ref:"root"},this.$slots.hasOwnProperty("default")?this.$slots.default():[])}};import{h as qn,inject as Qn}from"vue";import{EdgeTypePicker as es,ELEMENT_DIV as ts,log as os}from"@visuallyjs/browser-ui";var Ue={name:$,props:{propertyName:String},setup(){return{inspectorProvider:Qn(L)}},mounted(){this.inspectorProvider?this.inspectorProvider.listen(e=>{let t=new es(e.$ui,this.$refs.container,e.$ui.$getEdgePropertyMappings(),e.getValue(this.propertyName),(o,n)=>{e.setValue(this.propertyName,n,null)});t.render(this.propertyName,e.m),e.onChange(()=>{t.select(this.propertyName,e.getValue(this.propertyName))})}):os("WARN: EdgeTypePicker not instantiated inside an InspectorComponent. Cannot mount.")},render:function(){return qn(ts,{ref:"container"})}};import{h as de,inject as rs}from"vue";import{CLASS_COLOR_PICKER as yo,CLASS_COLOR_PICKER_SWATCH as To,CLASS_COLOR_PICKER_SWATCHES as go,EVENT_CONTEXT_UPDATE as ns,ELEMENT_DIV as Be,INSPECTOR_CONTEXT_RECENT_COLORS as me}from"@visuallyjs/browser-ui";var Ro={render(){let e=this.swatches.map(t=>de(Be,{title:t,class:To,style:`background-color:${t}`,"data-color":t,onClick:()=>this.selectSwatch(t)}));return de(Be,{class:`${yo}`},[de("input",{type:"color","vjs-att":this.propertyName,ref:"colorInput"}),de(Be,{class:go},e)])},props:{propertyName:String,maxColors:{type:Number,default:10}},data:()=>({CLASS_COLOR_PICKER:yo,CLASS_COLOR_PICKER_SWATCHES:go,CLASS_COLOR_PICKER_SWATCH:To,colorInput:null,swatches:[]}),mounted(){let e=rs(L);e&&e.listen(t=>{this.inspector=t,this.swatches=t.ensureContext(me,()=>[]),this.colorInput=this.$refs.colorInput,this.colorInput.addEventListener("change",this.colorPicked),t.bind(ns,o=>{o.key===me&&(this.swatches=o.value.slice())}),t.bind("change",this.setCurrentColor),this.setCurrentColor()})},methods:{addColor:function(e){let t=this.inspector.ensureContext(me,()=>[]);if(e=e.toUpperCase(),!(t.find(n=>n.toUpperCase()===e)!=null)){let n=this.maxColors||10,s=t.slice();s.unshift(e),s.length>n&&(s.length=n),this.inspector.updateContext(me,s)}},colorPicked:function(){let e=this.colorInput.value;this.inspector.setValue(this.propertyName,e,null),this.addColor(e)},selectSwatch:function(e){this.inspector.setValue(this.propertyName,e,null),this.colorInput.value=e},setCurrentColor:function(){let e=this.inspector.getValue(this.propertyName);e!=null&&(this.colorInput.value=e,this.addColor(e))}}};import{h as he,inject as ss,nextTick as is,Teleport as as,watch as ls}from"vue";import{ELEMENT_DIV as je,uuid as ps}from"@visuallyjs/browser-ui";var Ge={props:{placement:{type:String,default:"floating"},position:{type:Object},constraints:{type:Object}},data:()=>({hasMounted:!1,surface:null}),setup(e){return{service:ss(a)}},mounted(){let e=t=>{if(!this.hasMounted){this.surface=t,this.hasMounted=!0;let o=this.position||{x:0,y:0};is().then(()=>{this.placement==="floating"?t.floatElement(this.$refs.root,o):t.fixElement(this.$refs.fixedEl,o,this.constraints)})}};this.service.surface.value==null?ls(this.service.surface,e):e(this.service.surface.value)},render(){return he(je,{ref:"root"},this.hasMounted?this.placement==="floating"?he(je,{},this.$slots.hasOwnProperty("default")?this.$slots.default():[]):he(as,{to:this.surface.vertexLayer,key:ps()},he(je,{ref:"fixedEl"},this.$slots.hasOwnProperty("default")?this.$slots.default():[])):[])}};import{provide as cs}from"vue";var Fe={setup(){cs(a,new E("DiagramProvider"))},render(){return this.$slots.hasOwnProperty("default")?this.$slots.default():[]}};import{h as us,inject as ds,watch as ms}from"vue";import{DiagramPalette as hs,ELEMENT_DIV as fs,log as Ps}from"@visuallyjs/browser-ui";var ke={name:Z,props:{fill:String,outline:String,dragSize:Object,inspector:{type:Boolean,default:!0},iconSize:Object,showLabels:Boolean,paletteStrokeWidth:Number,showAllMessage:String,onCellAdded:Function,mode:String,allowClickToAdd:Boolean,autoExitDrawMode:Boolean,selectAfterAdd:{type:Boolean,default:!0},className:String,diagram:{type:Object},onVertexAdded:Function,preparedShapes:Array},setup(e){return{service:ds(a)}},data:()=>({hasMounted:!1}),mounted(){if(this.service==null&&this.diagram==null)Ps("Cannot mount DiagramPalette - no service found and Diagram not passed in as a prop");else{let e=t=>{this.hasMounted||(this.hasMounted=!0,new hs(this.$refs.container,t,{fill:this.fill,outline:this.outline,dragSize:this.dragSize,inspector:this.inspector,iconSize:this.iconSize,showLabels:this.showLabels,paletteStrokeWidth:this.paletteStrokeWidth,showAllMessage:this.showAllMessage,onCellAdded:this.onCellAdded,mode:this.mode,allowClickToAdd:this.allowClickToAdd,autoExitDrawMode:this.autoExitDrawMode,selectAfterAdd:this.selectAfterAdd,onVertexAdded:this.onVertexAdded,preparedShapes:this.preparedShapes}))};this.diagram?e(this.diagram):this.service.diagram.value!=null?e(this.service.diagram.value):ms(this.service.diagram,e)}},render:function(){return us(fs,{ref:"container"})}};import{BLOCK as Os,ELEMENT_DIV as Es,NONE as Cs,PopupHandler as _s,CLASS_SURFACE_POPUP as Ss,ABSOLUTE as ys}from"@visuallyjs/browser-ui";import{h as Ts,inject as gs,onMounted as Rs,ref as fe,watch as vs}from"vue";var $e={name:"SurfacePopup",props:{selector:String,anchor:{type:String,default:"bottom"}},setup(e){let t=gs(a),o=fe(null),n=fe("block"),s=fe(null),p=fe(null),r=l=>{p.value=new _s(e.selector,s.value,l,i=>{o.value=i,i==null?n.value=Cs:(n.value=Os,requestAnimationFrame(()=>p.value.$positionPopup()))},e.anchor)};return Rs(()=>{t.surface.value==null?vs(t.surface,r):r(t.surface.value)}),{service:t,current:o,display:n,rootRef:s,handler:p}},render(){var e;return Ts(Es,{ref:"rootRef",display:this.display,position:ys,class:Ss},this.$slots.hasOwnProperty("default")?this.$slots.default({vertex:this.current,model:(e=this.service.surface.value)==null?void 0:e.model,ui:this.service.surface.value,hide:()=>{var t;return(t=this.handler.value)==null?void 0:t.$hide()}}):[])}};var $c={install:function(e,t){e.component(xt,Ie),e.component(Dt,we),e.component(It,Fe),e.component(W,Kt),e.component(z,Zt),e.component(X,mo),e.component(H,uo),e.component(K,lo),e.component(Y,co),e.component(J,Co),e.component(Z,ke),e.component(Q,ye),e.component(q,Se),e.component(ee,Te),e.component(te,Re),e.component(oe,ve),e.component(re,ge),e.component(ae,De),e.component(ie,xe),e.component(se,Ne),e.component(ne,Ae),e.component(F,Me),e.component(k,be),e.component($,Ue),e.component(Rt,Ro),e.component(le,Le),e.component(Vt,Ge),e.component(wt,$e),e.provide(a,new E("root"))}};import{shallowRef as He,ref as As}from"vue";import{EVENT_ZOOM as We}from"@visuallyjs/browser-ui";import{inject as Ns}from"vue";function Zc(){let e=Ns(a),t=He(null),o=He(null),n=He(null),s=As(1);return e==null||e.getSurface(p=>{o.value=p,o.value.bind(We,r=>{s.value=r.zoom})}),e==null||e.getDiagram(p=>{t.value=p,t.value.$ui.bind(We,r=>{s.value=r.zoom})}),e==null||e.getPaper(p=>{n.value=p,n.value.bind(We,r=>{s.value=r.zoom})}),s}import{inject as xs,onUnmounted as Ds}from"vue";import{EVENT_DATA_UPDATED as vo,EVENT_GRAPH_CLEARED as Ao}from"@visuallyjs/browser-ui";function au(e){let t=xs(a);if(t){let o=null,n=()=>{o&&e(o)},s=()=>{o&&(o.unbind(vo,n),o.unbind(Ao,n))},p=r=>{s(),o=r,o&&(o.bind(vo,n),o.bind(Ao,n),n())};t.getModel(r=>{p(r)}),Ds(()=>{s()})}}import{shallowRef as Is}from"vue";import{inject as ws}from"vue";function mu(){let e=ws(a),t=Is(null);return e==null||e.getSurface(o=>{t.value=o}),t}import{shallowRef as Vs}from"vue";import{inject as Ms}from"vue";function Cu(){let e=Ms(a),t=Vs(null);return e==null||e.getDiagram(o=>{t.value=o}),t}import{shallowRef as bs}from"vue";import{inject as Ls}from"vue";function Ru(){let e=Ls(a),t=bs(null);return e==null||e.getPaper(o=>{t.value=o}),t}export{ue as $initialiseVueOverlays,ve as AreaChartComponent,ye as BarChartComponent,Zo as BaseGroupComponent,Xo as BaseNodeComponent,kt as BaseOverlayComponent,O as BrowserUIVueModel,Ne as BubbleChartComponent,At as CLASS_VUE_GROUP,vt as CLASS_VUE_NODE,Nt as CLASS_VUE_OVERLAY,oe as COMPONENT_AREA_CHART,Q as COMPONENT_BAR_CHART,se as COMPONENT_BUBBLE_CHART,q as COMPONENT_COLUMN_CHART,K as COMPONENT_CONTROLS,X as COMPONENT_DIAGRAM,Z as COMPONENT_DIAGRAM_PALETTE,It as COMPONENT_DIAGRAM_PROVIDER,Y as COMPONENT_EXPORT_CONTROLS,ie as COMPONENT_GAUGE_CHART,le as COMPONENT_INSPECTOR,te as COMPONENT_LINE_CHART,H as COMPONENT_MINIVIEW,J as COMPONENT_PALETTE,z as COMPONENT_PAPER,Dt as COMPONENT_PAPER_PROVIDER,re as COMPONENT_PIE_CHART,ae as COMPONENT_SANKEY_CHART,ne as COMPONENT_SCATTER_CHART,W as COMPONENT_SURFACE,wt as COMPONENT_SURFACE_POPUP,xt as COMPONENT_SURFACE_PROVIDER,ee as COMPONENT_XY_CHART,Ro as ColorPickerComponent,Se as ColumnChartComponent,lo as ControlsComponent,gt as DEFAULT_SHAPE_HEIGHT,Tt as DEFAULT_SHAPE_WIDTH,Ye as DEFAULT_VUE_PAPER_ID,Ke as DEFAULT_VUE_SURFACE_ID,Ge as DecoratorComponent,mo as DiagramComponent,ke as DiagramPaletteComponent,Fe as DiagramProvider,zo as EVENT_VERTEX_UPDATED,Wo as EVENT_VERTICES_RENDERED,Ue as EdgeTypePickerComponent,co as ExportControlsComponent,xe as GaugeChartComponent,Le as InspectorComponent,L as InspectorGetterSymbol,Xn as InspectorSetterSymbol,Re as LineChartComponent,uo as MiniviewComponent,Qe as PROP_ACTIVE_TRACKING,_t as PROP_ALLOW_CLICK_TO_ADD,mt as PROP_ALLOW_DROP_ON_CANVAS,dt as PROP_ALLOW_DROP_ON_EDGE,ht as PROP_ALLOW_DROP_ON_GROUP,ft as PROP_ALLOW_DROP_ON_NODE,yt as PROP_CANVAS_DROP_FILTER,N as PROP_CLASS_NAME,Ct as PROP_CLICK_TO_ADD_ONLY,Ze as PROP_CLICK_TO_CENTER,st as PROP_CSV_DATA,T as PROP_DATA,pt as PROP_DATA_GENERATOR,Oe as PROP_DATA_SOURCE_FILTER,St as PROP_DRAG_SIZE,ut as PROP_GROUP_IDENTIFIER,fi as PROP_ID,Pt as PROP_IGNORE_DROP_ON_NODE,rt as PROP_INTERACTIVE,it as PROP_JSON_DATA,ot as PROP_MODE,j as PROP_MODEL,x as PROP_MODEL_OPTIONS,Ot as PROP_ON_VERTEX_ADDED,w as PROP_OPTIONS,tt as PROP_PAPER_ID,nt as PROP_PIVOT,B as PROP_RENDER_OPTIONS,lt as PROP_SELECTOR,Et as PROP_SELECT_AFTER_ADD,qe as PROP_SHOW_LASSO,y as PROP_SURFACE_ID,et as PROP_TRACK_SELECTION,Xe as PROP_TYPE_FUNCTION,ct as PROP_TYPE_GENERATOR,g as PROP_URL,at as PROP_USE_MODEL,G as PROP_VIEW_OPTIONS,Co as PaletteComponent,Zt as PaperComponent,we as PaperProvider,ge as PieChartComponent,De as SankeyChartComponent,Ae as ScatterChartComponent,Me as ShapeComponent,be as ShapePaletteComponent,Kt as SurfaceComponent,$e as SurfacePopup,Ie as SurfaceProvider,Rt as TAG_COLOR_PICKER,Vt as TAG_DECORATOR,$ as TAG_EDGE_TYPE_PICKER,F as TAG_SHAPE,k as TAG_SHAPE_PALETTE,$c as VisuallyJsPlugin,E as VisuallyJsService,a as VisuallyJsServiceKey,Te as XYChartComponent,Ht as addPaper,$t as addSurface,Mi as bindToDevLifecycle,Zn as doProvideInspector,ks as newInstance,Cu as useDiagram,Ru as usePaper,mu as useSurface,au as useVisuallyJsUpdate,Zc as useZoom};
|
|
1
|
+
var Fo=Object.defineProperty,Ho=Object.defineProperties;var $o=Object.getOwnPropertyDescriptors;var et=Object.getOwnPropertySymbols;var Wo=Object.prototype.hasOwnProperty,zo=Object.prototype.propertyIsEnumerable;var tt=(e,t,o)=>t in e?Fo(e,t,{enumerable:!0,configurable:!0,writable:!0,value:o}):e[t]=o,x=(e,t)=>{for(var o in t||(t={}))Wo.call(t,o)&&tt(e,o,t[o]);if(et)for(var o of et(t))zo.call(t,o)&&tt(e,o,t[o]);return e},w=(e,t)=>Ho(e,$o(t));import{log as Ko,BrowserUIModel as Jo}from"@visuallyjs/browser-ui";var O=class extends Jo{render(t,o){return Ko("render called directly on BrowserUiVue class: should not happen. Surface component should use internal render."),null}};function as(e){return e=e||{},new O(e)}var ot="surfaceId",rt="paperId",nt="typeFunction",it="clickToCenter",st="showLasso",at="activeTracking",lt="trackSelection",T="surfaceId",pt="paperId",I="className",S="data",ct="mode",b="options",G="renderOptions",M="modelOptions",k="model",j="viewOptions",v="url",ut="interactive",dt="pivot",ve="dataSourceFilter",mt="csvData",ht="jsonData",ft="useModel",bs="id",Pt="selector",Ot="dataGenerator",Et="typeGenerator",Ct="groupIdentifier",_t="allowDropOnEdge",yt="allowDropOnCanvas",gt="allowDropOnGroup",Tt="allowDropOnNode",St="ignoreDropOnNode",vt="onVertexAdded",Rt="selectAfterAdd",Nt="clickToAddOnly",At="allowClickToAdd",xt="dragSize",Dt="canvasDropFilter",F="Shape",H="ShapePalette",It=120,Mt=90,$="EdgeTypePickerComponent",wt="ColorPickerComponent",bt="vjs-vue-node",Vt="vjs-vue-group",Bt="vjs-vue-overlay",W="BackgroundComponent",z="GridBackgroundComponent",K="ImageBackgroundComponent",J="TiledImageBackgroundComponent",Y="MiniviewComponent",X="SurfaceComponent",Lt="SurfaceProvider",Z="PaperComponent",Ut="PaperProvider",Gt="DiagramProvider",q="PaletteComponent",Q="ControlsComponent",ee="ExportControlsComponent",te="DiagramComponent",oe="DiagramPaletteComponent",re="ColumnChartComponent",ne="BarChartComponent",ie="XYChartComponent",se="LineChartComponent",ae="AreaChartComponent",le="PieChartComponent",pe="ScatterChartComponent",ce="BubbleChartComponent",ue="GaugeChartComponent",de="SankeyChartComponent",me="InspectorComponent",kt="SurfacePopup",jt="Decorator";import{addClass as Yo,BrowserUI as Xo,isGroup as Zo,Vertex as Ft}from"@visuallyjs/browser-ui";var he={props:{data:Object,model:O,obj:Ft,vertex:Ft,ui:Xo,el:Element,def:Object,eventInfo:Object},mounted(){let e=this,t=Zo(e.vertex)?Vt:bt;e.el.firstElementChild&&Yo(e.el.firstElementChild,t),e.ui.$vertexRendered(e.vertex,e.el,e.def,e.eventInfo),Ht(e.ui.id,e.vertex)},methods:{getModel:function(){return this.model},removeVertex:function(){this.model.remove(this.vertex)}},updated(){this.ui.$revalidateElement(this.el),$t(this.ui.id,this.vertex)}};var Wt={mixins:[he],methods:{getNode:function(){return this.obj},removeNode:function(){this.model.removeNode(this.getNode())},updateNode:function(e){this.model.updateNode(this.obj,e);let t=this.ui.getRenderedElement(this.obj.getFullId());this.ui.$revalidateElement(t)}}};var zt={methods:{getGroup:function(){return this.obj},removeGroup:function(e){this.model.removeGroup(this.obj,e)},updateGroup:function(e){this.model.updateGroup(this.obj,e);let t=this.ui.getRenderedElement(this.obj.getFullId());this.ui.$revalidateElement(t)}},mixins:[he]};import{markRaw as _}from"vue";import{addClass as qo,BrowserUI as Qo,CLASS_DEFAULT_GROUP as er,CLASS_DEFAULT_NODE as tr,ELEMENT_DIV as Kt,extend as Jt,isGroup as or,OptimisticEventGenerator as rr,renderSurface as nr,updateClasses as ir,Overlay as sr,Edge as Yt,OVERLAY_TYPE_CUSTOM as ar,uuid as lr,renderPaper as pr}from"@visuallyjs/browser-ui";var Re=class{constructor(){this.unrenderedVertices=new Map;this.eventManager=new rr}vertexWillRender(t){this.unrenderedVertices.set(t.id,t)}vertexHasRendered(t){this.unrenderedVertices.delete(t.id),this.unrenderedVertices.size===0&&this.eventManager.fire(cr)}vertexHasUpdated(t){this.eventManager.fire(ur,t)}},cr="vertices:rendered",ur="vertex:updated",Ne=new Map;function fe(e){return Ne.has(e)||Ne.set(e,new Re),Ne.get(e)}function Ht(e,t){fe(e).vertexHasRendered(t)}function $t(e,t){fe(e).vertexHasUpdated(t)}function dr(e,t){fe(e).vertexWillRender(t)}function Oa(e,t,o){fe(e).eventManager.bind(t,o)}var Pe=(e,t)=>{t.parentNode&&t.parentNode.removeChild(t)},Xt={props:{data:Object,model:O,obj:Yt,edge:Yt,overlay:sr,ui:Qo,el:Element,def:Object,eventInfo:Object},mounted(){let e=this;e.el.firstElementChild&&qo(e.el.firstElementChild,Bt)},updated(){this.ui.$revalidateElement(this.el)}},Oe=(e,t,o,n,i,p,r,a,l)=>{let d=r.component!=null,c=or(a),h=[];d||h.push(c?er:tr);let m=d?r.component:{render(f){return f.data.label||""}};if(m){let f=document.createElement(Kt);ir(f,h),m.mixins==null&&(m.mixins=[]);let P=c?zt:Wt;m.mixins.find(E=>E===P)||m.mixins.push(P),dr(p.id,a);let D={data:o,model:_(n),ui:_(p),obj:a,vertex:a,el:f,def:_(r),eventInfo:l==null?null:_(l)};if(r.inject)for(let E in r.inject){let A=r.inject[E],jo=typeof A=="function"?A(a,n):A;D[E]=jo}e.push({component:_(m),el:f,e:a.getFullId(),props:D,vertex:a})}};function Zt(e,t,o,n,i,p){let r={reactive:!0,asynchronous:!0,usesWrapperElement:!1,update:(l,d,c,h)=>{},render:(l,d,c,h,m,f,P,g)=>Oe(n,l,d,c,h,m,f,P,g),cleanupVertex:Pe,cleanupPort:Pe,rerender:(l,d,c,h,m,f,P,g,D)=>{let E=n.findIndex(A=>A.vertex===P);E!=null&&n.splice(E,1)[0].el,m.$__unmanage(D,!0,!0),requestAnimationFrame(()=>{Oe(n,l,d,c,h,m,f,P,g)})}},a=Jt(i||{},{view:p||{},id:t});return nr(e,o,r,a)}function qt(e,t,o,n,i,p){let r={reactive:!0,asynchronous:!0,usesWrapperElement:!1,update:(l,d,c,h)=>{},render:(l,d,c,h,m,f,P,g)=>Oe(n,l,d,c,h,m,f,P,g),cleanupVertex:Pe,cleanupPort:Pe,rerender:(l,d,c,h,m,f,P,g,D)=>{let E=n.findIndex(A=>A.vertex===P);E!=null&&n.splice(E,1)[0].el,m.$__unmanage(D,!0,!0),requestAnimationFrame(()=>{Oe(n,l,d,c,h,m,f,P,g)})}},a=Jt(i||{},{view:p||{},id:t});return pr(e,o,r,a)}function Ee(e,t,o,n){if(e.edges)for(let i in e.edges){let p=e.edges[i];p.overlays&&(p.overlays=p.overlays.map(r=>{let a={};return r.component!=null?{type:ar,options:{create:d=>{let c=document.createElement(Kt),h=lr();r.component.mixins==null&&(r.component.mixins=[]),r.component.mixins.indexOf(Xt)===-1&&r.component.mixins.push(Xt);let m=x({data:d.edge.data,model:_(o()),ui:_(t()),obj:d.edge,edge:d.edge,el:c,def:_(r),eventInfo:null,overlay:r},a);return n.push({component:_(r.component),el:c,e:h,props:m}),c}}}:r}))}}import{log as Qt,Paper as mr,Surface as hr}from"@visuallyjs/browser-ui";import{shallowRef as V}from"vue";var s=Symbol.for("visuallyjs-service"),C=class{constructor(t){this.context=t;this.i=[];this.s=[];this.a=[];this.l=[];this.surface=V(null);this.model=V(null);this.paper=V(null);this.diagram=V(null);this.ui=V(null)}getSurface(t){this.t(this.s,t,this.p)}getDiagram(t){this.t(this.a,t,this.c)}getPaper(t){this.t(this.l,t,this.u)}getModel(t){this.t(this.i,t,this.r)}getModelDirect(){return this.r}t(t,o,n){if(n!=null)try{o(n)}catch(i){Qt(`WARN: could not dispatch ${i}`)}else t.push(o)}setSurface(t){this.surface.value=t,this.model.value=t.model,this.ui.value=t,this.p=t,this.n(t.model),this.o(this.s,t)}setDiagram(t){this.diagram.value=t,this.model.value=t.model,this.ui.value=t.$ui,this.c=t,this.n(t.model),t.$ui instanceof hr?this.setSurface(t.$ui):t.$ui instanceof mr&&this.setPaper(t.$ui),this.o(this.a,t)}setPaper(t){this.paper.value=t,this.model.value=t.model,this.ui.value=t,this.u=t,this.n(t.model),this.o(this.l,t)}n(t){this.r=t,this.o(this.i,t)}o(t,o){t.forEach(n=>{try{n(o)}catch(i){Qt(`WARN: could not flush all queue entries ${i}`)}})}};import{h as B,inject as fr,Teleport as eo}from"vue";import{ELEMENT_DIV as Pr,EVENT_GROUP_REMOVED as Or,EVENT_GROUP_UPDATED as Er,EVENT_NODE_REMOVED as Cr,EVENT_NODE_UPDATED as _r,EVENT_RENDER_END as yr,clone as to,EVENT_EDGE_UPDATED as gr,EVENT_EDGE_REMOVED as Tr,EVENT_GRAPH_CLEARED as Sr}from"@visuallyjs/browser-ui";var oo={setup(e){return{service:fr(s),surfaceId:e.surfaceId||ot}},name:X,props:{[S]:{type:Object},[G]:{type:Object},[M]:{type:Object},[j]:{type:Object},[k]:{type:Object},[v]:{type:String},[T]:{type:String}},data:function(){return{vertices:[],overlays:[]}},mounted(){let e=this,t=this.model||new O(this.modelOptions||{}),o=this.$refs.root;e.url?t.load({url:e.url}):e.data&&t.load({data:e.data});let n=to(this.viewOptions||{});Ee(n,()=>this.surface,()=>t,this.overlays),this.surface=Zt(t,this.surfaceId,o,this.vertices,to(this.renderOptions||{}),n),this.service.setSurface(this.surface);let i=(r,a)=>{let l=()=>{let c={};return a.originalData||a.updates?c=Object.assign(a.originalData,a.updates):a.newData&&Object.assign(c,a.newData),c},d=this.vertices.find(c=>c.e===r);d!=null&&(d.props.data=l())},p=r=>{let a=this.vertices.findIndex(l=>l.e===r);a!==-1&&this.vertices.splice(a,1)};t.bind(_r,r=>{i(r.vertex.getFullId(),r)}),t.bind(Er,r=>{i(r.vertex.getFullId(),r)}),t.bind(Cr,r=>{p(r.node.id)}),t.bind(Or,r=>{p(r.group.id)}),t.bind(gr,r=>{let a=r.edge.id;this.overlays.forEach(l=>{l.props.edge&&l.props.edge.id===a&&(l.props.data=r.edge.data)})}),t.bind(Tr,r=>{let a=r.edge.id,l=this.overlays.length-1;for(;l>=0;)this.overlays[l].props.edge&&this.overlays[l].props.edge.id===a&&this.overlays.splice(l,1),l--}),t.bind(Sr,()=>{this.vertices.length=0,this.overlays.length=0}),this.surface.bind(yr,()=>setTimeout(()=>this.surface.$redrawEveryConnection()))},render:function(){let e=this.vertices.map(t=>B(eo,{to:t.el,key:t.e},[B(t.component,t.props)]));return this.overlays.forEach(t=>{e.push(B(eo,{to:t.el,key:t.e},[B(t.component,t.props)]))}),B(Pr,{ref:"root",class:"vjs-vue-surface",style:{width:"100%",height:"100%"}},e.concat(this.$slots.hasOwnProperty("default")?this.$slots.default():[]))}};import{h as L,inject as vr,Teleport as ro}from"vue";import{ELEMENT_DIV as Rr,EVENT_GROUP_REMOVED as Nr,EVENT_GROUP_UPDATED as Ar,EVENT_NODE_REMOVED as xr,EVENT_NODE_UPDATED as Dr,EVENT_RENDER_END as Ir,clone as no,EVENT_EDGE_UPDATED as Mr,EVENT_EDGE_REMOVED as wr,EVENT_GRAPH_CLEARED as br}from"@visuallyjs/browser-ui";var io={setup(e){return{service:vr(s),paperId:e.paperId||rt}},name:Z,props:{[S]:{type:Object},[G]:{type:Object},[M]:{type:Object},[j]:{type:Object},[k]:{type:Object},[v]:{type:String},[pt]:{type:String}},data:function(){return{vertices:[],overlays:[]}},mounted(){let e=this,t=this.model||new O(this.modelOptions||{}),o=this.$refs.root;e.url?t.load({url:e.url}):e.data&&t.load({data:e.data});let n=no(this.viewOptions||{});Ee(n,()=>this.paper,()=>t,this.overlays),this.paper=qt(t,this.paperId,o,this.vertices,no(this.renderOptions||{}),n),this.service.setPaper(this.paper);let i=(r,a)=>{let l=()=>{let c={};return a.originalData||a.updates?c=Object.assign(a.originalData,a.updates):a.newData&&Object.assign(c,a.newData),c},d=this.vertices.find(c=>c.e===r);d!=null&&(d.props.data=l())},p=r=>{let a=this.vertices.findIndex(l=>l.e===r);a!==-1&&this.vertices.splice(a,1)};t.bind(Dr,r=>{i(r.vertex.getFullId(),r)}),t.bind(Ar,r=>{i(r.vertex.getFullId(),r)}),t.bind(xr,r=>{p(r.node.id)}),t.bind(Nr,r=>{p(r.group.id)}),t.bind(Mr,r=>{let a=r.edge.id;this.overlays.forEach(l=>{l.props.edge&&l.props.edge.id===a&&(l.props.data=r.edge.data)})}),t.bind(wr,r=>{let a=r.edge.id,l=this.overlays.length-1;for(;l>=0;)this.overlays[l].props.edge&&this.overlays[l].props.edge.id===a&&this.overlays.splice(l,1),l--}),t.bind(br,()=>{this.vertices.length=0,this.overlays.length=0}),this.paper.bind(Ir,()=>setTimeout(()=>this.paper.$redrawEveryConnection()))},render:function(){let e=this.vertices.map(t=>L(ro,{to:t.el,key:t.e},[L(t.component,t.props)]));return this.overlays.forEach(t=>{e.push(L(ro,{to:t.el,key:t.e},[L(t.component,t.props)]))}),L(Rr,{ref:"root",class:"vjs-vue-paper",style:{width:"100%",height:"100%"}},e.concat(this.$slots.hasOwnProperty("default")?this.$slots.default():[]))}};import{h as u,inject as Vr,watch as Br}from"vue";import{LassoPlugin as Lr,SURFACE_MODE_SELECT as so,SURFACE_MODE_PAN as ao,PAN_PATH as Ur,PAN_VIEW_BOX as Gr,LASSO_PATH as kr,LASSO_VIEW_BOX as jr,ZOOM_TO_FIT_PATH as Fr,ZOOM_TO_FIT_VIEW_BOX as Hr,EVENT_UNDOREDO_UPDATE as $r,TRUE as lo,FALSE as po,EVENT_SURFACE_MODE_CHANGED as Wr,ELEMENT_DIV as co,ATTRIBUTE_CONTROLS_ORIENTATION as zr,ZOOM_IN_OUT_VIEW_BOX as uo,ZOOM_IN_PATH as Kr,ZOOM_OUT_PATH as Jr,RESET_SELECTION_PATH as Yr,RESET_SELECTION_VIEW_BOX as Xr,CLEAR_PATH as Zr,CLEAR_VIEW_BOX as qr,ATTRIBUTE_RESET_SELECTION as Qr,CLASS_CONTROLS_RESET_SELECTION as en,EVENT_SELECT as tn,EVENT_DESELECT as on,EVENT_SELECTION_CLEARED as rn,supportsPathEditing as nn}from"@visuallyjs/browser-ui";var sn="Clear dataset?",Ae="vjs-selected-mode",mo="can-undo",ho="can-redo",an="data-undo",ln="data-redo",fo="data-mode",pn="data-reset",cn="data-clear",un="data-zoom-in",dn="data-zoom-out",Po="vjs-controls-has-selection",Oo={setup(e){return{service:Vr(s)}},name:Q,props:{clear:{type:Boolean,default:!0},[T]:{type:String},undoRedo:{type:Boolean,default:!0},orientation:{type:String,default:"row"},zoomToExtents:{type:Boolean,default:!0},zoomButtons:{type:Boolean,default:!1},clearMessage:{type:String,default:sn},onMaybeClear:{type:Function},className:{type:String,default:""}},methods:{panMode:function(){var e;(e=this.service.surface.value)==null||e.setMode(ao)},selectMode:function(){var e;(e=this.service.surface.value)==null||e.setMode(so)},zoomToFit:function(){var e;(e=this.service.surface.value)==null||e.zoomToFit()},doClear:function(){let e=this.service.surface.value;e&&(this.onMaybeClear!=null?this.onMaybeClear(()=>e.model.clear()):window.confirm(this.clearMessage)&&e.model.clear())},undo:function(){var e;(e=this.service.model.value)==null||e.undo()},redo:function(){var e;(e=this.service.model.value)==null||e.redo()},zoomIn:function(){var e;(e=this.service.surface.value)==null||e.zoomIn()},zoomOut:function(){var e;(e=this.service.surface.value)==null||e.zoomOut()},resetSelection(){let e=this.service.surface.value;e&&(e.model.clearSelection(),nn(e)&&e.stopEditingPath())},updateSelectionState:function(){let e=this.service.surface.value;e&&(e.model.getSelection().isEmpty()?this.$refs.root.removeAttribute(Po):this.$refs.root.setAttribute(Po,"true"))}},data:function(){return{ready:!1,hasLasso:!1}},render(){if(this.ready){let e=[];return this.showPan&&(e.push(u("i",{class:`vjs-pan-mode ${Ae}`,[fo]:ao,onClick:()=>this.panMode(),title:"Pan mode"},[u("svg",{viewBox:Gr,stroke:"currentColor",fill:"none"},[u("path",{d:Ur})])])),e.push(u("i",{class:"vjs-select-mode",[fo]:so,onClick:()=>this.selectMode(),title:"Select mode"},[u("svg",{viewBox:jr,stroke:"currentColor",fill:"currentColor"},[u("path",{d:kr})])]))),this.undoRedo&&(e.push(u("i",{class:"vjs-undo",[an]:!0,title:"Undo last action",onClick:()=>this.undo()})),e.push(u("i",{class:"vjs-redo",[ln]:!0,title:"Redo last action",onClick:()=>this.redo()}))),this.zoomToExtents&&e.push(u("i",{class:"vjs-zoom-to-fit",[pn]:"true",onClick:()=>this.zoomToFit(),title:"Zoom to Fit"},[u("svg",{viewBox:Hr,stroke:"currentColor",fill:"currentColor"},[u("path",{d:Fr})])])),this.zoomButtons&&(e.push(u("i",{class:"vjs-zoom-in",[un]:"true",onClick:()=>this.zoomIn(),title:"Zoom In"},[u("svg",{viewBox:uo,stroke:"currentColor",fill:"currentColor"},[u("path",{d:Kr})])])),e.push(u("i",{class:"vjs-zoom-out",[dn]:"true",onClick:()=>this.zoomOut(),title:"Zoom Out"},[u("svg",{viewBox:uo,stroke:"currentColor",fill:"currentColor"},[u("path",{d:Jr})])]))),e.push(u("i",{class:en,[Qr]:"true",onClick:()=>{this.resetSelection()}},[u("svg",{viewBox:Xr,stroke:"currentColor",fill:"currentColor"},[u("path",{d:Yr})])])),this.clear&&e.push(u("i",{class:"vjs-clear-dataset",[cn]:"true",onClick:()=>{this.doClear()}},[u("svg",{viewBox:qr,stroke:"currentColor",fill:"currentColor"},[u("path",{d:Zr})])])),u(co,{class:`vjs-controls ${this.className}`,ref:"root",[mo]:!1,[ho]:!1,[zr]:this.orientation},e)}else return u(co,{ref:"root"})},mounted(){let e=t=>{let o=t.getPlugin(Lr.type);this.showPan=o!=null,t.bind(Wr,n=>{t.removeClass(t.$getSelector(this.$refs.root,"[data-mode]"),Ae),t.addClass(t.$getSelector(this.$refs.root,"[data-mode='"+n+"']"),Ae)}),t.model.bind($r,n=>{this.$refs.root.setAttribute(mo,n.undoCount>0?lo:po),this.$refs.root.setAttribute(ho,n.redoCount>0?lo:po)}),t.model.bind(tn,()=>this.updateSelectionState()),t.model.bind(on,()=>this.updateSelectionState()),t.model.bind(rn,()=>this.updateSelectionState()),this.ready=!0};this.service.surface.value==null?Br(this.service.surface,e):e(this.service.surface.value)}};import{h as R,inject as mn}from"vue";import{CLASS_CONTROLS as hn,CLASS_EXPORT_CONTROLS as fn,ELEMENT_DIV as Pn,ImageExportUI as Eo,SvgExportUI as On,TYPE_JPG as En,TYPE_PNG as Cn,TYPE_SVG as _n}from"@visuallyjs/browser-ui";var Co={name:ee,setup(e){return{service:mn(s)}},props:{surfaceId:{type:String},showLabel:{type:Boolean,default:!0},label:{type:String,default:"Export :"},margins:{type:Object},svgOptions:{type:Object},imageOptions:{type:Object},allowSvgExport:{type:Boolean,default:!0},allowPngExport:{type:Boolean,default:!0},allowJpgExport:{type:Boolean,default:!0}},methods:{loadSurface:function(e){let t=this.service.surface.value;t&&e(t)},exportSVG:function(){this.loadSurface(e=>{let t=this.svgOptions||{};this.margins!=null&&t.margins==null&&Object.assign(t,this.margins),new On(e).export(t)})},exportJPG:function(){this.loadSurface(e=>{let t=this.imageOptions||{};this.margins!=null&&t.margins==null&&Object.assign(t,this.margins),t.type="image/jpeg",new Eo(e).export(t)})},exportPNG:function(){this.loadSurface(e=>{let t=this.imageOptions||{};this.margins!=null&&t.margins==null&&Object.assign(t,this.margins),new Eo(e).export(t)})}},render(){let e=this.showLabel!==!1,t=this.allowSvgExport!==!1,o=this.allowPngExport!==!1,n=this.allowJpgExport!==!1,i=[];return t&&i.push(R("i",{},[R("a",{href:"#","data-type":_n,onClick:()=>this.exportSVG()},"SVG")])),o&&i.push(R("i",{},[R("a",{href:"#","data-type":Cn,onClick:()=>this.exportPNG()},"PNG")])),n&&i.push(R("i",{},[R("a",{href:"#","data-type":En,onClick:()=>this.exportJPG()},"JPG")])),e&&i.unshift(R("span",{},[this.label])),R(Pn,{class:`${hn} ${fn}`},i)}};import{h as yn,inject as gn,watch as _o}from"vue";import{ELEMENT_DIV as Tn,MiniviewPlugin as Sn}from"@visuallyjs/browser-ui";var yo={setup(e){return{service:gn(s)}},name:Y,props:{[T]:{type:String},[I]:{type:String,default:""},[at]:{type:Boolean,default:!0},[it]:{type:Boolean,default:!0},[st]:{type:Boolean,default:!0},[lt]:{type:Boolean,default:!0},[nt]:{type:Function}},mounted:function(){let e=t=>{t.addPlugin({type:Sn.type,options:{container:this.$el,activeTracking:this.activeTracking,clickToCenter:this.clickToCenter,showLasso:this.showLasso,trackSelection:this.trackSelection,typeFunction:this.typeFunction}})};this.service.surface.value!=null&&e(this.service.surface.value),this.service.paper.value!=null?e(this.service.paper.value):(_o(this.service.surface,e),_o(this.service.paper,e))},render:function(e){return yn(Tn,{ref:"root",class:e.className})}};import{h as vn,inject as Rn,markRaw as Nn}from"vue";import{createDiagram as An,ELEMENT_DIV as xn}from"@visuallyjs/browser-ui";var go={setup(e){return{service:Rn(s)}},name:te,props:{[S]:{type:Object},[v]:{type:String},[M]:{type:Object},[b]:{type:Object}},mounted(){let e=this.$refs.root;this.diagram=Nn(An(e,this.options,this.modelOptions)),this.service.setDiagram(this.diagram),this.data?this.diagram.load({data:this.data}):this.url&&this.diagram.load({url:this.url})},render:function(){return vn(xn,{ref:"root",class:"vjs-vue-surface",style:{width:"100%",height:"100%"}},this.$slots.hasOwnProperty("default")?this.$slots.default():[])}};import{h as To,inject as Dn,watch as So}from"vue";import{ColumnChart as In,BarChart as Mn,CategoryValueChart as wn,ELEMENT_DIV as vo,LineChart as bn,AreaChart as Vn,PieChart as Bn,ScatterChart as Ln,BubbleChart as Un,GaugeChart as Gn,SankeyChart as kn}from"@visuallyjs/browser-ui";var Ro={[I]:{type:String},[S]:{type:Object},[v]:{type:String},[ft]:{type:Boolean,default:!1}},No={setup(){return{service:Dn(s)}},render:function(){return To(vo,{class:`${this.className}`,ref:"root"})}};function y(e,t,o=!0){let n=w(x({},Ro),{[b]:{type:Object}}),i={};return o&&(n[ve]={type:Function},i[ve]=function(p){this.chart.setDataSourceFilter(p)}),w(x({},No),{name:e,props:n,watch:i,data:()=>({hasMounted:!1}),mounted(){let p=this.$refs.root,r=o?Object.assign({dataSourceFilter:this.dataSourceFilter},this.options):this.options;this.data&&(r.data=this.data),this.url&&(r.url=this.url);let a=()=>{this.hasMounted=!0,this.chart=new t(p,r)};this.useModel?this.service.model.value!=null?(r.dataSource=this.service.model.value,a()):So(this.service.model,l=>{this.hasMounted||(r.dataSource=l,a())}):a()}})}var xe=y(re,In),De=y(ne,Mn),Ie=y(ie,wn,!1),Me=y(le,Bn),we=y(se,bn),be=y(ae,Vn),Ve=y(pe,Ln),Be=y(ce,Un),Le=y(ue,Gn,!1),Ue=w(x({},No),{name:de,props:w(x({},Ro),{[mt]:{type:String},[ht]:{type:Object},[ut]:{type:Boolean},[dt]:{type:String},[b]:{type:Object}}),data:()=>({hasMounted:!1}),mounted(){let e=this.$refs.root,t=Object.assign({},this.options);this.interactive!=null&&(t.interactive=this.interactive),this.pivot!=null&&(t.pivot=this.pivot),this.csvData&&(t.csvData=this.csvData),this.jsonData&&(t.jsonData=this.jsonData),this.url&&(t.url=this.url);let o=()=>{this.hasMounted=!1,this.chart=new kn(e,t)};if(this.useModel){let n=i=>{this.hasMounted||(t.dataSource=i,o())};this.service.model.value==null?So(this.service.model,n):n(this.service.model.value)}else o()},watch:{pivot(e){this.chart&&this.chart.pivot(e)}},render:function(){return To(vo,{class:`${this.className}`,ref:"root"})}});import{h as jn,inject as Fn,watch as Hn}from"vue";import{defaultDataGenerator as $n,ELEMENT_DIV as Wn,Palette as zn}from"@visuallyjs/browser-ui";var Ao={setup(e){return{service:Fn(s)}},name:q,props:{[T]:{type:String},[Pt]:{type:String},[Ot]:{type:Function},[Et]:{type:Function},[Ct]:{type:Function},[_t]:{type:Boolean,default:!1},[yt]:{type:Boolean,default:!0},[gt]:{type:Boolean,default:!0},[Tt]:{type:Boolean,default:!1},[St]:{type:Boolean,default:!1},[xt]:Object,[vt]:Function,[Dt]:Function,[I]:String,[ct]:String,[Rt]:{type:Boolean,default:!1},[At]:{type:Boolean,default:!1},[Nt]:{type:Boolean,default:!1}},mounted:function(){let e=t=>{let o={source:this.$refs.root,selector:this.selector,dataGenerator:n=>this.dataGenerator?this.dataGenerator(n):$n(n),allowDropOnEdge:this.allowDropOnEdge===!0,allowDropOnGroup:this.allowDropOnGroup!==!1,allowDropOnCanvas:this.allowDropOnCanvas!==!1,allowDropOnNode:this.allowDropOnNode===!0,ignoreDropOnNode:this.ignoreDropOnNode===!0,canvasDropFilter:this.canvasDropFilter,onVertexAdded:this.onVertexAdded,dragSize:this.dragSize,mode:this.mode};this.groupIdentifier!=null&&(o.groupIdentifier=this.groupIdentifier),this.typeGenerator!=null&&(o.typeGenerator=this.typeGenerator),this.palette=new zn(t,o)};this.service.surface.value==null?Hn(this.service.surface,e):e(this.service.surface.value)},render:function(){return jn(Wn,{ref:"root",class:this.className||""},this.$slots.hasOwnProperty("default")?this.$slots.default():[])}};import{provide as Kn}from"vue";var Ge={setup(){Kn(s,new C("SurfaceProvider"))},render(){return this.$slots.hasOwnProperty("default")?this.$slots.default():[]}};import{provide as Jn}from"vue";var ke={setup(){Jn(s,new C("PaperProvider"))},render(){return this.$slots.hasOwnProperty("default")?this.$slots.default():[]}};import{h as Yn,inject as Xn,watch as Zn}from"vue";import{CLASS_SHAPE as qn,convertToMultilineText as xo,DEFAULT_LABEL_FILL_RATIO as je,ELEMENT_SVG as Qn}from"@visuallyjs/browser-ui";var Fe={name:F,props:{data:{type:Object},showLabels:{type:Boolean,default:!1},labelProperty:{type:String,default:"label"},labelStrokeWidth:{type:Number},multilineLabels:{type:Boolean,default:!0},labelFillRatio:{type:Number,default:je},labelColor:{type:String,default:"#000000"},font:{type:Object}},setup(){return{service:Xn(s)}},mounted(){let e=t=>{let o=t.getShapeLibrary(),n=o.renderCompiledShape(Object.assign({sw:this.getOutlineWidth()},this.data));if(this.$refs.container.appendChild(n),this.showLabels){let i=o.renderShapeLabel(this.data,this.labelProperty,this.labelStrokeWidth,null,this.labelColor,this.labelColor,this.font);this.$refs.container.appendChild(i),this.multilineLabels!=!1&&xo(i,this.data[this.labelProperty]||"",this.getWidth()*(this.labelFillRatio||je))}};this.service.ui.value==null?Zn(this.service.ui,e):e(this.service.ui.value)},updated(){let e=this.service.surface.value;if(e){let t=e.getShapeLibrary(),o=t.renderCompiledShape(Object.assign({sw:this.getOutlineWidth()},this.data));if(this.$refs.container.replaceChildren(o),this.showLabels){let n=t.renderShapeLabel(this.data,this.labelProperty,this.labelStrokeWidth,null,this.labelColor,this.labelColor,this.font);this.$refs.container.appendChild(n),this.multilineLabels!=!1&&xo(n,this.data[this.labelProperty]||"",this.getWidth()*(this.labelFillRatio||je))}}},render:function(){return Yn(Qn,{ref:"container",preserveAspectRatio:"none",fill:this.getFill(),stroke:this.getOutline(),"stroke-width":this.getOutlineWidth(),viewBox:"0 0 "+this.getWidth()+" "+this.getHeight(),class:qn})},methods:{getWidth:function(){return this.data.width||It},getHeight:function(){return this.data.height||Mt},getFill:function(){return this.data.fill||"#FFFFFF"},getOutline:function(){return this.data.outline||"#000000"},getOutlineWidth(){return this.data.outlineWidth||2}}};import{h as ei,inject as ti,watch as oi}from"vue";import{ELEMENT_DIV as ri,ShapePalette as ni}from"@visuallyjs/browser-ui";var He={name:H,props:{surfaceId:{type:String},dragSize:Object,iconSize:Object,fill:String,outline:String,showAllMessage:String,selectAfterDrop:Boolean,paletteStrokeWidth:Number,dataGenerator:Function,initialSet:String,mode:String,allowClickToAdd:Boolean,onVertexAdded:Function,showLabels:Boolean,inspector:{type:Boolean,default:!0},preparedShapes:Array},setup(e){return{service:ti(s)}},data:()=>({hasMounted:!1}),mounted(){let e=t=>{this.hasMounted||(this.hasMounted=!0,new ni(t,{container:this.$refs.container,shapeLibrary:t.getShapeLibrary(),dragSize:this.dragSize,iconSize:this.iconSize,fill:this.fill,outline:this.outline,showAllMessage:this.showAllMessage,selectAfterDrop:this.selectAfterDrop,paletteStrokeWidth:this.paletteStrokeWidth,dataGenerator:this.dataGenerator,initialSet:this.initialSet,mode:this.mode,allowClickToAdd:this.allowClickToAdd,onVertexAdded:this.onVertexAdded,showLabels:this.showLabels,inspector:this.inspector,preparedShapes:this.preparedShapes}))};this.service.surface.value==null?oi(this.service.surface,e):e(this.service.surface.value)},render:function(){return ei(ri,{ref:"container"})}};import{provide as Do,readonly as ii,inject as si,h as ai,watch as li}from"vue";import{ELEMENT_DIV as pi,Inspector as ci,log as ui}from"@visuallyjs/browser-ui";var U=Symbol.for("VueInspectorGetter"),di=Symbol.for("VueInspectorSetter");function mi(){let e=[],t=null;function o(p){try{p(t)}catch(r){ui("WARN: inspector listener threw an exception",r)}}let n={listen:p=>{t!=null?o(p):e.push(p)}},i={inspector:p=>{t=p,e.forEach(o)}};return Do(di,i),Do(U,ii(n)),i}var $e={name:me,props:{autoCommit:{type:Boolean,default:!0},multipleSelections:{type:Boolean,default:!0},filter:Function,renderEmptyContainer:Function,refresh:Function,className:String,showCloseButton:Boolean,afterUpdate:Function,modelValue:Object},emits:["update:modelValue"],setup(e,t){let o=mi();return{service:si(s),inspectorProvider:o,inspector:null,emit:t.emit}},mounted(){let e=t=>{if(this.inspector==null){let o=new ci({container:this.$refs.root,ui:t,renderEmptyContainer:()=>(this.emit("update:modelValue",null),this.renderEmptyContainer?this.renderEmptyContainer():""),refresh:(n,i)=>{this.emit("update:modelValue",n),this.refresh&&this.refresh(n),setTimeout(i)},autoCommit:this.autoCommit,multipleSelections:this.multipleSelections,filter:this.filter,showCloseButton:this.showCloseButton,afterUpdate:()=>this.afterUpdate?this.afterUpdate(t):null});this.inspectorProvider.inspector(o)}};this.service.surface.value==null?li(this.service.surface,e):e(this.service.surface.value)},render(){return ai(pi,{ref:"root"},this.$slots.hasOwnProperty("default")?this.$slots.default():[])}};import{h as hi,inject as fi}from"vue";import{EdgeTypePicker as Pi,ELEMENT_DIV as Oi,log as Ei}from"@visuallyjs/browser-ui";var We={name:$,props:{propertyName:String},setup(){return{inspectorProvider:fi(U)}},mounted(){this.inspectorProvider?this.inspectorProvider.listen(e=>{let t=new Pi(e.$ui,this.$refs.container,e.$ui.$getEdgePropertyMappings(),e.getValue(this.propertyName),(o,n)=>{e.setValue(this.propertyName,n,null)});t.render(this.propertyName,e.m),e.onChange(()=>{t.select(this.propertyName,e.getValue(this.propertyName))})}):Ei("WARN: EdgeTypePicker not instantiated inside an InspectorComponent. Cannot mount.")},render:function(){return hi(Oi,{ref:"container"})}};import{h as Ce,inject as Ci}from"vue";import{CLASS_COLOR_PICKER as Io,CLASS_COLOR_PICKER_SWATCH as Mo,CLASS_COLOR_PICKER_SWATCHES as wo,EVENT_CONTEXT_UPDATE as _i,ELEMENT_DIV as ze,INSPECTOR_CONTEXT_RECENT_COLORS as _e}from"@visuallyjs/browser-ui";var bo={render(){let e=this.swatches.map(t=>Ce(ze,{title:t,class:Mo,style:`background-color:${t}`,"data-color":t,onClick:()=>this.selectSwatch(t)}));return Ce(ze,{class:`${Io}`},[Ce("input",{type:"color","vjs-att":this.propertyName,ref:"colorInput"}),Ce(ze,{class:wo},e)])},props:{propertyName:String,maxColors:{type:Number,default:10}},data:()=>({CLASS_COLOR_PICKER:Io,CLASS_COLOR_PICKER_SWATCHES:wo,CLASS_COLOR_PICKER_SWATCH:Mo,colorInput:null,swatches:[]}),mounted(){let e=Ci(U);e&&e.listen(t=>{this.inspector=t,this.swatches=t.ensureContext(_e,()=>[]),this.colorInput=this.$refs.colorInput,this.colorInput.addEventListener("change",this.colorPicked),t.bind(_i,o=>{o.key===_e&&(this.swatches=o.value.slice())}),t.bind("change",this.setCurrentColor),this.setCurrentColor()})},methods:{addColor:function(e){let t=this.inspector.ensureContext(_e,()=>[]);if(e=e.toUpperCase(),!(t.find(n=>n.toUpperCase()===e)!=null)){let n=this.maxColors||10,i=t.slice();i.unshift(e),i.length>n&&(i.length=n),this.inspector.updateContext(_e,i)}},colorPicked:function(){let e=this.colorInput.value;this.inspector.setValue(this.propertyName,e,null),this.addColor(e)},selectSwatch:function(e){this.inspector.setValue(this.propertyName,e,null),this.colorInput.value=e},setCurrentColor:function(){let e=this.inspector.getValue(this.propertyName);e!=null&&(this.colorInput.value=e,this.addColor(e))}}};import{h as ye,inject as yi,nextTick as gi,Teleport as Ti,watch as Si}from"vue";import{ELEMENT_DIV as Ke,uuid as vi}from"@visuallyjs/browser-ui";var Je={props:{placement:{type:String,default:"floating"},position:{type:Object},constraints:{type:Object}},data:()=>({hasMounted:!1,surface:null}),setup(e){return{service:yi(s)}},mounted(){let e=t=>{if(!this.hasMounted){this.surface=t,this.hasMounted=!0;let o=this.position||{x:0,y:0};gi().then(()=>{this.placement==="floating"?t.floatElement(this.$refs.root,o):t.fixElement(this.$refs.fixedEl,o,this.constraints)})}};this.service.surface.value==null?Si(this.service.surface,e):e(this.service.surface.value)},render(){return ye(Ke,{ref:"root"},this.hasMounted?this.placement==="floating"?ye(Ke,{},this.$slots.hasOwnProperty("default")?this.$slots.default():[]):ye(Ti,{to:this.surface.vertexLayer,key:vi()},ye(Ke,{ref:"fixedEl"},this.$slots.hasOwnProperty("default")?this.$slots.default():[])):[])}};import{provide as Ri}from"vue";var Ye={setup(){Ri(s,new C("DiagramProvider"))},render(){return this.$slots.hasOwnProperty("default")?this.$slots.default():[]}};import{h as Ni,inject as Ai,watch as xi}from"vue";import{DiagramPalette as Di,ELEMENT_DIV as Ii,log as Mi}from"@visuallyjs/browser-ui";var Xe={name:oe,props:{fill:String,outline:String,dragSize:Object,inspector:{type:Boolean,default:!0},iconSize:Object,showLabels:Boolean,paletteStrokeWidth:Number,showAllMessage:String,onCellAdded:Function,mode:String,allowClickToAdd:Boolean,autoExitDrawMode:Boolean,selectAfterAdd:{type:Boolean,default:!0},className:String,diagram:{type:Object},onVertexAdded:Function,preparedShapes:Array},setup(e){return{service:Ai(s)}},data:()=>({hasMounted:!1}),mounted(){if(this.service==null&&this.diagram==null)Mi("Cannot mount DiagramPalette - no service found and Diagram not passed in as a prop");else{let e=t=>{this.hasMounted||(this.hasMounted=!0,new Di(this.$refs.container,t,{fill:this.fill,outline:this.outline,dragSize:this.dragSize,inspector:this.inspector,iconSize:this.iconSize,showLabels:this.showLabels,paletteStrokeWidth:this.paletteStrokeWidth,showAllMessage:this.showAllMessage,onCellAdded:this.onCellAdded,mode:this.mode,allowClickToAdd:this.allowClickToAdd,autoExitDrawMode:this.autoExitDrawMode,selectAfterAdd:this.selectAfterAdd,onVertexAdded:this.onVertexAdded,preparedShapes:this.preparedShapes}))};this.diagram?e(this.diagram):this.service.diagram.value!=null?e(this.service.diagram.value):xi(this.service.diagram,e)}},render:function(){return Ni(Ii,{ref:"container"})}};import{BLOCK as wi,ELEMENT_DIV as bi,NONE as Vi,PopupHandler as Bi,CLASS_SURFACE_POPUP as Li,ABSOLUTE as Ui}from"@visuallyjs/browser-ui";import{h as Gi,inject as ki,onMounted as ji,ref as ge,watch as Fi}from"vue";var Ze={name:"SurfacePopup",props:{selector:String,anchor:{type:String,default:"bottom"}},setup(e){let t=ki(s),o=ge(null),n=ge("block"),i=ge(null),p=ge(null),r=a=>{p.value=new Bi(e.selector,i.value,a,l=>{o.value=l,l==null?n.value=Vi:(n.value=wi,requestAnimationFrame(()=>p.value.$positionPopup()))},e.anchor)};return ji(()=>{t.surface.value==null?Fi(t.surface,r):r(t.surface.value)}),{service:t,current:o,display:n,rootRef:i,handler:p}},render(){var e;return Gi(bi,{ref:"rootRef",display:this.display,position:Ui,class:Li},this.$slots.hasOwnProperty("default")?this.$slots.default({vertex:this.current,model:(e=this.service.surface.value)==null?void 0:e.model,ui:this.service.surface.value,hide:()=>{var t;return(t=this.handler)==null?void 0:t.$hide()}}):[])}};import{inject as Te,watch as N}from"vue";import{BackgroundPlugin as Se,GeneratedGridBackground as Hi,SimpleBackground as $i,TiledBackground as Wi}from"@visuallyjs/browser-ui";var Vo={setup(){return{service:Te(s)}},name:W,props:{options:{type:Object}},mounted:function(){let e=t=>{t.addPlugin({type:Se.type,options:this.options})};this.service.surface.value!=null&&e(this.service.surface.value),this.service.paper.value!=null?e(this.service.paper.value):(N(this.service.surface,e),N(this.service.paper,e))},render:function(e){return[]}},Bo={setup(){return{service:Te(s)}},name:z,props:{grid:{type:Object},showBorder:{type:Boolean},minWidth:{type:Number},minHeight:{type:Number},showTickMarks:{type:Boolean},tickMarksPerCell:{type:Number},maxWidth:{type:Number},maxHeight:{type:Number},autoShrink:{type:Boolean},gridType:{type:String},dotRadius:{type:Number},tickDotRadius:{type:Number},visible:{type:Boolean}},mounted:function(){let e=t=>{t.addPlugin({type:Se.type,options:{type:Hi.type,grid:this.grid,showBorder:this.showBorder,minWidth:this.minWidth,minHeight:this.minHeight,showTickMarks:this.showTickMarks,tickMarksPerCell:this.tickMarksPerCell,maxWidth:this.maxWidth,maxHeight:this.maxHeight,autoShrink:this.autoShrink,gridType:this.gridType,dotRadius:this.dotRadius,tickDotRadius:this.tickDotRadius,visible:this.visible}})};this.service.surface.value!=null&&e(this.service.surface.value),this.service.paper.value!=null?e(this.service.paper.value):(N(this.service.surface,e),N(this.service.paper,e))},render:function(e){return[]}},Lo={setup(){return{service:Te(s)}},name:K,props:{url:{type:String}},mounted:function(){let e=t=>{t.addPlugin({type:Se.type,options:{type:$i.type,url:this.url}})};this.service.surface.value!=null&&e(this.service.surface.value),this.service.paper.value!=null?e(this.service.paper.value):(N(this.service.surface,e),N(this.service.paper,e))},render:function(e){return[]}},Uo={setup(){return{service:Te(s)}},name:J,props:{url:{type:String},urlGenerator:{type:Function},tileSize:{type:Object},width:{type:Number},height:{type:Number},maxZoom:{type:Number},tiling:{type:String},panDebounceTimeout:{type:Number},zoomDebounceTimeout:{type:Number}},mounted:function(){let e=t=>{t.addPlugin({type:Se.type,options:{type:Wi.type,url:this.url,urlGenerator:this.urlGenerator,tileSize:this.tileSize,width:this.width,height:this.height,tiling:this.tiling,panDebounceTimeout:this.panDebounceTimeout,zoomDebounceTimeout:this.zoomDebounceTimeout}})};this.service.surface.value!=null&&e(this.service.surface.value),this.service.paper.value!=null?e(this.service.paper.value):(N(this.service.surface,e),N(this.service.paper,e))},render:function(e){return[]}};var id={install:function(e,t){e.component(Lt,Ge),e.component(Ut,ke),e.component(Gt,Ye),e.component(X,oo),e.component(Z,io),e.component(te,go),e.component(Y,yo),e.component(Q,Oo),e.component(ee,Co),e.component(W,Vo),e.component(z,Bo),e.component(K,Lo),e.component(J,Uo),e.component(q,Ao),e.component(oe,Xe),e.component(ne,De),e.component(re,xe),e.component(ie,Ie),e.component(se,we),e.component(ae,be),e.component(le,Me),e.component(de,Ue),e.component(ue,Le),e.component(ce,Be),e.component(pe,Ve),e.component(F,Fe),e.component(H,He),e.component($,We),e.component(wt,bo),e.component(me,$e),e.component(jt,Je),e.component(kt,Ze),e.provide(s,new C("root"))}};import{shallowRef as qe,ref as zi}from"vue";import{EVENT_ZOOM as Qe}from"@visuallyjs/browser-ui";import{inject as Ki}from"vue";function md(){let e=Ki(s),t=qe(null),o=qe(null),n=qe(null),i=zi(1);return e==null||e.getSurface(p=>{o.value=p,o.value.bind(Qe,r=>{i.value=r.zoom})}),e==null||e.getDiagram(p=>{t.value=p,t.value.$ui.bind(Qe,r=>{i.value=r.zoom})}),e==null||e.getPaper(p=>{n.value=p,n.value.bind(Qe,r=>{i.value=r.zoom})}),i}import{inject as Ji,onUnmounted as Yi}from"vue";import{EVENT_DATA_UPDATED as Go,EVENT_GRAPH_CLEARED as ko}from"@visuallyjs/browser-ui";function Td(e){let t=Ji(s);if(t){let o=null,n=()=>{o&&e(o)},i=()=>{o&&(o.unbind(Go,n),o.unbind(ko,n))},p=r=>{i(),o=r,o&&(o.bind(Go,n),o.bind(ko,n),n())};t.getModel(r=>{p(r)}),Yi(()=>{i()})}}import{shallowRef as Xi}from"vue";import{inject as Zi}from"vue";function xd(){let e=Zi(s),t=Xi(null);return e==null||e.getSurface(o=>{t.value=o}),t}import{shallowRef as qi}from"vue";import{inject as Qi}from"vue";function Vd(){let e=Qi(s),t=qi(null);return e==null||e.getDiagram(o=>{t.value=o}),t}import{shallowRef as es}from"vue";import{inject as ts}from"vue";function jd(){let e=ts(s),t=es(null);return e==null||e.getPaper(o=>{t.value=o}),t}export{Ee as $initialiseVueOverlays,be as AreaChartComponent,Vo as BackgroundComponent,De as BarChartComponent,Xt as BaseOverlayComponent,O as BrowserUIVueModel,Be as BubbleChartComponent,Vt as CLASS_VUE_GROUP,bt as CLASS_VUE_NODE,Bt as CLASS_VUE_OVERLAY,ae as COMPONENT_AREA_CHART,W as COMPONENT_BACKGROUND,ne as COMPONENT_BAR_CHART,ce as COMPONENT_BUBBLE_CHART,re as COMPONENT_COLUMN_CHART,Q as COMPONENT_CONTROLS,te as COMPONENT_DIAGRAM,oe as COMPONENT_DIAGRAM_PALETTE,Gt as COMPONENT_DIAGRAM_PROVIDER,ee as COMPONENT_EXPORT_CONTROLS,ue as COMPONENT_GAUGE_CHART,z as COMPONENT_GRID_BACKGROUND,K as COMPONENT_IMAGE_BACKGROUND,me as COMPONENT_INSPECTOR,se as COMPONENT_LINE_CHART,Y as COMPONENT_MINIVIEW,q as COMPONENT_PALETTE,Z as COMPONENT_PAPER,Ut as COMPONENT_PAPER_PROVIDER,le as COMPONENT_PIE_CHART,de as COMPONENT_SANKEY_CHART,pe as COMPONENT_SCATTER_CHART,X as COMPONENT_SURFACE,kt as COMPONENT_SURFACE_POPUP,Lt as COMPONENT_SURFACE_PROVIDER,J as COMPONENT_TILED_IMAGE_BACKGROUND,ie as COMPONENT_XY_CHART,bo as ColorPickerComponent,xe as ColumnChartComponent,Oo as ControlsComponent,Mt as DEFAULT_SHAPE_HEIGHT,It as DEFAULT_SHAPE_WIDTH,rt as DEFAULT_VUE_PAPER_ID,ot as DEFAULT_VUE_SURFACE_ID,Je as DecoratorComponent,go as DiagramComponent,Xe as DiagramPaletteComponent,Ye as DiagramProvider,ur as EVENT_VERTEX_UPDATED,cr as EVENT_VERTICES_RENDERED,We as EdgeTypePickerComponent,Co as ExportControlsComponent,Le as GaugeChartComponent,Bo as GridBackgroundComponent,Lo as ImageBackgroundComponent,$e as InspectorComponent,U as InspectorGetterSymbol,di as InspectorSetterSymbol,we as LineChartComponent,yo as MiniviewComponent,at as PROP_ACTIVE_TRACKING,At as PROP_ALLOW_CLICK_TO_ADD,yt as PROP_ALLOW_DROP_ON_CANVAS,_t as PROP_ALLOW_DROP_ON_EDGE,gt as PROP_ALLOW_DROP_ON_GROUP,Tt as PROP_ALLOW_DROP_ON_NODE,Dt as PROP_CANVAS_DROP_FILTER,I as PROP_CLASS_NAME,Nt as PROP_CLICK_TO_ADD_ONLY,it as PROP_CLICK_TO_CENTER,mt as PROP_CSV_DATA,S as PROP_DATA,Ot as PROP_DATA_GENERATOR,ve as PROP_DATA_SOURCE_FILTER,xt as PROP_DRAG_SIZE,Ct as PROP_GROUP_IDENTIFIER,bs as PROP_ID,St as PROP_IGNORE_DROP_ON_NODE,ut as PROP_INTERACTIVE,ht as PROP_JSON_DATA,ct as PROP_MODE,k as PROP_MODEL,M as PROP_MODEL_OPTIONS,vt as PROP_ON_VERTEX_ADDED,b as PROP_OPTIONS,pt as PROP_PAPER_ID,dt as PROP_PIVOT,G as PROP_RENDER_OPTIONS,Pt as PROP_SELECTOR,Rt as PROP_SELECT_AFTER_ADD,st as PROP_SHOW_LASSO,T as PROP_SURFACE_ID,lt as PROP_TRACK_SELECTION,nt as PROP_TYPE_FUNCTION,Et as PROP_TYPE_GENERATOR,v as PROP_URL,ft as PROP_USE_MODEL,j as PROP_VIEW_OPTIONS,Ao as PaletteComponent,io as PaperComponent,ke as PaperProvider,Me as PieChartComponent,Ue as SankeyChartComponent,Ve as ScatterChartComponent,Fe as ShapeComponent,He as ShapePaletteComponent,oo as SurfaceComponent,Ze as SurfacePopup,Ge as SurfaceProvider,wt as TAG_COLOR_PICKER,jt as TAG_DECORATOR,$ as TAG_EDGE_TYPE_PICKER,F as TAG_SHAPE,H as TAG_SHAPE_PALETTE,Uo as TiledImageBackgroundComponent,id as VisuallyJsPlugin,C as VisuallyJsService,s as VisuallyJsServiceKey,Ie as XYChartComponent,qt as addPaper,Zt as addSurface,Oa as bindToDevLifecycle,mi as doProvideInspector,as as newInstance,Vd as useDiagram,jd as usePaper,xd as useSurface,Td as useVisuallyJsUpdate,md as useZoom,Ht as vertexHasRendered,$t as vertexHasUpdated,dr as vertexWillRender};
|
package/vue-wrapper.d.ts
CHANGED
|
@@ -1,9 +1,18 @@
|
|
|
1
1
|
import { BrowserUI, ObjectData, Vertex, BrowserUIModel, Edge, Overlay, BrowserElement } from "@visuallyjs/browser-ui";
|
|
2
2
|
/**
|
|
3
|
-
* The props that are passed in to a component used to render a node/group
|
|
3
|
+
* The props that are passed in to a component used to render a node/group by a surface or paper component.
|
|
4
4
|
* @group Props
|
|
5
5
|
*/
|
|
6
|
-
export interface VueWrapperProps<T extends Vertex
|
|
6
|
+
export interface VueWrapperProps<T extends Vertex = Vertex> {
|
|
7
|
+
/**
|
|
8
|
+
* The vertex (node or group) that is being rendered
|
|
9
|
+
*/
|
|
10
|
+
vertex: T;
|
|
11
|
+
/**
|
|
12
|
+
* The vertex (node or group) that is being rendered
|
|
13
|
+
* @deprecated Will be removed in 1.3.0
|
|
14
|
+
*/
|
|
15
|
+
obj: T;
|
|
7
16
|
/**
|
|
8
17
|
* Data that backs the object. Reactive.
|
|
9
18
|
*/
|
|
@@ -17,28 +26,51 @@ export interface VueWrapperProps<T extends Vertex | Edge = Vertex | Edge> {
|
|
|
17
26
|
*/
|
|
18
27
|
ui: BrowserUI;
|
|
19
28
|
/**
|
|
20
|
-
* The
|
|
21
|
-
* @deprecated use `vertex` or `edge` from 1.2.0 onwards
|
|
29
|
+
* The underlying DOM element
|
|
22
30
|
*/
|
|
23
|
-
|
|
31
|
+
el: BrowserElement;
|
|
24
32
|
/**
|
|
25
|
-
*
|
|
33
|
+
* Definition for this node/group type
|
|
26
34
|
*/
|
|
27
|
-
|
|
35
|
+
def: any;
|
|
36
|
+
eventInfo: any;
|
|
37
|
+
}
|
|
38
|
+
/**
|
|
39
|
+
* The props that are passed in to a component used to render an overlay by a surface or paper component.
|
|
40
|
+
* @group Props
|
|
41
|
+
*/
|
|
42
|
+
export interface VueEdgeWrapperProps {
|
|
28
43
|
/**
|
|
29
|
-
* The edge that is being rendered.
|
|
44
|
+
* The edge that is being rendered.
|
|
30
45
|
*/
|
|
31
|
-
edge
|
|
46
|
+
edge: Edge;
|
|
32
47
|
/**
|
|
33
|
-
* The
|
|
48
|
+
* The edge that is being rendered
|
|
49
|
+
* @deprecated Will be removed in 1.3.0
|
|
34
50
|
*/
|
|
35
|
-
|
|
51
|
+
obj: Edge;
|
|
52
|
+
/**
|
|
53
|
+
* The overlay that is being rendered.
|
|
54
|
+
*/
|
|
55
|
+
overlay: Overlay<BrowserElement>;
|
|
56
|
+
/**
|
|
57
|
+
* Data that backs the object. Reactive.
|
|
58
|
+
*/
|
|
59
|
+
data: ObjectData;
|
|
60
|
+
/**
|
|
61
|
+
* Underlying model.
|
|
62
|
+
*/
|
|
63
|
+
model: BrowserUIModel;
|
|
64
|
+
/**
|
|
65
|
+
* Underlying UI
|
|
66
|
+
*/
|
|
67
|
+
ui: BrowserUI;
|
|
36
68
|
/**
|
|
37
69
|
* The underlying DOM element
|
|
38
70
|
*/
|
|
39
|
-
el:
|
|
71
|
+
el: BrowserElement;
|
|
40
72
|
/**
|
|
41
|
-
* Definition for this node/group
|
|
73
|
+
* Definition for this node/group type
|
|
42
74
|
*/
|
|
43
75
|
def: any;
|
|
44
76
|
eventInfo: any;
|