@visuallyjs/browser-ui 1.0.0

package/types/core/geom.d.ts

@@ -0,0 +1,278 @@
+import { Grid, LineXY, PointXY, RectangleXY } from "./util";
+export type Quadrant = 1 | 2 | 3 | 4;
+/**
+ * Definition of 2 PI
+ * @internal
+ */
+export declare const TWO_PI: number;
+/**
+ * Adds the x and y values of the two points and returns a new point.
+ * @param p1
+ * @param p2
+ * @internal
+ */
+export declare function add(p1: PointXY, p2: PointXY): PointXY;
+/**
+ * Subtracts p2 from p1, returning a new point.
+ * @param p1
+ * @param p2
+ * @returns a new Point, with p2 subtracted from p1.
+ * @internal
+ */
+export declare function subtract(p1: PointXY, p2: PointXY): PointXY;
+/**
+ * Calculates the gradient of a line between the two points.
+ * @param p1 First point in the line
+ * @param p2 Second point in the line
+ * @returns The gradient of a line between the two points.
+ * @internal
+ */
+export declare function gradient(p1: PointXY, p2: PointXY): number;
+/**
+ * Calculates the gradient of a normal to a line between the two points.
+ * @param p1 First point in the line
+ * @param p2 Second point in the line
+ * @returns The gradient of a normal to a line between the two points.
+ * @internal
+ */
+export declare function normal(p1: PointXY, p2: PointXY): number;
+/**
+ * Calculates the length of a line between the two points.
+ * @param p1 First point in the line
+ * @param p2 Second point in the line
+ * @returns The length of a line between the two points.
+ * @internal
+ */
+export declare function lineLength(p1: PointXY, p2: PointXY): number;
+/**
+ * @internal
+ * @param p1
+ * @param p2
+ */
+export declare function manhattanLineLength(p1: PointXY, p2: PointXY): number;
+/**
+ * Calculates the quadrant in which the angle between the two points lies.
+ * @param p1 First point in the line
+ * @param p2 Second point in the line
+ * @returns The quadrant - 1 for upper right, 2 for lower right, 3 for lower left, 4 for upper left.
+ * @internal
+ */
+export declare function quadrant(p1: PointXY, p2: PointXY): Quadrant;
+/**
+ * Calculates the angle between the two points.
+ * @param p1 First point
+ * @param p2 Second point
+ * @returns The angle between the two points.
+ * @internal
+ * @deprecated Can probably replace this with Math.atan2 for better accuracy
+ */
+export declare function theta(p1: PointXY, p2: PointXY): number;
+/**
+ * Calculates whether or not the two rectangles intersect.
+ * @param r1 First rectangle
+ * @param r2 Second rectangle
+ * @returns True if the rectangles intersect, false otherwise.
+ * @internal
+ */
+export declare function rectanglesIntersect(r1: RectangleXY, r2: RectangleXY): boolean;
+/**
+ * Computes how much the two rectangles overlap, in square units.
+ * @param r1
+ * @param r2
+ */
+export declare function computeRectangleIntersection(r1: RectangleXY, r2: RectangleXY): number;
+/**
+ * Trim decimal points from a number. Defaults to 3 decimal points.
+ * @param n
+ * @param digits
+ * @internal
+ */
+export declare function fixPrecision(n: number, digits?: number): number;
+/**
+ * Compute the intersection of the two lines.
+ * @param l1
+ * @param l2
+ * @returns A point if an intersection found, null otherwise.
+ * @internal
+ */
+export declare function lineIntersection(l1: LineXY, l2: LineXY): PointXY | null;
+/**
+ * Finds all points where the given line intersects the given rectangle.
+ * @param line
+ * @param r
+ * @returns An array of intersection points. If there are no intersection points the array will be empty, but never null.
+ * @internal
+ */
+export declare function lineRectangleIntersection(line: LineXY, r: RectangleXY): Array<PointXY>;
+/**
+ * Returns true if the given line is either entirely within the given rectangle, or it intersects one of the faces of
+ * the given rectangle.
+ * @param line
+ * @param r
+ * @internal
+ */
+export declare function lineIntersectsOrIsEnclosedByRectangle(line: LineXY, r: RectangleXY): boolean;
+/**
+ * Calculates whether or not r2 is completely enclosed by r1.
+ * @param r1 First rectangle
+ * @param r2 Second rectangle
+ * @param [allowSharedEdges=false] If true, the concept of enclosure allows for one or more edges to be shared by the two rectangles.
+ * @returns True if r1 encloses r2, false otherwise.
+ * @internal
+ */
+export declare function encloses(r1: RectangleXY, r2: RectangleXY, allowSharedEdges?: boolean): boolean;
+/**
+ * Returns true if the given rectangle contains the given point.
+ * @param r
+ * @param p
+ * @param lax If true, the method will return true of the point lies on the rectangle border, otherwise the method will return false if the point lies on the border.
+ * @internal
+ */
+export declare function containsPoint(r: RectangleXY, p: PointXY, lax: boolean): boolean;
+/**
+ * Calculates a point on the line from `fromPoint` to `toPoint` that is `distance` units along the length of the line.
+ * @param fromPoint First point
+ * @param toPoint Second point
+ * @param distance Distance along the length that the point should be located.
+ * @returns Point on the line, in the form `{ x:..., y:... }`.
+ * @internal
+ */
+export declare function pointOnLine(fromPoint: PointXY, toPoint: PointXY, distance: number): PointXY;
+/**
+ * Calculates a line of length `length` that is perpendicular to the line from `fromPoint` to `toPoint`. The line that is
+ * returned has `toPoint` as its midpoint and extends (length/2) pixels in each direction from this point.
+ * @param fromPoint First point
+ * @param toPoint Second point
+ * @param length Length of the line to generate
+ * @returns Perpendicular line of the required length.
+ * @internal
+ */
+export declare function perpendicularLineTo(fromPoint: PointXY, toPoint: PointXY, length: number): LineXY;
+/**
+ * Returns a line that bisects, and is perpendicular to, the given line, having the requested length. The direction
+ * of the returned line is "clockwise" from the coordinates that are passed.
+ * @param fromPoint
+ * @param toPoint
+ * @param length
+ * @internal
+ */
+export declare function perpendicularBisectingLine(fromPoint: PointXY, toPoint: PointXY, length: number): LineXY;
+/**
+ * Snap the given x,y to a point on the grid defined by gridX and gridY, using the given thresholds to calculate proximity to the grid.
+ * @param pos Position to transform
+ * @param grid Definition of the grid
+ * @param thresholdX Defines how close to a grid line in the x axis a value must be in order to be snapped to it.
+ * @param thresholdY Defines how close to a grid line in the y axis a value must be in order to be snapped to it.
+ * @returns The point to which the position was snapped, given the constraints of the grid.
+ * @internal
+ */
+export declare function snapToGrid(pos: PointXY, grid: Grid, thresholdX?: number, thresholdY?: number): PointXY;
+/**
+ * @internal
+ * @param pos
+ * @param grid
+ */
+export declare function snapToGridUpperBound(pos: PointXY, grid: Grid): PointXY;
+/**
+ * Compute the point at which the two lines intersect. The lines are expected to be parallel and either vertical or horizontal.
+ * The method will return null if there is no intersection. If you supply lines that are not horizontal or vertical the results
+ * of this method are indeterminate.
+ * @internal
+ * @param line1Point1
+ * @param line1Point2
+ * @param line2Point1
+ * @param line2Point2
+ */
+export declare function linesIntersection(line1Point1: number, line1Point2: number, line2Point1: number, line2Point2: number): {
+    point1: number;
+    point2: number;
+};
+/**
+ * Returns whether or not the two given lines, which are expected to be parallel, overlap by an amount not less than `threshold`,
+ * which defaults to zero. If you supply lines that are not horizontal or vertical the results of this method are indeterminate.
+ * @param line1Point1
+ * @param line1Point2
+ * @param line2Point1
+ * @param line2Point2
+ * @param threshold
+ * @internal
+ */
+export declare function linesOverlap(line1Point1: number, line1Point2: number, line2Point1: number, line2Point2: number, threshold?: number): boolean;
+/**
+ * Expands the given rectangle by the given amount in each axis.
+ * @param r
+ * @param deltaX
+ * @param deltaY
+ * @internal
+ */
+export declare function expandRectangle<T extends RectangleXY>(r: RectangleXY, deltaX: number, deltaY: number): T;
+/**
+ * Find the intersection point of the two lines, which are treated as being of
+ * unlimited length, ie. if both lines are of non-zero length and are not parallel, then
+ * an intersection point is always returned even if they do not actually meet: their projections meet
+ * at the point this method returns.
+ * @param l1
+ * @param l2
+ * @internal
+ */
+export declare function intersectionOfProjectedLines(l1: LineXY, l2: LineXY): PointXY;
+/**
+ * Generates a line that is parallel to the given line, at the given distance
+ * away (where distance is applied perpendicular to the line)
+ * @param l
+ * @param distance
+ * @internal
+ */
+export declare function parallelLineTo(l: LineXY, distance: number): LineXY;
+/**
+ * Generates two lines that are parallel to the given line, at the given distance
+ * away (where distance is applied perpendicular to the line), one on either side of the line.
+ * @param l
+ * @param distance
+ * @internal
+ */
+export declare function parallelLinesTo(l: LineXY, distance: number): [LineXY, LineXY];
+/**
+ * Returns a line that is parallel to the line l, with start point p, and the given length.
+ * @param l
+ * @param p
+ * @param length
+ * @internal
+ */
+export declare function parallelLineFromPoint(l: LineXY, p: PointXY, length: number): LineXY;
+/**
+ * Compute the manhattan distance between the two points.
+ * @param x1
+ * @param y1
+ * @param x2
+ * @param y2
+ * @internal
+ */
+export declare const manhattanDistance: (x1: number, y1: number, x2: number, y2: number) => number;
+/**
+ * Compute the euclidean (ie straight line) distance between the two points
+ * @param x1
+ * @param y1
+ * @param x2
+ * @param y2
+ * @internal
+ */
+export declare const euclideanDistance: (x1: number, y1: number, x2: number, y2: number) => number;
+/**
+ * Compute the Chebyshev distance between the two points.
+ * @param x1
+ * @param y1
+ * @param x2
+ * @param y2
+ * @internal
+ */
+export declare const chebyshevDistance: (x1: number, y1: number, x2: number, y2: number) => number;
+/**
+ * Compute the Octile distance between the two points
+ * @param x1
+ * @param y1
+ * @param x2
+ * @param y2
+ * @internal
+ */
+export declare const octileDistance: (x1: number, y1: number, x2: number, y2: number) => number;

