@visuallyjs/browser-ui 1.0.0

package/types/core/renderer.d.ts

@@ -0,0 +1,74 @@
+import { Node, Group, Base, Port, Edge, Vertex } from './model/graph';
+import { EdgeAddedParams, EdgeRemovedParams, EdgeSourceChangedParams, EdgeTargetChangedParams, GroupAddedParams, GroupMemberAddedParams, GroupMemberRemovedParams, GroupRemovedParams, NodeAddedParams, NodeRemovedParams, PortAddedParams, PortRemovedParams, VertexUpdatedParams } from "./params";
+import { VisuallyJsSelection } from "./selection";
+/**
+ * Definition of a gradient - an array of [offset, color] entries.
+ */
+export type GradientSpec = Array<[number, string]>;
+/**
+ * Definition of an object that can render an instance of {@link VisuallyJsModel}. This interface is not something a user of the API needs to be concerned with, unless you are creating your own renderer type.
+ */
+export interface VisuallyJsRenderer<E, EVT = any> {
+    id: string;
+    bind(evt: EVT, payload: any): void;
+    onDestroy(cb: (r: VisuallyJsRenderer<E>) => any): void;
+    /**
+     * Sets the position of some vertex and updates the model. This method will honour any grid that is currently in effect.
+     */
+    setPosition(vertex: Node | Group | E, x: number, y: number): void;
+    setSuspendRendering(v: boolean, thenRefresh?: boolean): void;
+    expandGroup(group: Group): void;
+    collapseGroup(group: Group): void;
+    $nodeAdded(p: NodeAddedParams): void;
+    $groupAdded(p: GroupAddedParams): void;
+    $edgeAdded(data: EdgeAddedParams, context?: Record<string, any>): void;
+    $portAdded(p: PortAddedParams): void;
+    $nodeRemoved(node: NodeRemovedParams): void;
+    $groupRemoved(group: GroupRemovedParams): void;
+    $edgeRemoved(data: EdgeRemovedParams): void;
+    $portRemoved(data: PortRemovedParams): void;
+    /**
+     * export the geometry for some edge. Used by the model when the geometry is set on an
+     * edge that does not currently have a geometry object.
+     * @param edge
+     * @internal
+     */
+    $exportEdgeGeometry(edge: Edge): any;
+    $edgeGeometryUpdated(edge: Edge, geometry: any, originalGeometry: any): void;
+    $nodeTypeChanged(node: Node, previousType: string, newType: string): void;
+    $groupTypeChanged(group: Group, previousType: string, newType: string): void;
+    $edgeTypeChanged(edge: Edge, previousType: string, newType: string): void;
+    $portTypeChanged(port: Port, previousType: string, newType: string): void;
+    $groupMemberAdded(p: GroupMemberAddedParams): void;
+    $groupMemberRemoved(p: GroupMemberRemovedParams): void;
+    $vertexUpdated(p: VertexUpdatedParams): void;
+    $graphClearStart(): void;
+    $graphClearEnd(): void;
+    $edgeSourceChanged(params: EdgeSourceChangedParams): void;
+    $edgeTargetChanged(params: EdgeTargetChangedParams): void;
+    $select(payload: {
+        obj: Base;
+        selection: VisuallyJsSelection;
+    }): void;
+    $deselect(payload: {
+        selection: VisuallyJsSelection;
+        obj: Base;
+    }): void;
+    $selectionCleared(sel: VisuallyJsSelection): any;
+    $dataLoadStart(): any;
+    $dataAppendStart(): any;
+    $dataLoadEnd(): any;
+    $dataAppendEnd(): any;
+    $renderDummyVertex(v: Vertex): void;
+}
+/**
+ * A lightweight interface for UIs to respond to interactivity events
+ * propagated by the model.
+ * @group Model
+ * @internal
+ */
+export interface UIObserver {
+    onHover?: (source: UIObserver, obj: Base, state: boolean) => void;
+    onSelect?: (source: UIObserver, obj: Base, state: boolean) => void;
+    onTap?: (source: UIObserver, obj: Base, event: MouseEvent) => void;
+}

package/types/core/router/common.d.ts

