@neo4j-nvl/base 0.3.9-bdb232e9 → 0.3.9-ce347313

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

@@ -18,6 +18,7 @@ export type BorderStyle = {
 };
 /**
  * @internal
+ * @hidden
  */
 export type BorderStyles = {
     selected: BorderStyle;
@@ -25,6 +26,7 @@ export type BorderStyles = {
 };
 /**
  * @internal
+ * @hidden
  */
 export type DisabledItemStyles = {
     color: string;
@@ -36,22 +38,27 @@ export type DisabledItemStyles = {
 export interface ForceDirectedOptions {
     /**
      * @internal
+     * @hidden
      */
     gravity?: number;
     /**
      * @internal
+     * @hidden
      */
     intelWorkaround?: boolean;
     /**
      * @internal
+     * @hidden
      */
     enableCytoscape?: boolean;
     /**
      * @internal
+     * @hidden
      */
     enableVerlet?: boolean;
     /**
      * @internal
+     * @hidden
      */
     simulationStopVelocity?: number;
 }
@@ -66,34 +73,48 @@ export interface HierarchicalOptions {
 }
 export declare const isHierarchicalLayoutOptions: (options: LayoutOptions) => options is HierarchicalOptions;
 /**
- * The name of the force directed layout
+ * NVL's main force directed layout.
  */
 export declare const ForceDirectedLayoutType = "forceDirected";
 /**
- * The name of the hierarchical layout
+ * A hierarchical layout using the dagre algorithm.
  */
 export declare const HierarchicalLayoutType = "hierarchical";
 /**
- * The name of the grid layout
- * @internal
+ * A basic grid layout.
  */
 export declare const GridLayoutType = "grid";
 /**
- * The name of the free layout
- * @internal
+ * A free layout that allows for arbitrary positioning of elements using NVL's setPosition method.
  */
 export declare const FreeLayoutType = "free";
 /**
- * The name of the d3 force layout
- * @internal
+ * The commonly used d3-force layout.
  */
 export declare const d3ForceLayoutType = "d3Force";
+/**
+ * A WebGL renderer that uses the GPU for rendering.
+ *
+ * @remarks
+ * This renderer has better performance than the canvas renderer,
+ * but does not support captions and arrowheads.
+ */
 export declare const WebGLRendererType = "webgl";
+/**
+ * A renderer using canvas.
+ *
+ * @remarks
+ * This renderer has lower performance than the WebGL renderer,
+ * but supports captions and arrowheads.
+ */
 export declare const CanvasRendererType = "canvas";
 /**
  * The different types of layouts available
  */
 export type Layout = typeof ForceDirectedLayoutType | typeof HierarchicalLayoutType | typeof GridLayoutType | typeof FreeLayoutType | typeof d3ForceLayoutType;
+/**
+ * The options for the layout.
+ */
 export type LayoutOptions = ForceDirectedOptions | HierarchicalOptions;
 /**
  * The different types of renderers available
@@ -103,6 +124,7 @@ export type Renderer = typeof WebGLRendererType | typeof CanvasRendererType;
 export interface NvlOptions {
     /**
      * @internal
+     * @hidden
      * Id for uniquely identifying the instance of Nvl
      */
     instanceId?: string;
@@ -130,6 +152,7 @@ export interface NvlOptions {
     allowDynamicMinZoom?: boolean;
     /**
      * @internal
+     * @hidden
      * @deprecated
      * The DOM element in which to render the graph visualization
      */
@@ -137,7 +160,7 @@ export interface NvlOptions {
     /**
      * 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.
+     * @remarks 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;
@@ -165,11 +188,13 @@ export interface NvlOptions {
     renderer?: Renderer;
     /**
      * @internal
+     * @hidden
      * Whether or not to disable WebGL completely.
      */
     disableWebGL?: boolean;
     /**
      * @internal
+     * @hidden
      * Specify the log level.
      */
     logging?: {
@@ -177,11 +202,16 @@ export interface NvlOptions {
     };
     /**
      * @internal
+     * @hidden
      */
     relationshipThreshold?: number;
+    /** Callbacks for various events in the NVL instance. */
     callbacks?: ExternalCallbacks;
+    /** Styling options for the NVL instance. */
     styling?: {
+        /** The default color for nodes. */
         defaultNodeColor?: string;
+        /** The default color for relationships. */
         defaultRelationshipColor?: string;
         /** The color to use for the default border of nodes */
         nodeDefaultBorderColor?: string;
@@ -200,26 +230,27 @@ export interface NvlOptions {
     };
     /**
      * The color to use for the default border of nodes
-     * @deprecated Use {@link styling.nodeDefaultBorderColor} instead
+     * @deprecated Use the nodeDefaultBorderColor property in the styling object instead
      */
     nodeDefaultBorderColor?: string;
     /**
      * The color to use for the selected border of nodes
-     * @deprecated Use {@link styling.selectedBorderColor} instead
+     * @deprecated Use the selectedBorderColor property in the styling object instead
      */
     selectedBorderColor?: string;
     /**
      * The color to use for the disabled nodes and relationships
-     * @deprecated Use {@link styling.disabledItemColor} instead
+     * @deprecated Use the disabledItemColor property in the styling object instead
      */
     disabledItemColor?: string;
     /**
      * The color to use for the labels of the disabled nodes and relationships
-     * @deprecated Use {@link styling.disabledItemFontColor} instead
+     * @deprecated Use the disabledItemFontColor property in the styling object instead
      */
     disabledItemFontColor?: string;
     /**
      * @internal
+     * @hidden
      * Defines a time limit for how long layout iterations may run
      */
     layoutTimeLimit?: number;

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

@@ -24,40 +24,37 @@ export declare class Animation {
     private hasNextAnimation;
     /**
      * Constructor
-     * @param {string} elementId The id of the element to animate.
-     * @param {number} startValue The start value of the animation.
+     * @param elementId - The id of the element to animate.
+     * @param startValue - The start value of the animation.
      */
     constructor(elementId: string, startValue: number);
     /**
-     * Sets the duration of the animation
-     * @param {number} duration The duration of the animation.
-     * @returns {void}
+     * Sets the duration of the animation.
+     * @param duration - The duration of the animation.
      * @public
      */
     setDuration(duration: number): void;
     /**
      * Returns the status of the animation
-     * @returns {number} The status of the animation.
+     * @returns The status of the animation.
      * @public
      */
     getStatus(): number;
     /**
      * Advances the animation to the next frame
-     * @returns {boolean} True if there is a next animation, false otherwise.
+     * @returns True if there is a next animation, false otherwise.
      * @public
      */
     advance(): boolean;
     /**
      * Sets the end value of the animation
-     * @param {number} targetValue The end value of the animation.
-     * @returns {void}
+     * @param targetValue - The end value of the animation.
      * @public
      */
     setEndValue(targetValue: number): void;
     /**
      * Sets the end time of the animation
-     * @param {number} newEndTime The end time of the animation.
-     * @returns {void}
+     * @param newEndTime - The end time of the animation.
      * @private
      */
     private setEndTime;

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

@@ -18,18 +18,18 @@ export default class AnimationHandler {
     constructor();
     /**
      * Main function run once per frame to advance all animations
-     * @returns {boolean} true if any animation is still running
+     * @returns True if any animation is still running.
      */
     advance(): boolean;
     /**
      * Sets a flag if animations should be ignored.
      * If set to true all animations always return their end value.
-     * @param {boolean} shouldIgnore
+     * @param shouldIgnore - Whether animations should be ignored.
      */
     ignoreAnimations(shouldIgnore: boolean): void;
     /**
      * Sets the duration for all animations
-     * @param {Object} options - An object containing animation durations for fade and size
+     * @param options - An object containing animation durations for fade and size.
      */
     setOptions(options: {
         fadeDuration: number;
@@ -37,14 +37,13 @@ export default class AnimationHandler {
     }): void;
     /**
      * Returns whether any animation is running
-     * @returns {boolean}
-     */
+     * @returns */
     needsToRun(): boolean;
     /**
      * Returns the current value of an animation
-     * @param {string} elementId - The id of the element the animation is running on
-     * @param {string} name - The name of the animation
-     * @returns {number} The current value of the animation
+     * @param elementId - The id of the element the animation is running on.
+     * @param name - The name of the animation.
+     * @returns The current value of the animation.
      */
     getValueForAnimationName(elementId: string, name: string, target: number, type?: number): number;
     private createAnimation;
@@ -53,20 +52,20 @@ export default class AnimationHandler {
      * Creates a new size animation for the given element and name.
      * If an animation already exists for the given element and name, it will be returned.
      * If not, a new animation will be created.
-     * @param {number} currentValue - The current value of the animation
-     * @param {string} elementId - The id of the element to animate
-     * @param {string} name - The name of the animation
-     * @returns {Animation} The animation
+     * @param currentValue - The current value of the animation.
+     * @param elementId - The id of the element to animate.
+     * @param name - The name of the animation.
+     * @returns The animation.
      */
     private createFadeAnimation;
     /**
      * Creates a new fade animation for the given element and name.
      * If an animation already exists for the given element and name, it will be returned.
      * If not, a new animation will be created.
-     * @param {number} currentValue - The current value of the animation
-     * @param {string} elementId - The id of the element to animate
-     * @param {string} name - The name of the animation
-     * @returns {Animation} The animation
+     * @param currentValue - The current value of the animation.
+     * @param elementId - The id of the element to animate.
+     * @param name - The name of the animation.
+     * @returns The animation.
      */
     private createSizeAnimation;
 }

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

@@ -30,7 +30,7 @@ export default class CanvasRenderer {
     });
     /**
      * Checks if the renderer needs to run.
-     * @returns {boolean} - Whether the renderer needs to run
+     * @returns Whether the renderer needs to run.
      */
     needsToRun(): boolean;
     /**
@@ -55,26 +55,26 @@ export default class CanvasRenderer {
     private renderRelationships;
     /**
      * Returns the nodes at the pointer position
-     * @param {Point} pointer - the position of the pointer
-     * @returns {HitTargetNode[]} - the nodes at the pointer position
+     * @param pointer - The position of the pointer.
+     * @returns The nodes at the pointer position.
      * @todo Sort nodes by distance descending
      */
     getNodesAt(pointer: Point, hitNodeMarginWidth?: number): HitTargetNode[];
     /**
      * Returns the relationships at the pointer position
-     * @param {Point} pointer - the position of the pointer
-     * @returns {HitTargetRelationship[]} - the relationships at the pointer position
+     * @param pointer - The position of the pointer.
+     * @returns The relationships at the pointer position.
      * @todo: sort relationships by distance descending
      */
     getRelsAt(pointer: Point): HitTargetRelationship[];
     destroy(): void;
     /**
      * Checks if the bounding box is outside of the screen.
-     * @param boundingBox - The bounding box to check
-     * @param clientWidth - The client width of the canvas
-     * @param clientHeight - The client height of the canvas
-     * @returns Whether the bounding box is off screen
-     * @note This check doesn't catch all items that are off screen but its simple and removes many of them
+     * @param boundingBox - The bounding box to check.
+     * @param clientWidth - The client width of the canvas.
+     * @param clientHeight - The client height of the canvas.
+     * @returns Whether the bounding box is off screen.
+     * @remarks This check doesn't catch all items that are off screen but its simple and removes many of them
      */
     private isBoundingBoxOffScreen;
     /**

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

@@ -20,60 +20,60 @@ export default class ArrowBundle {
     angles: number[];
     labelInfo: Record<string, LabelGeometry>;
     /**
-     * @param {string} key - The key of the arrow bundle
-     * @param {string} fromId - The source node of the arrow bundle
-     * @param {string} toId - The target node of the arrow bundle
+     * @param key - The key of the arrow bundle.
+     * @param fromId - The source node of the arrow bundle.
+     * @param toId - The target node of the arrow bundle.
      */
     constructor(key: string, fromId: string, toId: string);
     /**
      * Insert a new arrow to the bundle
-     * @param {Relationship} rel - The relationship to insert
+     * @param rel - The relationship to insert.
      */
     insert(rel: Relationship): void;
     setLabelInfo(relId: string, labelInfo: LabelGeometry): void;
     has({ id }: Relationship): boolean;
     /**
      * Remove an arrow from the bundle
-     * @param {Relationship} rel - The arrow to remove
+     * @param rel - The arrow to remove.
      */
     remove({ id }: Relationship): void;
     /**
      * Get the size of the arrow bundle
-     * @returns {number} The size of the arrow bundle
+     * @returns The size of the arrow bundle.
      */
     size(): number;
     relArray(): Relationship[];
     /**
      * Get the maximum font size of the arrows in the bundle
-     * @returns {number} The maximum font size of the arrows in the bundle
+     * @returns The maximum font size of the arrows in the bundle.
      */
     maxFontSize(): number;
     /**
      * Check if relationship is in opposite direction to the bundle.
-     * @param {Relationship} rel - The relationship to check
-     * @returns {boolean} True if the relationship is in opposite direction to the bundle
+     * @param rel - The relationship to check.
+     * @returns True if the relationship is in opposite direction to the bundle.
      */
     relIsOppositeDirection({ from, to }: Relationship): boolean;
     /**
      * Get the index of a given arrow in the bundle
-     * @param {Relationship} rel - The arrow to look for
-     * @returns {number} The index of the arrow in the bundle, or -1 if not found
+     * @param rel - The arrow to look for.
+     * @returns The index of the arrow in the bundle, or -1 if not found.
      */
     indexOf({ id }: Relationship): number;
     /**
      * Get the arrow at a given index in the bundle
-     * @param {number} index - The index of the arrow to get
-     * @returns {Relationship | null} The arrow at the given index
+     * @param index - The index of the arrow to get.
+     * @returns The arrow at the given index.
      */
     getRel(index: number): Relationship | null;
     /**
      * Set the waypoints for the arrow bundle
-     * @param {WaypointPath} waypoints - The waypoints for the arrow bundle
+     * @param waypoints - The waypoints for the arrow bundle.
      */
     setWaypoints(waypoints: WaypointPath): void;
     /**
      * Set the angles for the arrow bundle
-     * @param {number[]} angles - The angles for the arrow bundle
+     * @param angles - The angles for the arrow bundle.
      */
     setAngles(angles: number[]): void;
 }

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

@@ -7,15 +7,15 @@ export default class ArrowBundler {
     constructor(rels: Relationship[], waypoints: Record<string, WaypointPath>);
     /**
      * Get the arrow bundle for a given relation
-     * @param {Relationship} rel - The relationship
-     * @returns {ArrowBundle} The arrow bundle
+     * @param rel - The relationship.
+     * @returns The arrow bundle.
      */
     getBundle(rel: Relationship): ArrowBundle;
     /**
      * Update the data
-     * @param {Record<string, Relationship>} addedRels - The added relations
-     * @param {Record<string, Relationship>} removedRels - The removed relations
-     * @param {Record<string, WaypointPath>} waypoints - The waypoints
+     * @param addedRels - The added relations.
+     * @param removedRels - The removed relations.
+     * @param waypoints - The waypoints.
      */
     updateData(addedRels: Record<string, Relationship>, removedRels: Record<string, Relationship>, updatedRels: Record<string, Relationship>, waypoints: Record<string, WaypointPath>): void;
     /**
@@ -25,9 +25,9 @@ export default class ArrowBundler {
     updatePositions(positionMap: Record<string, Node>): void;
     /**
      * Get a unique ID for a pair of IDs
-     * @param {string} id1 - The first ID
-     * @param {string} id2 - The second ID
-     * @returns {string} A unique ID for the pair of IDs
+     * @param id1 - The first ID.
+     * @param id2 - The second ID.
+     * @returns A unique ID for the pair of IDs.
      */
     private generatePairId;
 }

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

@@ -5,9 +5,9 @@ import type ImageCache from '../ImageCache';
 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.
+ * @param toArrowGap - The gap between the node and the arrow on the to side.
+ * @param fromArrowGap - The gap between the node and the arrow on the from side.
+ * @returns 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.
  */
@@ -16,26 +16,26 @@ export declare const getRadiusDifference: (toArrowGap: number, fromArrowGap: num
  * 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.
+ * @param fromNode - The node the edge starts from.
+ * @param toNode - The node the edge ends at.
+ * @param fromArrowGap - The gap between the node and the arrow on the from side.
+ * @param toArrowGap - The gap between the node and the arrow on the to side.
+ * @returns 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 {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
+ * Draws a label for a relationship.
+ * @param ctx - The canvas context.
+ * @param x - The x coordinate of the label.
+ * @param y - The y coordinate of the label.
+ * @param angle - The angle of the label.
+ * @param maxWidth - The maximum width of the label.
+ * @param rel - The relationship.
+ * @param bundle - The arrow bundle.
+ * @param disabledItemStyles - The styles for disabled items.
+ * @param fontColor - The color of the font.
+ * @param flip - Whether to flip the label.
  */
 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;
@@ -44,12 +44,12 @@ export declare const renderArrow: (ctx: CanvasRenderingContext2D, rel: Relations
 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.
+ * @param rel - The relationship to get the bounding box for.
+ * @param bundle - The arrow bundle the relationship is part of.
+ * @param fromNode - The node the relationship is coming from.
+ * @param toNode - The node the relationship is going to.
+ * @param showLabel - Whether or not a label is shown.
+ * @param drawCurves - Whether or the relationship is drawn as a curve.
+ * @returns 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/nodes/nodes.d.ts

@@ -11,17 +11,17 @@ type RingStyle = {
  * 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 {BorderStyles} - The node border styles.
- * @returns {{ width: number, color: string }[]} - An array of ring styles.
+ * @param node - The node to get the ring styles for.
+ * @param animationHandler - The animation handler.
+ * @param nodeBorderStyles - The node border styles.
+ * @returns 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.
+ * @param Node - The node to get the bounding box for.
+ * @returns The bounding box of the node.
  */
 export declare const getBoundingBox: ({ x, y, size }: Node) => DOMRect;
 /**
@@ -30,19 +30,19 @@ export declare const getBoundingBox: ({ x, y, size }: Node) => DOMRect;
  * @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.
+ * @returns 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.
+ * @returns 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.
+ * @returns The font size.
  */
 export declare const findMinLength: (lines: any[], ctx: CanvasRenderingContext2D, pixelRatio: number) => any;
 /**

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

@@ -8,14 +8,16 @@ export type TextSegment = {
 };
 /**
  * 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 = {
+    /**
+     * The font styles as an array of style keywords.
+     * @example `['bold', 'italic']`
+     */
     styles?: string[];
+    /** The text value for the caption. */
     value?: string;
+    /** The identifier key for the caption. */
     key?: string;
 };
 export type StyledCaptionWithChars = StyledCaption & {