@neo4j-nvl/base 1.0.0 → 1.1.0-17f2ef68
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +25 -0
- package/dist/base.mjs +1 -1
- package/dist/types/index.d.ts +44 -11
- package/dist/types/layouts/circularLayout/CircularLayout.d.ts +18 -0
- package/dist/types/layouts/d3forcelayout/d3ForceLayout.d.ts +24 -20
- package/dist/types/layouts/d3forcelayout/types.d.ts +5 -6
- package/dist/types/layouts/forcedirectedlayout/ForceCytoLayout.d.ts +1 -1
- package/dist/types/layouts/forcedirectedlayout/physlayout/PhysLayout.d.ts +8 -3
- package/dist/types/layouts/forcedirectedlayout/physlayout/shaders/multilevel-fragment-verlet.d.ts +1 -1
- package/dist/types/layouts/forcedirectedlayout/physlayout/solarmerger/SolarMerger.d.ts +17 -39
- package/dist/types/layouts/forcedirectedlayout/physlayout/solarmerger/types.d.ts +49 -0
- package/dist/types/layouts/gridLayout/GridLayout.d.ts +25 -9
- package/dist/types/modules/NvlController.d.ts +20 -4
- package/dist/types/modules/state/types.d.ts +30 -9
- package/dist/types/modules/state/utils.d.ts +2 -2
- package/dist/types/renderers/domrenderer/BaseRenderer.d.ts +75 -0
- package/dist/types/renderers/{canvasrenderer → domrenderer/canvasrenderer}/CanvasRenderer.d.ts +33 -40
- package/dist/types/renderers/domrenderer/canvasrenderer/arrowDrawing.d.ts +168 -0
- package/dist/types/renderers/domrenderer/canvasrenderer/nodeDrawing.d.ts +109 -0
- package/dist/types/renderers/domrenderer/shared/ImageCache.d.ts +16 -0
- package/dist/types/renderers/{canvasrenderer → domrenderer/shared}/arrows/ArrowBundle.d.ts +20 -4
- package/dist/types/renderers/{canvasrenderer → domrenderer/shared}/arrows/ArrowBundler.d.ts +2 -1
- package/dist/types/renderers/domrenderer/shared/arrows/arrows.d.ts +175 -0
- package/dist/types/renderers/domrenderer/shared/arrows/arrows.test.d.ts +1 -0
- package/dist/types/renderers/domrenderer/shared/nodes/nodes.d.ts +103 -0
- package/dist/types/renderers/domrenderer/shared/nodes/nodes.test.d.ts +1 -0
- package/dist/types/renderers/{canvasrenderer → domrenderer/shared}/types.d.ts +2 -2
- package/dist/types/renderers/domrenderer/shared/util.d.ts +11 -0
- package/dist/types/renderers/domrenderer/shared/util.test.d.ts +1 -0
- package/dist/types/renderers/{canvasrenderer → domrenderer/shared}/vectorUtils.d.ts +1 -1
- package/dist/types/renderers/{canvasrenderer → domrenderer/shared}/wordwrap.d.ts +10 -0
- package/dist/types/renderers/domrenderer/shared/wordwrap.test.d.ts +1 -0
- package/dist/types/renderers/domrenderer/svgrenderer/SvgRenderer.d.ts +20 -0
- package/dist/types/renderers/domrenderer/svgrenderer/SvgRenderer.test.d.ts +1 -0
- package/dist/types/renderers/domrenderer/svgrenderer/arrowDrawing.d.ts +59 -0
- package/dist/types/renderers/domrenderer/svgrenderer/arrowDrawing.test.d.ts +1 -0
- package/dist/types/renderers/domrenderer/svgrenderer/nodeDrawing.d.ts +16 -0
- package/dist/types/renderers/domrenderer/svgrenderer/nodeDrawing.test.d.ts +1 -0
- package/dist/types/renderers/domrenderer/svgrenderer/svgUtils.d.ts +78 -0
- package/dist/types/renderers/domrenderer/svgrenderer/svgUtils.test.d.ts +1 -0
- package/dist/types/renderers/webglrenderer/Renderer.d.ts +5 -1
- package/dist/types/renderers/webglrenderer/Renderer.test.d.ts +1 -0
- package/dist/types/types/graph-element.d.ts +1 -1
- package/dist/types/utils/canvasManagement.d.ts +16 -1
- package/dist/types/utils/circularUtils.d.ts +3 -0
- package/dist/types/utils/circularUtils.test.d.ts +1 -0
- package/dist/types/utils/constants.d.ts +4 -1
- package/dist/types/utils/geometry.d.ts +2 -1
- package/dist/types/utils/graphObjectUtils.d.ts +2 -2
- package/dist/types/utils/jsDriverResultTransformer.d.ts +1 -1
- package/package.json +25 -24
- package/dist/types/modules/performance.d.ts +0 -93
- package/dist/types/renderers/canvasrenderer/ImageCache.d.ts +0 -11
- package/dist/types/renderers/canvasrenderer/arrows/arrows.d.ts +0 -55
- package/dist/types/renderers/canvasrenderer/nodes/nodes.d.ts +0 -59
- package/dist/types/renderers/canvasrenderer/util.d.ts +0 -68
- /package/dist/types/{renderers/canvasrenderer/Animation.test.d.ts → layouts/d3forcelayout/circularLayout.test.d.ts} +0 -0
- /package/dist/types/renderers/{canvasrenderer/CanvasRenderer.test.d.ts → domrenderer/BaseRenderer.test.d.ts} +0 -0
- /package/dist/types/renderers/{canvasrenderer → domrenderer/canvasrenderer}/Animation.d.ts +0 -0
- /package/dist/types/renderers/{canvasrenderer/ImageCache.test.d.ts → domrenderer/canvasrenderer/Animation.test.d.ts} +0 -0
- /package/dist/types/renderers/{canvasrenderer → domrenderer/canvasrenderer}/AnimationHandler.d.ts +0 -0
- /package/dist/types/renderers/{canvasrenderer/arrows/ArrowBundle.test.d.ts → domrenderer/canvasrenderer/CanvasRenderer.test.d.ts} +0 -0
- /package/dist/types/renderers/{canvasrenderer/arrows/ArrowBundler.test.d.ts → domrenderer/canvasrenderer/arrowDrawing.test.d.ts} +0 -0
- /package/dist/types/renderers/{canvasrenderer/arrows/arrows.test.d.ts → domrenderer/canvasrenderer/nodeDrawing.test.d.ts} +0 -0
- /package/dist/types/renderers/{canvasrenderer/nodes/nodes.test.d.ts → domrenderer/shared/ImageCache.test.d.ts} +0 -0
- /package/dist/types/renderers/{canvasrenderer/util.test.d.ts → domrenderer/shared/arrows/ArrowBundle.test.d.ts} +0 -0
- /package/dist/types/renderers/{canvasrenderer/wordwrap.test.d.ts → domrenderer/shared/arrows/ArrowBundler.test.d.ts} +0 -0
- /package/dist/types/renderers/{canvasrenderer → domrenderer/shared}/arrows/constants.d.ts +0 -0
|
@@ -0,0 +1,103 @@
|
|
|
1
|
+
import type { BorderStyles } from '../../../../modules/state/types';
|
|
2
|
+
import type { Node } from '../../../../types/graph-element';
|
|
3
|
+
import type AnimationHandler from '../../canvasrenderer/AnimationHandler';
|
|
4
|
+
import type { TextSegment } from '../types';
|
|
5
|
+
/**
|
|
6
|
+
* Returns the bounding box of a node with the given x, y, and size properties.
|
|
7
|
+
* If no size is given, the default size is used.
|
|
8
|
+
* @param Node - The node to get the bounding box for.
|
|
9
|
+
* @returns The bounding box of the node.
|
|
10
|
+
*/
|
|
11
|
+
export declare const getBoundingBox: ({ x, y, size }: Node) => DOMRect;
|
|
12
|
+
/**
|
|
13
|
+
* Calculates the size of a node icon based on node properties
|
|
14
|
+
* @param mainFaceRadius - The radius of the node's main face (already adjusted for pixel ratio)
|
|
15
|
+
* @param hasCaption - Whether the node has a caption
|
|
16
|
+
* @param iconInfoLevel - The icon info level (determines size scaling)
|
|
17
|
+
* @param nodeInfoLevel - The node info level (determines whether icon should show with text)
|
|
18
|
+
* @returns The calculated icon size
|
|
19
|
+
*/
|
|
20
|
+
export declare const getNodeIconSize: (mainFaceRadius: number, hasCaption: boolean, iconInfoLevel: number, nodeInfoLevel: number) => number;
|
|
21
|
+
/**
|
|
22
|
+
* Calculates the position of a node icon
|
|
23
|
+
* @param iconSize - The size of the icon
|
|
24
|
+
* @param hasCaption - Whether the node has a caption
|
|
25
|
+
* @param captionAlign - The caption alignment ('center', 'bottom', or 'top')
|
|
26
|
+
* @param iconInfoLevel - The icon info level
|
|
27
|
+
* @param nodeInfoLevel - The node info level
|
|
28
|
+
* @returns Object with iconXPos and iconYPos
|
|
29
|
+
*/
|
|
30
|
+
export declare const getNodeIconPosition: (iconSize: number, hasCaption: boolean, captionAlign: string, iconInfoLevel: number, nodeInfoLevel: number) => {
|
|
31
|
+
iconXPos: number;
|
|
32
|
+
iconYPos: number;
|
|
33
|
+
};
|
|
34
|
+
/**
|
|
35
|
+
* Calculates the size of a node overlay icon
|
|
36
|
+
* @param mainFaceDiameter - The diameter of the node's main face (already adjusted for pixel ratio)
|
|
37
|
+
* @param overlayIconSizeFactor - The size factor from the overlay icon configuration
|
|
38
|
+
* @returns The calculated overlay icon size
|
|
39
|
+
*/
|
|
40
|
+
export declare const getNodeOverlayIconSize: (mainFaceDiameter: number, overlayIconSizeFactor: number) => number;
|
|
41
|
+
/**
|
|
42
|
+
* Calculates the position of a node overlay icon
|
|
43
|
+
* @param iconSize - The size of the overlay icon
|
|
44
|
+
* @param mainFaceRadius - The radius of the node's main face
|
|
45
|
+
* @param position - The position array [x, y] from overlay icon configuration
|
|
46
|
+
* @returns Object with iconXPos and iconYPos
|
|
47
|
+
*/
|
|
48
|
+
export declare const getNodeOverlayIconPosition: (iconSize: number, mainFaceRadius: number, position: [number, number]) => {
|
|
49
|
+
iconXPos: number;
|
|
50
|
+
iconYPos: number;
|
|
51
|
+
};
|
|
52
|
+
/**
|
|
53
|
+
* Returns the caption font size that should be used
|
|
54
|
+
* for the given info level and node diameter.
|
|
55
|
+
* @param infoLevel {number} - The info level.
|
|
56
|
+
* @param nodeRadius {number} - The radius of the node.
|
|
57
|
+
* @param captionSize {number} - The size of the caption.
|
|
58
|
+
* @param hasIcon {boolean} - Whether the node has an icon.
|
|
59
|
+
* @returns {number} - The font size.
|
|
60
|
+
*/
|
|
61
|
+
export declare const infoLevelToFontSize: (infoLevel: number, nodeRadius?: number, captionSize?: number, hasIcon?: boolean) => number;
|
|
62
|
+
/**
|
|
63
|
+
* Calculates the rendered radius of a node including pixel ratio
|
|
64
|
+
* @param node - The node object with optional size property
|
|
65
|
+
* @param pixelRatio - Device pixel ratio
|
|
66
|
+
* @param defaultNodeSize - Default size to use if node.size is undefined
|
|
67
|
+
* @returns The radius in pixels
|
|
68
|
+
*/
|
|
69
|
+
export declare const getNodeRadius: (node: {
|
|
70
|
+
size?: number;
|
|
71
|
+
}) => number;
|
|
72
|
+
/**
|
|
73
|
+
* Prepares node caption data for rendering (works for both Canvas and SVG)
|
|
74
|
+
* @param node - The node to prepare caption data for
|
|
75
|
+
* @param zoomLevel - Current zoom level
|
|
76
|
+
* @param ctx - Canvas context for text measurement (optional for SVG, will create one if not provided)
|
|
77
|
+
* @returns Caption rendering data including lines, styles, positioning, and font info
|
|
78
|
+
*/
|
|
79
|
+
export declare const prepareNodeCaptionData: (node: Node, zoomLevel: number, ctx?: CanvasRenderingContext2D) => {
|
|
80
|
+
lines: TextSegment[];
|
|
81
|
+
stylesPerChar: string[][];
|
|
82
|
+
fullCaption: string;
|
|
83
|
+
fontSize: number;
|
|
84
|
+
fontFace: string;
|
|
85
|
+
fontColor: string;
|
|
86
|
+
yPos: number;
|
|
87
|
+
maxNoLines: number;
|
|
88
|
+
hasContent: boolean;
|
|
89
|
+
};
|
|
90
|
+
/**
|
|
91
|
+
* Returns an array of styles for the rings of a node.
|
|
92
|
+
* If the node is selected, it uses the selected ring styles.
|
|
93
|
+
* Otherwise, it uses the default ring styles.
|
|
94
|
+
*
|
|
95
|
+
* @param node - The node to get the ring styles for.
|
|
96
|
+
* @param nodeBorderStyles - The node border styles.
|
|
97
|
+
* @param animationHandler - Optional animation handler for animating ring width changes.
|
|
98
|
+
* @returns An array of ring styles with computed widths.
|
|
99
|
+
*/
|
|
100
|
+
export declare const getRingStyles: (node: Node, nodeBorderStyles: BorderStyles, animationHandler?: AnimationHandler) => {
|
|
101
|
+
width: number;
|
|
102
|
+
color: string;
|
|
103
|
+
}[];
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import type { Node, Relationship } from '
|
|
2
|
-
import type { Point } from '
|
|
1
|
+
import type { Node, Relationship } from '../../../types/graph-element';
|
|
2
|
+
import type { Point } from '../../../utils/geometry';
|
|
3
3
|
export type TextSegment = {
|
|
4
4
|
hasEllipsisChar?: boolean;
|
|
5
5
|
hasHyphenChar?: boolean;
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
export declare const fontThresholds: [number, number][];
|
|
2
|
+
/**
|
|
3
|
+
* This function takes color in hex format or rgb() or rgba() format and overrides the opacity. Returns rgba() string.
|
|
4
|
+
* @param color - * @param opacity - * @returns rgba() string with the given opacity.
|
|
5
|
+
*/
|
|
6
|
+
export declare const overrideOpacity: (color: string, opacity: number) => string;
|
|
7
|
+
export declare function getIndividualInfoLevels(r: number, zoomLevel: number): {
|
|
8
|
+
nodeInfoLevel: number;
|
|
9
|
+
fontInfoLevel: number;
|
|
10
|
+
iconInfoLevel: number;
|
|
11
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -1,6 +1,16 @@
|
|
|
1
1
|
import type { StyledCaption, TextSegment } from './types';
|
|
2
2
|
export declare const hyphenChar = "\u2010";
|
|
3
3
|
export declare const ellipsisChar = "\u2026";
|
|
4
|
+
/**
|
|
5
|
+
* Calculates the maximum width for a relationship caption based on the distance
|
|
6
|
+
* between the two center waypoints. Uses Euclidean distance.
|
|
7
|
+
* @param points - Array of relationship waypoints
|
|
8
|
+
* @returns The maximum width for the caption
|
|
9
|
+
*/
|
|
10
|
+
export declare const getRelationshipCaptionMaxWidth: (points: {
|
|
11
|
+
x: number;
|
|
12
|
+
y: number;
|
|
13
|
+
}[]) => number;
|
|
4
14
|
/**
|
|
5
15
|
* This is the main function that tries to fit a text on one or more lines
|
|
6
16
|
*
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import type { NvlState } from '../../../modules/state/types';
|
|
2
|
+
import type { Node } from '../../../types/graph-element';
|
|
3
|
+
import type { RendererOptions } from '../BaseRenderer';
|
|
4
|
+
import BaseRenderer from '../BaseRenderer';
|
|
5
|
+
export default class SvgRenderer extends BaseRenderer {
|
|
6
|
+
private svg;
|
|
7
|
+
private measurementContext;
|
|
8
|
+
constructor(svg: SVGSVGElement, state: NvlState, options?: RendererOptions);
|
|
9
|
+
clear(): void;
|
|
10
|
+
render(positionArray: Node[], positionBoundaries?: {
|
|
11
|
+
centerX: number;
|
|
12
|
+
centerY: number;
|
|
13
|
+
nodesWidth: number;
|
|
14
|
+
nodesHeight: number;
|
|
15
|
+
}, options?: {
|
|
16
|
+
svg?: SVGSVGElement;
|
|
17
|
+
backgroundColor?: string;
|
|
18
|
+
showCaptions?: boolean;
|
|
19
|
+
}): void;
|
|
20
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1,59 @@
|
|
|
1
|
+
import type { BorderStyles, DisabledItemStyles } from '../../../modules/state/types';
|
|
2
|
+
import type { Point } from '../../../utils/geometry';
|
|
3
|
+
import type ImageCache from '../shared/ImageCache';
|
|
4
|
+
import type ArrowBundler from '../shared/arrows/ArrowBundler';
|
|
5
|
+
import type { RelationshipToRender } from '../shared/types';
|
|
6
|
+
/**
|
|
7
|
+
* Builds an SVG path string for a self-referencing loop using quadratic curves
|
|
8
|
+
*/
|
|
9
|
+
export declare const buildSelfLoopPath: (startPoint: Point, endPoint: Point, apexPoint: Point, control1Point: Point, control2Point: Point) => string;
|
|
10
|
+
/**
|
|
11
|
+
* Builds an SVG path string for a polyline with quadratic curves between points
|
|
12
|
+
*/
|
|
13
|
+
export declare const buildQuadraticCurvePath: (points: Point[]) => string;
|
|
14
|
+
/**
|
|
15
|
+
* Converts an array of points to an SVG polyline points attribute string
|
|
16
|
+
*/
|
|
17
|
+
export declare const pointsToPolylineString: (points: Point[]) => string;
|
|
18
|
+
/**
|
|
19
|
+
* Creates an SVG arrowhead polygon element with selection rings
|
|
20
|
+
*/
|
|
21
|
+
export declare const createArrowHeadWithRings: (arrowHead: {
|
|
22
|
+
tip: Point;
|
|
23
|
+
base1: Point;
|
|
24
|
+
base2: Point;
|
|
25
|
+
}, fillColor: string, rings: {
|
|
26
|
+
color: string;
|
|
27
|
+
width: number;
|
|
28
|
+
}[]) => SVGPolygonElement[];
|
|
29
|
+
/**
|
|
30
|
+
* Creates an SVG path element with selection rings
|
|
31
|
+
*/
|
|
32
|
+
export declare const createPathWithRings: (pathData: string, strokeColor: string, strokeWidth: number, rings: {
|
|
33
|
+
color: string;
|
|
34
|
+
width: number;
|
|
35
|
+
}[]) => SVGPathElement[];
|
|
36
|
+
/**
|
|
37
|
+
* Creates an SVG polyline element with selection rings
|
|
38
|
+
*/
|
|
39
|
+
export declare const createPolylineWithRings: (points: string, strokeColor: string, strokeWidth: number, rings: {
|
|
40
|
+
color: string;
|
|
41
|
+
width: number;
|
|
42
|
+
}[]) => SVGPolylineElement[];
|
|
43
|
+
/**
|
|
44
|
+
* Calculates the proper angle for relationship labels to prevent upside-down text (SVG-specific)
|
|
45
|
+
*/
|
|
46
|
+
export declare const getCorrectLabelAngle: (angle: number) => number;
|
|
47
|
+
/**
|
|
48
|
+
* Renders an array of relationships to an SVG element.
|
|
49
|
+
*
|
|
50
|
+
* @param relationshipsToRender - Relationships with endpoint data to render
|
|
51
|
+
* @param svg - The SVG element to append relationship elements to
|
|
52
|
+
* @param drawCurves - Whether to draw curved paths (true) or polylines (false)
|
|
53
|
+
* @param arrowBundler - The arrow bundler for resolving relationship bundles
|
|
54
|
+
* @param disabledItemStyles - Styles for disabled relationships
|
|
55
|
+
* @param defaultRelationshipColor - Default relationship color
|
|
56
|
+
* @param relationshipBorderStyles - Border/ring styles for relationships
|
|
57
|
+
* @param measurementContext - Canvas 2D context for text measurement
|
|
58
|
+
*/
|
|
59
|
+
export declare const renderSvgRelationships: (relationshipsToRender: RelationshipToRender[], svg: SVGElement, drawCurves: boolean, arrowBundler: ArrowBundler, disabledItemStyles: DisabledItemStyles, defaultRelationshipColor: string, relationshipBorderStyles: BorderStyles, measurementContext: CanvasRenderingContext2D, imageCache: ImageCache) => void;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import type { BorderStyles, DisabledItemStyles } from '../../../modules/state/types';
|
|
2
|
+
import type { Node } from '../../../types/graph-element';
|
|
3
|
+
import type ImageCache from '../shared/ImageCache';
|
|
4
|
+
/**
|
|
5
|
+
* Renders an array of nodes to an SVG element.
|
|
6
|
+
*
|
|
7
|
+
* @param nodesToRender - Nodes with position data to render
|
|
8
|
+
* @param svg - The SVG element to append node groups to
|
|
9
|
+
* @param zoom - Current zoom level
|
|
10
|
+
* @param idToItem - Map from node IDs to full node data
|
|
11
|
+
* @param disabledItemStyles - Styles for disabled nodes
|
|
12
|
+
* @param defaultNodeColor - Default node color
|
|
13
|
+
* @param nodeBorderStyles - Border/ring styles for nodes
|
|
14
|
+
* @param imageCache - Image cache for node icons
|
|
15
|
+
*/
|
|
16
|
+
export declare const renderSvgNodes: (nodesToRender: Node[], svg: SVGElement, zoom: number, idToItem: Record<string, Node>, disabledItemStyles: DisabledItemStyles, defaultNodeColor: string, nodeBorderStyles: BorderStyles, imageCache: ImageCache) => void;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1,78 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Creates an SVG image element for an icon
|
|
3
|
+
*
|
|
4
|
+
* @param nodeX - The x-coordinate of the node
|
|
5
|
+
* @param nodeY - The y-coordinate of the node
|
|
6
|
+
* @param iconXPos - The x-position of the icon relative to the node
|
|
7
|
+
* @param iconYPos - The y-position of the icon relative to the node
|
|
8
|
+
* @param iconSize - The size of the icon
|
|
9
|
+
* @param image - The image to use for the icon
|
|
10
|
+
* @param isDisabled - Whether the icon should be disabled
|
|
11
|
+
*/
|
|
12
|
+
export declare const createSvgIconElement: (options: {
|
|
13
|
+
nodeX: number;
|
|
14
|
+
nodeY: number;
|
|
15
|
+
iconXPos: number;
|
|
16
|
+
iconYPos: number;
|
|
17
|
+
iconSize: number;
|
|
18
|
+
image: HTMLCanvasElement;
|
|
19
|
+
isDisabled: boolean;
|
|
20
|
+
}) => SVGImageElement;
|
|
21
|
+
/**
|
|
22
|
+
* Calculates the SVG transform string for viewport positioning
|
|
23
|
+
*
|
|
24
|
+
* @param width - SVG viewport width
|
|
25
|
+
* @param height - SVG viewport height
|
|
26
|
+
* @param zoom - Zoom level multiplier
|
|
27
|
+
* @param panX - Pan offset in X direction
|
|
28
|
+
* @param panY - Pan offset in Y direction
|
|
29
|
+
* @returns SVG transform string with translate and scale operations
|
|
30
|
+
*/
|
|
31
|
+
export declare const calculateSvgTransform: (width: number, height: number, zoom: number, panX: number, panY: number) => string;
|
|
32
|
+
/**
|
|
33
|
+
* Applies text styles to an SVG tspan element based on a style string
|
|
34
|
+
* @param {SVGTSpanElement} tspanElem - The SVG tspan element to style
|
|
35
|
+
* @param {string} styleStr - Comma-separated style string (e.g., "bold,italic")
|
|
36
|
+
*/
|
|
37
|
+
export declare const applySvgTextStyles: (tspanElem: SVGTSpanElement, styleStr: string) => void;
|
|
38
|
+
/**
|
|
39
|
+
* Creates an SVG text element with styled spans
|
|
40
|
+
* @param options - Configuration options for the text element
|
|
41
|
+
* @param options.x - X coordinate
|
|
42
|
+
* @param options.y - Y coordinate
|
|
43
|
+
* @param options.fontSize - Font size
|
|
44
|
+
* @param options.fontFace - Font family
|
|
45
|
+
* @param options.fontColor - Text color
|
|
46
|
+
* @param options.textAnchor - Text anchor ('start', 'middle', 'end')
|
|
47
|
+
* @param options.dominantBaseline - Dominant baseline ('auto', 'middle', etc.)
|
|
48
|
+
* @param options.lineSpans - Array of text spans with styles
|
|
49
|
+
* @param options.transform - Optional transform attribute
|
|
50
|
+
* @param options.fontWeight - Optional font weight
|
|
51
|
+
* @returns SVG text element with tspan children
|
|
52
|
+
*/
|
|
53
|
+
export declare const createStyledTextElement: (options: {
|
|
54
|
+
x: number;
|
|
55
|
+
y: number;
|
|
56
|
+
fontSize: number;
|
|
57
|
+
fontFace: string;
|
|
58
|
+
fontColor: string;
|
|
59
|
+
textAnchor: string;
|
|
60
|
+
dominantBaseline: string;
|
|
61
|
+
lineSpans: {
|
|
62
|
+
text: string;
|
|
63
|
+
style: string;
|
|
64
|
+
}[];
|
|
65
|
+
transform?: string;
|
|
66
|
+
fontWeight?: string;
|
|
67
|
+
}) => SVGTextElement;
|
|
68
|
+
/**
|
|
69
|
+
* Groups consecutive characters with the same style into text spans
|
|
70
|
+
* @param lineText - The text of the line
|
|
71
|
+
* @param stylesPerChar - Array of style arrays for each character
|
|
72
|
+
* @param startCharIndex - The starting character index in the overall caption
|
|
73
|
+
* @returns Array of text spans with their styles
|
|
74
|
+
*/
|
|
75
|
+
export declare const getGroupedTextSpans: (lineText: string, stylesPerChar: string[][], startCharIndex: number) => {
|
|
76
|
+
text: string;
|
|
77
|
+
style: string;
|
|
78
|
+
}[];
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -27,13 +27,17 @@ export default class Renderer {
|
|
|
27
27
|
private relBuffer;
|
|
28
28
|
private nodeBuffer;
|
|
29
29
|
private posTexture;
|
|
30
|
+
private nodeVao;
|
|
31
|
+
private relVao;
|
|
32
|
+
private nodeAnimVao;
|
|
33
|
+
private vaoExt;
|
|
30
34
|
constructor(gl: WebGLRenderingContext, nodes: DataSet<Node>, rels: DataSet<Relationship>, state: NvlState);
|
|
31
35
|
private setShaderUniforms;
|
|
32
36
|
setData(data: {
|
|
33
37
|
nodes: Node[];
|
|
34
38
|
rels: Relationship[];
|
|
35
39
|
}): void;
|
|
36
|
-
render(positionArray: Node[]
|
|
40
|
+
render(positionArray: Node[]): void;
|
|
37
41
|
renderViewbox(): void;
|
|
38
42
|
updateNodes(updates: Node[]): void;
|
|
39
43
|
updateRelationships(relItems: Relationship[]): void;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -13,6 +13,21 @@ export declare const createCanvasForScreenshot: (fullWidth: number, fullHeight:
|
|
|
13
13
|
export declare const createCanvasForRenderer: (parent?: HTMLElement, onContextLostCallback?: (e: WebGLContextEvent) => void) => HTMLCanvasElement;
|
|
14
14
|
export declare const removeCanvas: (canvas: HTMLCanvasElement) => void;
|
|
15
15
|
export declare const getCanvas2DContext: (canvas: HTMLCanvasElement) => CanvasRenderingContext2D;
|
|
16
|
-
export declare const getWebGLContext: (canvas: HTMLCanvasElement) => WebGLRenderingContext
|
|
16
|
+
export declare const getWebGLContext: (canvas: HTMLCanvasElement) => WebGLRenderingContext;
|
|
17
17
|
export declare const removeWebGLContext: (webGLCtx: WebGLRenderingContext) => void;
|
|
18
18
|
export declare const checkWebGLAvailability: (canvas?: HTMLCanvasElement) => boolean;
|
|
19
|
+
/**
|
|
20
|
+
* Measures the width of text with caching to avoid expensive measureText operations.
|
|
21
|
+
*
|
|
22
|
+
* The cache key is based on the current font, so that measurements are accurate
|
|
23
|
+
* even when font properties change.
|
|
24
|
+
*
|
|
25
|
+
* @param ctx - The canvas rendering context
|
|
26
|
+
* @param text - The text to measure
|
|
27
|
+
* @returns The width of the text in pixels
|
|
28
|
+
*/
|
|
29
|
+
export declare const measureTextCached: (ctx: CanvasRenderingContext2D, text: string) => number;
|
|
30
|
+
/**
|
|
31
|
+
* Clears the text measurement cache.
|
|
32
|
+
*/
|
|
33
|
+
export declare const clearTextMeasurementCache: () => void;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -2,7 +2,7 @@ export declare const PhysTextureSize = 256;
|
|
|
2
2
|
export declare const SpringTextureSize = 4096;
|
|
3
3
|
export declare const MaxIndexBuffer = 65536;
|
|
4
4
|
export declare const MinRelLength = 100;
|
|
5
|
-
export declare const Gravity =
|
|
5
|
+
export declare const Gravity = 25;
|
|
6
6
|
export declare const SimulationStopVelocity = 100;
|
|
7
7
|
export declare const VerletSimulationStopVelocity = 0.25;
|
|
8
8
|
export declare const MappingEnd = 999999;
|
|
@@ -12,6 +12,7 @@ export declare const DefaultNodeColor = "#FFDF81";
|
|
|
12
12
|
export declare const DefaultRelColor = "#818790";
|
|
13
13
|
export declare const DefaultRelWidth = 1;
|
|
14
14
|
export declare const MaxFlatRelWidth = 20;
|
|
15
|
+
export declare const DefaultRelationshipThreshold = 0;
|
|
15
16
|
export declare const DisabledItemColor = "#EDEDED";
|
|
16
17
|
export declare const DisabledItemFontColor = "#DDDDDD";
|
|
17
18
|
export declare const DefaultShadowColor = "#CFD1D4";
|
|
@@ -19,6 +20,8 @@ export declare const DefaultSelectedInnerColor = "#F5F6F6";
|
|
|
19
20
|
export declare const DefaultSelectedOuterColor = "#8FE3E8";
|
|
20
21
|
export declare const TextColor = "#1A1B1D";
|
|
21
22
|
export declare const TextColorInverse = "#FFFFFF";
|
|
23
|
+
export declare const MaxArrowCountWithShadows = 500;
|
|
24
|
+
export declare const DefaultFontFace = "\"Open Sans\", sans-serif";
|
|
22
25
|
export declare const absFillStyle: {
|
|
23
26
|
position: string;
|
|
24
27
|
top: number;
|
|
@@ -8,13 +8,14 @@ export interface Point {
|
|
|
8
8
|
/** The y coordinate of the point. */
|
|
9
9
|
y: number;
|
|
10
10
|
}
|
|
11
|
+
export declare const isPointDefined: (point: Point | Node) => boolean;
|
|
11
12
|
/**
|
|
12
13
|
* This function checks if the coordinates are defined.
|
|
13
14
|
* @param from - The {@link Node} the edge starts from.
|
|
14
15
|
* @param to - The {@link Node} the edge ends at.
|
|
15
16
|
* @returns True if the coordinates are defined.
|
|
16
17
|
*/
|
|
17
|
-
export declare const
|
|
18
|
+
export declare const areEndpointsDefined: (from: Point | Node, to: Point | Node) => boolean;
|
|
18
19
|
/**
|
|
19
20
|
* Returns true if the two points are within PointDelta pixels of each other
|
|
20
21
|
* This function is used to determine if a new point is close enough to an
|
|
@@ -4,7 +4,7 @@ export type FlatRel = Omit<Relationship & {
|
|
|
4
4
|
bundledRels: Omit<Relationship, 'from' | 'to'>[];
|
|
5
5
|
key: string;
|
|
6
6
|
}, 'id'>;
|
|
7
|
-
export declare const getRelItemKey: (from: Node[
|
|
7
|
+
export declare const getRelItemKey: (from: Node["id"], to: Node["id"]) => string;
|
|
8
8
|
export declare const relItemsToFlatKeySet: (relItems: Relationship[]) => Set<string>;
|
|
9
9
|
/**
|
|
10
10
|
* Flattens a list of relationships so only one relationship remains between two nodes.
|
|
@@ -19,7 +19,7 @@ export declare const getAdjNodesMapAndRelMap: (rels: Relationship[]) => {
|
|
|
19
19
|
adjNodesMap: Record<string, Set<string>>;
|
|
20
20
|
relMap: Record<string, Relationship[]>;
|
|
21
21
|
};
|
|
22
|
-
export declare const getConnectedNodesAndRels: (addedNodes: Set<Node[
|
|
22
|
+
export declare const getConnectedNodesAndRels: (addedNodes: Set<Node["id"]>, addedRels: Set<Relationship["id"]>, nodes: DataSet<Node>, rels: DataSet<Relationship>) => {
|
|
23
23
|
connectedNodes: Record<string, Node>;
|
|
24
24
|
connectedRels: Record<string, Relationship>;
|
|
25
25
|
};
|
|
@@ -31,7 +31,7 @@ export declare const recordCollector: (graphElements: NestedGraphElements[]) =>
|
|
|
31
31
|
*
|
|
32
32
|
* @see {@link https://neo4j.com/docs/api/javascript-driver/current/class/lib6/result-transformers.js~ResultTransformers.html|ResultTransformers on Neo4j JS Driver API Docs}
|
|
33
33
|
*/
|
|
34
|
-
export declare const nvlResultTransformer: import("neo4j-driver-core
|
|
34
|
+
export declare const nvlResultTransformer: import("neo4j-driver-core").ResultTransformer<{
|
|
35
35
|
/** The nodes of the graph. */
|
|
36
36
|
nodes: NvlNode[];
|
|
37
37
|
/** The relationships of the graph. */
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@neo4j-nvl/base",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.1.0-17f2ef68",
|
|
4
4
|
"license": "SEE LICENSE IN 'LICENSE.txt'",
|
|
5
5
|
"homepage": "https://neo4j.com/docs/nvl/current/",
|
|
6
6
|
"description": "Base library for the Neo4j Visualization Library",
|
|
@@ -29,34 +29,35 @@
|
|
|
29
29
|
"postpack": "rm LICENSE.txt && rm CHANGELOG.md"
|
|
30
30
|
},
|
|
31
31
|
"dependencies": {
|
|
32
|
-
"@neo4j-nvl/layout-workers": "1.
|
|
33
|
-
"@segment/analytics-next": "
|
|
34
|
-
"color-string": "
|
|
35
|
-
"d3-force": "
|
|
36
|
-
"gl-matrix": "
|
|
37
|
-
"glsl-inject-defines": "
|
|
38
|
-
"lodash": "4.
|
|
39
|
-
"loglevel": "
|
|
40
|
-
"mobx": "
|
|
41
|
-
"node-pid-controller": "
|
|
42
|
-
"resizelistener": "
|
|
32
|
+
"@neo4j-nvl/layout-workers": "1.1.0-17f2ef68",
|
|
33
|
+
"@segment/analytics-next": "1.81.1",
|
|
34
|
+
"color-string": "1.9.1",
|
|
35
|
+
"d3-force": "3.0.0",
|
|
36
|
+
"gl-matrix": "3.4.4",
|
|
37
|
+
"glsl-inject-defines": "1.0.3",
|
|
38
|
+
"lodash": "4.18.1",
|
|
39
|
+
"loglevel": "1.9.2",
|
|
40
|
+
"mobx": "3.6.2",
|
|
41
|
+
"node-pid-controller": "1.0.1",
|
|
42
|
+
"resizelistener": "1.1.0",
|
|
43
43
|
"tinycolor2": "1.6.0",
|
|
44
|
-
"uuid": "
|
|
44
|
+
"uuid": "8.3.2"
|
|
45
45
|
},
|
|
46
46
|
"devDependencies": {
|
|
47
|
-
"@babel/core": "
|
|
48
|
-
"@types/color-string": "
|
|
49
|
-
"@types/d3-force": "
|
|
50
|
-
"@types/lodash": "4.
|
|
47
|
+
"@babel/core": "7.28.5",
|
|
48
|
+
"@types/color-string": "1.5.5",
|
|
49
|
+
"@types/d3-force": "3.0.10",
|
|
50
|
+
"@types/lodash": "4.17.21",
|
|
51
51
|
"@types/segment-analytics": "0.0.38",
|
|
52
|
-
"@types/tinycolor2": "
|
|
53
|
-
"babel-loader": "
|
|
54
|
-
"copy-webpack-plugin": "
|
|
55
|
-
"neo4j-driver": "
|
|
56
|
-
"webpack": "
|
|
57
|
-
"webpack-cli": "
|
|
52
|
+
"@types/tinycolor2": "1.4.6",
|
|
53
|
+
"babel-loader": "8.4.1",
|
|
54
|
+
"copy-webpack-plugin": "11.0.0",
|
|
55
|
+
"neo4j-driver": "5.28.2",
|
|
56
|
+
"webpack": "5.104.1",
|
|
57
|
+
"webpack-cli": "5.1.4"
|
|
58
58
|
},
|
|
59
59
|
"peerDependencies": {
|
|
60
60
|
"neo4j-driver": "*"
|
|
61
|
-
}
|
|
61
|
+
},
|
|
62
|
+
"stableVersion": "1.1.0"
|
|
62
63
|
}
|
|
@@ -1,93 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* A class capable of measuring performance.
|
|
3
|
-
* Usage:
|
|
4
|
-
* When you want to measure a block of code, start by calling
|
|
5
|
-
* performanceTesterInstance.startTest() or
|
|
6
|
-
* performanceTesterInstance.startTest('Some readable name') if you
|
|
7
|
-
* want to control how it prints.
|
|
8
|
-
* After the block of code ends, call performanceTesterInstance.endTest()
|
|
9
|
-
*/
|
|
10
|
-
export default class PerformanceTester {
|
|
11
|
-
disabled: boolean;
|
|
12
|
-
tree: PerformanceTree;
|
|
13
|
-
/**
|
|
14
|
-
* Starts a performance measurement. Every call to this method must be followed
|
|
15
|
-
* by a call to endTest(). Tests can be nested.
|
|
16
|
-
* @param {String} measurement String identifying this measurement. Only used for printing, so
|
|
17
|
-
* keep it human readable.
|
|
18
|
-
*/
|
|
19
|
-
startTest(measurement: string): void;
|
|
20
|
-
/**
|
|
21
|
-
* Ends the last started test, giving it an end time.
|
|
22
|
-
*/
|
|
23
|
-
endTest(): void;
|
|
24
|
-
/**
|
|
25
|
-
* Clears all performance measurements
|
|
26
|
-
*/
|
|
27
|
-
reset(): void;
|
|
28
|
-
/**
|
|
29
|
-
* Prints all the performance measurements to console by calling
|
|
30
|
-
* print() on the performance tree.
|
|
31
|
-
*/
|
|
32
|
-
print(): void;
|
|
33
|
-
}
|
|
34
|
-
/**
|
|
35
|
-
* A tree of PerformanceTreeNodes.
|
|
36
|
-
* @type {PerformanceTree}
|
|
37
|
-
*/
|
|
38
|
-
declare class PerformanceTree {
|
|
39
|
-
root: any;
|
|
40
|
-
current: any;
|
|
41
|
-
/**
|
|
42
|
-
* Empties the tree.
|
|
43
|
-
*/
|
|
44
|
-
clear(): void;
|
|
45
|
-
/**
|
|
46
|
-
* Adds a new node to the tree at the current open position, containing the
|
|
47
|
-
* data provided. It also sets the newly added node as the currently open one.
|
|
48
|
-
* @param {PerformanceData} data A PerformanceData object.
|
|
49
|
-
*/
|
|
50
|
-
add(data: PerformanceData): void;
|
|
51
|
-
/**
|
|
52
|
-
* The tree always maintains a pointer to the currently open node. This
|
|
53
|
-
* method closes that node, closes the data object in contains, and opens
|
|
54
|
-
* the parent node.
|
|
55
|
-
*/
|
|
56
|
-
close(): void;
|
|
57
|
-
/**
|
|
58
|
-
* Gets the data object of the currently open node.
|
|
59
|
-
* @return {PerformanceData} The data object of the currently open node.
|
|
60
|
-
*/
|
|
61
|
-
getCurrentData(): PerformanceData;
|
|
62
|
-
/**
|
|
63
|
-
* Prints this entire tree to the console.
|
|
64
|
-
*/
|
|
65
|
-
print(): void;
|
|
66
|
-
}
|
|
67
|
-
/**
|
|
68
|
-
* Performance measurement data.
|
|
69
|
-
* @type {PerformanceData}
|
|
70
|
-
*/
|
|
71
|
-
declare class PerformanceData {
|
|
72
|
-
/**
|
|
73
|
-
* Instantiates a data measurement, giving it the start time when constructor is called.
|
|
74
|
-
* Remember that you also have to call close on this object to make it valid.
|
|
75
|
-
* @param {String} name String identifying this measurement. Only used for printing, so
|
|
76
|
-
* keep it human readable.
|
|
77
|
-
* @return {PerformanceData} The data object
|
|
78
|
-
*/
|
|
79
|
-
constructor(name: string);
|
|
80
|
-
name: any;
|
|
81
|
-
startTime: any;
|
|
82
|
-
endTime: any;
|
|
83
|
-
/**
|
|
84
|
-
* Sets the endTime measurement on this data object.
|
|
85
|
-
*/
|
|
86
|
-
close(): void;
|
|
87
|
-
/**
|
|
88
|
-
* Gets the time spent on this measurement
|
|
89
|
-
* @return {Number} Time spent in ms
|
|
90
|
-
*/
|
|
91
|
-
_timeSpent(): number;
|
|
92
|
-
}
|
|
93
|
-
export {};
|