@@ -0,0 +1,104 @@
+import { PointXY, Size } from "../util";
+import { OrthogonalRouterMode } from "./orthogonal-router";
+import { X, Y } from "../constants";
+export type OrientationAxis = typeof X | typeof Y;
+/**
+ * @internal
+ * @param gates
+ */
+export declare function createGateMap(gates: Array<Gate>): Record<string, Gate>;
+export type RouterLine = {
+    source: PointXY;
+    target: PointXY;
+    id: string;
+};
+/**
+ * @internal
+ * @param line
+ */
+export declare function routerLineSgn(line: RouterLine, axis: number): number;
+/**
+ * @internal
+ * @param line1
+ * @param line2
+ */
+export declare function routerLineIntersects(line1: RouterLine, line2: RouterLine, axis: number): boolean;
+export interface RouterEdge {
+    id: string;
+    pathDirection: number;
+    sourceId: string;
+    targetId: string;
+    path: Array<GateId>;
+}
+/**
+ * @internal
+ * @param edges
+ * @param gates
+ * @param gateMap
+ * @param getVertexPosition
+ * @param getVertexSize
+ */
+export declare function sortAndPlaceEdges(edges: Array<RouterEdge>, gates: Array<Gate>, gateMap: Record<string, Gate>, getVertexPosition: (id: string) => PointXY, getVertexSize: (id: string) => Size): void;
+export interface RoutingInformation<T extends RouterRegion = RouterRegion> {
+    gateMap?: Record<string, Gate>;
+    gates: Array<Gate>;
+    edges: Array<RouterEdge>;
+    regions: Array<T>;
+    edgeMap: Record<string, RouterEdge>;
+}
+/**
+ * Helper functions for a router.  Would be best refactored out of existence probably.
+ * @internal
+ */
+export interface RouterOptions<T extends RouterRegion = RouterRegion> extends RoutingInformation<T> {
+    getVertexPosition: (id: string) => PointXY;
+    getVertexSize: (id: string) => Size;
+}
+export interface RouterRegion {
+    id: string;
+    left: number;
+    top: number;
+    width: number;
+    height: number;
+    lines: Array<RouterLine>;
+}
+/**
+ * @internal
+ */
+export interface EdgeRouterOptions<T extends RouterRegion = RouterRegion> extends RouterOptions<T> {
+    mode?: OrthogonalRouterMode;
+    pad?: number;
+    axis: number;
+}
+export type GateId = string;
+/**
+ * The gate between two regions. A gate is a region in the plane of either the x or y axis (axis === 0 for x, 1 for y), and
+ * consists of a segment that is a line in that axis, having a start and end point.
+ * @internal
+ */
+export interface Gate<E extends RouterEdge = RouterEdge> {
+    id: GateId;
+    a: {
+        id: string;
+        type: string;
+    };
+    b: {
+        id: string;
+        type: string;
+    };
+    axis: number;
+    segment: {
+        point1: number;
+        point2: number;
+    };
+    length: number;
+    otherAxisLocation: number;
+    midpoint: PointXY;
+    edges: Array<{
+        edge: E;
+        next: Gate;
+        location?: number;
+    }>;
+}
+export type GatedPath = Array<Gate>;
+export declare function populateRegions(edges: Array<RouterEdge>, regions: Array<RouterRegion>, gateMap: Record<string, Gate>): void;

package/types/core/router/direct-router.d.ts

@@ -0,0 +1,12 @@
+import { EdgeRouterOptions } from "./common";
+import { PointXY } from "../util";
+/**
+ * @internal
+ */
+export interface DirectRouterOptions extends EdgeRouterOptions {
+}
+/**
+ * @internal
+ * @param options
+ */
+export declare function directRouter(options: DirectRouterOptions): Record<string, Array<PointXY>>;

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

@@ -0,0 +1,3 @@
+export * from './common';
+export * from './orthogonal-router';
+export * from './direct-router';

package/types/core/router/orthogonal-router.d.ts

