@visuallyjs/browser-ui 1.0.0

package/types/browser-ui/canvas-layout-adapter.d.ts

@@ -0,0 +1,15 @@
+import { Base, Group, Node } from "../core/model/graph";
+import { UICore } from "../ui/core";
+import { BaseDomUiLayoutAdapter } from "./base-dom-ui-layout-adapter";
+/**
+ * Implementation of layout adapter that operates on a Surface canvas. Vertices that are a member of a group are
+ * filtered, and `getElements` returns the list of all nodes and groups in the model, of course with those that
+ * are in a group having been filtered.
+ * @internal
+ */
+export declare class CanvasLayoutAdapter extends BaseDomUiLayoutAdapter {
+    protected uiCore: UICore<any, any>;
+    constructor(uiCore: UICore<any, any>);
+    filter(obj: Base): boolean;
+    getElements(): Array<Node | Group>;
+}

package/types/browser-ui/collicat.d.ts

@@ -0,0 +1,245 @@
+import { EventManager } from "./event-manager";
+import { VisuallyJSDOMElement } from "./element-facade";
+import { BrowserElement } from "./util";
+import { PointXY, Grid, Size } from "../core";
+import { ConstrainFunction } from "../ui";
+export interface DragStartEventParams {
+    e: MouseEvent;
+    el: VisuallyJSDOMElement;
+    pos: PointXY;
+    drag: Drag;
+    size: Size;
+}
+export interface DragEventParams extends DragStartEventParams {
+    originalPos: PointXY;
+    viewport: Size;
+}
+export type RevertEventParams = VisuallyJSDOMElement;
+export interface BeforeStartEventParams extends DragStartEventParams {
+}
+export interface DragStopEventParams extends DragEventParams {
+    finalPos: PointXY;
+    selection: Array<[VisuallyJSDOMElement, PointXY, Drag, Size]>;
+}
+export declare const EVENT_START = "start";
+export declare const EVENT_BEFORE_START = "beforeStart";
+export declare const EVENT_DRAG = "drag";
+export declare const EVENT_DROP = "drop";
+export declare const EVENT_OVER = "over";
+export declare const EVENT_OUT = "out";
+export declare const EVENT_STOP = "stop";
+export type GetPositionFunction = (el: BrowserElement) => PointXY;
+export type SetPositionFunction = (el: BrowserElement, p: PointXY) => void;
+export type SetSizeFunction = (el: BrowserElement, s: Size) => void;
+export type GetSizeFunction = (el: BrowserElement) => Size;
+declare abstract class Base {
+    protected el: VisuallyJSDOMElement;
+    protected manager: Collicat;
+    abstract _class: string;
+    uuid: string;
+    private enabled;
+    scopes: Array<string>;
+    /**
+     * @internal
+     */
+    protected eventManager: EventManager;
+    protected constructor(el: VisuallyJSDOMElement, manager: Collicat);
+    setEnabled(e: boolean): void;
+    isEnabled(): boolean;
+    toggleEnabled(): void;
+    addScope(scopes: string): void;
+    removeScope(scopes: string): void;
+    toggleScope(scopes: string): void;
+}
+export type GhostProxyGenerator = (el: Element) => Element;
+/**
+ * Dont allow any part of the drag element to be in the negative x or y axis of its parent.
+ * @group Nodes and Groups
+ * @category @category Constants
+ */
+export declare const CONTAINMENT_NOT_NEGATIVE = "notNegative";
+/**
+ * Constrain movement so at least some part of the drag element is within its parent
+ * @group Nodes and Groups
+ * @category @category Constants
+ */
+export declare const CONTAINMENT_PARENT = "parent";
+/**
+ * Constrain movement to the entire drag element is within its parent
+ * @group Nodes and Groups
+ * @category @category Constants
+ */
+export declare const CONTAINMENT_PARENT_ENCLOSED = "parentEnclosed";
+/**
+ * Containment types for draggables
+ * @group Nodes and Groups
+ * @category @category Constants
+ */
+export type ContainmentType = typeof CONTAINMENT_PARENT | typeof CONTAINMENT_PARENT_ENCLOSED | typeof CONTAINMENT_NOT_NEGATIVE;
+/**
+ * From the given containment type (and optional padding), construct a suitable ConstrainFunction.
+ * @param containment
+ * @param containmentPadding
+ * @internal
+ */
+export declare function generateConstrainFunctionFromContainmentType(containment: ContainmentType, containmentPadding?: number): ConstrainFunction<BrowserElement, MouseEvent>;
+export interface DragHandlerOptions {
+    selector?: string;
+    start?: (p: DragStartEventParams) => any;
+    stop?: (p: DragStopEventParams) => any;
+    drag?: (p: DragEventParams) => any;
+    beforeStart?: (beforeStartParams: BeforeStartEventParams) => void;
+    dragInit?: (el: Element, e: MouseEvent) => any;
+    dragAbort?: (el: Element) => any;
+    ghostProxy?: GhostProxyGenerator | boolean;
+    makeGhostProxy?: GhostProxyGenerator;
+    useGhostProxy?: (container: any, dragEl: VisuallyJSDOMElement) => boolean;
+    ghostProxyParent?: Element;
+    constrainFunction?: ConstrainFunction<BrowserElement, MouseEvent> | boolean;
+    revertFunction?: RevertFunction;
+    filter?: string;
+    filterExclude?: boolean;
+    snapThreshold?: number;
+    grid?: Grid;
+    containment?: ContainmentType;
+    containmentPadding?: number;
+}
+export interface DragParams extends DragHandlerOptions {
+    rightButtonCanDrag?: boolean;
+    consumeStartEvent?: boolean;
+    /**
+     * Whether or not to clone an element that is about to be dragged, rather than dragging the element itself.
+     */
+    clone?: boolean;
+    /**
+     * Optional size to set on cloned elements.
+     */
+    cloneSize?: Size;
+    scroll?: boolean;
+    trackScroll?: boolean;
+    canDrag?: Function;
+    consumeFilteredEvents?: boolean;
+    events?: Record<string, Function>;
+    parent?: any;
+    ignoreZoom?: boolean;
+    scope?: string;
+    /**
+     * optional function to return what the current scale of any drop target is. When provided, the
+     * drag will scale the element to drag by this amount.
+     */
+    getTargetScale?: () => number;
+}
+export declare class Drag extends Base {
+    _class: string;
+    rightButtonCanDrag: boolean;
+    consumeStartEvent: boolean;
+    clone: boolean;
+    scroll: boolean;
+    trackScroll: boolean;
+    cloneSize: Size;
+    private _downAt;
+    private _posAtDown;
+    private _moving;
+    private _lastPosition;
+    private _lastScrollValues;
+    private _initialScroll;
+    _size: Size;
+    private _currentParentPosition;
+    private _ghostParentPosition;
+    private _dragEl;
+    private _ghostProxyOffsets;
+    private _ghostDx;
+    private _ghostDy;
+    _isConstrained: boolean;
+    _ghostProxyParent: VisuallyJSDOMElement;
+    _useGhostProxy: Function;
+    _ghostProxyFunction: GhostProxyGenerator;
+    _activeSelectorParams: DragParams;
+    _availableSelectors: Array<DragParams>;
+    _canDrag: Function;
+    private readonly _consumeFilteredEvents;
+    private readonly _parent;
+    private readonly _ignoreZoom;
+    private readonly _getTargetScale;
+    _filters: Record<string, [Function, boolean]>;
+    _constrainRect: Size;
+    _elementToDrag: VisuallyJSDOMElement;
+    downListener: (e: MouseEvent) => void;
+    moveListener: (e: MouseEvent) => void;
+    upListener: (e?: MouseEvent) => void;
+    scrollTracker: (e: Event) => void;
+    listeners: Record<string, Array<Function>>;
+    constructor(el: VisuallyJSDOMElement, params: DragParams, manager: Collicat);
+    private _trackScroll;
+    on(evt: string, fn: Function): void;
+    off(evt: string, fn: Function): void;
+    private _upListener;
+    private _downListener;
+    private _moveListener;
+    /**
+     * Gets the delta between the mouse location of the down event that instigated a drag and the page location
+     * of the element that is being dragged. For internal use.
+     * @internal
+     */
+    getDragDelta(): PointXY;
+    private mark;
+    private unmark;
+    moveBy(dx: number, dy: number, e?: MouseEvent): void;
+    abort(): void;
+    getDragElement(retrieveOriginalElement?: boolean): VisuallyJSDOMElement;
+    stop(e?: MouseEvent, force?: boolean): void;
+    private _dispatch;
+    private resolveGrid;
+    /**
+     * Snap the given position to a grid, if the active selector has declared a grid.
+     * @param pos
+     */
+    private toGrid;
+    setUseGhostProxy(val: boolean): void;
+    private _doConstrain;
+    _testFilter(e: any): boolean;
+    addFilter(f: Function | string, _exclude?: boolean): void;
+    removeFilter(f: Function | string): void;
+    clearAllFilters(): void;
+    addSelector(params: DragHandlerOptions, atStart?: boolean): void;
+    destroy(): void;
+}
+export type RevertFunction = (dragEl: BrowserElement, pos: PointXY) => boolean;
+export interface CollicatOptions {
+    zoom?: number;
+    css?: Record<string, string>;
+    inputFilterSelector?: string;
+    positionGetter: GetPositionFunction;
+    getSize: GetSizeFunction;
+    positionSetter: SetPositionFunction;
+}
+/**
+ * Low level drag manager, manages a set of Drag objects.
+ * @internal
+ */
+export declare class Collicat {
+    eventManager: EventManager;
+    zoom: number;
+    css: Record<string, string>;
+    inputFilterSelector: string;
+    positionGetter: GetPositionFunction;
+    getSize: GetSizeFunction;
+    positionSetter: SetPositionFunction;
+    constructor(options: CollicatOptions);
+    getParentConstrainingRectangle(el: BrowserElement): Size;
+    private _prepareParams;
+    /**
+     * Gets the selector identifying which input elements to filter from drag events.
+     * @returns Current input filter selector.
+     */
+    getInputFilterSelector(): string;
+    /**
+     * Sets the selector identifying which input elements to filter from drag events.
+     * @param selector Input filter selector to set.
+     * @returns Current instance; method may be chained.
+     */
+    setInputFilterSelector(selector: string): this;
+    draggable(el: VisuallyJSDOMElement, params: DragParams): Drag;
+    destroyDraggable(el: VisuallyJSDOMElement): void;
+}
+export {};

