@visuallyjs/browser-ui-vue 1.2.0 → 1.2.2

package/background-component.d.ts

@@ -0,0 +1,255 @@
+import { PropType } from "vue";
+import { BackgroundOptions, Grid, GridType, Size, TilingStrategy } from "@visuallyjs/browser-ui";
+/**
+ * Props for the background component.
+ * @group Props
+ */
+export type BackgroundComponentProps = {
+    options: BackgroundOptions;
+};
+/**
+ * Props for the grid background component.
+ * @group Props
+ */
+export interface GridBackgroundComponentProps {
+    /**
+     * 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.
+     */
+    grid?: Grid;
+    /**
+     * Whether or not to show a thick border around the entire background. Defaults to false.
+     */
+    showBorder?: boolean;
+    /**
+     * 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.
+     */
+    minWidth?: number;
+    /**
+     * 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.
+     */
+    minHeight?: number;
+    /**
+     * Defaults to false. If true, the grid will also draw tick marks between the grid lines.
+     */
+    showTickMarks?: boolean;
+    /**
+     * Number of tick marks to draw per cell. Defaults to 2.
+     */
+    tickMarksPerCell?: number;
+    /**
+     * 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.
+     */
+    maxWidth?: number;
+    /**
+     * 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.
+     */
+    maxHeight?: number;
+    /**
+     * 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.
+     */
+    autoShrink?: boolean;
+    /**
+     * Type of grid - lines or dots. Defaults to lines.
+     */
+    gridType?: GridType;
+    /**
+     * The radius for dots representing grid positions (when gridType id GridTypes.dotted). Defaults to 2.
+     */
+    dotRadius?: number;
+    /**
+     * The radius for dots representing grid tick marks (when gridType id GridTypes.dotted). Defaults to 1.
+     */
+    tickDotRadius?: number;
+    /**
+     * Whether or not the background is initially visible. Defaults to true.
+     */
+    visible?: boolean;
+}
+/**
+ * Props for the image background component.
+ * @group Props
+ */
+export interface ImageBackgroundComponentProps {
+    /**
+     * URL of the image to load
+     */
+    url: string;
+}
+/**
+ * Props for the tiled image background component
+ * @group Props
+ */
+export interface TiledImageBackgroundComponentProps {
+    /**
+     * 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:
+     *
+     * http://foo.com/{z}/{x}/{y}
+     * https://bar.com?zoom={z}&x={x}&y={y}
+     *
+     * etc
+     */
+    url?: string;
+    /**
+     * For tiled backgrounds, an optional function you can supply to generate the URL for a given tile. See `url` for
+     * an explanation of the default syntax for urls when using a tiled background.
+     * @param z zoom level
+     * @param x x coordinate of tile
+     * @param y y coordinate of tile
+     */
+    urlGenerator?: (z: number, x: number, y: number) => string;
+    /**
+     * For tiled backgrounds, provides the width and height of tiles. Every tile is assumed to have these dimensions,
+     * even if the tile has whitespace in it. Required.
+     */
+    tileSize: Size;
+    /**
+     * Required. Indicates the width of the full image.
+     */
+    width: number;
+    /**
+     * Required. Indicates the height of the full image.
+     */
+    height: number;
+    /**
+     * Required. Indicates the maximum zoom level. Zoom starts at 0 - fully zoomed out - and
+     * increases in integer values from there. Each successive zoom level is twice the zoom of the previous level,
+     * meaning two times as many tiles in each direction.
+     */
+    maxZoom: number;
+    /**
+     * Default is TilingStrategies.logarithmic. See notes for `TilingStrategies` enum.
+     */
+    tiling?: TilingStrategy;
+    /**
+     * How long to wait after a pan before reloading tiles.
+     */
+    panDebounceTimeout?: number;
+    /**
+     * How long to wait after a zoom before reloading tiles.
+     */
+    zoomDebounceTimeout?: number;
+}
+/**
+ * This is a headless component that adds a background to the surface/paper it resides in.
+ */
+export declare const BackgroundComponent: {
+    setup(): {
+        service: unknown;
+    };
+    name: string;
+    props: {
+        options: {
+            type: PropType<BackgroundOptions>;
+        };
+    };
+    mounted: () => void;
+    render: (_ctx: any) => any;
+};
+/**
+ * This is a headless component that adds a grid background to the surface/paper it resides in.
+ */
+export declare const GridBackgroundComponent: {
+    setup(): {
+        service: unknown;
+    };
+    name: string;
+    props: {
+        grid: {
+            type: PropType<Grid>;
+        };
+        showBorder: {
+            type: BooleanConstructor;
+        };
+        minWidth: {
+            type: NumberConstructor;
+        };
+        minHeight: {
+            type: NumberConstructor;
+        };
+        showTickMarks: {
+            type: BooleanConstructor;
+        };
+        tickMarksPerCell: {
+            type: NumberConstructor;
+        };
+        maxWidth: {
+            type: NumberConstructor;
+        };
+        maxHeight: {
+            type: NumberConstructor;
+        };
+        autoShrink: {
+            type: BooleanConstructor;
+        };
+        gridType: {
+            type: PropType<GridType>;
+        };
+        dotRadius: {
+            type: NumberConstructor;
+        };
+        tickDotRadius: {
+            type: NumberConstructor;
+        };
+        visible: {
+            type: BooleanConstructor;
+        };
+    };
+    mounted: () => void;
+    render: (_ctx: any) => any;
+};
+/**
+ * This is a headless component that adds an Image background to the surface/paper it resides in.
+ */
+export declare const ImageBackgroundComponent: {
+    setup(): {
+        service: unknown;
+    };
+    name: string;
+    props: {
+        url: {
+            type: StringConstructor;
+        };
+    };
+    mounted: () => void;
+    render: (_ctx: any) => any;
+};
+/**
+ * This is a headless component that adds a tiled background to the surface/paper it resides in.
+ */
+export declare const TiledImageBackgroundComponent: {
+    setup(): {
+        service: unknown;
+    };
+    name: string;
+    props: {
+        url: {
+            type: StringConstructor;
+        };
+        urlGenerator: {
+            type: FunctionConstructor;
+        };
+        tileSize: {
+            type: PropType<Size>;
+        };
+        width: {
+            type: NumberConstructor;
+        };
+        height: {
+            type: NumberConstructor;
+        };
+        maxZoom: {
+            type: NumberConstructor;
+        };
+        tiling: {
+            type: StringConstructor;
+        };
+        panDebounceTimeout: {
+            type: NumberConstructor;
+        };
+        zoomDebounceTimeout: {
+            type: NumberConstructor;
+        };
+    };
+    mounted: () => void;
+    render: (_ctx: any) => any;
+};

package/base.group.component.d.ts

@@ -0,0 +1,42 @@
+/**
+ * This mixin is applied to a component that renders a group, providing a few group related methods.
+ */
+export declare const BaseGroupComponent: {
+    methods: {
+        /**
+         * Gets the underlying group from the model.
+         */
+        getGroup: () => any;
+        /**
+         * Removes the group this component represents from the model.
+         * @param removeChildNodes
+         */
+        removeGroup: (removeChildNodes?: boolean) => void;
+        /**
+         * Updates the underlying group in the model.
+         * @param data
+         */
+        updateGroup: (data: any) => void;
+    };
+    mixins: {
+        props: {
+            data: ObjectConstructor;
+            model: typeof import("./browser-ui-vue").BrowserUIVueModel;
+            obj: typeof import("@visuallyjs/browser-ui").Vertex;
+            vertex: typeof import("@visuallyjs/browser-ui").Vertex;
+            ui: typeof import("@visuallyjs/browser-ui").BrowserUI;
+            el: {
+                new (): Element;
+                prototype: Element;
+            };
+            def: ObjectConstructor;
+            eventInfo: ObjectConstructor;
+        };
+        mounted(): void;
+        methods: {
+            getModel: () => any;
+            removeVertex: () => void;
+        };
+        updated(): void;
+    }[];
+};

package/base.node.component.d.ts

@@ -0,0 +1,31 @@
+/**
+ * This mixin is applied to a component that renders a node, providing a few Node related methods.
+ */
+export declare const BaseNodeComponent: {
+    mixins: {
+        props: {
+            data: ObjectConstructor;
+            model: typeof import("./browser-ui-vue").BrowserUIVueModel;
+            obj: typeof import("@visuallyjs/browser-ui").Vertex;
+            vertex: typeof import("@visuallyjs/browser-ui").Vertex;
+            ui: typeof import("@visuallyjs/browser-ui").BrowserUI;
+            el: {
+                new (): Element;
+                prototype: Element;
+            };
+            def: ObjectConstructor;
+            eventInfo: ObjectConstructor;
+        };
+        mounted(): void;
+        methods: {
+            getModel: () => any;
+            removeVertex: () => void;
+        };
+        updated(): void;
+    }[];
+    methods: {
+        getNode: () => any;
+        removeNode: () => void;
+        updateNode: (data: any) => void;
+    };
+};

package/base.vertex.component.d.ts

@@ -0,0 +1,33 @@
+import { BrowserUI, Vertex } from "@visuallyjs/browser-ui";
+import { BrowserUIVueModel } from "./browser-ui-vue";
+/**
+ * Base class for node/group components.
+ */
+export declare const BaseVertexComponent: {
+    props: {
+        data: ObjectConstructor;
+        model: typeof BrowserUIVueModel;
+        obj: typeof Vertex;
+        vertex: typeof Vertex;
+        ui: typeof BrowserUI;
+        el: {
+            new (): Element;
+            prototype: Element;
+        };
+        def: ObjectConstructor;
+        eventInfo: ObjectConstructor;
+    };
+    mounted(): void;
+    methods: {
+        /**
+         * get the underlying Visually Js instance.
+         */
+        getModel: () => any;
+        /**
+         * Removed the vertex this component represents.
+         *
+         */
+        removeVertex: () => void;
+    };
+    updated(): void;
+};

package/definitions.d.ts

@@ -1,11 +1,13 @@
-import { BrowserElement, CanvasDropFilter, DataGeneratorFunction, GroupIdentifierFunction, ObjectData, OnVertexAddedCallback, Size, SurfaceOptions, TypeGeneratorFunction, EdgeMapping, NodeMapping, GroupMapping, PortMapping, ModelOptions, Base, Surface, PointXY, SvgExportUIOptions, ImageExportUIOptions, DiagramCell, PaletteMode, Diagram, PreparedShape } from "@visuallyjs/browser-ui";
+import { BrowserElement, CanvasDropFilter, DataGeneratorFunction, GroupIdentifierFunction, ObjectData, OnVertexAddedCallback, Size, SurfaceOptions, TypeGeneratorFunction, EdgeMapping, NodeMapping, GroupMapping, PortMapping, ModelOptions, Base, Surface, PointXY, SvgExportUIOptions, ImageExportUIOptions, DiagramCell, PaletteMode, Diagram, PreparedShape, OverlaySpec } from "@visuallyjs/browser-ui";
 export declare const DEFAULT_VUE_SURFACE_ID = "surfaceId";
+export declare const DEFAULT_VUE_PAPER_ID = "paperId";
 export declare const PROP_TYPE_FUNCTION = "typeFunction";
 export declare const PROP_CLICK_TO_CENTER = "clickToCenter";
 export declare const PROP_SHOW_LASSO = "showLasso";
 export declare const PROP_ACTIVE_TRACKING = "activeTracking";
 export declare const PROP_TRACK_SELECTION = "trackSelection";
 export declare const PROP_SURFACE_ID = "surfaceId";
+export declare const PROP_PAPER_ID = "paperId";
 export declare const PROP_CLASS_NAME = "className";
 export declare const PROP_DATA = "data";
 export declare const PROP_MODE = "mode";
@@ -53,6 +55,11 @@ export declare const CLASS_VUE_NODE = "vjs-vue-node";
  * @group CSS Classes
  */
 export declare const CLASS_VUE_GROUP = "vjs-vue-group";
+/**
+ * CSS class set on the root element rendered for some overlay
+ * @group CSS Classes
+ */
+export declare const CLASS_VUE_OVERLAY = "vjs-vue-overlay";
 /**
  * Render options for a SurfaceComponent.
  */
@@ -95,7 +102,21 @@ export interface VuePortMapping extends Omit<PortMapping<BrowserElement>, "templ
 /**
  * Mapping definition for edges.
  */
