@neo4j-nvl/base 0.3.1-3ce43a8b

package/dist/types/renderers/canvasrenderer/arrows/arrows.d.ts

@@ -0,0 +1,50 @@
+import type { Node, Relationship } from '../../../types/graph-element';
+import type { Point } from '../../../utils/geometry';
+import type ArrowBundle from './ArrowBundle';
+/**
+ * This function calculates the difference in radius between two nodes.
+ * @param {number} toArrowGap - The gap between the node and the arrow on the to side.
+ * @param {number} fromArrowGap - The gap between the node and the arrow on the from side.
+ * @returns {number} The difference in radius between the two nodes.
+ * @comment can be affected for example by the label crust and selected ring
+ * as well as a gap between the node and the arrow on it's side.
+ */
+export declare const getRadiusDifference: (toArrowGap: number, fromArrowGap: number) => number;
+/**
+ * This function calculates the coordinates of the via point
+ * between two nodes. The via point is used to bend the edge
+ * between the two nodes.
+ * @param {Node} fromNode - The node the edge starts from.
+ * @param {Node} toNode - The node the edge ends at.
+ * @param {number} fromArrowGap - The gap between the node and the arrow on the from side.
+ * @param {number} toArrowGap - The gap between the node and the arrow on the to side.
+ * @returns {Point} The coordinates of the via point.
+ */
+export declare const getViaCoordinates: (fromNode: Node, toNode: Node, fromArrowGap: number, toArrowGap: number, rel: Relationship, bundle: ArrowBundle) => Point;
+export declare const getPointsForStraight: (rel: Relationship, bundle: ArrowBundle, fromNode: Node, toNode: Node, showLabel: boolean, curved?: boolean) => Point[];
+/**
+ * Draws a label for a relationship
+ * @param {CanvasRenderingContext2D} ctx - the canvas context
+ * @param {number} x - the x coordinate of the label
+ * @param {number} y - the y coordinate of the label
+ * @param {number} angle - the angle of the label
+ * @param {number} maxWidth - the maximum width of the label
+ * @param {Relationship} rel - the relationship
+ * @param {boolean} flip - whether to flip the label
+ */
+export declare const drawLabel: (ctx: CanvasRenderingContext2D, point: Point, angle: number, maxWidth: number, rel: Relationship, bundle: ArrowBundle, flip?: boolean) => void;
+export declare const renderWaypointArrow: (ctx: CanvasRenderingContext2D, rel: Relationship, from: Node, to: Node, bundle: ArrowBundle, showLabel: boolean, drawCurves: boolean) => void;
+export declare const renderSelfArrow: (ctx: CanvasRenderingContext2D, rel: Relationship, node: Node, bundle: ArrowBundle, showLabel: boolean) => void;
+export declare const renderArrow: (ctx: CanvasRenderingContext2D, rel: Relationship, fromNode: Node, toNode: Node, bundle: ArrowBundle, showLabel: boolean, drawCurves?: boolean) => void;
+export declare const distanceToEdge: (pos: Point, rel: Relationship, fromNode: Node, toNode: Node, bundle: ArrowBundle, showLabel: boolean, drawCurves?: boolean) => number;
+/**
+ * Returns the bounding box of the arrow.
+ * @param {Relationship} rel - The relationship to get the bounding box for.
+ * @param {ArrowBundle} bundle - The arrow bundle the relationship is part of.
+ * @param {Node} fromNode - The node the relationship is coming from.
+ * @param {Node} toNode - The node the relationship is going to.
+ * @param {boolean} showLabel - Whether or not a label is shown.
+ * @param {boolean} drawCurves - Whether or the relationship is drawn as a curve.
+ * @returns {DOMRect} The bounding box of the arrow.
+ */
+export declare const getBoundingBox: (rel: Relationship, bundle: ArrowBundle, fromNode: Node, toNode: Node, showLabel?: boolean, drawCurves?: boolean) => DOMRect | null;

package/dist/types/renderers/canvasrenderer/arrows/constants.d.ts

