@visuallyjs/browser-ui 1.2.2 → 1.2.4

package/package.json

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

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

@@ -236,8 +236,7 @@ export interface PanZoomOptions {
      */
     enabled?: boolean;
     /**
-     * Optional filter that will be called on down event, with the event target and the event. Returning true
-     * from this function means the widget should respond to the event.
+     * Optional filter that will be called on down event, with the event target and the event. Returning true from this function means the widget should respond to the event.
      */
     filter?: Function;
     /**

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

@@ -183,6 +183,7 @@ export declare class PanZoom {
     private _apparentOffset;
     private _canStartPanning;
     private handlers;
+    private _endPan;
     private _call;
     /**
      * Programmatically report a down event in order to kick the widget into action.
@@ -499,7 +500,7 @@ export declare class PanZoom {
      */
     mapEventLocation(event: MouseEvent): PointXY;
     /**
-     * Sets whether or not the component should respond to mouse events.
+     * Sets whether or not the component should respond to mouse events. Resets any active pan operation - this can be invoked via the lasso arming itself after a long press.
      * @param state Whether or not to respond to mouse events.
      */
     setEnabled(state: boolean): void;

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

@@ -24,6 +24,7 @@ export interface BrowserUIPlugin<O extends UIPluginOptions> extends UIPlugin<Bro
  * @category Definitions
  */
 export declare abstract class BaseBrowserUIPlugin {
+    tracksEdgeRedraws: boolean;
     /**
      * Empty implementation of $groupMemberAdded.
      */

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

@@ -6,7 +6,7 @@ import { SurfaceSaveData } from "../definitions";
 import { BrowserElement } from "../../util";
 import { PaletteMode } from "../../components/palette/palette-options";
 import { PanOptions, WheelOptions, ZoomOptions } from "../../pan-zoom-options";
-import { MiniviewPluginOptions, LassoPluginOptions, ResizingToolsModelUpdater, ResizingToolsHandlerFactory, DragGroupsPluginOptions, ResizingToolsResizeMethod, SnaplinesPluginOptions, PanButtonsPluginOptions } from "../plugins";
+import { MiniviewPluginOptions, LassoPluginOptions, ResizingToolsModelUpdater, ResizingToolsHandlerFactory, DragGroupsPluginOptions, ResizingToolsResizeMethod, SnaplinesPluginOptions, PanButtonsPluginOptions, LineCrossingsPluginOptions } from "../plugins";
 import { EdgeSnapOptions } from "../../edge-handler-base";
 import { DiagramActionMediator } from "./mediator";
 import { OnVertexAddedCallback, FontSpec } from "../../definitions";
@@ -435,6 +435,10 @@ export interface DiagramOptions {
      * Controls whether pan buttons are displayed at the edges of the canvas, defaults to false. You can either supply a boolean and have the panbuttons plugin initialize with its default settings, or supply your own settings.
      */
     panButtons?: boolean | PanButtonsPluginOptions;
+    /**
+     * Controls whether line crossings are shown by a visual cue. Defaults to false. You can either supply a boolean and have the panbuttons plugin initialize with its default settings, or supply your own settings.
+     */
+    lineCrossings?: boolean | LineCrossingsPluginOptions;
 }
 /**
  * Options for a palette for a diagram.

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

@@ -9,3 +9,4 @@ export * from './pan-buttons';
 export * from './list-manager';
 export * from './vertex-drawing';
 export * from './resizing-tools';
+export * from './line-crossings';

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

@@ -59,6 +59,14 @@ export interface LassoPluginOptions extends BrowserUIPluginOptions {
      * 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 false. If true, the lasso will arm itself after a long press.
+     */
+    autoArm?: boolean;
+    /**
+     * Timeout in ms for autoArm long press. Defaults to 500ms.
+     */
+    armTimeout?: number;
 }
 /**
  * A Surface plugin that allows the user to select multiple elements with the mouse.

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

@@ -3,6 +3,9 @@ import { ViewportElement } from "../../../../ui";
 import { BrowserElement } from "../../../util";
 import { PointXY, Size } from "../../../../core";
 import { AutoPanHandler } from "../../../auto-pan-handler";
+/**
+ * Options for a lasso
+ */
 export interface LassoOptions {
     canvas: Element;
     onStart?: (pagePosition: PointXY, canvasPosition: PointXY, shiftKey: boolean, e: MouseEvent, viewportElement: ViewportElement<BrowserElement> | null) => any;
@@ -14,6 +17,9 @@ export interface LassoOptions {
      * @param e
      */
     onClick?: (p: PointXY, e: MouseEvent) => any;
+    /**
+     * Set this to true to have the lasso drawn as set of overlays which mask the whole browser window except for the lassoed area.
+     */
     invert?: boolean;
     surface: Surface;
     filter?: ((e: MouseEvent) => boolean) | string;
@@ -34,6 +40,14 @@ export interface LassoOptions {
      * Defaults to true, meaning the canvas will pan automatically to track the lasso
      */
     autoPan?: boolean;
+    /**
+     * Defaults to false. If true, the lasso will arm itself after a long press.
+     */
+    autoArm?: boolean;
+    /**
+     * Timeout in ms for autoArm long press. Defaults to 500ms.
+     */
+    armTimeout?: number;
 }
 export declare class Lasso {
     visibleOrigin: PointXY;
@@ -69,6 +83,10 @@ export declare class Lasso {
     _enableInGroups: false | true | "metaKey";
     _generatedLassoContent: BrowserElement;
     _lastPageLocation: PointXY;
+    _autoArm: boolean;
+    _armTimeout: number;
+    _armTimer: any;
+    _armClickTriggered: boolean;
     constructor(options: LassoOptions);
     /**
      * list of selectors that should be filtered regardless of user preference

package/types/browser-ui/surface-renderer/plugins/line-crossings/arch-bridge.d.ts

@@ -0,0 +1,7 @@
+import { BridgeDefinition, IntersectingPoint } from "./definitions";
+/**
+ * @internal
+ * @param ip
+ * @param orientation
+ */
+export declare function $arcBridge(ip: IntersectingPoint, orientation: "h" | "v"): BridgeDefinition;

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

@@ -0,0 +1,116 @@
+import { Edge, LineXY, PointXY } from "../../../../core";
+import { Connection, Connector } from "../../../../ui";
+import { BrowserElement } from "../../../util";
+/**
+ * Options for the line crossings plugin.
+ */
+export interface LineCrossingsPluginOptions {
+    /**
+     * Whether to apply the bridge to the horizontal or the vertical segment in a crossing. Defaults to horizontal.
+     */
+    orientation: 'h' | 'v';
+    /**
+     * Type of bridge to use. Defaults to 'arch'.
+     */
+    bridgeType: "dot" | "arch" | "gap";
+    /**
+     * Radius to use for dot bridges. Defaults to 5.
+     */
+    dotRadius?: number;
+    /**
+     * Color to use for dot bridges. Defaults to null, and the dot is painted with the stroke color of the dominant segment. You can also control this via the CSS class defined by the constant CLASS_LINE_CROSSING_BRIDGE_DOT, but using CSS will be lost in an SVG export.
+     */
+    dotColor?: string;
+    /**
+     * Optional function to invoke when the user taps on a bridge. This will only fire for bridge types that draw extra components - arch and dot - but the gap bridge just masks
+     * @param edge1 First edge in the intersection
+     * @param edge2 Second edge in the intersection.
+     * @param canvasLocation The location on the canvas that the intersection is located at.
+     * @param e The mouse event associated with the tap.
+     */
+    onTap?: (edge1: Edge, edge2: Edge, canvasLocation: PointXY, e: MouseEvent) => any;
+}
+/**
+ * Line crossings plugin type
+ */
+export declare const PLUGIN_TYPE_LINE_CROSSINGS = "lineCrossings";
+/**
+ * Assigned to all bridges (of any type) that mark a line crossing.
+ * @cssClass
+ * @context Line crossings plugin
+ */
+export declare const CLASS_LINE_CROSSING_BRIDGE = "vjs-bridge";
+/**
+ * Assigned to all bridges (of any type) that mark a line crossing when the bridge is on the vertical axis
+ * @cssClass
+ * @context Line crossings plugin
+ */
+export declare const CLASS_LINE_CROSSING_BRIDGE_VERTICAL = "vjs-bridge-vertical";
+/**
+ * Assigned to all bridges (of any type) that mark a line crossing when the bridge is on the horizontal axis
+ * @cssClass
+ * @context Line crossings plugin
+ */
+export declare const CLASS_LINE_CROSSING_BRIDGE_HORIZONTAL = "vjs-bridge-horizontal";
+/**
+ * Assigned to all dot bridges that mark a line crossing.
+ * @cssClass
+ * @context Line crossings plugin
+ */
+export declare const CLASS_LINE_CROSSING_BRIDGE_DOT = "vjs-bridge-dot";
+/**
+ * Assigned to all arch bridges that mark a line crossing.
+ * @cssClass
+ * @context Line crossings plugin
+ */
+export declare const CLASS_LINE_CROSSING_BRIDGE_ARCH = "vjs-bridge-arch";
+/**
+ * Assigned to all gap bridges that mark a line crossing.
+ * @cssClass
+ * @context Line crossings plugin
+ */
+export declare const CLASS_LINE_CROSSING_BRIDGE_GAP = "vjs-bridge-gap";
+type SegmentOrientation = "h" | "v";
+export type SegmentInfo = {
+    o: SegmentOrientation;
+    index: 0 | 1;
+    line: LineXY;
+    strokeWidth: number;
+};
+export type ConnectionInfo = {
+    segments: Array<SegmentInfo>;
+    connection: Connection<BrowserElement>;
+    connector: Connector;
+    intersectingPoints: Array<IntersectingPoint>;
+    pathElement: BrowserElement;
+    canvasElement: BrowserElement;
+    stroke: string;
+    strokeWidth: number;
+    id: string;
+};
+/**
+ * @internal
+ */
+export interface IntersectingPoint {
+    index: 0 | 1;
+    point: PointXY;
+    o: {
+        ref: SegmentOrientation;
+        other: SegmentOrientation;
+    };
+    strokeWidth: {
+        ref: number;
+        other: number;
+    };
+    stroke: {
+        ref: string;
+        other: string;
+    };
+    refConnector: ConnectionInfo;
+    otherConnector: ConnectionInfo;
+}
+/**
+ * @internal
+ */
+export type BridgeDefinition = [Array<BrowserElement>, number, Array<BrowserElement>];
+export {};

package/types/browser-ui/surface-renderer/plugins/line-crossings/dot-bridge.d.ts

@@ -0,0 +1,7 @@
+import { BridgeDefinition, IntersectingPoint } from "./definitions";
+/**
+ * @internal
+ * @param ip
+ * @param _orientation
+ */
+export declare function $dotBridge(ip: IntersectingPoint, _orientation: "h" | "v", dotRadius: number, dotColor: string): BridgeDefinition;

package/types/browser-ui/surface-renderer/plugins/line-crossings/gap-bridge.d.ts

@@ -0,0 +1,7 @@
+import { BridgeDefinition, IntersectingPoint } from "./definitions";
+/**
+ * @internal
+ * @param ip
+ * @param orientation
+ */
+export declare function $gapBridge(ip: IntersectingPoint, orientation: "h" | "v"): BridgeDefinition;

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

@@ -0,0 +1,5 @@
+export * from "./definitions";
+export * from "./arch-bridge";
+export * from "./dot-bridge";
+export * from "./gap-bridge";
+export * from "./line-crossings-plugin";

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

@@ -0,0 +1,74 @@
+import { Connection, ConnectionEstablishedParams } from "../../../../ui";
+import { BaseBrowserUIPlugin } from "../../../plugins";
+import { Edge, PointXY } from "../../../../core";
+import { ConnectionInfo, LineCrossingsPluginOptions } from "./definitions";
+import { Surface } from "../../surface";
+import { BrowserElement } from "../../../util";
+interface InternalBridgeDefinition {
+    canvasElements: Array<BrowserElement>;
+    bgSize: number;
+    masks: Array<BrowserElement>;
+    edge: Edge;
+    otherEdge: Edge;
+    id: string;
+}
+/**
+ * Adds visual artifacts ("bridges") to the canvas at the locations where two orthogonal segments intersect. As of the first release, this plugin will only work with Orthogonal connectors (or Straight connectors with 'orthogonal' constrain set).
+ *
+ * Three bridge types are supported: "arch" (the default), "gap" and "dot". For dot bridges you can supply a dot radius and fill colour to use, or VisuallyJs will just use the stroke from the dominant connector at the intersection.
+ *
+ * The plugin has the concept of "orientation": which axis to apply updates to segments in. "h" - horizontal - is the default, and in this orientation VisuallyJs will add bridges to the horizontal segment at an intersection. You can set orientation to "v" to switch to vertical.
+ */
+export declare class LineCrossingsPlugin extends BaseBrowserUIPlugin {
+    _surface: Surface;
+    _orientation: "h" | "v";
+    _otherAxisOrientation: "h" | "v";
+    _orientationClass: string;
+    _dotRadius: number;
+    _dotColor: string;
+    _onTap: (edge1: Edge, edge2: Edge, canvasLocation: PointXY, e: MouseEvent) => any;
+    _edgeCache: Map<string, ConnectionInfo>;
+    _bridgeType: "arch" | "dot" | "gap";
+    _key: string;
+    tracksEdgeRedraws: boolean;
+    _bridgesByEdgeId: Map<string, Array<InternalBridgeDefinition>>;
+    _bridgesById: Map<string, InternalBridgeDefinition>;
+    initialise(surface: Surface, options: LineCrossingsPluginOptions): boolean;
+    $edgeRedraw(c: Connection<BrowserElement>): void;
+    private _getConnectorInfo;
+    private _resetCache;
+    private _trackOneEdge;
+    private _getEdgeInfo;
+    /**
+     * Gets the list of segments for the reference orientation. This is a stub; it isnt entirely necessary if we are going to be locked to orthogonal always. But if we decided to support arbitrary angles, we could update this method to have it ignore orientation.
+     * @param s
+     */
+    private _getRefConnectorSegments;
+    /**
+     * Gets the list of segments for the other orientation. This is a stub; it isnt entirely necessary if we are going to be locked to orthogonal always. But if we decided to support arbitrary angles, we could update this method to have it ignore orientation.
+     * @param s
+     */
+    private _getOtherConnectorSegments;
+    private _getBridgeSize;
+    private _cleanupBridgesForEdge;
+    private _cleanupBridges;
+    /**
+     * Place bridges for a single edge, either looking for segment's in the current orientation in that edge only (testAllCombinations:false), or by also testing segments in any overlapping connectors. The first case is for when we're painting the whole dataset, and we know that every segment will be reached. The second case is when we're just repainting a single edge.
+     * @param edge
+     * @param testAllCombinations
+     */
+    private _placeBridgesForEdge;
+    /**
+     * Clears the edge cache and recomputes bridges for every edge in the dataset
+     */
+    private _placeAllBridges;
+    private _drawBridge;
+    destroy(): void;
+    reset(): void;
+    private _createMaskId;
+    private _ensureMaskDef;
+    private _removeMaskDef;
+    $edgeRemoved(edge: Edge): void;
+    $edgeRendered(p: ConnectionEstablishedParams): void;
+}
+export {};

package/types/core/io.d.ts

@@ -94,7 +94,13 @@ export interface VisuallyJsDefaultJSON {
      */
     groups?: Array<GroupData>;
 }
+/**
+ * Defines the default JSON datatype
+ */
 export declare const JSON_DATATYPE = "json";
+/**
+ * Defines the hierarchical json datatype
+ */
 export declare const HIERARCHICAL_JSON_DATATYPE = "hierarchical-json";
 /**
  * Register a parser for some given datatype

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

@@ -0,0 +1,69 @@
+import { AbstractLayout, InternalLayoutOptions, LayoutParameters } from "../abstract-layout";
+import { HasIdAndType, Vertex } from "../../model/graph";
+import { PointXY, Size } from "../../util";
+import { DataSource } from "../../datasource";
+import { CircularLayoutParameters } from "../circular";
+/**
+ * Bowtie layout type.
+ * @group Layouts
+ * @category Bowtie
+ */
+export declare const LAYOUT_TYPE_BOWTIE = "Bowtie";
+/**
+ * Options for the Bowtie layout
+ * @group Layouts
+ * @category Hierarchy
+ */
+export interface BowtieLayoutParameters extends LayoutParameters {
+    /**
+     * Whether to draw the layout horizontally or vertically. Defaults to "horizontal".
+     */
+    axis?: "horizontal" | "vertical";
+    /**
+     * Optional node to use as the root. You must provide this or `getRootNode`.
+     */
+    rootNode?: Vertex | string;
+    /**
+     * Optional function you can provide that will dynamically be invoked to get the root node to use. You must provide this or `rootNode`.
+     */
+    getRootNode?: (dataSource: DataSource) => Vertex | string;
+    /**
+     * Gets immediate upstream nodes for the focus vertex. Only invoked with the focus vertex.
+     * @param dataSource
+     * @param vertex
+     */
+    getUpstream: (dataSource: DataSource, vertex: HasIdAndType) => Array<HasIdAndType>;
+    /**
+     * Gets immediate downstream nodes for the focus vertex. Only invoked with the focus vertex.
+     * @param dataSource
+     * @param vertex
+     */
+    getDownstream: (dataSource: DataSource, vertex: HasIdAndType) => Array<HasIdAndType>;
+    /**
+     * Optional function to invoke on any non-focus vertex, to get the vertex's children. Will not be invoked with the focus vertex. If this function returns the focus vertex in its set it will be filtered out. When you do not provide this function, VisuallyJs will find all vertices that are targets of edges for which this vertex is a source.
+     */
+    childVerticesFunction?: (node: HasIdAndType, dataSource: DataSource) => Array<HasIdAndType>;
+}
+/**
+ * Places the focus vertex in the center of the canvas and then branches out to the left and right - or top and bottom - with children of the focus. You are expected to supply a `getUpstream` and `getDownstream` function for this layout, as well as either `getRootNode` or `rootNode`. `getUpstream` is used to get the immediate children of the focus vertex that will be painted to the left or above, depending on axis. `getDownstream` is used to get the immediate children of the focus vertex that will be painted to the right or below. By default this layout will draw horizontally, which you can change by setting `axis:"vertical"`.
+ * @group Layouts
+ * @category Bowtie
+ */
+export declare class BowtieLayout extends AbstractLayout<BowtieLayoutParameters> {
+    focusVertex: Vertex;
+    static type: string;
+    readonly type = "Bowtie";
+    private readonly _getRootNode;
+    private readonly _rootNode;
+    private _axis;
+    private _getUpstreamVertices;
+    private _getDownstreamVertices;
+    private _childVerticesFunction;
+    private _defaultGetDownstream;
+    constructor(params: InternalLayoutOptions<BowtieLayoutParameters>);
+    begin(dataSource: DataSource, positionGetter: (id: string) => PointXY, positionSetter: (id: string, x: number, y: number) => void, sizes: Record<string, Size>, parameters: CircularLayoutParameters): void;
+    end(dataSource: DataSource, getPosition: (id: string) => PointXY, setPosition: (id: string, x: number, y: number) => void, sizes: Record<string, Size>, parameters: BowtieLayoutParameters): void;
+    getDefaultParameters(): BowtieLayoutParameters;
+    reset(): void;
+    step(dataSource: DataSource, getPosition: (id: string) => PointXY, setPosition: (id: string, x: number, y: number) => void, sizes: Record<string, Size>, parameters: BowtieLayoutParameters): void;
+}

package/types/core/layout/bowtie/index.d.ts

@@ -0,0 +1 @@
+export * from "./bowtie-layout";

package/types/core/layout/hierarchy/definitions.d.ts

@@ -1,5 +1,4 @@
 import { AbstractEdgeTerminus, Edge, Group, HasId, HasIdAndType, Node } from "../../model/graph";
-import { VisuallyJsModel } from "../../toolkit";
 import { AbsoluteBackedLayoutParameters } from "../absolute-layout";
 import { PlacementStageStrategy } from "./placement-stage";
 import { HierarchyLayout } from "./hierarchy-layout";
@@ -7,6 +6,7 @@ import { VertexSet } from "./vertex-set";
 import { LayoutLayerEntry, LayoutLayerOrdering } from "../abstract-layout";
 import { GatedPath } from "../../router";
 import { PointXY, Size } from "../../util";
+import { DataSource } from "../../datasource";
 /**
  * @internal
  */
@@ -21,7 +21,7 @@ export declare const VERTEX = "vertex";
  * @category Hierarchy
  * @typeParam T Defines the type of the object from which child vertices will be retrieved, and the type of the child vertices.
  */
-export type ChildVerticesFunction<T extends HasId> = (node: T, layer: number, instance: VisuallyJsModel) => Array<T>;
+export type ChildVerticesFunction<T extends HasId> = (node: T, layer: number, instance: DataSource) => Array<T>;
 /**
  * Axis types for a {@link HierarchyLayout}
  * @group Layouts

package/types/core/layout/hierarchy/parent-relative-placement.d.ts

@@ -1,7 +1,7 @@
 import { ParentRelativePlacementStrategyOptions } from "./definitions";
 import { HasIdAndType } from "../../model/graph";
 import { PointXY } from "../../util";
-import { VisuallyJsModel } from "../../toolkit";
+import { DataSource } from "../../datasource";
 /**
  * Places elements with respect to their parents, aligning them at parent start/end/center depending on the value of `alignment`.
  * @internal
@@ -34,7 +34,7 @@ export declare class ParentRelativePlacementStrategy<T extends HasIdAndType> {
     private readonly _getSize;
     private readonly _getChildVertices;
     private readonly _absolutePositionFunction;
-    constructor(model: VisuallyJsModel, parameters: ParentRelativePlacementStrategyOptions<T>);
+    constructor(model: DataSource, parameters: ParentRelativePlacementStrategyOptions<T>);
     execute(): Map<string, {
         position: PointXY;
         layer: number;

package/types/core/layout/index.d.ts

@@ -8,3 +8,4 @@ export * from './grid';
 export * from './force-directed';
 export * from './hierarchical';
 export * from './hierarchy';
+export * from './bowtie';

package/types/core/model/graph.d.ts

@@ -183,6 +183,13 @@ export declare function isNodeVertex(v: Vertex): v is Node;
  * @category Utils
  */
 export declare function isVertex(o: any): o is Vertex;
+/**
+ * Checks if an edge is connected to the given vertex or any of its ports.
+ * @param edge The edge to check.
+ * @param vertex The vertex (Node or Group) to check against.
+ * @returns True if the edge's source or target (or their parent Node/Group if a Port) matches the vertex.
+ */
+export declare function isEdgeConnectedTo(edge: Edge, ...vertex: Array<Vertex>): boolean;
 /**
  * @internal
  */
@@ -829,6 +836,8 @@ export declare abstract class Vertex extends Base implements AbstractEdgeTerminu
      * Gets all Edges where this Vertex is the target.
      */
     getTargetEdges(): Array<Edge>;
+    getAllSourceEdges(): Edge[];
+    getAllTargetEdges(): Edge[];
     /**
      * Adds an Edge to the vertex.
      * @param edge The Edge to add.

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

@@ -41,6 +41,7 @@ export interface SynthesizedEvent {
     pageX: number;
     pageY: number;
 }
+declare function _createMouseEventWithPageLoc(el: Element, evt: string, pageLoc: PointXY, metaKeys?: Record<string, boolean>, button?: number): void;
 /**
  * Callbacks you can provide to connection drag methods in the TestHarness to interrupt the process
  * and inspect what's going on.
@@ -97,6 +98,7 @@ export declare const VisuallyJsTestSupport: {
     nudgeEvent: typeof _nudgeEvent;
     getEdgeCanvas: typeof getEdgeCanvas;
     defaultEventManager: EventManager;
+    createMouseEventWithPageLoc: typeof _createMouseEventWithPageLoc;
     /**
      * Drag any DOM element around, not just elements managed by the surface.
      * @param el

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

@@ -26,7 +26,6 @@ export declare const Connectors: {
     register: (name: string, handler: ConnectorHandler) => void;
     compute: (c: Connection<any>, geometry: PaintGeometry, params: ConnectorComputeParams) => Geometry;
     update: (c: Connection<any>, geometry: PaintGeometry, params: ConnectorComputeParams, sourceMoved: boolean, targetMoved: boolean) => Geometry;
-    markEdited(connection: Connection<any>, g?: Geometry): void;
     /**
      * Import the given geometry, setting it on the connector, marking the connector persistToModel, and setting
      * anchor locations to the values from the geometry, then locking them. This method does not write the
@@ -71,6 +70,7 @@ export declare function defaultImportGeometry(ac: Connector, g: Geometry): boole
  */
 export declare function _updateConnectorBounds(ac: Connector, segment: Segment): void;
 export declare function _clearConnectorSegments(c: Connector): void;
+export declare function clampToHalfPixel(value: number): number;
 export declare function _addConnectorSegment(c: Connector, type: string, params: any): void;
 /**
  * This abstraction exists to support using the various pointOnPath, pointAlongPath etc methods, without needing a Connector. The initial use case is to support ad-hoc drawing of edges, for such things as the edge type picker, but also this is really a step on the way to refactoring the paint code to make it less complex and more of a rubber-stamp operation.

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

@@ -97,6 +97,7 @@ export declare abstract class UICore<EL, EVT = CoreUIEvent> extends OptimisticEv
     zoomToFitOnLoad: boolean;
     plugins: Array<UIPlugin<EL, any, any>>;
     pluginMap: Map<string, UIPlugin<EL, any, any>>;
+    _edgeRedrawPlugins: Array<UIPlugin<EL, any, any>>;
     connectorClass: string;
     connectorOutlineClass: string;
     connectorPathClass: string;

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

@@ -37,6 +37,12 @@ export interface ViewportElement<E> extends ElementBase {
 export interface ViewportNodeElement<E> extends ViewportElement<E> {
     modelObject: Node;
 }
+/**
+ * @internal
+ */
+export interface ConnectorBounds extends RectangleXY {
+    id: string;
+}
 /**
  * An element that tracks a Group
  * @internal
@@ -81,6 +87,7 @@ export declare class Viewport<EL> {
     private getRenderedElement;
     private _currentTransaction;
     private rtree;
+    private edgertree;
     private _suspended;
     private _boundsDirty;
     constructor(instance: UICore<EL, any>, getRenderedElement: (id: string) => EL);
@@ -116,6 +123,7 @@ export declare class Viewport<EL> {
      * @internal
      */
     findVerticesIntersectingWithRect(rect: RectangleXY, margin: number, greedy: boolean, ignoreIds: Array<string>, ignoreBoundaryMatch: boolean): Array<ViewportElement<any>>;
+    findConnectorBoundsIntersectingWithRect(rect: RectangleXY, margin: number, greedy: boolean, ignoreIds: Array<string>, ignoreBoundaryMatch: boolean): Array<ConnectorBounds>;
     /**
      * Returns vertices that are enclosed by the given rectangle, optionally ignoring a set of vertex IDs when performing the calculation.
      * @param rect Rectangle to test
@@ -155,6 +163,12 @@ export declare class Viewport<EL> {
      * @param doNotRecalculateBounds Defaults to false. For internal use. If true, does not update viewport bounds after updating the element.
      */
     updateElement(id: string, x: number, y: number, width: number, height: number, rotation: number, modelObject: Vertex, doNotRecalculateBounds: boolean): ViewportElement<EL>;
+    /**
+     * @internal
+     * @param c
+     */
+    $updateEdge(c: ConnectorBounds): void;
+    $removeEdge(id: string): void;
     $forEachElement(cb: (e: ViewportElement<any>) => any): void;
     $refreshEveryElement(): void;
     $refreshElement(elId: string, doNotRecalculateBounds?: boolean, pos?: PointXY, size?: Size, rotation?: number): ViewportElement<EL>;

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

@@ -17,6 +17,15 @@ export interface UIPlugin<EL, O extends UIPluginOptions, U extends UICore<EL, an
     initialise(ui: U, options: O): boolean;
     destroy(): void;
     reset(): void;
+    /**
+     * Set this to true to inform the UI that the plugin wishes to be informed at the end of an edge paint.
+     */
+    tracksEdgeRedraws: boolean;
+    /**
+     * Optional method you can implement if you set `tracksEdgeRedraws:true`; the UI will invoke this method at the end of each edge's paint cycle. You can access the underlying edge via `c.edge`.
+     * @param c
+     */
+    $edgeRedraw?: (c: Connection<EL>) => any;
     /**
      * Invoked when a group member has been removed
      * @param element

package/types/version.d.ts

@@ -1 +1 @@
-export declare const VERSION = "1.2.2";
+export declare const VERSION = "1.2.4";