@neo4j-nvl/base 1.0.0 → 1.1.0

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

@@ -0,0 +1,16 @@
+import type { Cache } from '../shared/types';
+declare class ImageCache {
+    cache: Cache;
+    constructor();
+    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>;
+}
+export default ImageCache;

package/dist/types/renderers/{canvasrenderer → domrenderer/shared}/arrows/ArrowBundle.d.ts

@@ -1,5 +1,5 @@
-import type { Relationship } from '../../../types/graph-element';
-import type { Point } from '../../../utils/geometry';
+import type { Relationship } from '../../../../types/graph-element';
+import type { Point } from '../../../../utils/geometry';
 import type { WaypointPath } from '../types';
 export interface LabelGeometry {
     position: Point;

package/dist/types/renderers/{canvasrenderer → domrenderer/shared}/arrows/ArrowBundler.d.ts

@@ -1,4 +1,4 @@
-import type { Node, Relationship } from '../../../types/graph-element';
+import type { Node, Relationship } from '../../../../types/graph-element';
 import type { WaypointPath } from '../types';
 import ArrowBundle from './ArrowBundle';
 export default class ArrowBundler {

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

@@ -0,0 +1,175 @@
+import type { BorderStyle } from '../../../../modules/state/types';
+import type { Node, Relationship } from '../../../../types/graph-element';
+import type { Point } from '../../../../utils/geometry';
+import type ArrowBundle from './ArrowBundle';
+/**
+ * This function calculates the difference in radius between 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.
+ */
+export declare const getRadiusDifference: (toArrowGap: number, fromArrowGap: number) => number;
+/**
+ * Calculates control points for self-referencing relationships
+ * @param {Relationship} rel - The relationship
+ * @param {Node} node - The node the relationship refers to
+ * @param {ArrowBundle} bundle - The arrow bundle
+ * @returns Object containing angles and coordinate points for the self-loop
+ */
+export declare const getSelfArrowControlPoints: (rel: Relationship, node: Node, bundle: ArrowBundle) => {
+    angle: number;
+    startAngle: number;
+    endAngle: number;
+    startPoint: {
+        x: number;
+        y: number;
+    };
+    endPoint: {
+        x: number;
+        y: number;
+    };
+    apexPoint: {
+        x: number;
+        y: number;
+    };
+    control1Point: {
+        x: number;
+        y: number;
+    };
+    control2Point: {
+        x: number;
+        y: number;
+    };
+    nodeGap: number;
+};
+/**
+ * Calculates position, angle and flip for a self-referencing relationship label.
+ * Used by both Canvas and SVG renderers to ensure consistent positioning.
+ * This function handles all the math internally including headAngle and headSelectedAdjustment calculations.
+ */
+export declare const getSelfArrowLabelPosition: (apexPoint: Point, angle: number, endPoint: Point, control2Point: Point, isSelected: boolean, selectionRings: BorderStyle["rings"], relWidth?: number) => {
+    x: number;
+    y: number;
+    angle: number;
+    flip: boolean;
+};
+/**
+ * Calculates the padding for selected relationships based on border style
+ * @param selectedBorderRings - Array of border rings for selected state
+ * @returns The total selection padding
+ */
+export declare const getSelectionPadding: (selectedBorderRings?: BorderStyle["rings"]) => number;
+/**
+ * Calculates the position and angle for a relationship label based on the Canvas renderer's logic.
+ * This handles both straight lines and curves, with special logic for odd/even number of points.
+ *
+ * @param points - Array of points defining the relationship line
+ * @param fromNode - The source node
+ * @param toNode - The target node
+ * @param drawCurves - Whether curves are being drawn
+ * @param isSelected - Whether the relationship is selected
+ * @param captionAlign - Caption alignment ('top' or 'bottom')
+ * @param selectedBorderRings - Array of border rings for selected state
+ * @returns Object containing x, y position and angle for the label
+ */
+export declare const getRelationshipLabelPosition: (points: Point[], fromNode: Node, toNode: Node, drawCurves: boolean, isSelected: boolean, selectedBorderRings: BorderStyle["rings"], captionAlign?: "top" | "bottom") => {
+    x: number;
+    y: number;
+    angle: number;
+};
+/**
+ * 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 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[];
+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 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;
+/**
+ * Calculates the width of a relationship including selection factor and pixel ratio
+ * @param rel - The relationship
+ * @param defaultWidth - The default relationship width
+ * @returns The calculated relationship width
+ */
+export declare const getRelationshipWidth: (rel: Relationship, defaultWidth: number) => number;
+/**
+ * Adjusts relationship line points to create proper gaps at start and end.
+ * The Canvas renderer uses this logic:
+ * - End gap (arrowhead): headHeight/2 + headSelectedAdjustment
+ * - Start gap (tail): Only for selected relationships, uses getSelectionPadding
+ *
+ * @param points - Array of points defining the relationship line (will be modified in place)
+ * @param isSelected - Whether the relationship is selected
+ * @param headHeight - The height of the arrowhead
+ * @param headSelectedAdjustment - Additional adjustment for selected relationships
+ * @param selectedBorderRings - Array of border rings for selected state
+ * @returns Object with adjusted points and the tail offset applied (for label positioning)
+ */
+export declare const adjustPointsForGaps: (points: Point[], isSelected: boolean, headHeight: number, headSelectedAdjustment: number, selectedBorderRings: BorderStyle["rings"]) => {
+    tailOffset: Point | null;
+};
+/**
+ * Calculates arrowhead scaling and dimensions for rendering.
+ *
+ * @param width - The raw width of the relationship (before pixel ratio scaling)
+ * @param isSelected - Whether the relationship is selected
+ * @param selectedBorderRings - Array of border rings for selected state
+ * @returns Object containing all calculated arrowhead dimensions and adjustments
+ */
+export declare const calculateArrowheadScaling: (width: number, isSelected: boolean, selectedBorderRings: BorderStyle["rings"]) => {
+    headFactor: number;
+    headHeight: number;
+    headChinHeight: number;
+    headWidth: number;
+    headSelectedAdjustment: number;
+    headPositionOffset: number;
+};
+/**
+ * Calculates the dimensions of an arrowhead
+ * @param relWidth - The width of the relationship line
+ * @param defaultRelWidth - The default relationship width
+ * @param isSelected - Whether the relationship is selected
+ * @param selectedBorderRings - Array of border rings for selected state
+ * @returns Object containing headHeight, headChinHeight, headWidth, and headSelectedAdjustment
+ */
+export declare const getArrowheadDimensions: (relWidth: number, defaultRelWidth: number, isSelected: boolean, selectedBorderRings: BorderStyle["rings"]) => {
+    headHeight: number;
+    headChinHeight: number;
+    headWidth: number;
+    headSelectedAdjustment: number;
+};
+/**
+ * Calculates the size of an overlay icon on a relationship
+ * @param iconSizeFactor - The size factor from the overlay icon configuration
+ * @returns The calculated overlay icon size
+ */
+export declare const getOverlayIconSize: (iconSizeFactor: number) => number;
+/**
+ * Calculates the alignment offsets for an overlay icon on a relationship
+ * @param position - The position array [x, y] from overlay icon configuration
+ * @param width - The available width for the icon
+ * @param height - The height of the icon
+ * @returns Object with widthAlign and heightAlign offsets
+ */
+export declare const getOverlayIconAlignment: (position: [number, number], width: number, height: number) => {
+    widthAlign: number;
+    heightAlign: number;
+};

package/dist/types/renderers/domrenderer/shared/nodes/nodeUtils.d.ts

@@ -0,0 +1,29 @@
+import type { Node } from '../../../../types/graph-element';
+import type { TextSegment } from '../types';
+/**
+ * Returns the caption font size that should be used
+ * for the given info level and node diameter.
+ * @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.
+ */
+export declare const infoLevelToFontSize: (infoLevel: number, nodeRadius?: number, captionSize?: number, hasIcon?: boolean) => number;
+/**
+ * Prepares node caption data for rendering (works for both Canvas and SVG)
+ * @param node - The node to prepare caption data for
+ * @param zoomLevel - Current zoom level
+ * @param ctx - Canvas context for text measurement (optional for SVG, will create one if not provided)
+ * @returns Caption rendering data including lines, styles, positioning, and font info
+ */
+export declare function prepareNodeCaptionData(node: Node, zoomLevel: number, ctx?: CanvasRenderingContext2D): {
+    lines: TextSegment[];
+    stylesPerChar: string[][];
+    fullCaption: string;
+    fontSize: number;
+    fontFace: string;
+    fontColor: string;
+    yPos: number;
+    maxNoLines: number;
+    hasContent: boolean;
+};

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

@@ -0,0 +1,58 @@
+import type { Node } from '../../../../types/graph-element';
+/**
+ * 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 - The node to get the bounding box for.
+ * @returns The bounding box of the node.
+ */
+export declare const getBoundingBox: ({ x, y, size }: Node) => DOMRect;
+/**
+ * Calculates the size of a node icon based on node properties
+ * @param mainFaceRadius - The radius of the node's main face (already adjusted for pixel ratio)
+ * @param hasCaption - Whether the node has a caption
+ * @param iconInfoLevel - The icon info level (determines size scaling)
+ * @param nodeInfoLevel - The node info level (determines whether icon should show with text)
+ * @returns The calculated icon size
+ */
+export declare const getNodeIconSize: (mainFaceRadius: number, hasCaption: boolean, iconInfoLevel: number, nodeInfoLevel: number) => number;
+/**
+ * Calculates the position of a node icon
+ * @param iconSize - The size of the icon
+ * @param hasCaption - Whether the node has a caption
+ * @param captionAlign - The caption alignment ('center', 'bottom', or 'top')
+ * @param iconInfoLevel - The icon info level
+ * @param nodeInfoLevel - The node info level
+ * @returns Object with iconXPos and iconYPos
+ */
+export declare const getNodeIconPosition: (iconSize: number, hasCaption: boolean, captionAlign: string, iconInfoLevel: number, nodeInfoLevel: number) => {
+    iconXPos: number;
+    iconYPos: number;
+};
+/**
+ * Calculates the size of a node overlay icon
+ * @param mainFaceDiameter - The diameter of the node's main face (already adjusted for pixel ratio)
+ * @param overlayIconSizeFactor - The size factor from the overlay icon configuration
+ * @returns The calculated overlay icon size
+ */
+export declare const getNodeOverlayIconSize: (mainFaceDiameter: number, overlayIconSizeFactor: number) => number;
+/**
+ * Calculates the position of a node overlay icon
+ * @param iconSize - The size of the overlay icon
+ * @param mainFaceRadius - The radius of the node's main face
+ * @param position - The position array [x, y] from overlay icon configuration
+ * @returns Object with iconXPos and iconYPos
+ */
+export declare const getNodeOverlayIconPosition: (iconSize: number, mainFaceRadius: number, position: [number, number]) => {
+    iconXPos: number;
+    iconYPos: number;
+};
+/**
+ * Calculates the rendered radius of a node including pixel ratio
+ * @param node - The node object with optional size property
+ * @param pixelRatio - Device pixel ratio
+ * @param defaultNodeSize - Default size to use if node.size is undefined
+ * @returns The radius in pixels
+ */
+export declare const getNodeRadius: (node: {
+    size?: number;
+}, pixelRatio: number, defaultNodeSize: number) => number;

package/dist/types/renderers/{canvasrenderer → domrenderer/shared}/types.d.ts

@@ -1,5 +1,5 @@
-import type { Node, Relationship } from '../../types/graph-element';
-import type { Point } from '../../utils/geometry';
+import type { Node, Relationship } from '../../../types/graph-element';
+import type { Point } from '../../../utils/geometry';
 export type TextSegment = {
     hasEllipsisChar?: boolean;
     hasHyphenChar?: boolean;

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

@@ -0,0 +1,11 @@
+export declare const fontThresholds: [number, number][];
+/**
+ * This function takes color in hex format or rgb() or rgba() format and overrides the opacity. Returns rgba() string.
+ * @param color - * @param opacity - * @returns rgba() string with the given opacity.
+ */
+export declare const overrideOpacity: (color: string, opacity: number) => string;
+export declare function getIndividualInfoLevels(r: number, zoomLevel: number): {
+    nodeInfoLevel: number;
+    fontInfoLevel: number;
+    iconInfoLevel: number;
+};

package/dist/types/renderers/{canvasrenderer → domrenderer/shared}/vectorUtils.d.ts

@@ -1,4 +1,4 @@
-import type { Point } from '../../utils/geometry';
+import type { Point } from '../../../utils/geometry';
 export declare const add: (v1: Point, v2: Point) => {
     x: number;
     y: number;

package/dist/types/renderers/{canvasrenderer → domrenderer/shared}/wordwrap.d.ts

@@ -1,6 +1,16 @@
 import type { StyledCaption, TextSegment } from './types';
 export declare const hyphenChar = "\u2010";
 export declare const ellipsisChar = "\u2026";
+/**
+ * Calculates the maximum width for a relationship caption based on the distance
+ * between the two center waypoints. Uses Euclidean distance.
+ * @param points - Array of relationship waypoints
+ * @returns The maximum width for the caption
+ */
+export declare const getRelationshipCaptionMaxWidth: (points: {
+    x: number;
+    y: number;
+}[]) => number;
 /**
  * This is the main function that tries to fit a text on one or more lines
  *

package/dist/types/renderers/domrenderer/shared/wordwrap.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/renderers/domrenderer/svgrenderer/SvgRenderer.d.ts

@@ -0,0 +1,22 @@
+import type { NvlState } from '../../../modules/state/types';
+import type { Node } from '../../../types/graph-element';
+import type { RendererOptions } from '../BaseRenderer';
+import BaseRenderer from '../BaseRenderer';
+export default class SvgRenderer extends BaseRenderer {
+    private svg;
+    private measurementContext;
+    constructor(svg: SVGSVGElement, state: NvlState, options?: RendererOptions);
+    render(positionArray: Node[], positionBoundaries?: {
+        centerX: number;
+        centerY: number;
+        nodesWidth: number;
+        nodesHeight: number;
+    }, options?: {
+        svg?: SVGSVGElement;
+        backgroundColor?: string;
+        showCaptions?: boolean;
+    }): void;
+    private renderNodes;
+    private renderRelationships;
+    private getSvgTransform;
+}

package/dist/types/renderers/domrenderer/svgrenderer/SvgRenderer.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/renderers/domrenderer/svgrenderer/svgUtils.d.ts

@@ -0,0 +1,175 @@
+import type { Point } from '../../../utils/geometry';
+/**
+ * Applies text styles to an SVG tspan element based on a style string
+ * @param {SVGTSpanElement} tspanElem - The SVG tspan element to style
+ * @param {string} styleStr - Comma-separated style string (e.g., "bold,italic")
+ */
+export declare const applySvgTextStyles: (tspanElem: SVGTSpanElement, styleStr: string) => void;
+/**
+ * Builds an SVG path string for a self-referencing loop using quadratic curves
+ * @param startPoint - The start point of the loop
+ * @param endPoint - The end point of the loop
+ * @param apexPoint - The apex (top) point of the loop
+ * @param control1Point - The first control point
+ * @param control2Point - The second control point
+ * @returns SVG path string
+ */
+export declare const buildSelfLoopPath: (startPoint: Point, endPoint: Point, apexPoint: Point, control1Point: Point, control2Point: Point) => string;
+/**
+ * Builds an SVG path string for a polyline with quadratic curves between points
+ * @param points - Array of points along the path
+ * @returns SVG path string
+ */
+export declare const buildQuadraticCurvePath: (points: Point[]) => string;
+/**
+ * Converts an array of points to an SVG polyline points attribute string
+ * @param points - Array of points
+ * @returns String suitable for SVG polyline points attribute
+ */
+export declare const pointsToPolylineString: (points: Point[]) => string;
+/**
+ * Creates an SVG arrowhead polygon element with selection rings
+ * @param arrowHead - Arrowhead geometry (tip, base1, base2 points)
+ * @param fillColor - Fill color for the arrowhead
+ * @param rings - Selection rings configuration
+ * @param pixelRatio - Device pixel ratio
+ * @returns Array of SVG polygon elements [rings..., arrowhead]
+ */
+export declare const createArrowHeadWithRings: (arrowHead: {
+    tip: Point;
+    base1: Point;
+    base2: Point;
+}, fillColor: string, rings: Array<{
+    color: string;
+    width: number;
+}>, pixelRatio: number) => SVGPolygonElement[];
+/**
+ * Creates an SVG text element with styled spans
+ * @param options - Configuration options for the text element
+ * @param options.x - X coordinate
+ * @param options.y - Y coordinate
+ * @param options.fontSize - Font size
+ * @param options.fontFace - Font family
+ * @param options.fontColor - Text color
+ * @param options.textAnchor - Text anchor ('start', 'middle', 'end')
+ * @param options.dominantBaseline - Dominant baseline ('auto', 'middle', etc.)
+ * @param options.lineSpans - Array of text spans with styles
+ * @param options.transform - Optional transform attribute
+ * @param options.fontWeight - Optional font weight
+ * @returns SVG text element with tspan children
+ */
+export declare const createStyledTextElement: (options: {
+    x: number;
+    y: number;
+    fontSize: number;
+    fontFace: string;
+    fontColor: string;
+    textAnchor: string;
+    dominantBaseline: string;
+    lineSpans: Array<{
+        text: string;
+        style: string;
+    }>;
+    transform?: string;
+    fontWeight?: string;
+}) => SVGTextElement;
+/**
+ * Creates an SVG path element with selection rings
+ * @param pathData - SVG path d attribute
+ * @param strokeColor - Stroke color for the path
+ * @param strokeWidth - Stroke width for the path
+ * @param rings - Selection rings configuration
+ * @param pixelRatio - Device pixel ratio
+ * @returns Array of SVG path elements [rings..., path]
+ */
+export declare const createPathWithRings: (pathData: string, strokeColor: string, strokeWidth: number, rings: Array<{
+    color: string;
+    width: number;
+}>, pixelRatio: number) => SVGPathElement[];
+/**
+ * Creates an SVG polyline element with selection rings
+ * @param points - Polyline points string
+ * @param strokeColor - Stroke color for the polyline
+ * @param strokeWidth - Stroke width for the polyline
+ * @param rings - Selection rings configuration
+ * @param pixelRatio - Device pixel ratio
+ * @returns Array of SVG polyline elements [rings..., polyline]
+ */
+export declare const createPolylineWithRings: (points: string, strokeColor: string, strokeWidth: number, rings: Array<{
+    color: string;
+    width: number;
+}>, pixelRatio: number) => SVGPolylineElement[];
+/**
+ * Calculates arrowhead geometry for relationship endpoints (SVG-specific)
+ * @param point1 - First point (direction from)
+ * @param point2 - Second point (direction to)
+ * @param arrowLength - Length of the arrowhead
+ * @param arrowWidth - Width of the arrowhead
+ * @param offsetFactor - Factor to offset the tip (default 1/3)
+ * @returns Object containing arrowhead points
+ */
+export declare const getArrowheadGeometry: (point1: {
+    x: number;
+    y: number;
+}, point2: {
+    x: number;
+    y: number;
+}, arrowLength: number, arrowWidth: number, offsetFactor?: number) => {
+    tip: {
+        x: number;
+        y: number;
+    };
+    base1: {
+        x: number;
+        y: number;
+    };
+    base2: {
+        x: number;
+        y: number;
+    };
+    angle: number;
+};
+/**
+ * Calculates the proper angle for relationship labels to prevent upside-down text (SVG-specific)
+ * @param angle - The original angle in radians
+ * @returns The corrected angle in degrees
+ */
+export declare const getCorrectLabelAngle: (angle: number) => number;
+/**
+ * Processes caption data for SVG rendering
+ * @param captions - Array of caption objects with value and styles
+ * @param caption - Legacy single caption string
+ * @returns Object with fullCaption and stylesPerChar array
+ */
+/**
+ * Groups consecutive characters with the same style into text spans
+ * @param lineText - The text of the line
+ * @param stylesPerChar - Array of style arrays for each character
+ * @param startCharIndex - The starting character index in the overall caption
+ * @returns Array of text spans with their styles
+ */
+export declare const getGroupedTextSpans: (lineText: string, stylesPerChar: string[][], startCharIndex: number) => {
+    text: string;
+    style: string;
+}[];
+/**
+ * Creates an SVG image element for node icons
+ * @param options - Configuration options for the icon element
+ * @param options.nodeX - X coordinate of the node center
+ * @param options.nodeY - Y coordinate of the node center
+ * @param options.iconXPos - X offset from node center to icon position
+ * @param options.iconYPos - Y offset from node center to icon position
+ * @param options.iconSize - Size (width and height) of the icon
+ * @param options.image - The image from cache (HTMLCanvasElement)
+ * @param options.isDisabled - Whether the node is disabled
+ * @returns SVG image element
+ */
+export declare const createSvgIconElement: (options: {
+    nodeX: number;
+    nodeY: number;
+    iconXPos: number;
+    iconYPos: number;
+    iconSize: number;
+    image: HTMLCanvasElement;
+    isDisabled: boolean;
+}) => SVGImageElement;

package/dist/types/renderers/webglrenderer/Renderer.d.ts

@@ -27,13 +27,17 @@ export default class Renderer {
     private relBuffer;
     private nodeBuffer;
     private posTexture;
+    private nodeVao;
+    private relVao;
+    private nodeAnimVao;
+    private vaoExt;
     constructor(gl: WebGLRenderingContext, nodes: DataSet<Node>, rels: DataSet<Relationship>, state: NvlState);
     private setShaderUniforms;
     setData(data: {
         nodes: Node[];
         rels: Relationship[];
     }): void;
-    render(positionArray: Node[], nodes: any, rels: any): void;
+    render(positionArray: Node[]): void;
     renderViewbox(): void;
     updateNodes(updates: Node[]): void;
     updateRelationships(relItems: Relationship[]): void;

package/dist/types/renderers/webglrenderer/Renderer.test.d.ts

@@ -0,0 +1 @@
+export {};

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

@@ -1,4 +1,4 @@
-import type { StyledCaption } from '../renderers/canvasrenderer/types';
+import type { StyledCaption } from '../renderers/domrenderer/shared/types';
 /**
  * The base type for graph elements.
  * @private

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

@@ -13,6 +13,21 @@ export declare const createCanvasForScreenshot: (fullWidth: number, fullHeight:
 export declare const createCanvasForRenderer: (parent?: HTMLElement, onContextLostCallback?: (e: WebGLContextEvent) => void) => HTMLCanvasElement;
 export declare const removeCanvas: (canvas: HTMLCanvasElement) => void;
 export declare const getCanvas2DContext: (canvas: HTMLCanvasElement) => CanvasRenderingContext2D;
-export declare const getWebGLContext: (canvas: HTMLCanvasElement) => WebGLRenderingContext | WebGL2RenderingContext;
+export declare const getWebGLContext: (canvas: HTMLCanvasElement) => WebGLRenderingContext;
 export declare const removeWebGLContext: (webGLCtx: WebGLRenderingContext) => void;
 export declare const checkWebGLAvailability: (canvas?: HTMLCanvasElement) => boolean;
+/**
+ * Measures the width of text with caching to avoid expensive measureText operations.
+ *
+ * The cache key is based on the current font, so that measurements are accurate
+ * even when font properties change.
+ *
+ * @param ctx - The canvas rendering context
+ * @param text - The text to measure
+ * @returns The width of the text in pixels
+ */
+export declare const measureTextCached: (ctx: CanvasRenderingContext2D, text: string) => number;
+/**
+ * Clears the text measurement cache.
+ */
+export declare const clearTextMeasurementCache: () => void;

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

@@ -0,0 +1,3 @@
+import type { Node } from '../types/graph-element';
+export declare const MIN_RADIUS = 250;
+export declare const getPositionsOnCircle: (nodes: Node[]) => Record<string, Node>;

package/dist/types/utils/circularUtils.test.d.ts

@@ -0,0 +1 @@
+export {};

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

@@ -2,7 +2,7 @@ export declare const PhysTextureSize = 256;
 export declare const SpringTextureSize = 4096;
 export declare const MaxIndexBuffer = 65536;
 export declare const MinRelLength = 100;
-export declare const Gravity = 100;
+export declare const Gravity = 25;
 export declare const SimulationStopVelocity = 100;
 export declare const VerletSimulationStopVelocity = 0.25;
 export declare const MappingEnd = 999999;
@@ -12,6 +12,7 @@ export declare const DefaultNodeColor = "#FFDF81";
 export declare const DefaultRelColor = "#818790";
 export declare const DefaultRelWidth = 1;
 export declare const MaxFlatRelWidth = 20;
+export declare const DefaultRelationshipThreshold = 0;
 export declare const DisabledItemColor = "#EDEDED";
 export declare const DisabledItemFontColor = "#DDDDDD";
 export declare const DefaultShadowColor = "#CFD1D4";
@@ -19,6 +20,8 @@ export declare const DefaultSelectedInnerColor = "#F5F6F6";
 export declare const DefaultSelectedOuterColor = "#8FE3E8";
 export declare const TextColor = "#1A1B1D";
 export declare const TextColorInverse = "#FFFFFF";
+export declare const MaxArrowCountWithShadows = 500;
+export declare const DefaultFontFace = "\"Open Sans\", sans-serif";
 export declare const absFillStyle: {
     position: string;
     top: number;

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

@@ -8,13 +8,14 @@ export interface Point {
     /** The y coordinate of the point. */
     y: number;
 }
+export declare const isPointDefined: (point: Point | Node) => boolean;
 /**
  * This function checks if the coordinates are defined.
  * @param from - The {@link Node} the edge starts from.
  * @param to - The {@link Node} the edge ends at.
  * @returns True if the coordinates are defined.
  */
-export declare const areCoordinateDefined: (from: Point | Node, to: Point | Node) => boolean;
+export declare const areEndpointsDefined: (from: Point | Node, to: Point | Node) => boolean;
 /**
  * Returns true if the two points are within PointDelta pixels of each other
  * This function is used to determine if a new point is close enough to an