@visuallyjs/browser-ui-vue 1.0.0

package/diagram-component.d.ts

@@ -0,0 +1,55 @@
+import { PropType } from "vue";
+import { DiagramOptions, ObjectData, ModelOptions } from "@visuallyjs/browser-ui";
+/**
+ * @group Props
+ */
+export interface DiagramComponentProps {
+    /**
+     * Optional URL from which to load data
+     */
+    url?: string;
+    /**
+     * Optional initial data to load
+     */
+    data?: any;
+    /**
+     * Options for the underlying model.
+     */
+    modelOptions?: ModelOptions;
+    /**
+     * Options for the Diagram.
+     */
+    options: DiagramOptions;
+    /**
+     * Optional ID to assign to the Diagram so you can reference it elsewhere in the UI. It is preferable, though, to use providers for this.
+     */
+    diagramId?: string;
+}
+/**
+ * Provides a component that renders an SVG diagram.
+ * @group Components
+ */
+export declare const DiagramComponent: {
+    setup(props: DiagramComponentProps): {
+        service: unknown;
+    };
+    name: string;
+    props: {
+        data: {
+            type: PropType<ObjectData>;
+        };
+        url: {
+            type: StringConstructor;
+        };
+        modelOptions: {
+            type: PropType<ModelOptions>;
+        };
+        options: {
+            type: PropType<DiagramOptions>;
+        };
+    };
+    mounted(): void;
+    render: () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+        [key: string]: any;
+    }>;
+};

package/diagram-palette-component.d.ts

@@ -0,0 +1,41 @@
+import { PropType } from "vue";
+import { Diagram, PreparedShape, Size } from "@visuallyjs/browser-ui";
+import { DiagramPaletteProps } from "./definitions";
+declare const DiagramPaletteComponent: {
+    name: string;
+    props: {
+        fill: StringConstructor;
+        outline: StringConstructor;
+        dragSize: PropType<Size>;
+        inspector: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        iconSize: PropType<Size>;
+        showLabels: BooleanConstructor;
+        paletteStrokeWidth: NumberConstructor;
+        showAllMessage: StringConstructor;
+        onCellAdded: FunctionConstructor;
+        mode: StringConstructor;
+        allowClickToAdd: BooleanConstructor;
+        autoExitDrawMode: BooleanConstructor;
+        selectAfterAdd: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        className: StringConstructor;
+        diagram: {
+            type: PropType<Diagram>;
+        };
+        onVertexAdded: FunctionConstructor;
+        preparedShapes: PropType<Array<PreparedShape>>;
+    };
+    setup(props: DiagramPaletteProps): {
+        service: unknown;
+    };
+    mounted(): void;
+    render: () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+        [key: string]: any;
+    }>;
+};
+export { DiagramPaletteComponent };

package/diagram-provider.d.ts

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

package/edge-type-picker-component.d.ts

@@ -0,0 +1,15 @@
+import { InspectorProviderState } from "./inspector-component";
+declare const EdgeTypePickerComponent: {
+    name: string;
+    props: {
+        propertyName: StringConstructor;
+    };
+    setup(): {
+        inspectorProvider: InspectorProviderState;
+    };
+    mounted(): void;
+    render: () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+        [key: string]: any;
+    }>;
+};
+export { EdgeTypePickerComponent };

package/export-controls-component.d.ts

@@ -0,0 +1,70 @@
+import { PropType } from "vue";
+import { ImageExportUIOptions, PointXY, Surface, SvgExportUIOptions } from "@visuallyjs/browser-ui";
+import { ExportControlsComponentProps } from "./definitions";
+/**
+ * Provides a component that offers buttons for export to SVG, PNG and/or JPG.
+ */
+export declare const ExportControlsComponent: {
+    name: string;
+    setup(props: ExportControlsComponentProps): {
+        service: unknown;
+    };
+    props: {
+        surfaceId: {
+            type: StringConstructor;
+        };
+        showLabel: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        label: {
+            type: StringConstructor;
+            default: string;
+        };
+        margins: {
+            type: PropType<PointXY>;
+        };
+        /**
+         * Options for SVG exports.
+         */
+        svgOptions: {
+            type: PropType<SvgExportUIOptions>;
+        };
+        /**
+         * Options for image exports.
+         */
+        imageOptions: {
+            type: PropType<ImageExportUIOptions>;
+        };
+        /**
+         * Defaults to true.
+         */
+        allowSvgExport: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        /**
+         * Defaults to true.
+         */
+        allowPngExport: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        /**
+         * Defaults to true.
+         */
+        allowJpgExport: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+    };
+    methods: {
+        loadSurface: (cb: (s: Surface) => any) => void;
+        exportSVG: () => void;
+        exportJPG: () => void;
+        exportPNG: () => void;
+    };
+    render(): import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+        [key: string]: any;
+    }>;
+};

