@visuallyjs/browser-ui 1.0.3 → 1.1.0

package/types/browser-ui/edge-handler-base.d.ts

@@ -1,7 +1,7 @@
 import { Surface } from "./surface-renderer";
 import { BrowserElement } from "./util";
 import { VisuallyJSDOMElement } from "./element-facade";
-import { Vertex, BoundingBox, PointXY, RectangleXY, RTree, AnchorOrientationHint, ObjectAnchorSpec } from "../core";
+import { Vertex, BoundingBox, PointXY, RectangleXY, RTree, AnchorOrientationHint, ObjectAnchorSpec, ObjectData } from "../core";
 import { EdgeInputMethod } from "./edge-input-handler";
 import { ElementModelInfo } from "./definitions";
 /**
@@ -96,12 +96,6 @@ export type DropTarget = {
  * @internal
  */
 export declare function _findTargetZones(surface: Surface): Array<BrowserElement>;
-/**
- * For a given drag selector, find the current list of target elements that match, according to the selector's redrop policy.
- * @param surface
- * @internal
- */
-export declare function _findSourceZones(surface: Surface): Array<BrowserElement>;
 export declare function _findZones(surface: Surface, selector: string): Array<BrowserElement>;
 /**
  * Gets vertex info for the given element.
@@ -119,22 +113,22 @@ export declare function _getVertexInfo(surface: Surface, el: BrowserElement, asS
  * @param e
  */
 export declare function testIntersectingDropTarget(surface: Surface, dropTargets: Array<DropTarget>, boundingRect: RectangleXY, e: MouseEvent): DropTarget;
