@neo4j-nvl/base 0.3.6 → 0.3.7-6326e57d

package/dist/types/index.d.ts

@@ -1,6 +1,6 @@
 import type { ExternalCallbacks } from './modules/ExternalCallbackHandler';
-import type { ForceDirectedOptions, HierarchicalOptions, Layout, LayoutOptions, NvlOptions, NvlState, Renderer, ZoomOptions } from './modules/state';
-import { CanvasRendererType, ForceDirectedLayoutType, FreeLayoutType, GridLayoutType, HierarchicalLayoutType, WebGLRendererType, d3ForceLayoutType } from './modules/state';
+import type { ForceDirectedOptions, HierarchicalOptions, Layout, LayoutOptions, NvlOptions, NvlState, Renderer, ZoomOptions } from './modules/state/types';
+import { CanvasRendererType, ForceDirectedLayoutType, FreeLayoutType, GridLayoutType, HierarchicalLayoutType, WebGLRendererType, d3ForceLayoutType } from './modules/state/types';
 import type { StyledCaption } from './renderers/canvasrenderer/types';
 import { drawCircleBand } from './renderers/canvasrenderer/util';
 import type { Node, PartialNode, PartialRelationship, Relationship } from './types/graph-element';
@@ -8,6 +8,7 @@ import { CompatibilityError } from './utils/errors';
 import type { Point } from './utils/geometry';
 import type { HitTargetNode, HitTargetRelationship, HitTargets } from './utils/hittest';
 import { nvlResultTransformer } from './utils/jsDriverResultTransformer';
+import { getZoomTargetForNodePositions } from './utils/zoomFunctions';
 /**
  * Extends the MouseEvent interface with the {@link HitTargets} property.
  * The result of a _.{@link NVL.getHits} call.
@@ -249,6 +250,8 @@ declare class NVL {
      * @param {Node[]} data The positions that the nodes should be set to.
      * @param {boolean} updateLayout whether or not the current layout algorithm
      * should update the graph after setting the node positions.
+     * For node positions to be unaffected by layout algorithms, use the {@link FreeLayoutType}
+     * or use {@link pinNode} to pin the nodes that should remain still.
      * False by default.
      */
     setNodePositions(data: Node[], updateLayout?: boolean): void;
@@ -364,4 +367,4 @@ declare const colorMapperFunctions: {
 };
 export default NVL;
 export type { NvlOptions, Renderer, Node, Relationship, PartialNode, PartialRelationship, Layout, LayoutOptions, ForceDirectedOptions, HierarchicalOptions, ExternalCallbacks, HitTargets, HitTargetNode, HitTargetRelationship, Point, NvlMouseEvent, ZoomOptions, StyledCaption, WebGLRendererType, CanvasRendererType };
-export { NVL, colorMapperFunctions, CompatibilityError, ForceDirectedLayoutType, HierarchicalLayoutType, GridLayoutType, FreeLayoutType, d3ForceLayoutType, drawCircleBand, nvlResultTransformer };
+export { NVL, colorMapperFunctions, CompatibilityError, ForceDirectedLayoutType, HierarchicalLayoutType, GridLayoutType, FreeLayoutType, d3ForceLayoutType, drawCircleBand, nvlResultTransformer, getZoomTargetForNodePositions };

package/dist/types/layouts/animatedlayout/AnimatedLayout.d.ts

