@visuallyjs/browser-ui 1.2.2 → 1.2.3

package/package.json

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

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/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/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
  */

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.3";