@@ -0,0 +1,54 @@
+/** The gap between a node and a relationship. */
+export declare const NodeGap = 4;
+/** The increase of the gap between a node and relationship when the node is selected */
+export declare const SelectGap = 4;
+/** The width of arrow heads. */
+export declare const HeadWidth = 7;
+/** The height of arrow heads. */
+export declare const HeadHeight = 9;
+/** The chin height of arrows. */
+export declare const HeadChinHeight = 2;
+/** The default color of relationships. */
+export declare const RelColor = "#848484";
+/** The length of the curve of a curved relationship. */
+export declare const TaperRelLength = 30;
+/** The distance of the starting points of relationships in a bundle. */
+export declare const BundleAngleSep: number;
+/** The distance needed to draw an arrow head in a bundled relationship. */
+export declare const BundleArrowDist = 8;
+/** The distance needed to draw an arrow head in a detailed bundled relationship. */
+export declare const BundleArrowDistDetailed = 17;
+/** The angle of the starting - and ending points of a self-referring relationship. */
+export declare const SelfRefAngle: number;
+/** The width of a self-referring relationship. */
+export declare const SelfRefWidth = 25;
+/** The height of a self-referring relationship. */
+export declare const SelfRefHeight = 35;
+/** The maximum width of a self-referring relationship's label. */
+export declare const SelfRefLabelMaxWidth = 40;
+/** Width increase when a relationship is selected. */
+export declare const SelectedWidthFactor = 1.5;
+/** The width of the outline of a selected relationship. */
+export declare const SelectedOutlineWidth = 2;
+/** The color of the first outline of a selected relationship. */
+export declare const SelectedOutlineColor1 = "white";
+/** The color of the second outline of a selected relationship. */
+export declare const SelectedOutlineColor2 = "#45bff8";
+/** The shadow properties of a selected relationship. */
+export declare const SelectedShadow: {
+    color: string;
+    size: number;
+    x: number;
+    y: number;
+};
+/** The style properties of a disabled relationship. */
+export declare const Disabled: {
+    color: string;
+    fontColor: string;
+};
+/** The font styles for relationship captions. */
+export declare const Font: {
+    size: number;
+    color: string;
+    face: string;
+};

package/dist/types/renderers/canvasrenderer/nodes/nodes.d.ts

@@ -0,0 +1,58 @@
+import type { NodeBorderStyles } from '../../../modules/state';
+import type { Node } from '../../../types/graph-element';
+import type AnimationHandler from '../AnimationHandler';
+type RingStyle = {
+    width: number;
+    color: string;
+};
+/**
+ * Returns an array of styles for the rings of a node.
+ * It takes the node as an argument, and an optional array of size animations.
+ * If the node is selected, it returns the selectedStyle.rings array.
+ * If the node is not selected, it returns an array containing only one object with
+ * a width of 0 and an empty color.
+ * @param node {Node} - The node to get the ring styles for.
+ * @param animationHandler {AnimationHandler} - The animation handler.
+ * @param nodeBorderStyles {NodeBorderStyles} - The node border styles.
+ * @returns {{ width: number, color: string }[]} - An array of ring styles.
+ */
+export declare const getRingStyles: (node: Node, animationHandler: AnimationHandler, nodeBorderStyles: any) => RingStyle[];
+/**
+ * Returns the bounding box of a node with the given x, y, and size properties.
+ * If no size is given, the default size is used.
+ * @param {Node} Node - The node to get the bounding box for.
+ * @returns {object} The bounding box of the node.
+ */
+export declare const getBoundingBox: ({ x, y, size }: Node) => DOMRect;
+/**
+ * Returns the caption font size that should be used
+ * for the given info level and node diameter.
+ * @param infoLevel {number} - The info level.
+ * @param nodeRadius {number} - The radius of the node.
+ * @param captionSize {number} - The size of the caption.
+ * @returns {number} - The font size.
+ */
+export declare const infoLevelToFontSize: (infoLevel: number, nodeRadius?: number, captionSize?: number, hasIcon?: boolean) => number;
+/**
+ * Returns maximum length of lines
+ * @param lines {array} - The lines info
+ * @returns {number} - The font size.
+ */
+export declare const findMaxLength: (lines: any[], ctx: CanvasRenderingContext2D, pixelRatio: number) => number;
+/**
+ * Returns minimum length of lines
+ * @param lines {array} - The lines info
+ * @returns {number} - The font size.
+ */
+export declare const findMinLength: (lines: any[], ctx: CanvasRenderingContext2D, pixelRatio: number) => any;
+/**
+ * Draws a node with the given context, node, and image cache.
+ * @param ctx {any} - The context to draw the node on.
+ * @param node {Node} - The node to draw.
+ * @param imageCache {any} - The image cache to use.
+ * @param animationHandler {AnimationHandler} - The animation handler.
+ * @param nodeBorderStyles {NodeBorderStyles} - The node border styles.
+ * @param zoomLevel {number} - The current zoom level.
+ */
+export declare const drawNode: (ctx: CanvasRenderingContext2D, node: Node, imageCache: any, animationHandler: AnimationHandler, nodeBorderStyles: NodeBorderStyles, zoomLevel?: number) => void;
+export {};

package/dist/types/renderers/canvasrenderer/types.d.ts

