@visuallyjs/browser-ui 1.0.3 → 1.1.1

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

@@ -29,35 +29,18 @@ export declare function $getOverlay<T extends Overlay<EL>, EL>(c: Connection<EL>
  * @internal
  */
 export declare function $getOverlays<EL>(c: Connection<EL>): Record<string, Overlay<EL>>;
-/**
- * Hide the overlay with the given id.
- * @param id
- * @internal
- */
-export declare function $hideOverlay<EL>(c: Connection<EL>, id: string): void;
 /**
  * Hide all overlays, or a specific set of overlays.
  * @param ids optional list of ids to hide.
  * @internal
  */
 export declare function _hideOverlays<EL>(c: Connection<EL>, ...ids: Array<string>): void;
-/**
- * Show a specific overlay (set it to be visible)
- * @param id
- * @internal
- */
-export declare function _showOverlay<E>(c: Connection<E>, id: string): void;
 /**
  * Show all overlays, or a specific set of overlays.
  * @param ids optional list of ids to show.
  * @internal
  */
 export declare function _showOverlays<E>(c: Connection<E>, ...ids: Array<string>): void;
-/**
- * Remove all overlays from this component.
- * @internal
- */
-export declare function _removeAllOverlays<E>(c: Connection<E>): void;
 /**
  * Remove the overlay with the given id.
  * @param overlayId
@@ -65,22 +48,10 @@ export declare function _removeAllOverlays<E>(c: Connection<E>): void;
  * @internal
  */
 export declare function _removeOverlay<E>(c: Connection<E>, overlayId: string, dontCleanup?: boolean): void;
-/**
- * Remove the given set of overlays, specified by their ids.
- * @param overlays
- * @internal
- */
-export declare function _removeOverlays<E>(c: Connection<E>, ...overlays: string[]): void;
 /**
  * @internal
  */
 export declare function _getLabelOverlay<EL>(c: Connection<EL>): LabelOverlay<EL>;
-/**
- * Set this component's label.
- * @param l Either some text, or a function which returns some text, or an existing label overlay.
- * @internal
- */
-export declare function _setConnectionLabel<EL>(c: Connection<EL>, l: string | Function | LabelOverlay<EL>): void;
 export declare const ACTION_ADD = "add";
 export declare const ACTION_REMOVE = "remove";
 /**

package/types/ui/core/connector/straight-segment.d.ts

@@ -2,12 +2,6 @@
  * @internal
  */
 import { Segment, SegmentHandler, SegmentParams } from "../../common";
-export type StraightSegmentCoordinates = {
-    x1: number;
-    y1: number;
-    x2: number;
-    y2: number;
-};
 /**
  * @internal
  */

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

@@ -5,8 +5,6 @@ export declare const PX = "px";
 export declare const NOMINAL_SIZE = "50px";
 export declare const BLOCK = "block";
 export declare const NONE = "none";
-export declare const SOURCE_INDEX = 0;
-export declare const TARGET_INDEX = 1;
 export declare const ABSOLUTE = "absolute";
 export declare const FIXED = "fixed";
 export declare const STATIC = "static";
@@ -31,8 +29,6 @@ export declare const ATTRIBUTE_NOT_DRAGGABLE = "data-vjs-not-draggable";
  */
 export declare const ATTRIBUTE_ELEMENTS_DRAGGABLE = "data-vjs-elements-draggable";
 export declare const ATTRIBUTE_TABINDEX = "tabindex";
-/** @internal */
-export declare const KEY_OVERLAYS = "overlays";
 /**
  * Written by VisuallyJs onto an element that represents some vertex (a node, group or port)
  * @group Nodes and Groups

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

@@ -1,7 +1,9 @@
-import { EVENT_DESTROY, EVENT_EDGE_GEOMETRY, EVENT_EDGE_REMOVED, EVENT_GROUP_MOVE, EVENT_GROUP_MOVE_END, EVENT_GROUP_MOVE_START, EVENT_GROUP_REMOVED, EVENT_NODE_MOVE, EVENT_NODE_MOVE_END, EVENT_NODE_MOVE_START, EVENT_NODE_REMOVED } from "../../core";
+import { EVENT_DESTROY, EVENT_EDGE_GEOMETRY, EVENT_EDGE_REMOVED, EVENT_GROUP_MOVE, EVENT_GROUP_MOVE_END, EVENT_GROUP_MOVE_START, EVENT_GROUP_REMOVED, EVENT_NODE_MOVE, EVENT_NODE_MOVE_ABORT, EVENT_NODE_MOVE_END, EVENT_NODE_MOVE_START, EVENT_NODE_REMOVED } from "../../core";
 import { EVENT_GROUP_COLLAPSE, EVENT_GROUP_EXPAND, EVENT_INTERNAL_CONNECTION, EVENT_RENDER_END, EVENT_RENDER_START, EVENT_ZOOM, EVENT_AFTER_LAYOUT_REFRESH, //EVENT_CONNECTION_MOUSEOVER,
-EVENT_GROUP_RELAYOUT, EVENT_GROUP_RENDERED, EVENT_INTERNAL_VERTEX_UPDATED, EVENT_NODE_RENDERED, EVENT_NODE_VISIBILITY, EVENT_PLUGIN_ADDED, EVENT_RELAYOUT, EVENT_PLUGIN_REMOVED, EVENT_ADHOC_LAYOUT } from "./event-constants";
+EVENT_GROUP_RELAYOUT, EVENT_GROUP_RENDERED, EVENT_INTERNAL_VERTEX_UPDATED, EVENT_NODE_RENDERED, EVENT_NODE_VISIBILITY, EVENT_PLUGIN_ADDED, EVENT_RELAYOUT, EVENT_PLUGIN_REMOVED, EVENT_ADHOC_LAYOUT, EVENT_INTERNAL_ELEMENT_REPAINTED } from "./event-constants";
 /**
  * An event that the UI core may fire - meaning subclasses too.
+ * @group Events
+ * @category UI Events
  */
-export type CoreUIEvent = typeof EVENT_NODE_MOVE_END | typeof EVENT_NODE_MOVE | typeof EVENT_NODE_MOVE_START | typeof EVENT_RENDER_START | typeof EVENT_GROUP_REMOVED | typeof EVENT_GROUP_MOVE | typeof EVENT_GROUP_MOVE_END | typeof EVENT_GROUP_MOVE_START | typeof EVENT_RENDER_END | typeof EVENT_DESTROY | typeof EVENT_RELAYOUT | typeof EVENT_GROUP_COLLAPSE | typeof EVENT_AFTER_LAYOUT_REFRESH | typeof EVENT_GROUP_EXPAND | typeof EVENT_NODE_VISIBILITY | typeof EVENT_GROUP_RENDERED | typeof EVENT_NODE_REMOVED | typeof EVENT_INTERNAL_VERTEX_UPDATED | typeof EVENT_INTERNAL_CONNECTION | typeof EVENT_NODE_RENDERED | typeof EVENT_EDGE_REMOVED | typeof EVENT_ZOOM | typeof EVENT_GROUP_RELAYOUT | typeof EVENT_PLUGIN_ADDED | typeof EVENT_PLUGIN_REMOVED | typeof EVENT_EDGE_GEOMETRY | typeof EVENT_ADHOC_LAYOUT;
+export type CoreUIEvent = typeof EVENT_NODE_MOVE_END | typeof EVENT_NODE_MOVE | typeof EVENT_NODE_MOVE_START | typeof EVENT_NODE_MOVE_ABORT | typeof EVENT_RENDER_START | typeof EVENT_GROUP_REMOVED | typeof EVENT_GROUP_MOVE | typeof EVENT_GROUP_MOVE_END | typeof EVENT_GROUP_MOVE_START | typeof EVENT_RENDER_END | typeof EVENT_DESTROY | typeof EVENT_RELAYOUT | typeof EVENT_GROUP_COLLAPSE | typeof EVENT_AFTER_LAYOUT_REFRESH | typeof EVENT_GROUP_EXPAND | typeof EVENT_NODE_VISIBILITY | typeof EVENT_GROUP_RENDERED | typeof EVENT_NODE_REMOVED | typeof EVENT_INTERNAL_VERTEX_UPDATED | typeof EVENT_INTERNAL_CONNECTION | typeof EVENT_INTERNAL_ELEMENT_REPAINTED | typeof EVENT_NODE_RENDERED | typeof EVENT_EDGE_REMOVED | typeof EVENT_ZOOM | typeof EVENT_GROUP_RELAYOUT | typeof EVENT_PLUGIN_ADDED | typeof EVENT_PLUGIN_REMOVED | typeof EVENT_EDGE_GEOMETRY | typeof EVENT_ADHOC_LAYOUT;

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

@@ -88,7 +88,7 @@ export declare abstract class UICore<EL, EVT = CoreUIEvent> extends OptimisticEv
     protected _boundCanvasEvents: Array<[string, Function]>;
     containerType: ElementType;
     id: string;
-    defaults: UICoreDefaults<EL>;
+    defaults: UICoreDefaults;
     private _initialDefaults;
     hoverSuspended: boolean;
     _suspendDrawing: boolean;
@@ -110,7 +110,7 @@ export declare abstract class UICore<EL, EVT = CoreUIEvent> extends OptimisticEv
     $_vertexBorder: number;
     private _$_edgesAvoidVertices;
     readonly viewport: Viewport<EL>;
-    readonly router: Router<EL, any>;
+    readonly router: Router<EL>;
     private _connectionTypes;
     protected _container: EL;
     private _pendingGroupsToSize;
@@ -212,6 +212,11 @@ export declare abstract class UICore<EL, EVT = CoreUIEvent> extends OptimisticEv
      * @internal
      */
     private _refreshLayoutOnEdgeConnect;
+    /**
+     * @internal
+     * @private
+     */
+    protected $relayoutOnResize: boolean;
     /**
      * @internal
      */
@@ -221,7 +226,7 @@ export declare abstract class UICore<EL, EVT = CoreUIEvent> extends OptimisticEv
      * @internal
      */
     rootElement: EL;
-    protected constructor(model: VisuallyJsModel, dataSource: DataSource, rootElement: EL, options: UICoreOptions<EL, any>, defaults?: UICoreDefaults<EL>);
+    protected constructor(model: VisuallyJsModel, dataSource: DataSource, rootElement: EL, options: UICoreOptions<EL, any>, defaults?: UICoreDefaults);
     /**
      * Gets the Layout this surface is currently using.
      */
@@ -473,6 +478,12 @@ export declare abstract class UICore<EL, EVT = CoreUIEvent> extends OptimisticEv
     $vertexRendered<N extends Vertex>(v: N, el: EL, def: VertexMapping<any, EL>, eventInfo?: {
         position: PointXY;
     }): void;
+    /**
+     * @internal
+     */
+    $redrawEveryConnection(): void;
+    private $redrawConnectionsForViewportElement;
+    private _repaintConnections;
     /**
      * Toggle the visible state of some edge.
      * @param edge
@@ -578,17 +589,9 @@ export declare abstract class UICore<EL, EVT = CoreUIEvent> extends OptimisticEv
      * @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.
+     * 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
@@ -682,12 +685,7 @@ export declare abstract class UICore<EL, EVT = CoreUIEvent> extends OptimisticEv
      * 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;
+    $repaintUIElementById(id: string, timestamp?: string, offsetsWereJustCalculated?: boolean, postEvent?: 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.
@@ -695,7 +693,7 @@ export declare abstract class UICore<EL, EVT = CoreUIEvent> extends OptimisticEv
      * @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;
+    $repaintUIElement(el: ViewportElement<EL>, timestamp?: string, offsetsWereJustCalculated?: boolean, postEvent?: boolean): RedrawResult;
     /**
      * Clears all connections from the UI instance. Does not also clear out event listeners, selectors, or
      * connection types - for that, use `destroy()`.
@@ -854,7 +852,7 @@ export declare abstract class UICore<EL, EVT = CoreUIEvent> extends OptimisticEv
          * Whether or not to also apply the rotations to the element
          */
         writeRotationsToElements: boolean;
-    }): RedrawResult;
+    }): Set<Connection<any>>;
     /**
      * Runs a relayout of all vertices in the canvas, and of each group.
      * @param newParameters
@@ -1156,7 +1154,7 @@ export declare abstract class UICore<EL, EVT = CoreUIEvent> extends OptimisticEv
      * @internal
      * @param el
      */