-export interface VueEdgeMapping extends EdgeMapping {
+export interface VueEdgeMapping extends Omit<EdgeMapping, "overlays"> {
+    overlays?: Array<OverlaySpec | VueOverlaySpec>;
+}
+/**
+ * Definition for an overlay when using Vue components.
+ */
+export interface VueOverlaySpec {
+    /**
+     * Component used to render this overlay.
+     */
+    component: any;
+    /**
+     * Props to pass to the component.
+     */
+    props?: Record<string, any>;
 }
 /**
  * Options for the view in the surface component. Maps node/group/port/edge types to Components and behaviour.
@@ -118,6 +139,22 @@ export interface ViewOptions {
      */
     edges?: Record<string, VueEdgeMapping>;
 }
+/**
+ * Background component tag
+ */
+export declare const COMPONENT_BACKGROUND = "BackgroundComponent";
+/**
+ * Grid background component tag
+ */
+export declare const COMPONENT_GRID_BACKGROUND = "GridBackgroundComponent";
+/**
+ * Image background component tag
+ */
+export declare const COMPONENT_IMAGE_BACKGROUND = "ImageBackgroundComponent";
+/**
+ * tiled image background component tag
+ */
+export declare const COMPONENT_TILED_IMAGE_BACKGROUND = "TiledImageBackgroundComponent";
 /**
  * Miniview component tag
  */
@@ -130,6 +167,14 @@ export declare const COMPONENT_SURFACE = "SurfaceComponent";
  * Tag for the SurfaceProvider.
  */
 export declare const COMPONENT_SURFACE_PROVIDER = "SurfaceProvider";
+/**
+ * Paper component tag
+ */
+export declare const COMPONENT_PAPER = "PaperComponent";
+/**
+ * Tag for the PaperProvider.
+ */
+export declare const COMPONENT_PAPER_PROVIDER = "PaperProvider";
 /**
  * Tag for the DiagramProvider.
  */
@@ -198,6 +243,10 @@ export declare const COMPONENT_SANKEY_CHART = "SankeyChartComponent";
  * inspector component tag
  */
 export declare const COMPONENT_INSPECTOR = "InspectorComponent";
+/**
+ * surface popup component tag
+ */
+export declare const COMPONENT_SURFACE_POPUP = "SurfacePopup";
 /**
  * HTML tag for a decorator
  */
@@ -265,6 +314,37 @@ export interface SurfaceComponentProps {
      */
     data?: any;
 }
+/**
+ * Supported props for the {@link PaperComponent}.
+ * @group Props
+ */
+export interface PaperComponentProps {
+    /**
+     * ID of the paper to attach to. This is optional; Visually JS will use the default paper ID if you do not
+     * provide this. For apps where there's only one paper there is no need to provide this.
+     */
+    paperId?: string;
+    /**
+     * Parameters to configure the underlying paper.
+     */
+    renderOptions?: RenderOptions;
+    /**
+     * Mapping of model object types to components and behaviour
+     */
+    viewOptions?: ViewOptions;
+    /**
+     * Options for the underlying model.
+     */
+    modelOptions?: ModelOptions;
+    /**
+     * Optional url for a dataset to load.
+     */
+    url?: string;
+    /**
+     * Optional dataset to load.
+     */
+    data?: any;
+}
 /**
  * Props for the `ShapeComponent`.
  * @group Props

package/index.d.ts

@@ -13,6 +13,7 @@ export * from "./inspector-component";
 export * from "./definitions";
 export * from "./controls-component";
 export * from "./export-controls-component";
+export * from "./background-component";
 export * from "./palette-component";
 export * from './color-picker-component';
 export * from "./miniview-component";
@@ -22,7 +23,9 @@ export * from "./diagram-provider";
 export * from "./diagram-palette-component";
 export * from "./chart";
 export * from "./surface-component";
+export * from "./paper-component";
 export * from "./surface-provider";
+export * from "./paper-provider";
 export * from "./vue-wrapper";
 export * from './decorator-component';
 export * from './visuallyjs-service';
@@ -31,3 +34,4 @@ export * from './use-visuallyjs-update';
 export * from './use-surface';
 export * from './use-diagram';
 export * from './use-paper';
+export * from './surface-popup';

package/package.json

@@ -1 +1 @@
-{"name":"@visuallyjs/browser-ui-vue","version":"1.2.0","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.0"},"homepage":"https://visuallyjs.com/vue","bugs":"https://github.com/visuallyjs/visuallyjs/issues"}
+{"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/paper-component.d.ts

@@ -0,0 +1,46 @@
+import { PropType } from "vue";
+import { RenderOptions, ViewOptions, PaperComponentProps } from "./definitions";
+import { ObjectData, ModelOptions, BrowserUIModel } from "@visuallyjs/browser-ui";
+import { VertexPlaceholder, OverlayPlaceholder } from "./util";
+/**
+ * Provides a static canvas onto which nodes, groups and edges can be drawn, with support for various plugins.
+ * @group Components
+ */
+export declare const PaperComponent: {
+    setup(props: PaperComponentProps): {
+        service: unknown;
+        paperId: string;
+    };
+    name: string;
+    props: {
+        data: {
+            type: PropType<ObjectData>;
+        };
+        renderOptions: {
+            type: PropType<RenderOptions>;
+        };
+        modelOptions: {
+            type: PropType<ModelOptions>;
+        };
+        viewOptions: {
+            type: PropType<ViewOptions>;
+        };
+        model: {
+            type: PropType<BrowserUIModel>;
+        };
+        url: {
+            type: StringConstructor;
+        };
+        paperId: {
+            type: StringConstructor;
+        };
+    };
+    data: () => {
+        vertices: Array<VertexPlaceholder>;
+        overlays: Array<OverlayPlaceholder>;
+    };
+    mounted(): void;
+    render: () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+        [key: string]: any;
+    }>;
+};

package/paper-provider.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Paper provider component. "Headless" in that it doesnt write out any elements of its own, it just writes out any child elements.
+ */
+declare const PaperProvider: {
+    setup(): void;
+    render(): any;
+};
+export { PaperProvider };

package/surface-component.d.ts

@@ -1,7 +1,7 @@
 import { PropType } from "vue";
 import { RenderOptions, ViewOptions, SurfaceComponentProps } from "./definitions";
 import { ObjectData, ModelOptions, BrowserUIModel } from "@visuallyjs/browser-ui";
-import { VertexPlaceholder } from "./util";
+import { VertexPlaceholder, OverlayPlaceholder } from "./util";
 /**
  * Provides a pannable and zoomable canvas onto which nodes, groups and edges can be drawn, with support for various plugins.
  * @group Components
@@ -37,6 +37,7 @@ export declare const SurfaceComponent: {
     };
     data: () => {
         vertices: Array<VertexPlaceholder>;
+        overlays: Array<OverlayPlaceholder>;
     };
     mounted(): void;
     render: () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {

package/surface-popup.d.ts

@@ -0,0 +1,5 @@
+/**
+ * A component that provides an automatic popup mechanism for when users click on vertices in the surface.
+ */
+declare const SurfacePopup: any;
+export { SurfacePopup };

package/util.d.ts

@@ -1,100 +1,14 @@
-import { BrowserElement, BrowserUI, Surface, Vertex, ViewSpec } from "@visuallyjs/browser-ui";
+import { BrowserElement, BrowserUI, Surface, Vertex, ViewSpec, Overlay, Edge, BrowserUIModel, Paper } from "@visuallyjs/browser-ui";
 import { BrowserUIVueModel } from "./browser-ui-vue";
-import { RenderOptions } from "./definitions";
+import { RenderOptions, ViewOptions } from "./definitions";
 /** @internal */
 export declare const EVENT_VERTICES_RENDERED = "vertices:rendered";
 /** @internal */
 export declare const EVENT_VERTEX_UPDATED = "vertex:updated";
+export declare function vertexHasRendered<N extends Vertex>(surfaceId: string, v: N): void;
+export declare function vertexHasUpdated<N extends Vertex>(surfaceId: string, v: N): void;
+export declare function vertexWillRender<N extends Vertex>(surfaceId: string, v: N): void;
 export declare function bindToDevLifecycle(surfaceId: string, event: string, handler: (a: any, e?: any) => any): void;
-/**
- * Provides a mixin you should use to create a component that renders a node. See documentation for details.
- *
- */
-export declare const BaseNodeComponent: {
-    mixins: {
-        props: {
-            data: ObjectConstructor;
-            model: typeof BrowserUIVueModel;
-            obj: typeof Vertex;
-            vertex: typeof Vertex;
-            ui: typeof BrowserUI;
-            el: {
-                new (): Element;
-                prototype: Element;
-            };
-            def: ObjectConstructor;
-            eventInfo: ObjectConstructor;
-        };
-        mounted(): void;
-        methods: {
-            /**
-             * get the underlying Visually Js instance.
-             */
-            getModel: () => any;
-            /**
-             * Removed the vertex this component represents.
-             *
-             */
-            removeVertex: () => void;
-        };
-        updated(): void;
-    }[];
-    methods: {
-        getNode: () => any;
-        removeNode: () => void;
-        updateNode: (data: any) => void;
-    };
-};
-/**
- * Provides a mixin you should use to create a component that renders a group. See documentation for details.
- *
- */
-export declare const BaseGroupComponent: {
-    methods: {
-        /**
-         * Gets the underlying group from the model.
-         */
-        getGroup: () => any;
-        /**
-         * Removes the group this component represents from the model.
-         * @param removeChildNodes
-         */
-        removeGroup: (removeChildNodes?: boolean) => void;
-        /**
-         * Updates the underlying group in the model.
-         * @param data
-         */
-        updateGroup: (data: any) => void;
-    };
-    mixins: {
-        props: {
-            data: ObjectConstructor;
-            model: typeof BrowserUIVueModel;
-            obj: typeof Vertex;
-            vertex: typeof Vertex;
-            ui: typeof BrowserUI;
-            el: {
-                new (): Element;
-                prototype: Element;
-            };
-            def: ObjectConstructor;
-            eventInfo: ObjectConstructor;
-        };
-        mounted(): void;
-        methods: {
-            /**
-             * get the underlying Visually Js instance.
-             */
-            getModel: () => any;
-            /**
-             * Removed the vertex this component represents.
-             *
-             */
-            removeVertex: () => void;
-        };
-        updated(): void;
-    }[];
-};
 /**
  * Placeholder for vertices prior we're rendering. Not used by API users.
  * @internal
@@ -104,7 +18,40 @@ export interface VertexPlaceholder {
     el: BrowserElement;
     _key: string;
     props: Record<string, any>;
+    vertex: Vertex;
+}
+/**
+ * Placeholder for overlays prior we're rendering. Not used by API users.
+ * @internal
+ */
+export interface OverlayPlaceholder {
+    component: any;
+    el: BrowserElement;
+    _key: string;
+    props: Record<string, any>;
 }
+/**
+ * Mixin for overlay components.
+ * @internal
+ */
+export declare const BaseOverlayComponent: {
+    props: {
+        data: ObjectConstructor;
+        model: typeof BrowserUIVueModel;
+        obj: typeof Edge;
+        edge: typeof Edge;
+        overlay: typeof Overlay;
+        ui: typeof BrowserUI;
+        el: {
+            new (): Element;
+            prototype: Element;
+        };
+        def: ObjectConstructor;
+        eventInfo: ObjectConstructor;
+    };
+    mounted(): void;
+    updated(): void;
+};
 /**
  * @internal
  * @param model
@@ -115,3 +62,20 @@ export interface VertexPlaceholder {
  * @param view
  */
 export declare function addSurface(model: BrowserUIVueModel, surfaceId: string, container: any, vertices: Array<VertexPlaceholder>, renderParams?: RenderOptions, view?: ViewSpec<BrowserElement>): Surface;
+/**
+ * @internal
+ * @param model
+ * @param paperId
+ * @param container
+ * @param vertices
+ * @param renderParams
+ * @param view
+ */
+export declare function addPaper(model: BrowserUIVueModel, paperId: string, container: any, vertices: Array<VertexPlaceholder>, renderParams?: RenderOptions, view?: ViewSpec<BrowserElement>): Paper;
+/**
+ * @internal
+ * @param viewOptions
+ * @param model
+ * @param overlays
+ */
+export declare function $initialiseVueOverlays(viewOptions: ViewOptions, getUI: () => BrowserUI, getModel: () => BrowserUIModel, overlays: Array<OverlayPlaceholder>): void;