package/types/browser-ui/components/controls/controls-component.d.ts

@@ -0,0 +1,137 @@
+import { BrowserElement } from "../../util";
+import { BrowserUI } from "../../browser-visuallyjs-instance";
+/**
+ * @internal
+ */
+export declare const ATTRIBUTE_RESET_SELECTION = "data-reset-selection";
+/**
+ * Orientation for controls component: 'row' or 'column'
+ * @group Components
+ * @category Controls
+ * @constant
+ */
+export declare const ATTRIBUTE_CONTROLS_ORIENTATION = "data-vjs-orientation";
+/** @internal */
+export declare const ZOOM_TO_FIT_VIEW_BOX = "0 0 32 30";
+/** @internal */
+export declare const ZOOM_TO_FIT_PATH = "M3.692 4.63c0-.53.4-.938.939-.938h5.215V0H4.708C2.13 0 0 2.054 0 4.63v5.216h3.692V4.631zM27.354 0h-5.2v3.692h5.17c.53 0 .984.4.984.939v5.215H32V4.631A4.624 4.624 0 0027.354 0zm.954 24.83c0 .532-.4.94-.939.94h-5.215v3.768h5.215c2.577 0 4.631-2.13 4.631-4.707v-5.139h-3.692v5.139zm-23.677.94c-.531 0-.939-.4-.939-.94v-5.138H0v5.139c0 2.577 2.13 4.707 4.708 4.707h5.138V25.77H4.631z";
+/** @internal */
+export declare const LASSO_VIEW_BOX = "0 0 24 24";
+/** @internal */
+export declare const LASSO_PATH = "M18.2848192,17.5777124 L20.8535534,20.1464466 C21.0488155,20.3417088 21.0488155,20.6582912 20.8535534,20.8535534 C20.6582912,21.0488155 20.3417088,21.0488155 20.1464466,20.8535534 L17.5777124,18.2848192 L15.9160251,20.7773501 C15.6899572,21.116452 15.1749357,21.0571624 15.0318354,20.6755617 L12.0318354,12.6755617 C11.8811067,12.2736185 12.2736185,11.8811067 12.6755617,12.0318354 L20.6755617,15.0318354 C21.0571624,15.1749357 21.116452,15.6899572 20.7773501,15.9160251 L18.2848192,17.5777124 L18.2848192,17.5777124 Z M17.2312404,17.0782479 L19.4104716,15.6254271 L13.3544004,13.3544004 L15.6254271,19.4104716 L17.0782479,17.2312404 C17.0974475,17.2011742 17.1201804,17.1727128 17.1464466,17.1464466 C17.1727128,17.1201804 17.2011742,17.0974475 17.2312404,17.0782479 L17.2312404,17.0782479 Z M5.5,3 C5.77614237,3 6,3.22385763 6,3.5 C6,3.77614237 5.77614237,4 5.5,4 C4.67157288,4 4,4.67157288 4,5.5 C4,5.77614237 3.77614237,6 3.5,6 C3.22385763,6 3,5.77614237 3,5.5 C3,4.11928813 4.11928813,3 5.5,3 Z M8.5,4 C8.22385763,4 8,3.77614237 8,3.5 C8,3.22385763 8.22385763,3 8.5,3 L10.5,3 C10.7761424,3 11,3.22385763 11,3.5 C11,3.77614237 10.7761424,4 10.5,4 L8.5,4 Z M13.5,4 C13.2238576,4 13,3.77614237 13,3.5 C13,3.22385763 13.2238576,3 13.5,3 L15.5,3 C15.7761424,3 16,3.22385763 16,3.5 C16,3.77614237 15.7761424,4 15.5,4 L13.5,4 Z M8.5,21 C8.22385763,21 8,20.7761424 8,20.5 C8,20.2238576 8.22385763,20 8.5,20 L10.5,20 C10.7761424,20 11,20.2238576 11,20.5 C11,20.7761424 10.7761424,21 10.5,21 L8.5,21 Z M3,8.5 C3,8.22385763 3.22385763,8 3.5,8 C3.77614237,8 4,8.22385763 4,8.5 L4,10.5 C4,10.7761424 3.77614237,11 3.5,11 C3.22385763,11 3,10.7761424 3,10.5 L3,8.5 Z M3,13.5 C3,13.2238576 3.22385763,13 3.5,13 C3.77614237,13 4,13.2238576 4,13.5 L4,15.5 C4,15.7761424 3.77614237,16 3.5,16 C3.22385763,16 3,15.7761424 3,15.5 L3,13.5 Z M3,18.5 C3,18.2238576 3.22385763,18 3.5,18 C3.77614237,18 4,18.2238576 4,18.5 C4,19.3284271 4.67157288,20 5.5,20 C5.77614237,20 6,20.2238576 6,20.5 C6,20.7761424 5.77614237,21 5.5,21 C4.11928813,21 3,19.8807119 3,18.5 Z M21,10.5 C21,10.7761424 20.7761424,11 20.5,11 C20.2238576,11 20,10.7761424 20,10.5 L20,8.5 C20,8.22385763 20.2238576,8 20.5,8 C20.7761424,8 21,8.22385763 21,8.5 L21,10.5 Z M21,5.5 C21,5.77614237 20.7761424,6 20.5,6 C20.2238576,6 20,5.77614237 20,5.5 C20,4.67157288 19.3284271,4 18.5,4 C18.2238576,4 18,3.77614237 18,3.5 C18,3.22385763 18.2238576,3 18.5,3 C19.8807119,3 21,4.11928813 21,5.5 Z";
+/** @internal */
+export declare const VERTEX_DRAWING_VIEW_BOX = "0 0 24 24";
+/** @internal */
+export declare const VERTEX_DRAWING_PATH = "M 3.88,20.08 L 3.58,15.46 M 3.58,15.46 L 14.48,0.78 M 14.48,0.78 L 18.25,3.76 M 18.25,3.76 L 7.78,18.2 M 7.7,18.2 L 3.88,20.08 M 3.58,15.46 L 7.76,18.20 M 2,5 V 20.6 M 22,5 V 20.6 M 22,20.6 H 3.94 M 2,5 H 11.2 M 17.6,5 H 22";
+/** @internal */
+export declare const PAN_VIEW_BOX = "0 0 24 24";
+/** @internal */
+export declare const PAN_PATH = "M8 13v-7.5a1.5 1.5 0 0 1 3 0v6.5 M11 5.5v-2a1.5 1.5 0 1 1 3 0v8.5 M14 5.5a1.5 1.5 0 0 1 3 0v6.5 M17 7.5a1.5 1.5 0 0 1 3 0v8.5a6 6 0 0 1 -6 6h-2h.208a6 6 0 0 1 -5.012 -2.7a69.74 69.74 0 0 1 -.196 -.3c-.312 -.479 -1.407 -2.388 -3.286 -5.728a1.5 1.5 0 0 1 .536 -2.022a1.867 1.867 0 0 1 2.28 .28l1.47 1.47";
+/** @internal */
+export declare const RESET_SELECTION_VIEW_BOX = "0 0 24 24";
+/** @internal */
+export declare const RESET_SELECTION_PATH = "M2,5 V2 H5 M9,2 H11 M13,2 H15 M19,2 H22 V5 M22,9 V11 M22,13 V15 M22,19 V22 H19 M15,22 H13 M11,22 H9 M5,22 H2 V19 M2,15 V13 M2,11 V9 M9,9 L15,15 M15,9 L9,15";
+/** @internal */
+export declare const CLEAR_VIEW_BOX = "0 0 24 24";
+/** @internal */
+export declare const CLEAR_PATH = "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z";
+export declare const ZOOM_IN_OUT_VIEW_BOX = "0 0 32 32";
+export declare const ZOOM_IN_PATH = "M 13 6 L 13 20 M 6 13 L 20 13 M 22,22 L 30,30 M1, 13 a 12,12 0 1,0 24,0 a 12,12 0 1,0 -24,0";
+export declare const ZOOM_OUT_PATH = "M 6 13 L 20 13 M 22,22 L 30,30 M1, 13 a 12,12 0 1,0 24,0 a 12,12 0 1,0 -24,0";
+/**
+ * Definition of a button in the controls component.
+ * @group Components
+ * @category Controls
+ */
+export interface ControlsComponentButton {
+    /**
+     * Button's id.
+     */
+    id: string;
+    /**
+     * Optional UI mode to set when the button is pressed
+     */
+    mode?: string;
+    /**
+     * css class to set on the button's DOM element
+     */
+    class: string;
+    /**
+     * Set as the button's DOM element's label attribute (a tooltip, effectively)
+     */
+    title: string;
+    /**
+     * Handler for clicks (taps) on this button.
+     * @param e
+     * @param id
+     */
+    handler: (e: Event, id: string) => any;
+}
+/**
+ * A list of buttons for the controls component.
+ * @group Components
+ * @category Controls
+ */
+export type ControlsComponentButtons = Array<ControlsComponentButton>;
+/**
+ * Options for the controls component.
+ * @group Components
+ * @category Controls
+ */
+export interface ControlsComponentOptions {
+    /**
+     * Whether or not to show the clear button, defaults to true.
+     */
+    clear?: boolean;
+    /**
+     * Whether or not to show undo/redo buttons, defaults to true
+     */
+    undoRedo?: boolean;
+    /**
+     * Whether or not to show the zoom to extents button, defaults to true
+     */
+    zoomToExtents?: boolean;
+    /**
+     * Whether or not to show zoom in/zoom out buttons. Defaults to false when the UI's zoom method is "wheel", and defaults to true when the UI's zoom method is "click".
+     */
+    zoom?: boolean;
+    /**
+     * Optional message to show the user when prompting them to confirm they want to clear the dataset
+     */
+    clearMessage?: string;
+    /**
+     * Optional extra buttons to add to the controls component.
+     */
+    buttons?: ControlsComponentButtons;
+    /**
+     * Optional orientation for the controls. Defaults to 'row'.
+     */
+    orientation?: 'row' | 'column';
+}
+/**
+ * Simple component offering management of pan/zoom, lasso, undo/redo, and a few other features.
+ * @group Components
+ * @category Controls
+ */
+export declare class ControlsComponent {
+    private container;
+    private _templateRenderer;
+    private _rootElement;
+    private readonly _buttons;
+    private _ui;
+    private readonly _clearMessage;
+    private readonly _orientation;
+    private readonly _showClearButton;
+    private readonly _showUndoRedoButtons;
+    private readonly _showZoomToExtentsButton;
+    private readonly _showZoomButtons;
+    /**
+     * Constructor for ControlsComponent.
+     * @param container
+     * @param ui
+     * @param options
+     */
+    constructor(container: BrowserElement, ui: BrowserUI, options?: ControlsComponentOptions);
+    private _draw;
+    private _attachEventListeners;
+}

