@visuallyjs/browser-ui 1.0.2 → 1.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@visuallyjs/browser-ui",
-  "version": "1.0.2",
+  "version": "1.1.0",
   "license": "Commercial",
   "main": "js/visuallyjs.browser-ui.cjs.js",
   "module": "js/visuallyjs.browser-ui.esm.js",

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

@@ -37,7 +37,7 @@ export interface TemplateRenderer<E> {
 export declare class BrowserUIModel extends VisuallyJsModel {
     fetchUrl(options: UrlFetchOptions): void;
     /**
-     * Configures the given element as a Surface, registering it so that it reflects any changes to the underlying data. If there is any data in the model at the time of this call it is rendered; any data subsequently loaded is automatically rendered. You can supply layout arguments to this method (layout type + layout specific parameters), as well as rules for endpoints, paint styles etc.
+     * Configures the given element as a Surface, registering it so that it reflects any changes to the underlying data. If there is any data in the model at the time of this call it is rendered; any data subsequently loaded is automatically rendered. You can supply layout arguments to this method (layout type + layout specific parameters), as well as rules for paint styles etc.
      * @param container The Element to render into
      * @param options Render options
      * @param templateRenderer
@@ -50,7 +50,7 @@ export declare class BrowserUIModel extends VisuallyJsModel {
      */
     renderDiagram(container: BrowserElement, options?: DiagramOptions): Diagram;
     /**
-     * Configures the given element as a {@link Paper}, registering it so that it reflects any changes to the underlying data. If there is any data in the model at the time of this call it is rendered; any data subsequently loaded is automatically rendered. You can supply layout arguments to this method (layout type + layout specific parameters), as well as rules for endpoints, paint styles etc.
+     * Configures the given element as a {@link Paper}, registering it so that it reflects any changes to the underlying data. If there is any data in the model at the time of this call it is rendered; any data subsequently loaded is automatically rendered. You can supply layout arguments to this method (layout type + layout specific parameters), as well as rules for paint styles etc.
      * @param container The Element to render into
      * @param options Render options
      * @param defaults
@@ -67,10 +67,7 @@ export declare function newInstance(options?: ModelOptions): BrowserUIModel;
 /**
  * This method is not intended to be used by a library user - you should use the `render` method on the model instance instead.
  *
- * Configures the given element as a Surface, registering it so that it reflects any changes to the underlying data. If
- * there is any data in the model at the time of this call it is rendered; any data subsequently loaded is automatically
- * rendered. You can supply layout arguments to this method (layout type + layout specific parameters), as well as UI rules for
- * endpoints, paint styles etc.
+ * Configures the given element as a Surface, registering it so that it reflects any changes to the underlying data. If there is any data in the model at the time of this call it is rendered; any data subsequently loaded is automatically rendered. You can supply layout arguments to this method (layout type + layout specific parameters), as well as UI rules for paint styles etc.
  * @param model The model to render
  * @param container The Element to render into
  * @param templateRenderer Template renderer to use - abstracts out the default VisuallyJs template renderer vs Angular/React/Vue etc
@@ -84,7 +81,7 @@ export declare function renderSurface(model: BrowserUIModel, container: BrowserE
  * Configures the given element as a Paper, registering it so that it reflects any changes to the underlying data. If
  * there is any data in the model at the time of this call it is rendered; any data subsequently loaded is automatically
  * rendered. You can supply layout arguments to this method (layout type + layout specific parameters), as well as UI rules for
- * endpoints, paint styles etc.
+ * paint styles etc.
  * @param model The model to render
  * @param container The Element to render into
  * @param templateRenderer Template renderer to use - abstracts out the default VisuallyJs template renderer vs Angular/React/Vue etc

package/types/browser-ui/browser-util.d.ts

@@ -218,6 +218,7 @@ export declare function isTextNode(o: any): boolean;
 export declare function attWithValue(att: string, value: any): string;
 /**
  * Returns whether or not the current user prefers dark mode.
+ * @internal
  */
 export declare function prefersDarkMode(): boolean;
 /**

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

@@ -8,6 +8,8 @@ import { ShapeLibrary } from "./shape-library";
 import { BrowserUIClipboard } from "./copy-paste";
 /**
  * An event that the BrowserUI renderer may fire.
+ * @group Events
+ * @category UI Events
  */
 export type BrowserUIEvent = typeof EVENT_EDGE_MOUSEUP | typeof EVENT_EDGE_MOUSEDOWN | typeof EVENT_VERTEX_CLICK | typeof EVENT_VERTEX_DBLCLICK | typeof EVENT_EDGE_CONTEXTMENU | typeof EVENT_EDGE_CLICK | typeof EVENT_EDGE_DBLCLICK | typeof EVENT_VERTEX_DBLTAP | typeof EVENT_VERTEX_TAP | typeof EVENT_VERTEX_MOUSEOVER | typeof EVENT_VERTEX_MOUSEOUT | typeof EVENT_VERTEX_MOUSEMOVE | typeof EVENT_VERTEX_MOUSEDOWN | typeof EVENT_VERTEX_MOUSEUP | typeof EVENT_VERTEX_CONTEXTMENU | typeof EVENT_VERTEX_MOUSEOVER | typeof EVENT_EDGE_MOUSEOVER | typeof EVENT_EDGE_MOUSEOUT | typeof EVENT_GROUP_MOVE;
 /**
@@ -17,7 +19,6 @@ export type BrowserUIEvent = typeof EVENT_EDGE_MOUSEUP | typeof EVENT_EDGE_MOUSE
  *
  */
 export declare abstract class BrowserUI<EVT = any> extends UICore<BrowserElement, EVT | BrowserUIEvent> {
-    model: VisuallyJsModel;
     protected $suspendRendering: boolean;
     /**
      * Clipboard for copy/paste of data.
@@ -80,6 +81,12 @@ export declare abstract class BrowserUI<EVT = any> extends UICore<BrowserElement
      * @internal
      */
     private _setupShapeDefs;
+    /**
+     * Iterates through the shape library and registers any shapes that define 'members'
+     * as group templates in the model.
+     * @private
+     */
+    private _registerGroupTemplates;
     /**
      * Fire an event for an overlay, and for its related component.
      * @internal
@@ -258,7 +265,7 @@ export declare abstract class BrowserUI<EVT = any> extends UICore<BrowserElement
      * - refreshElement method of Viewport
      *
      */
-    $getElementPositionInUIRelativeToCanvasOrigin(el: BrowserElement, knownElementSize?: Size): PointXY;
+    $getElementPositionInUIRelativeToCanvasOrigin(el: ViewportElement<BrowserElement>, knownElementSize: Size): PointXY;
     $setElementSizeInUI(el: BrowserElement, width: number, height: number): void;
     $setElementWidth(el: BrowserElement, width: number): void;
     $setElementHeight(el: BrowserElement, height: number): void;
@@ -478,7 +485,7 @@ export declare abstract class BrowserUI<EVT = any> extends UICore<BrowserElement
      */
     setContainer(newContainer: BrowserElement): void;
     /**
-     * Clears all endpoints and connections and managed elements from the instance of the UI. Does not also clear out
+     * Clears all connections and managed elements from the instance of the UI. Does not also clear out
      * event listeners, selectors, or connection types - for that, use `destroy()`.
      */
     reset(): void;
@@ -711,7 +718,7 @@ export declare abstract class BrowserUI<EVT = any> extends UICore<BrowserElement
      */
     $setConnectionVisible(c: Connection<BrowserElement>, v: boolean): void;
     /**
-     * Manage an element.  Adds the element to the viewport and sets up tracking for endpoints/connections for the element, as well as enabling dragging for the element. This method is called internally by various methods of the UI, such as `connect`, `addEndpoint`, `makeSource` and `makeTarget`, so if you use those methods to setup your UI then you may not need to call this. However, if you use the `addSourceSelector` and `addTargetSelector` methods to configure your UI then you will need to register elements using this method, or they will not be draggable.
+     * Manage an element.  Adds the element to the viewport and sets up tracking for connections for the element, as well as enabling dragging for the element. This method is called internally by various methods of the UI, such as `connect`, `addEndpoint`, `makeSource` and `makeTarget`, so if you use those methods to setup your UI then you may not need to call this. However, if you use the `addSourceSelector` and `addTargetSelector` methods to configure your UI then you will need to register elements using this method, or they will not be draggable.
      * @param element - Element to manage. This method does not accept a DOM element ID as argument. If you wish to manage elements via their DOM element ID, you should use `manageAll` and pass in an appropriate CSS selector that represents your element, eg `#myElementId`.
      * @param modelObject
      * @param position
@@ -827,8 +834,7 @@ export declare abstract class BrowserUI<EVT = any> extends UICore<BrowserElement
      */
     toBack(v: string | Vertex | BrowserElement, alsoSendAncestorsToBack?: boolean): void;
     /**
-     * Brings the specified element or vertex to the front within its parent container.
-     * Optionally, this method can also ensure all ancestor elements are brought to the front.
+     * Brings the specified element or vertex to the front within its parent container. Optionally, this method can also ensure all ancestor elements are brought to the front.
      * @param {string | Vertex | BrowserElement} v - The element or vertex to be brought to the front. This can be a string identifier, a `Vertex` object, or a `BrowserElement`.
      * @param {boolean} [alsoBringAncestorsToFront=false] - Indicates whether the ancestors of the specified element should also be brought to the front. Defaults to `false`.
      * @return {void} This method does not return a value.

package/types/browser-ui/components/controls/css-classes.d.ts

@@ -2,72 +2,96 @@
  * Assigned to the Pan mode button
  * @cssClass
  * @context controls
+ * @group Components
+ * @category Controls
  */
 export declare const CLASS_CONTROLS_PAN_MODE = "vjs-pan-mode";
 /**
  * Assigned to the Zoom to fit button
  * @cssClass
  * @context controls
+ * @group Components
+ * @category Controls
  */
 export declare const CLASS_CONTROLS_ZOOM_TO_FIT = "vjs-zoom-to-fit";
 /**
  * Assigned to the Zoom in button
  * @cssClass
  * @context controls
+ * @group Components
+ * @category Controls
  */
 export declare const CLASS_CONTROLS_ZOOM_IN = "vjs-zoom-in";
 /**
  * Assigned to the Zoom out button
  * @cssClass
  * @context controls
+ * @group Components
+ * @category Controls
  */
 export declare const CLASS_CONTROLS_ZOOM_OUT = "vjs-zoom-out";
 /**
  * Assigned to the Select mode button
  * @cssClass
  * @context controls
+ * @group Components
+ * @category Controls
  */
 export declare const CLASS_CONTROLS_SELECT_MODE = "vjs-select-mode";
 /**
  * Assigned to the Undo button
  * @cssClass
  * @context controls
+ * @group Components
+ * @category Controls
  */
 export declare const CLASS_CONTROLS_UNDO = "vjs-undo";
 /**
  * Assigned to the Redo button
  * @cssClass
  * @context controls
+ * @group Components
+ * @category Controls
  */
 export declare const CLASS_CONTROLS_REDO = "vjs-redo";
 /**
  * Assigned to the Clear dataset button
  * @cssClass
  * @context controls
+ * @group Components
+ * @category Controls
  */
 export declare const CLASS_CONTROLS_CLEAR = "vjs-clear-dataset";
 /**
  * Assigned to either the pan/select mode button, when that mode is active.
  * @cssClass
  * @context controls
+ * @group Components
+ * @category Controls
  */
 export declare const CLASS_SELECTED_MODE = "vjs-selected-mode";
 /**
  * This class is written to the container element for a controls component.
  * @cssClass
  * @context controls
+ * @group Components
+ * @category Controls
  */
 export declare const CLASS_CONTROLS = "vjs-controls";
 /**
  * This class is written to the container element for an export controls component.
  * @cssClass
  * @context controls
+ * @group Components
+ * @category Controls
  */
 export declare const CLASS_EXPORT_CONTROLS = "vjs-export-controls";
 /**
  * Assigned to the reset selection button
  * @cssClass
  * @context controls
+ * @group Components
+ * @category Controls
  */
 export declare const CLASS_CONTROLS_RESET_SELECTION = "vjs-controls-reset-selection";
 /**

package/types/browser-ui/components/inspector/color-picker-tag.d.ts

@@ -3,18 +3,24 @@ import { VanillaInspector } from "./vanilla-inspector";
  * Assigned to the root element of a color picker
  * @cssClass
  * @context color-picker
+ * @group Components
+ * @category Inspector
  */
 export declare const CLASS_COLOR_PICKER = "vjs-color-picker";
 /**
  * Assigned to the element of a color picker that contains swatches
  * @cssClass
  * @context color-picker
+ * @group Components
+ * @category Inspector
  */
 export declare const CLASS_COLOR_PICKER_SWATCHES = "vjs-color-picker-swatches";
 /**
  * Assigned to each swatch element in a color picker
  * @cssClass
  * @context color-picker
+ * @group Components
+ * @category Inspector
  */
 export declare const CLASS_COLOR_PICKER_SWATCH = "vjs-color-picker-swatch";
 /**

package/types/browser-ui/components/palette/palette.d.ts

@@ -5,6 +5,7 @@ import { BrowserUI } from "../../browser-visuallyjs-instance";
 /**
  * Default data generator for palettes. Extract `data-vjs-***` attributes from element.
  * @param el
+ * @internal
  */
 export declare function defaultDataGenerator<T = any>(el: BrowserElement): T;
 /**

package/types/browser-ui/connector-editors/editor-base.d.ts

@@ -17,7 +17,6 @@ export declare abstract class EditorBase<ConnectorType extends Connector> implem
     protected currentEdge: Edge;
     private _currentEdgeType;
     private _currentEdgeTypeMapping;
-    $currentEdgeFrame: SVGElement;
     $generatedGeometry: any;
     $hasEdits: boolean;
     private _anchorCandidates;

package/types/browser-ui/connector-editors/util.d.ts

@@ -1,4 +1,3 @@
-import { BrowserElement } from "../util";
 import { BrowserUI } from "../browser-visuallyjs-instance";
 /**
  * @internal
@@ -8,7 +7,6 @@ import { BrowserUI } from "../browser-visuallyjs-instance";
  */
 export declare function $makeCircularHandle(radius: number, clazz: string, atts: Record<string, any>, visible?: boolean): SVGElement;
 export declare function $makeRectangularHandle(width: number, height: number, rx: number, ry: number, clazz: string, atts: Record<string, any>, visible?: boolean): SVGElement;
-export declare function $makeSvgAnchorPlaceholder<E extends HTMLElement>(ui: BrowserUI, parent: BrowserElement, x: number, y: number, width: number, height: number, clazz: string, visible?: boolean): E;
 /**
  * Make a circular svg handle, appends it to the tools layer for the given surface, then returns the element.
  * @param ui

package/types/browser-ui/connector-editors-bezier/css-constants.d.ts

@@ -22,18 +22,6 @@ export declare const CLASS_BEZIER_HANDLE_CONTROL_POINT_1 = "vjs-bezier-handle-co
  * @category Path Editors
  */
 export declare const CLASS_BEZIER_HANDLE_CONTROL_POINT_2 = "vjs-bezier-handle-control-point-2";
-/**
- * @internal
- */
-export declare const CLASS_BEZIER_SECONDARY_HANDLE = "vjs-bezier-handle-secondary";
-/**
- * @internal
- */
-export declare const CLASS_BEZIER_SECONDARY_SOURCE_HANDLE = "vjs-bezier-handle-secondary-source";
-/**
- * @internal
- */
-export declare const CLASS_BEZIER_SECONDARY_TARGET_HANDLE = "vjs-bezier-handle-secondary-target";
 /**
  * CSS class assigned to the guidelines linking the anchor points with the control point markers in the bezier edge editor.
  * @group Edges

package/types/browser-ui/constants.d.ts

@@ -10,12 +10,14 @@ export declare const ATTRIBUTE_CONTAINER = "data-vjs-container";
 export declare const ATTRIBUTE_GROUP_CONTENT = "data-vjs-group-content";
 /**
  * Written onto the part of a group that represents its expanded content, when the group has declared a separate collapsedTemplate.
- * @internal.
+ * @group Nodes and Groups
+ * @category DOM Attributes
  */
 export declare const ATTRIBUTE_GROUP_EXPANDED_CONTENT = "data-vjs-expanded-content";
 /**
  * Written onto the part of a group that represents its collapsed content, when the group has declared a separate collapsedTemplate.
- * @internal.
+ * @group Nodes and Groups
+ * @category DOM Attributes
  */
 export declare const ATTRIBUTE_GROUP_COLLAPSED_CONTENT = "data-vjs-collapsed-content";
 /**
@@ -37,10 +39,6 @@ export declare const ATTRIBUTE_VJS_SCOPE = "data-vjs-scope";
  * @category DOM Attributes
  */
 export declare const ATTRIBUTE_IS_GROUP = "data-vjs-is-group";
-/**
- * @internal
- */
-export declare const ENDPOINT = "endpoint";
 /**
  * @internal
  */
@@ -61,10 +59,6 @@ export declare const PROPERTY_POSITION = "position";
  * @internal
  */
 export declare const SELECTOR_CONNECTOR: string;
-/**
- * @internal
- */
-export declare const SELECTOR_GROUP: string;
 /**
  * @internal
  */

package/types/browser-ui/css-constants.d.ts

@@ -368,69 +368,118 @@ export declare const CLASS_PALETTE_SELECTED_ELEMENT = "vjs-palette-selected-elem
  * Assigned to the surface canvas when a user has tapped an element in a palette in tap mode. this class can be used to show the user that a vertex can be dropped via click or drawn on the canvas
  * @cssClass
  * @context palette
+ * @group Components
+ * @category Shape Palette
  */
 export declare const CLASS_PALETTE_TAP_MODE_ACTIVE = "vjs-palette-tap-mode-active";
 /**
- * Assigned to an element when it is being dragged from a palette
+ * Assigned to possible drop targets when an element is being dragged from the Palette
  * @cssClass
  * @context palette
+ * @group Components
+ * @category Shape Palette
  */
-export declare const CLASS_PALETTE_ELEMENT_CURRENT = "vjs-palette-current";
+export declare const CLASS_PALETTE_DRAG_ACTIVE = "vjs-palette-drag-active";
 /**
- * Assigned to a shape in a ShapePalette that matches the type of the model's currently selected shape.
+ * Assigned to a drop target when an element that is being dragged from the Palette is hovering over it.
  * @cssClass
  * @context palette
+ * @group Components
+ * @category Shape Palette
  */
-export declare const CLASS_PALETTE_CURRENT_SHAPE_TYPE = "vjs-palette-current-shape-type";
+export declare const CLASS_PALETTE_DRAG_HOVER = "vjs-palette-drag-hover";
+/**
+ * Assigned to a vertex or the canvas when an element that is being dragged from the palette is hovering over it but drop is not allowed.
+ * @cssClass
+ * @context palette,nodes-and-groups
+ * @group Components
+ * @category Surface
+ */
+export declare const CLASS_PALETTE_DRAG_HOVER_CANNOT_DROP = "vjs-palette-drag-hover-cannot-drop";
 /**
- * Assigned to all elements that could be the target for some element that is being dragged from a palette
+ * Assigned to an element when it is being dragged from a palette
  * @cssClass
  * @context palette
+ * @group Components
+ * @category Shape Palette
  */
+export declare const CLASS_PALETTE_ELEMENT_CURRENT = "vjs-palette-current";
 /**
- * Assigned to the current drop target for some element that is being dragged from a palette. This may be the surface's canvas itself, or it may be a group.
+ * Assigned to a shape in a ShapePalette that matches the type of the model's currently selected shape.
  * @cssClass
  * @context palette
+ * @group Components
+ * @category Shape Palette
  */
+export declare const CLASS_PALETTE_CURRENT_SHAPE_TYPE = "vjs-palette-current-shape-type";
 /**
- * Assigned to a vertex or the canvas when an element (either from the palette or having been dragged on the canvas) is hovering over it but drop is not allowed.
+ * Assigned to a vertex or the canvas when an element that is being dragged on the canvas is hovering over it but drop is not allowed.
  * @cssClass
- * @context element-dragging,palette,nodes-and-groups
+ * @context element-dragging,nodes-and-groups
+ * @group Components
+ * @category Surface
  */
 export declare const CLASS_DRAG_HOVER_CANNOT_DROP = "vjs-drag-hover-cannot-drop";
 /**
  * Assigned to a group element when one of its children is being dragged. This can be useful to help manage z-index: we recommend using this class to set a z-index for the drag parent group above that of the other groups, which will ensure that the element you are dragging will appear on top of other groups.
  * @cssClass
  * @context element-dragging
+ * @group Components
+ * @category Surface
  */
 export declare const CLASS_DRAG_ORIGINAL_GROUP = "vjs-drag-original-group";
 /**
  * Assigned to any element that is a candidate drop target for an edge that is being dragged
  * @cssClass
  * @context element-dragging,palette,nodes-and-groups
+ * @group Components
+ * @category Surface
  */
 export declare const CLASS_DRAG_ACTIVE = "vjs-drag-active";
 /**
  * Assigned to any element that is the current drop target for an edge that is being dragged
  * @cssClass
  * @context element-dragging,palette,nodes-and-groups
+ * @group Components
+ * @category Surface
  */
 export declare const CLASS_DRAG_HOVER = "vjs-drag-hover";
 /**
  * Assigned to the source element of an edge when the mouse is hovering over the edge
  * @cssClass
  * @context edges, nodes-and-groups
+ * @group Components
+ * @category Surface
  */
 export declare const CLASS_SOURCE_HOVER = "vjs-source-hover";
 /**
  * Assigned to the target element of an edge when the mouse is hovering over the edge
  * @cssClass
  * @context edges, nodes-and-groups
+ * @group Components
+ * @category Surface
  */
 export declare const CLASS_TARGET_HOVER = "vjs-target-hover";
 /**
  * Assigned to the element representing an overlay when the mouse is hovering over the associated edge, and to the edge's connector element.
  * @cssClass
  * @context edges, overlays
+ * @group Components
+ * @category Surface
  */
 export declare const CLASS_HOVER = "vjs-hover";
+/**
+ * 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
+ * @cssClass
+ */
+export declare const CLASS_TRANSIENT_VERTEX = "vjs-transient-vertex";
+/**
+ * Added to the document body when in click mode for edges, and the user has clicked/tapped a source.
+ * @group Edges
+ * @category CSS Classes
+ * @cssClass
+ * @context click-to-add-edges
+ */
+export declare const CLASS_EDGE_CLICK_ENTRY = "vjs-edge-click-entry-method";

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

@@ -77,6 +77,8 @@ export type OnVertexAddedCallback = (p: {
 }) => any;
 /**
  * Defines a function you can call from a vertex added callback to run some model updates that will be included in the same transaction as the one that just added the new vertex. You pass a function in to this method, which contains the model updates you wish to make. Your update function will be passed the UI, its model, and any `context` you provided as a second argument when you called doModelUpdate inside the vertex added callback.
+ * @group Components
+ * @category Palette
  */
 export type ModelUpdateFunction = (updateFunction: (ui: BrowserUI, model: VisuallyJsModel, context?: any) => any) => void;
 /**
@@ -99,9 +101,7 @@ export type DropTargetInfo = {
     size: Size;
 };
 /**
- * Definition of a drag group membership - either just the id of a drag group, or the id of a drag group and whether or not
- * this element plays an `active` role in the drag group.
- *
+ * Definition of a drag group membership - either just the id of a drag group, or the id of a drag group and whether or not this element plays an `active` role in the drag group.
  * @group Components
  * @category Element dragging
  */
@@ -111,10 +111,12 @@ export type DragGroupSpec = string | {
 };
 /**
  * Models some discrete object whose class, in the UI, can be manipulated. This can be an edge/vertex, an element in the UI, or the ID of some edge/vertex.
+ * @internal
  */
 export type SupportsClassManipulationElement = Edge | Vertex | BrowserElement | string;
 /**
  * List of object whose css class, in the UI, can be manipulated. This means either some object that itself satisfies {@link SupportsClassManipulationElement}, or an array of these, or a NodeList of DOM elements.
+ * @internal
  */
 export type SupportsClassManipulation = SupportsClassManipulationElement | ArrayLike<SupportsClassManipulationElement> | NodeListOf<any>;
 /**
@@ -175,7 +177,7 @@ export interface BrowserUIOptions<O extends BrowserUIDefaults = BrowserUIDefault
      */
     useSvgContainer?: boolean;
     /**
-     * Optional Selection - or generator - to use as the dataset to render. If you supply this the Surface will render the contents of the selection, or the list of vertices that the given function returns. This is useful for such things as inspector windows for parts of your UI.
+     * Optional Selection - or generator - to use as the dataset to render. If you supply this the UI will render the contents of the selection, or the list of vertices that the given function returns. This is useful for such things as inspector windows for parts of your UI.
      */
     selection?: VisuallyJsSelection | Function;
     /**
@@ -256,7 +258,7 @@ export interface ShapesOptions {
  * @group Components
  * @category Defaults
  */
-export interface BrowserUIDefaults extends UICoreDefaults<BrowserElement> {
+export interface BrowserUIDefaults extends UICoreDefaults {
     /**
      * Whether or not elements should be draggable. Default value is `true`.
      */
@@ -266,7 +268,7 @@ export interface BrowserUIDefaults extends UICoreDefaults<BrowserElement> {
      */
     resizeObserver?: boolean;
     /**
-     * Defaults to false. When true, VisuallyJs tracks mouseover/mouseout/mouseenter/mouseexit events for overlays, endpoints, elements and connections. Most of the reasoning for having this ability was related to the initial canvas renderer, and with SVG/CSS this functionality is, for the most part, not needed. But you can switch it on if you need to.
+     * Defaults to false. When true, VisuallyJs tracks mouseover/mouseout/mouseenter/mouseexit events for overlays, elements and connections. Most of the reasoning for having this ability was related to the initial canvas renderer, and with SVG/CSS this functionality is, for the most part, not needed. But you can switch it on if you need to.
      */
     hoverEvents?: boolean;
     useSvgContainer?: boolean;
@@ -358,14 +360,20 @@ export interface ImageBackground extends Background {
 }
 /**
  * Style for a font - oblique, italic or normal.
+ * @group UI
+ * @category Definitions
  */
 export type FontStyle = "normal" | "oblique" | "italic";
 /**
  * Font weight to use (e.g., "normal", "bold", "100", "300").
+ * @group UI
+ * @category Definitions
  */
 export type FontWeight = string | number;
 /**
  * Specs for a font. The default values depend on the context.
+ * @group UI
+ * @category Definitions
  */
 export interface FontSpec {
     /**
@@ -385,9 +393,16 @@ export interface FontSpec {
      */
     family?: string;
 }
+/**
+ * @internal
+ * @param o
+ */
 export declare function supportsPathEditing(o: any): o is SupportsPathEditing;
 /**
  * Definition of a UI that supports path editing
+ * @group UI
+ * @category Definitions
+ * @internal
  */
 export interface SupportsPathEditing {
     /**
@@ -405,6 +420,8 @@ export interface SupportsPathEditing {
 }
 /**
  * Options for the zoomToExtents method
+ * @group Components
+ * @category Surface
  */
 export interface ZoomToExtentsOptions {
     /**
@@ -432,6 +449,10 @@ export interface ZoomToExtentsOptions {
      */
     doNotFirePanEvent?: boolean;
 }
+/**
+ * Defines a renderer that supports setting pan/zoom/alignment
+ * @internal
+ */
 export interface SupportsViewportManipulation {
     setPan(x: number, y: number, animate?: boolean): void;
     setZoom(zoom: number, animate?: boolean): number;

package/types/browser-ui/dialogs/binder.d.ts

@@ -1,14 +1,3 @@
-/**
- * Searches children of the given element to find elements that have a `vjs-att` set. For each of those, if the `checkValidity` method is defined,
- * this method executes it. If it returns false, this method returns false. If no elements have `checkValidity` or no `checkValidity()` call
- * returns false, this method returns true.
- *
- * `checkValidity` is a method defined in input elements and textareas, when a `pattern` is defined on the element (or if it is marked
- * required and has no valuer set)
- * @param el
- * @internal
- */
-export declare function checkValidity(el: HTMLElement): boolean;
 /**
  * Extracts a dataset from the given element by finding child elements that have a `vjs-att` attribute set, and extracting from those elements
  * their value. When the same `vjs-att` value appears more than once as a child of `el`, the values are stored in an array for that field.