@neo4j-nvl/base 1.2.2 → 2.0.0-1e695738

package/dist/types/index.d.ts

@@ -1,21 +1,20 @@
-import type { ExternalCallbacks } from './modules/ExternalCallbackHandler';
-import type { CircularOptions, ForceDirectedOptions, HierarchicalOptions, Renderer as InternalRenderer, Layout, LayoutOptions, NvlOptions, NvlState, ZoomOptions } from './modules/state/types';
-import { CanvasRendererType, CircularLayoutType, ForceDirectedLayoutType, FreeLayoutType, GridLayoutType, HierarchicalLayoutType, SvgRendererType, WebGLRendererType, d3ForceLayoutType } from './modules/state/types';
-import { drawCircleBand } from './renderers/domrenderer/canvasrenderer/nodeDrawing';
-import type { StyledCaption } from './renderers/domrenderer/shared/types';
-import type { Node, PartialNode, PartialRelationship, Relationship } from './types/graph-element';
-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';
+import { Point } from "./utils/geometry.js";
+import { StyledCaption } from "./renderers/domrenderer/shared/types.js";
+import { Node, NodeWithClientPosition, PartialNode, PartialRelationship, Relationship } from "./types/graph-element.js";
+import { ExternalCallbacks } from "./modules/ExternalCallbackHandler.js";
+import { CanvasRendererType, CircularLayoutType, CircularOptions, Cluster, ClusterByFn, ClusterId, ClusteringOptions, ForceDirectedLayoutType, ForceDirectedOptions, FreeLayoutType, GridLayoutType, HierarchicalLayoutType, HierarchicalOptions, Layout, LayoutOptions, NvlOptions, NvlState, Renderer as Renderer$1, SvgRendererType, WebGLRendererType, ZoomOptions, d3ForceLayoutType } from "./modules/state/types.js";
+import { drawCircleBand } from "./renderers/domrenderer/canvasrenderer/nodeDrawing.js";
+import { CompatibilityError } from "./utils/errors.js";
+import { HitTargetCluster, HitTargetNode, HitTargetRelationship, HitTargets, HitTestTarget } from "./utils/hitTest.js";
+import { nvlResultTransformer } from "./utils/jsDriverResultTransformer.js";
+import { getZoomTargetForNodePositions } from "./utils/zoomFunctions.js";
 /**
  * Extends the MouseEvent interface with the {@link HitTargets} property.
  * The result of a {@link NVL.getHits} call.
  */
 interface NvlMouseEvent extends MouseEvent {
-    /** The graph elements that have been hit by the pointer event. */
-    nvlTargets: HitTargets;
+  /** The graph elements that have been hit by the pointer event. */
+  nvlTargets: HitTargets;
 }
 /**
  * Class for a NVL instance.
@@ -37,374 +36,373 @@ interface NvlMouseEvent extends MouseEvent {
  * ```
  */
 declare class NVL {
-    #private;
-    /**
-     * Creates a new NVL instance.
-     * @param frame - The DOM element to display the graph in.
-     * @param nvlNodes - An array of {@link Node nodes}.
-     * @param nvlRels - An array of {@link Relationship relationships}.
-     * @param options - The {@link NvlOptions options} for the NVL instance.
-     * @param callbacks - Callbacks triggered on NVL events.
-     */
-    constructor(frame: HTMLElement, nvlNodes?: Node[], nvlRels?: Relationship[], options?: NvlOptions, callbacks?: ExternalCallbacks);
-    /**
-     * Restarts the NVL instance.
-     * @param options - New {@link NvlOptions} for the NVL instance.
-     * @param retainPositions - Whether or not to retain the current node positions.
-     * New options will be merged with current options
-     */
-    restart(options?: NvlOptions, retainPositions?: boolean): void;
-    /**
-     * Adds nodes and relationships to NVL and updates existing nodes and relationships.
-     * @param nodes - An Array of {@link Node nodes} to be added or updated.
-     * @param relationships - An Array of {@link Relationship relationships} to be added or updated.
-     * To update nodes or relationships, they must have an id that matches the id of the
-     * node or relationship to be updated.
-     * Only the properties that are provided will be updated.
-     * If an existing property is not provided, it will not be changed.
-     * @example
-     * Adding and updating nodes and relationships
-     * ```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' }
-     * ]
-     * const relationships = [
-     * { id: '12', from: '1', to: '2' }
-     * ]
-     * // Adds new nodes and relationships
-     * nvl.addAndUpdateElementsInGraph(nodes, relationships)
-     * // Updates an existing relationship
-     * nvl.addAndUpdateElementsInGraph([], [{ id: '12', color: '#e0df41' }])
-     * ```
-     */
-    addAndUpdateElementsInGraph(nodes?: Node[] | PartialNode[], relationships?: Relationship[] | PartialRelationship[]): void;
-    /**
-     * Gets the currently selected nodes.
-     * @returns An array of all currently selected {@link Node nodes} and their positions.
-     */
-    getSelectedNodes(): (Node & Point)[];
-    /**
-     * Gets the currently selected relationships.
-     * @returns An array of all currently selected {@link Relationship relationships}.
-     */
-    getSelectedRelationships(): Relationship[];
-    /**
-     * Updates relationships in the current scene with the provided array of nodes and relationships.
-     * @param nodes - The updated {@link Node nodes}.
-     * @param relationships - The updated {@link Relationship relationships}.
-     * Ignores any nodes or relationships that do not exist in the current scene.
-     * To update nodes or relationships, they must have an id that matches the id of the
-     * node or relationship to be updated.
-     * Only the properties that are provided will be updated.
-     * If an existing property is not provided, it will not be changed.
-     * @example
-     * Updating nodes and relationships
-     * ```ts
-     * import { NVL } from '@neo4j-nvl/base'
-     *
-     * const nodes = [
-     *   { id: '1', label: 'Node 1', color: '#e04141' },
-     *   { id: '2', label: 'Node 2', color: '#e09c41' }
-     * ]
-     * const relationships = [
-     *   { id: '12', from: '1', to: '2' }
-     * ]
-     * 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' }])
-     * ```
-     */
-    updateElementsInGraph(nodes: Node[] | PartialNode[], relationships: Relationship[] | PartialRelationship[]): void;
-    /**
-     * Adds nodes and relationships in the current scene.
-     * @param nodes - The nodes to be added.
-     * @param relationships - The relationships to be added.
-     */
-    addElementsToGraph(nodes: Node[], relationships: Relationship[]): void;
-    /**
-     * Removes the specified nodes from the current scene.
-     * @param nodeIds - The node ids to be removed.
-     * Adjacent relationships will also be removed.
-     */
-    removeNodesWithIds(nodeIds: string[]): void;
-    /**
-     * Removes the specified relationships from the current scene.
-     * @param relationshipIds - The relationship ids to be removed.
-     */
-    removeRelationshipsWithIds(relationshipIds: string[]): void;
-    /**
-     * Returns all nodes that is currently stored in the visualisation.
-     * `x` and `y` are client/screen coordinates relative to the canvas.
-     * @returns The array of {@link Node nodes}.
-     *
-     * @note In the next major release, `x` and `y` become layout coordinates and
-     * screen coordinates move to a `clientPosition` field.
-     */
-    getNodes(): Node[];
-    /**
-     * Returns the relationships that are currently in the visualization.
-     * @returns An array of the {@link Relationship relationships} in the visualization.
-     */
-    getRelationships(): Relationship[];
-    /**
-     * Returns the node data that is currently stored in the visualisation for a given id.
-     * @param id - The id of the {@link Node node} that should be returned.
-     * @returns The {@link Node node} or undefined if there is no node with the given id.
-     */
-    getNodeById(id: string): Node;
-    /**
-     * Returns the relationship data that is currently stored in the visualisation for a given id.
-     * @param id - The id of the {@link Relationship relationship} that should be returned.
-     * @returns The {@link Relationship relationship} or undefined if there is no relationship with the given id.
-     */
-    getRelationshipById(id: string): Relationship;
-    /**
-     * Returns the node position that is currently stored in the visualisation for a given id.
-     * @param id - The id of the node position that should be returned.
-     * @returns The position information for the given id, or undefined if there is no such {@link Node node}.
-     * or the layout has not yet run with that node.
-     */
-    getPositionById(id: string): Node;
-    /**
-     * Returns the current options.
-     * @returns The current options.
-     */
-    getCurrentOptions(): NvlOptions;
-    /** Removes the graph visualization from the DOM and cleans up everything. */
-    destroy(): void;
-    /**
-     * De-selects all nodes and relationships.
-     */
-    deselectAll(): void;
-    /**
-     * Updates pan and zoom fit the specified nodes in the viewport.
-     * @param nodeIds - The ids of the nodes to fit on the screen.
-     * @param zoomOptions - Specific options on how to transition the zoom.
-     *
-     * @remarks
-     * If the zoom level required to fit the provided nodes is outside of the range provided by the
-     * {@link NvlOptions.minZoom minZoom} and {@link NvlOptions.maxZoom maxZoom} options, and the
-     * {@link NvlOptions.allowDynamicMinZoom allowDynamicMinZoom} option is set to `false`,
-     * the zoom level will be set to the closest valid zoom level,
-     * even if the given nodes do not fit the viewport yet.
-     */
-    fit(nodeIds: string[], zoomOptions?: NvlState['zoomOptions']): void;
-    /**
-     * Resets the zoom of the viewport back to the default zoom level of 0.75.
-     */
-    resetZoom(): void;
-    /**
-     * Switches between rendering methods
-     * @param renderer - which rendering method to use
-     */
-    setRenderer(renderer: string): void;
-    /**
-     * Restarts NVL with or without WebGL support.
-     * @param disabled - Whether or not WebGL should be disabled.
-     * @experimental
-     */
-    setDisableWebGL(disabled?: boolean): void;
-    /**
-     * Pins the specified node so it is not affected by layout forces.
-     * @param nodeId - The id of the node to be pinned.
-     */
-    pinNode(nodeId: string): void;
-    /**
-     * Un-pins the specified nodes so it is affected by layout forces again.
-     * @param nodeIds The ids of the nodes to be un-pinned.
-     */
-    unPinNode(nodeIds: string[]): void;
-    /**
-     * Changes the layout type.
-     * @param layout - The {@link Layout} type.
-     */
-    setLayout(layout: Layout): void;
-    /**
-     * Updates the configuration of the current layout.
-     * @param options - The {@link LayoutOptions} configuration.
-     */
-    setLayoutOptions(options: LayoutOptions): void;
-    /**
-     * Returns the nodes that are currently in the visualization.
-     * The `rels` property of the returned object is always empty.
-     * @returns An object containing the nodes and relationships in the visualization.
-     */
-    getNodesOnScreen(): {
-        /** The nodes in the visualization. */
-        nodes: Node[];
-        /** The relationships in the visualization. */
-        rels: Relationship[];
-    };
-    /**
-     * Fetches and returns the current positions of all nodes as an array of coordinates.
-     * @returns An array of {@link Node node} positions.
-     */
-    getNodePositions(): (Node & Point)[];
-    /**
-     * Sets the node positions based on data provided.
-     * @param data - The positions that the nodes should be set to.
-     * @param updateLayout - Whether or not the current layout algorithm
-     * should update the graph after setting the node positions.
-     *
-     * @remarks
-     * For node positions to be unaffected by layout algorithms, use the 'free' layout type
-     * or use {@link pinNode} to pin the nodes that should remain still.
-     * False by default.
-     */
-    setNodePositions(data: Node[], updateLayout?: boolean): void;
-    /**
-     * Checks and returns whether the current layout is still in flux.
-     * @returns Whether or not the layout is moving.
-     */
-    isLayoutMoving(): boolean;
-    /**
-     * Saves the current view of the graph visualization canvas as a png to the client.
-     * @param {{ filename: string, backgroundColor: string }} options The filename and background color of the png.
-     * @param options.filename - The filename of the png file.
-     * @param options.backgroundColor - The background color of the png file.
-     * The size of the png file will be the size of the canvas in the DOM.
-     */
-    saveToFile(options?: {
-        filename?: string;
-        backgroundColor?: string;
-    }): void;
-    /**
-     * Saves the entire graph visualization as an SVG file to the client.
-     * @param options - Options for the SVG export
-     * @param options.filename - The filename of the SVG file.
-     * @param options.backgroundColor - The background color of the SVG file.
-     * @experimental
-     */
-    saveToSvg(options?: {
-        filename?: string;
-        backgroundColor?: string;
-    }): void;
-    /**
-     * Returns the current view of the graph visualization canvas as a data URL.
-     * @param options - The options for the image.
-     * @param options.backgroundColor - The background color of the data URL.
-     * @returns A data URL of the current view of the graph visualization canvas.
-     */
-    getImageDataUrl(options?: {
-        backgroundColor?: string;
-    }): string;
-    /**
-     * Returns the entire graph visualization as an SVG data URL.
-     * @param options - Options for the SVG export
-     * @param options.backgroundColor - The background color of the SVG (defaults to transparent).
-     * @returns A Promise resolving to a data URL string representing the graph as SVG (data:image/svg+xml;...)
-     * @experimental
-     *
-     * @example
-     * ```typescript
-     * const svgDataUrl = await nvl.getSvgDataUrl({ backgroundColor: '#ffffff' })
-     * const img = document.createElement('img')
-     * img.src = svgDataUrl
-     * img.alt = 'Graph Visualization'
-     * document.body.appendChild(img)
-     * ```
-     */
-    getSvgDataUrl(options?: {
-        backgroundColor?: string;
-    }): Promise<string>;
-    /**
-     * Saves the entire graph visualization canvas as a png to the client.
-     * @param {{ filename: string, backgroundColor: string }} options The filename and background color of the png.
-     * @param options.filename - The filename of the png file.
-     * @param options.backgroundColor - The background color of the png file.
-     * 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.
-     */
-    saveFullGraphToLargeFile(options?: {
-        filename?: string;
-        backgroundColor?: string;
-    }): void;
-    getZoomLimits(): {
-        minZoom: number;
-        maxZoom: number;
-    };
-    /**
-     * Sets the zoom of the viewport to a specific value.
-     * @param zoomValue - The desired zoom level.
-     * @remarks
-     *
-     * When updating both the zoom level and pan coordinates,
-     * use {@link setZoomAndPan} instead of calling {@link setZoom} and {@link setPan}
-     * separately to avoid jittering.
-     *
-     * If the zoom level is outside of the range provided by the
-     * {@link NvlOptions.minZoom} and {@link NvlOptions.maxZoom} options,
-     * the zoom level will be set to the closest valid zoom level.
-     * If {@link NvlOptions.allowDynamicMinZoom} is set to true,
-     * the {@link NvlOptions.minZoom} option will be ignored of the current graph does not fit the viewport.
-     */
-    setZoom(zoomValue: number): void;
-    /**
-     * Sets the zoom of the viewport to a specific value.
-     * @param panX - The desired panX value.
-     * @param panY - The desired panY value.
-     * @remarks When updating both the zoom level and pan coordinates,
-     * use {@link setZoomAndPan} instead of calling {@link setZoom} and {@link setPan} separately to avoid jittering.
-     */
-    setPan(panX: number, panY: number): void;
-    /**
-     * Sets the zoom and pan of the viewport to specific values.
-     * @param zoom - The desired zoom level.
-     * @param panX - The desired panX value.
-     * @param panY - The desired panY value.
-     * @remarks When only updating zoom level or pan coordinates, use {@link setZoom} or {@link setPan} instead.
-     *
-     * If the zoom level is outside of the range provided by the
-     * {@link NvlOptions.minZoom} and {@link NvlOptions.maxZoom} options,
-     * the zoom level will be set to the closest valid zoom level.
-     * If {@link NvlOptions.allowDynamicMinZoom} is set to true,
-     * the {@link NvlOptions.minZoom} option will be ignored of the current graph does not fit the viewport.
-     */
-    setZoomAndPan(zoom: number, panX: number, panY: number): void;
-    /**
-     * Get the current zoom level of the viewport.
-     * @returns The current zoom level.
-     */
-    getScale(): number;
-    /**
-     * Returns the current pan of the viewport.
-     * @returns The current pan of the viewport.
-     */
-    getPan(): Point;
-    /**
-     * Gets the nodes and relationships that have been hit by a pointer event.
-     * @param evt - The mouse event.
-     * @param targets - The graph elements to check for hits. Defaults to ['node', 'relationship'].
-     * @param hitOptions - Options for the hit test.
-     * @returns A {@link NvlMouseEvent} with the {@link HitTargets} property
-     * containing the nodes and relationships that have been hit by the pointer event.
-     *
-     * @example
-     * ```js
-     * const container = document.getElementById('frame')
-     * const nvl = new NVL(container, [{ id: '0' }], [])
-     *
-     * // Get the nodes and relationships that have been hit by a pointer event.
-     * container?.addEventListener('click', (evt) => {
-     *   const { nvlTargets } = nvl.getHits(evt)
-     *   console.log('clicked elements:', nvlTargets)
-     * })
-     * ```
-     */
-    getHits(evt: MouseEvent, targets?: ('node' | 'relationship')[], hitOptions?: {
-        hitNodeMarginWidth: number;
-    }): NvlMouseEvent;
-    /**
-     * Provides the container DOM element the graph is rendered in.
-     * @returns The container element of the NVL instance.
-     */
-    getContainer(): HTMLElement;
-    private checkWebGLCompatibility;
+  #private;
+  /**
+   * Creates a new NVL instance.
+   * @param frame - The DOM element to display the graph in.
+   * @param nvlNodes - An array of {@link Node nodes}.
+   * @param nvlRels - An array of {@link Relationship relationships}.
+   * @param options - The {@link NvlOptions options} for the NVL instance.
+   * @param callbacks - Callbacks triggered on NVL events.
+   */
+  constructor(frame: HTMLElement, nvlNodes?: Node[], nvlRels?: Relationship[], options?: NvlOptions, callbacks?: ExternalCallbacks);
+  /**
+   * Restarts the NVL instance.
+   * @param options - New {@link NvlOptions} for the NVL instance.
+   * @param retainPositions - Whether or not to retain the current node positions.
+   * New options will be merged with current options
+   */
+  restart(options?: NvlOptions, retainPositions?: boolean): void;
+  /**
+   * Adds nodes and relationships to NVL and updates existing nodes and relationships.
+   * @param nodes - An Array of {@link Node nodes} to be added or updated.
+   * @param relationships - An Array of {@link Relationship relationships} to be added or updated.
+   * To update nodes or relationships, they must have an id that matches the id of the
+   * node or relationship to be updated.
+   * Only the properties that are provided will be updated.
+   * If an existing property is not provided, it will not be changed.
+   * @example
+   * Adding and updating nodes and relationships
+   * ```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' }
+   * ]
+   * const relationships = [
+   * { id: '12', from: '1', to: '2' }
+   * ]
+   * // Adds new nodes and relationships
+   * nvl.addAndUpdateElementsInGraph(nodes, relationships)
+   * // Updates an existing relationship
+   * nvl.addAndUpdateElementsInGraph([], [{ id: '12', color: '#e0df41' }])
+   * ```
+   */
+  addAndUpdateElementsInGraph(nodes?: Node[] | PartialNode[], relationships?: Relationship[] | PartialRelationship[]): void;
+  /**
+   * Gets the currently selected nodes.
+   * @returns An array of all currently selected {@link Node nodes} and their positions.
+   */
+  getSelectedNodes(): (Node & Point)[];
+  /**
+   * Gets the currently selected relationships.
+   * @returns An array of all currently selected {@link Relationship relationships}.
+   */
+  getSelectedRelationships(): Relationship[];
+  /**
+   * Updates relationships in the current scene with the provided array of nodes and relationships.
+   * @param nodes - The updated {@link Node nodes}.
+   * @param relationships - The updated {@link Relationship relationships}.
+   * Ignores any nodes or relationships that do not exist in the current scene.
+   * To update nodes or relationships, they must have an id that matches the id of the
+   * node or relationship to be updated.
+   * Only the properties that are provided will be updated.
+   * If an existing property is not provided, it will not be changed.
+   * @example
+   * Updating nodes and relationships
+   * ```ts
+   * import { NVL } from '@neo4j-nvl/base'
+   *
+   * const nodes = [
+   *   { id: '1', label: 'Node 1', color: '#e04141' },
+   *   { id: '2', label: 'Node 2', color: '#e09c41' }
+   * ]
+   * const relationships = [
+   *   { id: '12', from: '1', to: '2' }
+   * ]
+   * 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' }])
+   * ```
+   */
+  updateElementsInGraph(nodes: Node[] | PartialNode[], relationships: Relationship[] | PartialRelationship[]): void;
+  /**
+   * Adds nodes and relationships in the current scene.
+   * @param nodes - The nodes to be added.
+   * @param relationships - The relationships to be added.
+   */
+  addElementsToGraph(nodes: Node[], relationships: Relationship[]): void;
+  /**
+   * Removes the specified nodes from the current scene.
+   * @param nodeIds - The node ids to be removed.
+   * Adjacent relationships will also be removed.
+   */
+  removeNodesWithIds(nodeIds: string[]): void;
+  /**
+   * Removes the specified relationships from the current scene.
+   * @param relationshipIds - The relationship ids to be removed.
+   */
+  removeRelationshipsWithIds(relationshipIds: string[]): void;
+  /**
+   * Returns all nodes that is currently stored in the visualisation.
+   * Each node includes layout coordinates (`x`, `y`) and a `clientPosition` in screen space.
+   * @returns The array of {@link NodeWithClientPosition nodes}.
+   */
+  getNodes(): NodeWithClientPosition[];
+  /**
+   * Returns the relationships that are currently in the visualization.
+   * @returns An array of the {@link Relationship relationships} in the visualization.
+   */
+  getRelationships(): Relationship[];
+  /**
+   * Returns the node data that is currently stored in the visualisation for a given id.
+   * @param id - The id of the {@link Node node} that should be returned.
+   * @returns The {@link Node node} or undefined if there is no node with the given id.
+   */
+  getNodeById(id: string): Node;
+  /**
+   * Returns the relationship data that is currently stored in the visualisation for a given id.
+   * @param id - The id of the {@link Relationship relationship} that should be returned.
+   * @returns The {@link Relationship relationship} or undefined if there is no relationship with the given id.
+   */
+  getRelationshipById(id: string): Relationship;
+  /**
+   * Returns the node position that is currently stored in the visualisation for a given id.
+   * @param id - The id of the node position that should be returned.
+   * @returns The position information for the given id, or undefined if there is no such {@link Node node}.
+   * or the layout has not yet run with that node.
+   */
+  getPositionById(id: string): Node;
+  /**
+   * Returns the current options.
+   * @returns The current options.
+   */
+  getCurrentOptions(): NvlOptions;
+  /** Removes the graph visualization from the DOM and cleans up everything. */
+  destroy(): void;
+  /**
+   * De-selects all nodes and relationships.
+   */
+  deselectAll(): void;
+  /**
+   * Updates pan and zoom to fit the specified nodes in the viewport.
+   * @param nodeIds - The ids of the nodes to fit on the screen.
+   * @param zoomOptions - Specific options on how to transition the zoom.
+   *
+   * @remarks
+   * Zoom is limited by {@link ZoomOptions.minZoom} / {@link ZoomOptions.maxZoom} and the
+   * {@link NvlOptions.minZoom minZoom} / {@link NvlOptions.maxZoom maxZoom} /
+   * {@link NvlOptions.allowDynamicMinZoom allowDynamicMinZoom} options. See those for details.
+   */
+  fit(nodeIds: string[], zoomOptions?: NvlState['zoomOptions']): void;
+  /**
+   * Resets the zoom of the viewport back to the default zoom level of 0.75.
+   */
+  resetZoom(): void;
+  /**
+   * Switches between rendering methods
+   * @param renderer - which rendering method to use
+   */
+  setRenderer(renderer: string): void;
+  /**
+   * Restarts NVL with or without WebGL support.
+   * @param disabled - Whether or not WebGL should be disabled.
+   * @experimental
+   */
+  setDisableWebGL(disabled?: boolean): void;
+  /**
+   * Pins the specified node so it is not affected by layout forces.
+   * @param nodeId - The id of the node to be pinned.
+   */
+  pinNode(nodeId: string): void;
+  /**
+   * Un-pins the specified nodes so it is affected by layout forces again.
+   * @param nodeIds The ids of the nodes to be un-pinned.
+   */
+  unPinNode(nodeIds: string[]): void;
+  /**
+   * Changes the layout type.
+   * @param layout - The {@link Layout} type.
+   */
+  setLayout(layout: Layout): void;
+  /**
+   * Updates the configuration of the current layout.
+   * @param options - The {@link LayoutOptions} configuration.
+   */
+  setLayoutOptions(options: LayoutOptions): void;
+  /**
+   * Returns the nodes that are currently in the visualization.
+   * The `rels` property of the returned object is always empty.
+   * @returns An object containing the nodes and relationships in the visualization.
+   */
+  getNodesOnScreen(): {
+    /** The nodes in the visualization. */
+    nodes: Node[];
+    /** The relationships in the visualization. */
+    rels: Relationship[];
+  };
+  /**
+   * Fetches and returns the current positions of all nodes as an array of coordinates.
+   * @returns An array of {@link Node node} positions.
+   */
+  getNodePositions(): (Node & Point)[];
+  /**
+   * Sets the node positions based on data provided.
+   * @param data - The positions that the nodes should be set to.
+   * @param updateLayout - Whether or not the current layout algorithm
+   * should update the graph after setting the node positions.
+   *
+   * @remarks
+   * For node positions to be unaffected by layout algorithms, use the 'free' layout type
+   * or use {@link pinNode} to pin the nodes that should remain still.
+   * False by default.
+   */
+  setNodePositions(data: Node[], updateLayout?: boolean): void;
+  /**
+   * Checks and returns whether the current layout is still in flux.
+   * @returns Whether or not the layout is moving.
+   */
+  isLayoutMoving(): boolean;
+  /**
+   * Saves the current view of the graph visualization canvas as a png to the client.
+   * @param {{ filename: string, backgroundColor: string }} options The filename and background color of the png.
+   * @param options.filename - The filename of the png file.
+   * @param options.backgroundColor - The background color of the png file.
+   * The size of the png file will be the size of the canvas in the DOM.
+   */
+  saveToFile(options?: {
+    filename?: string;
+    backgroundColor?: string;
+  }): void;
+  /**
+   * Saves the entire graph visualization as an SVG file to the client.
+   * @param options - Options for the SVG export
+   * @param options.filename - The filename of the SVG file.
+   * @param options.backgroundColor - The background color of the SVG file.
+   * @experimental
+   */
+  saveToSvg(options?: {
+    filename?: string;
+    backgroundColor?: string;
+  }): void;
+  /**
+   * Returns the current view of the graph visualization canvas as a data URL.
+   * @param options - The options for the image.
+   * @param options.backgroundColor - The background color of the data URL.
+   * @returns A data URL of the current view of the graph visualization canvas.
+   */
+  getImageDataUrl(options?: {
+    backgroundColor?: string;
+  }): string;
+  /**
+   * Returns the entire graph visualization as an SVG data URL.
+   * @param options - Options for the SVG export
+   * @param options.backgroundColor - The background color of the SVG (defaults to transparent).
+   * @returns A Promise resolving to a data URL string representing the graph as SVG (data:image/svg+xml;...)
+   * @experimental
+   *
+   * @example
+   * ```typescript
+   * import { NVL } from '@neo4j-nvl/base'
+   *
+   * const nvl = new NVL(document.getElementById('frame'), [{ id: '0' }], [])
+   * const renderSvg = async () => {
+   *   const svgDataUrl = await nvl.getSvgDataUrl({ backgroundColor: '#ffffff' })
+   *   const img = document.createElement('img')
+   *   img.src = svgDataUrl
+   *   document.body.appendChild(img)
+   * }
+   * ```
+   */
+  getSvgDataUrl(options?: {
+    backgroundColor?: string;
+  }): Promise<string>;
+  /**
+   * Saves the entire graph visualization canvas as a png to the client.
+   * @param {{ filename: string, backgroundColor: string }} options The filename and background color of the png.
+   * @param options.filename - The filename of the png file.
+   * @param options.backgroundColor - The background color of the png file.
+   * 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.
+   */
+  saveFullGraphToLargeFile(options?: {
+    filename?: string;
+    backgroundColor?: string;
+  }): void;
+  getZoomLimits(): {
+    minZoom: number;
+    maxZoom: number;
+  };
+  /**
+   * Sets the zoom of the viewport to a specific value.
+   * @param zoomValue - The desired zoom level.
+   * @remarks
+   *
+   * When updating both the zoom level and pan coordinates,
+   * use {@link setZoomAndPan} instead of calling {@link setZoom} and {@link setPan}
+   * separately to avoid jittering.
+   *
+   * If the zoom level is outside of the range provided by the
+   * {@link NvlOptions.minZoom} and {@link NvlOptions.maxZoom} options,
+   * the zoom level will be set to the closest valid zoom level.
+   * If {@link NvlOptions.allowDynamicMinZoom} is set to true,
+   * the {@link NvlOptions.minZoom} option will be ignored of the current graph does not fit the viewport.
+   */
+  setZoom(zoomValue: number): void;
+  /**
+   * Sets the zoom of the viewport to a specific value.
+   * @param panX - The desired panX value.
+   * @param panY - The desired panY value.
+   * @remarks When updating both the zoom level and pan coordinates,
+   * use {@link setZoomAndPan} instead of calling {@link setZoom} and {@link setPan} separately to avoid jittering.
+   */
+  setPan(panX: number, panY: number): void;
+  /**
+   * Sets the zoom and pan of the viewport to specific values.
+   * @param zoom - The desired zoom level.
+   * @param panX - The desired panX value.
+   * @param panY - The desired panY value.
+   * @remarks When only updating zoom level or pan coordinates, use {@link setZoom} or {@link setPan} instead.
+   *
+   * If the zoom level is outside of the range provided by the
+   * {@link NvlOptions.minZoom} and {@link NvlOptions.maxZoom} options,
+   * the zoom level will be set to the closest valid zoom level.
+   * If {@link NvlOptions.allowDynamicMinZoom} is set to true,
+   * the {@link NvlOptions.minZoom} option will be ignored of the current graph does not fit the viewport.
+   */
+  setZoomAndPan(zoom: number, panX: number, panY: number): void;
+  /**
+   * Get the current zoom level of the viewport.
+   * @returns The current zoom level.
+   */
+  getScale(): number;
+  /**
+   * Returns the current pan of the viewport.
+   * @returns The current pan of the viewport.
+   */
+  getPan(): Point;
+  /**
+   * Gets the nodes, relationships, and clusters that have been hit by a pointer event.
+   * @param evt - The mouse event.
+   * @param targets - The graph elements to check for hits. Defaults to ['node', 'relationship', 'cluster'].
+   * @param hitOptions - Options for the hit test.
+   * @returns A {@link NvlMouseEvent} with the {@link HitTargets} property
+   * containing the nodes, relationships, and clusters that have been hit by the pointer event.
+   *
+   * @example
+   * ```js
+   * const container = document.getElementById('frame')
+   * const nvl = new NVL(container, [{ id: '0' }], [])
+   *
+   * // Get the nodes and relationships that have been hit by a pointer event.
+   * container?.addEventListener('click', (evt) => {
+   *   const { nvlTargets } = nvl.getHits(evt)
+   *   console.log('clicked elements:', nvlTargets)
+   * })
+   * ```
+   */
+  getHits(evt: MouseEvent, targets?: HitTestTarget[], hitOptions?: {
+    hitNodeMarginWidth: number;
+  }): NvlMouseEvent;
+  /**
+   * Provides the container DOM element the graph is rendered in.
+   * @returns The container element of the NVL instance.
+   */
+  getContainer(): HTMLElement;
+  private checkWebGLCompatibility;
 }
 /**
  * Functions for mapping colors.
@@ -412,12 +410,10 @@ declare class NVL {
  * @hidden
  */
 declare const colorMapperFunctions: {
-    textColorForBackground: (color: string) => string;
+  textColorForBackground: (color: string) => string;
 };
 /**
  * The different types of renderers available
  */
