@visuallyjs/browser-ui 1.0.2 → 1.1.0

package/types/browser-ui/positioning-and-sizing-utils.d.ts

@@ -1,5 +1,6 @@
 import { BrowserElement } from "./util";
-import { PointXY, Size } from "../core";
+import { PointXY, Size, RectangleXY } from "../core";
+import { ViewportElement } from "../ui";
 /**
  * @internal
  */
@@ -14,6 +15,12 @@ export declare const ATTRIBUTE_TRANSFORM = "transform";
 export declare function getElementSize(el: Element): Size;
 export declare function getPosition(el: BrowserElement, knownElementSize?: Size): PointXY;
 export declare function setPosition(el: BrowserElement, p: PointXY): void;
+/**
+ * Gets the position of an element relative to the some other SVG,
+ * even with nested SVG elements and multiple transforms/rotations.
+ * @internal
+ */
+export declare function getSvgPositionRelativeToSvgRoot(el: SVGGraphicsElement, rootSvg: SVGSVGElement, useBBox?: boolean): PointXY;
 /**
  * Sets the position of the given element in the X axis.
  * @param el
@@ -101,3 +108,16 @@ export declare function setElementRotation(el: BrowserElement, rotation: number)
  * @param p
  */
 export declare function setSvgTranslatePosition(el: SVGElement, p: PointXY): void;
+/**
+ * Computes the translation required for the given box so that when it is rotated it appears to have been rotated around its center. This is required when working with SVG elements (whose parent is an SVG element; it doesnt apply when you have some SVG element whose parent is an HTML element, because its a function of how the parent behaves).
+ *
+ * The reason this is required is that SVG elements have their rotation applied using the parent SVG's top left corner as the transform origin. HTML elements can have the transform origin set, via css or the style.
+ *
+ *
+ * @internal
+ * @param box
+ * @param p
+ * @param r
+ */
+export declare function computeTranslationForRotation(box: RectangleXY, p: PointXY, r: number): import("../ui").RotatedPointXY;
+export declare function setRotatedSvgElementPosition(el: ViewportElement<BrowserElement>, p: PointXY): void;

package/types/browser-ui/shape-library/shape-library-definitions.d.ts

@@ -2,6 +2,7 @@ import { Size, Group, Node, ObjectData, AbstractEntry, CustomTagOptions } from "
 import { BrowserElement } from "../util";
 import { IconDefinition } from "../icons";
 import { FontSpec } from "../definitions";
