@visuallyjs/browser-ui 1.1.3 → 1.2.0

package/package.json

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

package/types/browser-ui/auto-pan-handler.d.ts

@@ -0,0 +1,36 @@
+import { PointXY } from "../core";
+import { SupportsElementDragging } from "../ui";
+import { BrowserElement } from "./util";
+export interface AutoPanOptions {
+    autoPanDelta?: number;
+    autoPanRepeat?: number;
+    onPan: (deltas: PointXY) => void;
+    shouldHandle: () => boolean;
+}
+/**
+ * Manages auto pan for a component that supports dragging of elements (not just vertex elements, any elements, such as those used to manage edge dragging or lasso etc).
+ * @internal
+ */
+export declare class AutoPanHandler {
+    private draggableInstance;
+    private options;
+    private readonly _observer;
+    _canvasShift: PointXY;
+    private _lastPanDirection;
+    private _isPanRepeatActive;
+    private _rootBounds;
+    constructor(draggableInstance: SupportsElementDragging<BrowserElement>, options: AutoPanOptions);
+    /**
+     * Called by ElementDragHandler2 to continuously update the auto-pan logic during a drag.
+     * @param boundingClientRect The bounding client rect of the dragged element.
+     */
+    updateDragElementPosition(boundingClientRect: DOMRect): void;
+    $updateRootBounds(): void;
+    private _isElementIntersectingRoot;
+    private _updatePanDirectionAndStartRepeat;
+    private _stopPanRepeatInternal;
+    reset(): void;
+    observe(el: BrowserElement): void;
+    unobserve(el: BrowserElement): void;
+    disconnect(): void;
+}

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

@@ -1,6 +1,6 @@
 import { EVENT_EDGE_CLICK, EVENT_EDGE_CONTEXTMENU, EVENT_EDGE_DBLCLICK, EVENT_EDGE_MOUSEDOWN, EVENT_EDGE_MOUSEOUT, EVENT_EDGE_MOUSEOVER, EVENT_EDGE_MOUSEUP, EVENT_VERTEX_CLICK, EVENT_VERTEX_TAP, EVENT_VERTEX_DBLTAP, EVENT_VERTEX_MOUSEOVER, EVENT_VERTEX_MOUSEOUT, EVENT_VERTEX_MOUSEMOVE, EVENT_VERTEX_MOUSEUP, EVENT_VERTEX_MOUSEDOWN, EVENT_VERTEX_CONTEXTMENU, EVENT_VERTEX_DBLCLICK, Overlay, OverlayPaintParams, LabelOverlay, Connection, ConnectorPath, UICore, TypeDescriptorBase, VertexMapping, GroupMapping, PortMapping, NodeMapping, DragHandler2, ViewportElement, OverlaySpec, Connector, PaintStyle, ZoomToFitOptions, ZoomToFitIfNecessaryOptions, ZoomToElementsOptions, PropertyMapper, EdgePropertyMappings, ViewportGroupElement, ViewportNodeElement } from '../ui';
 import { VisuallyJSDOMElement } from './element-facade';
-import { VisuallyJsModel, Base, Edge, Group, Node, ObjectData, Port, Vertex, VisuallyJsSelection, DataSource, EVENT_GROUP_MOVE, Grid, GroupRemovedParams, NodeRemovedParams, PointXY, RectangleXY, Size, CustomTagOptions, AbstractLayoutAdapter, LayoutResultSet } from "../core";
+import { VisuallyJsModel, Base, Edge, Group, Node, ObjectData, Port, Vertex, VisuallyJsSelection, DataSource, EVENT_GROUP_MOVE, Grid, GroupRemovedParams, NodeRemovedParams, PointXY, RectangleXY, Size, CustomTagOptions, AbstractLayoutAdapter, LayoutResultSet, EVENT_EDGE_DRAG_START, EVENT_EDGE_DRAG, EVENT_EDGE_DRAG_END, EVENT_EDGE_DRAG_ABORT } from "../core";
 import { TemplateRenderer } from "./browser-ui";
 import { Background, BrowserUIDefaults, BrowserUIOptions, ElementModelInfo, SupportsClassManipulation, SupportsClassManipulationElement } from "./definitions";
 import { BrowserElement } from './util';
@@ -11,7 +11,7 @@ import { BrowserUIClipboard } from "./copy-paste";
  * @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;