package/types/browser-ui/components/controls/copy-paste-controls-component.d.ts

@@ -0,0 +1,9 @@
+import { BrowserElement } from "../../util";
+import { UICore } from "../../../ui";
+export interface CopyPasteControlsComponentOptions {
+    ui: UICore<BrowserElement>;
+}
+export declare class CopyPasteControlsComponent {
+    ui: UICore<BrowserElement>;
+    constructor(options: CopyPasteControlsComponentOptions);
+}

package/types/browser-ui/components/controls/css-classes.d.ts

@@ -0,0 +1,79 @@
+/**
+ * Assigned to the Pan mode button
+ * @cssClass
+ * @context controls
+ */
+export declare const CLASS_CONTROLS_PAN_MODE = "vjs-pan-mode";
+/**
+ * Assigned to the Zoom to fit button
+ * @cssClass
+ * @context controls
+ */
+export declare const CLASS_CONTROLS_ZOOM_TO_FIT = "vjs-zoom-to-fit";
+/**
+ * Assigned to the Zoom in button
+ * @cssClass
+ * @context controls
+ */
+export declare const CLASS_CONTROLS_ZOOM_IN = "vjs-zoom-in";
+/**
+ * Assigned to the Zoom out button
+ * @cssClass
+ * @context controls
+ */
+export declare const CLASS_CONTROLS_ZOOM_OUT = "vjs-zoom-out";
+/**
+ * Assigned to the Select mode button
+ * @cssClass
+ * @context controls
+ */
+export declare const CLASS_CONTROLS_SELECT_MODE = "vjs-select-mode";
+/**
+ * Assigned to the Undo button
+ * @cssClass
+ * @context controls
+ */
+export declare const CLASS_CONTROLS_UNDO = "vjs-undo";
+/**
+ * Assigned to the Redo button
+ * @cssClass
+ * @context controls
+ */
+export declare const CLASS_CONTROLS_REDO = "vjs-redo";
+/**
+ * Assigned to the Clear dataset button
+ * @cssClass
+ * @context controls
+ */
+export declare const CLASS_CONTROLS_CLEAR = "vjs-clear-dataset";
+/**
+ * Assigned to either the pan/select mode button, when that mode is active.
+ * @cssClass
+ * @context controls
+ */
+export declare const CLASS_SELECTED_MODE = "vjs-selected-mode";
+/**
+ * This class is written to the container element for a controls component.
+ * @cssClass
+ * @context controls
+ */
+export declare const CLASS_CONTROLS = "vjs-controls";
+/**
+ * This class is written to the container element for an export controls component.
+ * @cssClass
+ * @context controls
+ */
+export declare const CLASS_EXPORT_CONTROLS = "vjs-export-controls";
+/**
+ * Assigned to the reset selection button
+ * @cssClass
+ * @context controls
+ */
+export declare const CLASS_CONTROLS_RESET_SELECTION = "vjs-controls-reset-selection";
+/**
+ * This class is written to the container element for copy/paste controls component.
+ * @group Components
+ * @category Copy Paste Controls
+ * @internal
+ */
+export declare const CLASS_COPY_PASTE_CONTROLS = "vjs-copy-paste-controls";