package/visuallyjs.browser-ui-vue.cjs.js

@@ -1 +1 @@
-var ve=Object.defineProperty,No=Object.defineProperties,vo=Object.getOwnPropertyDescriptor,xo=Object.getOwnPropertyDescriptors,Do=Object.getOwnPropertyNames,Qt=Object.getOwnPropertySymbols;var to=Object.prototype.hasOwnProperty,Io=Object.prototype.propertyIsEnumerable;var eo=(e,t,o)=>t in e?ve(e,t,{enumerable:!0,configurable:!0,writable:!0,value:o}):e[t]=o,te=(e,t)=>{for(var o in t||(t={}))to.call(t,o)&&eo(e,o,t[o]);if(Qt)for(var o of Qt(t))Io.call(t,o)&&eo(e,o,t[o]);return e},oe=(e,t)=>No(e,xo(t));var Mo=(e,t)=>{for(var o in t)ve(e,o,{get:t[o],enumerable:!0})},wo=(e,t,o,n)=>{if(t&&typeof t=="object"||typeof t=="function")for(let s of Do(t))!to.call(e,s)&&s!==o&&ve(e,s,{get:()=>t[s],enumerable:!(n=vo(t,s))||n.enumerable});return e};var bo=e=>wo(ve({},"__esModule",{value:!0}),e);var er={};Mo(er,{AreaChartComponent:()=>Ge,BarChartComponent:()=>Ve,BaseGroupComponent:()=>ao,BaseNodeComponent:()=>io,BrowserUIVueModel:()=>N,BubbleChartComponent:()=>Fe,CLASS_VUE_GROUP:()=>Bt,CLASS_VUE_NODE:()=>Lt,COMPONENT_AREA_CHART:()=>Ee,COMPONENT_BAR_CHART:()=>fe,COMPONENT_BUBBLE_CHART:()=>_e,COMPONENT_COLUMN_CHART:()=>he,COMPONENT_CONTROLS:()=>ce,COMPONENT_DIAGRAM:()=>de,COMPONENT_DIAGRAM_PALETTE:()=>me,COMPONENT_DIAGRAM_PROVIDER:()=>Gt,COMPONENT_EXPORT_CONTROLS:()=>ue,COMPONENT_GAUGE_CHART:()=>Te,COMPONENT_INSPECTOR:()=>ye,COMPONENT_LINE_CHART:()=>Pe,COMPONENT_MINIVIEW:()=>ae,COMPONENT_PALETTE:()=>pe,COMPONENT_PIE_CHART:()=>Ce,COMPONENT_SANKEY_CHART:()=>ge,COMPONENT_SCATTER_CHART:()=>Se,COMPONENT_SURFACE:()=>le,COMPONENT_SURFACE_PROVIDER:()=>Ut,COMPONENT_XY_CHART:()=>Oe,ColorPickerComponent:()=>qt,ColumnChartComponent:()=>be,ControlsComponent:()=>Jt,DEFAULT_SHAPE_HEIGHT:()=>bt,DEFAULT_SHAPE_WIDTH:()=>wt,DEFAULT_VUE_SURFACE_ID:()=>rt,DecoratorComponent:()=>Ze,DiagramComponent:()=>Yt,DiagramPaletteComponent:()=>Qe,DiagramProvider:()=>qe,EVENT_VERTEX_UPDATED:()=>so,EVENT_VERTICES_RENDERED:()=>no,EdgeTypePickerComponent:()=>Ye,ExportControlsComponent:()=>Kt,GaugeChartComponent:()=>ke,InspectorComponent:()=>Ke,InspectorGetterSymbol:()=>K,InspectorSetterSymbol:()=>Oo,LineChartComponent:()=>Ue,MiniviewComponent:()=>Xt,PROP_ACTIVE_TRACKING:()=>at,PROP_ALLOW_CLICK_TO_ADD:()=>Dt,PROP_ALLOW_DROP_ON_CANVAS:()=>gt,PROP_ALLOW_DROP_ON_EDGE:()=>Tt,PROP_ALLOW_DROP_ON_GROUP:()=>yt,PROP_ALLOW_DROP_ON_NODE:()=>Rt,PROP_CANVAS_DROP_FILTER:()=>Mt,PROP_CLASS_NAME:()=>w,PROP_CLICK_TO_ADD_ONLY:()=>xt,PROP_CLICK_TO_CENTER:()=>st,PROP_CSV_DATA:()=>ft,PROP_DATA:()=>b,PROP_DATA_GENERATOR:()=>Ct,PROP_DATA_SOURCE_FILTER:()=>De,PROP_DRAG_SIZE:()=>It,PROP_GROUP_IDENTIFIER:()=>_t,PROP_ID:()=>Lo,PROP_IGNORE_DROP_ON_NODE:()=>At,PROP_INTERACTIVE:()=>mt,PROP_JSON_DATA:()=>Ot,PROP_MODE:()=>pt,PROP_MODEL:()=>ut,PROP_MODEL_OPTIONS:()=>re,PROP_ON_VERTEX_ADDED:()=>Nt,PROP_OPTIONS:()=>U,PROP_PIVOT:()=>ht,PROP_RENDER_OPTIONS:()=>ct,PROP_SELECTOR:()=>Et,PROP_SELECT_AFTER_ADD:()=>vt,PROP_SHOW_LASSO:()=>it,PROP_SURFACE_ID:()=>y,PROP_TRACK_SELECTION:()=>lt,PROP_TYPE_FUNCTION:()=>nt,PROP_TYPE_GENERATOR:()=>St,PROP_URL:()=>V,PROP_USE_MODEL:()=>Pt,PROP_VIEW_OPTIONS:()=>dt,PaletteComponent:()=>Zt,PieChartComponent:()=>Be,SankeyChartComponent:()=>He,ScatterChartComponent:()=>je,ShapeComponent:()=>We,ShapePaletteComponent:()=>Je,SurfaceComponent:()=>Wt,SurfaceProvider:()=>$e,TAG_COLOR_PICKER:()=>Vt,TAG_DECORATOR:()=>jt,TAG_EDGE_TYPE_PICKER:()=>ie,TAG_SHAPE:()=>ne,TAG_SHAPE_PALETTE:()=>se,VisuallyJsPlugin:()=>Ko,VisuallyJsService:()=>R,VisuallyJsServiceKey:()=>i,XYChartComponent:()=>Le,addSurface:()=>$t,bindToDevLifecycle:()=>jo,doProvideInspector:()=>Po,newInstance:()=>Vo,useDiagram:()=>qo,usePaper:()=>Qo,useSurface:()=>Zo,useVisuallyJsUpdate:()=>Yo,useZoom:()=>Xo});module.exports=bo(er);var xe=require("@visuallyjs/browser-ui"),N=class extends xe.BrowserUIModel{render(t,o){return(0,xe.log)("render called directly on BrowserUiVue class: should not happen. Surface component should use internal render."),null}};function Vo(e){return e=e||{},new N(e)}var rt="surfaceId",nt="typeFunction",st="clickToCenter",it="showLasso",at="activeTracking",lt="trackSelection",y="surfaceId",w="className",b="data",pt="mode",U="options",ct="renderOptions",re="modelOptions",ut="model",dt="viewOptions",V="url",mt="interactive",ht="pivot",De="dataSourceFilter",ft="csvData",Ot="jsonData",Pt="useModel",Lo="id",Et="selector",Ct="dataGenerator",St="typeGenerator",_t="groupIdentifier",Tt="allowDropOnEdge",gt="allowDropOnCanvas",yt="allowDropOnGroup",Rt="allowDropOnNode",At="ignoreDropOnNode",Nt="onVertexAdded",vt="selectAfterAdd",xt="clickToAddOnly",Dt="allowClickToAdd",It="dragSize",Mt="canvasDropFilter",ne="Shape",se="ShapePalette",wt=120,bt=90,ie="EdgeTypePickerComponent",Vt="ColorPickerComponent",Lt="vjs-vue-node",Bt="vjs-vue-group",ae="MiniviewComponent",le="SurfaceComponent",Ut="SurfaceProvider",Gt="DiagramProvider",pe="PaletteComponent",ce="ControlsComponent",ue="ExportControlsComponent",de="DiagramComponent",me="DiagramPaletteComponent",he="ColumnChartComponent",fe="BarChartComponent",Oe="XYChartComponent",Pe="LineChartComponent",Ee="AreaChartComponent",Ce="PieChartComponent",Se="ScatterChartComponent",_e="BubbleChartComponent",Te="GaugeChartComponent",ge="SankeyChartComponent",ye="InspectorComponent",jt="Decorator";var G=require("vue"),c=require("@visuallyjs/browser-ui"),Ft=class{constructor(){this.unrenderedVertices=new Map;this.eventManager=new c.OptimisticEventGenerator}vertexWillRender(t){this.unrenderedVertices.set(t.id,t)}vertexHasRendered(t){this.unrenderedVertices.delete(t.id),this.unrenderedVertices.size===0&&this.eventManager.fire(no)}vertexHasUpdated(t){this.eventManager.fire(so,t)}},no="vertices:rendered",so="vertex:updated",kt=new Map;function Ie(e){return kt.has(e)||kt.set(e,new Ft),kt.get(e)}function Bo(e,t){Ie(e).vertexHasRendered(t)}function Uo(e,t){Ie(e).vertexHasUpdated(t)}function Go(e,t){Ie(e).vertexWillRender(t)}function jo(e,t,o){Ie(e).eventManager.bind(t,o)}var oo={props:{data:Object,model:N,obj:c.Vertex,vertex:c.Vertex,ui:c.BrowserUI,el:Element,def:Object,eventInfo:Object},mounted(){let e=this,t=(0,c.isGroup)(e.obj)?Bt:Lt;e.el.firstElementChild&&(0,c.addClass)(e.el.firstElementChild,t),e.ui.$vertexRendered(e.obj,e.el,e.def,e.eventInfo),Bo(e.ui.id,e.obj)},methods:{getModel:function(){return this.model},removeVertex:function(){this.model.remove(this.obj)}},updated(){this.ui.$revalidateElement(this.el),Uo(this.ui.id,this.obj)}},io={mixins:[oo],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)}}},ao={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:[oo]},Ht=(e,t)=>{t.parentNode&&t.parentNode.removeChild(t)},ro=(e,t,o,n,s,a,l,h,E)=>{let O=l.component!=null,D=(0,c.isGroup)(h),I=[];O||I.push(D?c.CLASS_DEFAULT_GROUP:c.CLASS_DEFAULT_NODE);let T=O?l.component:{render(g){return g.data.label||""}};if(T){let g=document.createElement(c.ELEMENT_DIV);(0,c.updateClasses)(g,I),T.mixins==null&&(T.mixins=[]);let M=D?ao:io;T.mixins.find(Ne=>Ne===M)||T.mixins.push(M),Go(a.id,h);let Ae={data:o,model:(0,G.markRaw)(n),ui:(0,G.markRaw)(a),obj:h,vertex:h,el:g,def:(0,G.markRaw)(l),eventInfo:E==null?null:(0,G.markRaw)(E)};if(l.inject)for(let Ne in l.inject){let ot=l.inject[Ne],Ao=typeof ot=="function"?ot(h,n):ot;Ae[Ne]=Ao}e.push({component:(0,G.markRaw)(T),el:g,o:h.getFullId(),props:Ae})}};function $t(e,t,o,n,s,a){let l={reactive:!0,asynchronous:!0,usesWrapperElement:!1,update:(E,O,D,I)=>{},render:(E,O,D,I,T,g,M,Re)=>ro(n,E,O,D,I,T,g,M,Re),cleanupVertex:Ht,cleanupPort:Ht,rerender:(E,O,D,I,T,g,M,Re,Ae)=>{Ht(M.id,Ae),ro(n,E,O,D,I,T,g,M,Re)}},h=(0,c.extend)(s||{},{view:a||{},id:t});return(0,c.renderSurface)(e,o,l,h)}var L=require("@visuallyjs/browser-ui"),j=require("vue"),i=Symbol.for("visuallyjs-service"),R=class{constructor(t){this.context=t;this.s=[];this.i=[];this.a=[];this.l=[];this.surface=(0,j.shallowRef)(null);this.model=(0,j.shallowRef)(null);this.paper=(0,j.shallowRef)(null);this.diagram=(0,j.shallowRef)(null);this.ui=(0,j.shallowRef)(null)}getSurface(t){this.e(this.i,t,this.p)}getDiagram(t){this.e(this.a,t,this.c)}getPaper(t){this.e(this.l,t,this.u)}getModel(t){this.e(this.s,t,this.r)}getModelDirect(){return this.r}e(t,o,n){if(n!=null)try{o(n)}catch(s){(0,L.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.t(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 L.Surface?this.setSurface(t.$ui):t.$ui instanceof L.Paper&&this.setPaper(t.$ui),this.t(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.t(this.l,t)}n(t){this.r=t,this.t(this.s,t)}t(t,o){t.forEach(n=>{try{n(o)}catch(s){(0,L.log)(`WARN: could not flush all queue entries ${s}`)}})}};var v=require("vue"),f=require("@visuallyjs/browser-ui"),Wt={setup(e){return{service:(0,v.inject)(i),surfaceId:e.surfaceId||rt}},name:le,props:{[b]:{type:Object},[ct]:{type:Object},[re]:{type:Object},[dt]:{type:Object},[ut]:{type:Object},[V]:{type:String},[y]:{type:String}},data:function(){return{vertices:[]}},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}),this.surface=$t(t,this.surfaceId,o,this.vertices,(0,f.clone)(this.renderOptions||{}),(0,f.clone)(this.viewOptions||{})),this.service.setSurface(this.surface);let n=(a,l)=>{let h=()=>{let O={};return l.originalData||l.updates?O=Object.assign(l.originalData,l.updates):l.newData&&Object.assign(O,l.newData),O},E=this.vertices.find(O=>O.o===a);E!=null&&(E.props.data=h())},s=a=>{let l=this.vertices.findIndex(h=>h.o===a);l!==-1&&this.vertices.splice(l,1)};t.bind(f.EVENT_NODE_UPDATED,a=>{n(a.vertex.getFullId(),a)}),t.bind(f.EVENT_GROUP_UPDATED,a=>{n(a.vertex.getFullId(),a)}),t.bind(f.EVENT_NODE_REMOVED,a=>{s(a.node.id)}),t.bind(f.EVENT_GROUP_REMOVED,a=>{s(a.group.id)}),this.surface.bind(f.EVENT_RENDER_END,()=>setTimeout(()=>this.surface.$redrawEveryConnection()))},render:function(){return(0,v.h)(f.ELEMENT_DIV,{ref:"root",class:"vjs-vue-surface",style:{width:"100%",height:"100%"}},this.vertices.map(e=>(0,v.h)(v.Teleport,{to:e.el,key:e.o},[(0,v.h)(e.component,e.props)])).concat(this.$slots.hasOwnProperty("default")?this.$slots.default():[]))}};var p=require("vue"),r=require("@visuallyjs/browser-ui"),Fo="Clear dataset?",zt="vjs-selected-mode",lo="can-undo",po="can-redo",ko="data-undo",Ho="data-redo",co="data-mode",$o="data-reset",Wo="data-clear",zo="data-zoom-in",Jo="data-zoom-out",uo="vjs-controls-has-selection",Jt={setup(e){return{service:(0,p.inject)(i)}},name:ce,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:Fo},onMaybeClear:{type:Function},className:{type:String,default:""}},methods:{panMode:function(){var e;(e=this.service.surface.value)==null||e.setMode(r.SURFACE_MODE_PAN)},selectMode:function(){var e;(e=this.service.surface.value)==null||e.setMode(r.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,r.supportsPathEditing)(e)&&e.stopEditingPath())},updateSelectionState:function(){let e=this.service.surface.value;e&&(e.model.getSelection().isEmpty()?this.$refs.root.removeAttribute(uo):this.$refs.root.setAttribute(uo,"true"))}},data:function(){return{ready:!1,hasLasso:!1}},render(){if(this.ready){let e=[];return this.showPan&&(e.push((0,p.h)("i",{class:`vjs-pan-mode ${zt}`,[co]:r.SURFACE_MODE_PAN,onClick:()=>this.panMode(),title:"Pan mode"},[(0,p.h)("svg",{viewBox:r.PAN_VIEW_BOX,stroke:"currentColor",fill:"none"},[(0,p.h)("path",{d:r.PAN_PATH})])])),e.push((0,p.h)("i",{class:"vjs-select-mode",[co]:r.SURFACE_MODE_SELECT,onClick:()=>this.selectMode(),title:"Select mode"},[(0,p.h)("svg",{viewBox:r.LASSO_VIEW_BOX,stroke:"currentColor",fill:"currentColor"},[(0,p.h)("path",{d:r.LASSO_PATH})])]))),this.undoRedo&&(e.push((0,p.h)("i",{class:"vjs-undo",[ko]:!0,title:"Undo last action",onClick:()=>this.undo()})),e.push((0,p.h)("i",{class:"vjs-redo",[Ho]:!0,title:"Redo last action",onClick:()=>this.redo()}))),this.zoomToExtents&&e.push((0,p.h)("i",{class:"vjs-zoom-to-fit",[$o]:"true",onClick:()=>this.zoomToFit(),title:"Zoom to Fit"},[(0,p.h)("svg",{viewBox:r.ZOOM_TO_FIT_VIEW_BOX,stroke:"currentColor",fill:"currentColor"},[(0,p.h)("path",{d:r.ZOOM_TO_FIT_PATH})])])),this.zoomButtons&&(e.push((0,p.h)("i",{class:"vjs-zoom-in",[zo]:"true",onClick:()=>this.zoomIn(),title:"Zoom In"},[(0,p.h)("svg",{viewBox:r.ZOOM_IN_OUT_VIEW_BOX,stroke:"currentColor",fill:"currentColor"},[(0,p.h)("path",{d:r.ZOOM_IN_PATH})])])),e.push((0,p.h)("i",{class:"vjs-zoom-out",[Jo]:"true",onClick:()=>this.zoomOut(),title:"Zoom Out"},[(0,p.h)("svg",{viewBox:r.ZOOM_IN_OUT_VIEW_BOX,stroke:"currentColor",fill:"currentColor"},[(0,p.h)("path",{d:r.ZOOM_OUT_PATH})])]))),e.push((0,p.h)("i",{class:r.CLASS_CONTROLS_RESET_SELECTION,[r.ATTRIBUTE_RESET_SELECTION]:"true",onClick:()=>{this.resetSelection()}},[(0,p.h)("svg",{viewBox:r.RESET_SELECTION_VIEW_BOX,stroke:"currentColor",fill:"currentColor"},[(0,p.h)("path",{d:r.RESET_SELECTION_PATH})])])),this.clear&&e.push((0,p.h)("i",{class:"vjs-clear-dataset",[Wo]:"true",onClick:()=>{this.doClear()}},[(0,p.h)("svg",{viewBox:r.CLEAR_VIEW_BOX,stroke:"currentColor",fill:"currentColor"},[(0,p.h)("path",{d:r.CLEAR_PATH})])])),(0,p.h)(r.ELEMENT_DIV,{class:`vjs-controls ${this.className}`,ref:"root",[lo]:!1,[po]:!1,[r.ATTRIBUTE_CONTROLS_ORIENTATION]:this.orientation},e)}else return(0,p.h)(r.ELEMENT_DIV,{ref:"root"})},mounted(){let e=t=>{let o=t.getPlugin(r.LassoPlugin.type);this.showPan=o!=null,t.bind(r.EVENT_SURFACE_MODE_CHANGED,n=>{t.removeClass(t.$getSelector(this.$refs.root,"[data-mode]"),zt),t.addClass(t.$getSelector(this.$refs.root,"[data-mode='"+n+"']"),zt)}),t.model.bind(r.EVENT_UNDOREDO_UPDATE,n=>{this.$refs.root.setAttribute(lo,n.undoCount>0?r.TRUE:r.FALSE),this.$refs.root.setAttribute(po,n.redoCount>0?r.TRUE:r.FALSE)}),t.model.bind(r.EVENT_SELECT,()=>this.updateSelectionState()),t.model.bind(r.EVENT_DESELECT,()=>this.updateSelectionState()),t.model.bind(r.EVENT_SELECTION_CLEARED,()=>this.updateSelectionState()),this.ready=!0};this.service.surface.value==null?(0,p.watch)(this.service.surface,e):e(this.service.surface.value)}};var C=require("vue"),m=require("@visuallyjs/browser-ui"),Kt={name:ue,setup(e){return{service:(0,C.inject)(i)}},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 m.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 m.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 m.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,C.h)("i",{},[(0,C.h)("a",{href:"#","data-type":m.TYPE_SVG,onClick:()=>this.exportSVG()},"SVG")])),o&&s.push((0,C.h)("i",{},[(0,C.h)("a",{href:"#","data-type":m.TYPE_PNG,onClick:()=>this.exportPNG()},"PNG")])),n&&s.push((0,C.h)("i",{},[(0,C.h)("a",{href:"#","data-type":m.TYPE_JPG,onClick:()=>this.exportJPG()},"JPG")])),e&&s.unshift((0,C.h)("span",{},[this.label])),(0,C.h)(m.ELEMENT_DIV,{class:`${m.CLASS_CONTROLS} ${m.CLASS_EXPORT_CONTROLS}`},s)}};var F=require("vue"),Me=require("@visuallyjs/browser-ui"),Xt={setup(e){return{service:(0,F.inject)(i)}},name:ae,props:{[y]:{type:String},[w]:{type:String,default:""},[at]:{type:Boolean,default:!0},[st]:{type:Boolean,default:!0},[it]:{type:Boolean,default:!0},[lt]:{type:Boolean,default:!0},[nt]:{type:Function}},mounted:function(){let e=t=>{t.addPlugin({type:Me.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,F.watch)(this.service.surface,e)},render:function(e){return(0,F.h)(Me.ELEMENT_DIV,{ref:"root",class:e.className})}};var k=require("vue"),we=require("@visuallyjs/browser-ui"),Yt={setup(e){return{service:(0,k.inject)(i)}},name:de,props:{[b]:{type:Object},[V]:{type:String},[re]:{type:Object},[U]:{type:Object}},mounted(){let e=this.$refs.root;this.diagram=(0,k.markRaw)((0,we.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,k.h)(we.ELEMENT_DIV,{ref:"root",class:"vjs-vue-surface",style:{width:"100%",height:"100%"}},this.$slots.hasOwnProperty("default")?this.$slots.default():[])}};var x=require("vue"),u=require("@visuallyjs/browser-ui"),mo={[w]:{type:String},[b]:{type:Object},[V]:{type:String},[Pt]:{type:Boolean,default:!1}},ho={setup(){return{service:(0,x.inject)(i)}},render:function(){return(0,x.h)(u.ELEMENT_DIV,{class:`${this.className}`,ref:"root"})}};function A(e,t,o=!0){let n=oe(te({},mo),{[U]:{type:Object}}),s={};return o&&(n[De]={type:Function},s[De]=function(a){this.chart.setDataSourceFilter(a)}),oe(te({},ho),{name:e,props:n,watch:s,data:()=>({hasMounted:!1}),mounted(){let a=this.$refs.root,l=o?Object.assign({dataSourceFilter:this.dataSourceFilter},this.options):this.options;this.data&&(l.data=this.data),this.url&&(l.url=this.url);let h=()=>{this.hasMounted=!0,this.chart=new t(a,l)};this.useModel?this.service.model.value!=null?(l.dataSource=this.service.model.value,h()):(0,x.watch)(this.service.model,E=>{this.hasMounted||(l.dataSource=E,h())}):h()}})}var be=A(he,u.ColumnChart),Ve=A(fe,u.BarChart),Le=A(Oe,u.CategoryValueChart,!1),Be=A(Ce,u.PieChart),Ue=A(Pe,u.LineChart),Ge=A(Ee,u.AreaChart),je=A(Se,u.ScatterChart),Fe=A(_e,u.BubbleChart),ke=A(Te,u.GaugeChart,!1),He=oe(te({},ho),{name:ge,props:oe(te({},mo),{[ft]:{type:String},[Ot]:{type:Object},[mt]:{type:Boolean},[ht]:{type:String},[U]:{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 u.SankeyChart(e,t)};if(this.useModel){let n=s=>{this.hasMounted||(t.dataSource=s,o())};this.service.model.value==null?(0,x.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,x.h)(u.ELEMENT_DIV,{class:`${this.className}`,ref:"root"})}});var H=require("vue"),$=require("@visuallyjs/browser-ui"),Zt={setup(e){return{service:(0,H.inject)(i)}},name:pe,props:{[y]:{type:String},[Et]:{type:String},[Ct]:{type:Function},[St]:{type:Function},[_t]:{type:Function},[Tt]:{type:Boolean,default:!1},[gt]:{type:Boolean,default:!0},[yt]:{type:Boolean,default:!0},[Rt]:{type:Boolean,default:!1},[At]:{type:Boolean,default:!1},[It]:Object,[Nt]:Function,[Mt]:Function,[w]:String,[pt]:String,[vt]:{type:Boolean,default:!1},[Dt]:{type:Boolean,default:!1},[xt]:{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,$.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 $.Palette(t,o)};this.service.surface.value==null?(0,H.watch)(this.service.surface,e):e(this.service.surface.value)},render:function(){return(0,H.h)($.ELEMENT_DIV,{ref:"root",class:this.className||""},this.$slots.hasOwnProperty("default")?this.$slots.default():[])}};var fo=require("vue"),$e={setup(){(0,fo.provide)(i,new R("SurfaceProvider"))},render(){return this.$slots.hasOwnProperty("default")?this.$slots.default():[]}};var W=require("vue"),S=require("@visuallyjs/browser-ui"),We={name:ne,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:S.DEFAULT_LABEL_FILL_RATIO},labelColor:{type:String,default:"#000000"},font:{type:Object}},setup(){return{service:(0,W.inject)(i)}},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,S.convertToMultilineText)(s,this.data[this.labelProperty]||"",this.getWidth()*(this.labelFillRatio||S.DEFAULT_LABEL_FILL_RATIO))}};this.service.ui.value==null?(0,W.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,S.convertToMultilineText)(n,this.data[this.labelProperty]||"",this.getWidth()*(this.labelFillRatio||S.DEFAULT_LABEL_FILL_RATIO))}}},render:function(){return(0,W.h)(S.ELEMENT_SVG,{ref:"container",preserveAspectRatio:"none",fill:this.getFill(),stroke:this.getOutline(),"stroke-width":this.getOutlineWidth(),viewBox:"0 0 "+this.getWidth()+" "+this.getHeight(),class:S.CLASS_SHAPE})},methods:{getWidth:function(){return this.data.width||wt},getHeight:function(){return this.data.height||bt},getFill:function(){return this.data.fill||"#FFFFFF"},getOutline:function(){return this.data.outline||"#000000"},getOutlineWidth(){return this.data.outlineWidth||2}}};var z=require("vue"),ze=require("@visuallyjs/browser-ui"),Je={name:se,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,z.inject)(i)}},data:()=>({hasMounted:!1}),mounted(){let e=t=>{this.hasMounted||(this.hasMounted=!0,new ze.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,z.watch)(this.service.surface,e):e(this.service.surface.value)},render:function(){return(0,z.h)(ze.ELEMENT_DIV,{ref:"container"})}};var _=require("vue"),J=require("@visuallyjs/browser-ui"),K=Symbol.for("VueInspectorGetter"),Oo=Symbol.for("VueInspectorSetter");function Po(){let e=[],t=null;function o(a){try{a(t)}catch(l){(0,J.log)("WARN: inspector listener threw an exception",l)}}let n={listen:a=>{t!=null?o(a):e.push(a)}},s={inspector:a=>{t=a,e.forEach(o)}};return(0,_.provide)(Oo,s),(0,_.provide)(K,(0,_.readonly)(n)),s}var Ke={name:ye,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=Po();return{service:(0,_.inject)(i),inspectorProvider:o,inspector:null,emit:t.emit}},mounted(){let e=t=>{if(this.inspector==null){let o=new J.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,_.watch)(this.service.surface,e):e(this.service.surface.value)},render(){return(0,_.h)(J.ELEMENT_DIV,{ref:"root"},this.$slots.hasOwnProperty("default")?this.$slots.default():[])}};var Xe=require("vue"),X=require("@visuallyjs/browser-ui"),Ye={name:ie,props:{propertyName:String},setup(){return{inspectorProvider:(0,Xe.inject)(K)}},mounted(){this.inspectorProvider?this.inspectorProvider.listen(e=>{let t=new X.EdgeTypePicker(e.$ui,this.$refs.container,e.$ui.$getEdgePropertyMappings(),e.getValue(this.propertyName),(o,n)=>{e.setValue(this.propertyName,n)});t.render(this.propertyName,e.m),e.onChange(()=>{t.select(this.propertyName,e.getValue(this.propertyName))})}):(0,X.log)("WARN: EdgeTypePicker not instantiated inside an InspectorComponent. Cannot mount.")},render:function(){return(0,Xe.h)(X.ELEMENT_DIV,{ref:"container"})}};var B=require("vue"),d=require("@visuallyjs/browser-ui"),qt={render(){let e=this.swatches.map(t=>(0,B.h)(d.ELEMENT_DIV,{title:t,class:d.CLASS_COLOR_PICKER_SWATCH,style:`background-color:${t}`,"data-color":t,onClick:()=>this.selectSwatch(t)}));return(0,B.h)(d.ELEMENT_DIV,{class:`${d.CLASS_COLOR_PICKER}`},[(0,B.h)("input",{type:"color","vjs-att":this.propertyName,ref:"colorInput"}),(0,B.h)(d.ELEMENT_DIV,{class:d.CLASS_COLOR_PICKER_SWATCHES},e)])},props:{propertyName:String,maxColors:{type:Number,default:10}},data:()=>({CLASS_COLOR_PICKER:d.CLASS_COLOR_PICKER,CLASS_COLOR_PICKER_SWATCHES:d.CLASS_COLOR_PICKER_SWATCHES,CLASS_COLOR_PICKER_SWATCH:d.CLASS_COLOR_PICKER_SWATCH,colorInput:null,swatches:[]}),mounted(){let e=(0,B.inject)(K);e&&e.listen(t=>{this.inspector=t,this.swatches=t.ensureContext(d.INSPECTOR_CONTEXT_RECENT_COLORS,()=>[]),this.colorInput=this.$refs.colorInput,this.colorInput.addEventListener("change",this.colorPicked),t.bind(d.EVENT_CONTEXT_UPDATE,o=>{o.key===d.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(d.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(d.INSPECTOR_CONTEXT_RECENT_COLORS,s)}},colorPicked:function(){let e=this.colorInput.value;this.inspector.setValue(this.propertyName,e),this.addColor(e)},selectSwatch:function(e){this.inspector.setValue(this.propertyName,e),this.colorInput.value=e},setCurrentColor:function(){let e=this.inspector.getValue(this.propertyName);e!=null&&(this.colorInput.value=e,this.addColor(e))}}};var P=require("vue"),Y=require("@visuallyjs/browser-ui"),Ze={props:{placement:{type:String,default:"floating"},position:{type:Object},constraints:{type:Object}},data:()=>({hasMounted:!1,surface:null}),setup(e){return{service:(0,P.inject)(i)}},mounted(){let e=t=>{if(!this.hasMounted){this.surface=t,this.hasMounted=!0;let o=this.position||{x:0,y:0};(0,P.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,P.watch)(this.service.surface,e):e(this.service.surface.value)},render(){return(0,P.h)(Y.ELEMENT_DIV,{ref:"root"},this.hasMounted?this.placement==="floating"?(0,P.h)(Y.ELEMENT_DIV,{},this.$slots.hasOwnProperty("default")?this.$slots.default():[]):(0,P.h)(P.Teleport,{to:this.surface.vertexLayer,key:(0,Y.uuid)()},(0,P.h)(Y.ELEMENT_DIV,{ref:"fixedEl"},this.$slots.hasOwnProperty("default")?this.$slots.default():[])):[])}};var Eo=require("vue"),qe={setup(){(0,Eo.provide)(i,new R("DiagramProvider"))},render(){return this.$slots.hasOwnProperty("default")?this.$slots.default():[]}};var Z=require("vue"),q=require("@visuallyjs/browser-ui"),Qe={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,Z.inject)(i)}},data:()=>({hasMounted:!1}),mounted(){if(this.service==null&&this.diagram==null)(0,q.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 q.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,Z.watch)(this.service.diagram,e)}},render:function(){return(0,Z.h)(q.ELEMENT_DIV,{ref:"container"})}};var Ko={install:function(e,t){e.component(Ut,$e),e.component(Gt,qe),e.component(le,Wt),e.component(de,Yt),e.component(ae,Xt),e.component(ce,Jt),e.component(ue,Kt),e.component(pe,Zt),e.component(me,Qe),e.component(fe,Ve),e.component(he,be),e.component(Oe,Le),e.component(Pe,Ue),e.component(Ee,Ge),e.component(Ce,Be),e.component(ge,He),e.component(Te,ke),e.component(_e,Fe),e.component(Se,je),e.component(ne,We),e.component(se,Je),e.component(ie,Ye),e.component(Vt,qt),e.component(ye,Ke),e.component(jt,Ze),e.provide(i,new R("root"))}};var Q=require("vue"),et=require("@visuallyjs/browser-ui"),Co=require("vue");function Xo(){let e=(0,Co.inject)(i),t=(0,Q.shallowRef)(null),o=(0,Q.shallowRef)(null),n=(0,Q.shallowRef)(null),s=(0,Q.ref)(1);return e==null||e.getSurface(a=>{o.value=a,o.value.bind(et.EVENT_ZOOM,l=>{s.value=l.zoom})}),e==null||e.getDiagram(a=>{t.value=a,t.value.$ui.bind(et.EVENT_ZOOM,l=>{s.value=l.zoom})}),e==null||e.getPaper(a=>{n.value=a,n.value.bind(et.EVENT_ZOOM,l=>{s.value=l.zoom})}),s}var tt=require("vue"),ee=require("@visuallyjs/browser-ui");function Yo(e){let t=(0,tt.inject)(i);if(t){let o=null,n=()=>{o&&e(o)},s=()=>{o&&(o.unbind(ee.EVENT_DATA_UPDATED,n),o.unbind(ee.EVENT_GRAPH_CLEARED,n))},a=l=>{s(),o=l,o&&(o.bind(ee.EVENT_DATA_UPDATED,n),o.bind(ee.EVENT_GRAPH_CLEARED,n),n())};t.getModel(l=>{a(l)}),(0,tt.onUnmounted)(()=>{s()})}}var So=require("vue"),_o=require("vue");function Zo(){let e=(0,_o.inject)(i),t=(0,So.shallowRef)(null);return e==null||e.getSurface(o=>{t.value=o}),t}var To=require("vue"),go=require("vue");function qo(){let e=(0,go.inject)(i),t=(0,To.shallowRef)(null);return e==null||e.getDiagram(o=>{t.value=o}),t}var yo=require("vue"),Ro=require("vue");function Qo(){let e=(0,Ro.inject)(i),t=(0,yo.shallowRef)(null);return e==null||e.getPaper(o=>{t.value=o}),t}
+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}