package/index.d.ts

@@ -0,0 +1,27 @@
+/**
+ * Provides integration with Vue 3. This package has a dependency on the @visuallyjs/browser-ui package.
+ *
+ * For a detailed discussion of this package, see https://visuallyjs.com/vue.
+ * @packageDocumentation
+ */
+export * from "./browser-ui-vue";
+export * from "./visuallyjs-browser-ui-vue";
+export * from "./shape-component";
+export * from "./shape-palette-component";
+export * from "./edge-type-picker-component";
+export * from "./inspector-component";
+export * from "./definitions";
+export * from "./controls-component";
+export * from "./export-controls-component";
+export * from "./palette-component";
+export * from './color-picker-component';
+export * from "./miniview-component";
+export * from "./util";
+export * from "./diagram-component";
+export * from "./diagram-provider";
+export * from "./chart";
+export * from "./surface-component";
+export * from "./surface-provider";
+export * from "./vue-wrapper";
+export * from './decorator-component';
+export * from './visuallyjs-service';

package/inspector-component.d.ts

@@ -0,0 +1,59 @@
+import { Inspector } from "@visuallyjs/browser-ui";
+import { InspectorComponentProps } from "./definitions";
+/**
+ * @internal
+ */
+export declare const InspectorGetterSymbol: unique symbol;
+/**
+ * @internal
+ */
+export declare const InspectorSetterSymbol: unique symbol;
+/**
+ * @internal
+ */
+export type InspectorProviderStateUpdater = {
+    inspector: (i: Inspector) => any;
+};
+export type InspectorListener = (i: Inspector) => any;
+/**
+ * @internal
+ */
+export interface InspectorProviderState {
+    listen: (fn: InspectorListener) => any;
+}
+/**
+ * Handler for inspector provision. Used by InspectorComponent if it is not inside a provider. Internal use.
+ * @internal
+ */
+export declare function doProvideInspector(): InspectorProviderStateUpdater;
+/**
+ * Inspector component.
+ */
+declare const InspectorComponent: {
+    name: string;
+    props: {
+        autoCommit: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        multipleSelections: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        filter: FunctionConstructor;
+        renderEmptyContainer: FunctionConstructor;
+        refresh: FunctionConstructor;
+        className: StringConstructor;
+        showCloseButton: BooleanConstructor;
+        afterUpdate: FunctionConstructor;
+    };
+    setup(props: InspectorComponentProps): {
+        service: unknown;
+        inspectorProvider: InspectorProviderStateUpdater;
+    };
+    mounted(): void;
+    render(): import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+        [key: string]: any;
+    }>;
+};
+export { InspectorComponent };

package/miniview-component.d.ts

@@ -0,0 +1,34 @@
+import { MiniviewComponentProps } from "./definitions";
+/**
+ * This component provides a miniview widget. See {@link MiniviewComponentProps} for a definition of supported props.
+ */
+export declare const MiniviewComponent: {
+    setup(props: MiniviewComponentProps): {
+        service: unknown;
+    };
+    name: string;
+    props: {
+        surfaceId: {
+            type: StringConstructor;
+        };
+        className: {
+            type: StringConstructor;
+            default: string;
+        };
+        activeTracking: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        clickToCenter: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        typeFunction: {
+            type: FunctionConstructor;
+        };
+    };
+    mounted: () => void;
+    render: (_ctx: any) => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+        [key: string]: any;
+    }>;
+};

package/package.json

@@ -0,0 +1 @@
+{"name":"@visuallyjs/browser-ui-vue","version":"1.0.0","description":"VisuallyJS Vue integration","module":"visuallyjs.browser-ui-vue.es.js","main":"visuallyjs.browser-ui-vue.cjs.js","types":"index.d.ts","files":["visuallyjs.browser-ui-vue.es.js","visuallyjs.browser-ui-vue.cjs.js","**/*.d.ts"],"author":"VisuallyJs <hello@visuallyjs.com> (https://visuallyjs.com)","license":"Commercial","dependencies":{"@visuallyjs/browser-ui":"1.0.0"}}

package/palette-component.d.ts