package/types/browser-ui/components/controls/index.d.ts

@@ -0,0 +1,4 @@
+export * from './css-classes';
+export * from './copy-paste-controls-component';
+export * from './controls-component';
+export * from './svg-export-component';

package/types/browser-ui/components/controls/svg-export-component.d.ts

@@ -0,0 +1,60 @@
+import { PointXY } from "../../../core";
+import { BrowserElement } from "../../util";
+import { ImageExportUIOptions, SvgExportUIOptions } from "../../svg-export";
+import { BrowserUI } from "../../browser-visuallyjs-instance";
+/**
+ * Options for the SvgExportComponent
+ * @group Components
+ * @category Export Controls
+ */
+export interface SvgExportComponentOptions {
+    /**
+     * 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;
+}
+/**
+ * Simple component offering buttons for export of SVG, PNG or JPG from a UI that has an SVG container
+ * @group Components
+ * @category Export Controls
+ */
+export declare class SvgExportComponent {
+    private ui;
+    private _templateRenderer;
+    private readonly _rootElement;
+    /**
+     * Constructor for SvgExportComponent.
+     * @param container
+     * @param ui
+     * @param options
+     */
+    constructor(container: BrowserElement, ui: BrowserUI, options?: SvgExportComponentOptions);
+}

package/types/browser-ui/components/edge-type-picker/edge-type-picker.d.ts

@@ -0,0 +1,37 @@
+import { EdgePropertyMappings } from "../../../ui";
+import { ObjectData } from "../../../core";
+import { BrowserUI } from "../../browser-visuallyjs-instance";
+/**
+ * CSS class added to the root element of an edge type picker
+ * @group Components
+ * @category Edge Type Picker
+ */
+export declare const CLASS_EDGE_TYPE_PICKER = "vjs-edge-type-picker";
+/**
+ * CSS class added to the currently selected element in an edge type picker
+ * @group Components
+ * @category Edge Type Picker
+ */
+export declare const CLASS_EDGE_TYPE_PICKER_SELECTED = "vjs-edge-type-picker-selected";
+/**
+ * Helper class that renders a set of edge styles to the DOM and offers a callback method for when one is selected
+ * via a mouse click.
+ * @group Components
+ * @category Edge Type Picker
+ */
+export declare class EdgeTypePicker {
+    private ui;
+    private _container;
+    private _mappings;
+    private _currentValue;
+    private _onSelect;
+    constructor(ui: BrowserUI, _container: HTMLElement, _mappings: EdgePropertyMappings, _currentValue: string, _onSelect: (property: string, value: string) => any);
+    private entryMap;
+    render(property: string, data: ObjectData): void;
+    /**
+     * @internal
+     * @param property
+     * @param value
+     */
+    select(property: string, value: string): void;
+}

package/types/browser-ui/components/edge-type-picker/index.d.ts

@@ -0,0 +1 @@
+export * from './edge-type-picker';

package/types/browser-ui/components/index.d.ts

@@ -0,0 +1,4 @@
+export * from './controls';
+export * from './inspector';
+export * from './palette';
+export * from './edge-type-picker';

package/types/browser-ui/components/inspector/color-picker-tag.d.ts

@@ -0,0 +1,32 @@
+import { VanillaInspector } from "./vanilla-inspector";
+/**
+ * Assigned to the root element of a color picker
+ * @cssClass
+ * @context color-picker
+ */
+export declare const CLASS_COLOR_PICKER = "vjs-color-picker";
+/**
+ * Assigned to the element of a color picker that contains swatches
+ * @cssClass
+ * @context color-picker
+ */
+export declare const CLASS_COLOR_PICKER_SWATCHES = "vjs-color-picker-swatches";
+/**
+ * Assigned to each swatch element in a color picker
+ * @cssClass
+ * @context color-picker
+ */
+export declare const CLASS_COLOR_PICKER_SWATCH = "vjs-color-picker-swatch";
+/**
+ * The HTML element identifying the color picker.
+ * @group Components
+ * @category Inspector
+ */
+export declare const COLOR_PICKER_ELEMENT = "vjs-color";
+/**
+ * The attribute used to tell a color picker the max number of colors to show.
+ * @group Components
+ * @category Inspector
+ */
+export declare const ATTRIBUTE_COLOR_PICKER_MAX_COLORS = "vjs-max-colors";
+export declare function createColorPickerTag(inspector: VanillaInspector, contextVariableName?: string): void;