@@ -0,0 +1,47 @@
+import type { Node, Relationship } from '../../types/graph-element';
+import type { Point } from '../../utils/geometry';
+export type TextSegment = {
+    hasEllipsisChar?: boolean;
+    hasHyphenChar?: boolean;
+    text: string;
+    overflowed?: boolean;
+};
+/**
+ * The caption text and its text style.
+ * @property styles - The font styles as comma separated values
+ * @example 'bold,italic'
+ * @property value - The text for the caption.
+ * @property key - The caption identifier key.
+ */
+export type StyledCaption = {
+    styles?: string[];
+    value?: string;
+    key?: string;
+};
+export type StyledCaptionWithChars = StyledCaption & {
+    chars?: string[][];
+};
+export type CacheItem = {
+    image?: CacheInfo;
+    inverted?: CacheInfo;
+};
+export type CacheInfo = {
+    canvas: HTMLCanvasElement;
+    image: HTMLImageElement;
+    drawn: boolean;
+};
+export type Cache = Record<string, CacheItem>;
+export interface RelationshipToRender extends Relationship {
+    fromNode: Node;
+    toNode: Node;
+    showLabel: boolean;
+}
+export interface WaypointPath {
+    points: Point[];
+    from: Point;
+    to: Point;
+}
+export interface ArrowBundleGap {
+    size: number;
+    start: number;
+}

package/dist/types/renderers/canvasrenderer/util.d.ts

@@ -0,0 +1,69 @@
+import type { Point } from '../../utils/geometry';
+import type { TextSegment } from './types';
+export declare const fontThresholds: number[][];
+/**
+ * This function takes color in hex format or rgb() or rgba() format and overrides the opacity. Returns rgba() string.
+ * @param {string} color
+ * @param {number} opacity
+ * @returns {string} rgba() string with the given opacity
+ */
+export declare const overrideOpacity: (color: string, opacity: number) => string;
+/**
+ * The parameters for drawing an arrowhead.
+ */
+type ArrowHeadParameters = {
+    headPosition: Point;
+    headAngle: number;
+    headHeight: number;
+    headChinHeight: number;
+    headWidth: number;
+};
+/**
+ * Creates an arrowhead shape using a polygon.
+ * @param {CanvasRenderingContext2D} ctx - The canvas context to draw on.
+ * @param {number} headLineWidth - The width of the arrowhead's outline.
+ * @param {string} color - The color of the arrowhead.
+ * @param {ArrowHeadParameters} arrowHeadParameters - The parameters for the arrowhead.
+ * @param {boolean} fill - Whether or not to fill the triangle.
+ * @param {boolean} stroke - Whether or not to stroke the triangle.
+ */
+export declare const drawArrowHead: (ctx: CanvasRenderingContext2D, headLineWidth: number, color: string, arrowHeadParameters: ArrowHeadParameters, fill?: boolean, stroke?: boolean) => void;
+/**
+ * Draws borders around a node with a given array of border styles
+ * @param {CanvasRenderingContext2D} ctx - The canvas context
+ * @param {number} x - The x coordinate of the node
+ * @param {number} y - The y coordinate of the node
+ * @param {number} innerRadius - The inner radius of the node without any border
+ * @param {Array} borderStyles - An array of border styles
+ * @internal
+ */
+export declare const drawCircleBand: (ctx: CanvasRenderingContext2D, x: number, y: number, innerRadius: number, borderStyles: {
+    width: number;
+    color: string;
+}[]) => void;
+export declare const drawCircle: (ctx: CanvasRenderingContext2D, x: number, y: number, r: number) => void;
+/**
+ * Fill a circle band with a gradient from a certain color to transparent
+ * @param {CanvasRenderingContext2D} ctx - The canvas context
+ * @param {number} x - The x coordinate of the node
+ * @param {number} y - The y coordinate of the node
+ * @param {string} color - The color of the gradient
+ * @param {number} radius - The inner radius of the node without any border
+ * @param {number} blur - The blur radius of the gradient
+ * @param {number} maxOpacity - The maximum opacity of the gradient
+ */
+export declare const drawGradientCircleBand: (ctx: CanvasRenderingContext2D, x: number, y: number, color: string, radius: number, blur: number, maxOpacity?: number) => void;
+/**
+ * Draw a circle shape with a solid color
+ */
+export declare const drawSolidCircle: (ctx: CanvasRenderingContext2D, x: number, y: number, color: string, size: number) => void;
+export declare function getIndividualInfoLevels(r: number, zoomLevel: number): {
+    nodeInfoLevel: number;
+    fontInfoLevel: number;
+    iconInfoLevel: number;
+};
+/**
+ * Prints the caption for a node
+ */
+export declare const drawNodeCaption: (ctx: CanvasRenderingContext2D, lines: TextSegment[], stylesPerChar: string[][], initialYPos: number, fontSize: number, fontFace: string, lineDistance: number, x: number, y: number) => void;
+export {};

