trassel
Version:
Graph computing in JavaScript
228 lines (227 loc) • 7.92 kB
TypeScript
/**
* The WebGL renderer class is a bit messy right now, and some functionality should be broken out into separate files.
* There are also several performance optimizations that could be made. Most especially with regards to text and culling of edges.
* This started out as a "basic" renderer, but grew into a playground for fun and interesting ideas.
*/
export class WebGLRenderer {
constructor(element: any, nodes: any, edges: any, options: any);
element: any;
nodes: any;
edges: any;
options: any;
renderer: any;
stage: any;
backdrop: any;
resizeObserver: ResizeObserver | null;
lassoEnabled: boolean;
lineType: any;
LINE_MARGIN_PX: number;
sceneSize: number;
primaryColor: any;
backgroundColor: any;
listeners: Map<string, Set<any>>;
markers: {
none: string;
arrow: string;
hollowArrow: string;
};
/**
* Registers an event listener
* @param {string} name - Event name to listen for
* @param {(...any) => any} fn - Callback on event
*/
on(name: string, fn: (...any: any[]) => any): void;
triggerEvent(name: any, payload: any): void;
/**
* Initializes the main renderer classes and variables
*/
initializeRenderer(): void;
worldWidth: number | undefined;
worldHeight: number | undefined;
/**
* Makes the canvas panable (dragable) and interactive
*/
initializePanAndBackdropEvents(): void;
/**
* makes the canvas zoomable
*/
initializeZoom(): void;
/**
* Makes the canvas auto resize when the parent element size changes
*/
initializeResizer(): void;
/**
* Initializes all the graphics for provided nodes and edges
* @param {import("../model/rendereroptions").INodeWithRendererOptions[]} nodes
* @param {import("../model/rendereroptions").IEdgeWithRendererOptions[]} edges
*/
initializeData(nodes: import("../model/rendereroptions").INodeWithRendererOptions[], edges: import("../model/rendereroptions").IEdgeWithRendererOptions[]): void;
/**
* Initializes counters for how many edges exist between different sets of nodes
*/
initializeEdgeCounters(): void;
/**
* Initializes the lasso
*/
initializeLasso(): void;
/**
* Toggles the lasso selector on and off
* @param {boolean} newStatus - If provided the lasso status will be set, otherwise toggled
*/
toggleLasso(newStatus: boolean): void;
/**
* Selects or deselects a node.
* @param {import("../model/rendereroptions").INodeWithRendererOptions} node
* @param {boolean} value - Optional value to set. If ommitted current value will be toggled.
*/
toggleSelectNode(node: import("../model/rendereroptions").INodeWithRendererOptions, value?: boolean): void;
/**
* Updates the nodes and edges in the renderer.
* @param {import("../model/rendereroptions").INodeWithRendererOptions[]} nodes
* @param {import("../model/rendereroptions").IEdgeWithRendererOptions[]} edges
*/
updateNodesAndEdges(nodes: import("../model/rendereroptions").INodeWithRendererOptions[], edges: import("../model/rendereroptions").IEdgeWithRendererOptions[]): void;
/**
* Returns if the node is selected or not
* @param {import("../model/ibasicnode").IBasicNode} - Node to check
* @returns {boolean} - selected status
*/
isNodeSelected(node: any): boolean;
/**
* Clears all node selections
*/
clearAllNodeSelections(): void;
/**
* Sets the line type for edges
* @param {"line" | "taxi" | "orthogonal" | "cubicbezier"} newType
*/
setLineType(newType: "line" | "taxi" | "orthogonal" | "cubicbezier"): void;
/**
* scales and moves the view so that all nodes are included in the view
* @param {number} duration - Time in milliseconds for the transition
*/
zoomToFit(duration?: number): void;
/**
* Sets new coordinates and scale for the renderer's stage
* @param {number} x
* @param {number} y
* @param {number} scale
*/
setTransform(x: number, y: number, scale: number): void;
/**
* Takes coordinates from the viewport as input and returns the local (relative) coordinates in the graph
* @param {number} x - Viewport X coordinate
* @param {number} y - Viewport Y coordinate
*/
viewportToLocalCoordinates(x: number, y: number): {
x: any;
y: any;
};
/**
* Takes coordinates from the graph as input and returns the corresponding viewport coordinates
* @param {number} x - Local X coordinate
* @param {number} y - Local Y coordinate
*/
localToViewportCoordinates(x: number, y: number): {
x: any;
y: any;
};
/**
* disables and grays out nodes that match a given filter function.
* Connected edges will also be disabled.
* @param {import("../model/rendereroptions").INodeWithRendererOptions => boolean} fn - filter function for nodes
*/
disableNodes(fn: any): void;
/**
* Clears all disabled statuses on nodes and edges
*/
clearAllDisabledStatuses(): void;
/**
* Cleanup function when dismounting.
*/
dismount(): void;
/**
* Calculates the point where the edge between the source and target node intersects the border of the target node.
* @param {{shape: string, x: number, y: number}} source - source node of the edge
* @param {{shape: string, x: number, y: number}} target - target node of the edge
* @param {number} additionalDistance - additional distance, or what is essentially a padding.
* @returns {{x: number, y: number}}
*/
calculateIntersection(source: {
shape: string;
x: number;
y: number;
}, target: {
shape: string;
x: number;
y: number;
}, additionalDistance: number): {
x: number;
y: number;
};
/**
* Calculates the angle for a label in the graph
* @param {{x: number, y: number}} point1 - First vector of the edge
* @param {{x: number, y: number}} point2 - Second vector of the edge
*/
computeLabelAngle(point1: {
x: number;
y: number;
}, point2: {
x: number;
y: number;
}): number;
/**
* Calculates a point between two points for creating a curved line.
* @param {object} source - Point where the source node is intersected by the edge
* @param {object} target - Point where the target node is intersected by the edge
* @param {{total: number, index: number}} edgeCounter - Edge counter
*/
computeCurvePoint(source: object, target: object, edgeCounter: {
total: number;
index: number;
}): {
x: any;
y: any;
};
/**
* Calculates the radian of an angle.
* @param {number} angle
*/
computeRadian(angle: number): number;
/**
* Calculates edges to its input and stores the point for the labels. Only for circle shaped nodes!
* @param {{radius: number, x: number, y: number}} node - Edge to be processed
* @param {{total: number, index: number}} edgeCounter - Edge to be processed
* @param {number} additionalDistance - Additional padding in px
*/
computeSelfEdgePath(node: {
radius: number;
x: number;
y: number;
}, edgeCounter: {
total: number;
index: number;
}, additionalDistance?: number): {
start: {
x: number;
y: number;
};
end: {
x: number;
y: number;
};
curvePoint: {
x: number;
y: number;
};
label: {
x: number;
y: number;
};
};
/**
* Main render function that updates the canvas
*/
render(): void;
}