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

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

@@ -1,86 +1,85 @@
-import type { NvlState } from '../../../modules/state/types';
-import type { Node } from '../../../types/graph-element';
-import type { Point } from '../../../utils/geometry';
-import type { HitTargetNode, HitTargetRelationship } from '../../../utils/hittest';
-import type { RendererOptions } from '../BaseRenderer';
-import BaseRenderer from '../BaseRenderer';
+import { Point } from "../../../utils/geometry.js";
+import { Node } from "../../../types/graph-element.js";
+import { NvlState } from "../../../modules/state/types.js";
+import { HitTargetNode, HitTargetRelationship } from "../../../utils/hitTest.js";
+import BaseRenderer, { RendererOptions } from "../BaseRenderer.js";
 export default class CanvasRenderer extends BaseRenderer {
-    private canvas;
-    private context;
-    private animationHandler;
-    private ellipsisWidth;
-    private disableArrowShadow;
-    /**
-     * Creates a new CanvasRenderer.
-     * @param canvas {HTMLCanvasElement} - The canvas to render on.
-     * @param context {CanvasRenderingContext2D} - The canvas context.
-     * @param state {NvlState} - The state.
-     * @param options {RendererOptions} - The visualization options.
-     */
-    constructor(canvas: HTMLCanvasElement, context: CanvasRenderingContext2D | null, state: NvlState, options?: RendererOptions);
-    /**
-     * Checks if the renderer needs to run.
-     * @returns Whether the renderer needs to run.
-     */
-    needsToRun(): boolean;
-    /**
-     * Override processUpdates to add Canvas-specific shadow handling
-     */
-    processUpdates(): void;
-    /**
-     * Draws a single node on the canvas with all its visual elements (circle, icons, captions, etc.)
-     * @param ctx - The canvas rendering context
-     * @param node - The node to draw
-     */
-    private drawNode;
-    /**
-     * Helper method to enable shadow on canvas context
-     */
-    private enableShadow;
-    /**
-     * Helper method to disable shadow on canvas context
-     */
-    private disableShadow;
-    /**
-     * Renders a waypoint arrow (relationship between two different nodes)
-     */
-    private renderWaypointArrow;
-    /**
-     * Renders a self-referencing arrow (relationship from node to itself)
-     */
-    private renderSelfArrow;
-    /**
-     * Draws the nodes and relationships to their positions on the canvas.
-     * @param positionArray {Node[]} - The array of nodes to draw
-     * @param options {any} - The options for the render
-     */
-    render(positionArray: Node[], options?: {
-        canvas?: HTMLCanvasElement;
-        context?: CanvasRenderingContext2D;
-        backgroundColor?: string;
-        ignoreAnimations?: boolean;
-        showCaptions?: boolean;
-    }): void;
-    private renderNodes;
-    private renderRelationships;
-    /**
-     * Returns 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 pointer - The position of the pointer.
-     * @returns The relationships at the pointer position.
-     * @todo: sort relationships by distance descending
-     */
-    getRelsAt(pointer: Point): HitTargetRelationship[];
-    /**
-     * Handles zoom and pan on the canvas.
-     * @param context {CanvasRenderingContext2D} - The canvas context
-     * @param canvas {HTMLCanvasElement} - The canvas
-     */
-    private zoomAndPan;
-}
+  private canvas;
+  private context;
+  private animationHandler;
+  private ellipsisWidth;
+  private disableArrowShadow;
+  /**
+   * Creates a new CanvasRenderer.
+   * @param canvas {HTMLCanvasElement} - The canvas to render on.
+   * @param context {CanvasRenderingContext2D} - The canvas context.
+   * @param state {NvlState} - The state.
+   * @param options {RendererOptions} - The visualization options.
+   */
+  constructor(canvas: HTMLCanvasElement, context: CanvasRenderingContext2D | null, state: NvlState, options?: RendererOptions);
+  /**
+   * Checks if the renderer needs to run.
+   * @returns Whether the renderer needs to run.
+   */
+  needsToRun(): boolean;
+  /**
+   * Override processUpdates to add Canvas-specific shadow handling
+   */
+  processUpdates(): void;
+  /**
+   * Draws a single node on the canvas with all its visual elements (circle, icons, captions, etc.)
+   * @param ctx - The canvas rendering context
+   * @param node - The node to draw
+   */
+  private drawNode;
+  /**
+   * Helper method to enable shadow on canvas context
+   */
+  private enableShadow;
+  /**
+   * Helper method to disable shadow on canvas context
+   */
+  private disableShadow;
+  /**
+   * Renders a waypoint arrow (relationship between two different nodes)
+   */
+  private renderWaypointArrow;
+  /**
+   * Renders a self-referencing arrow (relationship from node to itself)
+   */
+  private renderSelfArrow;
+  /**
+   * Draws the nodes and relationships to their positions on the canvas.
+   * @param positionArray {Node[]} - The array of nodes to draw
+   * @param options {any} - The options for the render
+   */
+  render(positionArray: Node[], options?: {
+    canvas?: HTMLCanvasElement;
+    context?: CanvasRenderingContext2D;
+    backgroundColor?: string;
+    ignoreAnimations?: boolean;
+    showCaptions?: boolean;
+  }): void;
+  private renderNodes;
+  private renderRelationships;
+  /**
+   * Returns 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 pointer - The position of the pointer.
+   * @returns The relationships at the pointer position.
+   * @todo: sort relationships by distance descending
+   */
+  getRelsAt(pointer: Point): HitTargetRelationship[];
+  /**
+   * Handles zoom and pan on the canvas.
+   * @param context {CanvasRenderingContext2D} - The canvas context
+   * @param canvas {HTMLCanvasElement} - The canvas
+   */
+  private zoomAndPan;
+}

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

