@neo4j-nvl/base 0.3.6-ade05d13 → 0.3.6-bc655308

package/dist/types/index.d.ts

@@ -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/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;
@@ -175,6 +187,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 +201,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 = {
@@ -249,6 +274,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/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 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@neo4j-nvl/base",
-  "version": "0.3.6-ade05d13",
+  "version": "0.3.6-bc655308",
   "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-ade05d13",
+    "@neo4j-nvl/layout-workers": "0.3.6-bc655308",
     "@segment/analytics-next": "^1.70.0",
     "color-string": "^1.9.1",
     "d3-force": "^3.0.0",