@@ -0,0 +1,67 @@
+import { PaletteComponentProps } from "./definitions";
+import { PropType } from "vue";
+import { BrowserElement, CanvasDropFilter, DataGeneratorFunction, GroupIdentifierFunction, ObjectData, OnVertexAddedCallback, PaletteMode, Size, TypeGeneratorFunction } from "@visuallyjs/browser-ui";
+export declare const PaletteComponent: {
+    setup(props: PaletteComponentProps): {
+        service: unknown;
+    };
+    name: string;
+    props: {
+        surfaceId: {
+            type: StringConstructor;
+        };
+        selector: {
+            type: StringConstructor;
+        };
+        dataGenerator: {
+            type: PropType<DataGeneratorFunction<BrowserElement>>;
+        };
+        typeGenerator: {
+            type: PropType<TypeGeneratorFunction<BrowserElement>>;
+        };
+        groupIdentifier: {
+            type: PropType<GroupIdentifierFunction<BrowserElement>>;
+        };
+        allowDropOnEdge: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        allowDropOnCanvas: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        allowDropOnGroup: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        allowDropOnNode: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        ignoreDropOnNode: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        dragSize: PropType<Size>;
+        onVertexAdded: PropType<OnVertexAddedCallback>;
+        canvasDropFilter: PropType<CanvasDropFilter<ObjectData>>;
+        className: StringConstructor;
+        mode: PropType<PaletteMode>;
+        selectAfterAdd: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        allowClickToAdd: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        clickToAddOnly: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+    };
+    mounted: () => void;
+    render: () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+        [key: string]: any;
+    }>;
+};

package/shape-component.d.ts

@@ -0,0 +1,52 @@
+import { PropType } from "vue";
+import { FontSpec, ObjectData } from "@visuallyjs/browser-ui";
+declare const ShapeComponent: {
+    name: string;
+    props: {
+        data: {
+            type: PropType<ObjectData>;
+        };
+        showLabels: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        labelProperty: {
+            type: StringConstructor;
+            default: string;
+        };
+        labelStrokeWidth: {
+            type: NumberConstructor;
+        };
+        multilineLabels: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        labelFillRatio: {
+            type: NumberConstructor;
+            default: number;
+        };
+        labelColor: {
+            type: StringConstructor;
+            default: string;
+        };
+        font: {
+            type: PropType<FontSpec>;
+        };
+    };
+    setup(): {
+        service: unknown;
+    };
+    mounted(): void;
+    updated(): void;
+    render: () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+        [key: string]: any;
+    }>;
+    methods: {
+        getWidth: () => number;
+        getHeight: () => number;
+        getFill: () => string;
+        getOutline: () => string;
+        getOutlineWidth(): number;
+    };
+};
+export { ShapeComponent };

package/shape-palette-component.d.ts

@@ -0,0 +1,37 @@
+import { PropType } from "vue";
+import { DataGeneratorFunction, ObjectData, PreparedShape, Size } from "@visuallyjs/browser-ui";
+import { ShapePaletteComponentProps } from "./definitions";
+declare const ShapePaletteComponent: {
+    name: string;
+    props: {
+        surfaceId: {
+            type: StringConstructor;
+        };
+        dragSize: PropType<Size>;
+        iconSize: PropType<Size>;
+        fill: StringConstructor;
+        outline: StringConstructor;
+        showAllMessage: StringConstructor;
+        selectAfterDrop: BooleanConstructor;
+        paletteStrokeWidth: NumberConstructor;
+        dataGenerator: PropType<DataGeneratorFunction<ObjectData>>;
+        initialSet: StringConstructor;
+        mode: StringConstructor;
+        allowClickToAdd: BooleanConstructor;
+        onVertexAdded: FunctionConstructor;
+        showLabels: BooleanConstructor;
+        inspector: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        preparedShapes: PropType<Array<PreparedShape>>;
+    };
+    setup(props: ShapePaletteComponentProps): {
+        service: unknown;
+    };
+    mounted(): void;
+    render: () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+        [key: string]: any;
+    }>;
+};
+export { ShapePaletteComponent };

package/surface-component.d.ts

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

package/surface-provider.d.ts

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

package/util.d.ts