@@ -1,7 +1,7 @@
-import type { BorderStyle, DisabledItemStyles } from '../../../modules/state/types';
-import type { Relationship } from '../../../types/graph-element';
-import type { Point } from '../../../utils/geometry';
-import type ArrowBundle from '../shared/arrows/ArrowBundle';
+import { Point } from "../../../utils/geometry.js";
+import { Relationship } from "../../../types/graph-element.js";
+import { BorderStyle, DisabledItemStyles } from "../../../modules/state/types.js";
+import ArrowBundle from "../shared/arrows/ArrowBundle.js";
 /**
  * Calculate label dimensions including font size, font weight, and truncated text.
  *
@@ -15,8 +15,8 @@ import type ArrowBundle from '../shared/arrows/ArrowBundle';
  * @returns LabelDimensions with calculated font metrics and label text
  */
 export declare const calculateLabelDimensions: (fullCaption: string, measureWidth: (text: string) => number, maxWidth: number) => {
-    label: string;
-    width: number;
+  label: string;
+  width: number;
 };
 /**
  * Calculate vertical alignment offset for label based on caption alignment.
@@ -42,13 +42,13 @@ export declare const calculateLabelHeightAlign: (captionAlign: string, fontSize:
  * @returns object with position, rotation, width, and height for hit detection
  */
 export declare const calculateLabelGeometry: (point: Point, angle: number, maxWidth: number, fontSize: number, heightAlign: number, padding: number, pixelRatio: number) => {
-    position: {
-        x: number;
-        y: number;
-    };
-    rotation: number;
-    width: number;
-    height: number;
+  position: {
+    x: number;
+    y: number;
+  };
+  rotation: number;
+  width: number;
+  height: number;
 };
 /**
  * Determines the rendering state flags for a relationship.
@@ -59,11 +59,11 @@ export declare const calculateLabelGeometry: (point: Point, angle: number, maxWi
  * @returns Object containing rendering state flags
  */
 export declare const determineArrowRenderingState: (rel: Relationship, disableArrowShadow: boolean, showLabel: boolean) => {
-    isSelected: boolean;
-    isDisabled: boolean;
-    showOverlayIcon: boolean;
-    shouldRenderShadow: boolean;
-    shouldShowHoverEffect: boolean;
+  isSelected: boolean;
+  isDisabled: boolean;
+  showOverlayIcon: boolean;
+  shouldRenderShadow: boolean;
+  shouldShowHoverEffect: boolean;
 };
 /**
  * Selects relationship colors based on rendering state.
@@ -75,10 +75,10 @@ export declare const determineArrowRenderingState: (rel: Relationship, disableAr
  * @returns Object containing colors for different rendering layers
  */
 export declare const selectArrowColors: (rel: Relationship, selectedBorderStyle: BorderStyle, disabledItemStyles: DisabledItemStyles, defaultColor: string) => {
-    mainColor: string;
-    selectedColor1: string;
-    selectedColor2: string;
-    hoverColor: string;
+  mainColor: string;
+  selectedColor1: string;
+  selectedColor2: string;
+  hoverColor: string;
 };
 /**
  * Calculates arrowhead adjustment for last segment truncation.
@@ -92,19 +92,19 @@ export declare const selectArrowColors: (rel: Relationship, selectedBorderStyle:
  * @returns Object containing adjusted parameters and truncation flag
  */
 export declare const calculateArrowheadAdjustment: (lastSegmentDistance: number, headHeight: number, headPositionOffset: number, headSelectedAdjustment: number, headChinHeight: number, isSelected: boolean) => {
-    adjustedHeadPositionOffset: number;
-    adjustedHeadSelectedAdjustment: number;
-    shouldTruncateLastSegment: boolean;
+  adjustedHeadPositionOffset: number;
+  adjustedHeadSelectedAdjustment: number;
+  shouldTruncateLastSegment: boolean;
 };
 /**
  * The parameters for drawing an arrowhead.
  */
 type ArrowHeadParameters = {
-    headPosition: Point;
-    headAngle: number;
-    headHeight: number;
-    headChinHeight: number;
-    headWidth: number;
+  headPosition: Point;
+  headAngle: number;
+  headHeight: number;
+  headChinHeight: number;
+  headWidth: number;
 };
 /**
  * Creates an arrowhead shape using a polygon.
@@ -151,4 +151,4 @@ export declare const drawLoop: (ctx: CanvasRenderingContext2D, fromPoint: Point,
  * @param flip - Whether to flip the label orientation (default false)
  */
 export declare const drawLabel: (ctx: CanvasRenderingContext2D, point: Point, angle: number, maxWidth: number, rel: Relationship, bundle: ArrowBundle, disabledItemStyles: DisabledItemStyles, fontColor: string) => void;
