@visuallyjs/browser-ui 1.0.0

package/types/browser-ui/browser-visuallyjs-instance.d.ts

@@ -0,0 +1,881 @@
+import { EVENT_EDGE_CLICK, EVENT_EDGE_CONTEXTMENU, EVENT_EDGE_DBLCLICK, EVENT_EDGE_MOUSEDOWN, EVENT_EDGE_MOUSEOUT, EVENT_EDGE_MOUSEOVER, EVENT_EDGE_MOUSEUP, EVENT_VERTEX_CLICK, EVENT_VERTEX_TAP, EVENT_VERTEX_DBLTAP, EVENT_VERTEX_MOUSEOVER, EVENT_VERTEX_MOUSEOUT, EVENT_VERTEX_MOUSEMOVE, EVENT_VERTEX_MOUSEUP, EVENT_VERTEX_MOUSEDOWN, EVENT_VERTEX_CONTEXTMENU, EVENT_VERTEX_DBLCLICK, Overlay, OverlayPaintParams, LabelOverlay, Connection, ConnectorPath, UICore, TypeDescriptorBase, VertexMapping, GroupMapping, PortMapping, NodeMapping, DragHandler2, ViewportElement, OverlaySpec, Connector, PaintStyle, ZoomToFitOptions, ZoomToFitIfNecessaryOptions, ZoomToElementsOptions, PropertyMapper, EdgePropertyMappings, ViewportGroupElement, ViewportNodeElement } from '../ui';
+import { VisuallyJSDOMElement } from './element-facade';
+import { VisuallyJsModel, Base, Edge, Group, Node, ObjectData, Port, Vertex, VisuallyJsSelection, DataSource, EVENT_GROUP_MOVE, Grid, GroupRemovedParams, NodeRemovedParams, PointXY, RectangleXY, Size, CustomTagOptions, AbstractLayoutAdapter, LayoutResultSet } from "../core";
+import { TemplateRenderer } from "./browser-ui";
+import { Background, BrowserUIDefaults, BrowserUIOptions, ElementModelInfo, SupportsClassManipulation, SupportsClassManipulationElement } from "./definitions";
+import { BrowserElement } from './util';
+import { ShapeLibrary } from "./shape-library";
+import { BrowserUIClipboard } from "./copy-paste";
+/**
+ * An event that the BrowserUI renderer may fire.
+ */
+export type BrowserUIEvent = typeof EVENT_EDGE_MOUSEUP | typeof EVENT_EDGE_MOUSEDOWN | typeof EVENT_VERTEX_CLICK | typeof EVENT_VERTEX_DBLCLICK | typeof EVENT_EDGE_CONTEXTMENU | typeof EVENT_EDGE_CLICK | typeof EVENT_EDGE_DBLCLICK | typeof EVENT_VERTEX_DBLTAP | typeof EVENT_VERTEX_TAP | typeof EVENT_VERTEX_MOUSEOVER | typeof EVENT_VERTEX_MOUSEOUT | typeof EVENT_VERTEX_MOUSEMOVE | typeof EVENT_VERTEX_MOUSEDOWN | typeof EVENT_VERTEX_MOUSEUP | typeof EVENT_VERTEX_CONTEXTMENU | typeof EVENT_VERTEX_MOUSEOVER | typeof EVENT_EDGE_MOUSEOVER | typeof EVENT_EDGE_MOUSEOUT | typeof EVENT_GROUP_MOVE;
+/**
+ * Subclass of UICore that renders to the DOM in a browser, and supports dragging of elements/connections.
+ * @group Components
+ * @internal
+ *
+ */
+export declare abstract class BrowserUI<EVT = any> extends UICore<BrowserElement, EVT | BrowserUIEvent> {
+    model: VisuallyJsModel;
+    protected $suspendRendering: boolean;
+    /**
+     * Clipboard for copy/paste of data.
+     */
+    clipboard: BrowserUIClipboard;
+    /**
+     * @internal
+     * @param mel
+     */
+    $syncManagedElementWithView(mel: ViewportElement<BrowserElement>, andThenRepaint: boolean): void;
+    protected $shapeLibrary: ShapeLibrary<ObjectData>;
+    protected $_propertyMapper: PropertyMapper;
+    private _templateRenderer;
+    private readonly _nodeRenderer;
+    private readonly _groupRenderer;
+    private readonly __containerEvents;
+    private _dragManager2;
+    private readonly _resizeObserver;
+    private readonly _managedElementsSelector;
+    private readonly _hoverEvents;
+    private readonly _eventManager;
+    private _canDropHandler;
+    private _transferrableVertexAttributes;
+    /**
+     * Adds some attributes to the list of attributes that should be copied from
+     * a rendered element's firstElementChild.
+     * @internal
+     * @param atts
+     */
+    $addTransferrableVertexAttributes(atts: Array<string>): void;
+    $enableVertexDrag(): void;
+    $disableVertexDrag(): void;
+    /**
+     * Determines whether or not the given candidate may be dropped onto either the given target vertex, or the canvas. This method is invoked by the drag handler and the palette
+     * @param candidate
+     * @param target
+     * @param onCanvas
+     * @internal
+     */
+    $canDrop(candidate: Node | Group, target?: Node | Group, onCanvas?: boolean): boolean;
+    $vertexRendered<N extends Vertex>(v: N, el: BrowserElement, def: VertexMapping<any, BrowserElement>, eventInfo?: {
+        position: PointXY;
+    }): void;
+    protected constructor(model: VisuallyJsModel, dataSource: DataSource, container: BrowserElement, options: BrowserUIOptions, templateRenderer: TemplateRenderer<BrowserElement>, defaults: BrowserUIDefaults);
+    $createDefaultLayoutAdapter(): AbstractLayoutAdapter<BrowserElement>;
+    $createGroupLayoutAdapter(group: Group): AbstractLayoutAdapter<HTMLElement | SVGElement>;
+    /**
+     * @internal
+     */
+    $startPanRepeat(dirX: 1 | 0 | -1, dirY: 1 | 0 | -1, dx: number, dy: number, interval: number, cb?: (total: PointXY) => any): void;
+    /**
+     * @internal
+     */
+    $stopPanRepeat(): void;
+    /**
+     * @internal
+     */
+    private _shapeDefsSvgElement;
+    /**
+     * @internal
+     */
+    private _setupShapeDefs;
+    /**
+     * Fire an event for an overlay, and for its related component.
+     * @internal
+     * @param overlay
+     * @param event
+     * @param e
+     */
+    private __fireOverlayMethod;
+    /**
+     * Whether or not the UI instance renders asynchronously.
+     * @internal
+     */
+    $isAsynchronousRender(): boolean;
+    /**
+     * @internal
+     */
+    $isDraggingSupported(): boolean;
+    /**
+     * Removes the given element from the display. The element may or may not be related to a vertex in the dataset.
+     * @internal
+     * @param element
+     */
+    $removeElement(element: BrowserElement): void;
+    /**
+     *  TODO unless the core calls this, this method is not needed.
+     * @param el
+     * @param parent
+     * @param insertAtStart
+     * @internal
+     */
+    $appendElement(el: Element, parent: Element, insertAtStart?: boolean): void;
+    $setElementVisible(el: BrowserElement, visible: boolean): void;
+    /**
+     * @override
+     * @param p
+     * @internal
+     */
+    $doVertexUpdated(el: ViewportElement<BrowserElement>): void;
+    /**
+     * @internal
+    * @override
+    */
+    $graphClearStart(): void;
+    /**
+     * @internal
+     * @param el
+     * @private
+     */
+    $appendElementToContainer(el: BrowserElement, insertAtStart?: boolean): void;
+    $appendElementToVertexLayer(el: BrowserElement, insertAtStart?: boolean): void;
+    $appendElementToToolsLayer(el: BrowserElement, insertAtStart?: boolean): void;
+    $appendOverlayElement(e: BrowserElement, insertAtStart?: boolean): void;
+    $appendVertexElement(e: BrowserElement, insertAtStart?: boolean): void;
+    $appendEdgeElement(e: BrowserElement, insertAtStart?: boolean): void;
+    /**
+     *
+     * @param el
+     * @internal
+     */
+    $getAssociatedElements(el: BrowserElement): Array<BrowserElement>;
+    /**
+     * Gets the CSS class for the given element.
+     * @param el
+     * @internal
+     */
+    $getClassFromElement(el: BrowserElement): string;
+    /**
+     * Add one or more classes to the given element or list of elements.
+     * @param el Element, or list of elements to which to add the class(es)
+     * @param clazz A space separated list of classes to add.
+     * @internal
+     */
+    $addClassToElement(el: BrowserElement | NodeListOf<BrowserElement>, clazz: string): void;
+    /**
+     * Returns whether or not the given element has the given class.
+     * @param el
+     * @param clazz
+     * @internal
+     */
+    $elementHasClass(el: BrowserElement, clazz: string): boolean;
+    /**
+     * Remove one or more classes from the given element or list of elements.
+     * @param el Element, or list of elements from which to remove the class(es)
+     * @param clazz A space separated list of classes to remove.
+     * @internal
+     */
+    $removeClassFromElement(el: BrowserElement | NodeListOf<BrowserElement>, clazz: string): void;
+    /**
+     * Toggles one or more classes on the given element or list of elements.
+     * @param el Element, or list of elements on which to toggle the class(es)
+     * @param clazz A space separated list of classes to toggle.
+     * @internal
+     */
+    $toggleClassOnElement(el: BrowserElement | NodeListOf<BrowserElement>, clazz: string): void;
+    /**
+     * Updates classes for the given element
+     * @param el
+     * @param classesToAdd
+     * @param classesToRemove
+     * @internal
+     */
+    $updateElementClasses(el: BrowserElement, classesToAdd: Array<string>, classesToRemove: Array<string>): void;
+    /**
+     * Sets an attribute on the given element.
+     * @param el
+     * @param name
+     * @param value
+     * @internal
+     */
+    $setAttribute(el: BrowserElement, name: string, value: string): void;
+    /**
+     * Gets an attribute from the given element.
+     * @param el
+     * @param name
+     * @internal
+     */
+    $getAttribute(el: BrowserElement, name: string): string;
+    /**
+     * Sets some attributes on the given element.
+     * @param el - Element to set attributes on
+     * @param atts - Map of attributes to set.
+     * @internal
+     */
+    $setAttributes(el: Element, atts: Record<string, string>): void;
+    /**
+     * Remove an attribute from the given element.
+     * @param el - Element to remove an attribute from
+     * @param attName - Name of the attribute to remove
+     * @internal
+     */
+    $removeAttribute(el: Element, attName: string): void;
+    /**
+     * Bind an event listener to the given element or elements.
+     * @param el - Element, or elements, to bind the event listener to.
+     * @param event - Name of the event to bind to.
+     * @param callbackOrSelector - Either a callback function, or a CSS 3 selector. When this is a selector the event listener is bound as a "delegate", ie. the event listeners listens to events on children of the given `el` that match the selector.
+     * @param callback - Callback function for event. Only supplied when you're binding a delegated event handler.
+     *
+     */
+    on(el: Document | BrowserElement | NodeListOf<BrowserElement>, event: string, callbackOrSelector: Function | string, callback?: Function): this;
+    /**
+     * Remove an event binding from the given element or elements.
+     * @param el - Element, or elements, from which to remove the event binding.
+     * @param event - Name of the event to unbind.
+     * @param callback - The function you wish to unbind.
+     *
+     */
+    off(el: Document | BrowserElement | NodeListOf<BrowserElement>, event: string, callback: Function): this;
+    /**
+     * Trigger an event on the given element.  Exposed for API users but mostly intended for internal use.
+     * @param el - Element to trigger the event on.
+     * @param event - Name of the event to trigger.
+     * @param originalEvent - Optional event that gave rise to this method being called.
+     * @param payload - Optional `payload` to set on the Event that is created.
+     * @param detail - Optional detail for the Event that is created.
+     */
+    trigger(el: Document | BrowserElement, event: string, originalEvent?: Event, payload?: any, detail?: number): void;
+    /**
+     * Gets the position of the given element relative to the browser viewport's origin. This method is safe for
+     * both HTML and SVG elements.
+     * @internal
+     * @param el
+     */
+    $getOffsetRelativeToRoot(el: BrowserElement): PointXY;
+    private _adjustForParents;
+    /**
+     * Exposed on this class to assist core in abstracting out the specifics of the renderer.
+     * @internal
+     * @param el
+     *
+     * Places this is called:
+     *
+     * - drawAnchorPlaceholders in edge editor base
+     * - getOffset method passed in the pan zoom of miniview
+     * - getOffset method passed in to pan zoom of surface
+     * - refreshElement method of Viewport
+     *
+     */
+    $getElementPositionInUIRelativeToCanvasOrigin(el: BrowserElement, knownElementSize?: Size): PointXY;
+    $setElementSizeInUI(el: BrowserElement, width: number, height: number): void;
+    $setElementWidth(el: BrowserElement, width: number): void;
+    $setElementHeight(el: BrowserElement, height: number): void;
+    /**
+     * Exposed on this class to assist core in abstracting out the specifics of the renderer.
+     * @internal
+     * @param el
+     */
+    $getSize(el: BrowserElement): Size;
+    $setElementRotation(el: BrowserElement, r: number): void;
+    /**
+     * Gets the position of the given element relative to its offset parent,
+     * in canvas coordinates, ie. not scaled per the current zoom. Currently
+     * this method is only used to find the offset to a group's content area.
+     * @param el
+     * @internal
+     */
+    $getElementPositionInUIRelativeToParent(el: BrowserElement): PointXY;
+    /**
+     * Gets the position of the given element relative to the visible window origin, _in page coordinates_. The implementation invokes `getBoundingClientRect()` on the element and returns that value, which is a rectangle whose dimensions and location match what the user sees, where [0,0] is the origin of the browser window. It is important to note that this method does _not_ take page scroll into account. The value returned from this method is as the user sees it with respect to the browser's top left corner. Note also that this method is ignorant of zoom: the value returned is as the user sees it, that is with any zoom applied.
+     * @param el Element to get position for.
+     * @internal
+     */
+    $getElementPositionInWindow(el: BrowserElement): RectangleXY;
+    /**
+     * Gets a style property from some element.
+     * Exposed on this class to assist core in abstracting out the specifics of the renderer.
+     * @internal
+     * @param el Element to get property from
+     * @param prop Property to look up
+     */
+    $getStyle(el: Element, prop: string): any;
+    /**
+     * Gets the element representing some group's content area. Exposed on this class to assist core in abstracting out the specifics of the renderer.
+     * @internal
+     * @param el
+     */
+    $getGroupContentAreaElement(el: BrowserElement): BrowserElement;
+    /**
+     * Exposed on this class to assist core in abstracting out the specifics of the renderer.
+     * @internal
+     * @param ctx Either a string representing a selector, or an element. If a string, the container root is assumed to be the element context. Otherwise the context is this value and the selector is the second arg to the method.
+     * @param spec If `ctx` is an element, this is the selector
+     */
+    $getSelector(ctx: string | Element, spec?: string): Array<VisuallyJSDOMElement>;
+    $setViewportElementPosition(el: ViewportElement<BrowserElement>, p: PointXY): void;
+    /**
+     * Sets whether or not the given element, or element representing the given vertex, is draggable.
+     * @param element Vertex id, vertex, or DOM element
+     * @param draggable
+     */
+    setDraggable(element: string | BrowserElement | Vertex, draggable: boolean): void;
+    /**
+     * Helper method to get the draggable state of some element. Under the hood all this does is check for the
+     * existence of the `data-vjs-not-draggable` attribute.
+     * @param el - Element to get draggable state for.
+     *
+     */
+    isDraggable(el: BrowserElement): boolean;
+    toggleDraggable(el: BrowserElement): boolean;
+    /**
+     * Fires an edge event, but only if the edge is not marked transient (or fireEvenIfTransient is true)
+     * @param localEvent
+     * @param globalEvent
+     * @param connection
+     * @param evt
+     * @param overlay
+     * @param fireEvenIfTransient
+     * @internal
+     */
+    private __fireEdgeEvent;
+    /**
+     * @overridable
+     * @param payload
+     */
+    protected $edgeTap(payload: {
+        obj: Edge;
+        e: MouseEvent;
+        connection: Connection<BrowserElement>;
+        overlay?: Overlay<BrowserElement>;
+    }): void;
+    /**
+     * Gets the name of the attribute that is used to determine the label for the given edge.
+     * @param edge
+     *
+     */
+    getLabelLocationAttribute(edge: Edge): string;
+    private __handleOverlayClick;
+    private _overlayClick;
+    private _overlayDblClick;
+    private _overlayTap;
+    private _overlayDblTap;
+    private __handleConnectorClick;
+    private _connectorClick;
+    private _connectorDblClick;
+    private _connectorTap;
+    private _connectorDblTap;
+    private __overlayHover;
+    private _overlayMouseover;
+    private _overlayMouseout;
+    private __doConnectorHover;
+    private __connectorHover;
+    private _connectorMouseover;
+    private _connectorMouseout;
+    private __connectorMouseupdown;
+    private _connectorMouseup;
+    private _connectorMousedown;
+    private _connectorContextmenu;
+    private _getElementPayload;
+    private __elementEvent;
+    private _elementClick;
+    private _elementDblClick;
+    private _elementTap;
+    private _elementDblTap;
+    private _elementContextmenu;
+    private _elementMouseout;
+    private _elementMouseover;
+    private _elementMousemove;
+    private _toggleGroupCollapse;
+    private __bindContainerEvent;
+    /**
+     * Register a drag handler.  If the drag manager is not yet ready the handler will be put in a waiting list,
+     * and processed once the drag manager has been created.
+     * @param handler
+     * @internal
+     */
+    addDragHandler(handler: DragHandler2<BrowserElement>): void;
+    /**
+     * List of drag handlers registered prior to the drag manager having been constructed.
+     * @internal
+     */
+    private _pendingDragHandlers;
+    /**
+     * Initialise the drag manager, destroying any previous manager (there will be one if the container has changed).  This method also adds any drag handlers which were registered on this class prior to the drag manager being ready, and then clears that list.
+     * @internal
+     */
+    private _initDragHandler;
+    /**
+     * Called by the drag manager at the start of a drag. Subclasses can override this method to perform any actions they may need to undertake. For instance, the Surface will want to tell its pan/zoom widget to take a snapshot of the current compound zoom.
+     * @internal
+     * @param e
+     */
+    protected _elementDragInit(e: MouseEvent): void;
+    /**
+     * Maps the location of the given location on the page onto the coordinate space of this widget, returning a value representing a location in canvas coordinates with respect to the origin of the instance's canvas.
+     */
+    abstract fromPageLocation(x: number, y: number): PointXY;
+    /**
+     * Maps the location of the given location in the window onto the coordinate space of this widget, returning a value representing a location in canvas coordinates with respect to the origin of the instance's canvas. The input values are in "window" coordinates, where the concept of the window is that it is the visible space the user can see. In a browser, for example, this means the visible area of the page; it does not necessarily correlate with page coordinates because the page may be scrolled.
+     */
+    abstract fromWindowLocation(x: number, y: number): 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.
+     *
+     */
+    abstract toPageLocation(left: number, top: number): PointXY;
+    /**
+     * 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 UI's viewport.
+     * @param event
+     */
+    abstract mapEventLocation(event: MouseEvent): PointXY;
+    /**
+     * Maps the given x,y to canvas coordinates via `fromPageLocation`, snaps that canvas location to the given grid, and then converts the snapped canvas location back to page coordinates.
+     * @param x X position, in page coordinates.
+     * @param y Y position, in page coordinates
+     * @param grid Grid to apply - in canvas coordinates.
+     * @returns The given page location snapped to the given grid, in page coordinates.
+     *
+     */
+    snapPageLocationToGrid(x: number, y: number, grid: Grid): PointXY;
+    /**
+     * Gets the element that is the root for everything added to the UI.
+     * @internal
+     */
+    abstract $getCanvasElement(): BrowserElement;
+    /**
+     * Zoom in by one zoom step.
+     */
+    abstract zoomIn(canvasLoc?: PointXY): void;
+    /**
+     * Zoom out by one zoom step.
+     */
+    abstract zoomOut(canvasLoc?: PointXY): 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;
+    }>;
+    $isTouchDevice(): boolean;
+    $isArrayLike<E = any>(el: any): el is ArrayLike<E>;
+    abstract addBackground(background: Background): void;
+    abstract removeBackground(background: Background): void;
+    protected _getVerticesInViewport<T extends ViewportElement<BrowserElement>>(type: string, vpElement: BrowserElement, extractEl?: (el: BrowserElement) => BrowserElement): Array<{
+        el: T;
+        bb: RectangleXY;
+    }>;
+    private _attachEventDelegates;
+    private _detachEventDelegates;
+    /**
+     * Sets the element this instance will use as the container for everything it adds to the UI. In normal use this method is not expected to be called very often, if at all. The method is used by the instance constructor and also in certain situations by the model.
+     * @param newContainer
+     * @internal
+     */
+    setContainer(newContainer: BrowserElement): void;
+    /**
+     * Clears all endpoints and connections and managed elements from the instance of the UI. Does not also clear out
+     * event listeners, selectors, or connection types - for that, use `destroy()`.
+     */
+    reset(): void;
+    /**
+     * Clears the instance and unbinds any listeners on the instance. After you call this method you cannot use this
+     * instance of the UI again.
+     *
+     */
+    destroy(): void;
+    /**
+     * Stops managing the given element.
+     * @param el - Element, or ID of the element to stop managing.
+     * @param removeElement - If true, also remove the element from the renderer.
+     * @internal
+     */
+    $__unmanage(el: BrowserElement, removeChildren: boolean, removeElement: boolean): void;
+    /**
+     * @internal
+     * @param o
+     * @param clazz
+     */
+    $addOverlayClass(o: Overlay<BrowserElement>, clazz: string): void;
+    /**
+     * @internal
+     * @param o
+     * @param clazz
+     */
+    $removeOverlayClass(o: Overlay<BrowserElement>, clazz: string): void;
+    /**
+     * @internal
+     */
+    getGroupDefinition(group: Group): GroupMapping<BrowserElement>;
+    /**
+     * @internal
+     */
+    getPortDefinition(port: Port): PortMapping<BrowserElement>;
+    /**
+     * @internal
+     */
+    getNodeDefinition(node: Node): NodeMapping<BrowserElement>;
+    getVertexDefinition(vertex: Vertex): VertexMapping<any, any>;
+    /**
+     * TODO this seems to be functionality that only belongs to Recado/Knockle to me. Specifically what's happening here is that a definition containing only 'template' but no 'templateId' is causing an internal value for templateId to be written to the definition, and then for the template to be registered with the renderer.
+     * @param def
+     * @internal
+     */
+    private _ensureTemplate;
+    /**
+     * Register a custom tag on the UI. This will only take effect if the UI is using the default VisuallyJs template
+     * renderer.
+     * @param tagName
+     * @param handlers
+     */
+    registerTag(tagName: string, handlers: CustomTagOptions): void;
+    /**
+     * Creates a renderer for a node or group.
+     * @param objectType
+     * @param idFunctionToUse
+     * @param typeFunctionToUse
+     * @private
+     */
+    private createRenderer;
+    protected $resolveVertexSizeFromModel(v: Vertex, def: VertexMapping<any, BrowserElement>): Size;
+    /**
+     * Renders the given node. For internal use.
+     * @param n
+     * @param eventInfo
+     * @internal
+     */
+    $doRenderNode(n: Node, eventInfo?: any): void;
+    /**
+     * Re-renders the given node, unless it has not yet been rendered, in which case we just call doRenderNode
+     * @param n
+     * @internal
+     */
+    $reRenderNode(n: Node): void;
+    /**
+     * Renders the given group. For internal use.
+     * @param g
+     * @param eventInfo
+     * @internal
+     */
+    $doRenderGroup(g: Group, eventInfo?: any): void;
+    /**
+     * Paints the given overlay.
+     * @internal
+     * @param o
+     * @param params Params that were returned from the `$drawOverlay` method
+     * @param parentOrigin
+     */
+    $paintOverlay(o: Overlay<BrowserElement>, params: OverlayPaintParams, parentOrigin: PointXY): void;
+    /**
+     * Sets the visibility of some overlay.
+     * @param o - Overlay to hide or show
+     * @param visible - If true, make the overlay visible, if false, make the overlay invisible.
+     */
+    setOverlayVisible(o: Overlay<BrowserElement>, visible: boolean): void;
+    /**
+     * @internal
+     * @param o
+     * @param c
+     */
+    $reattachOverlay(o: Overlay<BrowserElement>, c: Connection<BrowserElement>): void;
+    /**
+     * @internal
+     * @param o
+     * @param hover
+     */
+    $setOverlayHover(o: Overlay<BrowserElement>, hover: boolean): void;
+    /**
+     * @internal
+     * @param o
+     */
+    destroyOverlay(o: Overlay<BrowserElement>): void;
+    /**
+     * Computes what needs to be drawn for an overlay, given the overlay, the path inscribed by the connector, its paint style, and an optional absolute position.  I have attempted to make this method as standalone as possible, so that it can be used to draw representations of overlays outside of the context of an edge in a surface, like for an inspector where someone can choose line type etc
+     * @internal
+     * @param o Overlay to compute
+     * @param connectorPath The path on which the overlay resides.
+     * @param paintStyle
+     * @param absolutePosition
+     */
+    $drawOverlay(o: Overlay<BrowserElement>, connectorPath: ConnectorPath, paintStyle: PaintStyle, absolutePosition?: PointXY): OverlayPaintParams;
+    /**
+     * @internal
+     * @param o
+     */
+    updateLabel(o: LabelOverlay<BrowserElement>): void;
+    /**
+     * @internal
+     * @param connection
+     * @param hover
+     */
+    $setHover(connection: Connection<BrowserElement>, hover: boolean): void;
+    /**
+     * @internal
+     * @param connection
+     * @param paintStyle
+     */
+    $paintConnector(connection: Connection<BrowserElement>, paintStyle: PaintStyle): void;
+    /**
+     * @internal
+     * @param connection
+     * @param hover
+     */
+    $setConnectorHover(connection: Connection<BrowserElement>, hover: boolean): void;
+    /**
+     * @internal
+     * @param connection
+     */
+    $destroyConnector(connection: Connection<any>): void;
+    /**
+     * @internal
+     * @param connector
+     * @param clazz
+     */
+    $addConnectorClass(connector: Connector, clazz: string): void;
+    /**
+     * @internal
+     * @param connector
+     * @param clazz
+     */
+    $removeConnectorClass(connector: Connector, clazz: string): void;
+    /**
+     * @internal
+     * @param connector
+     */
+    $getConnectorClass(connector: Connector): string;
+    /**
+     * @internal
+     * @param connector
+     * @param v
+     */
+    $setConnectorVisible(connector: Connector, v: boolean): void;
+    /**
+     * @internal
+     * @param connector
+     * @param t
+     */
+    $applyConnectorType(connector: Connector, t: TypeDescriptorBase): void;
+    /**
+     * @override
+     * @param deletion
+     * @internal
+     */
+    $nodeRemoved(deletion: NodeRemovedParams): ViewportElement<BrowserElement>;
+    /**
+     * Notification from the model that a group was removed. We hand off to the core first, then we remove the group's element from any drag groups, and instruct the template renderer to cleanup the group element.
+     * @internal
+     */
+    $groupRemoved(deletion: GroupRemovedParams): ViewportGroupElement<BrowserElement>;
+    /**
+     * Adds a class to the DOM element represented by `el`, which can be a Selection, or an instance of many different types - see the `SupportsClassManipulation` interface for a complete list.
+     * @param el
+     * @param clazz
+     */
+    addClass(el: VisuallyJsSelection | SupportsClassManipulation, clazz: string): void;
+    /**
+     * Removes a class from the DOM element represented by `el`, which can be a Selection, or an instance of many different types - see the `SupportsClassManipulation` interface for a complete list.
+     * @param el
+     * @param clazz
+     *
+     */
+    removeClass(el: VisuallyJsSelection | SupportsClassManipulation, clazz: string): void;
+    /**
+     * Toggles a class on the DOM element represented by `el`, which can be a Selection, or an instance of many different types - see the {@link SupportsClassManipulation} type for a complete list.
+     * @param el
+     * @param clazz
+     */
+    toggleClass(el: VisuallyJsSelection | SupportsClassManipulation, clazz: string): void;
+    /**
+     * Returns whether the DOM element represented by `el` - which can be an Edge, Connection, Node, Group, DOM element, or ID of some model object - has the given class.
+     * @param el
+     * @param clazz
+     *
+     */
+    hasClass(el: SupportsClassManipulationElement, clazz: string): boolean;
+    /**
+     * @internal
+     * @param el
+     * @param clazz
+     * @param fn
+     */
+    private _classOperation;
+    /**
+     * @internal
+     * @param c
+     * @param v
+     * @private
+     */
+    $setConnectionVisible(c: Connection<BrowserElement>, v: boolean): void;
+    /**
+     * Manage an element.  Adds the element to the viewport and sets up tracking for endpoints/connections for the element, as well as enabling dragging for the element. This method is called internally by various methods of the UI, such as `connect`, `addEndpoint`, `makeSource` and `makeTarget`, so if you use those methods to setup your UI then you may not need to call this. However, if you use the `addSourceSelector` and `addTargetSelector` methods to configure your UI then you will need to register elements using this method, or they will not be draggable.
+     * @param element - Element to manage. This method does not accept a DOM element ID as argument. If you wish to manage elements via their DOM element ID, you should use `manageAll` and pass in an appropriate CSS selector that represents your element, eg `#myElementId`.
+     * @param modelObject
+     * @param position
+     * @param size
+     * @param rotation
+     * @param _recalc - Maybe recalculate offsets for the element also. It is not recommended that clients of the API use this parameter; it's used in certain scenarios internally
+     * @internal
+     */
+    $manage(element: BrowserElement, modelObject: Vertex, position: PointXY, size: Size, rotation: number, _recalc: boolean): ViewportElement<BrowserElement>;
+    /**
+     * For some DOM element, find the model object it is mapping, and the related type definition for objects of that type.
+     * @param el
+     * @param asSource
+     * @private
+     * @internal
+     */
+    $getModelInfoForDragElement(el: BrowserElement, asSource: boolean, createMissingPorts: boolean): ElementModelInfo;
+    $isElement(obj: any): obj is BrowserElement;
+    getModelObjectFromElement(el: BrowserElement, searchAncestors: boolean, createMissingPorts: boolean): {
+        obj: Node | Group | Port | Edge;
+        el: VisuallyJSDOMElement;
+        missingPortCreated: boolean;
+    } | null;
+    /**
+     * Gets the DOM node that was rendered for the Port with the given id (does not retrieve `vjs-endpoint` elements)
+     * @param portIdOrPort Either the port, or the id of the port for which to retrieve the rendered element. Note that you must supply a "full" id here, that is in dotted notation with the id of the Node/Group on which the port resides.
+     * @returns DOM element for the given Port, null if not found.
+     */
+    getRenderedPort(portIdOrPort: string | Port): BrowserElement;
+    /**
+     * @internal
+     * @param e
+     * @private
+     */
+    $isSupportedElement(e: any): e is BrowserElement;
+    /**
+     * Invoked after a layout refresh
+     * @internal
+     * @param p
+     * @private
+     */
+    $afterRefresh(p: LayoutResultSet): void;
+    /**
+     * invoked after a full relayout.
+     * @internal
+     * @param p
+     * @private
+     */
+    $afterRelayout(p: LayoutResultSet): void;
+    $zoomToFit(params?: ZoomToFitOptions): void;
+    $zoomToFitIfNecessary(params?: ZoomToFitIfNecessaryOptions): void;
+    $zoomToElements(params?: ZoomToElementsOptions<BrowserElement>): void;
+    /**
+     * A transient vertex is a blank SVG element in this renderer - regardless of the container type.
+     * @internal
+     * @param position
+     * @param size
+     * @param data
+     * @param style
+     * @param clazz
+     * @param atts
+     */
+    $renderTransientVertex(position: PointXY, size: Size, data?: ObjectData, style?: Record<string, any>, clazz?: string, atts?: Record<string, string>): SVGElement;
+    /**
+     * For some node/group, get the element that was used to render it.
+     * @param obj
+     */
+    getRenderedElement(obj: string | Base): BrowserElement;
+    /**
+     * Gets the current zoom. This class returns the programmatic zoom level, which may not be what the user sees. Subclasses will generally override this.
+     *
+     */
+    getZoom(): number;
+    /**
+     * Gets the zoom as seen by the user. This class does not attempt to implement this method, instead assuming that the zoom is as set on the instance. Subclasses will generally override this.
+     */
+    getEffectiveVisibleZoom(): number;
+    /**
+     * @internal
+     */
+    getShapeLibrary(): ShapeLibrary<ObjectData>;
+    /**
+     * Gets the list of edge property mappings this UI is using. May be an empty list.
+     * @internal
+     */
+    $getEdgePropertyMappings(): EdgePropertyMappings;
+    /**
+     * Sets whether rendering is suspended or not.
+     * @param val
+     * @param thenRefresh If true, the surface will refresh after the change in state.
+     */
+    setSuspendRendering(val: boolean, thenRefresh?: boolean): void;
+    /**
+     * @internal
+     */
+    isSuspendRendering(): boolean;
+    protected $getCollapsedGroupSize(group: Group, currentSize: Size): Size;
+    /**
+     * Draw an edge from source point to target point, returning an SVG element. For internal use.
+     * @param properties object containing simple edge properties to apply, may be empty.
+     * @param source Source of the edge
+     * @param target Target of the edge
+     * @param overlays List of overlays to draw on the edge. May be empty.
+     * @param sampleData Optional data to use to populate parameterised overlays such as labels.
+     * @internal
+     */
+    $drawAdHocEdge(properties: ObjectData, source: PointXY, target: PointXY, overlays?: Array<OverlaySpec>, sourceMarker?: OverlaySpec, targetMarker?: OverlaySpec, sampleData?: ObjectData): HTMLElement;
+    /**
+     * Moves the specified element or vertex to the back of its parent’s children in the DOM order. Optionally moves its ancestors to the back as well.
+     * @param {string | Vertex | BrowserElement} v - The element, vertex, or browser element to be moved to the back.
+     * @param {boolean} [alsoSendAncestorsToBack] - If true, the ancestors of the specified element are also moved to the back.
+     * @return {void} No return value.
+     */
+    toBack(v: string | Vertex | BrowserElement, alsoSendAncestorsToBack?: boolean): void;
+    /**
+     * Brings the specified element or vertex to the front within its parent container.
+     * Optionally, this method can also ensure all ancestor elements are brought to the front.
+     * @param {string | Vertex | BrowserElement} v - The element or vertex to be brought to the front. This can be a string identifier, a `Vertex` object, or a `BrowserElement`.
+     * @param {boolean} [alsoBringAncestorsToFront=false] - Indicates whether the ancestors of the specified element should also be brought to the front. Defaults to `false`.
+     * @return {void} This method does not return a value.
+     */
+    toFront(v: string | Vertex | BrowserElement, alsoBringAncestorsToFront?: boolean): void;
+    /**
+     * Directly sets the size of a group element (using the `setSize` method, which abstracts out if its an HTML or SVG element). If the group element is an SVG element then that element is the one that is resized. Otherwise if the group element is an HTML element, we resize its content area, because we can then let CSS be applied.
+     * @internal
+     * @param group
+     * @param size
+     * @private
+     */
+    $setGroupElementSize(group: Group, size: Size): void;
+    /**
+     * Sets the UI mode. In the base class this method has an empty implementation.
+     * @param mode
+     * @param doNotClearSelection
+     */
+    setMode(mode: string, doNotClearSelection?: boolean): void;
+    /**
+     * Wraps the underlying model's `batch` function with the added step of first suspending events being fired from this renderer.
+     * @param fn Function to run while rendering and events are both suspended.
+     */
+    batch(fn: () => any): void;
+    /**
+     * Sets whether the given vertex is enabled for connection drag/drop.
+     * @param v The vertex to set enabled state for.
+     * @param state
+     */
+    setEnabled(v: Vertex, state: boolean): boolean;
+    /**
+     * Flash the given vertex or vertices.
+     * @param vertices Either a vertex, a vertex id, or an element, or an array of any of these.
+     * @param duration Optional; defaults to 1000ms. Duration of the animation in milliseconds.
+     * @param animName Optional; the name of the CSS animation to apply. Defaults to ANIM_SURFACE_ELEMENT_FLASH.
+     */
+    flashVertex(vertices: string | Node | Group | Element | Array<string | Node | Group | Element>, duration?: number, animName?: string): void;
+    /**
+     * Flash the nodes and groups in the given selection.
+     * @param sel Selection to flash nodes and groups for
+     * @param duration Optional; defaults to 1000ms. Duration of the animation, in milliseconds.
+     * @param animName Optional; the name of the CSS animation to apply. Defaults to ANIM_SURFACE_ELEMENT_FLASH.
+     */
+    flashSelection(sel: VisuallyJsSelection, duration: number, animName: string): void;
+    /**
+     * When the UI is rendering a Selection, this method triggers a reload on the selection, causing the UI to be cleared and recreated.
+     *
+     */
+    reload(): void;
+}