@@ -0,0 +1,115 @@
+import { BrowserElement, BrowserUI, Surface, Vertex, ViewSpec } from "@visuallyjs/browser-ui";
+import { BrowserUIVueModel } from "./browser-ui-vue";
+import { RenderOptions } from "./definitions";
+/** @internal */
+export declare const EVENT_VERTICES_RENDERED = "vertices:rendered";
+/** @internal */
+export declare const EVENT_VERTEX_UPDATED = "vertex:updated";
+export declare function bindToDevLifecycle(surfaceId: string, event: string, handler: (a: any, e?: any) => any): void;
+/**
+ * Provides a mixin you should use to create a component that renders a node. See documentation for details.
+ *
+ */
+export declare const BaseNodeComponent: {
+    mixins: {
+        props: {
+            data: ObjectConstructor;
+            model: typeof BrowserUIVueModel;
+            obj: typeof Vertex;
+            ui: typeof BrowserUI;
+            el: {
+                new (): Element;
+                prototype: Element;
+            };
+            def: ObjectConstructor;
+            eventInfo: ObjectConstructor;
+        };
+        mounted(): void;
+        methods: {
+            /**
+             * get the underlying Visually Js instance.
+             */
+            getModel: () => any;
+            /**
+             * Removed the vertex this component represents.
+             *
+             */
+            removeVertex: () => void;
+        };
+        updated(): void;
+    }[];
+    methods: {
+        getNode: () => any;
+        removeNode: () => void;
+        updateNode: (data: any) => void;
+    };
+};
+/**
+ * Provides a mixin you should use to create a component that renders a group. See documentation for details.
+ *
+ */
+export declare const BaseGroupComponent: {
+    methods: {
+        /**
+         * Gets the underlying group from the model.
+         */
+        getGroup: () => any;
+        /**
+         * Removes the group this component represents from the model.
+         * @param removeChildNodes
+         */
+        removeGroup: (removeChildNodes?: boolean) => void;
+        /**
+         * Updates the underlying group in the model.
+         * @param data
+         */
+        updateGroup: (data: any) => void;
+    };
+    mixins: {
+        props: {
+            data: ObjectConstructor;
+            model: typeof BrowserUIVueModel;
+            obj: typeof Vertex;
+            ui: typeof BrowserUI;
+            el: {
+                new (): Element;
+                prototype: Element;
+            };
+            def: ObjectConstructor;
+            eventInfo: ObjectConstructor;
+        };
+        mounted(): void;
+        methods: {
+            /**
+             * get the underlying Visually Js instance.
+             */
+            getModel: () => any;
+            /**
+             * Removed the vertex this component represents.
+             *
+             */
+            removeVertex: () => void;
+        };
+        updated(): void;
+    }[];
+};
+/**
+ * Placeholder for vertices prior we're rendering. Not used by API users.
+ * @internal
+ */
+export interface VertexPlaceholder {
+    component: any;
+    el: BrowserElement;
+    _key: string;
+    props: Record<string, any>;
+}
+/**
+ * @internal
+ * @param model
+ * @param surfaceId
+ * @param container
+ * @param vertices
+ * @param renderParams
+ * @param view
+ */
+export declare function addSurface(model: BrowserUIVueModel, surfaceId: string, container: any, vertices: Array<VertexPlaceholder>, renderParams?: RenderOptions, view?: ViewSpec<BrowserElement>): Surface;

package/visuallyjs-browser-ui-vue.d.ts

@@ -0,0 +1,8 @@
+import { Plugin } from "vue";
+/**
+ * VisuallyJs Vue3 integration plugin. See https://visuallyjs.com/vue for details.
+ *
+ * @group Plugins
+ */
+export declare const VisuallyJsPlugin: Plugin;
+export { AreaChartComponent, BarChartComponent, ColumnChartComponent, LineChartComponent, XYChartComponent, PieChartComponent, SankeyChartComponent, BubbleChartComponent, ScatterChartComponent, GaugeChartComponent } from "./chart";

package/visuallyjs-service.d.ts

@@ -0,0 +1,34 @@
+import { Diagram, Paper, Surface } from "@visuallyjs/browser-ui";
+import { BrowserUIVueModel } from "./browser-ui-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.
+ */
+export declare class VisuallyJsService {
+    context: string;
+    _modelQueue: Array<(s: BrowserUIVueModel) => void>;
+    _surfaceQueue: Array<(s: Surface) => void>;
+    _diagramQueue: Array<(s: Diagram) => void>;
+    _paperQueue: Array<(s: Paper) => void>;
+    _model: BrowserUIVueModel;
+    _surface: Surface;
+    _diagram: Diagram;
+    _paper: Paper;
+    constructor(context: string);
+    getSurface(cb: (s: Surface) => any): void;
+    getDiagram(cb: (s: Diagram) => any): void;
+    getPaper(cb: (s: Paper) => any): void;
+    getModel(cb: (s: BrowserUIVueModel) => any): void;
+    /**
+     * Direct access to the model. Used when a component wants to know if there is a model or not, and it will use the
+     * existing model if found.
+     * @internal
+     */
+    getModelDirect(): BrowserUIVueModel;
+    private _dispatchOrQueue;
+    setSurface(s: Surface): void;
+    setDiagram(s: Diagram): void;
+    setPaper(s: Paper): void;
+    private _setModel;
+    private _flush;
+}