@visuallyjs/browser-ui-vue 1.0.0

package/definitions.d.ts

@@ -0,0 +1,659 @@
+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";
+export declare const DEFAULT_VUE_SURFACE_ID = "surfaceId";
+export declare const PROP_TYPE_FUNCTION = "typeFunction";
+export declare const PROP_CLICK_TO_CENTER = "clickToCenter";
+export declare const PROP_ACTIVE_TRACKING = "activeTracking";
+export declare const PROP_SURFACE_ID = "surfaceId";
+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_VIEW_OPTIONS = "viewOptions";
+export declare const PROP_URL = "url";
+export declare const PROP_INTERACTIVE = "interactive";
+export declare const PROP_PIVOT = "pivot";
+export declare const PROP_DATA_SOURCE_FILTER = "dataSourceFilter";
+export declare const PROP_CSV_DATA = "csvData";
+export declare const PROP_JSON_DATA = "jsonData";
+export declare const PROP_USE_MODEL = "useModel";
+export declare const PROP_ID = "id";
+export declare const PROP_SELECTOR = "selector";
+export declare const PROP_DATA_GENERATOR = "dataGenerator";
+export declare const PROP_TYPE_GENERATOR = "typeGenerator";
+export declare const PROP_GROUP_IDENTIFIER = "groupIdentifier";
+export declare const PROP_ALLOW_DROP_ON_EDGE = "allowDropOnEdge";
+export declare const PROP_ALLOW_DROP_ON_CANVAS = "allowDropOnCanvas";
+export declare const PROP_ALLOW_DROP_ON_GROUP = "allowDropOnGroup";
+export declare const PROP_ALLOW_DROP_ON_NODE = "allowDropOnNode";
+export declare const PROP_IGNORE_DROP_ON_NODE = "ignoreDropOnNode";
+export declare const PROP_ON_VERTEX_ADDED = "onVertexAdded";
+export declare const PROP_SELECT_AFTER_ADD = "selectAfterAdd";
+export declare const PROP_CLICK_TO_ADD_ONLY = "clickToAddOnly";
+export declare const PROP_ALLOW_CLICK_TO_ADD = "allowClickToAdd";
+export declare const PROP_DRAG_SIZE = "dragSize";
+export declare const PROP_CANVAS_DROP_FILTER = "canvasDropFilter";
+export declare const TAG_SHAPE = "Shape";
+export declare const TAG_SHAPE_PALETTE = "ShapePalette";
+export declare const DEFAULT_SHAPE_WIDTH = 120;
+export declare const DEFAULT_SHAPE_HEIGHT = 90;
+export declare const TAG_EDGE_TYPE_PICKER = "EdgeTypePickerComponent";
+export declare const TAG_COLOR_PICKER = "ColorPickerComponent";
+/**
+ * CSS class set on the root element rendered for some node
+ * @group CSS Classes
+ */
+export declare const CLASS_VUE_NODE = "vjs-vue-node";
+/**
+ * CSS class set on the root element rendered for some group
+ * @group CSS Classes
+ */
+export declare const CLASS_VUE_GROUP = "vjs-vue-group";
+/**
+ * Render options for a SurfaceComponent.
+ */
+export interface RenderOptions extends Pick<SurfaceOptions, Exclude<keyof SurfaceOptions, [
+    "view",
+    "tags",
+    "container",
+    "directRender",
+    "storePositionsInModel"
+]>> {
+}
+/**
+ * Definition of a node in the view. If you provide a `component` here, VisuallyJs will use that component to render nodes of the given type. Otherwise a default component will be used.
+ */
+export interface VueNodeMapping extends Omit<NodeMapping<BrowserElement>, "template" | "templateId" | "parameters"> {
+    /**
+     * Component used to render this node type. If you do not supply this a default component will be used.
+     */
+    component?: any;
+}
+/**
+ * Definition of a group in the view. If you provide a `component` here, VisuallyJs will use that component to render groups of the given type. Otherwise a default component will be used.
+ */
+export interface VueGroupMapping extends Omit<GroupMapping<BrowserElement>, "template" | "templateId" | "parameters"> {
+    /**
+     * Component used to render this group type. If you do not supply this a default component will be used.
+     */
+    component?: any;
+}
+/**
+ * Definition of a port in the view. This is for advanced use cases. If you provide a `component` here, VisuallyJs will use that component to render ports of the given type. Otherwise a default component will be used.
+ */
+export interface VuePortMapping extends Omit<PortMapping<BrowserElement>, "template" | "templateId" | "parameters"> {
+    /**
+     * Component used to render this port type.
+     *
+     */
+    component?: any;
+}
+/**
+ * Mapping definition for edges.
+ */
+export interface VueEdgeMapping extends EdgeMapping {
+}
+/**
+ * Options for the view in the surface component. Maps node/group/port/edge types to Components and behaviour.
+ */
+export interface ViewOptions {
+    /**
+     * Mappings for node appearance/behaviour.
+     */
+    nodes?: Record<string, VueNodeMapping>;
+    /**
+     * Mappings for group appearance/behaviour.
+     */
+    groups?: Record<string, VueGroupMapping>;
+    /**
+     * Port mappings. Because of Vue's reactivity, separate port mappings are rarely needed, but they are available if you need them.
+     */
+    ports?: Record<string, VuePortMapping>;
+    /**
+     * Mappings for edge appearance/behaviour.
+     */
+    edges?: Record<string, VueEdgeMapping>;
+}
+/**
+ * Miniview component tag
+ */
+export declare const COMPONENT_MINIVIEW = "MiniviewComponent";
+/**
+ * Surface component tag
+ */
+export declare const COMPONENT_SURFACE = "SurfaceComponent";
+/**
+ * Tag for the SurfaceProvider.
+ */
+export declare const COMPONENT_SURFACE_PROVIDER = "SurfaceProvider";
+/**
+ * Tag for the DiagramProvider.
+ */
+export declare const COMPONENT_DIAGRAM_PROVIDER = "DiagramProvider";
+/**
+ * Palette component tag
+ */
+export declare const COMPONENT_PALETTE = "PaletteComponent";
+/**
+ * Controls component tag
+ */
+export declare const COMPONENT_CONTROLS = "ControlsComponent";
+/**
+ * SVG/PNG/JPG export controls component tag
+ */
+export declare const COMPONENT_EXPORT_CONTROLS = "ExportControlsComponent";
+/**
+ * Diagram component tag
+ */
+export declare const COMPONENT_DIAGRAM = "DiagramComponent";
+/**
+ * Diagram palette component tag
+ */
+export declare const COMPONENT_DIAGRAM_PALETTE = "DiagramPaletteComponent";
+/**
+ * Column chart component tag
+ */
+export declare const COMPONENT_COLUMN_CHART = "ColumnChartComponent";
+/**
+ * Bar chart component tag
+ */
+export declare const COMPONENT_BAR_CHART = "BarChartComponent";
+/**
+ * XY chart component tag
+ */
+export declare const COMPONENT_XY_CHART = "XYChartComponent";
+/**
+ * Line chart component tag
+ */
+export declare const COMPONENT_LINE_CHART = "LineChartComponent";
+/**
+ * Area chart component tag
+ */
+export declare const COMPONENT_AREA_CHART = "AreaChartComponent";
+/**
+ * Pie chart component tag
+ */
+export declare const COMPONENT_PIE_CHART = "PieChartComponent";
+/**
+ * Scatter chart component tag
+ */
+export declare const COMPONENT_SCATTER_CHART = "ScatterChartComponent";
+/**
+ * Bubble chart component tag
+ */
+export declare const COMPONENT_BUBBLE_CHART = "BubbleChartComponent";
+/**
+ * Gauge chart component tag
+ */
+export declare const COMPONENT_GAUGE_CHART = "GaugeChartComponent";
+/**
+ * Sankey chart component tag
+ */
+export declare const COMPONENT_SANKEY_CHART = "SankeyChartComponent";
+/**
+ * inspector component tag
+ */
+export declare const COMPONENT_INSPECTOR = "InspectorComponent";
+/**
+ * HTML tag for a decorator
+ */
+export declare const TAG_DECORATOR = "Decorator";
+/**
+ * Supported props for the {@link MiniviewComponent}.
+ * @group Props
+ */
+export interface MiniviewComponentProps {
+    /**
+     * ID of the surface to attach to. This is optional; Visually JS will use the default surface ID if you do not
+     * provide this. For apps where there's only one surface there is no need to provide this.
+     */
+    surfaceId?: string;
+    /**
+     * Optional CSS to add to the container element for the miniview.
+     */
+    className?: string;
+    /**
+     * Defaults to true, meaning the miniview will automatically track element dragging.
+     */
+    activeTracking?: boolean;
+    /**
+     * Defaults to true - a click on an element in the miniview will center the related element in the surface the
+     * miniview is attached to.
+     */
+    clickToCenter?: boolean;
+}
+/**
+ * Supported props for the {@link SurfaceComponent}.
+ * @group Props
+ */
+export interface SurfaceComponentProps {
+    /**
+     * ID of the surface to attach to. This is optional; Visually JS will use the default surface ID if you do not
+     * provide this. For apps where there's only one surface there is no need to provide this.
+     */
+    surfaceId?: string;
+    /**
+     * Parameters to configure the underlying surface.
+     */
+    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
+ */
+export interface ShapeComponentProps {
+    /**
+     * Backing data for the vertex
+     */
+    obj: ObjectData;
+    /**
+     * Whether or not to show labels Defaults to false.
+     */
+    showLabels?: boolean;
+    /**
+     * Name of the property containing the object's label. Defaults to "label".
+     */
+    labelProperty?: string;
+    /**
+     * Stroke width for the label text.
+     */
+    labelStrokeWidth?: number;
+    /**
+     * Defaults to true - the label will be drawn across multiple lines.
+     */
+    multilineLabels?: boolean;
+    /**
+     * When using a multiline label, defines the maximum width of any given line.
+     */
+    labelFillRatio?: number;
+    /**
+     * Color for the label. Defaults to #000000.
+     */
+    labelColor?: string;
+}
+/**
+ * Props for the ShapePaletteComponent
+ * @group Props
+ */
+export interface ShapePaletteComponentProps {
+    /**
+     * ID of the surface to attach to. This is optional; Visually JS will use the default surface ID if you do not provide this. For apps where there's only one surface there is no need to provide this.
+     */
+    surfaceId?: string;
+    /**
+     * Optional size to use for dragged elements.
+     */
+    dragSize?: Size;
+    /**
+     * Optional size to use for icons
+     */
+    iconSize?: Size;
+    /**
+     * Optional fill color to use for dragged elements. This should be in RGB format, _not_ a color like 'white' or 'cyan' etc
+     */
+    fill?: string;
+    /**
+     * Optional color to use for outline of dragged elements. Should be in RGB format.
+     */
+    outline?: string;
+    /**
+     * Message to use for the 'show all' option in the shape set drop down when there is more than one set of shapes. Defaults to `Show all`.
+     */
+    showAllMessage?: string;
+    /**
+     * When true (which is the default), a newly dropped vertex will be set as the underlying model's selection.
+     */
+    selectAfterDrop?: boolean;
+    /**
+     * Stroke width to use for shapes in palette. Defaults to 1.
+     */
+    paletteStrokeWidth?: number;
+    /**
+     * Mode of operation, supported values are "tap" and "drag" - default is "drag".
+     */
+    mode?: "tap" | "drag";
+    /**
+     * Optional function you can use to set some initial data for an element being dragged. Note that you cannot override the object's `type` with this function.
+     */
+    dataGenerator?: DataGeneratorFunction<ObjectData>;
+    /**
+     * When in tap mode, allow addition of new vertices simply by clicking, instead of requiring a shape be drawn. (When this is true, the drawing method also still works)
+     */
+    allowClickToAdd?: boolean;
+    /**
+     * Optional callback to invoke when a vertex has been dragged onto/dropped on the canvas
+     */
+    onVertexAdded?: OnVertexAddedCallback;
+    /**
+     * Indicates two things: first, when one or more vertices are selected, clicking on an entry in the palette will change the type of the selected vertices to that type. Secondly, selecting an element in the canvas will cause its related shape to be selected in the palette. Defaults to true.
+     */
+    inspector?: boolean;
+    /**
+     * Optional set of prepared shapes to show in the palette. When this is provided, the palette will only render these shapes, and not the contents of the shape library.
+     */
+    preparedShapes?: Array<PreparedShape>;
+}
+/**
+ * Props for the InspectorComponent
+ * @group Props
+ */
+export interface InspectorComponentProps {
+    /**
+     * Whether or not to auto commit on enter keypress/blur. Defaults to true.
+     */
+    autoCommit?: boolean;
+    /**
+     * Whether or not to support multiple selections. Defaults to true.
+     */
+    multipleSelections?: boolean;
+    /**
+     * Optional filter you can use to instruct the inspector to ignore certain items.
+     * @param b The object to test
+     */
+    filter?: (b: Base) => boolean;
+    /**
+     * Callback invoked when the inspector is cleared.
+     * @internal
+     */
+    renderEmptyContainer: () => void;
+    /**
+     * Callback invoked when a new object has started to be edited.
+     * @param obj
+     * @param cb
+     */
+    refresh: (obj: Base) => void;
+    /**
+     * Optional extra css classes to set on the root element
+     */
+    className?: string;
+    /**
+     * Whether or not to show a close button. Defaults to false.
+     */
+    showCloseButton?: boolean;
+    /**
+     * Optional function to invoke after an update.
+     * @param s
+     */
+    afterUpdate?: (s: Surface) => void;
+    /**
+     * Optional ID of the surface to attach to. It is better to nest this component inside a SurfaceComponent or SurfaceProvider.
+     */
+    surfaceId?: string;
+}
+/**
+ * Props for the ControlsComponent
+ * @group Props
+ */
+export interface ControlsComponentProps {
+    /**
+     * Defaults to true. Whether or not to show the 'clear dataset' button.
+     */
+    clear?: boolean;
+    /**
+     * ID of the surface to attach to. Optional, a default will be used if not provided.
+     */
+    surfaceId?: string;
+    /**
+     * Defaults to true, meaning show the undo/redo buttons.
+     */
+    undoRedo?: boolean;
+    /**
+     * Defaults to 'row' - whether to show buttons in a row or a column
+     */
+    orientation: 'row' | 'column';
+    /**
+     * Defaults to true, meaning the 'zoom to extents' button will be shown.
+     */
+    zoomToExtents?: boolean;
+    /**
+     * Defaults to false, meaning the zoom in/zoom out buttons are not shown by default.
+     */
+    zoomButtons?: boolean;
+    /**
+     * Optional message to use when the user presses the clear button. Defaults to 'Clear dataset?'.
+     */
+    clearMessage?: string;
+    /**
+     * A function to use instead of the browser's default prompt when the user presses the clear button.
+     */
+    onMaybeClear?: Function;
+    /**
+     * Optional class name(s) to attach to the component's container element.
+     */
+    className?: string;
+}
+/**
+ * Props for the ExportControlsComponent
+ * @group Props
+ */
+export interface ExportControlsComponentProps {
+    /**
+     * Whether or not to show a label in front of the buttons. Defaults to true.
+     */
+    showLabel?: boolean;
+    /**
+     * What to show in the label, if visible. Defaults to "Export:".
+     */
+    label?: string;
+    /**
+     * Optional margins to apply to both SVG and image exports. Will not override any margins specified in svgOptions or imageOptions.
+     */
+    margins?: PointXY;
+    /**
+     * Options for SVG exports.
+     */
+    svgOptions?: SvgExportUIOptions;
+    /**
+     * Options for image exports.
+     */
+    imageOptions?: ImageExportUIOptions;
+    /**
+     * Defaults to true.
+     */
+    allowSvgExport?: boolean;
+    /**
+     * Defaults to true.
+     */
+    allowPngExport?: boolean;
+    /**
+     * Defaults to true.
+     */
+    allowJpgExport?: boolean;
+    /**
+     * The name of the property that holds the label for a vertex
+     */
+    labelProperty?: string;
+    /**
+     * Optional ID of the surface to attach to. It is better to nest this component inside a SurfaceComponent or SurfaceProvider.
+     */
+    surfaceId?: string;
+}
+/**
+ * Props for the `PaletteComponent`
+ * @group Props
+ */
+export interface PaletteComponentProps {
+    /**
+     * CSS 3 selector identifying what child elements of `container` are draggable/can be tapped. Optional. If omitted, a default of `[data-vjs-type]` will be used.
+     */
+    selector?: string;
+    /**
+     * Function to use to get a dataset for an item that is being dragged/has been tapped. If omitted, Visually JS will use a default data generator that extracts data values from any `data-vjs-***` attribute on the element being dragged.
+     */
+    dataGenerator?: DataGeneratorFunction<BrowserElement>;
+    /**
+     * Function to use to get the type of an item that is being dragged/has been tapped.
+     */
+    typeGenerator?: TypeGeneratorFunction<BrowserElement>;
+    /**
+     * Function to use to determine whether an item that is being dragged/has been tapped represents a group.
+     */
+    groupIdentifier?: GroupIdentifierFunction<BrowserElement>;
+    /**
+     * Whether or not to allow drop on edge. Defaults to false.
+     */
+    allowDropOnEdge?: boolean;
+    /**
+     * Whether or not to allow drop on whitespace in the canvas. Defaults to true.
+     */
+    allowDropOnCanvas?: boolean;
+    /**
+     * Whether or not to allow drop on existing vertices. Defaults to true.
+     */
+    allowDropOnGroup?: boolean;
+    /**
+     * Optional size to use for elements dragged from the palette; used in drag mode only.
+     */
+    dragSize?: Size;
+    /**
+     * Optional callback that will be invoked after a new vertex has been dropped and added to the dataset.
+     * @param v
+     */
+    onVertexAdded?: OnVertexAddedCallback;
+    /**
+     * Defaults to false. When true, a newly added vertex is set as the model's current selection.
+     */
+    selectAfterAdd?: boolean;
+    /**
+     * Optional extra css classes to set on the element
+     */
+    className?: string;
+    /**
+     * Optional filter to test if objects may be dropped on the canvas.
+     */
+    canvasDropFilter?: CanvasDropFilter<BrowserElement>;
+    /**
+     * The surface to attach to. Optional: this component can derive a surface from a SurfaceProvider or SurfaceComponent. You'll only need this in certain advanced scenarios.
+     */
+    surface?: Surface;
+    /**
+     * Mode to operate in - 'drag', 'tap' or 'draw'. Defaults to 'drag'.
+     */
+    mode?: PaletteMode;
+    /**
+     * When in draw mode, allow addition of new vertices simply by clicking, instead of requiring a shape be drawn. (When this is true, the drawing method also still works)
+     */
+    allowClickToAdd?: boolean;
+    /**
+     * This flag relates to "draw" mode, and defaults to false. When true, the palette only supports click to draw new vertices, not drag. This flag is forced to true if the associated UI does not have `useModelForSizes` set, since there is no point in allowing a user to drag a vertex to some size if its not going to be honoured. When you set this flag and associated UI does have `useModelForSizes` set, the palette will use default sizes for new nodes/groups.
+     */
+    clickToAddOnly?: boolean;
+    /**
+     * Defaults to false. Allows items to be dropped onto nodes in the canvas. If this is true and an element is dropped onto a node, the result is the same as if the element has been dropped onto whitespace. Note that when this is false and the user has dragged something over a node, the drag item is still not considered to be over the canvas, and releasing the mouse button at that time will not cause a new node to be added. Use `ignoreDropOnNode` if that's the behaviour you want.
+     */
+    allowDropOnNode?: boolean;
+    /**
+     * Defaults to false. When true, the palette treats nodes as if they are part of the canvas - a user can drag new items on top of existing nodes and the new item will be added to the canvas. If you want to force your users to drop on canvas whitespace, don't set this.  Note that this flag will force `allowDropOnNode` to `false`.
+     */
+    ignoreDropOnNode?: boolean;
+}
+/**
+ * Options for the DiagramPalette component
+ * @group Props
+ */
+export interface DiagramPaletteProps {
+    /**
+     * Optional fill color to use for new elements. This should be in RGB format, _not_ a color like 'white' or 'cyan' etc.
+     */
+    fill?: string;
+    /**
+     * Optional color to use for outline of dragged elements. Should be in RGB format.
+     */
+    outline?: string;
+    /**
+     * Optional size to use for dragged elements.
+     */
+    dragSize?: Size;
+    /**
+     * Indicates that when one or more vertices are selected, clicking on an entry in the palette will change the type of the selected vertices to that type. Defaults to true.
+     */
+    inspector?: boolean;
+    /**
+     * Optional size to use for icons. Defaults to 150x100 pixels. If you provide this but not `dragSize` this size will also be used for an icon that is being dragged.
+     */
+    iconSize?: Size;
+    /**
+     * Optionally show each shape icon's label underneath it
+     */
+    showLabels?: boolean;
+    /**
+     * Stroke width to use for shapes in palette. Defaults to 1.
+     */
+    paletteStrokeWidth?: number;
+    /**
+     * Message to use for the 'show all' option in the shape set drop down when there is more than one set of shapes. Defaults to `Show all`.
+     */
+    showAllMessage?: string;
+    /**
+     * Callback to invoke when a new diagram cell has been added.
+     * @param dc
+     */
+    onCellAdded?: (dc: DiagramCell) => any;
+    /**
+     * Mode to operate in - 'drag' or 'tap'. Defaults to 'drag' (PALETTE_MODE_DRAG).
+     */
+    mode?: PaletteMode;
+    /**
+     * When in tap mode, allow addition of new vertices simply by clicking, instead of requiring a shape be drawn. (When this is true, the drawing method also still works)
+     */
+    allowClickToAdd?: boolean;
+    /**
+     * Defaults to true: when in 'tap' mode and a new group/node has been drawn on the canvas, the UI is set back to pan mode.
+     */
+    autoExitDrawMode?: boolean;
+    /**
+     * When true (which is the default), a newly dropped shape will be set as the underlying model's selection.
+     */
+    selectAfterAdd?: boolean;
+    /**
+     * Optional diagram to attach to. In most cases it is better to use a DiagramProvider to provision the diagram to this component.
+     */
+    diagram?: Diagram;
+    /**
+     * Optional class name to set on the diagram palette root element.
+     */
+    className?: string;
+    /**
+     * Optional set of prepared shapes to show in the palette. When this is provided, the palette will only render these shapes, and not the contents of the shape library.
+     */
+    preparedShapes?: Array<PreparedShape>;
+}
+/**
+ * @group Props
+ */
+export interface ColorPickerComponentProps {
+    /**
+     * The name of the property to bind to.
+     */
+    propertyName: string;
+    /**
+     * Maximum number of color swatches to show, defaults to 10
+     */
+    maxColors?: number;
+}
+/**
+ * @group Props
+ */
+export interface EdgeTypePickerComponentProps {
+    /**
+     * The name of the property to bind to.
+     */
+    propertyName: string;
+}