@visuallyjs/browser-ui 1.0.0

package/types/ui/core/core.d.ts

@@ -0,0 +1,1734 @@
+import { UICoreDefaults, UICoreOptions } from "./defaults";
+import { Overlay, OverlayPaintParams } from "./overlay/overlay";
+import { RedrawResult, Router } from "./router/router";
+import { CompiledTypeDescriptor, TypeDescriptorBase } from './type-descriptors';
+import { ConnectionEstablishedParams } from "./callbacks";
+import { Viewport, ViewportElement, ViewportGroupElement, ViewportNodeElement } from "./viewport";
+import { ComponentBase } from './component/component';
+import { LabelOverlay } from './overlay/label-overlay';
+import { AnchorSpec, LightweightAnchor, FullOverlaySpec, OverlaySpec, Connector, PaintStyle, ConnectorSpec } from "../common";
+import { GroupRelayoutReason } from './event-constants';
+import { Connection } from "./connector/connection-impl";
+import { Base, Edge, Group, Node, ObjectData, Port, Vertex, IntersectingVertex, PortRemovedParams, PortAddedParams, ProxyLocation, ObjectAnchorSpec } from "../../core";
+import { UIModel, UIObjectInfo } from "./ui-model";
+import { GroupMapping, NodeMapping, NodeOrGroupMapping, PortMapping, VertexMapping } from "./view";
+import { Magnetizer, MagnetizeResult } from "../../core/magnetizer";
+import { AbstractLayout, LayoutParameters, LayoutResultSet } from "../../core/layout/abstract-layout";
+import { DataSource, EdgeAddedParams, EdgeRemovedParams, EdgeSourceChangedParams, EdgeTargetChangedParams, Extents, FilterableDataset, Grid, GroupAddedParams, GroupMemberAddedParams, GroupMemberRemovedParams, GroupRemovedParams, NodeAddedParams, NodeRemovedParams, OptimisticEventGenerator, PointXY, RectangleXY, VisuallyJsSelection, Size, VisuallyJsRenderer, VertexUpdatedParams, VisuallyJsModel, SaveOptions, Rotations, AbstractLayoutAdapter } from "../../core";
+import { DataHook, ElementType, EnclosedVerticesOptions, GroupContentAreaInfo, GroupResizeResult, IntersectingVerticesOptions, UIExportOptions, UISaveData, ViewportBounds, ZoomToElementsOptions, ZoomToFitIfNecessaryOptions, ZoomToFitOptions } from "./definitions";
+import { GridProfile } from "./grid-profile";
+import { MagnetizeProfile } from "./magnetize-profile";
+import { UIPlugin, UIPluginOptions, UIPluginSpec } from "../plugins/definitions";
+import { CoreUIEvent } from "./core-events";
+/**
+ * @internal
+ */
+export type GroupSizeInfo = {
+    position: PointXY;
+    size: Size;
+    originalSize: Size;
+    layoutShiftX: number;
+    layoutShiftY: number;
+};
+/**
+ * Options for the cloneVertex method.
+ * @group Components
+ * @category Options
+ */
+export interface VertexCloneOptions {
+    /**
+     * Optional position to use for the new vertex
+     */
+    newPosition?: PointXY;
+    /**
+     * Defaults to 50 pixels in X and Y - the offset to use for the new vertex's position. Ignored if you provide newPosition.
+     */
+    offsetPosition?: PointXY;
+    /**
+     * When the UI is in constant magnetize mode, the default behaviour - if you do not provide a newPosition - is to magnetize a newly cloned vertex, so that it moves to fit into whitespace. Without this, when the user drags a newly cloned vertex that is overlapping the vertex it was cloned from, the original vertex is magnetized out of the way, and the experience is a bit disconcerting for the user.  When the UI is not in constant magnetize mode, the default is to not magnetize. Set this flag explicitly to get the behaviour you desire if the default doesnt suit.
+     */
+    magnetize?: boolean;
+    /**
+     * If true, the newly cloned vertex will be set as the model's current selection.
+     */
+    selectAfterCreate?: boolean;
+}
+/**
+ * Defines the simple properties for an edge style.
+ * @group Edges
+ */
+export interface LineStyle {
+    /**
+     * Width of the edge path
+     */
+    lineWidth?: number;
+    /**
+     * Width to draw the edge's outline path
+     */
+    outlineWidth?: number;
+    /**
+     * Color to paint the edge's path
+     */
+    color?: string;
+    /**
+     * Color to paint the edge's outline path
+     */
+    outlineColor?: string;
+    /**
+     * Definition of dash pattern to use to draw the edge path
+     */
+    dashArray?: string;
+}
+/**
+ * Base UI for apps and diagrams.
+ * @internal
+ */
+export declare abstract class UICore<EL, EVT = CoreUIEvent> extends OptimisticEventGenerator<EVT | CoreUIEvent> implements VisuallyJsRenderer<EL> {
+    protected _boundToolkitEvents: Array<any>;
+    protected _boundCanvasEvents: Array<[string, Function]>;
+    containerType: ElementType;
+    id: string;
+    defaults: UICoreDefaults<EL>;
+    private _initialDefaults;
+    hoverSuspended: boolean;
+    _suspendDrawing: boolean;
+    _suspendedAt: string;
+    $_dataLoading: boolean;
+    zoomToFitOnLoad: boolean;
+    plugins: Array<UIPlugin<EL, any, any>>;
+    pluginMap: Map<string, UIPlugin<EL, any, any>>;
+    connectorClass: string;
+    connectorOutlineClass: string;
+    connectorPathClass: string;
+    overlayClass: string;
+    labelOverlayClass: string;
+    /** @internal */
+    $_connMap: Record<string, Connection<EL>>;
+    allowNestedGroups: boolean;
+    $_discardEdgeEditsOnDrag: boolean;
+    $_vertexBuffer: number;
+    $_vertexBorder: number;
+    private _$_edgesAvoidVertices;
+    readonly viewport: Viewport<EL>;
+    readonly router: Router<EL, any>;
+    private _connectionTypes;
+    protected _container: EL;
+    private _pendingGroupsToSize;
+    private _DEFAULT_SCOPE;
+    get defaultScope(): string;
+    $defaultConnector: ConnectorSpec;
+    $defaultOverlays: Array<FullOverlaySpec>;
+    $defaultAnchor: AnchorSpec;
+    $defaultAnchors: [AnchorSpec, AnchorSpec];
+    private _sourceMarker;
+    private _targetMarker;
+    /**
+     * Set by helper classes when something is in motion. We use this to assist in deciding whether or not to respond to certain events (such as disable hover on edges when something is being dragged)
+     * @internal
+     */
+    protected $isInMotion: boolean;
+    magnetizerProfile: MagnetizeProfile;
+    protected magnetizer: Magnetizer<Vertex>;
+    /**
+     * Map of vertices that have been passed to the renderer but which have not yet been reported as rendered. Users of the API should not modify the contents of this map.
+     * @internal
+     */
+    protected $unrenderedVertices: Map<string, {
+        vertex: Vertex;
+        def: any;
+        eventInfo: any;
+    }>;
+    /**
+     * Map of group member added events which have not yet been processed, due to the group in question not having yet been rendered at the time the event was fired. The contents of this map are processed whenever a new group is added. Users of the API should not modify the contents of this map.
+     * @internal
+     */
+    protected $unprocessedGroupMemberships: Map<string, Array<GroupMemberAddedParams>>;
+    get $modelTopAttribute(): string;
+    get $modelLeftAttribute(): string;
+    get $modelWidthAttribute(): string;
+    get $modelHeightAttribute(): string;
+    get $modelRotationAttribute(): string;
+    $_useModelForSizes: boolean;
+    $_writeSizeToElements: boolean;
+    $_useModelForPositions: boolean;
+    readonly $_allowUnattachedEdges: boolean;
+    readonly $_edgesDetachable: boolean;
+    readonly $_reattachEdges: boolean;
+    readonly $paintConnectorOutline: boolean;
+    readonly $connectorOutlineColor: string;
+    readonly $connectorOutlineWidth: number;
+    private _zoom;
+    get currentZoom(): number;
+    /**
+     * @internal
+     * @protected
+     */
+    protected $collapsedGroupSizeCalculator: (group: Group, currentSize: Size) => Size;
+    private _defaultCollapsedGroupSize;
+    private _canCollapse;
+    private _canExpand;
+    /**
+     * @internal
+     */
+    view: UIModel<EL>;
+    /**
+     * @internal
+     */
+    gridProfile: GridProfile;
+    /**
+     * Method to invoke on connection established. Subclasses may wish to provide this.
+     * @internal
+     */
+    $connectionEstablished: (payload: ConnectionEstablishedParams) => any;
+    vertexList: Array<Node>;
+    /**
+     * Defaults to false. When true, if a port is added to a vertex programmatically, the UI treats the vertex's element as the element for the port if it cannot find a specific element for the port.
+     * @internal
+     */
+    logicalPorts: boolean;
+    /**
+     * Optional filter used to determine whether or not we want to render some specific object.
+     */
+    objectFilter: (b: Base) => boolean;
+    /**
+    * Map of layouts for groups. Do not manipulate the contents of this map.
+    * @internal
+    */
+    layoutMap: Map<string, AbstractLayout<any>>;
+    /**
+     * Current layout.
+     * @internal
+     */
+    $_layout: AbstractLayout<any>;
+    /**
+     * The underlying data model. You can access this on any instance of the UI to manipulate the data model - to add, remove, update model objects, create selections, etc.
+     */
+    model: VisuallyJsModel;
+    /**
+     * The data model that is being rendered. In the majority of cases this points to the same object as `model`, but you can render some subset of a data model, such as a dynamically updated Selection.
+     */
+    dataSource: DataSource;
+    /**
+     * @internal
+     */
+    private _refreshLayoutOnEdgeConnect;
+    /**
+     * @internal
+     */
+    private _simpleEdgeStyles;
+    /**
+     * The root element the UI is hosted in.
+     * @internal
+     */
+    rootElement: EL;
+    protected constructor(model: VisuallyJsModel, dataSource: DataSource, rootElement: EL, options: UICoreOptions<EL, any>, defaults?: UICoreDefaults<EL>);
+    /**
+     * Gets the Layout this surface is currently using.
+     */
+    getLayout(): AbstractLayout<any>;
+    /**
+     * Directly sets the size of a group element (using the `setSize` method, which abstracts out if its an HTML or SVG element)
+     * @internal
+     * @param group
+     * @param size
+     */
+    abstract $setGroupElementSize(group: Group, size: Size): void;
+    /**
+     * Notification from the model that the target for some edge has changed.
+     * @param data
+     * @private
+     */
+    $edgeTargetChanged(data: EdgeTargetChangedParams): void;
+    $select(d: {
+        append: boolean;
+        obj: Base;
+        selection: VisuallyJsSelection;
+    }): void;
+    /**
+     *
+     * @param val Subclasses should override
+     * @param thenRefresh
+     * @internal
+     */
+    setSuspendRendering(val: boolean, thenRefresh?: boolean): void;
+    $deselect(d: {
+        selection: VisuallyJsSelection;
+        obj: Base;
+    }): void;
+    $selectionCleared(sel: VisuallyJsSelection): any;
+    private __findAndRegisterPortElement;
+    /**
+     * Notification from the model that the source for some edge has changed.
+     * @param data
+     * @private
+     * @internal
+     */
+    $edgeSourceChanged(data: EdgeSourceChangedParams): void;
+    /**
+     * Part of the renderer contract: the model wants to know if this renderer is destroyed.
+     * @param cb
+     * @internal
+     */
+    onDestroy(cb: (r: VisuallyJsRenderer<EL>) => any): void;
+    /**
+     * Bind to an event on the model. Always use this method when you bind something new, because it tracks the various bindings, allowing us to unregister them from the model if/when this component gets destroyed.
+     * @param evt
+     * @param fn
+     * @internal
+     */
+    private __bindToToolkit;
+    /**
+     * Called upon receiving an EVENT_DATA_LOAD_START from the model. TODO this should also be the first entry for the internal code that loads a model's existing data when the Surface is created.
+     * @internal
+     */
+    $dataLoadStart(): void;
+    /**
+     * Called upon receiving an EVENT_DATA_APPEND_START from the model.
+     * @internal
+     */
+    $dataAppendStart(): void;
+    $dataAppendEnd(noDataWasAppended?: boolean): void;
+    /**
+     This method needs to be updated to work with _setDataLoading to ensure that all vertices for some batch load have been rendered before the stuff here happens. Vertices might be painted async by the underlying template engine, such as React 18 or Vue 3.
+     * @param noDataWasLoaded
+     * @internal
+     */
+    $dataLoadEnd(noDataWasLoaded?: boolean): void;
+    /**
+     * Zooms the display so that all the tracked elements fit inside the viewport. This method will also, by default, increase the zoom if necessary - meaning the default behaviour is to adjust the zoom so that the content fills the viewport. You can suppress zoom increase by setting `doNotZoomIfVisible:true` on the parameters to this method.
+     * @tags zoom
+     */
+    zoomToFit(params?: ZoomToFitOptions): void;
+    /**
+     * Zooms the display so that all the tracked elements fit inside the viewport, but does not make any adjustments to zoom if all the elements are currently visible (it still does center the content though).
+     * @tags zoom
+     */
+    zoomToFitIfNecessary(params?: ZoomToFitIfNecessaryOptions): void;
+    /**
+     * Zooms the viewport so that all of the given elements are visible.
+     * @param zParams
+     * @tags zoom
+     */
+    zoomToElements(zParams: ZoomToElementsOptions<EL>): void;
+    /**
+     * Clones the given vertex. NOTE: this does not clone the children of a group. Only the group will be cloned, and it will be empty.
+     * @param vertex
+     * @param options Optional position to use for the new vertex. May be null.
+     */
+    cloneVertex(vertex: string | Node | Group | Element, options?: VertexCloneOptions): Node | Group | null;
+    _loadExistingData(): boolean;
+    /**
+     * list of edges that are as-yet unrendered due to one or both of their vertices not having been rendered.
+     * @internal
+     */
+    private _unrenderedEdges;
+    /**
+     * @internal
+     */
+    $_hasUnrenderedEdges(): boolean;
+    private _resolveSourceAndTargetTypes;
+    /**
+     * Extract simple edge styles from the given edge data and apply to the given object, returning true if one or more styles were extracted.
+     * @param edge
+     * @param o
+     * @internal
+     */
+    $_extractSimpleEdgeStyles(data: ObjectData, o: Record<string, any>): boolean;
+    private _doRenderEdgeNew;
+    /**
+     * @internal
+     */
+    $graphClearStart(): void;
+    /**
+     * @internal
+     */
+    $graphClearEnd(): void;
+    /**
+     * Notification from the model that a group was removed. We remove the managed element, and, optionally, managed elements for its children, if the children were removed.
+     * @internal
+     */
+    $groupRemoved(deletion: GroupRemovedParams): ViewportGroupElement<EL>;
+    /**
+     * Queues up an edge for rendering, perhaps rendering it immediately if its vertices are both available. Otherwise whenever a new vertex is rendered we'll check to see if the edge can then be rendered.
+     * @param edge
+     * @param flushNow
+     * @internal
+     */
+    private _enqueueEdge;
+    /**
+     * Checks the list of edges that are currently unrendered to see if there are any for which the vertices have now
+     * been rendered, and therefore the edge can be rendered.  For internal use.
+     * @internal
+     */
+    private $flushUnrenderedEdges;
+    /**
+     * Check to see if an edge can be rendered (ie. there is an element available for both its source and target), and
+     * if so, render it.
+     * @internal
+     */
+    private _maybeRenderEdge;
+    $edgeAdded(data: EdgeAddedParams, context?: Record<string, any>): void;
+    $edgeRemoved(data: EdgeRemovedParams): void;
+    /**
+     * Callback from the model when the geometry for some edge has been updated.
+     * @internal
+     * @param edge
+     * @param geometry
+     * @param originalGeometry
+     * @private
+     */
+    $edgeGeometryUpdated(edge: Edge, geometry: any, originalGeometry: any): void;
+    $exportEdgeGeometry(edge: Edge): any;
+    $nodeAdded(params: NodeAddedParams): void;
+    $groupAdded(params: GroupAddedParams): void;
+    $portAdded(p: PortAddedParams): void;
+    $vertexUpdated(p: VertexUpdatedParams): void;
+    private __fireVertexMovedEvent;
+    private __fireNodeRemovedEvent;
+    /**
+     * Gets the layout that is managing the given vertex: if its inside a group, the layout is the layout for the vertex's parent group. Otherwise the layout is the surface's layout.
+     * @internal
+     * @param obj
+     */
+    getLayoutFor(obj: Vertex): AbstractLayout<any>;
+    /**
+     * Notification from the model that a vertex was added to a group. We attempt to execute this immediately but in some cases the renderer hasnt rendered the group yet, in which case we enqueue the addition, and we'll process it when we are notified that the given group has been rendered.
+     * @param p
+     * @private
+     * @internal
+     */
+    $groupMemberAdded(p: GroupMemberAddedParams): void;
+    /**
+     * Attempts to process the addition of some child vertex to a group, returning true if successful and false if not (it is possible the group has not yet been rendered).
+     * @param p
+     * @private
+     */
+    private $_processGroupAddition;
+    /**
+     * Notification from the model that a vertex was removed from a group.
+     * @param p
+     * @private
+     * @internal
+     */
+    $groupMemberRemoved(p: GroupMemberRemovedParams): void;
+    /**
+     * Notification from the model that a node was removed
+     * @internal
+     * @param deletion
+     */
+    $nodeRemoved(deletion: NodeRemovedParams): ViewportElement<EL>;
+    /**
+     * Notification from the model that a port was removed
+     * @internal
+     * @param deletion
+     */
+    $portRemoved(deletion: PortRemovedParams): void;
+    /**
+     * Notification from the model that an edge type changed. We check for an edge definition for the new type and
+     * adjust anything we need to if we find one.
+     * @param edge
+     * @param previousType
+     * @param newType
+     * @private
+     * @internal
+     */
+    $edgeTypeChanged(edge: Edge, previousType: string, newType: string): void;
+    /**
+     * Notification from the model that a group type changed. NOP, currently.
+     * @internal
+     * @param group
+     * @param previousType
+     * @param newType
+     * @private
+     * @internal
+     */
+    $groupTypeChanged(group: Group, previousType: string, newType: string): void;
+    /**
+     * Notification from the model that a node type changed.
+     * @internal
+     * @param node
+     * @param previousType
+     * @param newType
+     * @private
+     */
+    $nodeTypeChanged(node: Node, previousType: string, newType: string): void;
+    /**
+     * Notification from the model that a poty type changed. NOP, currently.
+     * @internal
+     * @param port
+     * @param previousType
+     * @param newType
+     * @private
+     * @internal
+     */
+    $portTypeChanged(port: Port, previousType: string, newType: string): void;
+    /**
+     * Notification from a template engine that a vertex was rendered
+     * @param v
+     * @param el
+     * @param def
+     * @param eventInfo
+     * @internal
+     */
+    $vertexRendered<N extends Vertex>(v: N, el: EL, def: VertexMapping<any, EL>, eventInfo?: {
+        position: PointXY;
+    }): void;
+    /**
+     * Toggle the visible state of some edge.
+     * @param edge
+     * @param state
+     * @param doNotCascade
+     * @internal
+     */
+    private __toggleEdge;
+    /**
+     * Returns whether or not the given model object is visible.
+     * @param obj
+     */
+    isVisible(obj: Base): any;
+    /**
+     * Sets the visible state of some model object or group of model objects. If the object is a vertex, the visible state will be applied to all edges connected to the given vertex.
+     *
+     * By default this method will, for groups and nodes, cascade down to any nested vertices.
+     * @param obj - Edge, Group, Node or Port, and array of these, or a `FilterableDataset`, such as a `Selection`.
+     * @param state - True if edges should be visible, false otherwise.
+     * @param doNotCascade - Defaults to false. If true, don't cascade down to any nested vertices.
+     *
+     */
+    setVisible(obj: FilterableDataset | ArrayLike<Edge | Group | Node | Port> | Base, state: boolean, doNotCascade?: boolean): void;
+    private __toggleNode;
+    /**
+     *
+     * @internal
+     */
+    private _applyFunctionToObject;
+    /**
+     * Get a size for the given vertex based upon its backing data, and if there are no width/height values
+     * in the backing data, use the default from either the node/group definition mapping the vertex, or
+     * the node/group default.
+     * @param v
+     * @param def
+     * @internal
+     */
+    protected $resolveVertexSizeFromModel(v: Vertex, def: VertexMapping<any, EL>): Size;
+    /**
+     * Gets the size to use for the given vertex according to the current defaults - either as specified in the vertex
+     * definition, or if that is not present, from the instance defaults for the vertex type (either group or node).
+     * @param v
+     * @param def
+     */
+    protected $_getDefaultSizeForVertex(v: Vertex, def: NodeOrGroupMapping<any, EL, any>): Size;
+    /**
+     * Gets the size for the given vertex by reading its data object. Returns null if a value for both width and height
+     * are not found.
+     * @param v
+     */
+    protected $_getModelSizeForVertex(v: Vertex): Size | null;
+    getContainer(): any;
+    /**
+     * Sets the current zoom. Subclasses can/should override this to do anything specific related to their internal architecture.
+     * @param z
+     * @param animate
+     */
+    setZoom(z: number, animate?: boolean): number;
+    /**
+     * Gets the internal ID for the given element by reading the value of its ATTRIBUTE_MANAGED attribute; writing a value for that attribute if it is not currently set.
+     * @internal
+     * @param element
+     */
+    _getId(element: EL): string;
+    /**
+     * @internal
+     * @param c
+     */
+    setContainer(c: EL): void;
+    private _set;
+    /**
+     * Change the source of the given connection to be the given element.
+     * @param connection
+     * @param el
+     * @internal
+     */
+    private __setSource;
+    /**
+     * Change the target of the given connection to be the given element.
+     * @param connection
+     * @param el
+     * @internal
+     */
+    private __setTarget;
+    /**
+     * Sets the type of a connection and then repaints it.
+     * @param connection
+     * @param type
+     * @internal
+     */
+    private $_setConnectionType;
+    /**
+     * Sets whether or not drawing is suspended.
+     * @param val - True to suspend, false to enable.
+     * @param repaintAfterwards - If true, repaint everything afterwards.
+     * @internal
+     */
+    protected $_setSuspendDrawing(val?: boolean, repaintAfterwards?: boolean): boolean;
+    /**
+     * Suspend drawing, run the given function, and then re-enable drawing, optionally repainting everything.
+     * @param fn - Function to run while drawing is suspended.
+     * @param doNotRepaintAfterwards - Whether or not to repaint everything after drawing is re-enabled.
+     * @internal
+     */
+    $batch(fn: Function, doNotRepaintAfterwards?: boolean): void;
+    /**
+     * Update the cached offset information for some element.
+     * @param params
+     * @returns an UpdateOffsetResult containing the offset information for the given element.
+     * @internal
+     */
+    private _updateOffset;
+    private _beforeDetach;
+    /**
+     * Delete the given connection. Do not call this method as part of the API. It will not result in the model being
+     * updated. This method is called in response to model changes.
+     * @param connection - Connection to delete.
+     * @param params - Optional extra parameters.
+     * @internal
+     */
+    private _deleteConnection;
+    /**
+     * Manage an element.  Adds the element to the viewport and sets up tracking for connections for the element
+     * @param element - Element to manage. An element of the type the current renderer works with. In the browser-ui package, for example, this is a DOM element.
+     * @internal
+     */
+    $manage(element: EL, modelObject: Vertex, position: PointXY, size: Size, rotation: number, _recalc: boolean): ViewportElement<EL>;
+    /**
+     * Gets the managed element with the given ID from the list managed elements, null if not currently managed.
+     * @param id
+     * @internal
+     */
+    $getManagedElement<N extends ViewportElement<EL>>(id: string): N;
+    /**
+     * Stops managing the given element, removing it from internal tracking and clearing the custom attribute that is added by VisuallyJs to mark it as managed. This method fires an 'element:unmanage' event containing the unmanaged element and its managed id.
+     * @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: EL, removeChildren: boolean, removeElement: boolean): void;
+    /**
+     * Rotate the given vertex by the given number of degrees.  The UI element representing the vertex is rotated and the view is updated, and an event is pushed to the undo stack.
+     * @param obj - Either a vertex ID, or a Node/Group
+     * @param amountInDegrees - Amount - in degrees - to rotate.
+     */
+    rotate(obj: string | Vertex, amountInDegrees: number): void;
+    /**
+     * Sets the width and height of the given vertex, updating the UI and the model, and adding an event to the undo stack. NOTE this method may not have entirely the effect you want unless you have `useModelForSizes` set in the constructor options for this UI instance.
+     * @param obj
+     * @param width
+     * @param height
+     */
+    setSize(obj: string | Vertex, width: number, height: number): void;
+    /**
+     * Sets rotation for the element to the given number of degrees (not radians). A value of null is treated as a rotation of 0 degrees. Updates the viewport, and expects subclasses to update the UI to reflect the rotation. DOES NOT update the model, or add anything to the undo stack.
+     * @param element - Element to rotate
+     * @param rotation - Amount to rotate, in degrees.
+     * @param _doNotRepaint - For internal use.
+     * @internal
+     */
+    private _rotateElement;
+    abstract $isTouchDevice(): boolean;
+    abstract $syncManagedElementWithView(mel: ViewportElement<EL>, andThenRepaint: boolean): void;
+    /**
+     * Gets the current bounds of the UI's viewport.
+     */
+    abstract getViewportBoundsInfo(): ViewportBounds;
+    abstract getApparentCanvasLocation(): PointXY;
+    abstract toFront(v: string | Vertex | EL, alsoBringAncestorsToFront?: boolean): void;
+    abstract toBack(v: string | Vertex | EL, alsoSendAncestorsToBack?: boolean): void;
+    /**
+     * Gets the current rotation for the element with the given ID. This method exists for internal use.
+     * @param elementId - Internal ID of the element for which to retrieve rotation.
+     * @internal
+     */
+    $getRotation(elementId: string): number;
+    /**
+     * Returns a list of rotation transformations that apply to the given element. An element may have rotation applied directly to it, and/or it may be within a group, which may itself be rotated, and that group may be inside a group which is also rotated, etc. It's rotated turtles all the way down, or at least it could be. This method is intended for internal use only.
+     * @param elementId
+     * @internal
+     */
+    $getRotations(elementId: string): Rotations;
+    /**
+     * Updates position/size information for the given element, if we are managing it. See `_revalidateManagedElement` for further information.
+     * @param element element to revalidate
+     * @param timestamp - Optional, used internally to avoid recomputing position/size information if it has already been computed.
+     * @internal
+     * @see _revalidateManagedElement
+     */
+    $revalidateElement(element: EL, timestamp?: string): RedrawResult;
+    /**
+     * Updates position/size information for the element with the given id. See `_revalidateManagedElement` for further information.
+     * @param id ID of the element to revalidate
+     * @param timestamp - Optional, used internally to avoid recomputing position/size information if it has already been computed.
+     * @internal
+     * @see _revalidateManagedElement
+     */
+    $revalidateElementById(id: string, timestamp?: string): RedrawResult;
+    /**
+     * Updates position/size information for the given managed element and redraws its Connections. Use this method when you've made a change to some element that may have caused the element to change its position or size and you want to ensure the connections are in the right place.
+     * @param entry - Managed Element to revalidate.
+     * @param timestamp - Optional, used internally to avoid recomputing position/size information if it has already been computed.
+     * @internal
+     */
+    $revalidateManagedElement(entry: ViewportElement<EL>, timestamp?: string): RedrawResult;
+    /**
+     * Repaint every connection in the instance.
+     */
+    repaintEverything(doNotRefreshElements?: boolean): void;
+    /**
+     * Repaints the given vertex and all of the edges connected to it.
+     * @param el Either an element, a vertex id, or a Vertex.
+     * @param resetToLayoutPosition If true, the UI will also ensure that the given element's position in the canvas is reset to the position the viewport has. This is mostly an internal flag, used when resetting certain dragging scenarios.
+     */
+    repaint(el: string | EL | Vertex, resetToLayoutPosition?: boolean): void;
+    /**
+     * Repaints all connections associated with the given element, _without recomputing the element size and position_. If you want to first recompute element size and position you should call `revalidate(el)` instead,
+     * @param el - Element to repaint.
+     * @param timestamp - Optional parameter used internally to avoid recalculating offsets multiple times in one paint.
+     * @param offsetsWereJustCalculated - If true, we don't recalculate the offsets of child elements of the element we're repainting.
+     * @internal
+     */
+    $repaintUIElement(el: ViewportElement<EL>, timestamp?: string, offsetsWereJustCalculated?: boolean): RedrawResult;
+    /**
+     * Clears all connections from the UI instance. Does not also clear out event listeners, selectors, or
+     * connection types - for that, use `destroy()`.
+     */
+    reset(): void;
+    /**
+     * Gets the underlying connection that was rendered for the Edge with the given id.
+     * @param edgeId ID of the Edge to retrieve the Connection for.
+     * @returns A Connection, null if not found.
+     *
+     */
+    getRenderedConnection(edgeId: string): Connection<EL>;
+    getNodes(): Array<Node>;
+    getGroups(): Array<Group>;
+    getUIGroups(): Array<ViewportGroupElement<EL>>;
+    /**
+     * Clears the instance and unbinds any listeners on the instance. After you call this method you cannot use this instance of VisuallyJs again.
+     */
+    destroy(): void;
+    /**
+     * Register a connection type: a set of connection attributes grouped together with an ID.
+     * @param id
+     * @param type
+     * @internal
+     */
+    $registerConnectionType(id: string, type: TypeDescriptorBase): void;
+    /**
+     * Retrieve a connection type by its id.
+     * @param id
+     * @internal
+     */
+    $getConnectionType(id: string): CompiledTypeDescriptor;
+    /**
+     * @internal
+     * @param originalId
+     * @param newId
+     * @param connection
+     * @param newElement
+     * @param index
+     */
+    $sourceOrTargetChanged(originalId: string, newId: string, connection: Connection<EL>, newElement: EL, index: ProxyLocation): void;
+    private _cascadeGroupResize;
+    /**
+     * Expand a collapsed group, unproxying any connections from the collapsed group to their original destination
+     * @param groupIdOrGroup
+     */
+    expandGroup(groupIdOrGroup: Group | string): void;
+    /**
+     * @internal
+     * @param e
+     * @param index
+     * @param managedElement
+     * @private
+     */
+    $_proxyEdge(e: Edge, index: ProxyLocation, managedElement: ViewportElement<EL>, anchor?: LightweightAnchor): void;
+    $_unproxyEdge(e: Edge, index: ProxyLocation, newAnchorSpec?: ObjectAnchorSpec): ViewportElement<EL> | null;
+    private _cascadeGroupExpand;
+    /**
+     * Expand a group if it is collapsed, or collapse it if it is expanded.
+     * @param group
+     *
+     */
+    toggleGroup(group: string | Group): void;
+    /**
+     * Searches for an ancestor of the given group that is in a collapsed state. The collapse/expand methods use this to determine whether or not to take any action: if there is an ancestor that is collapsed, we would not want to collapse/expand one of its descendants.
+     * @internal
+     * @param group Group to search for a collapsed ancestor for.
+     */
+    private __getCollapseParent;
+    /**
+     * Collapse the given group, hiding all of its internal edges and proxying any edges to internal members to the collapsed element (unless the group definition for this group specifies `proxied:false`). Every edge with a source/target that is a descendant of this group is a candidate for proxying.
+     * @param groupIdOrGroup
+     */
+    collapseGroup(groupIdOrGroup: Group | string): void;
+    protected $computeCollapsedGroupSize(group: Group, currentSize: Size): Size;
+    protected $getCollapsedGroupSize(group: Group, currentSize: Size): Size;
+    /**
+     * Find all the children of the given group that are themselves groups.
+     * @param group
+     * @private
+     */
+    private __getGroupsInGroup;
+    /**
+     * Cascade the processing of the edges of some collapsed  group down to its children and their children etc - when a parent group is collapsed, so must all of its descendants be. This _only_ collects edges, and makes no model updates.
+     * @param collapsedGroup
+     * @param targetGroup
+     * @param collapsedIds
+     * @internal
+     */
+    private _cascadeGroupCollapseEdgeProcessing;
+    private _getGroupsOrderedByDepth;
+    private __orderGroupsByDepth;
+    /**
+     * Gets all of the managed nodes that are visible, or partly visible, in the current viewport.
+     * @internal
+     */
+    abstract $getNodesInViewport(): Array<{
+        el: ViewportNodeElement<EL>;
+        bb: RectangleXY;
+    }>;
+    /**
+     * Gets all of the managed groups that are visible, or partly visible, in the current viewport.
+     * @internal
+     */
+    abstract $getGroupsInViewport(): Array<{
+        el: ViewportGroupElement<EL>;
+        bb: RectangleXY;
+    }>;
+    /**
+     * Relayout the given group.
+     * @param groupOrId The group - or the ID of the group - to relayout.
+     * @public
+     */
+    relayoutGroup(groupOrId: string | Group, reason?: GroupRelayoutReason): void;
+    /**
+     * Update the position of a set of vertices, optionally adding the given offset to their values prior to writing to the viewport.  This latter mechanism is used when storing the results of a group layout. Does not update the model unless requested.
+     * @internal
+     * @param positions
+     * @param sizes
+     */
+    $_updateVertexPositions(p: {
+        /**
+         * Positions to store
+         */
+        positions: Record<string, PointXY>;
+        /**
+         * associated sizes, may be null
+         */
+        sizes: Record<string, Size>;
+        /**
+         * rotations to set, may be null
+         */
+        rotations: Record<string, number>;
+        /**
+         * sizes of groups, may be null
+         */
+        resizedGroups: Record<string, {
+            group: Group;
+            originalGroupSize: Size;
+            newGroupSize: Size;
+        }>;
+        /**
+         * optional parent offset, set to null if you dont need it (it's used when updating group members)
+         */
+        offset: PointXY;
+        /**
+         * whether or not to store positions in the model.
+         */
+        storePositionsInModel: boolean;
+        /**
+         * Whether or not to repaint connections to these vertices afterwards.
+         */
+        repaintConnections: boolean;
+        writeSizesToElements: boolean;
+        /**
+         * Whether or not to also apply the rotations to the element
+         */
+        writeRotationsToElements: boolean;
+    }): RedrawResult;
+    /**
+     * Runs a relayout of all vertices in the canvas, and of each group.
+     * @param newParameters
+     * @param doNotRepaintConnections
+     *
+     */
+    relayout(newParameters?: any, doNotRepaintConnections?: boolean): void;
+    /**
+     * Refreshes the layout. For some layouts this is the same as a full relayout.
+     * @param doNotRepaintConnections
+     *
+     */
+    refresh(doNotRepaintConnections?: boolean): void;
+    /**
+     * Runs the layout, then perhaps runs the magnetizer afterwards, then runs group layout for all groups. Stores positions in the model and updates the UI.
+     * @param executor
+     * @param runAfter
+     * @param event
+     * @param doNotRepaintConnections
+     * @private
+     * @internal
+     */
+    private __runLayout;
+    /**
+     * Repaint this edge.
+     * @param edge
+     */
+    repaintEdge(edge: Edge): void;
+    /**
+     * Repaint this set of edges.
+     * @param edges
+     */
+    repaintEdges(edges: Array<Edge>): void;
+    /**
+     * @internal
+     * @param connection
+     * @param params
+     */
+    $paintConnection(connection: Connection<EL>, params?: {
+        timestamp?: string;
+    }): void;
+    /**
+     * Adds an overlay to the given component, repainting the UI as necessary.
+     * @param component - A Connection to add the overlay to
+     * @param overlay - Spec for the overlay
+     * @param doNotRevalidate - Defaults to true. If false, a repaint won't occur after adding the overlay. This flag can be used when adding several overlays in a loop.
+     * @internal
+     */
+    $addOverlay(component: Connection<EL>, overlay: OverlaySpec, doNotRevalidate?: boolean): Overlay<EL>;
+    /**
+     * Remove the overlay with the given id from the given component.
+     * @param conn - Connection to remove the overlay from.
+     * @param overlayId - ID of the overlay to remove.
+     * @internal
+     */
+    $removeOverlay<E>(conn: Connection<E>, overlayId: string): void;
+    /**
+     * Internal method to set line style, with option to not repaint.
+     * @param conn
+     * @param style
+     * @param doNotRepaint
+     * @internal
+     */
+    $_setLineStyle(conn: Connection<EL>, style: LineStyle, repaintAfterwards: boolean): void;
+    /**
+     * Sets the current view for this renderer.
+     * @param view View to set.
+     * @internal
+     */
+    private $setView;
+    /**
+     * Finds all of the vertices that intersect the rectangle described by `origin` and `dimensions`.
+     * @param options Options for the find operation.
+     */
+    findIntersectingVertices(options: IntersectingVerticesOptions): Array<IntersectingVertex<EL>>;
+    /**
+     * Finds all of the vertices that are enclosed by the rectangle described by `origin` and `dimensions`.
+     * @param options Options for the find operation.
+     */
+    findEnclosedVertices(options: EnclosedVerticesOptions): Array<IntersectingVertex<EL>>;
+    abstract $zoomToFit(params?: ZoomToFitOptions): void;
+    abstract $zoomToFitIfNecessary(params?: ZoomToFitIfNecessaryOptions): void;
+    abstract $zoomToElements(zParams: ZoomToElementsOptions<EL>): void;
+    /**
+     * 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
+     */
+    abstract $removeClassFromElement(el: EL | ArrayLike<EL>, clazz: string): void;
+    /**
+     * 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
+     */
+    abstract $addClassToElement(el: EL | ArrayLike<EL>, 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
+     */
+    abstract $toggleClassOnElement(el: EL | ArrayLike<EL>, clazz: string): void;
+    /**
+     * Gets the CSS class for the given element.
+     * @param el
+     * @internal
+     */
+    abstract $getClassFromElement(el: EL): string;
+    /**
+     * Returns whether or not the given element has the given class.
+     * @param el
+     * @param clazz
+     * @internal
+     */
+    abstract $elementHasClass(el: EL, clazz: string): boolean;
+    /**
+     * Updates classes for the given element
+     * @param el
+     * @param classesToAdd
+     * @param classesToRemove
+     * @internal
+     */
+    abstract $updateElementClasses(el: EL, classesToAdd: Array<string>, classesToRemove: Array<string>): void;
+    /**
+     * Sets an attribute on the given element.
+     * @param el
+     * @param name
+     * @param value
+     * @internal
+     */
+    abstract $setAttribute(el: EL, name: string, value: string): void;
+    /**
+     * Gets an attribute from the given element.
+     * @param el
+     * @param name
+     * @internal
+     */
+    abstract $getAttribute(el: EL, 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
+     */
+    abstract $setAttributes(el: EL, 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
+     */
+    abstract $removeAttribute(el: EL, attName: string): void;
+    /**
+     * 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
+     */
+    abstract $getSelector(ctx: string | EL, spec?: string): Array<EL>;
+    /**
+     * 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
+     */
+    abstract $getStyle(el: EL, prop: string): any;
+    /**
+     * For some element, find the model object it represents (and the DOM element for that model object)
+     * @param el
+     * @param searchAncestors
+     * @internal
+     */
+    abstract getModelObjectFromElement(el: EL, searchAncestors: boolean, createMissingPorts: boolean): {
+        obj: Node | Group | Port | Edge;
+        el: EL;
+    } | null;
+    /**
+     * Gets the element that was rendered for the Port with the given id (does not retrieve `vjs-endpoint` elements)
+     * @param portId
+     */
+    abstract getRenderedPort(port: string | Port): EL;
+    /**
+     * for some node/group/port, get the element that was used to render it.
+     * @param obj
+     */
+    abstract getRenderedElement(obj: string | Base): EL;
+    /**
+     * Method that will be invoked after a full relayout has occurred
+     * @param p
+     * @private
+     * @internal
+     */
+    abstract $afterRelayout(p: LayoutResultSet): void;
+    /**
+     * Method that will be invoked after a layout refresh has occurred
+     * @param p
+     * @private
+     * @internal
+     */
+    abstract $afterRefresh(p: LayoutResultSet): void;
+    /**
+     * Tests whether the given item is of the current element type
+     * @param e
+     * @internal
+     */
+    abstract $isSupportedElement(e: any): e is EL;
+    /**
+     * For some given element, find any other elements we want to draw whenever that element
+     * is being drawn. for groups, for example, this means any child elements of the group. For an element that has
+     * child elements that are also managed, it means those child elements.
+     * @param el
+     * @internal
+     */
+    abstract $getAssociatedElements(el: EL): Array<EL>;
+    abstract $isElement(obj: any): obj is EL;
+    abstract $removeElement(el: EL): void;
+    abstract $appendElement(el: EL, parent: EL, insertAtStart?: boolean): void;
+    abstract $appendElementToContainer(e: EL, insertAtStart?: boolean): void;
+    abstract $appendElementToVertexLayer(e: EL, insertAtStart?: boolean): void;
+    abstract $appendElementToToolsLayer(e: EL, insertAtStart?: boolean): void;
+    /**
+     * Append an element that represents an overlay. It is up to the subclass to decide where to append the element - there may be
+     * a separate layer dedicated to overlays, for example.
+     * @param e
+     * @param insertAtStart
+     * @internal
+     */
+    abstract $appendOverlayElement(e: EL, insertAtStart?: boolean): void;
+    /**
+     * Append an element that represents a vertex. It is up to the subclass to decide where to append the element - there may be
+     * a separate layer dedicated to vertices, for example.
+     * @param e
+     * @param insertAtStart
+     * @internal
+     */
+    abstract $appendVertexElement(e: EL, insertAtStart?: boolean): void;
+    /**
+     * Append an element that represents an Edge. It is up to the subclass to decide where to append the element - there may be
+     * a separate layer dedicated to edges, for example.
+     * @param e
+     * @param insertAtStart
+     * @internal
+     */
+    abstract $appendEdgeElement(e: EL, insertAtStart?: boolean): void;
+    abstract $setElementVisible(el: EL, visible: boolean): void;
+    /**
+     * Sets the size of the element in the UI. The details of this are specific to the concrete subclass. No model edits occur as a result of this method.
+     * @param el
+     * @param width
+     * @param height
+     * @internal
+     */
+    abstract $setElementSizeInUI(el: EL, width: number, height: number): void;
+    /**
+     * Sets the width of the element in the UI. The details of this are specific to the concrete subclass. No model edits occur as a result of this method.
+     * @param el
+     * @param width
+     * @internal
+     */
+    abstract $setElementWidth(el: EL, width: number): void;
+    /**
+     * Sets the height of the element in the UI. The details of this are specific to the concrete subclass. No model edits occur as a result of this method.
+     * @param el
+     * @param height
+     * @internal
+     */
+    abstract $setElementHeight(el: EL, height: number): void;
+    /**
+     * Gets the size of the element in the UI. The details of this are specific to the concrete subclass.
+     * @internal
+     */
+    abstract $getSize(el: EL): Size;
+    /**
+     * Sets the element's rotation.The details of this are specific to the concrete subclass.
+     * @param el
+     * @param r
+     * @internal
+     */
+    abstract $setElementRotation(el: EL, r: number): void;
+    /**
+     * Gets the position and size of the given element relative to the window origin, _in page coordinates_. This method abstracts the `getBoundingClientRect()` method in the browser UI renderer.
+     * @param el Element to get position for
+     * @internal
+     */
+    abstract $getElementPositionInWindow(el: EL): RectangleXY;
+    /**
+     * 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. The details of this are specific to the concrete subclass.
+     * TODO can the group content area code use some other existing method?
+     * @param el
+     * @param width
+     * @param height
+     * @internal
+     */
+    abstract $getElementPositionInUIRelativeToParent(el: EL): PointXY;
+    /**
+     * Gets the x,y of the given element relative to the canvas origin, taking the scroll of any parent elements into account, and taking into account nested groups etc.
+     * @internal
+     * @param el
+     */
+    abstract $getElementPositionInUIRelativeToCanvasOrigin(el: EL, knownElementSize?: Size): PointXY;
+    /**
+     * Gets the position of the given element relative to the browser window's origin.
+     * @param el
+     * @internal
+     */
+    abstract $getOffsetRelativeToRoot(el: EL | string): PointXY;
+    /**
+     * Gets the element that acts as the content area for the group represented by `el`. The details of this are specific to the concrete instance.
+     * @param el
+     * @internal
+     */
+    abstract $getGroupContentAreaElement(el: EL): EL;
+    /**
+     * Gets the element that acts as the content area for the given Group.
+     * @param group
+     * @internal
+     */
+    private _getGroupContentArea;
+    /**
+     * For the given group id, get the origin of the content area for the group, in page coordinates, plus its offset from the group's origin, in group coordinates, and the element representing the content area. For groups whose template does not declare a content area child element, the content area is the group's element, the content area origin is the origin of the group itself. But when there's a content area inside the group, the origin needs to be adjusted. The `pageOrigin` member of the return value from this method contains the point which acts as the origin for any of this group's child vertices.
+     * @param id
+     * @internal
+     */
+    $_getGroupContentAreaInfo(id: string): GroupContentAreaInfo<EL>;
+    getElementPosition(id: string): PointXY;
+    getElementSize(id: string): Size;
+    getElement(id: string): ViewportElement<EL>;
+    getGroupElement(id: string): ViewportGroupElement<EL>;
+    /**
+     * Decodes the given input into a data structure containing a model object, its type, its ID, and the element used to represent it. Always returns a value even if no model object could be resolved for the given input, because in some circumstances the given input represents an element from the UI that is not in the model (such as when dragging a new edge)
+     * @param obj - Object to decode. Can be in many different forms - an existing model object, a vertex id, an element, a Connection, some backing data.
+     * @typeParam V The type of object you're expecting back from the method. This is for convenience, so that the `obj` member of the return value is typed conveniently for what you want to do with it.
+     */
+    getObjectInfo<V extends Base>(obj: EL | Connection<EL> | string | Base | ObjectData, createMissingPorts: boolean): UIObjectInfo<V, EL>;
+    /**
+     * Gets the current list of magnetizable vertices, ie vertices that are not inside a group.
+     * @private
+     * @internal
+     */
+    private _getMagnetizableVertices;
+    private _prepareMagnetizerParams;
+    /**
+     *
+     * Run the magnetizer and get some updated positions back, but DO NOT update the model.
+     * @internal
+     * @param focus Optional focus element, which should not be moved (and which will provide the center of the magnetize operation).
+     * @param origin Optional origin for the magnetize. Not needed if you provide `focus`, and if you dont provide either focus or this we use the computed center of all thevertices
+     * @param gather Defaults to false. If true, dont magnetize, gather
+     * @param knownLocations Map of vertices whose location is already known, which doesnt necessarily mean that's where the vertices are, it's just where we want to _say_ they are for the purposes of this run of the magnetizer.
+     * @param vertices list of vertices to operate on. If not provided, all vertices in the data source will be used.
+     */
+    private _runMagnetizer;
+    /**
+     * Run the magnetizer and then update the affected elements in the model afterwards.
+     * @param focus
+     * @param origin
+     * @param event
+     * @param gather
+     * @internal
+     */
+    private _runMagnetizerAndUpdate;
+    /**
+     * Magnetize the elements in the display. If `focus` is provided it will be used as the origin for magnetization,
+     * and not moved (unless `repositionFocus` is true). If no `focus` is provided, the computed center of all the
+     * elements will be used as the origin.
+     * @param focus
+     *
+     */
+    magnetize(focus?: string | Vertex, repositionFocus?: boolean): void;
+    /**
+     * Run the magnetizer on the elements in the display, but DO NOT update the model. All args are optional but since this is an internal method you have to supply a value for each one, even if it is mull.
+     * @param focus Optional focus element which by default will not be moved
+     * @param repositionFocus If true, and `focus` is provided, `focus` _will_ be moved in the event of a collision.
+     * @param knownLocations Optional map of locations we already know (such as the results of a drag or some other tentative UI manipulation)
+     * @param knownSizes Optional map of element sizes we already know (such as the results of some other tentative UI manipulation)
+     * @internal
+     */
+    $provisionallyMagnetize(focus: string | Vertex, repositionFocus: boolean, knownLocations: Record<string, PointXY>, knownSizes: Record<string, Size>, magnetizerIsAlreadyPrimed: boolean, invertTrackbackPreference: boolean): MagnetizeResult;
+    /**
+     * Run the magnetizer in gather mode on the given focus, but DO NOT update the model.
+     * @param focus Element to gather around.
+     * @param knownLocations Optional map of locations we already know (such as the results of a drag or some other tentative UI manipulation)
+     * @param knownSizes Optional map of element sizes we already know (such as the results of some other tentative UI manipulation)
+     * @internal
+     */
+    $provisionallyGather(focus: string | Vertex, knownLocations: Record<string, PointXY>, knownSizes: Record<string, Size>, magnetizerIsAlreadyPrimed: boolean, ignoreTrackback: boolean): MagnetizeResult;
+    /**
+     * Magnetize the elements in the display, using the given point as the origin.
+     * @param origin
+     * @tags magnetizer,foo
+     */
+    magnetizeAtPoint(origin: PointXY): void;
+    /**
+     * Gather the elements in the display. If `focus` is provided the elements will be gathered around it. Otherwise, the elements will be gathered around the computed center of all the elements.
+     * @param focus - Optional ID of a Vertex, or the Vertex itself, around which to gather elements.
+     * @magnetizer
+     */
+    gather(focus?: string | Vertex): void;
+    /**
+     * Called to set the elements on the magnetizer and have it store their positions. Subsequent magnetize calls might
+     * attempt to revert anything that got moved by some other element, up until the $stopMagnetizer method is called.
+     * @internal
+     */
+    $startMagnetizer(): void;
+    /**
+     * Instruct the magnetizer to stop tracking element positions.
+     * @internal
+     */
+    $stopMagnetizer(): void;
+    $startMotion(): void;
+    $stopMotion(): void;
+    /**
+     * Make a dataset representing an update into the model for the given point, by constructing an object whose keys are this surface's `$modelLeftAttribute` and `$modelTopAttribute`.
+     * @param pos
+     * @private
+     * @internal
+     */
+    private _prepareModelUpdate;
+    /**
+     * Prepares a model update for the left/top values for this vertex and then invokes `updateVertex` on the model. The model will then write the change to the data objects, add an item to the undo stack, and call the UI back, which will move the element in the UI.  Use this method when you want to change the position of some element in the model AND the UI. Don't use this method if your positioning call is supposed to be transient.
+     * @param v
+     * @param pos
+     * @internal
+     */
+    private _setVertexPositionInModel;
+    /**
+     * Update a set of vertices at once, in a transaction (unless a transaction is in progress, in which case these changes are added to it).
+     * @param elementsToMove
+     * @internal
+     */
+    protected _updateMultipleElements(elementsToMove: MagnetizeResult, reason: string, beforeCommit?: () => any): void;
+    /**
+     * Writes the current position for the given vertex into the data model. Does not fire an event.
+     * @param params - Parameters
+     * @param params.obj - Object to store vertex positions for.
+     * @param params.leftAttribute - Name of the attribute to use for the left position. Default is 'left'
+     * @param params.topAttribute - Name of the attribute to use for the top position. Default is 'top'
+     *
+     */
+    private $storePositionInModel;
+    /**
+     * Writes the current size for the given vertex into the data model.
+     * @param objOrId - Object to store vertex positions for - either an ID, or the object itself.
+     * @param size - Size to store. If not supplied, the size is retrieved from the viewport.
+     *
+     */
+    private _storeSizeInModel;
+    /**
+     * Sets the position of the given node/group and runs the magnetizer, updating the UI and storing results in the model. This operation is wrapped in a transaction so if undo is called then every element affected by the magnetize is relocated.
+     * @param vertex
+     * @param x
+     * @param y
+     * @magnetizer
+     */
+    setMagnetizedPosition(vertex: string | Node | Group | EL, x: number, y: number): void;
+    /**
+     * Sets the position of some vertex and updates the model. This method will honour any grid that is currently in effect.
+     *
+     * @param vertex Node/group id, or some node/group, or the element representing some node/group.
+     * @param x X position, in canvas coordinates, to set.
+     * @param y Y position, in canvas coordinates, to set.
+     * @param magnetize Whether or not to apply the magnetizer to move other vertices out of this vertex's way.
+     * @param force Used in conjunction with magnetize. When null, or true, the element is positioned where requested
+     *     and other elements move. When false, the element is positioned as close to the requested position as
+     *     possible, without moving any other elements.
+     */
+    setPosition(vertex: string | Node | Group | EL, x: number, y: number, magnetize?: boolean, force?: boolean): void;
+    /**
+     * Run an adhoc layout on the given group. The layout will be applied one time, and then the previous layout will be restored (but not run, of course, otherwise the results of this adhoc layout would be overwritten!).
+     * @param group The group on which to run an adhoc layout.
+     * @param layoutParams Params for the adhoc layout.
+     * @public
+     */
+    adHocGroupLayout(group: string | Group, layoutParams: {
+        type: string;
+        options: LayoutParameters;
+    }): void;
+    /**
+     * @internal
+     */
+    getGroupDefinition(group: Group): GroupMapping<EL>;
+    /**
+     * Gets the port mapping for the given port.
+     * @internal
+     */
+    getPortDefinition(port: Port): PortMapping<EL>;
+    /**
+     * @internal
+     */
+    getNodeDefinition(node: Node): NodeMapping<EL>;
+    /**
+     * For some given vertex, computes the new positions of all affected elements - taking into account whether the magnetizer is switched on.  This method does not move any elements, either in the model or in the DOM or viewport. The return value of this method is expected to be used to update the model, and the model will call all the renderers
+     * @param vertex
+     * @param x
+     * @param y
+     * @param magnetize If true, run the magnetizer. By default this will move other nodes to get the focus where we want it.
+     * @param moveMagnetizeFocus False by default. When true, and `magnetize` is set, we try to put the focus where it was requested, but we move the focus to fit in around what is already there.
+     * @param skipSetMagnetizerVertices If true, we assume the magnetizer already knows what vertices to run on, so we dont tell it again. This can happen during a drag.
+     * @internal
+     */
+    private __provisionallyMoveElement;
+    /**
+     * Returns the names of the attributes used to store positioning information in the model. Mostly an internal
+     * method but exposed in case it proves useful to someone.
+     */
+    getModelPositionAttributes(): {
+        x: string;
+        y: string;
+    };
+    /**
+     * Writes the current position for each node into the data model. A common use case is to run an auto layout the
+     * first time some dataset is seen, and then to save the locations of all the vertices once a human being has moved
+     * things around.
+     * @param params - Parameters
+     * @param params.leftAttribute - Name of the attribute to use for the left position. Default is 'left'
+     * @param params.topAttribute - Name of the attribute to use for the top position. Default is 'top'
+     *
+     */
+    storePositionsInModel(params?: {
+        leftAttribute?: string;
+        topAttribute?: string;
+    }): void;
+    /**
+     * Sets the current grid for element dragging, magnetization and group sizing.
+     * @param grid Grid to use. If you provide null as the value the grid will be cleared.
+     *
+     */
+    setGrid(grid: Grid): void;
+    /**
+     * Get the grid for this instance. May be null.
+     *
+     */
+    getGrid(): Grid;
+    /**
+     * Used to determine whether or not grid snapping is active.
+     * @internal
+     */
+    _isGridSnap(): boolean;
+    /**
+     * @internal
+     * @param el
+     */
+    _sizeElementToGrid(el: EL): Size | null;
+    /**
+     * Snaps one or all vertices to the current grid or to the grid provided to this method.
+     * @param el ID of vertex, Vertex, or DOM element representing a Vertex.
+     * @param grid Optional grid to snap to. If not provided, the Surface will use the `grid` passed in to its
+     *     constructor. If that is also null, nothing will be snapped.
+     *
+     */
+    snapToGrid(el?: string | Vertex | EL, grid?: Grid): MagnetizeResult | null;
+    /**
+     * Run the group auto size routine on a given group (as well as any ancestor groups), and moves elements around as necessary
+     * @param group The group to auto size
+     * @param force If true, this flag will override an `autoSize:false` directive on the Group (and any ancestors).
+     * @public
+     */
+    autoSizeGroup(group: Group, force?: boolean): GroupResizeResult<EL>;
+    /**
+     * Calculates the appropriate size for each group in the given set, based upon the location and dimensions of the group's child vertices. Groups are first ordered by depth, so that nested groups are resized first, and their parent groups can take these sizes into account.
+     *
+     * Group size changes are pushed to the model and to the undo stack, plugins are notified, an internal group size change event is fired, and a public group update event is fired.
+     *
+     * @internal
+     * @param groups
+     * @param force
+     */
+    $_sizeGroupsToFit(groups: Set<Group>, knownPositions: Record<string, PointXY>, knownSizes: Record<string, Size>, force: boolean): Record<string, GroupResizeResult<EL>>;
+    /**
+     * Computes the appropriate size for a single group. This method makes no changes to the model and fires no events; it exists really just to reduce the complexity of the `$_sizeGroupsToFit` method above - the bulk of the thinking about group size occurs in the {@link __computeGroupSize} method of this class.
+     * @param group
+     * @param recurse
+     * @param force
+     * @param knownPositions
+     * @param knownSizes
+     * @private
+     * @internal
+     */
+    private __sizeGroupToFit;
+    /**
+     * Runs group layouts, without storing any of the results in the model or updating the UI.
+     * By default the group layout will use information stored in the
+      * @param knownPositions
+     * @param knownSizes
+     * @private
+     * @internal
+     */
+    private __computeGroupLayouts;
+    /**
+     * Compute the extents of all the child members of the given group, by default with respect to the group's origin, which effectively gives you the internal size required by the group, or, if you set `relativeToCanvasOrigin`, with respect to the canvas origin.
+     * @param group The group to find extents for
+     * @param relativeToCanvasOrigin Defaults to false.
+     */
+    getGroupContentExtents(group: Group, relativeToCanvasOrigin?: boolean): Extents;
+    /**
+     * Track group size changes by firing an event through the model. This method update's the group's data with new width/height values, using the appropriate width/height property names. It then fires an internal group size event, which the undo/redo manager catches, and pushes to the stack. It then dispatches the group resize to registered plugins, and then finally it fires a public group updated event, which API users can listen to, but which is not used internally.
+     *
+     * TODO strictly speaking this breaks the concept of multiple renderers, since this event goes on the model's stack and it may not be relevant for some other renderer. Plus some other renderer could execute an undo and cause changes in this renderer. The solution for that is I guess to have an undo stack per renderer, which wraps the model's undo.
+     *
+     * @param resizedGroups
+     * @private
+     * @internal
+     */
+    $trackGroupSizeChanges(resizedGroups: Record<string, GroupResizeResult<EL>>): void;
+    /**
+     * Computes the appropriate size for the given group, based upon the location and dimensions of its child vertices, plus the rules governing how resize applies to this group type (eg, should shrink, should grow, is resize allowed at all, etc).
+     *
+     * This method updates the UI to reflect the computed group size, but it DOES NOT update the model or fire any events.
+     *
+     * This method is called in a few scenarios:
+     *
+     * 1. by the __runLayout method. This should NOT enable elastic manager
+     * 2. by the __sizeGroupToFit method, which is itself called by
+     *  $_sizeGroupsToFit, which is itself called by
+     *      ResizingToolsPlugin, up listener
+     *      ElementDragHandler2, stop listener
+     *      uicore public autoSizeGroup
+     *      uicore public autoSizeGroups
+     * 3. by the __cascadeGroupResize method, which is itself called by
+     *  public expandGroup
+     *  public collapseGroup
+     *  public setPosition
+     *
+     *
+     *
+     * @param group
+     * @param knownPositions
+     * @param knownSizes
+     * @param groupExtents
+     * @param force
+     * @private
+     * @internal
+     */
+    private __computeGroupSize;
+    /**
+     * Update the size of the given list of groups so that its content area encompasses all of the child elements of the group, unless `force` is not specified and a specific group has `autoSize` set to false.
+     * @param groups Groups to size. If null, every group is auto sized.
+     * @param force If true, this flag will override an autoSize:false directive on the Group (and any ancestors)
+     * @public
+     */
+    autoSizeGroups(groups?: Array<Group>, force?: boolean): Record<string, GroupResizeResult<EL>>;
+    abstract $createDefaultLayoutAdapter(): AbstractLayoutAdapter<EL>;
+    abstract $createGroupLayoutAdapter(group: Group): AbstractLayoutAdapter<EL>;
+    /**
+     * Create a layout for the surface to use.
+     * @param params
+     * @internal
+     */
+    private _createLayout;
+    /**
+     * Create a layout for a given group.
+     * @param params
+     * @param group
+     * @internal
+     */
+    private _createGroupLayout;
+    /**
+     * Apply the given layout to the viewport, by default refreshing the viewport afterwards.
+     * @param layoutParams Spec for the layout to set.
+     * @param doNotRefresh Defaults to true. Whether or not to repaint the UI after setting the layout.
+     *
+     */
+    setLayout<LP extends LayoutParameters>(layoutParams: {
+        type: string;
+        options?: LP;
+    }, doNotRefresh?: boolean): void;
+    /**
+     * Run an adhoc layout on the viewport, inside a transaction, so the entire operation can be undone at once.
+     * Note that invoking this method also has the effect of clearing the geometry of every edge and resetting edge
+     * paths to the default computed values: edge paths are linked to their vertex locations, and this method can
+     * move any vertex from its current location.
+     * @param layoutParams Spec for the layout to apply
+     *
+     */
+    adHocLayout<LP extends LayoutParameters>(layoutParams: {
+        type: string;
+        options: LP;
+    }): void;
+    private $_doRenderTransientVertex;
+    /**
+     * Adds a transient vertex to the data model, creates an element to represent it, and registers the
+     * element as a managed element.
+     * @param data
+     * @param style
+     * @param clazz
+     * @param atts
+     * @internal
+     */
+    $addTransientVertex(position: PointXY, size: Size, data?: ObjectData, style?: Record<string, any>, clazz?: string, atts?: Record<string, string>): {
+        vertex: Node;
+        el: ViewportElement<EL>;
+    };
+    /**
+     * Renders a dummy vertex. The model calls this at various points in the lifecycle.
+     * @param v
+     * @internal
+     */
+    $renderDummyVertex(v: Vertex): void;
+    /**
+     * Removes a transient vertex from the data model and from the DOM, removing it from the list of
+     * tracked elements.
+     * @param el
+     * @internal
+     */
+    $removeTransientVertex(el: ViewportElement<Element>): void;
+    /**
+     * Adds a transient edge, ie. an edge that would not be exported as part of the dataset. When a user is dragging a
+     * new edge, for example, that's a transient edge. It is attached to some transient target vertex, and both the
+     * edge and the target vertex are discarded at the end of the drag.
+     * @param source
+     * @param target
+     * @param data
+     * @internal
+     */
+    $addTransientEdge(source: Vertex, target: Vertex, data?: ObjectData, context?: Record<string, any>): Edge;
+    /**
+     * Tests if the given edge type may be unattached at its source and/or target. An edge type might mandate some
+     * preference for that, or it may have been set via the `allowUnattached` flag in the edges defaults.
+     * @param edge
+     * @internal
+     */
+    $isUnattachedEdgeAllowed(edge: Edge): boolean;
+    /**
+     * Subclasses must implement this method to render an element
+     * for some transient vertex.
+     * @param v
+     * @param position
+     * @param size
+     * @param style
+     * @param clazz
+     * @param atts
+     * @internal
+     */
+    abstract $renderTransientVertex(position: PointXY, size: Size, data?: ObjectData, style?: Record<string, any>, clazz?: string, atts?: Record<string, string>): EL;
+    protected _initPlugins(options: UICoreOptions<EL, any>): void;
+    /**
+     * Add a plugin to the UI. You can provide a type parameter to this method to avoid having to cast the return
+     * value, if you need to retain a reference to the plugin.
+     * @param pluginSpec
+     * @typeParam O Defines the options type for the plugin to add
+     * @typeParam P Defines the type of the plugin that will be returned from this method
+     */
+    addPlugin<O extends UIPluginOptions, P extends UIPlugin<EL, O, any>>(pluginSpec: UIPluginSpec<O>): P;
+    /**
+     * @internal
+     * @param pluginSpec
+     * @param fireEvent
+     * @private
+     */
+    private _addPlugin;
+    /**
+     * Gets the plugin registered for the given type, null if nothing matching found.
+     * @param pluginType
+     *
+     */
+    getPlugin<P extends UIPlugin<EL, any, any>>(pluginType: string): P | null;
+    /**
+     * Dispatch an event to the list of plugins.
+     * @param fn
+     * @private
+     * @internal
+     */
+    protected _dispatchToPlugins(fn: (p: UIPlugin<EL, any, any>) => any): void;
+    protected $_dataHooks: Array<{
+        load: (d: UISaveData) => void;
+        save: (d: UISaveData) => void;
+    }>;
+    /**
+     * Register a {@link DataHook} - a pair of functions that are invoked during a `load` and a `save`. This mechanism is a means you can use for storing/retrieving custom data from the payload the UI exports: in the save method you can decorate the data provided to you with anything you like, but you must ensure that it is serializable, ie. it must be pure data. In your load method you can read out this data and take appropriate action.
+     * @param hook
+     * @tags input/output
+     */
+    registerDataHook(hook: DataHook): void;
+    /**
+     * Export the dataset and the current state of the UI - its zoom setting, but subclasses can override this method and add other data.
+     * @param options Options for the save.
+     * @tags input/output
+     */
+    save(options?: UIExportOptions): UISaveData;
+    /**
+     * Saves the return value of this object's `save` method via ajax POST to a given URL.
+     * @param options Save options
+     * @tags input/output
+     */
+    saveToUrl(options: SaveOptions): void;
+    /**
+     * Load the dataset and the current state of the UI - its zoom setting, but subclasses can override this method and extract other information.
+     * @param data
+     * @param onload Optional function to invoke after load.
+     * @tags input/output
+     */
+    load(data: UISaveData, onload?: Function): void;
+    $isArrayLike<E = any>(el: any): el is ArrayLike<E>;
+    abstract $doRenderNode(n: Node, eventInfo?: any): void;
+    abstract $doRenderGroup(g: Group, eventInfo?: any): void;
+    abstract $reRenderNode(n: Node): void;
+    /**
+     * @internal
+     * @param o
+     * @param params
+     * @param extents
+     */
+    abstract $paintOverlay(o: Overlay<EL>, params: OverlayPaintParams, parentOrigin: PointXY): void;
+    abstract $addOverlayClass(o: Overlay<EL>, clazz: string): void;
+    abstract $removeOverlayClass(o: Overlay<EL>, clazz: string): void;
+    abstract setOverlayVisible(o: Overlay<EL>, visible: boolean): void;
+    abstract destroyOverlay(o: Overlay<EL>): void;
+    abstract updateLabel(o: LabelOverlay<EL>): void;
+    abstract $drawOverlay(overlay: Overlay<EL>, component: Connector, paintStyle: PaintStyle, absolutePosition?: PointXY): OverlayPaintParams;
+    abstract $reattachOverlay(o: Overlay<EL>, c: Connection<EL>): void;
+    abstract $setOverlayHover(o: Overlay<EL>, hover: boolean): void;
+    abstract $setHover(component: ComponentBase<EL>, hover: boolean): void;
+    /**
+     * @internal
+     * @param connector
+     * @param paintStyle
+     * @param extents
+     */
+    abstract $paintConnector(connection: Connection<any>, paintStyle: PaintStyle): void;
+    /**
+     * @internal
+     * @param connection
+     * @param force
+     */
+    abstract $destroyConnector(connection: Connection<EL>, force?: boolean): void;
+    /**
+     * @internal
+     * @param connection
+     * @param h
+     */
+    abstract $setConnectorHover(connection: Connection<EL>, h: boolean): void;
+    abstract $isAsynchronousRender(): boolean;
+    /**
+     * Subclasses should implement this to indicate that element dragging is supported.
+     * @internal
+     */
+    abstract $isDraggingSupported(): boolean;
+    /**
+     * @internal
+     * @param connector
+     * @param clazz
+     */
+    abstract $addConnectorClass(connector: Connector, clazz: string): void;
+    abstract $removeConnectorClass(connector: Connector, clazz: string): void;
+    abstract $setConnectorVisible(connector: Connector, v: boolean): void;
+    abstract $getConnectorClass(connector: Connector): string;
+    abstract $applyConnectorType(connector: Connector, t: TypeDescriptorBase): void;
+    abstract $setConnectionVisible(c: Connection<EL>, v: boolean): void;
+    /**
+     * Sets the position of the given viewport element, taking rotation into account when necessary.
+     * @param el
+     * @param p
+     * @internal
+     */
+    abstract $setViewportElementPosition(el: ViewportElement<EL>, p: PointXY): void;
+    abstract on(el: Document | EL | ArrayLike<EL>, event: string, callbackOrSelector: Function | string, callback?: Function): void;
+    abstract off(el: Document | EL | ArrayLike<EL>, event: string, callback: Function): void;
+    /**
+     * 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.
+     */
+    abstract trigger(el: Document | EL, event: string, originalEvent?: Event, payload?: any, detail?: number): void;
+    /**
+     * Subclasses must implement this to handle a vertex update event.
+     * @internal
+     * @param el
+     * @param p
+     */
+    abstract $doVertexUpdated(el: ViewportElement<EL>): void;
+    abstract getVisibleCanvasBounds(): RectangleXY;
+}