package/visuallyjs.browser-ui-vue.es.js

@@ -1 +1 @@
-var io=Object.defineProperty,ao=Object.defineProperties;var lo=Object.getOwnPropertyDescriptors;var Le=Object.getOwnPropertySymbols;var po=Object.prototype.hasOwnProperty,co=Object.prototype.propertyIsEnumerable;var Be=(e,t,o)=>t in e?io(e,t,{enumerable:!0,configurable:!0,writable:!0,value:o}):e[t]=o,R=(e,t)=>{for(var o in t||(t={}))po.call(t,o)&&Be(e,o,t[o]);if(Le)for(var o of Le(t))co.call(t,o)&&Be(e,o,t[o]);return e},A=(e,t)=>ao(e,lo(t));import{log as uo,BrowserUIModel as mo}from"@visuallyjs/browser-ui";var _=class extends mo{render(t,o){return uo("render called directly on BrowserUiVue class: should not happen. Surface component should use internal render."),null}};function Qn(e){return e=e||{},new _(e)}var Ue="surfaceId",Ge="typeFunction",je="clickToCenter",Fe="showLasso",ke="activeTracking",He="trackSelection",f="surfaceId",T="className",g="data",$e="mode",N="options",We="renderOptions",b="modelOptions",ze="model",Je="viewOptions",y="url",Ke="interactive",Xe="pivot",ae="dataSourceFilter",Ye="csvData",Ze="jsonData",qe="useModel",Rs="id",Qe="selector",et="dataGenerator",tt="typeGenerator",ot="groupIdentifier",rt="allowDropOnEdge",nt="allowDropOnCanvas",st="allowDropOnGroup",it="allowDropOnNode",at="ignoreDropOnNode",lt="onVertexAdded",pt="selectAfterAdd",ct="clickToAddOnly",ut="allowClickToAdd",dt="dragSize",mt="canvasDropFilter",V="Shape",L="ShapePalette",ht=120,ft=90,B="EdgeTypePickerComponent",Ot="ColorPickerComponent",Pt="vjs-vue-node",Et="vjs-vue-group",U="MiniviewComponent",G="SurfaceComponent",Ct="SurfaceProvider",St="DiagramProvider",j="PaletteComponent",F="ControlsComponent",k="ExportControlsComponent",H="DiagramComponent",$="DiagramPaletteComponent",W="ColumnChartComponent",z="BarChartComponent",J="XYChartComponent",K="LineChartComponent",X="AreaChartComponent",Y="PieChartComponent",Z="ScatterChartComponent",q="BubbleChartComponent",Q="GaugeChartComponent",ee="SankeyChartComponent",te="InspectorComponent",_t="Decorator";import{markRaw as v}from"vue";import{addClass as ho,BrowserUI as fo,CLASS_DEFAULT_GROUP as Oo,CLASS_DEFAULT_NODE as Po,ELEMENT_DIV as Eo,extend as Co,isGroup as Tt,OptimisticEventGenerator as So,renderSurface as _o,updateClasses as To,Vertex as gt}from"@visuallyjs/browser-ui";var le=class{constructor(){this.unrenderedVertices=new Map;this.eventManager=new So}vertexWillRender(t){this.unrenderedVertices.set(t.id,t)}vertexHasRendered(t){this.unrenderedVertices.delete(t.id),this.unrenderedVertices.size===0&&this.eventManager.fire(go)}vertexHasUpdated(t){this.eventManager.fire(yo,t)}},go="vertices:rendered",yo="vertex:updated",pe=new Map;function oe(e){return pe.has(e)||pe.set(e,new le),pe.get(e)}function Ro(e,t){oe(e).vertexHasRendered(t)}function Ao(e,t){oe(e).vertexHasUpdated(t)}function No(e,t){oe(e).vertexWillRender(t)}function js(e,t,o){oe(e).eventManager.bind(t,o)}var yt={props:{data:Object,model:_,obj:gt,vertex:gt,ui:fo,el:Element,def:Object,eventInfo:Object},mounted(){let e=this,t=Tt(e.obj)?Et:Pt;e.el.firstElementChild&&ho(e.el.firstElementChild,t),e.ui.$vertexRendered(e.obj,e.el,e.def,e.eventInfo),Ro(e.ui.id,e.obj)},methods:{getModel:function(){return this.model},removeVertex:function(){this.model.remove(this.obj)}},updated(){this.ui.$revalidateElement(this.el),Ao(this.ui.id,this.obj)}},vo={mixins:[yt],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)}}},xo={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:[yt]},ce=(e,t)=>{t.parentNode&&t.parentNode.removeChild(t)},Rt=(e,t,o,r,n,i,a,p,u)=>{let c=a.component!=null,E=Tt(p),C=[];c||C.push(E?Oo:Po);let d=c?a.component:{render(m){return m.data.label||""}};if(d){let m=document.createElement(Eo);To(m,C),d.mixins==null&&(d.mixins=[]);let S=E?xo:vo;d.mixins.find(w=>w===S)||d.mixins.push(S),No(i.id,p);let M={data:o,model:v(r),ui:v(i),obj:p,vertex:p,el:m,def:v(a),eventInfo:u==null?null:v(u)};if(a.inject)for(let w in a.inject){let ie=a.inject[w],so=typeof ie=="function"?ie(p,r):ie;M[w]=so}e.push({component:v(d),el:m,o:p.getFullId(),props:M})}};function At(e,t,o,r,n,i){let a={reactive:!0,asynchronous:!0,usesWrapperElement:!1,update:(u,c,E,C)=>{},render:(u,c,E,C,d,m,S,I)=>Rt(r,u,c,E,C,d,m,S,I),cleanupVertex:ce,cleanupPort:ce,rerender:(u,c,E,C,d,m,S,I,M)=>{ce(S.id,M),Rt(r,u,c,E,C,d,m,S,I)}},p=Co(n||{},{view:i||{},id:t});return _o(e,o,a,p)}import{log as Nt,Paper as Do,Surface as Io}from"@visuallyjs/browser-ui";import{shallowRef as x}from"vue";var s=Symbol.for("visuallyjs-service"),O=class{constructor(t){this.context=t;this.s=[];this.i=[];this.a=[];this.l=[];this.surface=x(null);this.model=x(null);this.paper=x(null);this.diagram=x(null);this.ui=x(null)}getSurface(t){this.e(this.i,t,this.p)}getDiagram(t){this.e(this.a,t,this.c)}getPaper(t){this.e(this.l,t,this.u)}getModel(t){this.e(this.s,t,this.r)}getModelDirect(){return this.r}e(t,o,r){if(r!=null)try{o(r)}catch(n){Nt(`WARN: could not dispatch ${n}`)}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.t(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 Io?this.setSurface(t.$ui):t.$ui instanceof Do&&this.setPaper(t.$ui),this.t(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.t(this.l,t)}n(t){this.r=t,this.t(this.s,t)}t(t,o){t.forEach(r=>{try{r(o)}catch(n){Nt(`WARN: could not flush all queue entries ${n}`)}})}};import{h as ue,inject as Mo,Teleport as wo}from"vue";import{ELEMENT_DIV as bo,EVENT_GROUP_REMOVED as Vo,EVENT_GROUP_UPDATED as Lo,EVENT_NODE_REMOVED as Bo,EVENT_NODE_UPDATED as Uo,EVENT_RENDER_END as Go,clone as vt}from"@visuallyjs/browser-ui";var xt={setup(e){return{service:Mo(s),surfaceId:e.surfaceId||Ue}},name:G,props:{[g]:{type:Object},[We]:{type:Object},[b]:{type:Object},[Je]:{type:Object},[ze]:{type:Object},[y]:{type:String},[f]:{type:String}},data:function(){return{vertices:[]}},mounted(){let e=this,t=this.model||new _(this.modelOptions||{}),o=this.$refs.root;e.url?t.load({url:e.url}):e.data&&t.load({data:e.data}),this.surface=At(t,this.surfaceId,o,this.vertices,vt(this.renderOptions||{}),vt(this.viewOptions||{})),this.service.setSurface(this.surface);let r=(i,a)=>{let p=()=>{let c={};return a.originalData||a.updates?c=Object.assign(a.originalData,a.updates):a.newData&&Object.assign(c,a.newData),c},u=this.vertices.find(c=>c.o===i);u!=null&&(u.props.data=p())},n=i=>{let a=this.vertices.findIndex(p=>p.o===i);a!==-1&&this.vertices.splice(a,1)};t.bind(Uo,i=>{r(i.vertex.getFullId(),i)}),t.bind(Lo,i=>{r(i.vertex.getFullId(),i)}),t.bind(Bo,i=>{n(i.node.id)}),t.bind(Vo,i=>{n(i.group.id)}),this.surface.bind(Go,()=>setTimeout(()=>this.surface.$redrawEveryConnection()))},render:function(){return ue(bo,{ref:"root",class:"vjs-vue-surface",style:{width:"100%",height:"100%"}},this.vertices.map(e=>ue(wo,{to:e.el,key:e.o},[ue(e.component,e.props)])).concat(this.$slots.hasOwnProperty("default")?this.$slots.default():[]))}};import{h as l,inject as jo,watch as Fo}from"vue";import{LassoPlugin as ko,SURFACE_MODE_SELECT as Dt,SURFACE_MODE_PAN as It,PAN_PATH as Ho,PAN_VIEW_BOX as $o,LASSO_PATH as Wo,LASSO_VIEW_BOX as zo,ZOOM_TO_FIT_PATH as Jo,ZOOM_TO_FIT_VIEW_BOX as Ko,EVENT_UNDOREDO_UPDATE as Xo,TRUE as Mt,FALSE as wt,EVENT_SURFACE_MODE_CHANGED as Yo,ELEMENT_DIV as bt,ATTRIBUTE_CONTROLS_ORIENTATION as Zo,ZOOM_IN_OUT_VIEW_BOX as Vt,ZOOM_IN_PATH as qo,ZOOM_OUT_PATH as Qo,RESET_SELECTION_PATH as er,RESET_SELECTION_VIEW_BOX as tr,CLEAR_PATH as or,CLEAR_VIEW_BOX as rr,ATTRIBUTE_RESET_SELECTION as nr,CLASS_CONTROLS_RESET_SELECTION as sr,EVENT_SELECT as ir,EVENT_DESELECT as ar,EVENT_SELECTION_CLEARED as lr,supportsPathEditing as pr}from"@visuallyjs/browser-ui";var cr="Clear dataset?",de="vjs-selected-mode",Lt="can-undo",Bt="can-redo",ur="data-undo",dr="data-redo",Ut="data-mode",mr="data-reset",hr="data-clear",fr="data-zoom-in",Or="data-zoom-out",Gt="vjs-controls-has-selection",jt={setup(e){return{service:jo(s)}},name:F,props:{clear:{type:Boolean,default:!0},[f]:{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:cr},onMaybeClear:{type:Function},className:{type:String,default:""}},methods:{panMode:function(){var e;(e=this.service.surface.value)==null||e.setMode(It)},selectMode:function(){var e;(e=this.service.surface.value)==null||e.setMode(Dt)},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(),pr(e)&&e.stopEditingPath())},updateSelectionState:function(){let e=this.service.surface.value;e&&(e.model.getSelection().isEmpty()?this.$refs.root.removeAttribute(Gt):this.$refs.root.setAttribute(Gt,"true"))}},data:function(){return{ready:!1,hasLasso:!1}},render(){if(this.ready){let e=[];return this.showPan&&(e.push(l("i",{class:`vjs-pan-mode ${de}`,[Ut]:It,onClick:()=>this.panMode(),title:"Pan mode"},[l("svg",{viewBox:$o,stroke:"currentColor",fill:"none"},[l("path",{d:Ho})])])),e.push(l("i",{class:"vjs-select-mode",[Ut]:Dt,onClick:()=>this.selectMode(),title:"Select mode"},[l("svg",{viewBox:zo,stroke:"currentColor",fill:"currentColor"},[l("path",{d:Wo})])]))),this.undoRedo&&(e.push(l("i",{class:"vjs-undo",[ur]:!0,title:"Undo last action",onClick:()=>this.undo()})),e.push(l("i",{class:"vjs-redo",[dr]:!0,title:"Redo last action",onClick:()=>this.redo()}))),this.zoomToExtents&&e.push(l("i",{class:"vjs-zoom-to-fit",[mr]:"true",onClick:()=>this.zoomToFit(),title:"Zoom to Fit"},[l("svg",{viewBox:Ko,stroke:"currentColor",fill:"currentColor"},[l("path",{d:Jo})])])),this.zoomButtons&&(e.push(l("i",{class:"vjs-zoom-in",[fr]:"true",onClick:()=>this.zoomIn(),title:"Zoom In"},[l("svg",{viewBox:Vt,stroke:"currentColor",fill:"currentColor"},[l("path",{d:qo})])])),e.push(l("i",{class:"vjs-zoom-out",[Or]:"true",onClick:()=>this.zoomOut(),title:"Zoom Out"},[l("svg",{viewBox:Vt,stroke:"currentColor",fill:"currentColor"},[l("path",{d:Qo})])]))),e.push(l("i",{class:sr,[nr]:"true",onClick:()=>{this.resetSelection()}},[l("svg",{viewBox:tr,stroke:"currentColor",fill:"currentColor"},[l("path",{d:er})])])),this.clear&&e.push(l("i",{class:"vjs-clear-dataset",[hr]:"true",onClick:()=>{this.doClear()}},[l("svg",{viewBox:rr,stroke:"currentColor",fill:"currentColor"},[l("path",{d:or})])])),l(bt,{class:`vjs-controls ${this.className}`,ref:"root",[Lt]:!1,[Bt]:!1,[Zo]:this.orientation},e)}else return l(bt,{ref:"root"})},mounted(){let e=t=>{let o=t.getPlugin(ko.type);this.showPan=o!=null,t.bind(Yo,r=>{t.removeClass(t.$getSelector(this.$refs.root,"[data-mode]"),de),t.addClass(t.$getSelector(this.$refs.root,"[data-mode='"+r+"']"),de)}),t.model.bind(Xo,r=>{this.$refs.root.setAttribute(Lt,r.undoCount>0?Mt:wt),this.$refs.root.setAttribute(Bt,r.redoCount>0?Mt:wt)}),t.model.bind(ir,()=>this.updateSelectionState()),t.model.bind(ar,()=>this.updateSelectionState()),t.model.bind(lr,()=>this.updateSelectionState()),this.ready=!0};this.service.surface.value==null?Fo(this.service.surface,e):e(this.service.surface.value)}};import{h as P,inject as Pr}from"vue";import{CLASS_CONTROLS as Er,CLASS_EXPORT_CONTROLS as Cr,ELEMENT_DIV as Sr,ImageExportUI as Ft,SvgExportUI as _r,TYPE_JPG as Tr,TYPE_PNG as gr,TYPE_SVG as yr}from"@visuallyjs/browser-ui";var kt={name:k,setup(e){return{service:Pr(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 _r(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 Ft(e).export(t)})},exportPNG:function(){this.loadSurface(e=>{let t=this.imageOptions||{};this.margins!=null&&t.margins==null&&Object.assign(t,this.margins),new Ft(e).export(t)})}},render(){let e=this.showLabel!==!1,t=this.allowSvgExport!==!1,o=this.allowPngExport!==!1,r=this.allowJpgExport!==!1,n=[];return t&&n.push(P("i",{},[P("a",{href:"#","data-type":yr,onClick:()=>this.exportSVG()},"SVG")])),o&&n.push(P("i",{},[P("a",{href:"#","data-type":gr,onClick:()=>this.exportPNG()},"PNG")])),r&&n.push(P("i",{},[P("a",{href:"#","data-type":Tr,onClick:()=>this.exportJPG()},"JPG")])),e&&n.unshift(P("span",{},[this.label])),P(Sr,{class:`${Er} ${Cr}`},n)}};import{h as Rr,inject as Ar,watch as Nr}from"vue";import{ELEMENT_DIV as vr,MiniviewPlugin as xr}from"@visuallyjs/browser-ui";var Ht={setup(e){return{service:Ar(s)}},name:U,props:{[f]:{type:String},[T]:{type:String,default:""},[ke]:{type:Boolean,default:!0},[je]:{type:Boolean,default:!0},[Fe]:{type:Boolean,default:!0},[He]:{type:Boolean,default:!0},[Ge]:{type:Function}},mounted:function(){let e=t=>{t.addPlugin({type:xr.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):Nr(this.service.surface,e)},render:function(e){return Rr(vr,{ref:"root",class:e.className})}};import{h as Dr,inject as Ir,markRaw as Mr}from"vue";import{createDiagram as wr,ELEMENT_DIV as br}from"@visuallyjs/browser-ui";var $t={setup(e){return{service:Ir(s)}},name:H,props:{[g]:{type:Object},[y]:{type:String},[b]:{type:Object},[N]:{type:Object}},mounted(){let e=this.$refs.root;this.diagram=Mr(wr(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 Dr(br,{ref:"root",class:"vjs-vue-surface",style:{width:"100%",height:"100%"}},this.$slots.hasOwnProperty("default")?this.$slots.default():[])}};import{h as Wt,inject as Vr,watch as zt}from"vue";import{ColumnChart as Lr,BarChart as Br,CategoryValueChart as Ur,ELEMENT_DIV as Jt,LineChart as Gr,AreaChart as jr,PieChart as Fr,ScatterChart as kr,BubbleChart as Hr,GaugeChart as $r,SankeyChart as Wr}from"@visuallyjs/browser-ui";var Kt={[T]:{type:String},[g]:{type:Object},[y]:{type:String},[qe]:{type:Boolean,default:!1}},Xt={setup(){return{service:Vr(s)}},render:function(){return Wt(Jt,{class:`${this.className}`,ref:"root"})}};function h(e,t,o=!0){let r=A(R({},Kt),{[N]:{type:Object}}),n={};return o&&(r[ae]={type:Function},n[ae]=function(i){this.chart.setDataSourceFilter(i)}),A(R({},Xt),{name:e,props:r,watch:n,data:()=>({hasMounted:!1}),mounted(){let i=this.$refs.root,a=o?Object.assign({dataSourceFilter:this.dataSourceFilter},this.options):this.options;this.data&&(a.data=this.data),this.url&&(a.url=this.url);let p=()=>{this.hasMounted=!0,this.chart=new t(i,a)};this.useModel?this.service.model.value!=null?(a.dataSource=this.service.model.value,p()):zt(this.service.model,u=>{this.hasMounted||(a.dataSource=u,p())}):p()}})}var me=h(W,Lr),he=h(z,Br),fe=h(J,Ur,!1),Oe=h(Y,Fr),Pe=h(K,Gr),Ee=h(X,jr),Ce=h(Z,kr),Se=h(q,Hr),_e=h(Q,$r,!1),Te=A(R({},Xt),{name:ee,props:A(R({},Kt),{[Ye]:{type:String},[Ze]:{type:Object},[Ke]:{type:Boolean},[Xe]:{type:String},[N]:{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 Wr(e,t)};if(this.useModel){let r=n=>{this.hasMounted||(t.dataSource=n,o())};this.service.model.value==null?zt(this.service.model,r):r(this.service.model.value)}else o()},watch:{pivot(e){this.chart&&this.chart.pivot(e)}},render:function(){return Wt(Jt,{class:`${this.className}`,ref:"root"})}});import{h as zr,inject as Jr,watch as Kr}from"vue";import{defaultDataGenerator as Xr,ELEMENT_DIV as Yr,Palette as Zr}from"@visuallyjs/browser-ui";var Yt={setup(e){return{service:Jr(s)}},name:j,props:{[f]:{type:String},[Qe]:{type:String},[et]:{type:Function},[tt]:{type:Function},[ot]:{type:Function},[rt]:{type:Boolean,default:!1},[nt]:{type:Boolean,default:!0},[st]:{type:Boolean,default:!0},[it]:{type:Boolean,default:!1},[at]:{type:Boolean,default:!1},[dt]:Object,[lt]:Function,[mt]:Function,[T]:String,[$e]:String,[pt]:{type:Boolean,default:!1},[ut]:{type:Boolean,default:!1},[ct]:{type:Boolean,default:!1}},mounted:function(){let e=t=>{let o={source:this.$refs.root,selector:this.selector,dataGenerator:r=>this.dataGenerator?this.dataGenerator(r):Xr(r),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 Zr(t,o)};this.service.surface.value==null?Kr(this.service.surface,e):e(this.service.surface.value)},render:function(){return zr(Yr,{ref:"root",class:this.className||""},this.$slots.hasOwnProperty("default")?this.$slots.default():[])}};import{provide as qr}from"vue";var ge={setup(){qr(s,new O("SurfaceProvider"))},render(){return this.$slots.hasOwnProperty("default")?this.$slots.default():[]}};import{h as Qr,inject as en,watch as tn}from"vue";import{CLASS_SHAPE as on,convertToMultilineText as Zt,DEFAULT_LABEL_FILL_RATIO as ye,ELEMENT_SVG as rn}from"@visuallyjs/browser-ui";var Re={name:V,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:ye},labelColor:{type:String,default:"#000000"},font:{type:Object}},setup(){return{service:en(s)}},mounted(){let e=t=>{let o=t.getShapeLibrary(),r=o.renderCompiledShape(Object.assign({sw:this.getOutlineWidth()},this.data));if(this.$refs.container.appendChild(r),this.showLabels){let n=o.renderShapeLabel(this.data,this.labelProperty,this.labelStrokeWidth,null,this.labelColor,this.labelColor,this.font);this.$refs.container.appendChild(n),this.multilineLabels!=!1&&Zt(n,this.data[this.labelProperty]||"",this.getWidth()*(this.labelFillRatio||ye))}};this.service.ui.value==null?tn(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 r=t.renderShapeLabel(this.data,this.labelProperty,this.labelStrokeWidth,null,this.labelColor,this.labelColor,this.font);this.$refs.container.appendChild(r),this.multilineLabels!=!1&&Zt(r,this.data[this.labelProperty]||"",this.getWidth()*(this.labelFillRatio||ye))}}},render:function(){return Qr(rn,{ref:"container",preserveAspectRatio:"none",fill:this.getFill(),stroke:this.getOutline(),"stroke-width":this.getOutlineWidth(),viewBox:"0 0 "+this.getWidth()+" "+this.getHeight(),class:on})},methods:{getWidth:function(){return this.data.width||ht},getHeight:function(){return this.data.height||ft},getFill:function(){return this.data.fill||"#FFFFFF"},getOutline:function(){return this.data.outline||"#000000"},getOutlineWidth(){return this.data.outlineWidth||2}}};import{h as nn,inject as sn,watch as an}from"vue";import{ELEMENT_DIV as ln,ShapePalette as pn}from"@visuallyjs/browser-ui";var Ae={name:L,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:sn(s)}},data:()=>({hasMounted:!1}),mounted(){let e=t=>{this.hasMounted||(this.hasMounted=!0,new pn(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?an(this.service.surface,e):e(this.service.surface.value)},render:function(){return nn(ln,{ref:"container"})}};import{provide as qt,readonly as cn,inject as un,h as dn,watch as mn}from"vue";import{ELEMENT_DIV as hn,Inspector as fn,log as On}from"@visuallyjs/browser-ui";var D=Symbol.for("VueInspectorGetter"),Pn=Symbol.for("VueInspectorSetter");function En(){let e=[],t=null;function o(i){try{i(t)}catch(a){On("WARN: inspector listener threw an exception",a)}}let r={listen:i=>{t!=null?o(i):e.push(i)}},n={inspector:i=>{t=i,e.forEach(o)}};return qt(Pn,n),qt(D,cn(r)),n}var Ne={name:te,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=En();return{service:un(s),inspectorProvider:o,inspector:null,emit:t.emit}},mounted(){let e=t=>{if(this.inspector==null){let o=new fn({container:this.$refs.root,ui:t,renderEmptyContainer:()=>(this.emit("update:modelValue",null),this.renderEmptyContainer?this.renderEmptyContainer():""),refresh:(r,n)=>{this.emit("update:modelValue",r),this.refresh&&this.refresh(r),setTimeout(n)},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?mn(this.service.surface,e):e(this.service.surface.value)},render(){return dn(hn,{ref:"root"},this.$slots.hasOwnProperty("default")?this.$slots.default():[])}};import{h as Cn,inject as Sn}from"vue";import{EdgeTypePicker as _n,ELEMENT_DIV as Tn,log as gn}from"@visuallyjs/browser-ui";var ve={name:B,props:{propertyName:String},setup(){return{inspectorProvider:Sn(D)}},mounted(){this.inspectorProvider?this.inspectorProvider.listen(e=>{let t=new _n(e.$ui,this.$refs.container,e.$ui.$getEdgePropertyMappings(),e.getValue(this.propertyName),(o,r)=>{e.setValue(this.propertyName,r)});t.render(this.propertyName,e.m),e.onChange(()=>{t.select(this.propertyName,e.getValue(this.propertyName))})}):gn("WARN: EdgeTypePicker not instantiated inside an InspectorComponent. Cannot mount.")},render:function(){return Cn(Tn,{ref:"container"})}};import{h as re,inject as yn}from"vue";import{CLASS_COLOR_PICKER as Qt,CLASS_COLOR_PICKER_SWATCH as eo,CLASS_COLOR_PICKER_SWATCHES as to,EVENT_CONTEXT_UPDATE as Rn,ELEMENT_DIV as xe,INSPECTOR_CONTEXT_RECENT_COLORS as ne}from"@visuallyjs/browser-ui";var oo={render(){let e=this.swatches.map(t=>re(xe,{title:t,class:eo,style:`background-color:${t}`,"data-color":t,onClick:()=>this.selectSwatch(t)}));return re(xe,{class:`${Qt}`},[re("input",{type:"color","vjs-att":this.propertyName,ref:"colorInput"}),re(xe,{class:to},e)])},props:{propertyName:String,maxColors:{type:Number,default:10}},data:()=>({CLASS_COLOR_PICKER:Qt,CLASS_COLOR_PICKER_SWATCHES:to,CLASS_COLOR_PICKER_SWATCH:eo,colorInput:null,swatches:[]}),mounted(){let e=yn(D);e&&e.listen(t=>{this.inspector=t,this.swatches=t.ensureContext(ne,()=>[]),this.colorInput=this.$refs.colorInput,this.colorInput.addEventListener("change",this.colorPicked),t.bind(Rn,o=>{o.key===ne&&(this.swatches=o.value.slice())}),t.bind("change",this.setCurrentColor),this.setCurrentColor()})},methods:{addColor:function(e){let t=this.inspector.ensureContext(ne,()=>[]);if(e=e.toUpperCase(),!(t.find(r=>r.toUpperCase()===e)!=null)){let r=this.maxColors||10,n=t.slice();n.unshift(e),n.length>r&&(n.length=r),this.inspector.updateContext(ne,n)}},colorPicked:function(){let e=this.colorInput.value;this.inspector.setValue(this.propertyName,e),this.addColor(e)},selectSwatch:function(e){this.inspector.setValue(this.propertyName,e),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 se,inject as An,nextTick as Nn,Teleport as vn,watch as xn}from"vue";import{ELEMENT_DIV as De,uuid as Dn}from"@visuallyjs/browser-ui";var Ie={props:{placement:{type:String,default:"floating"},position:{type:Object},constraints:{type:Object}},data:()=>({hasMounted:!1,surface:null}),setup(e){return{service:An(s)}},mounted(){let e=t=>{if(!this.hasMounted){this.surface=t,this.hasMounted=!0;let o=this.position||{x:0,y:0};Nn().then(()=>{this.placement==="floating"?t.floatElement(this.$refs.root,o):t.fixElement(this.$refs.fixedEl,o,this.constraints)})}};this.service.surface.value==null?xn(this.service.surface,e):e(this.service.surface.value)},render(){return se(De,{ref:"root"},this.hasMounted?this.placement==="floating"?se(De,{},this.$slots.hasOwnProperty("default")?this.$slots.default():[]):se(vn,{to:this.surface.vertexLayer,key:Dn()},se(De,{ref:"fixedEl"},this.$slots.hasOwnProperty("default")?this.$slots.default():[])):[])}};import{provide as In}from"vue";var Me={setup(){In(s,new O("DiagramProvider"))},render(){return this.$slots.hasOwnProperty("default")?this.$slots.default():[]}};import{h as Mn,inject as wn,watch as bn}from"vue";import{DiagramPalette as Vn,ELEMENT_DIV as Ln,log as Bn}from"@visuallyjs/browser-ui";var we={name:$,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:wn(s)}},data:()=>({hasMounted:!1}),mounted(){if(this.service==null&&this.diagram==null)Bn("Cannot mount DiagramPalette - no service found and Diagram not passed in as a prop");else{let e=t=>{this.hasMounted||(this.hasMounted=!0,new Vn(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):bn(this.service.diagram,e)}},render:function(){return Mn(Ln,{ref:"container"})}};var up={install:function(e,t){e.component(Ct,ge),e.component(St,Me),e.component(G,xt),e.component(H,$t),e.component(U,Ht),e.component(F,jt),e.component(k,kt),e.component(j,Yt),e.component($,we),e.component(z,he),e.component(W,me),e.component(J,fe),e.component(K,Pe),e.component(X,Ee),e.component(Y,Oe),e.component(ee,Te),e.component(Q,_e),e.component(q,Se),e.component(Z,Ce),e.component(V,Re),e.component(L,Ae),e.component(B,ve),e.component(Ot,oo),e.component(te,Ne),e.component(_t,Ie),e.provide(s,new O("root"))}};import{shallowRef as be,ref as Un}from"vue";import{EVENT_ZOOM as Ve}from"@visuallyjs/browser-ui";import{inject as Gn}from"vue";function Cp(){let e=Gn(s),t=be(null),o=be(null),r=be(null),n=Un(1);return e==null||e.getSurface(i=>{o.value=i,o.value.bind(Ve,a=>{n.value=a.zoom})}),e==null||e.getDiagram(i=>{t.value=i,t.value.$ui.bind(Ve,a=>{n.value=a.zoom})}),e==null||e.getPaper(i=>{r.value=i,r.value.bind(Ve,a=>{n.value=a.zoom})}),n}import{inject as jn,onUnmounted as Fn}from"vue";import{EVENT_DATA_UPDATED as ro,EVENT_GRAPH_CLEARED as no}from"@visuallyjs/browser-ui";function xp(e){let t=jn(s);if(t){let o=null,r=()=>{o&&e(o)},n=()=>{o&&(o.unbind(ro,r),o.unbind(no,r))},i=a=>{n(),o=a,o&&(o.bind(ro,r),o.bind(no,r),r())};t.getModel(a=>{i(a)}),Fn(()=>{n()})}}import{shallowRef as kn}from"vue";import{inject as Hn}from"vue";function Vp(){let e=Hn(s),t=kn(null);return e==null||e.getSurface(o=>{t.value=o}),t}import{shallowRef as $n}from"vue";import{inject as Wn}from"vue";function Fp(){let e=Wn(s),t=$n(null);return e==null||e.getDiagram(o=>{t.value=o}),t}import{shallowRef as zn}from"vue";import{inject as Jn}from"vue";function Jp(){let e=Jn(s),t=zn(null);return e==null||e.getPaper(o=>{t.value=o}),t}export{Ee as AreaChartComponent,he as BarChartComponent,xo as BaseGroupComponent,vo as BaseNodeComponent,_ as BrowserUIVueModel,Se as BubbleChartComponent,Et as CLASS_VUE_GROUP,Pt as CLASS_VUE_NODE,X as COMPONENT_AREA_CHART,z as COMPONENT_BAR_CHART,q as COMPONENT_BUBBLE_CHART,W as COMPONENT_COLUMN_CHART,F as COMPONENT_CONTROLS,H as COMPONENT_DIAGRAM,$ as COMPONENT_DIAGRAM_PALETTE,St as COMPONENT_DIAGRAM_PROVIDER,k as COMPONENT_EXPORT_CONTROLS,Q as COMPONENT_GAUGE_CHART,te as COMPONENT_INSPECTOR,K as COMPONENT_LINE_CHART,U as COMPONENT_MINIVIEW,j as COMPONENT_PALETTE,Y as COMPONENT_PIE_CHART,ee as COMPONENT_SANKEY_CHART,Z as COMPONENT_SCATTER_CHART,G as COMPONENT_SURFACE,Ct as COMPONENT_SURFACE_PROVIDER,J as COMPONENT_XY_CHART,oo as ColorPickerComponent,me as ColumnChartComponent,jt as ControlsComponent,ft as DEFAULT_SHAPE_HEIGHT,ht as DEFAULT_SHAPE_WIDTH,Ue as DEFAULT_VUE_SURFACE_ID,Ie as DecoratorComponent,$t as DiagramComponent,we as DiagramPaletteComponent,Me as DiagramProvider,yo as EVENT_VERTEX_UPDATED,go as EVENT_VERTICES_RENDERED,ve as EdgeTypePickerComponent,kt as ExportControlsComponent,_e as GaugeChartComponent,Ne as InspectorComponent,D as InspectorGetterSymbol,Pn as InspectorSetterSymbol,Pe as LineChartComponent,Ht as MiniviewComponent,ke as PROP_ACTIVE_TRACKING,ut as PROP_ALLOW_CLICK_TO_ADD,nt as PROP_ALLOW_DROP_ON_CANVAS,rt as PROP_ALLOW_DROP_ON_EDGE,st as PROP_ALLOW_DROP_ON_GROUP,it as PROP_ALLOW_DROP_ON_NODE,mt as PROP_CANVAS_DROP_FILTER,T as PROP_CLASS_NAME,ct as PROP_CLICK_TO_ADD_ONLY,je as PROP_CLICK_TO_CENTER,Ye as PROP_CSV_DATA,g as PROP_DATA,et as PROP_DATA_GENERATOR,ae as PROP_DATA_SOURCE_FILTER,dt as PROP_DRAG_SIZE,ot as PROP_GROUP_IDENTIFIER,Rs as PROP_ID,at as PROP_IGNORE_DROP_ON_NODE,Ke as PROP_INTERACTIVE,Ze as PROP_JSON_DATA,$e as PROP_MODE,ze as PROP_MODEL,b as PROP_MODEL_OPTIONS,lt as PROP_ON_VERTEX_ADDED,N as PROP_OPTIONS,Xe as PROP_PIVOT,We as PROP_RENDER_OPTIONS,Qe as PROP_SELECTOR,pt as PROP_SELECT_AFTER_ADD,Fe as PROP_SHOW_LASSO,f as PROP_SURFACE_ID,He as PROP_TRACK_SELECTION,Ge as PROP_TYPE_FUNCTION,tt as PROP_TYPE_GENERATOR,y as PROP_URL,qe as PROP_USE_MODEL,Je as PROP_VIEW_OPTIONS,Yt as PaletteComponent,Oe as PieChartComponent,Te as SankeyChartComponent,Ce as ScatterChartComponent,Re as ShapeComponent,Ae as ShapePaletteComponent,xt as SurfaceComponent,ge as SurfaceProvider,Ot as TAG_COLOR_PICKER,_t as TAG_DECORATOR,B as TAG_EDGE_TYPE_PICKER,V as TAG_SHAPE,L as TAG_SHAPE_PALETTE,up as VisuallyJsPlugin,O as VisuallyJsService,s as VisuallyJsServiceKey,fe as XYChartComponent,At as addSurface,js as bindToDevLifecycle,En as doProvideInspector,Qn as newInstance,Fp as useDiagram,Jp as usePaper,Vp as useSurface,xp as useVisuallyJsUpdate,Cp as useZoom};
+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

@@ -1,11 +1,20 @@
-import { BrowserUI, ObjectData, Vertex, BrowserUIModel } from "@visuallyjs/browser-ui";
+import { BrowserUI, ObjectData, Vertex, BrowserUIModel, Edge, Overlay, BrowserElement } from "@visuallyjs/browser-ui";
 /**
- * The props that are passed in to a component used to render a node/group by a surface component.
+ * The props that are passed in to a component used to render a node/group by a surface or paper component.
  * @group Props
  */
 export interface VueWrapperProps<T extends Vertex = Vertex> {
     /**
-     * Data that backs the vertex. Reactive.
+     * The vertex (node or group) that is being rendered
+     */
+    vertex: T;
+    /**
+     * The vertex (node or group) that is being rendered
+     * @deprecated Will be removed in 1.3.0
+     */
+    obj: T;
+    /**
+     * Data that backs the object. Reactive.
      */
     data: ObjectData;
     /**
@@ -17,19 +26,49 @@ export interface VueWrapperProps<T extends Vertex = Vertex> {
      */
     ui: BrowserUI;
     /**
-     * The vertex (node or group) that is being rendered
-     * @deprecated use `vertex` from 1.2.0 onwards
+     * The underlying DOM element
      */
-    obj: T;
+    el: BrowserElement;
     /**
-     * The vertex (node or group) that is being rendered
-     * @since 1.2.0
+     * Definition for this node/group type
      */
-    vertex: T;
+    def: any;
+    eventInfo: any;
+}
+/**
+ * The props that are passed in to a component used to render an overlay by a surface or paper component.
+ * @group Props
+ */
+export interface VueEdgeWrapperProps {
+    /**
+     * The edge that is being rendered.
+     */
+    edge: Edge;
+    /**
+     * The edge that is being rendered
+     * @deprecated Will be removed in 1.3.0
+     */
+    obj: Edge;
+    /**
+     * The overlay that is being rendered.
+     */
+    overlay: Overlay<BrowserElement>;
+    /**
+     * Data that backs the object. Reactive.
+     */
+    data: ObjectData;
+    /**
+     * Underlying model.
+     */
+    model: BrowserUIModel;
+    /**
+     * Underlying UI
+     */
+    ui: BrowserUI;
     /**
      * The underlying DOM element
      */
-    el: any;
+    el: BrowserElement;
     /**
      * Definition for this node/group type
      */