@visuallyjs/browser-ui-vue 1.1.4 → 1.2.1

package/chart.d.ts

@@ -8,6 +8,9 @@ export declare const ColumnChartComponent: {
     name: string;
     props: any;
     watch: any;
+    data: () => {
+        hasMounted: boolean;
+    };
     /** @internal */
     mounted(): void;
     setup(): {
@@ -25,6 +28,9 @@ export declare const BarChartComponent: {
     name: string;
     props: any;
     watch: any;
+    data: () => {
+        hasMounted: boolean;
+    };
     /** @internal */
     mounted(): void;
     setup(): {
@@ -42,6 +48,9 @@ export declare const XYChartComponent: {
     name: string;
     props: any;
     watch: any;
+    data: () => {
+        hasMounted: boolean;
+    };
     /** @internal */
     mounted(): void;
     setup(): {
@@ -59,6 +68,9 @@ export declare const PieChartComponent: {
     name: string;
     props: any;
     watch: any;
+    data: () => {
+        hasMounted: boolean;
+    };
     /** @internal */
     mounted(): void;
     setup(): {
@@ -76,6 +88,9 @@ export declare const LineChartComponent: {
     name: string;
     props: any;
     watch: any;
+    data: () => {
+        hasMounted: boolean;
+    };
     /** @internal */
     mounted(): void;
     setup(): {
@@ -93,6 +108,9 @@ export declare const AreaChartComponent: {
     name: string;
     props: any;
     watch: any;
+    data: () => {
+        hasMounted: boolean;
+    };
     /** @internal */
     mounted(): void;
     setup(): {
@@ -110,6 +128,9 @@ export declare const ScatterChartComponent: {
     name: string;
     props: any;
     watch: any;
+    data: () => {
+        hasMounted: boolean;
+    };
     /** @internal */
     mounted(): void;
     setup(): {
@@ -127,6 +148,9 @@ export declare const BubbleChartComponent: {
     name: string;
     props: any;
     watch: any;
+    data: () => {
+        hasMounted: boolean;
+    };
     /** @internal */
     mounted(): void;
     setup(): {
@@ -144,6 +168,9 @@ export declare const GaugeChartComponent: {
     name: string;
     props: any;
     watch: any;
+    data: () => {
+        hasMounted: boolean;
+    };
     /** @internal */
     mounted(): void;
     setup(): {
@@ -192,6 +219,9 @@ export declare const SankeyChartComponent: {
             default: boolean;
         };
     };
+    data: () => {
+        hasMounted: boolean;
+    };
     mounted(): void;
     watch: {
         pivot(newVal: string): void;

package/controls-component.d.ts

@@ -1,63 +1 @@
-import { ControlsComponentProps } from "./definitions";
-export declare const ControlsComponent: {
-    setup(props: ControlsComponentProps): {
-        service: unknown;
-    };
-    name: string;
-    props: {
-        clear: {
-            type: BooleanConstructor;
-            default: boolean;
-        };
-        surfaceId: {
-            type: StringConstructor;
-        };
-        undoRedo: {
-            type: BooleanConstructor;
-            default: boolean;
-        };
-        orientation: {
-            type: StringConstructor;
-            default: string;
-        };
-        zoomToExtents: {
-            type: BooleanConstructor;
-            default: boolean;
-        };
-        zoomButtons: {
-            type: BooleanConstructor;
-            default: boolean;
-        };
-        clearMessage: {
-            type: StringConstructor;
-            default: string;
-        };
-        onMaybeClear: {
-            type: FunctionConstructor;
-        };
-        className: {
-            type: StringConstructor;
-            default: string;
-        };
-    };
-    methods: {
-        panMode: () => void;
-        selectMode: () => void;
-        zoomToFit: () => void;
-        doClear: () => void;
-        undo: () => void;
-        redo: () => void;
-        zoomIn: () => void;
-        zoomOut: () => void;
-        resetSelection(): void;
-        updateSelectionState: () => void;
-    };
-    data: () => {
-        ready: boolean;
-        hasLasso: boolean;
-    };
-    render(): import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
-        [key: string]: any;
-    }>;
-    mounted(): void;
-};
+export declare const ControlsComponent: any;

package/decorator-component.d.ts

@@ -32,7 +32,7 @@ declare const DecoratorComponent: {
         };
     };
     data: () => {
-        mounted: boolean;
+        hasMounted: boolean;
         surface: Surface;
     };
     setup(props: DecoratorComponentProps): {

package/definitions.d.ts

@@ -1,17 +1,20 @@
-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";
 export declare const PROP_OPTIONS = "options";
 export declare const PROP_RENDER_OPTIONS = "renderOptions";
 export declare const PROP_MODEL_OPTIONS = "modelOptions";
+export declare const PROP_MODEL = "model";
 export declare const PROP_VIEW_OPTIONS = "viewOptions";
 export declare const PROP_URL = "url";
 export declare const PROP_INTERACTIVE = "interactive";
@@ -52,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.
  */
@@ -94,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.
@@ -129,6 +151,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.
  */
@@ -197,6 +227,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
  */
@@ -264,6 +298,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
@@ -380,15 +445,21 @@ export interface InspectorComponentProps {
     filter?: (b: Base) => boolean;
     /**
      * Callback invoked when the inspector is cleared.
-     * @internal
+     * @deprecated Use `v-model` approach instead
      */
     renderEmptyContainer: () => void;
     /**
      * Callback invoked when a new object has started to be edited.
      * @param obj
      * @param cb
+     * @deprecated Use `v-model` approach instead
      */
     refresh: (obj: Base) => void;
+    /**
+     * A model value that this component will apply 2-way binding to. You do not actually supply a prop named `modelValue`; you supply this as `v-model="someRef"`.
+     * @since 1.2.0
+     */
+    modelValue?: Object;
     /**
      * Optional extra css classes to set on the root element
      */

package/diagram-palette-component.d.ts

@@ -33,6 +33,9 @@ declare const DiagramPaletteComponent: {
     setup(props: DiagramPaletteProps): {
         service: unknown;
     };
+    data: () => {
+        hasMounted: boolean;
+    };
     mounted(): void;
     render: () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
         [key: string]: any;

package/index.d.ts

@@ -19,10 +19,18 @@ export * from "./miniview-component";
 export * from "./util";
 export * from "./diagram-component";
 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';
 export * from './use-zoom';
+export * from './use-visuallyjs-update';
+export * from './use-surface';
+export * from './use-diagram';
+export * from './use-paper';
+export * from './surface-popup';

package/inspector-component.d.ts

@@ -46,10 +46,14 @@ declare const InspectorComponent: {
         className: StringConstructor;
         showCloseButton: BooleanConstructor;
         afterUpdate: FunctionConstructor;
+        modelValue: ObjectConstructor;
     };
-    setup(props: InspectorComponentProps): {
+    emits: string[];
+    setup(props: InspectorComponentProps, context: any): {
         service: unknown;
         inspectorProvider: InspectorProviderStateUpdater;
+        inspector: Inspector;
+        emit: any;
     };
     mounted(): void;
     render(): import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {

package/package.json

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

@@ -29,6 +29,9 @@ declare const ShapePaletteComponent: {
     setup(props: ShapePaletteComponentProps): {
         service: unknown;
     };
+    data: () => {
+        hasMounted: boolean;
+    };
     mounted(): void;
     render: () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
         [key: string]: any;

package/surface-component.d.ts

@@ -1,7 +1,7 @@
 import { PropType } from "vue";
 import { RenderOptions, ViewOptions, SurfaceComponentProps } from "./definitions";
-import { ObjectData, ModelOptions } from "@visuallyjs/browser-ui";
-import { VertexPlaceholder } from "./util";
+import { ObjectData, ModelOptions, BrowserUIModel } from "@visuallyjs/browser-ui";
+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
@@ -25,6 +25,9 @@ export declare const SurfaceComponent: {
         viewOptions: {
             type: PropType<ViewOptions>;
         };
+        model: {
+            type: PropType<BrowserUIModel>;
+        };
         url: {
             type: StringConstructor;
         };
@@ -34,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/use-diagram.d.ts

@@ -0,0 +1,25 @@
+import { type ShallowRef } from "vue";
+import type { Diagram } from "@visuallyjs/browser-ui";
+/**
+ * Composable that provides access to a Diagram in the current scope, as a reactive ref.
+ *
+ * ```vue
+ * <script setup>
+ * import { useDiagram } from "@visuallyjs/browser-ui-vue"
+ *
+ * const diagram = useDiagram()
+ *
+ * function doSomething() {
+ *   diagram.doSomething....
+ * }
+ *
+ * </script>
+ *
+ * <template>
+ *   <button :click="doSomething()">Do something</button>
+ * </template>
+ * ```
+ *
+ * @group Hooks
+ */
+export declare function useDiagram(): ShallowRef<Diagram>;

package/use-paper.d.ts

@@ -0,0 +1,25 @@
+import { type ShallowRef } from "vue";
+import type { Paper } from "@visuallyjs/browser-ui";
+/**
+ * Composable that provides access to a Paper in the current scope, as a reactive ref.
+ *
+ * ```vue
+ * <script setup>
+ * import { usePaper } from "@visuallyjs/browser-ui-vue"
+ *
+ * const paper = usePaper()
+ *
+ * function doSomething() {
+ *   paper.doSomething....
+ * }
+ *
+ * </script>
+ *
+ * <template>
+ *   <button :click="doSomething()">Do something</button>
+ * </template>
+ * ```
+ *
+ * @group Hooks
+ */
+export declare function usePaper(): ShallowRef<Paper>;

package/use-surface.d.ts

@@ -0,0 +1,25 @@
+import { type ShallowRef } from "vue";
+import type { Surface } from "@visuallyjs/browser-ui";
+/**
+ * Composable that provides access to a Surface in the current scope, as a reactive ref.
+ *
+ * ```vue
+ * <script setup>
+ * import { useSurface } from "@visuallyjs/browser-ui-vue"
+ *
+ * const surface = useSurface()
+ *
+ * function zoomToFit() {
+ *   surface?.zoomToFit()
+ * }
+ *
+ * </script>
+ *
+ * <template>
+ *   <button :click="zoomToFit()">Zoom to fit</button>
+ * </template>
+ * ```
+ *
+ * @group Hooks
+ */
+export declare function useSurface(): ShallowRef<Surface>;

package/use-visuallyjs-update.d.ts

@@ -0,0 +1,22 @@
+import { BrowserUIVueModel } from "./browser-ui-vue";
+/**
+ * Simple composable that responds to all update events in the model, including when the model is cleared. You pass in a function that takes the model as argument, and that should be invoked when an update/clear event occurs. The function is also invoked when the initial model reference is obtained.
+ *
+ * ```vue
+ * <script setup>
+ * import { useVisuallyJsUpdate } from "@visuallyjs/browser-ui-vue"
+ * import { ref } from "vue"
+ *
+ * const count = ref(0)
+ * useVisuallyJsUpdate((model) => count.value = model.getNodeCount())
+ * </script>
+ *
+ * <template>
+ *   <h1>{{ count }}</h1>
+ * </template>
+ * ```
+ *
+ * @param callback Callback to invoke when an update occurs.
+ * @group Hooks
+ */
+export declare function useVisuallyJsUpdate(callback: (model: BrowserUIVueModel) => any): void;

package/use-zoom.d.ts

@@ -1,7 +1,18 @@
-import { BrowserUI } from '@visuallyjs/browser-ui';
 /**
- * Composable to track the current zoom level of a VisuallyJS UI in Vue.
- * @param ui The UI instance provided to the component via props.
+ * Composable to track the current zoom level of a VisuallyJS UI in Vue. This returns the current zoom as a ref, and will discover the component from which to get the zoom automatically (a Surface, Paper or Diagram)
+ *
+ * ```vue
+ * <script setup>
+ * import { useZoom } from "@visuallyjs/browser-ui-vue"
+ *
+ * const zoom = useZoom()
+ * </script>
+ *
+ * <template>
+ *   <p>Current zoom: {{ zoom }}</p>
+ * </template>
+ * ```
+ *
  * @group Hooks
  */
-export declare function useZoom(ui: BrowserUI): import("vue").Ref<number>;
+export declare function useZoom(): import("vue").Ref<number>;

package/util.d.ts

@@ -1,6 +1,6 @@
-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 */
@@ -16,6 +16,7 @@ export declare const BaseNodeComponent: {
             data: ObjectConstructor;
             model: typeof BrowserUIVueModel;
             obj: typeof Vertex;
+            vertex: typeof Vertex;
             ui: typeof BrowserUI;
             el: {
                 new (): Element;
@@ -70,6 +71,7 @@ export declare const BaseGroupComponent: {
             data: ObjectConstructor;
             model: typeof BrowserUIVueModel;
             obj: typeof Vertex;
+            vertex: typeof Vertex;
             ui: typeof BrowserUI;
             el: {
                 new (): Element;
@@ -103,6 +105,38 @@ export interface VertexPlaceholder {
     _key: string;
     props: Record<string, any>;
 }
+/**
+ * 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
@@ -113,3 +147,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, surfaceId: 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-service.d.ts

@@ -1,5 +1,6 @@
-import { Diagram, Paper, Surface } from "@visuallyjs/browser-ui";
+import { BrowserUI, BrowserUIModel, Diagram, Paper, Surface } from "@visuallyjs/browser-ui";
 import { BrowserUIVueModel } from "./browser-ui-vue";
+import { ShallowRef, UnwrapRef } from "vue";
 export declare const VisuallyJsServiceKey: unique symbol;
 /**
  * Provides access to Surface/Diagram/Paper ui components, as well as models. This service is provided in the root as an application-wide instance, but each of the providers also creates and provides an instance of this service.
@@ -14,6 +15,26 @@ export declare class VisuallyJsService {
     _surface: Surface;
     _diagram: Diagram;
     _paper: Paper;
+    /**
+     * The current surface in scope. May be null.
+     */
+    surface: ShallowRef<UnwrapRef<Surface | null>>;
+    /**
+     * The current model in scope. May be null.
+     */
+    model: ShallowRef<BrowserUIModel>;
+    /**
+     * The current paper in scope. May be null.
+     */
+    paper: ShallowRef<UnwrapRef<Paper | null>>;
+    /**
+     * The current diagram in scope. May be null.
+     */
+    diagram: ShallowRef<UnwrapRef<Diagram | null>>;
+    /**
+     * The current ui (a surface or paper) in scope. May be null.
+     */
+    ui: ShallowRef<UnwrapRef<BrowserUI | null>>;
     constructor(context: string);
     getSurface(cb: (s: Surface) => any): void;
     getDiagram(cb: (s: Diagram) => any): void;

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

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

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

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

package/vue-wrapper.d.ts

@@ -1,14 +1,45 @@
-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/overlay by a surface component.
  * @group Props
  */
-export interface VueWrapperProps<T extends Vertex = Vertex> {
+export interface VueWrapperProps<T extends Vertex | Edge = Vertex | Edge> {
+    /**
+     * Data that backs the object. Reactive.
+     */
     data: ObjectData;
+    /**
+     * Underlying model.
+     */
     model: BrowserUIModel;
+    /**
+     * Underlying UI
+     */
     ui: BrowserUI;
+    /**
+     * The vertex (node or group) or edge that is being rendered
+     * @deprecated use `vertex` or `edge` from 1.2.0 onwards
+     */
     obj: T;
+    /**
+     * The vertex (node or group) that is being rendered. Only present if a node or group is being rendered.
+     */
+    vertex?: T extends Vertex ? T : never;
+    /**
+     * The edge that is being rendered. Only present if an overlay is being rendered.
+     */
+    edge?: T extends Edge ? T : never;
+    /**
+     * The overlay that is being rendered. Only present if an overlay is being rendered.
+     */
+    overlay?: Overlay<BrowserElement>;
+    /**
+     * The underlying DOM element
+     */
     el: any;
+    /**
+     * Definition for this node/group/overlay type
+     */
     def: any;
     eventInfo: any;
 }