-    abstract $getElementPositionInUIRelativeToCanvasOrigin(el: EL, knownElementSize?: Size): PointXY;
+    abstract $getElementPositionInUIRelativeToCanvasOrigin(el: ViewportElement<EL>, knownElementSize?: Size): PointXY;
     /**
      * Gets the position of the given element relative to the browser window's origin.
      * @param el

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

@@ -5,6 +5,8 @@ import { Base, Size, LayoutSpec, Group, ObjectData } from "../../core";
 import { GridOptions } from "./grid-profile";
 import { MagnetizeOptions } from "./magnetize-profile";
 import { UIPluginSpec } from "../plugins";
+import { Router } from "./router";
+import { UICore } from "./core";
 /**
  * Default key used to instruct VisuallyJs whether or not nested groups are allowed. Defaults to true.
  * @group Nodes and Groups
@@ -26,13 +28,10 @@ export declare const DEFAULT_KEY_ANCHOR = "anchor";
  */
 export declare const DEFAULT_KEY_ANCHORS = "anchors";
 /** @internal */
-export declare const DEFAULT_KEY_ASTAR_GRID_CELL_SIZE = "astarGridCellSize";
 /** @internal */
 export declare const DEFAULT_KEY_ASTAR_VERTEX_BORDER = "astarVertexBorder";
 /** @internal */
 export declare const DEFAULT_KEY_ASTAR_VERTEX_BUFFER = "astarVertexBuffer";