+import { GroupTemplate } from "../../core/model/group-template";
 /**
  * Default fill/stroke/text color for items in ShapeLibrary.
  * @internal
@@ -15,13 +16,13 @@ export declare const ShapeLibraryDefaults: {
 /**
  * The object type for some shape - a node or a group.
  * @group Nodes and Groups
- * @category Shape Libraries
+ * @category SVG Shapes
  */
 export type ShapeObjectType = typeof Group.objectType | typeof Node.objectType;
 /**
  * Defines a shape type. If you wish to supply custom shape types you should extend this interface.
  * @group Nodes and Groups
- * @category Shape Libraries
+ * @category SVG Shapes
  */
 export interface ShapeType {
     /**
@@ -53,6 +54,10 @@ export interface ShapeType {
      * Initial size for this specific shape. If not provided defaults will be used.
      */
     initialSize?: Size;
+    /**
+     * Defaults to true, meaning this will by default be treated as an edge target for drag/drop edges. In some cases you may not want the entire shape to be a target, for instance if its connectivity is to various ports (as an example, consider a logic gate with input pins and an output pin).
+     */
+    defaultTarget?: boolean;
     /**
      * Size for this shape when it is collapsed - only relevant when objectType is Group.
      */
@@ -90,35 +95,40 @@ export interface ShapeType {
      * optional name of the group to which the shape belongs.
      */
     group?: string;
+    /**
+     * Optional blueprint for child vertices and edges to be created when this group is added.
+     * Only relevant when objectType is Group.
+     */
+    members?: GroupTemplate;
 }
 /**
  * Start placement for shape icon - in x axis this means the left; in y axis it means the top.
  * @group Nodes and Groups
- * @category Shape Libraries
+ * @category SVG Shapes
  */
 export declare const ICON_ORIGIN_START = "start";
 /**
  * Center placement for shape icon, x and y axis
  * @group Nodes and Groups
- * @category Shape Libraries
+ * @category SVG Shapes
  */
 export declare const ICON_ORIGIN_CENTER = "center";
 /**
  * End placement for shape icon - in x axis this means the right; in y axis it means the bottom.
  * @group Nodes and Groups
- * @category Shape Libraries
+ * @category SVG Shapes
  */
 export declare const ICON_ORIGIN_END = "end";
 /**
  * Possible values for shape icon placement, x axis and y axis
  * @group Nodes and Groups
- * @category Shape Libraries
+ * @category SVG Shapes
  */
 export type IconOrigin = typeof ICON_ORIGIN_START | typeof ICON_ORIGIN_CENTER | typeof ICON_ORIGIN_END;
 /**
  * Defines a set of shapes. This is the interface you should extend if you wish to supply custom shape sets to the widget.
  * @group Nodes and Groups
- * @category Shape Libraries
+ * @category SVG Shapes
  */
 export interface ShapeSet {
     id: string;
@@ -150,6 +160,7 @@ export interface ShapeLibrary<T extends ObjectData> {
     renderShapeLabel(data: ObjectData, labelProperty: string, strokeWidth: string, label: string, fill: string, stroke: string, font: FontSpec): SVGTextElement;
     getShapeTagDefinition(isSvgContainer: boolean, strokeWidth?: number, includeLabel?: boolean, fontSpec?: FontSpec, labelAttribute?: string, defaultFillColor?: string, defaultOutlineColor?: string, defaultColor?: string): CustomTagOptions;
     getShapeSet(id: string): RenderedShapeSet;
+    getShapeSets(): Array<RenderedShapeSet>;
     rootSet: RenderedShapeSet;
     getDefsElements(): Array<Element>;
     getSvgDefsElement(): SVGElement;
@@ -170,24 +181,24 @@ export interface ShapeLibrary<T extends ObjectData> {
 /**
  * Defines a function that can take a vertex's data object and return a document fragment with it rendered.
  * @group Nodes and Groups
- * @category Shape Libraries
+ * @category SVG Shapes
  */
 export type ShapeGeneratorFunction = (data: ObjectData) => DocumentFragment;
 /**
  * Name of the default shape set
  * @group Nodes and Groups
- * @category Shape Libraries
+ * @category SVG Shapes
  */
 export declare const DEFAULT_SET_NAME = "Default";
 /**
  * @group Nodes and Groups
- * @category Shape Libraries
+ * @category SVG Shapes
  */
 export declare const DEFAULT_SET_DESCRIPTION = "Default shapes";
 /**
  * The HTML element used for the SVG shape element.
  * @group Nodes and Groups
- * @category Shape Libraries
+ * @category SVG Shapes
  */
 export declare const TAG_SHAPE = "vjs-shape";
 /**
@@ -208,10 +219,14 @@ export declare const CLASS_SHAPE_LABEL = "vjs-shape-label";
 export declare const CLASS_SHAPE = "vjs-shape";
 /**
  * Supported data types for shape properties.
+ * @group Diagrams
+ * @category Shapes
  */
 export type ShapePropertyType = "string" | "number" | "boolean" | "color" | "font";
 /**
  * Defines a single configurable property exposed by a shape.
+ * @group Diagrams
+ * @category Shapes
  */
 export interface ShapePropertyDefinition {
     /**

package/types/browser-ui/shape-library/shape-library.d.ts

@@ -11,25 +11,35 @@ export declare const ATTRIBUTE_ICON_SIZE = "size";
 export declare const ATTRIBUTE_ICON_KEY = "key";
 export declare const ATTRIBUTE_ICON_ID = "iconId";
 /**
- * Indicates that the icons in a `vjs-incude-icons` element should be arranged in a horizontal line - this is the default.
+ * Indicates that the icons in a `vjs-include-icons` element should be arranged in a horizontal line - this is the default.
+ * @group Diagrams
+ * @category Shapes
  */
 export declare const ICONS_ORIENTATION_HORIZONTAL = "horizontal";
 /**
  * Indicates that the icons in a `vjs-include-icons` element should be arranged in a vertical line.
+ * @group Diagrams
+ * @category Shapes
  */
 export declare const ICONS_ORIENTATION_VERTICAL = "vertical";
 /**
  * This class is assigned to SVG elements serving as icons  (via `vjs-icon` or `vjs-icons` in a shape template)
  * @cssClass
  * @context shape-library, shape-icon
+ * @group Diagrams
+ * @category CSS Classes
  */
 export declare const CLASS_SHAPE_ICON = "vjs-shape-icon";
 /**
  * Tag identifying an icon inclusion in a shape template.
+ * @group Diagrams
+ * @category Shapes
  */
 export declare const ELEMENT_INCLUDE_ICON = "vjs-include-icon";
 /**
  * Tag identifying a set of icon inclusions in a shape template.
+ * @group Diagrams
+ * @category Shapes
  */
 export declare const ELEMENT_INCLUDE_ICONS = "vjs-include-icons";
 /**
@@ -89,7 +99,7 @@ export declare const DEFAULT_LABEL_FILL_RATIO = 0.8;
 /**
  * Options for a shape library.
  * @group Nodes and Groups
- * @category Shape Libraries
+ * @category SVG Shapes
  */
 export interface ShapeLibraryOptions {
     /**
@@ -124,7 +134,7 @@ export interface ShapeLibraryOptions {
 /**
  * Default ShapeLibrary implementation. Use one of these to manage a set of shapes for rendering into your vertices and/or for rendering as a palette from which the user can drag new objects.
  * @group Nodes and Groups
- * @category Shape Libraries
+ * @category SVG Shapes
  */
 export declare class ShapeLibraryImpl<T extends ObjectData> implements ShapeLibrary<T> {
     compiledShapes: Map<string, ShapeGeneratorFunction>;
@@ -171,6 +181,7 @@ export declare class ShapeLibraryImpl<T extends ObjectData> implements ShapeLibr
     refresh(el: BrowserElement, data: ObjectData, labelAttribute?: string): void;
     private _processShapeSets;
     getShapeSet(id: string): RenderedShapeSet;
+    getShapeSets(): Array<RenderedShapeSet>;
     /**
      * Gets the definition for some combination of type and category. May return null.
      * @param type

package/types/browser-ui/shape-library/shapes-basic.d.ts

@@ -2,6 +2,6 @@ import { ShapeSet } from "./shape-library-definitions";
 /**
  * Shapefile for basic shapes.
  * @group Nodes and Groups
- * @category Shape Libraries
+ * @category SVG Shapes
  */
 export declare const BASIC_SHAPES: ShapeSet;

package/types/browser-ui/shape-library/shapes-flowchart.d.ts

@@ -2,6 +2,6 @@ import { ShapeSet } from "./shape-library-definitions";
 /**
  * Shapefile for flowchart shapes.
  * @group Nodes and Groups
- * @category Shape Libraries
+ * @category SVG Shapes
  */
 export declare const FLOWCHART_SHAPES: ShapeSet;

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

@@ -5,46 +5,54 @@ import { EventGenerator } from "../../../core";
 /**
  * Represents the initial phase of an animation, before it has started moving.
  * @constant
+ * @group Animation
  */
 export declare const ANIMATION_PHASE_INITIALIZED = "INITIALIZED";
 /**
  * Represents the phase of an animation where the start vertex is being traversed
  * @constant
+ * @group Animation
  */
 export declare const ANIMATION_PHASE_TRAVERSING_START = "TRAVERSING_START";
 /**
  * Represents the phase of an animation where an edge is being traversed.
  * @constant
+ * @group Animation
  */
 export declare const ANIMATION_PHASE_TRAVERSING_EDGE = "TRAVERSING_EDGE";
 /**
  * Represents the phase of an animation where the end vertex is being traversed.
  * @constant
+ * @group Animation
  */
 export declare const ANIMATION_PHASE_TRAVERSING_END = "TRAVERSING_END";
 /**
  * Represents an animation that has been cancelled
  * @constant
+ * @group Animation
  */
 export declare const ANIMATION_PHASE_CANCELLED = "CANCELLED";
 /**
  * Represents an animation that has run through and finished.
  * @constant
+ * @group Animation
  */
 export declare const ANIMATION_PHASE_FINISHED = "FINISHED";
 /**
  * A phase in an Animation.
- * @group Components
+ * @group Animation
  */
 export type AnimationPhase = typeof ANIMATION_PHASE_INITIALIZED | typeof ANIMATION_PHASE_TRAVERSING_START | typeof ANIMATION_PHASE_TRAVERSING_EDGE | typeof ANIMATION_PHASE_TRAVERSING_END | typeof ANIMATION_PHASE_CANCELLED | typeof ANIMATION_PHASE_FINISHED;
 /**
  * Available animation events.
- * @group Events
+ * @group Animation
+ * @category Events
  */
 export type AnimationEvent = typeof EVENT_START_OVERLAY_ANIMATION | typeof EVENT_END_OVERLAY_ANIMATION | typeof EVENT_START_NODE_TRAVERSAL | typeof EVENT_END_NODE_TRAVERSAL;
 /**
  * The type defining the object that is passed to all events fired by the `tracePath` method.
- * @group Events
+ * @group Animation
+ * @category Events
  */
 export type AnimationEventCallbackParams = {
     /**
@@ -62,7 +70,7 @@ export type AnimationEventCallbackParams = {
 };
 /**
  * Options for animating an overlay along an edge
- * @group Components
+ * @group Animation
  */
 export interface OverlayAnimationOptions {
     /**
@@ -109,6 +117,7 @@ export interface InternalOverlayAnimationOptions extends OverlayAnimationOptions
 }
 /**
  * Definition of the control surface for a specific segment in the tracePath method.
+ * @group Animation
  */
 export type ConnectionOverlayAnimator = {
     /**

package/types/browser-ui/surface-renderer/anim/path-transport.d.ts

@@ -12,7 +12,6 @@ export declare const EVENT_STATE = "state";
 export declare class PathTransport extends OptimisticEventGenerator {
     components: Array<any>;
     params: any;
-    pathExists: true;
     state: CurrentState;
     currentlyAnimatingConnection: ConnectionOverlayAnimator;
     constructor(components: Array<any>, params: any);

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

@@ -4,19 +4,27 @@ import { PointXY, Edge, Group, Node, Port, Vertex } from "../../core";
 import { BrowserUIModel } from "../browser-ui";
 import { BrowserUI } from "../browser-visuallyjs-instance";
 /**
- * Identifies the 'pan' mode in the surface. In this mode the canvas is panned via pointer drag or via wheel events
+ * Identifies the 'pan' mode in the surface. In this mode the canvas is panned via pointer drag or via wheel events.
+ * @group Components
+ * @category Surface
  */
 export declare const SURFACE_MODE_PAN = "pan";
 /**
- * Identifies the 'select' mode in the surface. In this mode, panning is disabled and pointer drag s used to lasso items.
+ * Identifies the 'select' mode in the surface. In this mode, panning is disabled and pointer drag is used to lasso items.
+ * @group Components
+ * @category Surface
  */
 export declare const SURFACE_MODE_SELECT = "select";
 /**
  * Identifies the 'disabled' mode in the surface, in which no interaction may take place with the canvas.
+ * @group Components
+ * @category Surface
  */
 export declare const SURFACE_MODE_DISABLED = "disabled";
 /**
  * Identifies the mode in which pointer drag will cause vertices to be drawn. This surface will only enter this mode if there is a vertex drawing plugin attached.
+ * @group Components
+ * @category Surface
  */
 export declare const SURFACE_MODE_VERTEX_DRAWING = "vertexDrawing";
 /**
@@ -28,7 +36,7 @@ export type SurfaceMode = typeof SURFACE_MODE_PAN | typeof SURFACE_MODE_DISABLED
 /**
  * The spec for one model event binding in a surface. Consists of the event name, a CSS selector identifying which elements to listen to, and a callback to invoke.
  * @group Events
- * @category Payloads
+ * @category UI Events
  */
 export interface ModelEventSpec {
     event: string;
@@ -40,6 +48,7 @@ export interface ModelEventSpec {
  * @group Events
  * @typeParam T Maps the type of object the event pertains to - a Node, Group, Edge or Port.
  * @typeParam E Maps the event class you expect as a return value. Providing this helps you to type things more strictly.
+ * @category UI Events
  */
 export type ModelEventCallbackPayload<T = any, E extends Event = Event> = {
     event: E;
@@ -51,8 +60,10 @@ export type ModelEventCallbackPayload<T = any, E extends Event = Event> = {
 /**
  * Callback for a model event.
  * @group Events
+ * @category Model
  * @typeParam T Maps the type of object the event pertains to - a Node, Group, Edge or Port.
  * @typeParam E Maps the event class you expect as a return value. Providing this helps you to type things more strictly.
+ * @category UI Events
  */
 export type ModelEventCallback<T = any, E extends Event = Event> = (p: ModelEventCallbackPayload<T, E>) => any;
 /**

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

@@ -44,6 +44,8 @@ export interface DiagramGridOptions extends GridOptions {
 }
 /**
  * Defines a function that can generate the backing data for a new edge.
+ * @group Diagrams
+ * @category Options
  */
 export type EdgeDataGenerator = (v: Vertex, type: string) => ObjectData;
 /**
@@ -65,6 +67,10 @@ export interface DiagramOptions {
      */
     editable?: boolean;
     edges?: {
+        /**
+         * Whether or not to disable drop targets on which an edge from some current source may not be dropped when drag starts. Defaults to true.
+         */
+        activeFiltering?: boolean;
         /**
          * Default anchor to use for both source and target of edges.
          */
@@ -73,6 +79,10 @@ export interface DiagramOptions {
          * Anchors to use as source, target of edges. This will take precedence over `anchor`.
          */
         anchors?: [AnchorSpec, AnchorSpec];
+        /**
+         * Defaults to false. If true, edges will attempt to avoid vertices wherever possible.
+         */
+        avoidVertices?: boolean;
         /**
          * Defaults to true - edges are editable when the user taps on them.
          */
@@ -81,10 +91,6 @@ export interface DiagramOptions {
          * Input method for edges. Defaults to drag.
          */
         inputMethod?: EdgeInputMethod;
-        /**
-         * Defaults to false. If true, edges will attempt to avoid vertices wherever possible.
-         */
-        avoidVertices?: boolean;
         /**
          * Mappings from property values to overlays, edge style etc.
          */
@@ -392,7 +398,7 @@ export interface DiagramOptions {
     /**
      * Defaults for connector/anchors etc
      */
-    defaults?: UICoreDefaults<BrowserElement>;
+    defaults?: UICoreDefaults;
     /**
      * Options for lasso, or just a boolean instructing the diagram to attach a lasso with default options, if true. If no value is set for this, the diagram will not have a lasso attached.
      */
@@ -512,17 +518,21 @@ export interface DiagramSaveOptions extends UIExportOptions {
 /**
  * Defines the format of the data returned from a Diagram save
  * @group Diagrams
- * @category IO
+ * @category Input and Output
  */
 export interface DiagramSaveData extends SurfaceSaveData {
 }
 /**
  * A group mapping in a Diagram. Intended for advanced use cases where you need fine-grained controls over groups, and the config options available in `cells` are not granular enough.
+ * @group Diagrams
+ * @category Options
  */
 export interface DiagramGroupMapping extends Omit<GroupMapping<BrowserElement>, "template" | "ignore" | "templateId"> {
 }
 /**
  * A node mapping in a Diagram. Intended for advanced use cases where you need fine-grained controls over nodes, and the config options available in `cells` are not granular enough.
+ * @group Diagrams
+ * @category Options
  */
 export interface DiagramNodeMapping extends Omit<NodeMapping<BrowserElement>, "template" | "ignore" | "templateId"> {
 }

package/types/browser-ui/surface-renderer/diagrams/diagram-link.d.ts

@@ -3,6 +3,7 @@ import { Diagram } from "./diagram";
 import { DiagramCell } from "./diagram-cell";
 /**
  * A link in a diagram.
+ * @group Diagrams
  */
 export declare class DiagramLink {
     private diagram;
@@ -13,6 +14,7 @@ export declare class DiagramLink {
      */
     $destroyed: boolean;
     get id(): string;
+    get connection(): import("../../..").Connection<import("../..").BrowserElement>;
     constructor(diagram: Diagram, edge: Edge);
     /**
      * Update the link's backing data.

package/types/browser-ui/surface-renderer/diagrams/diagram-tools.d.ts

@@ -5,10 +5,14 @@ import { ResizingToolsPlugin, ResizingToolsPluginOptions } from "../plugins";
 import { Surface } from "../surface";
 /**
  * The default size for a button in the diagram tools.
+ * @group Plugins
+ * @category Diagram Tools
  */
 export declare const DEFAULT_DIAGRAM_TOOLS_BUTTON_SIZE = 15;
 /**
  * Options for the diagram tools plugin
+ * @group Plugins
+ * @category Diagram Tools
  */
 export interface DiagramToolsPluginOptions extends ResizingToolsPluginOptions {
     /**

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

@@ -54,7 +54,10 @@ export declare class Diagram {
      * @internal
      */
     private _getShapeDefinition;
-    $destroy(): void;
+    /**
+     * Cleanup the diagram and release any DOM elements.
+     */
+    destroy(): void;
     private _resolveId;
     private _resolveCell;
     /**

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

@@ -12,13 +12,15 @@ export * from './util';
 export * from './mediator';
 /**
  * Options for a diagram export component.
+ * @group Diagrams
+ * @category Input and Output
  */
 export interface DiagramExportComponentOptions extends SvgExportComponentOptions {
 }
 /**
  * Simple component offering buttons for export of SVG, PNG or JPG from a UI that has an SVG container
- * @group Components
- * @category Export Controls
+ * @group Diagrams
+ * @category Input and Output
  */
 export declare class DiagramExportComponent extends SvgExportComponent {
     constructor(container: BrowserElement, diagram: Diagram, options?: DiagramExportComponentOptions);

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

@@ -3,6 +3,8 @@ import { ShapeType } from "../../shape-library";
 import { BrowserElement } from "../../util";
 /**
  * Defines an object that can decide at runtime whether a given shape should offer various actions in its shape editing tools. Each method in this interface is optional, and does not override any diagram-wide settings for the specific operation.  Also, the mediator will not be invoked if a diagram is not editable.
+ * @group Diagrams
+ * @category Options
  */
 export interface DiagramActionMediator {
     /**
@@ -54,6 +56,18 @@ export interface DiagramActionMediator {
      * @param el
      */
     canDrop?: (vertex: Node | Group, targetVertex?: Node | Group, isOnCanvas?: boolean) => boolean;
+    /**
+     * 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.
+     */
     canCollapse?: (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.
+     */
     canExpand?: (group: Group, currentSize: Size) => boolean | ObjectData;
 }

package/types/browser-ui/surface-renderer/plugins/controls/controls-plugin.d.ts

@@ -4,6 +4,8 @@ import { BrowserElement } from "../../../util";
 import { BrowserUI } from "../../../browser-visuallyjs-instance";
 /**
  * Options for the controls plugin.
+ * @group Plugins
+ * @category Controls
  */
 export interface ControlsPluginOptions extends ControlsComponentOptions {
     /**

package/types/browser-ui/surface-renderer/plugins/export-controls/export-controls-plugin.d.ts

@@ -4,6 +4,8 @@ import { BrowserElement } from "../../../util";
 import { BrowserUI } from "../../../browser-visuallyjs-instance";
 /**
  * Options for the export controls plugin
+ * @group Plugins
+ * @category Export Controls
  */
 export interface ExportControlsPluginOptions extends SvgExportComponentOptions {
     /**
@@ -14,7 +16,7 @@ export interface ExportControlsPluginOptions extends SvgExportComponentOptions {
 /**
  * Export Controls component plugin wrapper.
  * @group Plugins
- * @category Controls
+ * @category Export Controls
  */
 export declare class ExportControlsPlugin extends BaseBrowserUIPlugin implements BrowserUIPlugin<ExportControlsPluginOptions> {
     $component: SvgExportComponent;

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

@@ -6,5 +6,6 @@ export * from './drag-groups';
 export * from './snaplines';
 export * from './palette';
 export * from './pan-buttons';
+export * from './list-manager';
 export * from './vertex-drawing';
 export * from './resizing-tools';

package/types/browser-ui/surface-renderer/plugins/list-manager/index.d.ts

@@ -0,0 +1 @@
+export * from "./list-manager-plugin";

package/types/browser-ui/surface-renderer/plugins/list-manager/list-manager-plugin.d.ts

@@ -0,0 +1,34 @@
+import { Surface } from "../../surface";
+import { BaseBrowserUIPlugin, BrowserUIPlugin, BrowserUIPluginOptions } from "../../../plugins";
+import { ConnectionEstablishedParams } from "../../../../ui";
+import { Edge } from "../../../../core";
+/**
+ * Options for the list manager plugin.
+ * @group Plugins
+ * @category List Manager
+ */
+export interface ListManagerPluginOptions extends BrowserUIPluginOptions {
+    /**
+     * Whether to proxy edges that are scrolled out of view, or to hide them. Possible values are "proxy" or "hide". Defaults to "proxy".
+     */
+    behavior?: "hide" | "proxy";
+}
+/**
+ * This is a Surface plugin that manages lists and their connections when scrolling, proxying edges for elements that have been scrolled out of the view onto their container.
+ * @group Plugins
+ * @category List Manager
+ */
+export declare class ListManagerPlugin extends BaseBrowserUIPlugin implements BrowserUIPlugin<ListManagerPluginOptions> {
+    static type: string;
+    id: string;
+    surface: Surface;
+    options: ListManagerPluginOptions;
+    private _rafId;
+    initialise(surface: Surface, options: ListManagerPluginOptions): boolean;
+    private _checkEdge;
+    $edgeRendered(p: ConnectionEstablishedParams): void;
+    $edgeUpdated(edge: Edge): void;
+    private wheelHandler;
+    destroy(): void;
+    reset(): void;
+}

package/types/browser-ui/surface-renderer/plugins/palette/palette-plugin.d.ts

@@ -4,6 +4,8 @@ import { BrowserElement } from "../../../util";
 import { BrowserUI } from "../../../browser-visuallyjs-instance";
 /**
  * Options for the palette plugin
+ * @group Plugins
+ * @category Palette
  */
 export interface PalettePluginOptions extends PaletteOptions<BrowserElement> {
 }

package/types/browser-ui/surface-renderer/plugins/pan-buttons/pan-buttons-plugin.d.ts

@@ -25,8 +25,7 @@ export interface PanButtonsPluginOptions extends BrowserUIPluginOptions {
     panDistance?: number;
 }
 /**
- * This is a Surface plugin that adds buttons around the perimeter of the surface canvas, which users can click on the nudge the pan
- * in a certain direction. Click and hold auto-pans the surface canvas.
+ * This is a Surface plugin that adds buttons around the perimeter of the surface canvas, which users can click on the nudge the pan in a certain direction. Click and hold auto-pans the surface canvas.
  * @group Plugins
  * @category Pan Buttons
  */