import { GraphConfig, GraphConfigInterface } from './config'; import { GraphData } from './modules/GraphData'; export declare class Graph { config: GraphConfig; graph: GraphData; private canvas; private attributionDivElement; private canvasD3Selection; private reglInstance; private requestAnimationFrameId; private isRightClickMouse; private store; private points; private lines; private forceGravity; private forceCenter; private forceManyBody; private forceLinkIncoming; private forceLinkOutgoing; private forceMouse; private clusters; private zoomInstance; private dragInstance; private fpsMonitor; private currentEvent; /** * The value of `_findHoveredItemExecutionCount` is incremented by 1 on each animation frame. * When the counter reaches MAX_HOVER_DETECTION_DELAY (default 4), it is reset to 0 and the `findHoveredPoint` or `findHoveredLine` method is executed. */ private _findHoveredItemExecutionCount; /** * If the mouse is not on the Canvas, the `findHoveredPoint` or `findHoveredLine` method will not be executed. */ private _isMouseOnCanvas; /** * After setting data and render graph at a first time, the fit logic will run * */ private _isFirstRenderAfterInit; private _fitViewOnInitTimeoutID; private isPointPositionsUpdateNeeded; private isPointColorUpdateNeeded; private isPointSizeUpdateNeeded; private isPointShapeUpdateNeeded; private isPointImageIndicesUpdateNeeded; private isLinksUpdateNeeded; private isLinkColorUpdateNeeded; private isLinkWidthUpdateNeeded; private isLinkArrowUpdateNeeded; private isPointClusterUpdateNeeded; private isForceManyBodyUpdateNeeded; private isForceLinkUpdateNeeded; private isForceCenterUpdateNeeded; private isPointImageSizesUpdateNeeded; private _isDestroyed; constructor(div: HTMLDivElement, config?: GraphConfigInterface); /** * Returns the current simulation progress */ get progress(): number; /** * A value that gives information about the running simulation status. */ get isSimulationRunning(): boolean; /** * The maximum point size. * This value is the maximum size of the `gl.POINTS` primitive that WebGL can render on the user's hardware. */ get maxPointSize(): number; /** * Set or update Cosmos configuration. The changes will be applied in real time. * @param config Cosmos configuration object. */ setConfig(config: Partial): void; /** * Sets the positions for the graph points. * * @param {Float32Array} pointPositions - A Float32Array representing the positions of points in the format [x1, y1, x2, y2, ..., xn, yn], * where `n` is the index of the point. * Example: `new Float32Array([1, 2, 3, 4, 5, 6])` sets the first point to (1, 2), the second point to (3, 4), and so on. * @param {boolean | undefined} dontRescale - For this call only, don't rescale the points. * - `true`: Don't rescale. * - `false` or `undefined` (default): Use the behavior defined by `config.rescalePositions`. */ setPointPositions(pointPositions: Float32Array, dontRescale?: boolean | undefined): void; /** * Sets the colors for the graph points. * * @param {Float32Array} pointColors - A Float32Array representing the colors of points in the format [r1, g1, b1, a1, r2, g2, b2, a2, ..., rn, gn, bn, an], * where each color is represented in RGBA format. * Example: `new Float32Array([255, 0, 0, 1, 0, 255, 0, 1])` sets the first point to red and the second point to green. */ setPointColors(pointColors: Float32Array): void; /** * Gets the current colors of the graph points. * * @returns {Float32Array} A Float32Array representing the colors of points in the format [r1, g1, b1, a1, r2, g2, b2, a2, ..., rn, gn, bn, an], * where each color is in RGBA format. Returns an empty Float32Array if no point colors are set. */ getPointColors(): Float32Array; /** * Sets the sizes for the graph points. * * @param {Float32Array} pointSizes - A Float32Array representing the sizes of points in the format [size1, size2, ..., sizen], * where `n` is the index of the point. * Example: `new Float32Array([10, 20, 30])` sets the first point to size 10, the second point to size 20, and the third point to size 30. */ setPointSizes(pointSizes: Float32Array): void; /** * Sets the shapes for the graph points. * * @param {Float32Array} pointShapes - A Float32Array representing the shapes of points in the format [shape1, shape2, ..., shapen], * where `n` is the index of the point and each shape value corresponds to a PointShape enum: * 0 = Circle, 1 = Square, 2 = Triangle, 3 = Diamond, 4 = Pentagon, 5 = Hexagon, 6 = Star, 7 = Cross, 8 = None. * Example: `new Float32Array([0, 1, 2])` sets the first point to Circle, the second point to Square, and the third point to Triangle. * Images are rendered above shapes. */ setPointShapes(pointShapes: Float32Array): void; /** * Sets the images for the graph points using ImageData objects. * Images are rendered above shapes. * To use images, provide image indices via setPointImageIndices(). * * @param {ImageData[]} imageDataArray - Array of ImageData objects to use as point images. * Example: `setImageData([imageData1, imageData2, imageData3])` */ setImageData(imageDataArray: ImageData[]): void; /** * Sets which image each point should use from the images array. * Images are rendered above shapes. * * @param {Float32Array} imageIndices - A Float32Array representing which image each point uses in the format [index1, index2, ..., indexn], * where `n` is the index of the point and each value is an index into the images array provided to `setImageData`. * Example: `new Float32Array([0, 1, 0])` sets the first point to use image 0, second point to use image 1, third point to use image 0. */ setPointImageIndices(imageIndices: Float32Array): void; /** * Sets the sizes for the point images. * * @param {Float32Array} imageSizes - A Float32Array representing the sizes of point images in the format [size1, size2, ..., sizen], * where `n` is the index of the point. * Example: `new Float32Array([10, 20, 30])` sets the first image to size 10, the second image to size 20, and the third image to size 30. */ setPointImageSizes(imageSizes: Float32Array): void; /** * Gets the current sizes of the graph points. * * @returns {Float32Array} A Float32Array representing the sizes of points in the format [size1, size2, ..., sizen], * where `n` is the index of the point. Returns an empty Float32Array if no point sizes are set. */ getPointSizes(): Float32Array; /** * Sets the links for the graph. * * @param {Float32Array} links - A Float32Array representing the links between points * in the format [source1, target1, source2, target2, ..., sourcen, targetn], * where `source` and `target` are the indices of the points being linked. * Example: `new Float32Array([0, 1, 1, 2])` creates a link from point 0 to point 1 and another link from point 1 to point 2. */ setLinks(links: Float32Array): void; /** * Sets the colors for the graph links. * * @param {Float32Array} linkColors - A Float32Array representing the colors of links in the format [r1, g1, b1, a1, r2, g2, b2, a2, ..., rn, gn, bn, an], * where each color is in RGBA format. * Example: `new Float32Array([255, 0, 0, 1, 0, 255, 0, 1])` sets the first link to red and the second link to green. */ setLinkColors(linkColors: Float32Array): void; /** * Gets the current colors of the graph links. * * @returns {Float32Array} A Float32Array representing the colors of links in the format [r1, g1, b1, a1, r2, g2, b2, a2, ..., rn, gn, bn, an], * where each color is in RGBA format. Returns an empty Float32Array if no link colors are set. */ getLinkColors(): Float32Array; /** * Sets the widths for the graph links. * * @param {Float32Array} linkWidths - A Float32Array representing the widths of links in the format [width1, width2, ..., widthn], * where `n` is the index of the link. * Example: `new Float32Array([1, 2, 3])` sets the first link to width 1, the second link to width 2, and the third link to width 3. */ setLinkWidths(linkWidths: Float32Array): void; /** * Gets the current widths of the graph links. * * @returns {Float32Array} A Float32Array representing the widths of links in the format [width1, width2, ..., widthn], * where `n` is the index of the link. Returns an empty Float32Array if no link widths are set. */ getLinkWidths(): Float32Array; /** * Sets the arrows for the graph links. * * @param {boolean[]} linkArrows - An array of booleans indicating whether each link should have an arrow, * in the format [arrow1, arrow2, ..., arrown], where `n` is the index of the link. * Example: `[true, false, true]` sets arrows on the first and third links, but not on the second link. */ setLinkArrows(linkArrows: boolean[]): void; /** * Sets the strength for the graph links. * * @param {Float32Array} linkStrength - A Float32Array representing the strength of each link in the format [strength1, strength2, ..., strengthn], * where `n` is the index of the link. * Example: `new Float32Array([1, 2, 3])` sets the first link to strength 1, the second link to strength 2, and the third link to strength 3. */ setLinkStrength(linkStrength: Float32Array): void; /** * Sets the point clusters for the graph. * * @param {(number | undefined)[]} pointClusters - Array of cluster indices for each point in the graph. * - Index: Each index corresponds to a point. * - Values: Integers starting from 0; `undefined` indicates that a point does not belong to any cluster and will not be affected by cluster forces. * @example * `[0, 1, 0, 2, undefined, 1]` maps points to clusters: point 0 and 2 to cluster 0, point 1 to cluster 1, and point 3 to cluster 2. * Points 4 is unclustered. * @note Clusters without specified positions via `setClusterPositions` will be positioned at their centermass by default. */ setPointClusters(pointClusters: (number | undefined)[]): void; /** * Sets the positions of the point clusters for the graph. * * @param {(number | undefined)[]} clusterPositions - Array of cluster positions. * - Every two elements represent the x and y coordinates for a cluster position. * - `undefined` means the cluster's position is not defined and will use centermass positioning instead. * @example * `[10, 20, 30, 40, undefined, undefined]` places the first cluster at (10, 20) and the second at (30, 40); * the third cluster will be positioned at its centermass automatically. */ setClusterPositions(clusterPositions: (number | undefined)[]): void; /** * Sets the force strength coefficients for clustering points in the graph. * * This method allows you to customize the forces acting on individual points during the clustering process. * The force coefficients determine the strength of the forces applied to each point. * * @param {Float32Array} clusterStrength - A Float32Array of force strength coefficients for each point in the format [coeff1, coeff2, ..., coeffn], * where `n` is the index of the point. * Example: `new Float32Array([1, 0.4, 0.3])` sets the force coefficient for point 0 to 1, point 1 to 0.4, and point 2 to 0.3. */ setPointClusterStrength(clusterStrength: Float32Array): void; /** * Sets which points are pinned (fixed) in position. * * Pinned points: * - Do not move due to physics forces (gravity, repulsion, link forces, etc.) * - Still participate in force calculations (other nodes are attracted to/repelled by them) * - Can still be dragged by the user if `enableDrag` is true * * @param {number[] | null} pinnedIndices - Array of point indices to pin. Set to `[]` or `null` to unpin all points. * @example * // Pin points 0 and 5 * graph.setPinnedPoints([0, 5]) * * // Unpin all points * graph.setPinnedPoints([]) * graph.setPinnedPoints(null) */ setPinnedPoints(pinnedIndices: number[] | null): void; /** * Renders the graph and starts rendering. * Does NOT modify simulation state - use start(), stop(), pause(), unpause() to control simulation. * * @param {number} [simulationAlpha] - Optional alpha value to set. * - If 0: Sets alpha to 0, simulation stops after one frame (graph becomes static). * - If positive: Sets alpha to that value. * - If undefined: Keeps current alpha value. */ render(simulationAlpha?: number): void; /** * Center the view on a point and zoom in, by point index. * @param index The index of the point in the array of points. * @param duration Duration of the animation transition in milliseconds (`700` by default). * @param scale Scale value to zoom in or out (`3` by default). * @param canZoomOut Set to `false` to prevent zooming out from the point (`true` by default). */ zoomToPointByIndex(index: number, duration?: number, scale?: number, canZoomOut?: boolean): void; /** * Zoom the view in or out to the specified zoom level. * @param value Zoom level * @param duration Duration of the zoom in/out transition. */ zoom(value: number, duration?: number): void; /** * Zoom the view in or out to the specified zoom level. * @param value Zoom level * @param duration Duration of the zoom in/out transition. */ setZoomLevel(value: number, duration?: number): void; /** * Get zoom level. * @returns Zoom level value of the view. */ getZoomLevel(): number; /** * Get current X and Y coordinates of the points. * @returns Array of point positions. */ getPointPositions(): number[]; /** * Get current X and Y coordinates of the clusters. * @returns Array of point cluster. */ getClusterPositions(): number[]; /** * Center and zoom in/out the view to fit all points in the scene. * @param duration Duration of the center and zoom in/out animation in milliseconds (`250` by default). * @param padding Padding around the viewport in percentage (`0.1` by default). */ fitView(duration?: number, padding?: number): void; /** * Center and zoom in/out the view to fit points by their indices in the scene. * @param duration Duration of the center and zoom in/out animation in milliseconds (`250` by default). * @param padding Padding around the viewport in percentage */ fitViewByPointIndices(indices: number[], duration?: number, padding?: number): void; /** * Center and zoom in/out the view to fit points by their positions in the scene. * @param duration Duration of the center and zoom in/out animation in milliseconds (`250` by default). * @param padding Padding around the viewport in percentage */ fitViewByPointPositions(positions: number[], duration?: number, padding?: number): void; /** * Get points indices inside a rectangular area. * @param selection - Array of two corner points `[[left, top], [right, bottom]]`. * The `left` and `right` coordinates should be from 0 to the width of the canvas. * The `top` and `bottom` coordinates should be from 0 to the height of the canvas. * @returns A Float32Array containing the indices of points inside a rectangular area. */ getPointsInRect(selection: [[number, number], [number, number]]): Float32Array; /** * Get points indices inside a rectangular area. * @param selection - Array of two corner points `[[left, top], [right, bottom]]`. * The `left` and `right` coordinates should be from 0 to the width of the canvas. * The `top` and `bottom` coordinates should be from 0 to the height of the canvas. * @returns A Float32Array containing the indices of points inside a rectangular area. * @deprecated Use `getPointsInRect` instead. This method will be removed in a future version. */ getPointsInRange(selection: [[number, number], [number, number]]): Float32Array; /** * Get points indices inside a polygon area. * @param polygonPath - Array of points `[[x1, y1], [x2, y2], ..., [xn, yn]]` that defines the polygon. * The coordinates should be from 0 to the width/height of the canvas. * @returns A Float32Array containing the indices of points inside the polygon area. */ getPointsInPolygon(polygonPath: [number, number][]): Float32Array; /** Select points inside a rectangular area. * @param selection - Array of two corner points `[[left, top], [right, bottom]]`. * The `left` and `right` coordinates should be from 0 to the width of the canvas. * The `top` and `bottom` coordinates should be from 0 to the height of the canvas. */ selectPointsInRect(selection: [[number, number], [number, number]] | null): void; /** Select points inside a rectangular area. * @param selection - Array of two corner points `[[left, top], [right, bottom]]`. * The `left` and `right` coordinates should be from 0 to the width of the canvas. * The `top` and `bottom` coordinates should be from 0 to the height of the canvas. * @deprecated Use `selectPointsInRect` instead. This method will be removed in a future version. */ selectPointsInRange(selection: [[number, number], [number, number]] | null): void; /** Select points inside a polygon area. * @param polygonPath - Array of points `[[x1, y1], [x2, y2], ..., [xn, yn]]` that defines the polygon. * The coordinates should be from 0 to the width/height of the canvas. * Set to null to clear selection. */ selectPointsInPolygon(polygonPath: [number, number][] | null): void; /** * Select a point by index. If you want the adjacent points to get selected too, provide `true` as the second argument. * @param index The index of the point in the array of points. * @param selectAdjacentPoints When set to `true`, selects adjacent points (`false` by default). */ selectPointByIndex(index: number, selectAdjacentPoints?: boolean): void; /** * Select multiples points by their indices. * @param indices Array of points indices. */ selectPointsByIndices(indices?: (number | undefined)[] | null): void; /** * Unselect all points. */ unselectPoints(): void; /** * Get indices of points that are currently selected. * @returns Array of selected indices of points. */ getSelectedIndices(): number[] | null; /** * Get indices that are adjacent to a specific point by its index. * @param index Index of the point. * @returns Array of adjacent indices. */ getAdjacentIndices(index: number): number[] | undefined; /** * Converts the X and Y point coordinates from the space coordinate system to the screen coordinate system. * @param spacePosition Array of x and y coordinates in the space coordinate system. * @returns Array of x and y coordinates in the screen coordinate system. */ spaceToScreenPosition(spacePosition: [number, number]): [number, number]; /** * Converts the X and Y point coordinates from the screen coordinate system to the space coordinate system. * @param screenPosition Array of x and y coordinates in the screen coordinate system. * @returns Array of x and y coordinates in the space coordinate system. */ screenToSpacePosition(screenPosition: [number, number]): [number, number]; /** * Converts the point radius value from the space coordinate system to the screen coordinate system. * @param spaceRadius Radius of point in the space coordinate system. * @returns Radius of point in the screen coordinate system. */ spaceToScreenRadius(spaceRadius: number): number; /** * Get point radius by its index. * @param index Index of the point. * @returns Radius of the point. */ getPointRadiusByIndex(index: number): number | undefined; /** * Track multiple point positions by their indices on each Cosmos tick. * @param indices Array of points indices. */ trackPointPositionsByIndices(indices: number[]): void; /** * Get current X and Y coordinates of the tracked points. * Do not mutate the returned map - it may affect future calls. * @returns A ReadonlyMap where keys are point indices and values are their corresponding X and Y coordinates in the [number, number] format. * @see trackPointPositionsByIndices To set which points should be tracked */ getTrackedPointPositionsMap(): ReadonlyMap; /** * Get current X and Y coordinates of the tracked points as an array. * @returns Array of point positions in the format [x1, y1, x2, y2, ..., xn, yn] for tracked points only. * The positions are ordered by the tracking indices (same order as provided to trackPointPositionsByIndices). * Returns an empty array if no points are being tracked. */ getTrackedPointPositionsArray(): number[]; /** * For the points that are currently visible on the screen, get a sample of point indices with their coordinates. * The resulting number of points will depend on the `pointSamplingDistance` configuration property, * and the sampled points will be evenly distributed. * @returns A Map object where keys are the index of the points and values are their corresponding X and Y coordinates in the [number, number] format. */ getSampledPointPositionsMap(): Map; /** * For the points that are currently visible on the screen, get a sample of point indices and positions. * The resulting number of points will depend on the `pointSamplingDistance` configuration property, * and the sampled points will be evenly distributed. * @returns An object containing arrays of point indices and positions. */ getSampledPoints(): { indices: number[]; positions: number[]; }; /** * Gets the X-axis of rescaling function. * * This scale is automatically created when position rescaling is enabled. */ getScaleX(): ((x: number) => number) | undefined; /** * Gets the Y-axis of rescaling function. * * This scale is automatically created when position rescaling is enabled. */ getScaleY(): ((y: number) => number) | undefined; /** * Start the simulation. * This only controls the simulation state, not rendering. * @param alpha Value from 0 to 1. The higher the value, the more initial energy the simulation will get. */ start(alpha?: number): void; /** * Stop the simulation. This stops the simulation and resets its state. * Use start() to begin a new simulation cycle. */ stop(): void; /** * Pause the simulation. When paused, the simulation stops running * but preserves its current state (progress, alpha). * Can be resumed using the unpause method. */ pause(): void; /** * Unpause the simulation. This method resumes a paused * simulation and continues its execution. */ unpause(): void; /** * Restart/Resume the simulation. This method unpauses a paused * simulation and resumes its execution. * @deprecated Use `unpause()` instead. This method will be removed in a future version. */ restart(): void; /** * Run one step of the simulation manually. * Works even when the simulation is paused. */ step(): void; /** * Destroy this Cosmos instance. */ destroy(): void; /** * Updates and recreates the graph visualization based on pending changes. */ create(): void; /** * Converts an array of tuple positions to a single array containing all coordinates sequentially * @param pointPositions An array of tuple positions * @returns A flatten array of coordinates */ flatten(pointPositions: [number, number][]): number[]; /** * Converts a flat array of point positions to a tuple pairs representing coordinates * @param pointPositions A flattened array of coordinates * @returns An array of tuple positions */ pair(pointPositions: number[]): [number, number][]; /** * Updates and recreates the graph visualization based on pending changes. * * @param simulationAlpha - Optional alpha value to set. If not provided, keeps current alpha. */ private update; /** * Runs one step of the simulation (forces, position updates, alpha decay). * This is the core simulation logic that can be called by step() or during rendering. * * @param forceExecution - Controls whether to run the simulation step when paused. * - If true: Always runs the simulation step, even when isSimulationRunning is false. * Used by step() to allow manual stepping while the simulation is paused. * - If false: Only runs if isSimulationRunning is true. Used during rendering * to respect pause/unpause state. */ private runSimulationStep; private initPrograms; /** * The rendering loop - schedules itself to run continuously */ private frame; /** * Renders a single frame (the actual rendering logic). * This does NOT schedule the next frame. */ private renderFrame; private stopFrames; /** * Starts continuous rendering */ private startFrames; /** * Called automatically when simulation completes (alpha < ALPHA_MIN). * Rendering continues after this is called (for rendering/interaction). */ private end; private onClick; private updateMousePosition; private onMouseMove; private onRightClickMouse; private resizeCanvas; private setZoomTransformByPointPositions; private updateZoomDragBehaviors; private findHoveredItem; private findHoveredPoint; private findHoveredLine; private updateCanvasCursor; private addAttribution; } export type { GraphConfigInterface } from './config'; export { PointShape } from './modules/GraphData'; export * from './helper';