-export {};
+export {};

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

@@ -1,7 +1,7 @@
-import type { BorderStyle, DisabledItemStyles, ShadowStyle } from '../../../modules/state/types';
-import type { Node } from '../../../types/graph-element';
-import type { TextSegment } from '../shared/types';
-import type AnimationHandler from './AnimationHandler';
+import { TextSegment } from "../shared/types.js";
+import { Node } from "../../../types/graph-element.js";
+import { BorderStyle, DisabledItemStyles, ShadowStyle } from "../../../modules/state/types.js";
+import AnimationHandler from "./AnimationHandler.js";
 /**
  * Draws borders around a node with a given array of border styles
  * @param ctx - The canvas context.
@@ -13,8 +13,8 @@ import type AnimationHandler from './AnimationHandler';
  * @hidden
  */
 export declare const drawCircleBand: (ctx: CanvasRenderingContext2D, x: number, y: number, innerRadius: number, borderStyles: {
-    width: number;
-    color: string;
+  width: number;
+  color: string;
 }[]) => void;
 /**
  * Fill a circle band with a gradient from a certain color to transparent
@@ -46,8 +46,8 @@ export declare const drawNodeCaption: (ctx: CanvasRenderingContext2D, lines: Tex
  * @returns The calculated pulse radius
  */
 export declare const calculatePulseAnimation: (mainFaceRadius: number) => {
-    pulseRadius: number;
-    pulseVisibility: number;
+  pulseRadius: number;
+  pulseVisibility: number;
 };
 /**
  * Calculate shadow animation parameters based on node state.
@@ -61,9 +61,9 @@ export declare const calculatePulseAnimation: (mainFaceRadius: number) => {
  * @returns Object with shadowWidth, shadowFade, and shadowColor, or null if no shadow needed
  */
 export declare const calculateShadowAnimation: (nodeId: string, animationHandler: AnimationHandler, selected: boolean, hovered: boolean, shadowStyle: ShadowStyle) => {
-    shadowWidth: number;
-    shadowColor: string;
-    shadowFade: number;
+  shadowWidth: number;
+  shadowColor: string;
+  shadowFade: number;
 };
 /**
  * Returns an array of styles for the rings of a node.
@@ -77,13 +77,13 @@ export declare const calculateShadowAnimation: (nodeId: string, animationHandler
  * @returns An array of ring styles with computed widths.
  */
 export type NodeRenderParamsInput = {
-    node: Node;
-    mainFaceRadius: number;
-    disabled: boolean;
-    disabledItemStyles: DisabledItemStyles;
-    selectedBorderStyle: BorderStyle;
-    animationHandler: AnimationHandler;
-    defaultNodeColor: string;
+  node: Node;
+  mainFaceRadius: number;
+  disabled: boolean;
+  disabledItemStyles: DisabledItemStyles;
+  selectedBorderStyle: BorderStyle;
+  animationHandler: AnimationHandler;
+  defaultNodeColor: string;
 };
 /**
  * Calculate all node render parameters at once.
@@ -93,17 +93,17 @@ export type NodeRenderParamsInput = {
  * @returns object with node render parameters
  */
 export declare const calculateNodeRenderParams: (input: NodeRenderParamsInput) => {
-    nodeColor: string;
-    fontColor: string;
-    shouldRenderPulse: boolean;
-    pulseAnimation: {
-        pulseColor: string;
-        pulseRadius: number;
-    };
-    shouldRenderShadow: boolean;
-    shadowAnimation: {
-        shadowWidth: number;
-        shadowFade: number;
-        shadowColor: string;
-    };
-};
+  nodeColor: string;
+  fontColor: string;
+  shouldRenderPulse: boolean;
+  pulseAnimation: {
+    pulseColor: string;
+    pulseRadius: number;
+  };
+  shouldRenderShadow: boolean;
+  shadowAnimation: {
+    shadowWidth: number;
+    shadowFade: number;
+    shadowColor: string;
+  };
+};