package/dist/types/renderers/canvasrenderer/vectorUtils.d.ts

@@ -0,0 +1,21 @@
+import type { Point } from '../../utils/geometry';
+export declare const add: (v1: Point, v2: Point) => {
+    x: number;
+    y: number;
+};
+export declare const sub: (v1: Point, v2: Point) => {
+    x: number;
+    y: number;
+};
+export declare const scale: (v: Point, s: number) => {
+    x: number;
+    y: number;
+};
+export declare const dot: (v1: Point, v2: Point) => number;
+export declare const getModule: (v1: Point) => number;
+export declare const distance: (v1: Point, v2: Point) => number;
+export declare const angle: (v1: Point, v2: Point) => number;
+export declare const coordFromPolar: (polarAngle: number, polarModule: number) => {
+    x: number;
+    y: number;
+};

package/dist/types/renderers/canvasrenderer/wordwrap.d.ts

@@ -0,0 +1,42 @@
+import type { StyledCaption, TextSegment } from './types';
+export declare const hyphenChar = "\u2010";
+export declare const ellipsisChar = "\u2026";
+/**
+ * This is the main function that tries to fit a text on one or more lines
+ *
+ * @param {string} text = The full string to place
+ * @param {function} measureWidth - a function that returns the width of a string as pixels on the canvas
+ * @param {function} getAvailbleWidth - A function providing the pixel width for a line index
+ * @param {number} numberOfLines - How many lines is availble for this placement
+ * @param {boolean} allowedToGiveUp - If cannot fit on last avilble line - should we give up or place as much as we can
+ *
+ * @return  array of text lines
+ */
+export declare const tryWithNumberOfLines: (text: string, measureWidth: (text: string) => number, getAvailableWidth: (a: number, b: number) => number, numberOfLines: number, allowedToGiveUp?: boolean) => TextSegment[];
+/**
+ * This functions tries to fit the text in a given number of lines and only linebreak on whitespace
+ *
+ * @param {string} text = The full string to place
+ * @param {function} measureWidth - a function that returns the width of a string as pixels on the canvas
+ * @param {function} getAvailbleWidth - A function providing the pixel width for a line index
+ * @param {number} numberOfLines - How many lines is availble for this placement
+ *
+ * @return  array of text lines
+ */
+export declare const tryBreakingOnSpaces: (text: string, measureWidth: (text: string) => number, getAvailableWidth: (a: number, b: number) => number, numberOfLines: number) => TextSegment[];
+/**
+ * @param {object} ctx = Canvas.2dContext
+ * @param {object} text - The text to display
+ *
+ * @return  array of text lines
+ */
+export declare const getLines: (ctx: CanvasRenderingContext2D, text: string, fontFace: string, fontSize: string | number, maxWidth: number, hasIcon: boolean, fontInfoLevel: number, align: string) => TextSegment[];
+/**
+ * Returns the styles by char for a group of property values
+ * @param {array} captions = array of captions
+ * @return array of list of styles by char
+ */
+export declare const getStylesByChar: (captions?: StyledCaption[]) => {
+    stylesPerChar: string[][];
+    fullCaption: string;
+};

package/dist/types/renderers/webglrenderer/Controller.d.ts