@@ -1,4 +1,4 @@
-import type { NvlState } from '../../modules/state';
+import type { NvlState } from '../../modules/state/types';
 import type { Node } from '../../types/graph-element';
 export default class AnimatedLayout {
     positions: Record<string, Node>;

package/dist/types/layouts/forcedirectedlayout/cosebilkentlayout/CoseBilkentLayout.d.ts

@@ -1,4 +1,4 @@
-import type { NvlState } from '../../../modules/state';
+import type { NvlState } from '../../../modules/state/types';
 import type { Node, Relationship } from '../../../types/graph-element';
 import AnimatedLayout from '../../animatedlayout/AnimatedLayout';
 type LayoutData = {
@@ -16,12 +16,12 @@ export declare class CoseBilkentLayout extends AnimatedLayout {
     computing: boolean;
     pendingLayoutData: LayoutData;
     worker: SharedWorker;
+    private workersDisabled;
     constructor(config: {
         state: NvlState;
         cytoCompleteCallback?: () => void;
         animationCompleteCallback?: () => void;
     });
-    setupWorker(): Promise<SharedWorker>;
     setOptions(): void;
     update(refreshPositions?: boolean, updateMobXNodes?: Node[], updateMobXRelationships?: Relationship[]): void;
     getShouldUpdate(): boolean;

package/dist/types/layouts/forcedirectedlayout/physlayout/PhysLayout.d.ts

@@ -1,4 +1,4 @@
-import type { ForceDirectedOptions, NvlState } from '../../../modules/state';
+import type { ForceDirectedOptions, NvlState } from '../../../modules/state/types';
 import type { Node, Relationship } from '../../../types/graph-element';
 import type { Point } from '../../../utils/geometry';
 export declare class PhysLayout {

package/dist/types/layouts/freeLayout/FreeLayout.d.ts

@@ -1,4 +1,4 @@
-import type { NvlState } from '../../modules/state';
+import type { NvlState } from '../../modules/state/types';
 import type { Node } from '../../types/graph-element';
 import type { Point } from '../../utils/geometry';
 export declare class FreeLayout {

package/dist/types/layouts/hierarchicallayout/HierarchicalLayout.d.ts

@@ -1,4 +1,4 @@
-import { type HierarchicalOptions, type LayoutOptions, type NvlState } from '../../modules/state';
+import { type HierarchicalOptions, type LayoutOptions, type NvlState } from '../../modules/state/types';
 import AnimatedLayout from '../animatedlayout/AnimatedLayout';
 type HierarchicalLayoutConfig = {
     state: NvlState;
@@ -14,8 +14,8 @@ export declare class HierarchicalLayout extends AnimatedLayout {
     private worker;
     private directionChanged;
     private packingChanged;
+    private workersDisabled;
     constructor(config: HierarchicalLayoutConfig);
-    setupWorker(): Promise<SharedWorker>;
     setOptions(options: LayoutOptions): void;
     update(refreshPositions?: boolean): void;
     getShouldUpdate(): boolean;

package/dist/types/layouts/hierarchicallayout/constants.d.ts

@@ -1,4 +1,4 @@
-import type { HierarchicalOptions } from '../../modules/state';
+import type { HierarchicalOptions } from '../../modules/state/types';
 export declare const Ranker = "tight-tree";
 export declare const SubGraphSpacing = 100;
 export declare const DirectionUp = "up";

package/dist/types/modules/NvlController.d.ts

@@ -2,7 +2,7 @@ import type { Node, Relationship } from '../types/graph-element';
 import '../types/nvl-window-functions';
 import type { Point } from '../utils/geometry';
 import type { ExternalCallbacks } from './ExternalCallbackHandler';
-import type { Layout, LayoutOptions, NvlOptions, NvlState, ZoomOptions } from './state';
+import type { Layout, LayoutOptions, NvlOptions, NvlState, ZoomOptions } from './state/types';
 type SaveToFileOptions = {
     filename?: string;
     backgroundColor?: string;
@@ -53,6 +53,7 @@ export default class NvlController {
     private layoutDoneCallback;
     private layoutComputingCallback;
     private currentLayoutType;
+    private descriptionElement;
     constructor(state: NvlState, options: NvlOptions);
     private onWebGLContextLost;
     private updateMinimapZoom;

package/dist/types/modules/ZoomTransitionHandler.d.ts

@@ -1,6 +1,6 @@
 import PIDController from 'node-pid-controller';
 import type { Node } from '../types/graph-element';
-import type { NvlState } from './state';
+import type { NvlState } from './state/types';
 export default class ZoomTransitionHandler {
     xCtrl: PIDController;
     yCtrl: PIDController;

package/dist/types/modules/state/constants.d.ts

@@ -0,0 +1,9 @@
+import type { BorderStyles, NvlState } from './types';
+export declare const NodeBorderStyles: BorderStyles;
+export declare const RelationshipBorderStyles: BorderStyles;
+export declare const DefaultZoomLevel = 0.75;
+export declare const DefaultMaxZoom = 10;
+export declare const DefaultMinZoom = 0.075;
+export declare const DefaultMinimapMaxZoom = 0.2;
+export declare const DefaultMinimapMinZoom = 0;
+export declare const DefaultZoomOptions: NvlState['zoomOptions'];

package/dist/types/modules/state/state.d.ts

@@ -0,0 +1,8 @@
+import type { NvlOptions, NvlState } from './types';
+/**
+ * Create a new NVL state
+ *
+ * @param {NvlOptions} options - The options for the new state
+ * @returns {NvlState} - The state object
+ */
+export declare const createState: (options: NvlOptions) => NvlState;

package/dist/types/modules/{state.d.ts → state/types.d.ts}

@@ -1,7 +1,7 @@
 import type { LogLevelDesc } from 'loglevel';
-import type { WaypointPath } from '../renderers/canvasrenderer/types';
-import type { ExternalCallbacks } from './ExternalCallbackHandler';
-import type { NodeDataSet, RelationshipDataSet } from './dataset';
+import type { WaypointPath } from '../../renderers/canvasrenderer/types';
+import type { ExternalCallbacks } from '../ExternalCallbackHandler';
+import type { NodeDataSet, RelationshipDataSet } from '../dataset';
 type RingStyle = {
     width?: number;
     widthFactor?: number;
@@ -23,9 +23,13 @@ export type BorderStyles = {
     selected: BorderStyle;
     default: BorderStyle;
 };
-export declare const RelationshipBorderStyles: BorderStyles;
-/** The default zoom level in a graph when not specified otherwise. */
-export declare const DefaultZoomLevel = 0.75;
+/**
+ * @internal
+ */
+export type DisabledItemStyles = {
+    color: string;
+    fontColor: string;
+};
 /**
  * The options for the force directed layout
  */
@@ -130,7 +134,12 @@ export interface NvlOptions {
      * The DOM element in which to render the graph visualization
      */
     frame?: HTMLElement;
-    /** The DOM container in which to render the minimap */
+    /**
+     * The DOM container in which to render the minimap.
+     *
+     * @note When using a React ref, make sure the attached element is rendered before the NVL instance is created.
+     * Otherwise, the minimap will not be displayed.
+     */
     minimapContainer?: HTMLElement;
     /** Configuration for the current layout */
     layoutOptions?: LayoutOptions;
@@ -171,10 +180,44 @@ export interface NvlOptions {
      */
     relationshipThreshold?: number;
     callbacks?: ExternalCallbacks;
-    /** The color to use for the default border of nodes */
+    styling?: {
+        defaultNodeColor?: string;
+        defaultRelationshipColor?: string;
+        /** The color to use for the default border of nodes */
+        nodeDefaultBorderColor?: string;
+        /** The color to use for the selected border of nodes and relationships */
+        selectedBorderColor?: string;
+        /** The color to use for the selected inner border of nodes and relationships */
+        selectedInnerBorderColor?: string;
+        /** The color to use for the drop shadow of selected/hovered nodes and relationships */
+        dropShadowColor?: string;
+        /** The color to use for the disabled nodes and relationships */
+        disabledItemColor?: string;
+        /** The color to use for the labels of the disabled nodes and relationships */
+        disabledItemFontColor?: string;
+        /** The color to use for the viewport box in the minimap */
+        minimapViewportBoxColor?: string;
+    };
+    /**
+     * The color to use for the default border of nodes
+     * @deprecated Use {@link styling.nodeDefaultBorderColor} instead
+     */
     nodeDefaultBorderColor?: string;
-    /** The color to use for the selected border of nodes */
+    /**
+     * The color to use for the selected border of nodes
+     * @deprecated Use {@link styling.selectedBorderColor} instead
+     */
     selectedBorderColor?: string;
+    /**
+     * The color to use for the disabled nodes and relationships
+     * @deprecated Use {@link styling.disabledItemColor} instead
+     */
+    disabledItemColor?: string;
+    /**
+     * The color to use for the labels of the disabled nodes and relationships
+     * @deprecated Use {@link styling.disabledItemFontColor} instead
+     */
+    disabledItemFontColor?: string;
     /**
      * @internal
      * Defines a time limit for how long layout iterations may run
@@ -185,6 +228,19 @@ export interface NvlOptions {
      * @defaultValue false
      */
     disableTelemetry?: boolean;
+    /**
+     * Disables the use of {@link https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Using_web_workers | web workers} for the layout calculations.
+     */
+    disableWebWorkers?: boolean;
+    /**
+     * Disables {@link https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA | ARIA} attributes on the graph.
+     * By default, NVL adds ARIA attributes to the graph container to make it more accessible.
+     * Attributes include `role="image"`, `aria-label="Graph visualization"`
+     * and `aria-describedby="nvl-${instanceId}-description"`.
+     * The description element is a live region that will announce changes to the graph.
+     * @defaultValue false
+     */
+    disableAria?: boolean;
 }
 /** Options that influence how fit-to-zoom should behave */
 export type ZoomOptions = {
@@ -214,6 +270,7 @@ export interface NvlState {
     webGLVisible: boolean;
     renderer: Renderer;
     disableWebGL: boolean;
+    disableWebWorkers: boolean;
     disableTelemetry: boolean;
     fitMovement: number;
     layout: Layout;
@@ -249,12 +306,9 @@ export interface NvlState {
     reaction: Function;
     nodeBorderStyles: BorderStyles;
     relationshipBorderStyles: BorderStyles;
+    disabledItemStyles: DisabledItemStyles;
+    defaultNodeColor: string;
+    defaultRelationshipColor: string;
+    minimapViewportBoxColor: string;
 }
-/**
- * Create a new NVL state
- *
- * @param {NvlOptions} options - The options for the new state
- * @returns {NvlState} - The state object
- */
-export declare const createState: (options: NvlOptions) => NvlState;
 export {};

package/dist/types/modules/state/utils.d.ts

@@ -0,0 +1,44 @@
+import type { NvlOptions } from './types';
+export declare const processColorStyles: (styling: NvlOptions['styling'], { legacyNodeDefaultBorderColor, legacySelectedBorderColor, legacyDisabledItemColor, legacyDisabledItemFontColor }: {
+    legacyNodeDefaultBorderColor?: string;
+    legacySelectedBorderColor?: string;
+    legacyDisabledItemColor?: string;
+    legacyDisabledItemFontColor?: string;
+}) => {
+    nodeBorderStyles: {
+        default: {
+            rings?: {
+                width?: number;
+                widthFactor?: number;
+                color: string;
+            }[];
+            shadow?: import("./types").ShadowStyle;
+        };
+        selected: {
+            rings?: {
+                width?: number;
+                widthFactor?: number;
+                color: string;
+            }[];
+            shadow?: import("./types").ShadowStyle;
+        };
+    };
+    relationshipBorderStyles: {
+        default: import("./types").BorderStyle;
+        selected: {
+            rings?: {
+                width?: number;
+                widthFactor?: number;
+                color: string;
+            }[];
+            shadow?: import("./types").ShadowStyle;
+        };
+    };
+    disabledItemStyles: {
+        color: string;
+        fontColor: string;
+    };
+    defaultNodeColor: string;
+    defaultRelationshipColor: string;
+    minimapViewportBoxColor: string;
+};

package/dist/types/modules/state/utils.test.d.ts

@@ -0,0 +1 @@
+export {};

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

@@ -1,4 +1,4 @@
-import type { NvlState } from '../../modules/state';
+import type { NvlState } from '../../modules/state/types';
 import type { Node } from '../../types/graph-element';
 import type { Point } from '../../utils/geometry';
 import type { HitTargetNode, HitTargetRelationship } from '../../utils/hittest';
@@ -17,6 +17,7 @@ export default class CanvasRenderer {
     private nodeVersion;
     private relVersion;
     private waypointVersion;
+    private ellipsisWidth;
     /**
      * Creates a new CanvasRenderer.
      * @param canvas {HTMLCanvasElement} - The canvas to render on.

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

@@ -1,4 +1,4 @@
-import type { BorderStyle } from '../../../modules/state';
+import type { BorderStyle, DisabledItemStyles } from '../../../modules/state/types';
 import type { Node, Relationship } from '../../../types/graph-element';
 import type { Point } from '../../../utils/geometry';
 import type ImageCache from '../ImageCache';
@@ -32,12 +32,15 @@ export declare const getPointsForStraight: (rel: Relationship, bundle: ArrowBund
  * @param {number} angle - the angle of the label
  * @param {number} maxWidth - the maximum width of the label
  * @param {Relationship} rel - the relationship
+ * @param {ArrowBundle} bundle - the arrow bundle
+ * @param {DisabledItemStyles} disabledItemStyles - the styles for disabled items
+ * @param {string} fontColor - the color of the font
  * @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, imageCache: ImageCache, showLabel: boolean, drawCurves: boolean, selectedBorderStyle: BorderStyle) => void;
-export declare const renderSelfArrow: (ctx: CanvasRenderingContext2D, rel: Relationship, node: Node, bundle: ArrowBundle, imageCache: ImageCache, showLabel: boolean, selectedBorderStyle: BorderStyle) => void;
-export declare const renderArrow: (ctx: CanvasRenderingContext2D, rel: Relationship, fromNode: Node, toNode: Node, bundle: ArrowBundle, imageCache: ImageCache, showLabel: boolean, selectedBorderStyle: BorderStyle, drawCurves?: boolean) => void;
+export declare const drawLabel: (ctx: CanvasRenderingContext2D, point: Point, angle: number, maxWidth: number, rel: Relationship, bundle: ArrowBundle, disabledItemStyles: DisabledItemStyles, fontColor: string, flip?: boolean) => void;
+export declare const renderWaypointArrow: (ctx: CanvasRenderingContext2D, rel: Relationship, from: Node, to: Node, bundle: ArrowBundle, imageCache: ImageCache, showLabel: boolean, drawCurves: boolean, selectedBorderStyle: BorderStyle, disabledItemStyles: DisabledItemStyles, defaultRelationshipColor?: string) => void;
+export declare const renderSelfArrow: (ctx: CanvasRenderingContext2D, rel: Relationship, node: Node, bundle: ArrowBundle, imageCache: ImageCache, showLabel: boolean, selectedBorderStyle: BorderStyle, disabledItemStyles: DisabledItemStyles, defaultRelationshipColor?: string) => void;
+export declare const renderArrow: (ctx: CanvasRenderingContext2D, rel: Relationship, fromNode: Node, toNode: Node, bundle: ArrowBundle, imageCache: ImageCache, showLabel: boolean, selectedBorderStyle: BorderStyle, disabledItemStyles: DisabledItemStyles, defaultRelationshipColor: string, 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.

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

@@ -9,7 +9,7 @@ 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";
+export declare const RelColor = "#818790";
 /** 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. */
@@ -28,11 +28,6 @@ export declare const SelfRefHeight = 35;
 export declare const SelfRefLabelMaxWidth = 40;
 /** Width increase when a relationship is selected. */
 export declare const SelectedWidthFactor = 1.5;
-/** 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;

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

@@ -1,4 +1,4 @@
-import type { BorderStyles } from '../../../modules/state';
+import type { BorderStyles, DisabledItemStyles } from '../../../modules/state/types';
 import type { Node } from '../../../types/graph-element';
 import type AnimationHandler from '../AnimationHandler';
 type RingStyle = {
@@ -52,7 +52,8 @@ export declare const findMinLength: (lines: any[], ctx: CanvasRenderingContext2D
  * @param imageCache {any} - The image cache to use.
  * @param animationHandler {AnimationHandler} - The animation handler.
  * @param nodeBorderStyles {BorderStyles} - The node border styles.
+ * @param disabledItemStyles {DisabledItemStyles} - The styles for the disabled items.
  * @param zoomLevel {number} - The current zoom level.
  */
-export declare const drawNode: (ctx: CanvasRenderingContext2D, node: Node, imageCache: any, animationHandler: AnimationHandler, nodeBorderStyles: BorderStyles, zoomLevel?: number) => void;
+export declare const drawNode: (ctx: CanvasRenderingContext2D, node: Node, imageCache: any, animationHandler: AnimationHandler, nodeBorderStyles: BorderStyles, disabledItemStyles: DisabledItemStyles, defaultNodeColor?: string, ellipsisWidth?: number, zoomLevel?: number) => void;
 export {};

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

@@ -1,6 +1,6 @@
 import type { Point } from '../../utils/geometry';
 import type { TextSegment } from './types';
-export declare const fontThresholds: number[][];
+export declare const fontThresholds: [number, number][];
 /**
  * This function takes color in hex format or rgb() or rgba() format and overrides the opacity. Returns rgba() string.
  * @param {string} color
@@ -65,5 +65,5 @@ export declare function getIndividualInfoLevels(r: number, zoomLevel: 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 declare const drawNodeCaption: (ctx: CanvasRenderingContext2D, lines: TextSegment[], stylesPerChar: string[][], initialYPos: number, fontSize: number, fontFace: string, lineDistance: number, x: number, y: number, ellipsisWidth: number) => void;
 export {};

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

@@ -30,7 +30,7 @@ export declare const tryBreakingOnSpaces: (text: string, measureWidth: (text: st
  *
  * @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[];
+export declare const getLines: (ctx: CanvasRenderingContext2D, text: string, fontFace: string, fontSize: string | number, maxWidth: number, hasIcon: boolean, maxNoLines: number, align: string) => TextSegment[];
 /**
  * Returns the styles by char for a group of property values
  * @param {array} captions = array of captions

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

@@ -1,6 +1,6 @@
 import type { Node, Relationship } from '../../index';
 import type { DataSet } from '../../modules/dataset';
-import type { NvlState } from '../../modules/state';
+import type { NvlState } from '../../modules/state/types';
 import type Renderer from './Renderer';
 export interface ControllerInterface {
     mainSceneRenderer: Renderer;

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

@@ -1,6 +1,6 @@
 import { mat4 } from 'gl-matrix';
 import type { DataSet } from '../../modules/dataset';
-import type { NvlState } from '../../modules/state';
+import type { NvlState } from '../../modules/state/types';
 import type { Node, Relationship } from '../../types/graph-element';
 export default class Renderer {
     private readonly nodeShader;

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

@@ -1,2 +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";
+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 vec3 selectedInnerBorderColor;\nvarying lowp vec3 shadowColor;\nvarying lowp float selected;\nvarying lowp float hovered;\nvarying lowp float varNodeSize;\n\nmediump float circleSize = 0.40;\nmediump float defaultBoderSize = 0.42;\nmediump float innerSelectedRingSize = 0.43;\nmediump float outerSelectedRingSize = 0.47;\nmediump float shadowSize = 0.51;\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 borderAlpha = getCircleAlpha(defaultBoderSize, nodeSize, dist);\n    lowp float ringAlpha = getCircleAlpha(innerSelectedRingSize, nodeSize, dist);\n    lowp vec3 finalColor = color.xyz;\n    lowp float finalAlpha = nodeAlpha;\n\n    if (selected > 0.0) {\n      lowp float shadowAlpha = getShadowAlpha(outerSelectedRingSize, dist);\n      lowp float ringAlpha2 = getCircleAlpha(outerSelectedRingSize, nodeSize, dist);\n\n      if (drawDefaultBorder > 0.0) {\n        finalColor = mix(nodeBorderColor, finalColor, nodeAlpha);\n        finalColor = mix(selectedInnerBorderColor, finalColor, borderAlpha);\n        finalColor = mix(selectedBorderColor, finalColor, ringAlpha);\n        finalColor = mix(shadowColor, finalColor, ringAlpha2);\n        finalAlpha = max(shadowAlpha, max(nodeAlpha, max(borderAlpha, ringAlpha2)));\n      } else {\n        finalColor = mix(selectedInnerBorderColor, finalColor, nodeAlpha);\n        finalColor = mix(selectedBorderColor, finalColor, ringAlpha);\n        finalColor = mix(shadowColor, finalColor, ringAlpha2);\n        finalAlpha = max(shadowAlpha, max(nodeAlpha, max(ringAlpha, ringAlpha2)));\n      }\n    } else if (hovered > 0.0) {\n      if (drawDefaultBorder > 0.0) {\n        lowp float shadowAlpha = getShadowAlpha(defaultBoderSize, dist);\n  \n        finalColor = mix(nodeBorderColor, finalColor, nodeAlpha);\n        finalColor = mix(shadowColor, finalColor, borderAlpha);\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 = borderAlpha;\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

@@ -1,2 +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}";
+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 vec3 u_selectedInnerBorderColor;\nuniform lowp vec3 u_shadowColor;\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 vec3 selectedInnerBorderColor;\nvarying lowp vec3 shadowColor;\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  selectedInnerBorderColor = u_selectedInnerBorderColor;\n  shadowColor = u_shadowColor;\n  drawDefaultBorder = u_drawDefaultBorder;\n}";
 export default _default;

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

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

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

@@ -1,2 +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";
+declare const _default: "\nattribute vec2 coordinates;\nuniform mat4 u_projection;\nuniform lowp vec4 u_minimapViewportBoxColor;\n\nvarying lowp vec4 minimapViewportBoxColor;\n\nvoid main(void) {\n  gl_Position = u_projection * vec4(coordinates, 0.0, 1.0);\n  minimapViewportBoxColor = u_minimapViewportBoxColor;\n}\n";
 export default _default;

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

@@ -0,0 +1,3 @@
+import type { NvlState } from '../modules/state/types';
+export declare const enrichWithAria: (canvasParent: HTMLElement, instanceId: string) => HTMLDivElement;
+export declare const updateAriaDescription: (state: NvlState, descriptionElement: HTMLDivElement) => void;

package/dist/types/utils/ariaUtils.test.d.ts

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,14 @@
+import colorString from 'color-string';
+/**
+ * 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;
+export declare const colorToRGB: (color: string) => colorString.Color;
+export declare const isValidColor: (color: unknown) => boolean;
+export declare const rgbaToVec4: (rgba: number[]) => number[];
+export declare const rgbToVec3: (rgb: number[]) => number[];
+export declare const colorToUIntArray: (color: string) => number;
+export declare const colorToVec3: (color: string) => number[];
+export declare const colorToVec4: (color: string) => number[];

package/dist/types/utils/colorUtils.test.d.ts

@@ -0,0 +1 @@
+export {};

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

@@ -8,9 +8,16 @@ export declare const VerletSimulationStopVelocity = 0.1;
 export declare const MappingEnd = 999999;
 export declare const ActiveAnimDuration = 1000;
 export declare const DefaultNodeSize = 25;
-export declare const DefaultNodeColor = "#478BFF";
+export declare const DefaultNodeColor = "#FFDF81";
+export declare const DefaultRelColor = "#818790";
 export declare const DefaultRelWidth = 1;
-export declare const DisabledRelColor = "#ededed";
+export declare const DisabledItemColor = "#EDEDED";
+export declare const DisabledItemFontColor = "#DDDDDD";
+export declare const DefaultShadowColor = "#CFD1D4";
+export declare const DefaultSelectedInnerColor = "#F5F6F6";
+export declare const DefaultSelectedOuterColor = "#8FE3E8";
+export declare const TextColor = "#1A1B1D";
+export declare const TextColorInverse = "#FFFFFF";
 export declare const absFillStyle: {
     position: string;
     top: number;

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

@@ -9,9 +9,10 @@ export type FlatRel = Omit<Relationship & {
  * Falls back to default rel color when relationships between two nodes have varying colors.
  * Sums widths of relationships when more than one relationship exists between two nodes.
  * @param {Relationship[]} relItems List of all relationships and their connected ids.
+ * @param {string} [disabledItemColor] The color to use for the disabled relationships
  * @return {FlatRel[]} A flattened list of relationships.
  */
-export declare const relItemsToFlatList: (relItems: Relationship[]) => FlatRel[];
+export declare const relItemsToFlatList: (relItems: Relationship[], disabledItemColor?: string) => FlatRel[];
 export declare const getAdjNodesMapAndRelMap: (rels: Relationship[]) => {
     adjNodesMap: Record<string, Set<string>>;
     relMap: Record<string, Relationship[]>;

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

@@ -1,4 +1,4 @@
-import type { NvlState } from '../modules/state';
+import type { NvlState } from '../modules/state/types';
 import type { Node, Relationship } from '../types/graph-element';
 import type { Point } from './geometry';
 /**

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

@@ -0,0 +1,3 @@
+type Layouts = 'CoseBilkentLayout' | 'HierarchicalLayout';
+export declare const initializeWorker: (workerName: Layouts, workersDisabled?: boolean) => SharedWorker;
+export {};

package/dist/types/utils/webWorkerUtils.test.d.ts

@@ -0,0 +1 @@
+export {};

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

@@ -2,19 +2,50 @@ import type { Node } from '../index';
 import type { Point } from './geometry';
 declare const getExtremeLimits: (nodePositions: Point[]) => Point[];
 declare const getMaxDistance: (extremeLimits?: Point[]) => number;
+/**
+ * Gets the center choordinates and the width and height for the given node positions
+ * @param {Point[] | Node[]} nodePositions - The node positions
+ * @param {number} maxNodeRadius - The maximum node radius
+ * @returns An object with the center x and y coordinates and the width and height
+ */
 declare const getPositionBoundaries: (nodePositions?: Point[] | Node[], maxNodeRadius?: number) => {
     centerX: number;
     centerY: number;
     nodesWidth: number;
     nodesHeight: number;
 };
+/**
+ * Gets the required zoom level for the given view and scene dimensions to fit the scene into the view
+ * @param {number} viewWidth - The width of the required view
+ * @param {number} viewHeight - The height of the required view
+ * @param {number} sceneWidth - The width of the canvas scene
+ * @param {number} sceneHeight - The height of the canvas scene
+ * @returns An object with the zoom level for the x and y axis
+ */
 declare const getZoomLevel: (viewWidth: number, viewHeight: number, sceneWidth: number, sceneHeight: number) => {
     zoomX: number;
     zoomY: number;
 };
+/**
+ * Creates a zoom target based on the given zoom levels and the min and max zoom level
+ * @param {number} zoomX - The zoom level for the x axis
+ * @param {number} zoomY - The zoom level for the y axis
+ * @param {number} minZoom - The minimum zoom level
+ * @param {number} maxZoom - The maximum zoom level
+ * @returns The zoom target
+ */
 declare const createZoomTarget: (zoomX: number, zoomY: number, minZoom?: number, maxZoom?: number) => number;
+/**
+ * Gets the zoom target to fit the given node positions into the scene
+ * @param {Point[]} nodePositions - The node positions
+ * @param {number} containerWidth - The width of the container NVL is displayed in
+ * @param {number} containerHeight - The height of the container NVL is displayed in
+ * @param {number} maxNodeRadius - The maximum node radius, which is added as margin to the scene (defaults to `50`)
+ * @returns
+ */
+declare const getZoomTargetForNodePositions: (nodePositions: Point[], containerWidth: number, containerHeight: number, maxNodeRadius?: number) => number;
 declare const getFlexibleZoomLimit: (nodePositions: Point[], rect: HTMLCanvasElement, maxNodeRadius: number) => number;
 declare const getNewZoomWithinLimits: (newZoom: number, oldZoom: number, minZoom: number, maxZoom: number) => number;
 declare const isZoomOutAtLimit: (newZoom: number, oldZoom: number, zoomOutLimit: number) => boolean;
 declare const getDynamicZoom: (nodePositions: Point[] & Node[], minZoom: number, maxZoom: number, rect: HTMLCanvasElement, newZoom: number, currentZoom: number) => number;
-export { getFlexibleZoomLimit, isZoomOutAtLimit, getNewZoomWithinLimits, getExtremeLimits, getMaxDistance, getPositionBoundaries, getZoomLevel, createZoomTarget, getDynamicZoom };
+export { getFlexibleZoomLimit, getZoomTargetForNodePositions, isZoomOutAtLimit, getNewZoomWithinLimits, getExtremeLimits, getMaxDistance, getPositionBoundaries, getZoomLevel, createZoomTarget, getDynamicZoom };