package/types/core/index.d.ts

@@ -0,0 +1,39 @@
+export * from './event-generator';
+export * from './model/defs';
+export * from './model/cluster';
+export * from './model/djikstra';
+export * from './model/floyd-warshall';
+export * from './model/graph';
+export * from './model/path';
+export * from './model/anchor';
+export * from './datamodel/data-model';
+export * from './datamodel/vertex-definition';
+export * from './layout';
+export * from "./geom";
+export * from './color-generator';
+export * from "./util";
+export * from "./astar";
+export * from './params';
+export * from './toolkit';
+export * from './io';
+export * from './csv-loader';
+export * from './autosaver';
+export * from './renderer';
+export * from './constants';
+export * from './event-constants';
+export * from './datasource';
+export * from './selection';
+export * from './filterable-dataset';
+export * from "./search";
+export * from './undo-redo/undo-redo';
+export * from './undo-redo/compound-action';
+export * from './undo-redo/group-action';
+export * from './undo-redo/move-action';
+export * from './undo-redo/node-group-action';
+export * from './undo-redo/port-action';
+export * from './undo-redo/update-action';
+export * from './undo-redo/renderer-vertex-removed-action';
+export * from './magnetizer';
+export * from './templates';
+export * from './router';
+export * from './rtree';

package/types/core/io.d.ts

