@visuallyjs/browser-ui 1.0.0

package/types/browser-ui/surface-renderer/surface.d.ts

@@ -0,0 +1,665 @@
+import { Decorator } from "./decorators";
+import { PanZoom } from '../pan-zoom';
+import { PanOptions, ZoomOptions } from '../pan-zoom-options';
+import { TemplateRenderer } from "../browser-ui";
+import { UIPath } from '../ui-path';
+import { FixedElement, FixedElementConstraints } from "../fixed-layer";
+import { SurfaceOptions } from "./surface-render-options";
+import { Base, Node, Group, Edge, Port, Vertex, ObjectData, VisuallyJsSelection, PathOptions, DataSource, NodeRemovedParams, PointXY, RectangleXY, ZoomRange, LayoutResultSet, GroupRemovedParams } from '../../core';
+import { Connection, SupportsElementDragging, DragOptions, Overlay, ViewportBounds, UIExportOptions, ZoomToFitIfNecessaryOptions, ZoomToFitOptions, ZoomToElementsOptions, ViewportNodeElement, ViewportElement, ViewportGroupElement, CenterContentOptions, AlignContentOptions, AlignContentToFaceOptions } from "../../ui";
+import { BrowserUI } from "../browser-visuallyjs-instance";
+import { BrowserElement } from "../util";
+import { EdgeInputMethod } from "../edge-input-handler";
+import { ModelEventCallback, SurfaceEvents, SurfaceMode, SurfaceSaveData, SurfaceVertexCloneOptions } from "./definitions";
+import { EdgePathEditor } from "../connector-editors";
+import { ConnectorEditorActivateParams } from "../connector-editor";
+import { ElementDragHandler2, InternalDragGroupSpec } from "../element-drag-handler-2";
+import { Background, DragGroupSpec, SupportsPathEditing, SupportsViewportManipulation, ZoomToExtentsOptions } from "../definitions";
+import { BrowserUIModel } from "../browser-ui";
+import { MiniviewPluginOptions } from "./plugins";
+/**
+ * Provides a canvas on which nodes, groups and edges can be rendered, with support for pan/zoom, layouts and various plugins. This is not a class that API users should instantiate directly: for users of a library integration, a Surface will be created internally by the appropriate component; for users of vanilla VisuallyJs, a Surface is created either via the {@link createSurface} factory method, or via a `render` call on an instance of the {@link BrowserUIModel}.
+ * @group Components
+ */
+export declare class Surface extends BrowserUI<SurfaceEvents> implements SupportsElementDragging<BrowserElement>, SupportsPathEditing, SupportsViewportManipulation {
+    model: BrowserUIModel;
+    static type: string;
+    private canvasElement;
+    vertexLayer: BrowserElement;
+    toolsLayer: BrowserElement;
+    vertexGroup: BrowserElement;
+    edgeGroup: BrowserElement;
+    labelGroup: BrowserElement;
+    private _decorators;
+    readonly zoomOptions: ZoomOptions;
+    readonly panOptions: PanOptions;
+    /**
+     * @internal
+     */
+    panZoom: PanZoom;
+    $wheelReverse: boolean;
+    protected $edgePathEditor: EdgePathEditor;
+    protected $edgeInputMethod: EdgeInputMethod;
+    protected $editEdgesOnTap: boolean;
+    private _elementsDraggable;
+    dragOptions: DragOptions<BrowserElement>;
+    protected elementDragHandler: ElementDragHandler2;
+    private _edgeInputHandler;
+    mode: string;
+    /**
+     * @internal
+     * @param model
+     * @param dataSource
+     * @param container
+     * @param params
+     * @param templateRenderer
+     */
+    constructor(model: BrowserUIModel, dataSource: DataSource, container: BrowserElement, params: SurfaceOptions, templateRenderer: TemplateRenderer<BrowserElement>);
+    $getCanvasElement(): BrowserElement;
+    $getDragViewportContainer(): BrowserElement;
+    /**
+     * Indicates that this class supports element dragging.
+     * @internal
+     * @override
+     */
+    $isDraggingSupported(): boolean;
+    $nodeRemoved(deletion: NodeRemovedParams): ViewportElement<BrowserElement>;
+    /**
+     * Notification from the model that a group was removed. We hand off to the superclass first, then we remove the
+     * group's element from the pan/zoom, and reinstate any child elements to the pan/zoom if children were not
+     * removed.
+     * @internal
+     */
+    $groupRemoved(deletion: GroupRemovedParams): ViewportGroupElement<BrowserElement>;
+    /**
+     * @internal
+     */
+    $afterRefresh(p: LayoutResultSet): void;
+    private _decorate;
+    $afterRelayout(p: LayoutResultSet): void;
+    /**
+     * Implementation of private method from base UI.
+     * @param params
+     * @internal
+     */
+    $zoomToFit(params?: ZoomToFitOptions): void;
+    /**
+     * Implementation of private method from base UI.
+     * @param params
+     * @internal
+     */
+    $zoomToFitIfNecessary(params?: ZoomToFitIfNecessaryOptions): void;
+    /**
+     * At the start of an element drag we want the pan/zoom to take a snapshot of its current compound zoom.
+     * @param e
+     * @private
+     */
+    protected _elementDragInit(e: MouseEvent): void;
+    /**
+     * From the SupportsElementDragging interface.
+     * @internal
+     * @param dirX
+     * @param dirY
+     * @param dx
+     * @param dy
+     * @param interval
+     * @param cb
+     */
+    $startPanRepeat(dirX: 1 | 0 | -1, dirY: 1 | 0 | -1, dx: number, dy: number, interval: number, cb?: (total: PointXY) => any): void;
+    /**
+     * From the SupportsElementDragging interface.
+     * @internal
+     * @private
+     */
+    $stopPanRepeat(): void;
+    /**
+     * Returns whether or not element drag can start - checks the current mode and also the `elementsDraggable` class
+     * member.
+     * @internal
+     * @override
+     */
+    $canStartElementDrag(): boolean;
+    /**
+     * Zooms the viewport so that all of the given elements are visible.
+     * @param zParams
+     * @internal
+     * @tags zoom
+     */
+    $zoomToElements(zParams: ZoomToElementsOptions<BrowserElement>): void;
+    /**
+     * Gets all of the managed nodes that are visible, or partly visible, in the current viewport.
+     * @internal
+     */
+    $getNodesInViewport(): Array<{
+        el: ViewportNodeElement<BrowserElement>;
+        bb: RectangleXY;
+    }>;
+    /**
+     * Gets all of the managed groups that are visible, or partly visible, in the current viewport.
+     * @internal
+     */
+    $getGroupsInViewport(): Array<{
+        el: ViewportGroupElement<BrowserElement>;
+        bb: RectangleXY;
+    }>;
+    protected $edgeTap(payload: {
+        obj: Edge;
+        e: MouseEvent;
+        connection: Connection<BrowserElement>;
+        overlay?: Overlay<BrowserElement>;
+    }): void;
+    private _getWheelOptions;
+    /**
+     * Notification that the graph was cleared. We remove everything from our model instance (but do not unbind any event listeners).
+     * @internal
+     */
+    $graphClearStart(): void;
+    $appendElementToToolsLayer(el: BrowserElement, insertAtStart?: boolean): void;
+    $appendElementToVertexLayer(el: BrowserElement, insertAtStart?: boolean): void;
+    $appendOverlayElement(e: BrowserElement, insertAtStart?: boolean): void;
+    $appendVertexElement(e: BrowserElement, insertAtStart?: boolean): void;
+    $appendEdgeElement(e: BrowserElement, insertAtStart?: boolean): void;
+    /**
+     * Internal callback to register an edge path editor and ensure that the various editors are initialized.
+     * @param editor
+     * @internal
+     */
+    $_attachEdgePathEditor(editor: EdgePathEditor): void;
+    /**
+     * Adds the given element to the given drag group, with the given assignment. If the assignment is `assigned` but the element is already in some group with assignment `added` (ie. explicitly by a user), this method has no effect. This method is not intended to be called from user code; it is called internally by this class and also by the drag groups plugin.
+     * @internal
+     * @param spec
+     * @param els
+     */
+    $addToDragGroup(spec: InternalDragGroupSpec, ...els: Array<string | BrowserElement | Node | Group>): void;
+    /**
+     * @internal
+     * @param els
+     */
+    $_assignRemoveFromDragGroup(...els: Array<string | BrowserElement | Node | Group>): void;
+    /**
+     * @override
+     * @param d
+     * @internal
+     */
+    $select(d: {
+        append: boolean;
+        obj: Base;
+        selection: VisuallyJsSelection;
+    }): void;
+    /**
+     * @internal
+     * @param d
+     */
+    $deselect(d: {
+        selection: VisuallyJsSelection;
+        obj: Base;
+    }): void;
+    $selectionCleared(sel: VisuallyJsSelection): any;
+    /**
+     * Save the dataset and the current state of the Surface - its pan and zoom settings.
+     * @param options
+     * @tags input/output
+     */
+    save(options?: UIExportOptions): SurfaceSaveData;
+    /**
+     * Load the dataset and the current state of the Surface - its pan and zoom settings.
+     * @param data
+     * @param onload Optional function to invoke after load.
+     */
+    load(data: SurfaceSaveData, onload?: Function): void;
+    /**
+     * Start editing the given edge or connection, optionally with the given edit parameters.
+     * @param edgeOrConnection
+     * @param params
+     *
+     */
+    startEditingPath<T extends ConnectorEditorActivateParams<BrowserElement>>(edgeOrConnection: Edge | Connection<BrowserElement>, params?: T): void;
+    /**
+     * Stop editing any connector paths.
+     *
+     */
+    stopEditingPath(): void;
+    /**
+     * Clear the edits for the given connection, returning its path to the automatically computed path.
+     * @param edgeOrConnection
+     *
+     */
+    clearPathEdits(edgeOrConnection: string | Edge | Connection<BrowserElement>): boolean;
+    getVisibleCanvasBounds(): RectangleXY;
+    /**
+     * Adds a filter to the drag handler.
+     * @param filter
+     * @param exclude
+     */
+    addDragFilter(filter: (e: MouseEvent) => boolean, exclude?: boolean): void;
+    /**
+     * Adds a CSS class filter to the drag handler.
+     * @param clazz Either a single class name, or a comma separated list of classnames, or an array of classnames.
+     */
+    addDragClassnameFilter(clazz: string | Array<string>): void;
+    /**
+     * Adds a CSS3 selector filter to the drag handler. A drag cannot start on an element that matches this selector.
+     * @param selector A valid CSS3 selector.
+     */
+    addDragSelectorFilter(selector: string): void;
+    /**
+     * Removes a CSS class filter from the drag handler.
+     * @param clazz Either a single class name, or a comma separated list of classnames, or an array of classnames.
+     */
+    removeDragClassnameFilter(clazz: string | Array<string>): void;
+    /**
+     * Adds the given element(s) to the given drag group.
+     * @param spec Either the ID of some drag group, in which case the elements are all added as 'active', or an object containing the ID of the drag group and the element's participation in the group. `active` participation, which is the default, indicates whether dragging the given element(s) should cause all the elements in the drag group to be dragged. If `active` is false it means the given element(s) is "passive" and should only move when an active member of the drag group is dragged. The elements passed in to this method will be added to the drag group with an `added` membership flag, meaning any drag group an element has been added to via this method will take precedence over a drag group an element gets added to via a drag group assigner (see the DragGroupsPlugin for a discussion of automatically assigning elements to drag groups)
+     * @param els Elements to add to the drag group.
+     *
+     */
+    addToDragGroup(spec: DragGroupSpec | string, ...els: Array<string | BrowserElement | Node | Group>): void;
+    /**
+     * Removes the given element(s) from any drag group they may be in. You don't need to supply the drag group id, as elements can only be in one drag group anyway.
+     * @param els Elements to remove from drag groups.
+     */
+    removeFromDragGroup(...els: Array<string | BrowserElement | Node | Group>): void;
+    /**
+     * Sets the active/passive state for the given element(s) in their respective drag groups (if any). You don't need to supply the drag group id, as elements can only be in one drag group anyway.
+     * @param state true for active, false for passive.
+     * @param els
+     *
+     */
+    setDragGroupState(state: boolean, ...els: Array<string | BrowserElement | Node | Group>): void;
+    /**
+     * Removes all members from the drag group with the given name.
+     * @param name
+     *
+     */
+    clearDragGroup(name: string): void;
+    /**
+     * Attach a miniview to this Surface. This is a shortcut for adding one via addPlugin.
+     * @param options
+     */
+    attachMiniview(options: MiniviewPluginOptions): void;
+    /**
+     * Magnetize the elements in the display, using the location of the given MouseEvent as the origin.
+     * @param event
+     * @magnetizer
+     */
+    magnetizeAtEvent(event: MouseEvent): void;
+    /**
+     * Positions a DOM element at a given X,Y on the canvas, in canvas coordinates (meaning it takes into account the current zoom and pan). This is not intended for use with elements the surface is managing: it is designed to be used with elements such as pop-ups that you may wish to position relative to the content in your canvas.
+     * @param el Element to position.
+     * @param x X location on canvas to move element's left edge to.
+     * @param y Y location on canvas to move element's top edge to.
+     * @param xShift Optional absolute number of pixels to shift the element by in the x axis after calculating its position relative to the canvas. Typically you'd use this to place something other than the top left corner of your element at the desired location.
+     * @param yShift Optional absolute number of pixels to shift the element by in the y axis after calculating its position relative to the canvas.
+     * @param ensureOnScreen If true, will ensure that x and y positions are never negative.
+     *
+     */
+    positionElementAt(el: BrowserElement, x: number, y: number, xShift?: number, yShift?: number, ensureOnScreen?: boolean): void;
+    /**
+     * Positions a DOM element at the apparent canvas location corresponding to the page location given by some event. This is not intended for use with elements the surface is managing: it is designed to be used with elements such as pop-ups that you may wish to position relative to the content in your canvas.
+     * @param el - Element to position.
+     * @param evt - Event to position element at.
+     * @param xShift - Optional absolute number of pixels to shift the element by in the x axis after calculating its position relative to the canvas. Typically you'd use this to place something other than the top left corner of your element at the desired location.
+     * @param yShift - Optional absolute number of pixels to shift the element by in the y axis after calculating its position relative to the canvas.
+     *
+     */
+    positionElementAtEventLocation(el: BrowserElement, evt: MouseEvent, xShift?: number, yShift?: number): void;
+    /**
+     * Positions a DOM element at the apparent canvas location corresponding to the given page location. This is not intended for use with elements the surface is managing: it is designed to be used with elements such as pop-ups that you may wish to position relative to the content in your canvas.
+     * @param el - Element to position.
+     * @param x - X location on canvas to move element's left edge to.
+     * @param y - Y location on canvas to move element's top edge to.
+     * @param xShift - Optional absolute number of pixels to shift the element by in the x axis after calculating its position relative to the canvas. Typically you'd use this to place something other than the top left corner of your element at the desired location.
+     * @param yShift - Optional absolute number of pixels to shift the element by in the y axis after calculating its position relative to the canvas.
+     *
+     */
+    positionElementAtPageLocation(el: BrowserElement, x: number, y: number, xShift?: number, yShift?: number): void;
+    /**
+     * Cleans up the Surface.  When using a library integration such as Angular/React/Vue/Svelte, this method will be called automatically when the associated component is unloaded. If you're using vanilla VisaullyJs, you might want to call this method if you're cleaning up your UI and you don't need this Surface any longer.
+     *
+     */
+    destroy(): void;
+    /**
+     * Zooms the display so that the background (if one is set) fits inside the viewport.
+     * @param params.onComplete Optional function to call on operation complete (centering may be animated).
+     * @param params.doNotAnimate If true, centering content will not use animation.
+     * @tags zoom
+     */
+    zoomToBackground(params: {
+        doNotAnimate?: boolean;
+        onComplete?: (p: PointXY) => any;
+    }): void;
+    /**
+     * Zooms the display to fit the canvas and content plus any elements added by the given decorator.
+     * @param zParams
+     * @tags zoom
+     */
+    zoomToDecorator(zParams: {
+        decorator: string | Decorator;
+        fill?: number;
+        doNotZoomIfVisible?: boolean;
+        doNotAnimate?: boolean;
+        onComplete?: (p: PointXY) => any;
+        onStep?: () => any;
+        doNotFirePanEvent?: boolean;
+    }): void;
+    /**
+     * Zooms the display to fit the given extents, which may be a single box or an array of boxes; in the latter case VisuallyJs will calculate a minimum bounding box for all the boxes provided.
+     * @param zParams Options for the zoom
+     * @tags zoom
+     */
+    zoomToExtents(zParams: ZoomToExtentsOptions): void;
+    /**
+     * Maps the location of the given event on the page onto the coordinate space of this widget, returning a value representing where the given event appears to be with respect to the origin of the Surface's viewport.
+     * @param event
+     *
+     */
+    mapEventLocation(event: MouseEvent): PointXY;
+    /**
+     * Centers the tracked content inside the viewport, but does not adjust the current zoom (so the content may still extend past the viewport bounds)
+     * @param options Method parameters.
+     *
+     */
+    centerContent(options?: CenterContentOptions): void;
+    /**
+     * Zooms the display so that the current selected nodes are all visible, optionally animating the transition.
+     * @param params Optional method params
+     * @param params.fill A decimal indicating how much of the viewport to fill with the zoomed content. Defaults to a value of 0.90.
+     * @param params.selection Optional Selection to which to zoom. If omitted, the default is to use the model's current selection.
+     * @param params.doNotZoomIfVisible If true, no action is taken if the content is currently all visible. Defaults to false.
+     * @param params.doNotAnimate By default the widget does not animate this operation. You can override that behaviour by setting doNotAnimate:false.
+     * @param params.filter Optional function to use as a filter; we create the selection by running this filter by the model's `filter` method.
+     * @tags zoom
+     */
+    zoomToSelection(params: {
+        fill?: number;
+        selection?: VisuallyJsSelection;
+        filter?: (o: Base) => boolean | ObjectData;
+        doNotZoomIfVisible?: boolean;
+        doNotAnimate?: boolean;
+    }): void;
+    /**
+     * Gets a Path from some source Vertex to some target Vertex. This method is a wrapper around the model's `getPath` method, adding a few ui specific functions to the result.
+     * @param params Path spec params
+     * @param params.source Source node or port, or id of source node/port
+     * @param params.target Target node or port, or id of target node/port
+     * @param params.strict Defaults to true. Sets whether or not paths are searched strictly by the given source/target. If, for instance, you supply a node as the source, but there are only edges connected to ports on that node, by default these edges will be ignored. Switching `strict` to false will mean these edges are considered.
+     * @param params.nodeFilter Optional function that is given each Node's backing data and asked to return true or false - true means include the Node, false means exclude it.
+     * @param params.edgeFilter Optional function that is given each Edge's backing data and asked to return true or false - true means include the Edge, false means exclude it.
+     * @returns A Path object. Even if no path exists you will get a return value - but it will just be empty.
+     *
+     */
+    getPath(params: PathOptions): UIPath;
+    /**
+     * Sets the apparent canvas location - see the notes for getApparentCanvasLocation.
+     * @param left Value in pixels for left edge of canvas.
+     * @param top Value in pixels for top edge of canvas.
+     * @returns Location of the actual origin set, after clamping.
+     *
+     */
+    setApparentCanvasLocation(left: number, top: number): PointXY;
+    /**
+     * Gets the current bounds information.
+     */
+    getViewportBoundsInfo(): ViewportBounds;
+    getApparentCanvasLocation(): PointXY;
+    /**
+     * Adds a background. Theoretically you can add multiple backgrounds but the end result of that is indeterminate.
+     * @param background
+     */
+    addBackground(background: Background): void;
+    removeBackground(background: Background): void;
+    /**
+     * Sets the current zoom, clamping it to the allowed range. Returns the new zoom level - which may or may not be the value you asked for, as it might have been clamped to the current allowed zoom range.
+     * @param zoom - Zoom value. If this is outside the allowed bounds it will be clamped.
+     * @param animate - If true, the surface will animate the transition in zoom by stepping through several intermediate levels in succession.
+     * @returns Current zoom. This may or may not be the value you asked for - it might have been clamped to the current allowed zoom range.
+     * @tags zoom
+     */
+    setZoom(zoom: number, animate?: boolean): number;
+    /**
+     * Gets the decorator with the given id, or null if not found.
+     * @param id
+     *
+     */
+    getDecorator<T extends Decorator = Decorator>(id: string): T;
+    /**
+     * Sets the current zoom range. By default, this method checks if the current zoom is within the new range, and if it is not then `setZoom` is called, which will cause the zoom to be clamped to an allowed value in the new range. You can disable this by passing `true` for `doNotClamp`.
+     * @param zr New range, as an array consisting of [lower, upper] values. Lower must be less than upper.
+     * @param doNotClamp If true, will not check the current zoom to ensure it falls within the new range.
+     * @returns Array of [min, max] current zoom values.
+     * @tags zoom
+     */
+    setZoomRange(zr: ZoomRange, doNotClamp?: boolean): ZoomRange;
+    /**
+     * Gets the current zoom range.
+     * @returns Array of [min, max] current zoom values.
+     * @tags zoom
+     */
+    getZoomRange(): ZoomRange;
+    /**
+     * Gets the current zoom.
+     * @returns Current zoom value
+     *
+     */
+    getZoom(): number;
+    /**
+     * Nudges the zoom by the given amount. Zoom will be clamped to the current zoom range in effect and the value that was ultimately set is returned from this function. The value you pass in here is multiplied by 100 to give a percentage value: 1 is 100%, for instance, 0.05 is 5%.
+     * @param delta Amount to change zoom by.
+     * @param e Original event that caused the nudge. May be null.
+     * @returns The zoom that was set. Zoom will be clamped to the allowed range.
+     * @tags zoom
+     */
+    nudgeZoom(delta: number, e?: any): number;
+    /**
+     * Nudges the wheel zoom by the given amount. This function is intended for use by components that control zoom via the mouse wheel, and not for general usage. See `nudgeZoom` for a more general version of this.
+     * @param delta Amount to change zoom by.
+     * @param e Original event that caused the nudge. May be null.
+     * @internal
+     */
+    nudgeWheelZoom(delta: number, e?: any): void;
+    /**
+     * Zooms out by one step, within the allowed zoom range.
+     */
+    zoomOut(canvasLoc?: PointXY): void;
+    /**
+     * Zooms in by one step, within the allowed zoom range.
+     */
+    zoomIn(canvasLoc?: PointXY): void;
+    /**
+     * Gets the current origin of the panned content.
+     * @returns Position, in pixels, of the panned content, where 0,0 is the origin of the viewport.
+     *
+     */
+    getPan(): PointXY;
+    /**
+     * Pans the canvas by a given amount in X and Y.
+     * @param dx - Amount to pan in X direction
+     * @param dy - Amount to pan in Y direction
+     * @param doNotAnimate - By default this operation uses animation.
+     *
+     */
+    pan(dx: number, dy: number, doNotAnimate?: boolean): void;
+    /**
+     * Sets the position of the panned content's origin.
+     * @param left - Position in pixels of the left edge of the panned content.
+     * @param top - Position in pixels of the top edge of the panned content.
+     * @param animate - Whether or not to animate the pan. Defaults to false.
+     * @param onComplete - If `animate` is set to true, an optional callback for the end of the pan
+     *
+     */
+    setPan(left: number, top: number, animate?: boolean, onComplete?: (p: PointXY) => any): void;
+    /**
+     * Sets the pan and zoom for the Surface in one pass.
+     * @param x - Value for pan in x axis
+     * @param y - Value for pan in Y axis
+     * @param zoom - Value fo zoom
+     * @param animate - Defaults to false. If true, the changes will be made with the widget animating.
+     *
+     */
+    setPanAndZoom(x: number, y: number, zoom: number, animate?: boolean): void;
+    /**
+     * Center on the current object and zoom in on it.
+     * @param element - The element to center. Can be a DOM element, vertex id, or a Node/Group
+     * @param fillRatio How much of the viewport to fill with the object we zoom in on. This will be limited by the
+     *     current zoom range. Defaults to 0.6.
+     * @param doNotAnimate - by default, this operation will be animated.
+     *
+     */
+    centerOnAndZoom(element: string | Vertex | Element, fillRatio?: number, doNotAnimate?: boolean): void;
+    /**
+     * Takes a node/group as argument and positions the surface canvas such that the given node is at the center in
+     * both axes.
+     * @param element - The element to center. Can be a DOM element, vertex id, or a Node/Group.
+     *
+     */
+    centerOn(element: string | Vertex | Element): void;
+    /**
+     * Takes a node/group as argument and positions the surface canvas such that the given node is at the center in the horizontal axis.
+     * @param element - The element to center. Can be a DOM element, vertex id, or a Node/Group
+     *
+     */
+    centerOnHorizontally(element: string | Vertex | Element): void;
+    /**
+     * Takes a node/group as argument and positions the surface canvas such that the given node is at the center in the vertical axis.
+     * @param element - The element to center. Can be a DOM element, vertex id, or a Node/Group
+     *
+     */
+    centerOnVertically(element: string | Vertex | Element): void;
+    /**
+     * Sets whether or not the widget clamps the movement of the canvas during pan/zoom to ensure that the managed content never disappears from view.
+     * @param clamping Whether or not to clamp movement.
+     *
+     */
+    setClamping(clamping: boolean): void;
+    /**
+     * Returns whether or not the given point (relative to page origin) is within the viewport for the widget.
+     * @param x X location of point to test
+     * @param y Y location of point to test
+     * @returns True if the point is within the viewport, false if not.
+     *
+     */
+    isPageLocationInViewport(x: number, y: number): boolean;
+    /**
+     * Maps the given page location to a value relative to the canvas origin, allowing for zoom and pan of the canvas.
+     * This takes into account the offset of the canvas in the page so that what you get back is the mapped position
+     * relative to the target element's [left,top] corner
+     * @param left X location
+     * @param top Y location
+     * @param roundValues If true, the location is returned as integers for x/y.
+     * @returns The mapped location, as a PointXY object.
+     *
+     */
+    fromPageLocation(left: number, top: number, roundValues?: boolean): PointXY;
+    /**
+     * Maps the given window location to a value relative to the canvas origin. The window means the browser's visible
+     * window, and is not the same as the page, because of scroll.
+     * @param left
+     * @param top
+     * @param roundValues
+     */
+    fromWindowLocation(left: number, top: number, roundValues?: boolean): PointXY;
+    /**
+     * Maps the given location relative to the viewport origin, to a page location, allowing for zoom and pan of the canvas. This takes into account the offset of the viewport in the page so that what you get back is the mapped position relative to the target element's [left,top] corner.
+     * @param left X location
+     * @param top Y location
+     * @returns The mapped location, as a PointXY object.
+     *
+     */
+    toPageLocation(left: number, top: number): PointXY;
+    /**
+     * Binds to a mouse event occurring on a given model object. This is a wrapper around the `on` event binding method, which searches for an associated model object for the given event. For instance, you might have a node template that has a button inside of it that you want to respond to. When the button is clicked you want to know the node associated with the button. This method provides that. It is possible to find the associated model object yourself, via the `getObjectInfo` method of the Surface, called with the event's target, but this method does that for you.
+     *
+     * You can, optionally, provide a type hint to this method in order to fix the type of the returned model object, but note that this is erased at runtime and the type of the returned object is not guaranteed by the surface.
+     *
+     * This method binds a delegated event handler on the container element used by the surface. You do not need to provide an element to which to bind; you just need to provide an appropriate selector
+     *
+     * @param event Name of the event to bind to.
+     * @param selector CSS3 selector that identifies children of a vertex DOM element on which the event handler should
+     *     be bound.
+     * @param callback Function to call when the event is fired.
+     *
+     */
+    bindModelEvent<T extends Edge | Node | Group | Port | Vertex>(event: string, selector: string, callback: ModelEventCallback<T>): void;
+    /**
+     * Unbinds a listener for a model event.
+     * @param event Name of the event to unbind.
+     * @param handler Function to unbind.
+     *
+     */
+    unbindModelEvent<T = any>(event: string, handler: ModelEventCallback<T>): void;
+    cloneVertex(vertex: string | Node | Group | Element, options?: SurfaceVertexCloneOptions): Node | Group | null;
+    /**
+     * Gets the zoom as seen by the user, which is a function of the zoom of this surface and of any parent surface, plus any other scale transforms that may be in place in the DOM.
+     *
+     */
+    getEffectiveVisibleZoom(): number;
+    /**
+     * Returns whether or not the given point (relative to page origin) is within the viewport for the widget.
+     * @param x X location of point to test
+     * @param y Y location of point to test
+     * @returns true if the point is within the viewport, false if not.
+     *
+     */
+    isInViewport(x: number, y: number): boolean;
+    /**
+     * Appends an element to the viewport such that it is zoomed with everything else, but constrains placement in one or both axes so that the element remains fixed with respect to the viewport origin as the canvas pans and/or zooms. Note that this method will set `position:absolute` on the element you are fixing, because otherwise it would mess up the placement of the other content on the canvas. If you subsequently `unfix` an element, the UI does not remove the `position:absolute` style.
+     * @param el The BrowserElement to append.
+     * @param constraints Flags to indicate optional constraint to each axis.
+     * @param pos Location of the element's origin.
+     * @param id Optional ID to assign to the element, for future retrieval
+     * @param onTop
+     */
+    fixElement(el: BrowserElement, pos: PointXY, constraints?: FixedElementConstraints, id?: string, onTop?: boolean): FixedElement;
+    /**
+     * Removes an element that was previously fixed via the fixElement method.
+     * @param el
+     *
+     */
+    unfixElement(el: BrowserElement): void;
+    /**
+     * Appends an element to the viewport so that it floats above the content that is being zoomed and panned. The element will have `position:absolute` set on it. You can float any element you like, but note that the responsibility for setting an appropriate z index is yours.
+     * @param el Element to float.
+     * @param pos Position to float the element at.
+     *
+     */
+    floatElement(el: BrowserElement, pos: PointXY): void;
+    /**
+     * Sets the current mode for the surface.
+     * @param mode
+     * @param doNotClearSelection Defaults to false - when true, a mode change will not first cause the selection in the
+     * underlying model to be cleared.
+     *
+     */
+    setMode(mode: SurfaceMode, doNotClearSelection?: boolean): void;
+    /**
+     * Pan the canvas to align the content in one or both axes.
+     * @param params
+     *
+     */
+    alignContent(options: AlignContentOptions): void;
+    /**
+     * Pan the canvas to align the content such that the top edge of the topmost element is at the top of the viewport.
+     * @param params
+     *
+     */
+    alignContentTop(options?: AlignContentToFaceOptions): void;
+    /**
+     * Pan the canvas to align the content such that the bottom edge of the bottom element is at the bottom of the viewport.
+     * @param params
+     *
+     */
+    alignContentBottom(options?: AlignContentToFaceOptions): void;
+    /**
+     * Pan the canvas to align the content such that the left edge of the leftmost element is at the left of the viewport.
+     * @param params
+     *
+     */
+    alignContentLeft(options?: AlignContentToFaceOptions): void;
+    /**
+     * Pan the canvas to align the content such that the right edge of the rightmost element is at the right of the viewport.
+     * @param params
+     *
+     */
+    alignContentRight(options?: AlignContentToFaceOptions): void;
+}

package/types/browser-ui/svg-component.d.ts

@@ -0,0 +1,6 @@
+import { BrowserUI } from "./browser-visuallyjs-instance";
+import { PaintStyle } from "../ui";
+import { SvgConnector } from "./svg-element-connector";
+export declare class SvgComponent {
+    static paint(connector: SvgConnector, instance: BrowserUI, paintStyle: PaintStyle): void;
+}