@@ -0,0 +1,46 @@
+import { RouterLine, RouterRegion, EdgeRouterOptions } from "./common";
+import { PointXY } from "../util";
+/**
+ * Identifies the 'separate' orthogonal router mode.
+ * @group Plugins
+ * @category Edge Routing
+ * @constant
+ */
+export declare const ORTHOGONAL_ROUTER_MODE_SEPARATE = "separate";
+/**
+ * Identifies the 'bus' orthogonal router mode.
+ * @group Plugins
+ * @category Edge Routing
+ * @constant
+ */
+export declare const ORTHOGONAL_ROUTER_MODE_BUS = "bus";
+/**
+ * How to draw edges in 'orthogonal' mode in the {@link EdgeRoutingPlugin}. `bus` collates lines that are traversing a segment together into one line. `separate` draws lines that are traversing a segment together as parallel lines.
+ * @group Plugins
+ * @category Edge Routing
+ */
+export type OrthogonalRouterMode = typeof ORTHOGONAL_ROUTER_MODE_BUS | typeof ORTHOGONAL_ROUTER_MODE_SEPARATE;
+/**
+ * @internal
+ */
+export interface OrthogonalRouterOptions extends EdgeRouterOptions<OrthogonalRouterRegion> {
+    axis: number;
+    mode?: OrthogonalRouterMode;
+    pad?: number;
+}
+/**
+ * @internal
+ */
+export interface OrthogonalRouterRegion extends RouterRegion {
+    lineSets: Array<Array<RouterLine>>;
+}
+/**
+ * Route a set of orthogonal lines through a series of regions.
+ * @param gates
+ * @param edges
+ * @param vertices
+ * @param regions
+ * @param mode
+ * @internal
+ */
+export declare function orthogonalRouter(options: OrthogonalRouterOptions): Record<string, Array<PointXY>>;

package/types/core/rtree/definitions.d.ts

@@ -0,0 +1,24 @@
+import { ObjectData } from "../model/graph";
+import { RectangleXY } from "../util";
+/**
+ * Base region used by RTree
+ * @internal
+ */
+export interface RTreeRegion extends RectangleXY {
+    data?: ObjectData;
+    children: Array<RTreeRegion>;
+    parent?: RTreeRegion;
+    id?: string;
+}
+/**
+ * Default max child count for RTree nodes
+ * @internal
+ */
+export declare const RTREE_DEFAULT_MAX_CHILD_ENTRIES = 4;
+/**
+ * A data node in an RTree
+ * @internal
+ */
+export interface RTreeDataNode extends RTreeRegion {
+    id: string;
+}

package/types/core/rtree/hilbert.d.ts

@@ -0,0 +1,9 @@
+import { RectangleXY } from "../util";
+/**
+ * @internal
+ */
+export declare const HilbertCurves: {
+    sortRect: <T extends RectangleXY>(listOfRectangles: Array<T>) => Array<T>;
+    toHilbertCoordinates: (maxCoordinate: number, x: number, y: number) => number;
+    hilbertInterleaveBits: (odd: number, even: number) => number;
+};

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

@@ -0,0 +1,4 @@
+export * from './definitions';
+export * from './hilbert';
+export * from './rtree';
+export * from './util';

package/types/core/rtree/rtree.d.ts