@@ -0,0 +1,66 @@
+import type { Node, Relationship } from '../../index';
+import type { DataSet } from '../../modules/dataset';
+import type { NvlState } from '../../modules/state';
+import type Renderer from './Renderer';
+export interface ControllerInterface {
+    mainSceneRenderer: Renderer;
+    minimapRenderer: Renderer;
+    needsRun: boolean;
+    minimapMouseDown: boolean;
+    stateDisposers: NvlState['autorun'][];
+    state: NvlState;
+    needsToRun: () => boolean;
+    renderMainScene: (positionArray: Node[]) => void;
+    renderMinimap: (positionArray: Node[]) => void;
+    checkForUpdates: (nodes: DataSet<Node>, rels: DataSet<Relationship>) => void;
+    onResize: () => void;
+    updateMainViewport: (zoom: number, panX: number, panY: number) => void;
+    updateMinimapViewport: (zoom: number, panX: number, panY: number) => void;
+    handleMinimapDrag: (e: MouseEvent) => void;
+    handleMinimapWheel: (evt: MouseEvent) => void;
+    setupMinimapInteractions: () => void;
+    destroy: () => void;
+}
+export default class Controller implements ControllerInterface {
+    mainSceneRenderer: Renderer;
+    minimapRenderer: Renderer;
+    needsRun: boolean;
+    minimapMouseDown: boolean;
+    stateDisposers: NvlState['autorun'][];
+    state: NvlState;
+    constructor(options: {
+        mainSceneRenderer?: Renderer;
+        minimapRenderer?: Renderer;
+        state: NvlState;
+    });
+    needsToRun(): boolean;
+    renderMainScene(positionArray: any): void;
+    renderMinimap(positionArray: Node[]): void;
+    checkForUpdates(nodes: DataSet<Node>, rels: DataSet<Relationship>): void;
+    onResize(): void;
+    updateMainViewport(zoom: number, panX: number, panY: number): void;
+    updateMinimapViewport(zoom: number, panX: number, panY: number): void;
+    handleMinimapDrag(e: MouseEvent): void;
+    handleMinimapWheel(evt: WheelEvent): void;
+    setupMinimapInteractions(): void;
+    destroy(): void;
+}
+export declare class DummyController implements ControllerInterface {
+    mainSceneRenderer: Renderer;
+    minimapRenderer: Renderer;
+    needsRun: boolean;
+    minimapMouseDown: boolean;
+    stateDisposers: NvlState['autorun'][];
+    state: NvlState;
+    renderMainScene(positionArray: Node[]): void;
+    renderMinimap(positionArray: Node[]): void;
+    checkForUpdates(nodes: DataSet<Node>, rels: DataSet<Relationship>): void;
+    onResize(): void;
+    updateMainViewport(zoom: number, panX: number, panY: number): void;
+    updateMinimapViewport(zoom: number, panX: number, panY: number): void;
+    handleMinimapDrag(e: MouseEvent): void;
+    handleMinimapWheel(e: MouseEvent): void;
+    setupMinimapInteractions(): void;
+    destroy(): void;
+    needsToRun(): boolean;
+}

package/dist/types/renderers/webglrenderer/Renderer.d.ts

@@ -0,0 +1,52 @@
+/// <reference types="gl-matrix/index.js" />
+import { mat4 } from 'gl-matrix';
+import type { DataSet } from '../../modules/dataset.js';
+import type { NvlState } from '../../modules/state.js';
+import type { Node, Relationship } from '../../types/graph-element.js';
+export default class Renderer {
+    private readonly nodeShader;
+    private readonly nodeAnimShader;
+    private readonly relShader;
+    private relDataBuffer;
+    private readonly viewportBoxShader;
+    private readonly defaultRelColor;
+    private readonly defaultNodeColor;
+    private readonly disableRelColor;
+    private readonly disableNodeColor;
+    private readonly gl;
+    activeNodes: Record<string, boolean>;
+    readonly canvas: HTMLCanvasElement;
+    projection: mat4;
+    private idToIndex;
+    private posBuffer;
+    private numRels;
+    private numNodes;
+    private nodeDataByte;
+    private relIdToIndex;
+    private relData;
+    private containerWidth;
+    private containerHeight;
+    private nodeDataInt;
+    private viewportBoxBuffer;
+    private relBuffer;
+    private nodeBuffer;
+    private posTexture;
+    constructor(gl: WebGLRenderingContext, nodes: DataSet<Node>, rels: DataSet<Relationship>, state: NvlState);
+    private setShaderUniforms;
+    setData(data: {
+        nodes: Node[];
+        rels: Relationship[];
+    }): void;
+    render(positionArray: Node[], nodes: any, rels: any): void;
+    renderViewbox(): void;
+    updateNodes(updates: Node[]): void;
+    updateRelationships(relItems: Relationship[]): void;
+    private createPositionTexture;
+    updateViewportBox(zoom: number, panX: number, panY: number, viewportWidth: number, viewportHeight: number): void;
+    updateViewport(zoom: number, panX: number, panY: number): void;
+    private setupViewportRendering;
+    private setupNodeRendering;
+    private setupRelationshipRendering;
+    private renderAnimations;
+    destroy(): void;
+}

package/dist/types/renderers/webglrenderer/node-animation-fragment.d.ts

@@ -0,0 +1,2 @@
+declare const _default: "uniform mediump float u_zoom;\nuniform lowp float u_animPos;\nuniform mediump float u_glAdjust;\n\nvarying lowp vec4 color;\nvarying lowp float varNodeSize;\nmediump float circleSize = 0.50;\n\nvoid main(void) {\n\n  lowp float dist = distance(gl_PointCoord, vec2(0.5));\n\n  if (dist > 0.51) {\n    discard;\n  }\n  else {\n    lowp float alpha = 1.0 - smoothstep(circleSize - (1.0 / (varNodeSize * 2.0 * u_zoom * u_glAdjust)), circleSize, dist);\n    lowp float pulseAlpha = 0.9 - 0.9 * u_animPos;\n    gl_FragColor = vec4(color.xyz, 1.0) * alpha * pulseAlpha;\n  }\n}\n";
+export default _default;