-type Renderer = Exclude<InternalRenderer, typeof SvgRendererType>;
-export default NVL;
-export type { NvlOptions, Renderer, Node, Relationship, PartialNode, PartialRelationship, Layout, LayoutOptions, ForceDirectedOptions, HierarchicalOptions, CircularOptions, ExternalCallbacks, HitTargets, HitTargetNode, HitTargetRelationship, Point, NvlMouseEvent, ZoomOptions, StyledCaption, WebGLRendererType, CanvasRendererType };
-export { NVL, colorMapperFunctions, CompatibilityError, ForceDirectedLayoutType, HierarchicalLayoutType, GridLayoutType, FreeLayoutType, d3ForceLayoutType, CircularLayoutType, drawCircleBand, nvlResultTransformer, getZoomTargetForNodePositions };
+type Renderer = Exclude<Renderer$1, typeof SvgRendererType>;
+export { type CanvasRendererType, CircularLayoutType, type CircularOptions, type Cluster, type ClusterByFn, type ClusterId, type ClusteringOptions, CompatibilityError, type ExternalCallbacks, ForceDirectedLayoutType, type ForceDirectedOptions, FreeLayoutType, GridLayoutType, HierarchicalLayoutType, type HierarchicalOptions, type HitTargetCluster, type HitTargetNode, type HitTargetRelationship, type HitTargets, type HitTestTarget, type Layout, type LayoutOptions, NVL, NVL as default, type Node, type NodeWithClientPosition, type NvlMouseEvent, type NvlOptions, type PartialNode, type PartialRelationship, type Point, type Relationship, type Renderer, type StyledCaption, type WebGLRendererType, type ZoomOptions, colorMapperFunctions, d3ForceLayoutType, drawCircleBand, getZoomTargetForNodePositions, nvlResultTransformer };