@@ -0,0 +1,102 @@
+import { RTreeDataNode, RTreeRegion } from "./definitions";
+import { ObjectData } from "../model/graph";
+import { Extents, LineXY, RectangleXY } from "../util";
+/**
+ * Options for an rtree search
+ * @internal
+ */
+export interface RTreeSearchOptions {
+    /**
+     * Padding to put around every object we test. Defaults to 0.
+     */
+    margin?: number;
+    /**
+     * Whether or not to return as soon as one hit is found. Defaults to false.
+     */
+    greedy?: boolean;
+    /**
+     * Minimum overlap, in units squared, required before a match is made.
+     */
+    minimumOverlap?: number;
+}
+/**
+ * An RTree. Used internally to facilitate fast spatial querying.
+ * @internal
+ */
+export declare class RTree {
+    private readonly _maxNodes;
+    private _root;
+    private _dataNodes;
+    constructor(maxNodes?: number);
+    search(searchBoundary: RectangleXY, options?: RTreeSearchOptions): Array<RTreeDataNode>;
+    searchAndRank(searchBoundary: RectangleXY, options?: RTreeSearchOptions): Array<{
+        node: RTreeDataNode;
+        overlap: number;
+    }>;
+    private _search;
+    /**
+     * Find all data nodes that the given line intersects with, optionally ignoring
+     * some list of IDs.
+     * @param l
+     * @param ignoreIds
+     */
+    findIntersectionsWithLine(l: LineXY, ignoreIds?: Array<string>): Array<RTreeDataNode>;
+    insert(data: Array<RTreeRegion | RTreeDataNode> | RTreeRegion | RTreeDataNode): void;
+    private _balanceTreePath;
+    private _recursiveTreeLayer;
+    /**
+     * Loads tree data. Caution: this method clears the tree before loading. It is not an incremental add.
+     * @param listOfData
+     */
+    load(listOfData: Array<RTreeDataNode>): void;
+    /**
+     * Gets the bounds of the root element of the tree - which encompasses all the children.
+     */
+    getBounds(): RectangleXY;
+    /**
+     * @deprecated
+     */
+    getExtents(): Extents;
+    /**
+     * Finds the record with the given ID and removes it if found, rebalancing the tree afterwards.
+     * @param id
+     */
+    removeById(id: string): RTreeRegion;
+    /**
+     * Internal method to remove a record. This method takes an optional list of nodes to add to the nodes we're reinserting
+     * after the record has been removed - an optimisation for the update case.
+     * @param r
+     * @param nodesToInsertAfterRemove
+     * @internal
+     */
+    private _doRemove;
+    /**
+     * Search for a data record by ID. This method is for retrieving data elements stored in the tree, not for searching the
+     * tree's rectangles.
+     * @param id
+     */
+    searchById(id: string): RTreeRegion;
+    /**
+     * Update the position of the given record. Internally this just removes the record and re-inserts it.
+     * @param id
+     * @param x
+     * @param y
+     * @param width
+     * @param height
+     * @param data
+     * @internal
+     */
+    update(id: string, x: number, y: number, width: number, height: number, data?: ObjectData): void;
+    clear(): void;
+    /**
+     * For debug purposes mostly.
+     * @internal
+     */
+    getLeafNodes(): Array<RTreeDataNode>;
+    /**
+     * Get all of the leaf nodes under the given focus.
+     * @param focus
+     * @private
+     */
+    private _findLeafNodes;
+}

package/types/core/rtree/util.d.ts

@@ -0,0 +1,55 @@
+import { RTreeRegion } from "./definitions";
+export declare function _growToFit(rectToGrow: RTreeRegion, otherRect: RTreeRegion): void;
+/**
+ * Adjust the bounds of `rect` so that they fit the bounds of its children, then if the rect has a parent, traverse up to the parent
+ * and invoke the method again.
+ * @param rect
+ * @private
+ */
+export declare function _updateRTreeRegionBounds(rect: RTreeRegion): void;
+export declare function _areaIfGrownBy(rectToGrow: RTreeRegion, otherRect: RTreeRegion): number;
+export declare function splitIntoSiblings(r: RTreeRegion): [RTreeRegion, RTreeRegion];
+/**
+ * Create a new, empty, RTree region
+ * @private
+ * @internal
+ */
+export declare function _emptyRTreeRegion(id?: string): RTreeRegion;
+/**
+ * Return whether or not the given region is a leaf
+ * @param r
+ * @internal
+ */
+export declare function _isLeaf(r: RTreeRegion): boolean;
+/**
+ * Return whether or not the given region has one or more leaf nodes
+ * @param r
+ * @internal
+ */
+export declare function _hasLeafNodes(r: RTreeRegion): boolean;
+/**
+ * Insert the given child into the given parent, set the parent flag on the child, and grow the parent to fit the new child.
+ * @param parentRect
+ * @param childRect
+ * @internal
+ */
+export declare function insertRTreeChild(parentRect: RTreeRegion, childRect: RTreeRegion): void;
+/**
+ * removes the given childRect from parentRect, by taking it out of parentRect's `children`. That is all this method does; there is
+ * no reordering of the tree. This method is designed to be used in conjunction with other methods that operate on the tree.
+ * @param parentRect
+ * @param childRect
+ * @internal
+ */
+export declare function removeRTreeChild(parentRect: RTreeRegion, childRect: RTreeRegion): boolean;
+/**
+ * @internal
+ * @param a
+ */
+export declare function flatten(a: Array<any>): Array<any>;
+/**
+ * @internal
+ * @param a
+ * @param mapFunc
+ */
+export declare function minBy<T, Q>(a: Array<T>, mapFunc: (t: T) => Q): T;

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

@@ -0,0 +1 @@
+export * from './visuallyjs-search';

package/types/core/search/visuallyjs-search.d.ts