package/dist/types/renderers/webglrenderer/node-animation-vertex.d.ts

@@ -0,0 +1,2 @@
+declare const _default: "uniform mat4 u_projection;\nuniform sampler2D u_positions;\nuniform lowp float u_animPos;\nuniform mediump float u_zoom;\nuniform mediump float u_glAdjust;\n\nattribute float a_size;\nattribute lowp vec2 a_index;\nattribute lowp vec4 a_color;\nattribute lowp float a_active;\n\nvarying lowp float varNodeSize;\nvarying lowp vec4 color;\n\nvoid main(void) {\n  vec4 data = texture2D(u_positions, a_index);\n\n  gl_Position = u_projection * vec4(data.xy, 0.0, 1.0);\n\n  float nodeSize = a_size * u_zoom * u_glAdjust;\n  nodeSize = nodeSize * (0.4 / 0.5); // Remove extra space added for shadow and selection ring\n\n  gl_PointSize = a_active > 0.5\n    ? nodeSize + 0.88 * nodeSize * u_animPos\n    : 0.0;\n\n  color = a_color;\n  varNodeSize = a_size;\n}";
+export default _default;

package/dist/types/renderers/webglrenderer/node-fragment-point.d.ts

@@ -0,0 +1,2 @@
+declare const _default: "uniform mediump float u_zoom;\nuniform mediump float u_glAdjust;\n\nvarying lowp vec4 color;\nvarying lowp float drawDefaultBorder;\nvarying lowp vec3 nodeBorderColor;\nvarying lowp vec3 selectedBorderColor;\nvarying lowp float selected;\nvarying lowp float hovered;\nvarying lowp float varNodeSize;\n\nmediump float circleSize = 0.40;\nmediump float ringSize = 0.43;\nmediump float ringSize2 = 0.47;\nmediump float shadowSize = 0.51;\nlowp vec3 shadowColor = vec3(0.73);\nlowp vec3 lineColor = vec3(1.0);\n\nlowp float getShadowAlpha(lowp float size, lowp float dist) {\n  return (1.0 - smoothstep(size, shadowSize, dist)) * 0.25;\n}\n\nlowp float getCircleAlpha(lowp float ringSize, lowp float nodeSize, lowp float dist) {\n  return color.w - smoothstep(ringSize - nodeSize, ringSize, dist);\n}\n\nvoid main() {\n  lowp float dist = distance(gl_PointCoord, vec2(0.5));\n\n  if (dist > 0.51) {\n    discard;\n  }\n  else {\n    lowp float nodeSize = 1.0 / varNodeSize;\n    lowp float nodeAlpha = getCircleAlpha(circleSize, nodeSize, dist);\n    lowp float ringAlpha = getCircleAlpha(ringSize, nodeSize, dist);\n    lowp vec3 finalColor = color.xyz;\n    lowp float finalAlpha = nodeAlpha;\n\n    if (selected > 0.0) {\n      lowp float shadowAlpha = getShadowAlpha(ringSize2, dist);\n      lowp float ringAlpha2 = getCircleAlpha(ringSize2, nodeSize, dist);\n\n      finalColor = mix(lineColor, finalColor, nodeAlpha);\n      finalColor = mix(selectedBorderColor, finalColor, ringAlpha);\n      finalColor = mix(shadowColor, finalColor, ringAlpha2);\n      finalAlpha = max(shadowAlpha, max(nodeAlpha, max(ringAlpha, ringAlpha2)));\n    } else if (hovered > 0.0) {\n      if (drawDefaultBorder > 0.0) {\n        lowp float shadowAlpha = getShadowAlpha(ringSize, dist);\n  \n        finalColor = mix(nodeBorderColor, finalColor, nodeAlpha);\n        finalColor = mix(shadowColor, finalColor, ringAlpha);\n        finalAlpha = max(shadowAlpha, max(nodeAlpha, ringAlpha));\n      } else {\n        lowp float shadowAlpha = getShadowAlpha(circleSize, dist);\n\n        finalColor = mix(shadowColor, finalColor, nodeAlpha);\n        finalAlpha = max(shadowAlpha, nodeAlpha);\n      }\n    } else {\n      if (drawDefaultBorder > 0.0) {\n        finalColor = mix(nodeBorderColor, finalColor, nodeAlpha);\n        finalAlpha = ringAlpha;\n      }\n    }\n    gl_FragColor = vec4(finalColor, 1.0) * finalAlpha;\n  }\n}\n";
+export default _default;

package/dist/types/renderers/webglrenderer/node-vertex-point.d.ts