-/** @internal */
-export declare const DEFAULT_KEY_OVERLAYS = "overlays";
 /**
  * Default key used to instruct the UI whether or not connections should be detachable via mouse/touch events. Defaults to true.
  * @group Edges
@@ -48,7 +47,6 @@ export declare const DEFAULT_KEY_EDGES_DETACHABLE = "edgesDetachable";
 export declare const DEFAULT_KEY_CONNECTOR = "connector";
 export declare const DEFAULT_KEY_CSS_CLASS = "cssClass";
 export declare const DEFAULT_KEY_EDGE_RELOCATE_HANDLE_SIZE = "edgeRelocateHandleSize";
-export declare const DEFAULT_KEY_ENSURE_ANCHORS_IN_WHITESPACE = "ensureAnchorsInWhitespace";
 /**
  * When `useModelForSizes` is set on a Surface, this key can be used to define the default size for groups.
  * @group Nodes and Groups
@@ -155,9 +153,13 @@ export interface UIEdgeOptions {
 }
 /**
  * Base options for a renderer.
- * @group Components
+ * @group UI
+ * @category Definitions
  */
-export interface UICoreOptions<E, O extends UICoreDefaults<E>> {
+export interface UICoreOptions<E, O extends UICoreDefaults> {
+    /**
+     * Optional ID for the UI. Allows you to retrieve this UI from a model's `getRenderer(id)` method.
+     */
     id?: string;
     /**
      * Optional list of plugins to attach to the UI.
@@ -169,11 +171,27 @@ export interface UICoreOptions<E, O extends UICoreDefaults<E>> {
     defaults?: O;
     view?: ViewSpec<E>;
     connectionEstablished?: (payload: ConnectionEstablishedParams) => void;
+    /**
+     * Options for imposing a grid onto the elements in the UI
+     */
     grid?: GridOptions;
+    /**
+     * Defaults to false. When true, the UI treats the vertex's element as the element for the port if it cannot find a specific element for the port.
+     */
     logicalPorts?: boolean;
     objectFilter?: (b: Base) => boolean;
     magnetizer?: MagnetizeOptions;
+    /**
+     * Defines the layout to use.
+     */
     layout?: LayoutSpec;
+    /**
+     * Whether or not to relayout the UI when an element's size changes as a result of content changes in its element. Defaults to false.
+     */
+    relayoutOnResize?: boolean;
+    /**
+     * When true, the UI will run a `refresh` of the underlying layout whenever a new edge is established. This defaults to false, but you might want to set this to true if you're using the Hierarchical or Hierarchy layouts, because it has a bearing on the way they paint. However, if your users are able to drag vertices around, you may not wish for the layout to move things that they have placed, which is why this defaults to false.
+     */
     refreshLayoutOnEdgeConnect?: boolean;
     /**
      * Default options for edges - these will apply to all edge types in the UI.
@@ -200,18 +218,34 @@ export interface UICoreOptions<E, O extends UICoreDefaults<E>> {
      */
     zoomToFitIfNecessary?: boolean;
     /**
-     * Optional function to determine the size of a collapsed group. This is given precedence over any default
-     * or per-type specification for a collapsed group's size.
+     * Optional function to determine the size of a collapsed group. This is given precedence over any default or per-type specification for a collapsed group's size.
      * @param group - The group that is being collapsed.
      * @returns The size for the collapsed group.
      */
     getCollapsedGroupSize?: (group: Group, currentSize: Size) => Size;
+    /**
+     * Returns whether or not the given group can be collapsed
+     * @param group Group in question
+     * @param currentSize The group's current size.
+     * @return Either a boolean value indicating the operation may or may not proceed, or a set of values. In the case that a set of values are returned, the operation is approved, and the data returned is updated onto the group's dataset. This is useful when your UI wants to stored specific information related to the collapsed group.
+     */
     canCollapseGroup?: (group: Group, currentSize: Size) => boolean | ObjectData;
+    /**
+     * Returns whether or not the given group can be expanded
+     * @param group Group in question
+     * @param currentSize The group's current (collapsed) size.
+     * @return Either a boolean value indicating the operation may or may not proceed, or a set of values. In the case that a set of values are returned, the operation is approved, and the data returned is updated onto the group's dataset. This is useful when your UI wants to stored specific information related to the expanded group.
+     */
     canExpandGroup?: (group: Group, currentSize: Size) => boolean | ObjectData;
     /**
      * Optional default size for a collapsed group. Defaults to 200x150.
      */
     defaultCollapsedGroupSize?: Size;
+    /**
+     * Optional factory method to instantiate a router. This is only for certain advanced usages in which you wish to route all of the edges yourself. Most applications do not need to consider this.
+     * @param u
+     */
+    router?: (u: UICore<E>) => Router<E>;
 }
 /** @internal */
 export declare const DEFAULT_ZOOM_RANGE: [number, number];
@@ -220,7 +254,7 @@ export declare const DEFAULT_ZOOM_RANGE: [number, number];
  * @group Components
  * @category Defaults
  */
-export interface UICoreDefaults<E> {
+export interface UICoreDefaults {
     /**
      * Default style to use to paint edges.
      */

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

@@ -1,7 +1,5 @@
-import { Connection } from "./connector/connection-impl";
 import { ViewportElement, ViewportGroupElement } from "./viewport";
-import { Group, Node, Vertex } from "../../core/model/graph";
-import { Extents, PointXY, Size } from "../../core/util";
+import { Extents, PointXY, Size, Group, Node, Vertex } from "../../core";
 import { ExportOptions, VisuallyJsModel } from "../../core/toolkit";
 import { MagnetizeProfile } from "./magnetize-profile";
 import { MagnetizeResult } from "../../core/magnetizer";
@@ -10,17 +8,6 @@ import { BOTTOM, CENTER, LEFT, RIGHT, TOP } from "../../core";
 import { UICore } from "./core";
 export type ElementSelectionSpecifier<E> = E | Array<E> | '*';
 export type SelectionList = '*' | Array<string>;
-export interface AbstractSelectOptions<E> {
-    scope?: SelectionList;
-    source?: ElementSelectionSpecifier<E>;
-    target?: ElementSelectionSpecifier<E>;
-}
-export interface SelectOptions<E> extends AbstractSelectOptions<E> {
-    connections?: Array<Connection<E>>;
-}
-export interface SelectEndpointOptions<E> extends AbstractSelectOptions<E> {
-    element?: ElementSelectionSpecifier<E>;
-}
 /**
  * Optional parameters to the `DeleteConnection` method.
  * @internal
@@ -72,9 +59,7 @@ export interface DragHandler2StartParams<E> {
      */
     el: E;
     /**
-     * The page position of the initial event. This position is relative to the page origin, and does not take
-     * page scroll into account. It _cannot_ be safely compared to the return value of getBoundingClientRect, because
-     * getBoundingClientRect returns values relative to the viewport origin (ie. the visible part of the page).
+     * The page position of the initial event. This position is relative to the page origin, and does not take page scroll into account. It _cannot_ be safely compared to the return value of getBoundingClientRect, because getBoundingClientRect returns values relative to the viewport origin (ie. the visible part of the page).
      */
     pagePosition: PointXY;
     /**
@@ -102,6 +87,8 @@ export interface DragHandler2<E> {
 }
 /**
  * Defines a function that will be invoked prior to a vertex being dragged. Returning false from this function will abort the vertex drag.
+ * @group UI
+ * @category Definitions
  */
 export type VertexDragFilter<E> = (p: {
     el: E;
@@ -110,12 +97,14 @@ export type VertexDragFilter<E> = (p: {
 }) => boolean;
 /**
  * Defines a function that can constrain drag.
+ * @group UI
+ * @category Definitions
  */
 export type DragConstrainFunction<E> = (desiredLoc: PointXY, dragEl: E, modelObject: Node | Group, size: Size, currentLoc: PointXY, e: MouseEvent) => PointXY;
 /**
  * Options for element drag
- * @group Components
- * @category Element dragging
+ * @group UI
+ * @category Definitions
  */
 export interface DragOptions<E> {
     /**
@@ -253,7 +242,8 @@ export interface UISaveData {
 /**
  * Models the current bounds of a viewport, containing its x/y location,
  * width/height and current zoom.
- * @group Components
+ * @group UI
+ * @category Definitions
  */
 export interface ViewportBounds {
     /**
@@ -291,6 +281,8 @@ export interface ViewportBounds {
 }
 /**
  * A DataHook is 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.
+ * @group Input and Output
+ * @category Model
  */
 export interface DataHook {
     load: (d: UISaveData) => any;
@@ -327,6 +319,7 @@ interface EnclosedOrIntersectingVerticesOptions {
 }
 /**
  * Options for a find intersecting vertices call
+ * @group UI
  */
 export interface IntersectingVerticesOptions extends EnclosedOrIntersectingVerticesOptions {
     /**
@@ -336,19 +329,23 @@ export interface IntersectingVerticesOptions extends EnclosedOrIntersectingVerti
 }
 /**
  * Options for a find enclosed vertices call
+ * @group UI
  */
 export interface EnclosedVerticesOptions extends EnclosedOrIntersectingVerticesOptions {
 }
 /**
  * Possible alignments for the `alignX` argument to `alignContent`
+ * @group UI
  */
 export type CanvasAlignmentX = typeof LEFT | typeof CENTER | typeof RIGHT;
 /**
  * Possible alignments for the `alignY` argument to `alignContent`
+ * @group UI
  */
 export type CanvasAlignmentY = typeof TOP | typeof CENTER | typeof BOTTOM;
 /**
  * Options for a content centering operation.
+ * @group UI
  */
 export type CenterContentOptions = {
     /**
@@ -384,8 +381,20 @@ export type CenterContentOptions = {
      */
     animationDuration?: number;
 };
+/**
+ * Options for a horizontal content centering operation.
+ * @group UI
+ */
+export type CenterContentHorizontallyOptions = Omit<CenterContentOptions, "horizontal" | "vertical">;
+/**
+ * Options for a vertical content centering operation.
+ * @group UI
+ */
+export type CenterContentVerticallyOptions = Omit<CenterContentOptions, "horizontal" | "vertical">;
 /**
  * Options for aligning content in the UI.
+ * @group Components
+ * @category Surface
  */
 export interface AlignContentOptions {
     /**
@@ -427,6 +436,8 @@ export interface AlignContentOptions {
 }
 /**
  * Options for aligning content to a specific position in the UI.
+ * @group Components
+ * @category Surface
  */
 export interface AlignContentToFaceOptions {
     /**
@@ -452,6 +463,8 @@ export interface AlignContentToFaceOptions {
 }
 /**
  * Options for the zoomToElements method.
+ * @group Components
+ * @category Surface
  */
 export interface ZoomToElementsOptions<EL> {
     /**
@@ -481,6 +494,8 @@ export interface ZoomToElementsOptions<EL> {
 }
 /**
  * Base Options for the zoomToFit methods.
+ * @group Components
+ * @category Surface
  */
 export interface BaseZoomToFitOptions {
     /**
@@ -514,6 +529,8 @@ export interface BaseZoomToFitOptions {
 }
 /**
  * Options for the zoomToFit method.
+ * @group Components
+ * @category Surface
  */
 export interface ZoomToFitOptions extends BaseZoomToFitOptions {
     /**
@@ -523,6 +540,8 @@ export interface ZoomToFitOptions extends BaseZoomToFitOptions {
 }
 /**
  * Options for the zoomToFitIfNecessary method.
+ * @group Components
+ * @category Surface
  */
 export interface ZoomToFitIfNecessaryOptions extends BaseZoomToFitOptions {
 }

package/types/ui/core/event-constants.d.ts

@@ -1,4 +1,5 @@
 export declare const EVENT_INTERNAL_CONNECTION = "internal.connection";
+export declare const EVENT_INTERNAL_ELEMENT_REPAINTED = "internal.element:repainted";
 /**
  * Fired by an UI when its updateContext method has been invoked. The callback gets a JS object with key and value for the update.
  * @group Events

package/types/ui/core/factory/continuous-anchors.d.ts

@@ -1,10 +1,4 @@
 import { Face, LightweightContinuousAnchor } from "../../common";
-/**
- *
- * @param a
- * @internal
- */
-export declare function getDefaultFace(a: LightweightContinuousAnchor): Face;
 /**
  * @internal
  * @param a

package/types/ui/core/grid-profile.d.ts

@@ -1,6 +1,8 @@
-import { Grid } from "../../core/util";
+import { Grid } from "../../core";
 /**
  * Options for a grid in the UI
+ * @group UI
+ * @category Definitions
  */
 export interface GridOptions {
     /**

package/types/ui/core/magnetize-profile.d.ts

@@ -1,4 +1,3 @@
-import { GridProfile } from "./grid-profile";
 import { Grid, PointXY } from "../../core/util";
 /**
  * Options for the magnetize functionality of the UI.
@@ -64,7 +63,6 @@ export interface MagnetizeOptions {
  * @internal
  */
 export declare class MagnetizeProfile {
-    gridProfile: GridProfile;
     readonly afterGroupCollapse: boolean;
     readonly afterGroupExpand: boolean;
     readonly afterGroupResize: boolean;
@@ -78,5 +76,5 @@ export declare class MagnetizeProfile {
     readonly constrainToViewport: boolean;
     readonly repositionDraggedElement: boolean;
     grid: Grid;
-    constructor(opts: MagnetizeOptions, gridProfile: GridProfile);
+    constructor(opts: MagnetizeOptions);
 }

package/types/ui/core/overlay/custom-overlay.d.ts

@@ -2,33 +2,52 @@ import { Overlay } from "./overlay";
 import { UICore } from "../core";
 import { OverlayOptions } from "../../common";
 import { Connection } from "../connector/connection-impl";
-import { ObjectData } from "../../../core";
+import { Edge, ObjectData, VisuallyJsModel } from "../../../core";
+import { BrowserUI } from "../../../browser-ui";
 /**
  * Options for a custom overlay. You need to supply the `create` method, which is passed the current connection as an argument, and return a DOM element.
  * @group Edges
  * @category Overlays
  */
 export interface CustomOverlayOptions<EL> extends OverlayOptions {
-    create: (c: Connection<EL>) => EL;
+    create: (c: Connection<EL>, edge: Edge, instance: BrowserUI, model: VisuallyJsModel) => EL;
+    /**
+     * If true, the label can be rotated to match the gradient of the connector at that location at which it is positioned.
+     */
+    rotatable?: boolean;
 }
 /**
  * A custom overlay allows you to create the element that will be used to represent the overlay.
  * @group Edges
  * @category Overlays
  */
-export declare class CustomOverlay<EL> extends Overlay<EL> {
-    connection: Connection<EL>;
-    create: (c: Connection<EL>) => EL;
+export interface CustomOverlay<EL> extends Overlay<EL> {
+    create: (c: Connection<EL>, edge: Edge, instance: BrowserUI, model: VisuallyJsModel) => EL;
     isSimpleShape: boolean;
-    constructor(instance: UICore<EL>, connection: Connection<EL>, p: CustomOverlayOptions<EL>);
+    rotatable: boolean;
+}
+/**
+ * Custom overlay type.
+ * @group Overlays
+ * @constant
+ */
+export declare const OVERLAY_TYPE_CUSTOM = "Custom";
+/**
+ * @internal
+ */
+export declare class CustomOverlayImpl<EL> extends Overlay<EL> implements CustomOverlay<EL> {
+    connection: Connection<EL>;
     /**
-     * Custom overlay type.
+     * This method is invoked to create the overlay.
      */
-    static type: string;
+    create: (c: Connection<EL>, edge: Edge, instance: BrowserUI, model: VisuallyJsModel) => EL;
+    isSimpleShape: boolean;
+    rotatable: boolean;
+    constructor(instance: UICore<EL>, connection: Connection<EL>, p: CustomOverlayOptions<EL>);
     type: string;
     updateFrom(d: any, context: ObjectData): void;
 }
-export interface CustomOverlayHolder<EL> extends CustomOverlay<EL> {
+export interface CustomOverlayHolder<EL> extends CustomOverlayImpl<EL> {
     contentElement: EL;
 }
 /**

package/types/ui/core/overlay/label-overlay.d.ts

@@ -11,13 +11,14 @@ import { FontSpec } from "../../../browser-ui";
  */
 export declare class LabelOverlay<EL> extends Overlay<EL> {
     private instance;
-    component: Connection<EL>;
+    connection: Connection<EL>;
     label: string | Function;
     static type: string;
     type: string;
     useHTMLElement: boolean;
+    rotatable: boolean;
     font: FontSpec;
-    constructor(instance: UICore<EL>, component: Connection<EL>, p: LabelOverlayOptions);
+    constructor(instance: UICore<EL>, connection: Connection<EL>, p: LabelOverlayOptions);
     isSimpleShape: boolean;
     getLabel(): string;
     setLabel(l: string | Function): void;