@@ -0,0 +1,167 @@
+import { Edge, Group, Port, Node, VisuallyJsModel } from "..";
+/**
+ * @internal
+ */
+export type Token = {
+    token: string;
+    context: string;
+};
+/**
+ * @internal
+ */
+export type Tokenizer = (s: string) => Array<Token>;
+/**
+ * @internal
+ */
+export declare function WhitespaceReplacingTokenizer(value: string): Array<Token>;
+/**
+ * @internal
+ */
+export declare function DefaultSearchTokenizer(value: string): Array<Token>;
+/**
+ * @internal
+ */
+export type Sorter = (a: HasScore, b: HasScore) => number;
+export type SearchDocumentIdFunction = (doc: any) => string;
+export interface HasScore {
+    score: number;
+}
+export interface Hit extends HasScore {
+    document: any;
+    contexts: Array<string>;
+}
+/**
+ * Options for the search index.
+ * @group Search
+ */
+export interface SearchIndexOptions {
+    /**
+     * Optional list of fields to index. By default this is empty, meaning all fields (minus any `exclusions`) will be indexed.
+     */
+    fields?: Array<string>;
+    /**
+     * Optional limit for the number of result a search should return. Defaults to 10.
+     */
+    limit?: number;
+    /**
+     * Optional list of field names to omit from the documents stored for each node. This means that any field in this list will not be indexed.
+     */
+    exclusions?: Array<string>;
+    /**
+     * Whether or not the search index should ignore case. By default this is false.
+     */
+    caseSensitive?: boolean;
+    /**
+     * @internal
+     */
+    idFunction?: SearchDocumentIdFunction;
+    /**
+     * Function to use for sorting. Only "by score" is currently supported.
+     * @internal
+     */
+    sorter?: Sorter;
+    /**
+     * The tokenizer to use to split each field up into its parts.
+     * @internal
+     */
+    tokenizer?: Tokenizer;
+    /**
+     * The tokenizer to use to split a search term up into multiple matches. Not currently supported.
+     * @internal
+     */
+    searchTokenizer?: Tokenizer;
+}
+/**
+ * A document in the search index.
+ * @group Search
+ */
+export interface IndexDocument extends HasScore {
+    document: any;
+}
+/**
+ * @internal
+ */
+export interface IndexEntry {
+    index: number;
+    children: any;
+    documentIds: any;
+    key: string;
+}
+/**
+ * Index for a dataset
+ * @group Search
+ * @internal
+ */
+declare class DatasetIndex {
+    fields: Array<string>;
+    root: IndexEntry;
+    tokenizer: Tokenizer;
+    searchTokenizer: Tokenizer;
+    limit: number;
+    exclusions: Array<string>;
+    caseSensitive: boolean;
+    idFunction: SearchDocumentIdFunction;
+    sorter: Sorter;
+    private _nodeIdx;
+    private _makeNode;
+    private _documentMap;
+    private _documentList;
+    private _documentCount;
+    private _nodeMap;
+    constructor(options?: SearchIndexOptions);
+    private _storeNodeReferenceForDocument;
+    private _addToken;
+    private removeExclusions;
+    add(doc: any): void;
+    addAll(...docs: Array<any>): void;
+    reindex(doc: any): void;
+    remove(doc: any): void;
+    clear(): void;
+    getDocumentCount(): number;
+    getDocumentList(): Array<IndexDocument>;
+    getDocument(id: string): IndexDocument;
+    search(q: string, searchLimit?: number): Array<Hit>;
+}
+/**
+ * Results from a text search
+ * @group Search
+ */
+export type SearchResults = {
+    /**
+     * List of matching nodes found
+     */
+    nodes: Array<Node>;
+    /**
+     * List of matching groups found
+     */
+    groups: Array<Group>;
+    /**
+     * List of matching edges found
+     */
+    edges: Array<Edge>;
+    /**
+     * List of matching ports found
+     */
+    ports: Array<Port>;
+};
+/**
+ * Search index.
+ * @group Search
+ */
+export declare class Index {
+    instance: VisuallyJsModel;
+    nodeIndex: DatasetIndex;
+    groupIndex: DatasetIndex;
+    edgeIndex: DatasetIndex;
+    portIndex: DatasetIndex;
+    constructor(instance: VisuallyJsModel, options?: SearchIndexOptions);
+    private _indexNode;
+    private _indexGroup;
+    private _indexEdge;
+    /**
+     * Search the index for the given string.
+     * @param value
+     */
+    search(value: string): SearchResults;
+}
+export {};