package/dist/types/renderers/domrenderer/shared/ImageCache.d.ts

@@ -1,17 +1,18 @@
-import type { Cache } from '../shared/types';
+import { Cache } from "./types.js";
 declare class ImageCache {
-    readonly cache: Cache;
-    private readonly onImageLoadedCb?;
-    constructor(onImageLoaded?: () => void);
-    getImage(src: string, inverted?: boolean): HTMLCanvasElement;
-    private getOrCreateEntry;
-    private invertCanvas;
-    private loadImage;
-    private drawIfNeeded;
-    /**
-     * Returns a promise that resolves when all images currently in the cache have finished loading.
-     * Useful before export operations to ensure all icons are available.
-     */
-    waitForImages(): Promise<void>;
+  readonly cache: Cache;
+  private readonly onImageLoadedCb?;
+  constructor(onImageLoaded?: () => void);
+  getImage(src: string, inverted?: boolean): HTMLCanvasElement;
+  isDrawn(src: string, inverted?: boolean): boolean;
+  private getOrCreateEntry;
+  private invertCanvas;
+  private loadImage;
+  private drawIfNeeded;
+  /**
+   * Returns a promise that resolves when all images currently in the cache have finished loading.
+   * Useful before export operations to ensure all icons are available.
+   */
+  waitForImages(): Promise<void>;
 }