@@ -0,0 +1,2 @@
+declare const _default: "uniform mat4 u_projection;\nuniform sampler2D u_positions;\nuniform mediump float u_zoom;\nuniform mediump float u_glAdjust;\nuniform lowp vec3 u_nodeBorderColor;\nuniform lowp vec3 u_selectedBorderColor;\nuniform lowp float u_drawDefaultBorder;\n\nattribute float a_size;\nattribute lowp vec2 a_index;\nattribute lowp vec4 a_color;\nattribute lowp float a_selected;\nattribute lowp float a_hovered;\n\nvarying lowp float window;\nvarying lowp vec4 color;\nvarying lowp float selected;\nvarying lowp float hovered;\nvarying lowp float varNodeSize;\nvarying lowp vec3 nodeBorderColor;\nvarying lowp vec3 selectedBorderColor;\nvarying lowp float drawDefaultBorder;\n\nlowp float MinNodeSize = 5.0;\n\nvoid main(void) {\n  vec4 data = texture2D(u_positions, a_index);\n  gl_Position = u_projection * vec4(data.xy, 0.0, 1.0);\n\n  lowp float nodeSize = a_size * u_zoom * u_glAdjust;\n  if (nodeSize < MinNodeSize) {\n   gl_PointSize = MinNodeSize;\n   varNodeSize = MinNodeSize;\n  } else {\n    gl_PointSize = nodeSize;\n    varNodeSize = nodeSize;\n  }\n\n  color = a_color;\n  selected = a_selected;\n  hovered = a_hovered;\n  nodeBorderColor = u_nodeBorderColor;\n  selectedBorderColor = u_selectedBorderColor;\n  drawDefaultBorder = u_drawDefaultBorder;\n}";
+export default _default;

package/dist/types/renderers/webglrenderer/rel-fragment-line.d.ts

@@ -0,0 +1,2 @@
+declare const _default: "varying lowp vec4 color;\n\nvoid main(void) {\n  gl_FragColor = vec4(color.xyz, 1.0) * color.w;\n}\n";
+export default _default;

package/dist/types/renderers/webglrenderer/rel-vertex-line.d.ts

@@ -0,0 +1,2 @@
+declare const _default: "uniform mat4 u_projection;\nuniform sampler2D u_positions;\nuniform mediump float u_glAdjust;\n\nattribute vec2 a_from;\nattribute vec2 a_to;\nattribute lowp vec4 a_color;\nattribute lowp float a_triside;\nattribute float a_width;\n\nvarying lowp vec4 color;\n\nvoid main(void) {\n  vec4 from = texture2D(u_positions, a_from);\n  vec4 to = texture2D(u_positions, a_to);\n  vec2 direction = normalize(to.xy - from.xy);\n  direction = vec2(-direction.y, direction.x);\n\n  float width = a_width * u_glAdjust * 0.5;\n\n  if (a_triside == 0.0) {\n    from.y += (width / 2.0) * direction.y;\n    from.x += (width / 2.0) * direction.x;\n  } else {\n    from.y -= (width / 2.0) * direction.y;\n    from.x -= (width / 2.0) * direction.x;\n  }\n\n  color = a_color;\n  gl_Position = u_projection * vec4(from.xy, 0.0, 1.0);\n}\n";
+export default _default;

package/dist/types/renderers/webglrenderer/viewport-box-fragment.d.ts

@@ -0,0 +1,2 @@
+declare const _default: "void main(void) {\n gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);\n}\n";
+export default _default;

package/dist/types/renderers/webglrenderer/viewport-box-vertex.d.ts

@@ -0,0 +1,2 @@
+declare const _default: "attribute vec2 coordinates;\nuniform mat4 u_projection;\n\nvoid main(void) {\n  gl_Position = u_projection * vec4(coordinates, 0.0, 1.0);\n}\n";
+export default _default;

package/dist/types/types/graph-element.d.ts