+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 | typeof EVENT_EDGE_DRAG_START | typeof EVENT_EDGE_DRAG | typeof EVENT_EDGE_DRAG_END | typeof EVENT_EDGE_DRAG_ABORT;
 /**
  * Subclass of UICore that renders to the DOM in a browser, and supports dragging of elements/connections.
  * @group Components
@@ -276,6 +276,7 @@ export declare abstract class BrowserUI<EVT = any> extends UICore<BrowserElement
      */
     $getSize(el: BrowserElement): Size;
     $setElementRotation(el: BrowserElement, r: number): void;
+    $setVisibleElementRotation(vel: ViewportElement<BrowserElement>, r: number): void;
     /**
      * Gets the position of the given element relative to its offset parent,
      * in canvas coordinates, ie. not scaled per the current zoom. Currently
@@ -738,6 +739,11 @@ export declare abstract class BrowserUI<EVT = any> extends UICore<BrowserElement
      */
     $getModelInfoForDragElement(el: BrowserElement, asSource: boolean, createMissingPorts: boolean): ElementModelInfo;
     $isElement(obj: any): obj is BrowserElement;
+    /**
+     * Get the model object + DOM element on which the given event occurred.
+     * @param e
+     */
+    getElementFromEvent(e: MouseEvent): ViewportElement<BrowserElement> | null;
     getModelObjectFromElement(el: BrowserElement, searchAncestors: boolean, createMissingPorts: boolean): {
         obj: Node | Group | Port | Edge;
         el: VisuallyJSDOMElement;

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

@@ -38,9 +38,12 @@ export declare abstract class EditorBase<ConnectorType extends Connector> implem
     private _anchorVertex;
     private _dragHandlers;
     private _anchorDragContext;
+    /**
+     * Subclasses must implement.
+     * @param args
+     */
     abstract $repaint(args?: any): void;
     isBusy(): boolean;
-    private _repaint;
     /**
      * @internal
      */

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

@@ -261,6 +261,14 @@ export declare const CLASS_MINIVIEW_CANVAS = "vjs-miniview-canvas";
  * @context miniview
  */
 export declare const CLASS_MINIVIEW_PANNER = "vjs-miniview-panner";
+/**
+ * Assigned by the Miniview to the DOM element that provides the visual cue showing the lasso
+ * @group Plugins
+ * @category Miniview
+ * @cssClass
+ * @context miniview
+ */
+export declare const CLASS_MINIVIEW_LASSO = "vjs-miniview-lasso";
 /**
  * Assigned by the Miniview to a DOM element representing a node.
  * @group Plugins
@@ -277,6 +285,14 @@ export declare const CLASS_MINIVIEW_ELEMENT = "vjs-miniview-element";
  * @context miniview
  */
 export declare const CLASS_MINIVIEW_GROUP_ELEMENT = "vjs-miniview-group-element";
+/**
+ * Assigned by the Miniview to a DOM element that is in the model's current selection.
+ * @group Plugins
+ * @category Miniview
+ * @cssClass
+ * @context miniview
+ */
+export declare const CLASS_MINIVIEW_SELECTED_ELEMENT = "vjs-miniview-selected";
 /**
  * Assigned by the Miniview to its canvas when the user is panning it.
  * @group Plugins

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

@@ -112,7 +112,7 @@ export declare function _getVertexInfo(surface: Surface, el: BrowserElement, asS
  * @param boundingRect
  * @param e
  */
-export declare function testIntersectingDropTarget(surface: Surface, dropTargets: Array<DropTarget>, boundingRect: RectangleXY, e: MouseEvent): DropTarget;
+export declare function testIntersectingDropTarget(surface: Surface, dropTargets: Array<DropTarget>, boundingRect: RectangleXY, e: MouseEvent, canvasShift: PointXY): DropTarget;
 export declare function _populateTargetZones(surface: Surface, activeFiltering: boolean, focusVertex: Vertex, loopbackAllowed: boolean, payload?: ObjectData, scope?: string): {
     dropTargets: Array<DropTarget>;
     disabledDropTargets: Array<VisuallyJSDOMElement>;

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

@@ -66,6 +66,7 @@ export declare class EdgeInputHandler extends EdgeHandlerBase {
     private _dragContext;
     method: EdgeInputMethod;
     private _autoPanObserver;
+    private _canvasShift;
     constructor(options: EdgeInputHandlerOptions);
     private _cleanup;
     private _addTransientEdge;
@@ -78,6 +79,7 @@ export declare class EdgeInputHandler extends EdgeHandlerBase {
      */
     private _canStartNewEdgeInput;
     private _startDrag;
+    private _unobservePanRepeat;
     private _finaliseTransientEdge;
     private _stopDrag;
     /**

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

@@ -24,11 +24,11 @@ export declare class EdgeRelocateHandler extends EdgeHandlerBase {
     currentEdge: Edge;
     currentConnection: Connection<BrowserElement>;
     currentIndex: ProxyLocation;
+    private _autoPanObserver;
+    private _canvasShift;
     mouseMoveHandler: (e: MouseEvent) => void;
     mouseUpHandler: (e: MouseEvent) => void;
     documentKeypressHandler: (e: KeyboardEvent) => any;
-    private _canvasShift;
-    private _autoPanObserver;
     currentPosition: PointXY;
     currentPagePosition: PointXY;
     private _hasMoved;

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

@@ -157,6 +157,7 @@ export declare class ElementDragHandler2 {
      */
     private _canDropOnCanvas;
     private _suppressRootElementClasses;
+    private _rotationContext;
     /**
      * List of group targets whose location intersects the drag object's current position. We push a bunch of groups onto this array and sort them by nested depth to find which one should be the current drop target.
      */
@@ -198,11 +199,13 @@ export declare class ElementDragHandler2 {
     private _cleanup;
     private _cleanupGroupTargetHoverState;
     private _findDraggableVertex;
+    private _computeRotationMatrix;
     private _start;
     private _unobservePanRepeat;
     private _addGroupClass;
     private _removeGroupClass;
     private _stop;
+    private _mapToGroupCoords;
     /**
      * For the current drag group, compute a position for each of the elements such that each element is gathered around the focus position. This is used when dropping a vertex on a group: the focus vertex goes where it was dropped, and the rest of the drag group are pulled in around that focus element. The gather operation should try to maintain the original orientation between the focus element and the other members of the group, but obviously we want to pull them right in close in order to drop them as a unit.
      * @param focusPosition
@@ -218,6 +221,14 @@ export declare class ElementDragHandler2 {
     private _revert;
     private _isOriginalGroup;
     private _moveToNewPosition;
+    private _rotateOneElement;
+    private _updateDragContextRotation;
+    /**
+     * return all elements to the rotation specified in the viewport.
+     * @private
+     */
+    private _resetDragContextRotation;
+    private _rotateDelta;
     private _drag;
     private _setRelativePositionAtDown;
     /**
@@ -247,5 +258,6 @@ export declare class ElementDragHandler2 {
     private _sizeElasticGroupFrame;
     private _canDragVertex;
     $addVertexDragFilter(filter: VertexDragFilter<BrowserElement>): void;
+    $destroy(): void;
 }
 export {};

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

@@ -88,8 +88,8 @@ export declare abstract class BaseBrowserUIPlugin {
      */
     $edgeUpdated(edge: Edge): void;
     /**
-     * Invoked when an edge has been rendered
-     * @param edge
+     * Invoked when an edge has been initially rendered. Only fired once for each edge.
+     * @param p
      */
     $edgeRendered(p: ConnectionEstablishedParams): void;
 }

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

@@ -178,7 +178,7 @@ export interface DiagramOptions {
          */
         layerIndex?: number;
         /**
-         * Defaults to true - when an edge is selected, it's bounding box will be highlighted.
+         * When an edge is selected, highlight its bounding box. Defaults to false.
          */
         highlightSelected?: boolean;
         /**

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

@@ -1,6 +1,7 @@
 import { Edge, Vertex, PointXY } from "../../../../core";
 import { Surface } from "../../surface";
 import { SurfaceMode } from "../../definitions";
+import { ViewportGroupElement } from "../../../../ui";
 import { BrowserElement } from "../../../util";
 import { BaseBrowserUIPlugin, BrowserUIPlugin, BrowserUIPluginOptions } from "../../../plugins";
 /**
@@ -54,6 +55,10 @@ export interface LassoPluginOptions extends BrowserUIPluginOptions {
      * @param e
      */
     generateLassoContent?: (origin: PointXY, e: MouseEvent) => BrowserElement;
+    /**
+     * Optional setting for whether lasso inside groups is enabled - it is by default. Setting this to `false` will mean that the user cannot lasso items inside a group. Setting to `"metaKey"` will mean that lasso is supported inside groups if the user is holding the meta key down (ie the Window key, or Cmd on macs).
+     */
+    enableInGroups?: false | true | "metaKey";
 }
 /**
  * A Surface plugin that allows the user to select multiple elements with the mouse.
@@ -72,6 +77,7 @@ export declare class LassoPlugin extends BaseBrowserUIPlugin implements BrowserU
     selectionFilter: (o: Edge | Vertex) => boolean;
     autoExit: boolean;
     lassoSelections: Array<any>;
+    _currentGroup: ViewportGroupElement<BrowserElement>;
     destroy(): void;
     initialise(surface: Surface, options: LassoPluginOptions): boolean;
     reset(): void;

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

@@ -1,9 +1,11 @@
 import { Surface } from "../../surface";
+import { ViewportElement } from "../../../../ui";
 import { BrowserElement } from "../../../util";
 import { PointXY, Size } from "../../../../core";
+import { AutoPanHandler } from "../../../auto-pan-handler";
 export interface LassoOptions {
     canvas: Element;
-    onStart?: (pagePosition: PointXY, canvasPosition: PointXY, shiftKey: boolean, e: MouseEvent) => any;
+    onStart?: (pagePosition: PointXY, canvasPosition: PointXY, shiftKey: boolean, e: MouseEvent, viewportElement: ViewportElement<BrowserElement> | null) => any;
     onEnd?: (visibleOrigin: PointXY, size: Size) => any;
     onSelect?: (pagePosition: PointXY, pageSize: Size, canvasPosition: PointXY, canvasSize: Size, axesPositive: [boolean, boolean], shiftKey: boolean) => any;
     /**
@@ -16,23 +18,36 @@ export interface LassoOptions {
     surface: Surface;
     filter?: ((e: MouseEvent) => boolean) | string;
     cssClass?: string;
-    /** optionally users of the lasso can impose a grid on its movement. used internally by the vertex drawing plugin. */
+    /**
+     * optionally users of the lasso can impose a grid on its movement. used internally by the vertex drawing plugin. */
     mapToGrid?: (p: PointXY) => PointXY;
     /**
      * Optional method that can return an element to inject as the lasso's child.
      * @private
      */
     generateLassoContent?: (origin: PointXY, e: MouseEvent) => BrowserElement;
+    /**
+     * Optional setting for whether lasso inside groups is enabled - it is by default. Setting this to `false` will mean that the user cannot lasso items inside a group. Setting to `"metaKey"` will mean that lasso is supported inside groups if the user is holding the meta key down (ie the Window key, or Cmd on macs).
+     */
+    enableInGroups?: false | true | "metaKey";
+    /**
+     * Defaults to true, meaning the canvas will pan automatically to track the lasso
+     */
+    autoPan?: boolean;
 }
 export declare class Lasso {
     visibleOrigin: PointXY;
     size: Size;
     _generateLassoContent: (origin: PointXY, e: MouseEvent) => BrowserElement;
     el: HTMLElement;
+    _extentTrackerEl: BrowserElement;
     masks: Record<string, HTMLElement>;
     origin: PointXY;
     canvasOrigin: PointXY;
-    onStart: (origin: PointXY, canvasPosition: PointXY, shiftKey: boolean, e: MouseEvent) => any;
+    canvasExtent: PointXY;
+    _canvasShift: PointXY;
+    _autoPanHandler: AutoPanHandler;
+    onStart: (origin: PointXY, canvasPosition: PointXY, shiftKey: boolean, e: MouseEvent, viewportElement: ViewportElement<BrowserElement> | null) => any;
     onEnd: (visibleOrigin: PointXY, size: Size) => any;
     onSelect: (pagePosition: PointXY, pageSize: Size, canvasPosition: PointXY, canvasSize: Size, axesPositive: [boolean, boolean], shiftKey: boolean, lassoContent?: BrowserElement) => any;
     onClick: (p: PointXY, e: MouseEvent) => any;
@@ -51,13 +66,16 @@ export declare class Lasso {
     upEvent: string;
     moveEvent: string;
     enabled: boolean;
+    _enableInGroups: false | true | "metaKey";
     _generatedLassoContent: BrowserElement;
+    _lastPageLocation: PointXY;
     constructor(options: LassoOptions);
     private _prepareFilter;
     private _position;
     private _setVisible;
     private _mapPoint;
     private _downListener;
+    private _repaint;
     private _moveListener;
     private _upListener;
     private _createMasks;

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

@@ -27,14 +27,12 @@ export interface MiniviewPluginOptions extends BrowserUIPluginOptions {
      */
     collapsible?: boolean;
     /**
-     * Optional function to use to derive a type for each rendered node/group. This is written onto
-     * the corresponding element as the value of the `data-vjs-miniview-type` attribute, and can be useful
-     * for styling.
+     * Optional function to use to derive a type for each rendered node/group. This is written onto the corresponding element as the value of the `data-vjs-miniview-type` attribute, and can be useful for styling.
      * @param v
      */
     typeFunction?: (v: Node | Group) => string;
     /**
-     * Optional overide for how sensitive the wheel zoom should be.
+     * Optional override for how sensitive the wheel zoom should be.
      */
     wheelSensitivity?: number;
     /**
@@ -55,14 +53,21 @@ export interface MiniviewPluginOptions extends BrowserUIPluginOptions {
      */
     wheelReverse?: boolean;
     /**
-     * Defaults to true, meaning the miniview actively updates as nodes/groups are dragged on the related surface. If this is set
-     * to false, the miniview only updates after mouseup.
+     * Defaults to true, meaning the miniview actively updates as nodes/groups are dragged on the related surface. If this is set to false, the miniview only updates after mouseup.
      */
     activeTracking?: boolean;
     /**
      * Defaults to true, meaning a click on a node/group in the miniview will cause that node/group to be centered in the related surface.
      */
     clickToCenter?: boolean;
+    /**
+     * Defaults to true - the miniview will display a lasso as the user is using the lasso in the canvas
+     */
+    showLasso?: boolean;
+    /**
+     * Defaults to true - the miniview will add a CSS class to elements whose model object is in the current selection.
+     */
+    trackSelection?: boolean;
 }
 interface MiniviewDOMElement extends VisuallyJSDOMElement {
     vertex: Vertex;
@@ -95,6 +100,7 @@ export declare class MiniviewPlugin extends BaseBrowserUIPlugin implements Brows
     containerElement: BrowserElement;
     canvasElement: BrowserElement;
     pannerElement: BrowserElement;
+    lassoElement: BrowserElement;
     uiBounds: ViewportBounds;
     suspended: boolean;
     _collapsible: boolean;
@@ -117,7 +123,9 @@ export declare class MiniviewPlugin extends BaseBrowserUIPlugin implements Brows
     /**
      * Defaults to true, meaning a click on a node/group in the miniview will cause that node/group to be centered in the related surface.
      */
-    clickToCenter: boolean;
+    _clickToCenter: boolean;
+    _showLasso: boolean;
+    _trackSelection: boolean;
     vertexMap: Record<string, MiniviewDOMElement>;
     enableWheelZoom: boolean;
     eventManager: EventManager;

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

@@ -6,7 +6,7 @@ import { UIPath } from '../ui-path';
 import { FixedElement, FixedElementConstraints } from "../fixed-layer";
 import { SurfaceOptions } from "./surface-render-options";
 import { Base, Node, Group, Edge, Port, Vertex, ObjectData, VisuallyJsSelection, PathOptions, DataSource, NodeRemovedParams, PointXY, RectangleXY, ZoomRange, LayoutResultSet, GroupRemovedParams } from '../../core';
-import { Connection, SupportsElementDragging, DragOptions, Overlay, ViewportBounds, UIExportOptions, ZoomToFitIfNecessaryOptions, ZoomToFitOptions, ZoomToElementsOptions, ViewportNodeElement, ViewportElement, ViewportGroupElement, CenterContentOptions, AlignContentOptions, AlignContentToFaceOptions, CenterContentHorizontallyOptions, CenterContentVerticallyOptions } from "../../ui";
+import { Connection, SupportsElementDragging, DragOptions, Overlay, ViewportBounds, UIExportOptions, ZoomToFitIfNecessaryOptions, ZoomToFitOptions, ZoomToElementsOptions, ViewportNodeElement, ViewportElement, ViewportGroupElement, CenterContentOptions, AlignContentOptions, AlignContentToFaceOptions, CenterContentHorizontallyOptions, CenterContentVerticallyOptions, VertexDragFilter } from "../../ui";
 import { BrowserUI } from "../browser-visuallyjs-instance";
 import { BrowserElement } from "../util";
 import { EdgeInputMethod } from "../edge-input-handler";
@@ -235,15 +235,20 @@ export declare class Surface extends BrowserUI<SurfaceEvents> implements Support
      */
     addDragFilter(filter: (e: MouseEvent) => boolean, exclude?: boolean): void;
     /**
-     * Adds a CSS class filter to the drag handler.
+     * Adds a CSS class name filter to the drag handler - without the `.`.
      * @param clazz Either a single class name, or a comma separated list of classnames, or an array of classnames.
      */
     addDragClassnameFilter(clazz: string | Array<string>): void;
     /**
-     * Adds a CSS3 selector filter to the drag handler. A drag cannot start on an element that matches this selector.
+     * Adds a CSS3 selector filter to the drag handler. A drag cannot start on an element that matches this selector. For more fine-grained control over dragging, see {@link #addVertexDragFilter}.
      * @param selector A valid CSS3 selector.
      */
     addDragSelectorFilter(selector: string): void;
+    /**
+     * Adds a filter function to the drag handler. A drag cannot start if this function returns false. See also {@link #addDragSelectorFilter}
+     * @param f Function that can return false to disallow drag.
+     */
+    addVertexDragFilter(f: VertexDragFilter<BrowserElement>): void;
     /**
      * Removes a CSS class filter from the drag handler.
      * @param clazz Either a single class name, or a comma separated list of classnames, or an array of classnames.

package/types/charts/sankey/sankey.d.ts

@@ -175,7 +175,7 @@ export declare class SankeyChart extends BaseChart {
         csvData?: string;
         dataType?: string;
         jsonData?: VisuallyJsDefaultJSON;
-    }): void;
+    }, onload?: () => any): void;
     hasData(): boolean;
     destroy(): void;
     private _clearVertex;

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

@@ -211,6 +211,34 @@ export declare const EVENT_EDGE_GEOMETRY = "edge:geometry";
  * @category UI
  */
 export declare const EVENT_EDGE_PATH_EDITED = "edge:pathEdited";
+/**
+ * Fired by the UI when the user has started to drag a new edge
+ * @event
+ * @group Events
+ * @category UI
+ */
+export declare const EVENT_EDGE_DRAG_START = "edge:dragStart";
+/**
+ * Fired by the UI when the mouse moves as the user is dragging a new edge
+ * @event
+ * @group Events
+ * @category UI
+ */
+export declare const EVENT_EDGE_DRAG = "edge:drag";
+/**
+ * Fired by the UI when the user has finished dragging a new edge
+ * @event
+ * @group Events
+ * @category UI
+ */
+export declare const EVENT_EDGE_DRAG_END = "edge:dragEnd";
+/**
+ * Fired by the UI when the user has aborted dragging a new edge
+ * @event
+ * @group Events
+ * @category UI
+ */
+export declare const EVENT_EDGE_DRAG_ABORT = "edge:dragAbort";
 /**
  * Fired by the model when the type of a node has changed.
  * @event
@@ -278,6 +306,7 @@ export declare const EVENT_INTERNAL_GROUP_SIZE_CHANGED_REDO = "internal:group:si
  * @internal
  */
 export declare const EVENT_INTERNAL_GROUP_SIZE_CHANGED_UNDO = "internal:group:sizeChangedUndo";
+export declare const EVENT_INTERNAL_EDGE_REDRAW = "internal:edge:redraw";
 /**
  * @internal
  * @payload RendererAddedParams

package/types/core/geom.d.ts

@@ -96,6 +96,7 @@ export declare function fixPrecision(n: number, digits?: number): number;
  * @returns A point if an intersection found, null otherwise.
  * @internal
  */
+export declare const EPSILON = 0.000001;
 export declare function lineIntersection(l1: LineXY, l2: LineXY): PointXY | null;
 /**
  * Finds all points where the given line intersects the given rectangle.
@@ -278,7 +279,36 @@ export declare const chebyshevDistance: (x1: number, y1: number, x2: number, y2:
  */
 export declare const octileDistance: (x1: number, y1: number, x2: number, y2: number) => number;
 /**
- * Clamps the given angle to lie inside the range 0 - 360
- * @param rangle
+ * Clamps the given angle (in degrees) to lie inside the range 0 - 360
+ * @param angle
  */
 export declare function clampAngle(angle: number): number;
+/**
+ * Compares a moving point to a reference point and returns a directional PointXY object.
+ * The direction is determined by imagining 4 lines at 45 degrees emanating from the reference point.
+ *
+ * - {x:0, y:-1} for TOP (moving point is primarily above the reference point)
+ * - {x:-1, y:0} for LEFT (moving point is primarily to the left of the reference point)
+ * - {x:1, y:0} for RIGHT (moving point is primarily to the right of the reference point)
+ * - {x:0, y:1} for BOTTOM (moving point is primarily below the reference point)
+ *
+ * @param referencePoint The reference point.
+ * @param movingPoint The moving point to compare.
+ * @returns A PointXY object indicating the direction.
+ */
+/**
+ * Represents a rectangle with an optional rotation.
+ * The rotation is in degrees, and defaults to 0.
+ * The rotation is assumed to be around the center of the rectangle.
+ */
+export interface RotatedRectangle extends RectangleXY {
+    r?: number;
+}
+/**
+ * Determines if two rotated rectangles intersect using the Separating Axis Theorem (SAT).
+ * @param r1 The first rotated rectangle.
+ * @param r2 The second rotated rectangle.
+ * @returns True if the rectangles intersect, false otherwise.
+ * @internal
+ */
+export declare function rotatedRectanglesIntersect(r1: RotatedRectangle, r2: RotatedRectangle): boolean;

package/types/core/layout/circular/circular-layout.d.ts

@@ -11,14 +11,19 @@ export interface CircularLayoutParameters extends LayoutParameters {
      * If true, the first node in the data set will be placed in the center of the circle. Defaults to false.
      */
     centerRoot?: boolean;
+    /**
+     * Whether or not to shift the layout so that the origin is [width/2, height/2] and not [0,0]. This is useful in situations such as groups, where elements cannot be placed in a negative position in either axis (due to there being no facility to pan the group canvas)
+     */
+    centerContent?: boolean;
 }
 /**
- * A layout that places vertices in a circle, optionally with one at the center.
+ * A layout that places vertices in a circle, optionally with one at the center, and optionally centered around [width/2, height/2] (the default origin is 0,0).
  * @group Layouts
  * @category Circular
  */
 export declare class CircularLayout extends AbstractLayout<CircularLayoutParameters> {
     private readonly _centerRoot;
+    private readonly _centerContent;
     static type: string;
     readonly type: string;
     padding: PointXY;

package/types/core/selection.d.ts

@@ -66,7 +66,7 @@ export interface SelectionOptions {
     /**
      * Optional function that can be called to fill the selection. You'd use this when you are rendering individual selections and you need to be able to refresh the whole view based on some change in the data model.
      */
-    generator?: Function;
+    generator?: SelectionGenerator;
     /**
      * If true, the selection will not populate itself as soon as it is constructed. Otherwise, and this is the default behaviour, it will.
      */
@@ -82,6 +82,10 @@ export interface SelectionOptions {
  * @category Selection
  */
 export type SELECTION_EVENTS = typeof EVENT_EDGE_UPDATED | typeof EVENT_DATA_LOAD_END | typeof EVENT_DATA_LOAD_START | typeof EVENT_NODE_UPDATED | typeof EVENT_GRAPH_CLEAR_START | typeof EVENT_GROUP_UPDATED | typeof EVENT_PORT_UPDATED | typeof EVENT_EDGE_TARGET_CHANGED | typeof EVENT_EDGE_SOURCE_CHANGED | typeof EVENT_EDGE_REMOVED | typeof EVENT_EDGE_ADDED | typeof EVENT_GROUP_REMOVED | typeof EVENT_NODE_REMOVED | typeof EVENT_GROUP_ADDED | typeof EVENT_NODE_ADDED;
+/**
+ * Defines a function that can be used as the generator for a selection.
+ */
+export type SelectionGenerator = (s: VisuallyJsSelection, m: VisuallyJsModel) => any;
 /**
  * A selection is a group of vertices and edges, upon which you can perform bulk operations.
  * @group Model
@@ -97,7 +101,7 @@ export declare class VisuallyJsSelection extends OptimisticEventGenerator implem
     _groups: Array<Group>;
     _edges: Array<Edge>;
     capacityPolicy: string;
-    generator: Function;
+    generator: SelectionGenerator;
     onReload: Function;
     onBeforeReload: Function;
     onClear: Function;

package/types/core/toolkit.d.ts

@@ -248,6 +248,11 @@ export interface ModelOptions {
      * Optional map of group templates to register on the model.
      */
     groupTemplates?: Record<string, GroupTemplate>;
+    /**
+     * The name of the property inside nodes/groups that identifies their parent group. This defaults to "group" but
+     * can be changed if it clashes with your data model.
+     */
+    groupProperty?: string;
 }
 /**
  * Definition of a model event callback.
@@ -395,6 +400,7 @@ export declare abstract class VisuallyJsModel extends OptimisticEventGenerator i
     typeProperty: string;
     edgeTypeProperty: string;
     portTypeProperty: string;
+    groupProperty: string;
     typeFunction: TypeFunction;
     edgeIdFunction: IdFunction;
     edgeTypeFunction: TypeFunction;

package/types/test-support/test-support.d.ts

@@ -78,8 +78,8 @@ export interface ContainerOptions {
     width?: number;
     height?: number;
 }
-declare function lasso(surface: Surface, start: PointXY, end: PointXY, callbacks?: ConnectionDragEventHandlers): void;
-declare function lassoOnElement(surface: Surface, downEventElement: BrowserElement, start: PointXY, end: PointXY, callbacks?: ConnectionDragEventHandlers): void;
+declare function lasso(surface: Surface, start: PointXY, end: PointXY, callbacks?: ConnectionDragEventHandlers, group?: Group, eventFlags?: Record<string, boolean>, mouseUpContinuer?: Function): void;
+declare function lassoOnElement(surface: Surface, downEventElement: BrowserElement, start: PointXY, end: PointXY, callbacks?: ConnectionDragEventHandlers, metaKeys?: Record<string, boolean>, mouseUpContinuer?: Function): void;
 /**
  * @internal
  */
@@ -371,7 +371,12 @@ export declare class TestHarness {
      *
      * @return a Connection. You can access the underlying edge via the `.edge` property of the connection.
      */
-    dragConnection(source: BrowserElement | string | [string, string], target: BrowserElement | string | [string, string], callbacks?: ConnectionDragEventHandlers, locationOnTarget?: PointXY): Connection<BrowserElement>;
+    dragConnection(source: BrowserElement | string | [string, string], target: BrowserElement | string | [string, string], callbacks?: ConnectionDragEventHandlers, locationOnTarget?: PointXY, mouseUpContinuer?: Function): Connection<BrowserElement>;
+    /**
+     * Drags a connection from the given source and then aborts the drag by releasing the pointer button at a distant location.
+     * @param source
+     */
+    dragAndAbortConnection(source: BrowserElement | string): void;
     /**
      * Drag a connection in a way that activates the snap to target functionality, ie. it fires mouse events close to
      * the target but not over it.
@@ -407,7 +412,7 @@ export declare class TestHarness {
      * @param callbacks
      * @param locationOnTarget
      */
-    relocateEdgeTarget(edge: Edge, target: string | Node | Port | Group | BrowserElement, callbacks?: ConnectionDragEventHandlers, locationOnTarget?: PointXY): void;
+    relocateEdgeTarget(edge: Edge, target: string | Node | Port | Group | BrowserElement, callbacks?: ConnectionDragEventHandlers, locationOnTarget?: PointXY, mouseUpContinuation?: Function): void;
     /**
      * Drag the given edge's source relocator and drop it on some other vertex/element.
      * @param edge
@@ -415,7 +420,7 @@ export declare class TestHarness {
      * @param callbacks
      * @param locationOnTarget
      */
-    relocateEdgeSource(edge: Edge, source: string | Node | Port | Group | BrowserElement, callbacks?: ConnectionDragEventHandlers, locationOnTarget?: PointXY): void;
+    relocateEdgeSource(edge: Edge, source: string | Node | Port | Group | BrowserElement, callbacks?: ConnectionDragEventHandlers, locationOnTarget?: PointXY, mouseUpContinuation?: Function): void;
     /**
      * Trigger the event with the given name on the given object. By default the event will occur in the middle of the
      * DOM element representing the object.