-export default ImageCache;
+export { ImageCache as default };

package/dist/types/renderers/domrenderer/shared/arrows/ArrowBundle.d.ts

@@ -1,95 +1,95 @@
-import type { Relationship } from '../../../../types/graph-element';
-import type { Point } from '../../../../utils/geometry';
-import type { WaypointPath } from '../types';
+import { Point } from "../../../../utils/geometry.js";
+import { WaypointPath } from "../types.js";
+import { Relationship } from "../../../../types/graph-element.js";
 export interface LabelGeometry {
-    position: Point;
-    rotation: number;
-    width: number;
-    height: number;
+  position: Point;
+  rotation: number;
+  width: number;
+  height: number;
 }
 /**
  * Class representing a bundle of arrows
  */
 export default class ArrowBundle {
-    key: string;
-    rels: Map<string, Relationship>;
-    waypointPath: WaypointPath;
-    readonly selfReferring: boolean;
-    fromId: string;
-    toId: string;
-    angles: number[];
-    labelInfo: Record<string, LabelGeometry>;
-    relIndexCache: Map<string, number>;
-    relDirectionCache: Map<string, boolean>;
-    private cachedMaxFontSize;
-    /**
-     * @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);
-    /**
-     * Recalculate and cache the maximum font size
-     */
-    updateMaxFontSize(): void;
-    /**
-     * Updates the relationship direction cache with a given relationship
-     * @param rel - The relationship to update the direction for.
-     */
-    updateRelDirection(rel: Relationship): void;
-    /**
-     * Regenerates index cache for rel ids in bundle
-     */
-    updateIndexCache(): void;
-    /**
-     * Insert a new arrow to the bundle
-     * @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 rel - The arrow to remove.
-     */
-    remove({ id }: Relationship): void;
-    /**
-     * Get 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 The maximum font size of the arrows in the bundle.
-     */
-    maxFontSize(): number;
-    /**
-     * Check if 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({ id }: Relationship): boolean;
-    /**
-     * Get the index of a given arrow in the bundle
-     * @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 index - The index of the arrow to get.
-     * @returns The arrow at the given index.
-     */
-    getRel(index: number): Relationship;
-    /**
-     * Set 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 angles - The angles for the arrow bundle.
-     */
-    setAngles(angles: number[]): void;
-}
+  key: string;
+  rels: Map<string, Relationship>;
+  waypointPath: WaypointPath;
+  readonly selfReferring: boolean;
+  fromId: string;
+  toId: string;
+  angles: number[];
+  labelInfo: Record<string, LabelGeometry>;
+  relIndexCache: Map<string, number>;
+  relDirectionCache: Map<string, boolean>;
+  private cachedMaxFontSize;
+  /**
+   * @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);
+  /**
+   * Recalculate and cache the maximum font size
+   */
+  updateMaxFontSize(): void;
+  /**
+   * Updates the relationship direction cache with a given relationship
+   * @param rel - The relationship to update the direction for.
+   */
+  updateRelDirection(rel: Relationship): void;
+  /**
+   * Regenerates index cache for rel ids in bundle
+   */
+  updateIndexCache(): void;
+  /**
+   * Insert a new arrow to the bundle
+   * @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 rel - The arrow to remove.
+   */
+  remove({ id }: Relationship): void;
+  /**
+   * Get 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 The maximum font size of the arrows in the bundle.
+   */
+  maxFontSize(): number;
+  /**
+   * Check if 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({ id }: Relationship): boolean;
+  /**
+   * Get the index of a given arrow in the bundle
+   * @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 index - The index of the arrow to get.
+   * @returns The arrow at the given index.
+   */
+  getRel(index: number): Relationship;
+  /**
+   * Set 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 angles - The angles for the arrow bundle.
+   */
+  setAngles(angles: number[]): void;
+}