@@ -0,0 +1,88 @@
+import type { StyledCaption } from '../renderers/canvasrenderer/types';
+/**
+ * The base type for graph elements.
+ * @private
+ * @internal
+ */
+interface GraphElement {
+    /**
+     * The id of the current node or relationship.
+     * @note ids need to be unique across all nodes and relationships.
+     * @note ids need to be strings and cannot be empty.
+     */
+    readonly id: string;
+    color?: string;
+    /** Whether or not the current node or relationship is selected.*/
+    selected?: boolean;
+    /** The text to display inside on node or relationship.
+     * @deprecated Use {@link captions} instead.
+     */
+    caption?: string;
+    /** Whether or not the current node or relationship is disabled.*/
+    disabled?: boolean;
+    /** Whether or not the current node or relationship is hovered.*/
+    hovered?: boolean;
+    /** The caption text size.*/
+    captionSize?: number;
+    /** The caption align.*/
+    captionAlign?: 'top' | 'bottom' | 'center';
+    /** The caption text and font style.*/
+    captions?: StyledCaption[];
+}
+export declare const isValidNode: (node: unknown) => node is Node;
+/**
+ * A node inside the graph visualization.
+ */
+interface Node extends GraphElement {
+    /** The size of the node.*/
+    size?: number;
+    /** Whether or not the current node is pinned.*/
+    pinned?: boolean;
+    /** The x-coordinate for the position of the node.*/
+    x?: number;
+    /** The y-coordinate for the position of the node.*/
+    y?: number;
+    /** Whether or not the current node is activated.*/
+    activated?: boolean;
+    /** The icon to display inside the node.*/
+    icon?: string;
+    /**
+     * The DOM element to display on top of a node.
+     * @experimental
+     */
+    html?: HTMLElement;
+}
+/**
+ * @internal
+ */
+type PartialNode = Partial<Node> & {
+    id: string;
+};
+export declare const isValidRelationship: (relationship: unknown) => relationship is Relationship;
+/**
+ * A relationship inside the graph visualization.
+ */
+interface Relationship extends GraphElement {
+    /** Node id where the relationship starts from.*/
+    from: string;
+    /** Node id where the relationship points to.*/
+    to: string;
+    /** The relationship type.*/
+    type?: string;
+    /** The width of the relationship.*/
+    width?: number;
+    /**
+     * The DOM element to display on top of a relationship caption.
+     * @experimental
+     * @note The {@link captionSize} and {@link captionAlign} properties
+     * will affect the position and height of the html container element.
+     */
+    captionHtml?: HTMLElement;
+}
+/**
+ * @internal
+ */
+type PartialRelationship = Partial<Relationship> & {
+    id: string;
+};
+export type { Node, Relationship, PartialNode, PartialRelationship };

package/dist/types/utils/canvasManagement.d.ts

@@ -0,0 +1,15 @@
+/**
+ * Fixes the canvas size to match the parent element's size.
+ * @param canvas The canvas to fix the size of.
+ *
+ * @note Make sure canvas pixel buffer is 1 to 1 vs screen pixels
+ */
+export declare const fitCanvasSizeToParent: (canvas: HTMLCanvasElement) => void;
+export declare const addWebGLContextLostListener: (canvas: HTMLCanvasElement, contextLostCallback?: (e: WebGLContextEvent) => void) => void;
+export declare const createCanvasForScreenshot: (fullWidth: number, fullHeight: number) => HTMLCanvasElement;
+export declare const createCanvasForRenderer: (parent?: HTMLElement, onContextLostCallback?: (e: WebGLContextEvent) => void) => HTMLCanvasElement;
+export declare const removeCanvas: (canvas: HTMLCanvasElement) => void;
+export declare const getCanvas2DContext: (canvas: HTMLCanvasElement) => CanvasRenderingContext2D;
+export declare const getWebGLContext: (canvas: HTMLCanvasElement) => RenderingContext;
+export declare const removeWebGLContext: (webGLCtx: WebGLRenderingContext) => void;
+export declare const checkWebGLAvailability: (canvas?: HTMLCanvasElement) => boolean;

package/dist/types/utils/colorMapperFunctions.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Determines whether a black or white font color is more readable for a given background color
+ * @param {string} color The background color
+ * @returns {string} The font color that should be used @defaultValue '#fff'
+ */
+export declare const textColorForBackground: (color: string) => string;

package/dist/types/utils/constants.d.ts

@@ -0,0 +1,30 @@
+export declare const PhysTextureSize = 256;
+export declare const SpringTextureSize = 4096;
+export declare const MaxIndexBuffer = 65536;
+export declare const MinRelLength = 100;
+export declare const Gravity = 100;
+export declare const SimulationStopVelocity = 100;
+export declare const MappingEnd = 999999;
+export declare const ActiveAnimDuration = 1000;
+export declare const DefaultNodeSize = 25;
+export declare const DefaultNodeColor = "#478BFF";
+export declare const DefaultRelWidth = 1;
+export declare const DisabledRelColor = "#ededed";
+export declare const absFillStyle: {
+    position: string;
+    top: number;
+    bottom: number;
+    left: number;
+    right: number;
+};
+/**
+ * Factor to make nodes same size in WebGL renderer and Canvas.
+ * @returns {number} The adjustment factor.
+ */
+export declare const GlAdjust: number;
+/**
+ * Get the pixel ratio of the device
+ * @returns {number} The pixel ratio of the device
+ */
+export declare const getDevicePixelRatio: () => number;
+export declare const HtmlCaptionMinWidthThreshold = 5;