-export declare function _populateTargetZones(surface: Surface, activeFiltering: boolean, focusVertex: Vertex, loopbackAllowed: boolean, scope?: string): {
+export declare function _populateTargetZones(surface: Surface, activeFiltering: boolean, focusVertex: Vertex, loopbackAllowed: boolean, payload?: ObjectData, scope?: string): {
     dropTargets: Array<DropTarget>;
     disabledDropTargets: Array<VisuallyJSDOMElement>;
 };
-export declare function _populateSourceZones(surface: Surface, activeFiltering: boolean, focusVertex: Vertex, loopbackAllowed: boolean, scope?: string): {
+export declare function _populateSourceZones(surface: Surface, activeFiltering: boolean, focusVertex: Vertex, loopbackAllowed: boolean, payload?: ObjectData, scope?: string): {
     dropTargets: Array<DropTarget>;
     disabledDropTargets: Array<VisuallyJSDOMElement>;
 };
-export declare function _populateZones(surface: Surface, activeFiltering: boolean, focusVertex: Vertex, focusVertexIsTarget: boolean, loopbackAllowed: boolean, scope?: string): {
+export declare function _populateZones(surface: Surface, activeFiltering: boolean, focusVertex: Vertex, focusVertexIsTarget: boolean, loopbackAllowed: boolean, payload?: ObjectData, scope?: string): {
     dropTargets: Array<DropTarget>;
     disabledDropTargets: Array<VisuallyJSDOMElement>;
 };
 /**
  * @internal
  */
-export declare class EdgeHandlerBase {
+export declare abstract class EdgeHandlerBase {
     protected surface: Surface;
     protected container: BrowserElement;
     protected edgeSnap: boolean;
@@ -144,19 +138,18 @@ export declare class EdgeHandlerBase {
     protected edgeSnapType: EdgeSnapType;
     protected allowLoopbackEdges: boolean;
     activeFiltering: boolean;
+    $active: boolean;
     protected rtree: RTree;
     disabledDropTargets: Array<BrowserElement>;
     dropTargets: Array<DropTarget>;
     currentDropTarget: DropTarget;
     constructor(options: EdgeHandlerBaseOptions);
+    $refreshTree(recalcBoundingBoxes?: boolean, ...ids: Array<string>): void;
     /**
-     * For the given point, test if it intersects the bounding rect of any of our drop targets (with a 50 pixels buffer). If so,
-     * test if the point is inside the rectangle, in which case we return the point unchanged. But otherwise it must be in the
-     * buffer, so we find the closest face midpoint to that point and snap to there.
+     * For the given point, test if it intersects the bounding rect of any of our drop targets (with a 50 pixels buffer). If so, test if the point is inside the rectangle, in which case we return the point unchanged. But otherwise it must be in the buffer, so we find the closest face midpoint to that point and snap to there.
      * @param p Point to test
      * @param edgeSnapThreshold Buffer to set around point when testing for intersections, defaults to 50.
-     * @param edgeSnapSizeThreshold Threshold that defines a small vs large target. If a target exceeds this value in either axis it is
-     * deemed large, and then we may snap to midpoints.
+     * @param edgeSnapSizeThreshold Threshold that defines a small vs large target. If a target exceeds this value in either axis it is deemed large, and then we may snap to midpoints.
      * @param edgeSnapType Type of snap to perform.
      * @internal
      */

package/types/browser-ui/edge-input-handler.d.ts

@@ -3,13 +3,6 @@ import { BrowserElement } from "./util";
 import { Edge, Node, Vertex } from "../core";
 import { PointXY } from "../core";
 import { EdgeHandlerBase, EdgeHandlerBaseOptions } from "./edge-handler-base";
-/**
- * Added to placeholder elements used when relocating edges by dragging, or when an edge exists in the
- * dataset but has  no source or no target
- * @group Edges
- * @category CSS Classes
- */
-export declare const CLASS_TRANSIENT_VERTEX = "vjs-transient-vertex";
 export declare const EVENT_KEYUP = "keyup";
 /**
  * Defines the drag method of creating new edges with the mouse/touch events
@@ -84,9 +77,9 @@ export declare class EdgeInputHandler extends EdgeHandlerBase {
      * @private
      */
     private _canStartNewEdgeInput;
-    private _start;
+    private _startDrag;
     private _finaliseTransientEdge;
-    private _stop;
+    private _stopDrag;
     /**
      * Common mouse move functionality.  This method calls back to get a bounding box,
      * and expects the mouse event that instigated the move
@@ -106,7 +99,7 @@ export declare class EdgeInputHandler extends EdgeHandlerBase {
      * @param p
      * @internal
      */
-    private _drag;
+    private _handleDrag;
     private _ensureTransientConnection;
     private _tapHandler;
     private $_exitTapMode;

package/types/browser-ui/edge-mappings/flowchart-basic.d.ts

@@ -11,7 +11,8 @@ export declare const FLOWCHART_EDGE_TYPE_DASHED = "dashed";
 /**
  * Basic edge mappings for flowcharts - a 'dashed' or 'plain' line style, and source/target/both/none arrow markers, with a configurable width/height
  * @param options
- * @constructor
+ * @group Diagrams
+ * @category Flowchart
  * @edgeMapping
  */
 export declare function FlowchartBasicEdgeMappings(options?: {

package/types/browser-ui/element-drag-handler-2.d.ts

@@ -115,9 +115,6 @@ export declare class ElementDragHandler2 {
     newPosition: PointXY;
     private _ignoreCanvasShift;
     private _canvasShift;
-    tapHandler: (e: MouseEvent) => void;
-    canvasTapHandler: (e: MouseEvent) => any;
-    documentKeypressHandler: (e: KeyboardEvent) => any;
     private _currentSurfaceZoom;
     private _activeEffectiveZoom;
     /**

package/types/browser-ui/icons/definitions.d.ts

@@ -2,40 +2,56 @@ import { RectangleXY } from "../../core";
 /**
  * A link icon
  * @icon
+ * @group Diagrams
+ * @category Shapes
  */
 export declare const ICON_LINK = "link";
 /**
  * Icon for the clone tool
  * @icon
+ * @group Diagrams
+ * @category Shapes
  */
 export declare const ICON_CLONE = "clone";
 /**
  * Icon for the trash tool
  * @icon
+ * @group Diagrams
+ * @category Shapes
  */
 export declare const ICON_TRASH = "trash";
 /**
  * An 'x' icon
  * @icon
+ * @group Diagrams
+ * @category Shapes
  */
 export declare const ICON_CROSS = "cross";
 /**
  * A plus sign icon
  * @icon
+ * @group Diagrams
+ * @category Shapes
  */
 export declare const ICON_PLUS = "plus";
 /**
  * A circle icon
  * @icon
+ * @group Diagrams
+ * @category Shapes
  */
 export declare const ICON_CIRCLE = "circle";
 /**
  * a 12 point gear icon
  * @icon
+ * @group Diagrams
+ * @category Shapes
  */
 export declare const ICON_GEAR = "gear";
 /**
  * Definition of an icon that can be rendered into an SVG element.
+ * @group Diagrams
+ * @category Shapes
  */
 export interface IconDefinition {
     id: string;
@@ -49,11 +65,15 @@ export interface IconDefinition {
 }
 /**
  * Map of default icons that ship with VisuallyJs
+ * @group Diagrams
+ * @category Shapes
  */
 export declare const defaultIcons: Record<string, IconDefinition>;
 /**
  * Clone a default icon definition and give it a new ID.
  * @param iconOrId
  * @param newId
+ * @group Diagrams
+ * @category Utils
  */
 export declare function cloneIcon(iconOrId: string | IconDefinition, newId: string): IconDefinition;

package/types/browser-ui/pan-zoom-options.d.ts

@@ -1,18 +1,19 @@
 import { Viewport } from "../ui";
-import { PointXY, Size, ZoomRange } from "../core";
+import { PointXY, ZoomRange } from "../core";
 import { BrowserElement } from "./util";
 import { Background } from "./definitions";
 /**
  * Axes in which the canvas can be panned - x, y, or both. Used with the {@link WheelOptions} interface.
+ * @group Components
+ * @category Surface
  */
 export type PanAxis = "both" | "x" | "y";
 /**
  * Options to control how a user manages zoom on the canvas.
+ * @group Components
+ * @category Surface
  */
 export interface ZoomOptions {
-    /**
-     * Whether or not zoom is enabled. Defaults to true.
-     */
     /**
      * When true - which is the default - the wheel will be used for zoom.
      */
@@ -36,6 +37,8 @@ export interface ZoomOptions {
 }
 /**
  * Options to control how a user pans the canvas.
+ * @group Components
+ * @category Surface
  */
 export interface PanOptions {
     /**
@@ -61,6 +64,8 @@ export interface PanOptions {
 }
 /**
  * Options for how to respond to wheel events.
+ * @group Components
+ * @category Surface
  */
 export interface WheelOptions {
     /**
@@ -115,21 +120,6 @@ export interface PanZoomOptions {
      * The element that will act as the viewport for the canvas.
      */
     viewportElement: BrowserElement;
-    /**
-     * A function that can return the x,y location of the given element, relative to the origin of the canvas the pan zoom
-     * is controlling.
-     * @param el
-     */
-    getOffset: (el: BrowserElement) => PointXY;
-    /**
-     * A function that can return the x,y location of the given element, relative to the document origin
-     * @param el
-     */
-    getOffsetRelativeToRoot: (el: BrowserElement) => PointXY;
-    /**
-     * Gets the size of some element
-     */
-    getSize: (el: BrowserElement) => Size;
     /**
      * Helper function to set the position of some element.
      */
@@ -255,8 +245,7 @@ export interface PanZoomOptions {
      */
     background?: Background;
     /**
-     * Optional fixed transform origin. When this is supplied the zoom function does not change the transform origin, and neither
-     * does the pan. You can still zoom and pan but the zoom is applied relative to the top/left corner of the content.
+     * Optional fixed transform origin. When this is supplied the zoom function does not change the transform origin, and neither does the pan. You can still zoom and pan but the zoom is applied relative to the top/left corner of the content.
      */
     fixedTransformOrigin?: PointXY;
 }

package/types/browser-ui/pan-zoom.d.ts

@@ -3,8 +3,8 @@ import { PinchListener } from "./pinch-listener";
 import { FixedElement, FixedElementConstraints, FixedLayer } from "./fixed-layer";
 import { VisuallyJSDOMElement } from "./element-facade";
 import { EventManager } from "./event-manager";
-import { Viewport, ViewportBounds, ZoomToFitIfNecessaryOptions, ZoomToFitOptions, ViewportElement, AlignContentOptions, AlignContentToFaceOptions, CenterContentOptions } from "../ui";
-import { BoundingBox, Extents, PointXY, Size, ZoomRange, Edge, Group, Node, RectangleXY } from "../core";
+import { Viewport, ViewportBounds, ZoomToFitIfNecessaryOptions, ZoomToFitOptions, ViewportElement, AlignContentOptions, AlignContentToFaceOptions, CenterContentOptions, CenterContentHorizontallyOptions, CenterContentVerticallyOptions } from "../ui";
+import { BoundingBox, PointXY, Size, ZoomRange, Edge, Group, Node, RectangleXY } from "../core";
 import { BrowserElement } from "./util";
 import { Background, ZoomToExtentsOptions } from './definitions';
 /**
@@ -27,10 +27,7 @@ export interface IntersectingObjectData {
     objectType: typeof Node.objectType | typeof Group.objectType | typeof Edge.objectType;
 }
 /**
- * Provides Pan/Zoom functionality. This component is not something with which users of the Toolkit are expected to
- * work directly (although in fact it is sufficiently decoupled from the Surface that it could serve as a stand-alone
- * widget for other use cases, which is something we've slated for future investigation). Each Surface widget is
- * backed by a ZoomWidget.
+ * Provides Pan/Zoom functionality. This component is not something with which users of the Toolkit are expected to work directly (although in fact it is sufficiently decoupled from the Surface that it could serve as a stand-alone widget for other use cases, which is something we've slated for future investigation). Each Surface widget is backed by a ZoomWidget.
  * @internal
  */
 export declare class PanZoom {
@@ -79,7 +76,9 @@ export declare class PanZoom {
     panWithMetaKey: boolean;
     enableWheelZoom: boolean;
     enableAnimation: boolean;
+    wheelCssFilterSpec: string;
     wheelFilter: (e: MouseEvent) => boolean;
+    wheelCssFilter: (e: MouseEvent) => boolean;
     wheelZoomRequiresMetaKey: boolean;
     wheelDirection: number;
     wheelSensitivity: number;
@@ -98,9 +97,6 @@ export declare class PanZoom {
     private consumeRightClick;
     private smartMinimumZoom;
     idFunction: (e: Element) => string;
-    getOffset: (el: Element) => PointXY;
-    getOffsetRelativeToRoot: (el: Element) => PointXY;
-    getSize: (el: Element) => Size;
     enabled: boolean;
     clampToBackground: boolean;
     clampToBackgroundExtents: boolean;
@@ -114,34 +110,29 @@ export declare class PanZoom {
      */
     getCompoundZoom(): number;
     /**
-     * Calculates the "compound zoom" ie. what the visual zoom is for users. If this component is nested inside one or more
-     * elements that have scale applied, adjust for that scale. This is agnostic of whether those parents are other pan/zoom
-     * components - they could be any div that has a scale. This method simply gets the offset size of the viewport and
-     * compares it with the bounding client rect size to find
-     * the visible ratio. This method is called when the pan/zoom is created. It can be called from elsewhere in the codebase - one
-     * example at the time of writing is the surface widget calls this method at the start of an element drag
+     * Add an extra selector to the wheel filter.
+     * @internal
+     * @param selector
+     */
+    $addWheelSelectorFilter(selector: string): void;
+    /**
+     * Calculates the "compound zoom" ie. what the visual zoom is for users. If this component is nested inside one or more elements that have scale applied, adjust for that scale. This is agnostic of whether those parents are other pan/zoom components - they could be any div that has a scale. This method simply gets the offset size of the viewport and compares it with the bounding client rect size to find the visible ratio. This method is called when the pan/zoom is created. It can be called from elsewhere in the codebase - one example at the time of writing is the surface widget calls this method at the start of an element drag
      * @param knownViewportSize
      * @internal
      */
-    _computeCompoundZoom(knownViewportSize?: Size): void;
+    $computeCompoundZoom(knownViewportSize?: Size): void;
     /**
      * @internal
      */
     $_getViewportSize(): Size;
     private _$_getCanvasSize;
+    private _updateWheelCssFilter;
     private _animateToCanvasPosition;
     private _setCanvasPosition;
     private _moveCanvas;
     private _wheelPan;
     private _wheelZoom;
     private wheelPanOrZoom;
-    /**
-     * Sets whether or not rendering is suspended, which for the moment means that when updateBounds is
-     * called, the widget doesn't sort the bounds, since we know there will be more changes to the
-     * positions and/or sizes of elements.
-     * @param val True to suspend rendering, false to re-enable rendering. If an update was called during the
-     * time that rendering was suspended, the positions are sorted once rendering is re-enabled.
-     */
     private _cssAnimation;
     private _constructTransformProperty;
     private _writeTransform;
@@ -163,14 +154,14 @@ export declare class PanZoom {
      * @private
      * @internal
      */
-    _setTransformOriginToPageLocation(x: number, y: number): void;
+    private _setTransformOriginToPageLocation;
     /**
      * changes the transformOrigin of the canvas to be the point on the canvas at which the given event occurred, then shifts the canvas to account for this change (the user sees no shift)
      * @param e Event to use as the new transform origin.
      * @private
      * @internal
      */
-    _setTransformOriginToEvent(e: any): void;
+    private _setTransformOriginToEvent;
     /**
      * Changes the transformOrigin of the canvas to be the given x,y, which is a point on the canvas.
      * @param x X location on the canvas.
@@ -178,7 +169,7 @@ export declare class PanZoom {
      * @private
      * @internal
      */
-    _setTransformOriginToCanvasPoint(x: number, y: number): void;
+    $setTransformOriginToCanvasPoint(x: number, y: number): void;
     /**
      * Calculate an allowable value for zoom from the desired value.
      * @param desiredZoom
@@ -204,7 +195,6 @@ export declare class PanZoom {
      * @param paddingRatio
      */
     getBoundsInfo(padding?: number, paddingRatio?: number): ViewportBounds;
-    isPinchZooming(): boolean;
     /**
      * Adds the given element to those that this widget is tracking.
      * @param el - Element to begin tracking.
@@ -216,7 +206,7 @@ export declare class PanZoom {
     /**
      * Removes the given element from the list this widget is tracking. Note that this widget does
      * not remove the element from the DOM.
-     * @param Element el Element to stop tracking.
+     * @param el Element to stop tracking.
      */
     remove(el: BrowserElement): void;
     /**
@@ -240,8 +230,7 @@ export declare class PanZoom {
      * Zooms the display so that all the given elements fit inside the viewport.
      * @param zParams.elements List of DOM elements to zoom to.
      * @param zParams.fill A decimal indicating how much of the viewport to fill with the zoomed content. Defaults to 0.90.
-     * @param zParams.doNotZoomIfVisible If true and the widget determines the entire selection is already
-     * visible, the zoom will not be adjusted.
+     * @param zParams.doNotZoomIfVisible If true and the widget determines the entire selection is already visible, the zoom will not be adjusted.
      * @param zParams.doNotAnimate=true By default the widget does not animate this operation. You can override that behaviour by setting doNotAnimate:false.
      */
     zoomToElements(zParams: {
@@ -263,10 +252,7 @@ export declare class PanZoom {
     }): void;
     zoomToExtents(zParams: ZoomToExtentsOptions): void;
     /**
-     * Sets (or clears) the filter that will be called if the widget needs to know whether to respond to an event that would
-     * start a pan. By default, the widget responds to down events on the viewport or the canvas, but not on child nodes. You
-     * can supply a function that the widget will call in the event that the down event did not occur on the viewport or the canvas
-     * returning true from this function will cause the pan to begin.
+     * Sets (or clears) the filter that will be called if the widget needs to know whether to respond to an event that would start a pan. By default, the widget responds to down events on the viewport or the canvas, but not on child nodes. You can supply a function that the widget will call in the event that the down event did not occur on the viewport or the canvas returning true from this function will cause the pan to begin.
      * @param filterFn Function to set as the filter; may be null if you wish to clear it. The function should return true if it wants to honour the down event on the given element.
      */
     setFilter(filterFn: Function): void;
@@ -280,65 +266,12 @@ export declare class PanZoom {
         onComplete?: (p: PointXY) => any;
     }): void;
     /**
-     * Positions the widget so that the edges of the background align with the viewport. This method is useful for
-     * snapping to a corner of the background.
+     * Positions the widget so that the edges of the background align with the viewport. This method is useful for snapping to a corner of the background.
      * @param axes Spec for the axes to align to. This should be a space-separated string containing a value
-     * for the x (allowed values `left` and `right`) and, optionally, y (allowed values `top` and `bottom`) axes. The
-     * default value is `"left top"`.
+     * for the x (allowed values `left` and `right`) and, optionally, y (allowed values `top` and `bottom`) axes. The default value is `"left top"`.
+     * @param animationDuration Defaults to 150ms
      */
     alignBackground(axes: string, animationDuration?: number): void;
-    /**
-     * Places (using `style.left` and `style.top`) the given element at the given x,y, which is taken to
-     * mean an x,y value on the canvas.  At zoom 1, with no panning, this will be the same as the given x,y value
-     * relative to the viewport origin.  But once the canvas has been zoomed and panned we have to map
-     * to the altered coordinates. This function also takes into account the difference between the offset of the
-     * viewport in the page and the offset of the given element. It is assumed, just because of what this method
-     * does, that the given element will be positioned `absolute`, but this method does nothing to ensure that.
-     * @param el Element to position.
-     * @param x X location on canvas to move element's left edge to.
-     * @param y Y location on canvas to move element's top edge to.
-     * @param xShift Optional absolute number of pixels to shift the element by in the x axis after calculating its position relative to the canvas. Typically you'd use this to place something other than the top left corner of your element at the desired location.
-     * @param yShift Optional absolute number of pixels to shift the element by in the y axis after calculating its position relative to the canvas.
-     * @param ensureOnScreen If true, will ensure that x and y positions are never negative.
-     * @internal
-     */
-    positionElementAt(el: Element, x: number, y: number, xShift?: number, yShift?: number, ensureOnScreen?: boolean): void;
-    /**
-     * Places (using `style.left` and `style.top`) the given element at the given page x,y.  It is assumed, just because of what this method
-     * does, that the given element will be positioned `absolute`, but this method does nothing to ensure that.
-     * @param el - Element to position.
-     * @param x - X location on canvas to move element's left edge to.
-     * @param y - Y location on canvas to move element's top edge to.
-     * @param xShift - Optional absolute number of pixels to shift the element by in the x axis after calculating its position relative to the canvas. Typically you'd use this to place something other than the top left corner of your element at the desired location.
-     * @param yShift - Optional absolute number of pixels to shift the element by in the y axis after calculating its position relative to the canvas.
-     */
-    positionElementAtPageLocation(el: Element, x: number, y: number, xShift?: number, yShift?: number): void;
-    /**
-     * Places (using `style.left` and `style.top`) the given element at the page x,y corresponding to the given event.  It is assumed, just because of what this method does, that the given element will be positioned `absolute`, but this method does nothing to ensure that.
-     * @param el - Element to position.
-     * @param evt - Event to position element at.
-     * @param xShift - Optional absolute number of pixels to shift the element by in the x axis after calculating its position relative to the canvas. Typically you'd use this to place something other than the top left corner of your element at the desired location.
-     * @param yShift - Optional absolute number of pixels to shift the element by in the y axis after calculating its position relative to the canvas.
-     * @internal
-     */
-    positionElementAtEventLocation(el: Element, evt?: MouseEvent, xShift?: number, yShift?: number): void;
-    /**
-     * Zooms the component by the given increment, centered on the location at which the given event occurred.
-     * @param e - Browser event
-     * @param increment Amount to zoom by (a positive or negative number). If this takes the component out of the current zoom range, it will be clamped.
-     * @internal
-     */
-    zoomToEvent(e: Event, increment: number): void;
-    /**
-     * Tells the widget that a relayout has occurred. If panning is
-     * disabled, the widget will move the canvas element so that all
-     * content is visible, and adjust the transform origin so that the ui
-     * zooms from the apparent top left corner. Nothing happens as a result of
-     * this method if panning is enabled.
-     * @param extents Bounds information
-     * @internal
-     */
-    $relayout(extents: Extents): void;
     /**
      * Nudges the zoom by the given amount. Zoom will be clamped to the current zoom range in effect and the
      * value that was ultimately set is returned from this function.
@@ -399,7 +332,7 @@ export declare class PanZoom {
      * @param params.onComplete Optional function to call on operation complete (centering may be animated).
      * @param params.doNotFirePanEvent If true, a pan event will not be fired.
      */
-    centerContentHorizontally(params: any): void;
+    centerContentHorizontally(params: CenterContentHorizontallyOptions): void;
     /**
      * Centers the tracked content inside the viewport vertically, but does not adjust the current zoom.
      * @param params Method parameters.
@@ -408,7 +341,7 @@ export declare class PanZoom {
      * @param params.onComplete Optional function to call on operation complete (centering may be animated).
      * @param params.doNotFirePanEvent If true, a pan event will not be fired.
      */
-    centerContentVertically(params: any): void;
+    centerContentVertically(params: CenterContentVerticallyOptions): void;
     /**
      * Centers the given bounds in the viewport, vertically and/or horizontally.
      * @param cparams Optional extra parameters.
@@ -448,9 +381,7 @@ export declare class PanZoom {
         onComplete?: (p: PointXY) => any;
     }): void;
     /**
-     * Centers on the given bounds and then adjusts the zoom of the widget so that the short axis of the viewport
-     * is [1 / fillRatio] larger than its corresponding axis on the centered bounds. `fillRatio` is basically
-     * a measure of how much context you want to see around the bounds on which you centered.
+     * Centers on the given bounds and then adjusts the zoom of the widget so that the short axis of the viewport is [1 / fillRatio] larger than its corresponding axis on the centered bounds. `fillRatio` is basically a measure of how much context you want to see around the bounds on which you centered.
      * @param cparams Centering params
      * @param cparams.fillRatio - Proportional ratio of the corresponding bounds' edge to the viewport's short edge. Defaults to 0.6.
      * @param cparams.doNotAnimate - By default, this operation is animated.
@@ -492,9 +423,7 @@ export declare class PanZoom {
     zoomIn(canvasLoc: PointXY, animate?: boolean): number;
     zoomOut(canvasLoc: PointXY, animate?: boolean): number;
     /**
-     * Sets the current zoom range. By default, this method checks if the current zoom is within
-     * the new range, and if it is not then `setZoom` is called, which will cause the zoom to be clamped
-     * to an allowed value in the new range. You can disable this by passing `true` for `doNotClamp`.
+     * Sets the current zoom range. By default, this method checks if the current zoom is within the new range, and if it is not then `setZoom` is called, which will cause the zoom to be clamped to an allowed value in the new range. You can disable this by passing `true` for `doNotClamp`.
      *
      * @param zr New range, as an array consisting of [lower, upper] values. Lower must be less than upper.
      * @param doNotClamp If true, will not check the current zoom to ensure it falls within the new range.
@@ -541,10 +470,7 @@ export declare class PanZoom {
      */
     setTransformOrigin(x: number, y: number): void;
     /**
-     * Maps the given page location to a value relative to the viewport origin, 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. If
-     * you wish, you can supply true for 'doNotAdjustForOffset', to suppress that behavior.
+     * Maps the given page location to a value relative to the viewport origin, 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. If you wish, you can supply true for 'doNotAdjustForOffset', to suppress that behavior.
      * @param left X location
      * @param top Y location
      * @param roundValues If true, return integers.
@@ -571,22 +497,11 @@ export declare class PanZoom {
      * @param state Whether or not to respond to mouse events.
      */
     setEnabled(state: boolean): void;
-    /**
-     * Takes some element that is in the DOM and moves it so that it appears at the given x,y over the canvas,
-     * allowing for the current zoom and pan.  It is expected that the element is not one that is currently
-     * managed by the widget - a common use case for this is some dialog, which you do not want to append to
-     * the canvas since it would have the zoom effect applied.
-     * @param el Selector, DOM element or element id representing the element to move.
-     * @param x X location to move to.
-     * @param y Y location to move to.
-     */
-    showElementAt(el: HTMLElement, x: number, y: number): void;
     /**
      * Returns the apparent origin of the canvas inside the viewport - the coordinates, in real pixel
      * values, of where the origin of the canvas appears to be. This apparent origin is not necessarily the
      * same as the origin values of the canvas, because the transform origin and zoom values change
-     * things. This function can be used in conjunction with the content bounds by widgets such as the miniview,
-     * to calculate what is actually visible in the viewport at some point in time.
+     * things. This function can be used in conjunction with the content bounds by widgets such as the miniview, to calculate what is actually visible in the viewport at some point in time.
      * @returns Position of the canvas, relative to the viewport's 0,0.
      */
     getApparentCanvasLocation(): PointXY;

package/types/browser-ui/paper-renderer/definitions.d.ts

@@ -3,6 +3,8 @@ import { BrowserUIDefaults, BrowserUIOptions } from "../definitions";
  * Css class added to a Paper component's container element
  * @cssClass
  * @context paper
+ * @group Components
+ * @category Paper
  */
 export declare const CLASS_PAPER = "vjs-paper";
 /**

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

@@ -8,6 +8,7 @@ import { Background } from "../definitions";
 /**
  * Provides a canvas on which nodes, groups and edges can be rendered, with support for layouts and various plugins. This is not a class that API users should instantiate directly: for users of a library integration, a Paper will be created internally by the appropriate component; for users of vanilla VisuallyJs, a Paper is created either via the {@link createPaper} factory method, or via a `renderPaper` call on an instance of the {@link BrowserUIModel}.
  * @group Components
+ * @category Paper
  */
 export declare class Paper extends BrowserUI {
     model: BrowserUIModel;

package/types/browser-ui/plugins/background/background-options.d.ts

@@ -2,10 +2,14 @@ import { BrowserUI } from "../../browser-visuallyjs-instance";
 import { Background } from "../../definitions";
 /**
  * Defines the `logarithmic` tiling strategy
+ * @group Plugins
+ * @category Background
  */
 export declare const TILING_STRATEGY_LOGARITHMIC = "logarithmic";
 /**
  * Defines the `absolute` tiling strategy
+ * @group Plugins
+ * @category Background
  */
 export declare const TILING_STRATEGY_ABSOLUTE = "absolute";
 /**

package/types/browser-ui/plugins/background/tiled-background.d.ts

@@ -8,6 +8,8 @@ import { ImageBackground, InternalBackgroundOptions } from "../../definitions";
  * The class that is added to each tile element in a tiled background
  * @cssClass
  * @context imageBackground
+ * @group Plugins
+ * @category Background
  */
 export declare const CLASS_BACKGROUND_TILE = "vjs-background-tile";
 export type TileSpecs = {

package/types/browser-ui/plugins/browser-ui-plugin.d.ts

@@ -1,6 +1,6 @@
 import { BrowserElement } from "../util";
 import { BrowserUI } from "../browser-visuallyjs-instance";
-import { GroupResizeResult, UIPlugin, UIPluginOptions, ViewportElement, ViewportGroupElement } from "../../ui";
+import { ConnectionEstablishedParams, GroupResizeResult, UIPlugin, UIPluginOptions, ViewportElement, ViewportGroupElement } from "../../ui";
 import { Edge, Size, Vertex, VertexUpdatedReason } from "../../core";
 /**
  * Base interface for BrowserUI plugin options.
@@ -87,4 +87,9 @@ export declare abstract class BaseBrowserUIPlugin {
      * @param edge
      */
     $edgeUpdated(edge: Edge): void;
+    /**
+     * Invoked when an edge has been rendered
+     * @param edge
+     */
+    $edgeRendered(p: ConnectionEstablishedParams): void;
 }