@neo4j-nvl/base 0.3.1-dd1304e0 → 0.3.1-ebba99bf

package/dist/types/index.d.ts

@@ -1,6 +1,7 @@
 import type { ExternalCallbacks } from './modules/ExternalCallbackHandler';
 import type { ForceDirectedOptions, HierarchicalOptions, Layout, LayoutOptions, NvlOptions, NvlState, Renderer, ZoomOptions } from './modules/state';
 import { ForceDirectedLayoutType, FreeLayoutType, GridLayoutType, HierarchicalLayoutType, d3ForceLayoutType } from './modules/state';
+import type { StyledCaption } from './renderers/canvasrenderer/types';
 import { drawCircleBand } from './renderers/canvasrenderer/util';
 import type { Node, PartialNode, PartialRelationship, Relationship } from './types/graph-element';
 import { CompatibilityError } from './utils/errors';
@@ -17,7 +18,9 @@ interface NvlMouseEvent extends MouseEvent {
  * Class for a NVL instance.
  * @example
  * This is a basic setup for a NVL instance.
- * ```js
+ * ```ts
+ * import { NVL } from '@neo4j-nvl/base'
+ *
  * const nodes = [
  *   { id: '1', label: 'Node 1', color: '#e04141' },
  *   { id: '2', label: 'Node 2', color: '#e09c41' }
@@ -26,7 +29,6 @@ interface NvlMouseEvent extends MouseEvent {
  *   { id: '12', from: '1', to: '2' }
  * ]
  * const options = {
- *   layout: 'hierarchical',
  *   initialZoom: 0.5
  * }
  * const callbacks = {
@@ -68,7 +70,11 @@ declare class NVL {
      * If an existing property is not provided, it will not be changed.
      * @example
      * Adding and updating nodes and relationships
-     * ```js
+     * ```ts
+     * import { NVL } from '@neo4j-nvl/base'
+     *
+     * const nvl = new NVL(document.getElementById('frame'), [{ id: '0' }], [])
+     *
      * const nodes = [
      * { id: '1', label: 'Node 1', color: '#e04141' },
      * { id: '2', label: 'Node 2', color: '#e09c41' }
@@ -104,15 +110,17 @@ declare class NVL {
      * If an existing property is not provided, it will not be changed.
      * @example
      * Updating nodes and relationships
-     * ```js
+     * ```ts
+     * import { NVL } from '@neo4j-nvl/base'
+     *
      * const nodes = [
-     * { id: '1', label: 'Node 1', color: '#e04141' },
-     * { id: '2', label: 'Node 2', color: '#e09c41' }
+     *   { id: '1', label: 'Node 1', color: '#e04141' },
+     *   { id: '2', label: 'Node 2', color: '#e09c41' }
      * ]
      * const relationships = [
-     * { id: '12', from: '1', to: '2' }
+     *   { id: '12', from: '1', to: '2' }
      * ]
-     * const nvl = new NVL(container, nodes, relationships)
+     * const nvl = new NVL(document.getElementById('frame'), nodes, relationships)
      * // Updates an existing node and relationship
      * nvl.updateElementsInGraph([{ id: '1', selected: true }], [{ id: '12', color: '#e0df41' }])
      * ```
@@ -277,9 +285,6 @@ declare class NVL {
      * @param {string} options.backgroundColor - The background color of the png file.
      * @note The size of the png file will be as large as the entire graph at the default zoom level.
      * Can result in a very large file.
-     * @example
-     * // Save the entire graph visualization canvas as a png to the client.
-     * graphVisualization.saveFullGraphToFile({ filename: 'graph.png', backgroundColor: '#fff' })
      */
     saveFullGraphToLargeFile(options: {
         filename?: string;
@@ -341,10 +346,10 @@ declare class NVL {
      * @example
      * ```js
      * const container = document.getElementById('frame')
-     * const nvl = new NVL(container, nodes, relationships)
+     * const nvl = new NVL(container, [{ id: '0' }], [])
      *
      * // Get the nodes and relationships that have been hit by a pointer event.
-     * container.addEventListener('click', (evt) => {
+     * container?.addEventListener('click', (evt) => {
      *   const { nvlTargets } = nvl.getHits(evt)
      *   console.log('clicked elements:', nvlTargets)
      * })
@@ -375,5 +380,5 @@ declare const colorMapperFunctions: {
     textColorForBackground: (color: string) => string;
 };
 export default NVL;
-export type { NvlOptions, Renderer, Node, Relationship, PartialNode, PartialRelationship, Layout, LayoutOptions, ForceDirectedOptions, HierarchicalOptions, ExternalCallbacks, HitTargets, HitTargetNode, HitTargetRelationship, Point, NvlMouseEvent, ZoomOptions };
+export type { NvlOptions, Renderer, Node, Relationship, PartialNode, PartialRelationship, Layout, LayoutOptions, ForceDirectedOptions, HierarchicalOptions, ExternalCallbacks, HitTargets, HitTargetNode, HitTargetRelationship, Point, NvlMouseEvent, ZoomOptions, StyledCaption };
 export { NVL, colorMapperFunctions, CompatibilityError, ForceDirectedLayoutType, HierarchicalLayoutType, GridLayoutType, FreeLayoutType, d3ForceLayoutType, drawCircleBand };

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

@@ -1,4 +1,4 @@
-import type { SimulationLinkDatum } from 'd3-force';
+import type { SimulationLinkDatum, SimulationNodeDatum } from 'd3-force';
 import type { D3Node } from './types';
 export declare const VELOCITY_DECAY = 0.4;
 export declare const DEFAULT_ALPHA = 1;
@@ -10,6 +10,7 @@ export declare const MAX_STABILIZE_TICKS = 100;
 export declare const LINK_DISTANCE = 45;
 export declare const BARNES_HUT_THETA = 1.2;
 export declare const FORCE_LINK_DISTANCE: (relationship: SimulationLinkDatum<D3Node>) => number;
+export declare const FORCE_LINK_STRENGTH: (link: SimulationLinkDatum<SimulationNodeDatum>, count: number[]) => number;
 export declare const FORCE_COLLIDE_RADIUS: (node: D3Node) => number;
 export declare const LAYOUT_RADIUS: (numberOfNodes: number) => number;
 export declare const FORCE_CHARGE: () => number;

package/dist/types/layouts/d3forcelayout/d3ForceLayout.d.ts

@@ -8,9 +8,12 @@ export class d3ForceLayout {
         x: number;
         y: number;
     };
+    nodeRelCount: any[];
     simulation: import("d3-force").Simulation<import("d3-force").SimulationNodeDatum, undefined>;
     simulationStopped: boolean;
     shouldUpdate: boolean;
+    shouldReheatNodes: boolean;
+    shouldCountNodeRels: boolean;
     stateDisposers: any[];
     setOptions(options: any): void;
     updateNodes(positionList: any): void;
@@ -26,4 +29,5 @@ export class d3ForceLayout {
     terminateUpdate(): void;
     destroy(): void;
     setAlpha(alpha: any): void;
+    countNodeRels(): any[];
 }

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

@@ -116,7 +116,6 @@ export class PhysLayout {
     _dumpTexture(framebuffer: any, numItems: any, msg: any): void;
     _getScaleNumber(iterationNo: any, delayedDecayFormula?: (iterationNo: any, p: any, lowerBar: any) => any): any;
     _getBaseLength(subGraphNodeCount: any): number;
-    _hasSizeChanged(updates?: any[]): boolean;
     _checkForUpdates(fullRefresh?: boolean): void;
     _getNodePosition(nodeIndex: any): {
         x: any;

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

@@ -4,15 +4,15 @@ type CallbackFunction = ExternalCallbacks['onError'] | ExternalCallbacks['onLayo
  * A class for registering and calling callbacks
  * @example
  * ```
+ * import { CallbackHelper } from './CallbackHelper'
+ *
  * const callbackHelper = new CallbackHelper()
- * callbackHelper.register('myEvent', (data) => {
- *  console.log(data)
+ * callbackHelper.register('onError', (e) => {
+ *  console.error(e)
  * })
- * callbackHelper.callIfRegistered('myEvent', 'Hello World')
- * // Logs 'Hello World'
  * ```
  */
-export default class CallbackHelper {
+export declare class CallbackHelper {
     private readonly callbacks;
     constructor();
     /**

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

@@ -142,7 +142,13 @@ export interface NvlOptions {
      * @note will be ignored when {@link renderer} is set
      */
     useWebGL?: boolean;
-    /** What renderer to use */
+    /**
+     * What renderer to use
+     * Possible values are 'webgl' or 'canvas'
+     * @defaultValue 'webgl'
+     * @note WebGL renderer uses GPU and has better performance.
+     * Captions and arrowheads are only displayed when using the canvas renderer.
+     */
     renderer?: Renderer;
     /**
      * @internal

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

@@ -1,11 +1,11 @@
-import type { Cache, CacheInfo, CacheItem } from './types';
+import type { Cache } from './types';
 declare class ImageCache {
     cache: Cache;
     constructor();
-    getOrCreateEntry(src: string): CacheItem;
-    invertCanvas(ctx: CanvasRenderingContext2D): void;
-    loadImage(src: string): CacheInfo;
-    drawIfNeeded(info: CacheInfo, inverted: boolean): void;
     getImage(src: string, inverted?: boolean): HTMLCanvasElement;
+    private getOrCreateEntry;
+    private invertCanvas;
+    private loadImage;
+    private drawIfNeeded;
 }
 export default ImageCache;

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

@@ -29,7 +29,10 @@ interface GraphElement {
      * @note Has no affect on self-referring relationships.
      */
     captionAlign?: 'top' | 'bottom' | 'center';
-    /** The caption text and font style.*/
+    /**
+     * The caption text and font style.
+     * @note Captions are only visible when using the 'canvas' renderer.
+     */
     captions?: StyledCaption[];
     /**
      * An icon to be displayed anywhere on top of the graph element.

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

@@ -7,3 +7,4 @@ export function getConnectedNodesAndRels(addedNodes: any, addedRels: any, nodes:
     connectedNodes: {};
     connectedRels: {};
 };
+export function hasSizeChanged(graphObjectUpdates?: any[]): boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@neo4j-nvl/base",
-  "version": "0.3.1-dd1304e0",
+  "version": "0.3.1-ebba99bf",
   "license": "SEE LICENSE IN 'LICENSE.txt'",
   "homepage": "https://neo4j.com/docs/nvl/current/",
   "description": "Base library for the Neo4j Visualization Library",
@@ -33,7 +33,7 @@
     "tsconfig": "./tsconfig.json"
   },
   "dependencies": {
-    "@neo4j-nvl/layout-workers": "^0.3.1-dd1304e0",
+    "@neo4j-nvl/layout-workers": "^0.3.1-ebba99bf",
     "color-string": "^1.9.1",
     "contrast": "1.0.1",
     "d3-force": "^3.0.0",