@@ -0,0 +1,106 @@
+import { VisuallyJsModel } from "./toolkit";
+import { ObjectData } from "./model/graph";
+import { PointXY, Geometry } from "./util";
+import { ObjectAnchorSpec } from "./model/anchor";
+/**
+ * Options for a URL fetch.
+ * @group Model
+ * @category Input and Output
+ */
+export interface UrlFetchOptions {
+    type?: string;
+    url: string;
+    headers?: Record<string, any>;
+    success: (r: any) => any;
+    error?: (e: any, status?: any) => any;
+    dataType?: string;
+    data?: any;
+}
+/**
+ * Definition of a function that can parse JSON into a model. This is a high level interface that makes no assumptions about data format. You won't need to use this type unless you are writing your own parser.
+ * @group Model
+ * @category Input and Output
+ */
+export type Parser = (data: any, instance: VisuallyJsModel, parameters?: any) => any;
+/**
+ * Definition of a function that can export the contents of a model. This is a high level interface that makes no assumptions about data format. You won't need to use this type unless you are writing your own exporter.
+ * @group Model
+ * @category Input and Output
+ */
+export type Exporter = (instance: VisuallyJsModel, parameters: any) => any;
+/**
+ * The default type that represents an edge in a dataset to load or a saved dataset
+ */
+export interface EdgeData {
+    /**
+     * Either the ID of the source vertex or a canvas location.
+     */
+    source: string | PointXY;
+    /**
+     * Either the ID of the target vertex or a canvas location.
+     */
+    target: string | PointXY;
+    /**
+     * Optional data to associate with the edge
+     */
+    data?: ObjectData;
+    /**
+     * Optional geometry that defines the edge's path
+     */
+    geometry?: Geometry;
+    /**
+     * Cost to associate with the edge. Defaults to 1. This value can be used when computing shortest paths.
+     */
+    cost?: number;
+    /**
+     * Whether or not the given edge is directed, ie. when computing a path the edge can only be traversed from source to target. Defaults to false.
+     */
+    directed?: boolean;
+    /**
+     * Optional anchors for the edge.
+     */
+    anchors?: {
+        source?: ObjectAnchorSpec;
+        target?: ObjectAnchorSpec;
+    };
+}
+/**
+ * The default type that represents a node in a dataset to load or a saved dataset
+ */
+export type NodeData = Record<string, any>;
+/**
+ * The default type that represents a group in a dataset to load or a saved dataset
+ */
+export type GroupData = Record<string, any>;
+/**
+ * The default JSON format, consisting of optional lists of nodes, edges and groups.
+ * @group Model
+ * @category Input and Output
+ */
+export interface VisuallyJsDefaultJSON {
+    /**
+     * List of nodes.
+     */
+    nodes?: Array<NodeData>;
+    /**
+     * List of edges.
+     */
+    edges?: Array<EdgeData>;
+    /**
+     * List of groups.
+     */
+    groups?: Array<GroupData>;
+}
+export declare const JSON_DATATYPE = "json";
+export declare const HIERARCHICAL_JSON_DATATYPE = "hierarchical-json";
+export declare function registerParser(name: string, p: Parser): void;
+export declare function registerExporter(name: string, p: Exporter): void;
+export declare function parse(type: string, source: any, instance: VisuallyJsModel, parameters: any): any;
+/**
+ * Internal method that handles data export, by looking for an exporter registered for the given `type`.
+ * @param type Format to export the data in
+ * @param instance Model to export data from
+ * @param parameters Optional parameters for the exporter.
+ * @internal
+ */
+export declare function exportData(type: string, instance: VisuallyJsModel, parameters: any): any;

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

