@neo4j-nvl/base 0.3.6-e7f05fb1 → 0.3.6-eb8dc47c

package/dist/types/index.d.ts

@@ -250,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;

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

@@ -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/hierarchicallayout/HierarchicalLayout.d.ts

@@ -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/modules/NvlController.d.ts

@@ -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/state.d.ts

@@ -23,6 +23,13 @@ export type BorderStyles = {
     selected: BorderStyle;
     default: BorderStyle;
 };
+/**
+ * @internal
+ */
+export type DisabledItemStyles = {
+    color: string;
+    fontColor: string;
+};
 export declare const RelationshipBorderStyles: BorderStyles;
 /** The default zoom level in a graph when not specified otherwise. */
 export declare const DefaultZoomLevel = 0.75;
@@ -130,7 +137,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;
@@ -159,6 +171,10 @@ export interface NvlOptions {
      * Whether or not to disable WebGL completely.
      */
     disableWebGL?: 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;
     /**
      * @internal
      * Specify the log level.
@@ -175,6 +191,10 @@ export interface NvlOptions {
     nodeDefaultBorderColor?: string;
     /** The color to use for the selected border of nodes */
     selectedBorderColor?: 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;
     /**
      * @internal
      * Defines a time limit for how long layout iterations may run
@@ -185,6 +205,15 @@ export interface NvlOptions {
      * @defaultValue false
      */
     disableTelemetry?: 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 +243,7 @@ export interface NvlState {
     webGLVisible: boolean;
     renderer: Renderer;
     disableWebGL: boolean;
+    disableWebWorkers: boolean;
     disableTelemetry: boolean;
     fitMovement: number;
     layout: Layout;
@@ -249,6 +279,7 @@ export interface NvlState {
     reaction: Function;
     nodeBorderStyles: BorderStyles;
     relationshipBorderStyles: BorderStyles;
+    disabledItemStyles: DisabledItemStyles;
 }
 /**
  * Create a new NVL state

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

@@ -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';
 import type { Node, Relationship } from '../../../types/graph-element';
 import type { Point } from '../../../utils/geometry';
 import type ImageCache from '../ImageCache';
@@ -34,10 +34,10 @@ export declare const getPointsForStraight: (rel: Relationship, bundle: ArrowBund
  * @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, 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, 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) => void;
+export declare const renderSelfArrow: (ctx: CanvasRenderingContext2D, rel: Relationship, node: Node, bundle: ArrowBundle, imageCache: ImageCache, showLabel: boolean, selectedBorderStyle: BorderStyle, disabledItemStyles: DisabledItemStyles) => void;
+export declare const renderArrow: (ctx: CanvasRenderingContext2D, rel: Relationship, fromNode: Node, toNode: Node, bundle: ArrowBundle, imageCache: ImageCache, showLabel: boolean, selectedBorderStyle: BorderStyle, disabledItemStyles: DisabledItemStyles, 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

@@ -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';
 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, 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/utils/ariaUtils.d.ts

@@ -0,0 +1,3 @@
+import type { NvlState } from '../modules/state';
+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/constants.d.ts

@@ -8,9 +8,14 @@ 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 = "#848484";
 export declare const DefaultRelWidth = 1;
-export declare const DisabledRelColor = "#ededed";
+export declare const DisabledItemColor = "#ededed";
+export declare const DisabledItemFontColor = "#DDDDDD";
+export declare const DefaultShadowColor = "#bbb";
+export declare const DefaultSelectedInnerColor = "#fff";
+export declare const DefaultSelectedOuterColor = "#8FE3E8";
 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/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@neo4j-nvl/base",
-  "version": "0.3.6-e7f05fb1",
+  "version": "0.3.6-eb8dc47c",
   "license": "SEE LICENSE IN 'LICENSE.txt'",
   "homepage": "https://neo4j.com/docs/nvl/current/",
   "description": "Base library for the Neo4j Visualization Library",
@@ -28,7 +28,7 @@
     "postpack": "rm LICENSE.txt"
   },
   "dependencies": {
-    "@neo4j-nvl/layout-workers": "0.3.6-e7f05fb1",
+    "@neo4j-nvl/layout-workers": "0.3.6-eb8dc47c",
     "@segment/analytics-next": "^1.70.0",
     "color-string": "^1.9.1",
     "d3-force": "^3.0.0",