@@ -0,0 +1,91 @@
+import { AbstractLayout, InternalLayoutOptions, LayoutParameters } from "./abstract-layout";
+import { Node, Group, Vertex } from "../model/graph";
+import { DataSource } from "../datasource";
+import { PointXY, Size } from "../util";
+/**
+ * Parameters for a layout that extends {@link AbsoluteBackedLayout}
+ * @group Layouts
+ * @category Absolute
+ */
+export interface AbsoluteBackedLayoutParameters extends LayoutParameters {
+    /**
+     * Defaults to false. If true, then the layout will use any position values found in the data for a given vertex.
+     */
+    absoluteBacked?: boolean;
+}
+/**
+ * Constructor parameters for an {@link AbsoluteLayout}.
+ * @group Layouts
+ * @category Absolute
+ */
+export interface AbsoluteLayoutParameters extends AbsoluteBackedLayoutParameters {
+}
+/**
+ * Base class for layouts that want to be backed with an absolute layout, ie. if for a given vertex there is positioning data available in the dataset, that positioning data should be used instead of the layout's computed position. This class is abstract and cannot be instantiated - use {@link AbsoluteLayout} for the simplest concrete implementation of this class.
+ * @group Layouts
+ * @category Absolute
+ */
+export declare abstract class AbsoluteBackedLayout<P extends AbsoluteBackedLayoutParameters> extends AbstractLayout<P> {
+    private readonly _$_suppliedLocationFunction;
+    /**
+     * @internal
+     */
+    absoluteBacked: boolean;
+    /**
+     * @internal
+     */
+    protected constructor(params: InternalLayoutOptions<P>);
+    protected $_findLocation(v: Vertex, parameters?: AbsoluteBackedLayoutParameters): PointXY;
+    /**
+     * @internal
+     */
+    begin(model: DataSource, positionGetter: (id: string) => PointXY, positionSetter: (id: string, x: number, y: number) => void, sizes: Record<string, Size>, parameters: AbsoluteBackedLayoutParameters): void;
+    /**
+     * @internal
+     */
+    step(model: DataSource, getPosition: (id: string) => PointXY, setPosition: (id: string, x: number, y: number) => void, sizes: Record<string, Size>, parameters: AbsoluteBackedLayoutParameters): void;
+    /**
+     * @internal
+     */
+    end(model: DataSource, getPosition: (id: string) => PointXY, setPosition: (id: string, x: number, y: number) => void, sizes: Record<string, Size>, parameters: AbsoluteBackedLayoutParameters): void;
+    /**
+     * @internal
+     */
+    reset(): void;
+    /**
+     * Gets the position for the given Node/Group as dictated by either the `left`/`top` properties, or some other nominated pair, in the Node/Group's data. This position is what the Absolute layout uses itself, and this method exposes the absolute position for subclasses that wish to make use of the absolute backing.
+     * @param v Node/Group to get absolute position for.
+     * @param parameters Constructor parameters. May contain a custom `locationFunction`.
+     *
+     */
+    getAbsolutePosition(v: Node | Group, parameters?: LayoutParameters): PointXY;
+}
+/**
+ * Constant identifying an Absolute layout.
+ * @group Constants
+ */
+export declare const LAYOUT_TYPE_ABSOLUTE = "Absolute";
+/**
+ * This layout uses the positions defined in your data model to position elements, unless you provide a `locationFunction` in its options. This is the default layout that the UI uses.
+ * @group Layouts
+ * @category Absolute
+ */
+export declare class AbsoluteLayout extends AbsoluteBackedLayout<AbsoluteLayoutParameters> {
+    /**
+     * Defines the AbsoluteLayout type. You can use this reference in render params.
+     *
+     */
+    static type: string;
+    /**
+     * @internal
+     */
+    readonly type: string;
+    /**
+     * @internal
+     */
+    constructor(params: InternalLayoutOptions<AbsoluteLayoutParameters>);
+    /**
+     * @internal
+     */
+    getDefaultParameters(): Record<string, any>;
+}

package/types/core/layout/abstract-layout-adapter.d.ts

@@ -0,0 +1,17 @@
+import { Base, Group, Node } from "../model/graph";
+import { Size } from "../util";
+/**
+ * Base class for an object that a layout can use to find information about the size and position of rendered elements, as well as to filter elements it should handle. This is subclassed in {@link CanvasLayoutAdapter} and {@link GroupLayoutAdapter}
+ * currently.
+ * @internal
+ */
+export declare abstract class AbstractLayoutAdapter<E> {
+    abstract filter(obj: Base): boolean;
+    abstract getElements(): Array<Node | Group>;
+    abstract getSize(el: E): Size;
+    abstract getViewportPositionById(id: string): {
+        r?: number;
+        width: number;
+        height: number;
+    };
+}