@neo4j-nvl/base 0.3.9 → 1.0.0-2fc8e9f4
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 +20 -0
- package/dist/base.mjs +1 -1
- package/dist/types/index.d.ts +89 -76
- package/dist/types/layouts/animatedlayout/animationUtils.d.ts +3 -3
- package/dist/types/layouts/circularLayout/CircularLayout.d.ts +18 -0
- package/dist/types/layouts/d3forcelayout/circularLayout.test.d.ts +1 -0
- package/dist/types/layouts/forcedirectedlayout/physlayout/PhysLayout.d.ts +19 -19
- package/dist/types/modules/CallbackHelper.d.ts +5 -5
- package/dist/types/modules/ExternalCallbackHandler.d.ts +7 -0
- package/dist/types/modules/NvlController.d.ts +6 -5
- package/dist/types/modules/dataset.d.ts +1 -1
- package/dist/types/modules/state/state.d.ts +2 -2
- package/dist/types/modules/state/types.d.ts +61 -55
- package/dist/types/modules/state/utils.d.ts +8 -6
- package/dist/types/renderers/canvasrenderer/Animation.d.ts +8 -11
- package/dist/types/renderers/canvasrenderer/AnimationHandler.d.ts +15 -16
- package/dist/types/renderers/canvasrenderer/CanvasRenderer.d.ts +10 -10
- package/dist/types/renderers/canvasrenderer/arrows/ArrowBundle.d.ts +15 -15
- package/dist/types/renderers/canvasrenderer/arrows/ArrowBundler.d.ts +8 -8
- package/dist/types/renderers/canvasrenderer/arrows/arrows.d.ts +26 -26
- package/dist/types/renderers/canvasrenderer/nodes/nodes.d.ts +9 -9
- package/dist/types/renderers/canvasrenderer/types.d.ts +6 -4
- package/dist/types/renderers/canvasrenderer/util.d.ts +20 -21
- package/dist/types/renderers/canvasrenderer/wordwrap.d.ts +13 -13
- package/dist/types/types/graph-element.d.ts +15 -6
- package/dist/types/utils/canvasManagement.d.ts +2 -1
- package/dist/types/utils/circularUtils.d.ts +3 -0
- package/dist/types/utils/circularUtils.test.d.ts +1 -0
- package/dist/types/utils/colorUtils.d.ts +3 -3
- package/dist/types/utils/constants.d.ts +3 -3
- package/dist/types/utils/errors.d.ts +2 -1
- package/dist/types/utils/geometry.d.ts +31 -30
- package/dist/types/utils/graphObjectUtils.d.ts +3 -3
- package/dist/types/utils/hittest.d.ts +2 -0
- package/dist/types/utils/jsDriverResultTransformer.d.ts +13 -6
- package/dist/types/utils/segmentAnalytics.d.ts +8 -8
- package/dist/types/utils/zoomFunctions.d.ts +30 -23
- package/package.json +5 -4
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import type { LogLevelDesc } from 'loglevel';
|
|
2
2
|
import type { WaypointPath } from '../../renderers/canvasrenderer/types';
|
|
3
|
+
import type { Node } from '../../types/graph-element';
|
|
3
4
|
import type { ExternalCallbacks } from '../ExternalCallbackHandler';
|
|
4
5
|
import type { NodeDataSet, RelationshipDataSet } from '../dataset';
|
|
5
6
|
type RingStyle = {
|
|
@@ -18,6 +19,7 @@ export type BorderStyle = {
|
|
|
18
19
|
};
|
|
19
20
|
/**
|
|
20
21
|
* @internal
|
|
22
|
+
* @hidden
|
|
21
23
|
*/
|
|
22
24
|
export type BorderStyles = {
|
|
23
25
|
selected: BorderStyle;
|
|
@@ -25,6 +27,7 @@ export type BorderStyles = {
|
|
|
25
27
|
};
|
|
26
28
|
/**
|
|
27
29
|
* @internal
|
|
30
|
+
* @hidden
|
|
28
31
|
*/
|
|
29
32
|
export type DisabledItemStyles = {
|
|
30
33
|
color: string;
|
|
@@ -35,25 +38,25 @@ export type DisabledItemStyles = {
|
|
|
35
38
|
*/
|
|
36
39
|
export interface ForceDirectedOptions {
|
|
37
40
|
/**
|
|
38
|
-
*
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
* @
|
|
41
|
+
* Enables a workaround for Intel GPU compatibility issues in WebGL shader compilation.
|
|
42
|
+
* When enabled, this flag modifies how physics simulation shaders are compiled to avoid
|
|
43
|
+
* rendering problems on Intel graphics hardware.
|
|
44
|
+
*
|
|
45
|
+
* @remarks Requires a restart of NVL as shaders need to be recompiled.
|
|
43
46
|
*/
|
|
44
47
|
intelWorkaround?: boolean;
|
|
45
48
|
/**
|
|
46
|
-
*
|
|
49
|
+
* Whether to enable automatic switching to CoseBilkent layout for small graphs.
|
|
50
|
+
* When enabled, small graphs will automatically use the CoseBilkent layout algorithm
|
|
51
|
+
* which can provide better initial positioning for smaller datasets.
|
|
47
52
|
*/
|
|
48
53
|
enableCytoscape?: boolean;
|
|
49
54
|
/**
|
|
55
|
+
* Wether to use the new physics engine instead of the legacy one.
|
|
56
|
+
* @defaultValue true
|
|
50
57
|
* @internal
|
|
51
58
|
*/
|
|
52
59
|
enableVerlet?: boolean;
|
|
53
|
-
/**
|
|
54
|
-
* @internal
|
|
55
|
-
*/
|
|
56
|
-
simulationStopVelocity?: number;
|
|
57
60
|
}
|
|
58
61
|
/**
|
|
59
62
|
* The options for the hierarchical layout
|
|
@@ -66,35 +69,63 @@ export interface HierarchicalOptions {
|
|
|
66
69
|
}
|
|
67
70
|
export declare const isHierarchicalLayoutOptions: (options: LayoutOptions) => options is HierarchicalOptions;
|
|
68
71
|
/**
|
|
69
|
-
* The
|
|
72
|
+
* The options for the circular layout.
|
|
73
|
+
*/
|
|
74
|
+
export interface CircularOptions {
|
|
75
|
+
/**
|
|
76
|
+
* Function which should return the sorted nodes.
|
|
77
|
+
*/
|
|
78
|
+
sortFunction?: (nodes: Node[]) => Node[];
|
|
79
|
+
}
|
|
80
|
+
/**
|
|
81
|
+
* NVL's main force directed layout.
|
|
70
82
|
*/
|
|
71
83
|
export declare const ForceDirectedLayoutType = "forceDirected";
|
|
72
84
|
/**
|
|
73
|
-
*
|
|
85
|
+
* A hierarchical layout using the dagre algorithm.
|
|
74
86
|
*/
|
|
75
87
|
export declare const HierarchicalLayoutType = "hierarchical";
|
|
76
88
|
/**
|
|
77
|
-
*
|
|
78
|
-
* @internal
|
|
89
|
+
* A basic grid layout.
|
|
79
90
|
*/
|
|
80
91
|
export declare const GridLayoutType = "grid";
|
|
81
92
|
/**
|
|
82
|
-
*
|
|
83
|
-
* @internal
|
|
93
|
+
* A free layout that allows for arbitrary positioning of elements using NVL's setPosition method.
|
|
84
94
|
*/
|
|
85
95
|
export declare const FreeLayoutType = "free";
|
|
86
96
|
/**
|
|
87
|
-
* The
|
|
88
|
-
* @internal
|
|
97
|
+
* The commonly used d3-force layout.
|
|
89
98
|
*/
|
|
90
99
|
export declare const d3ForceLayoutType = "d3Force";
|
|
100
|
+
/**
|
|
101
|
+
* A basic circular layout.
|
|
102
|
+
* @experimental
|
|
103
|
+
*/
|
|
104
|
+
export declare const CircularLayoutType = "circular";
|
|
105
|
+
/**
|
|
106
|
+
* A WebGL renderer that uses the GPU for rendering.
|
|
107
|
+
*
|
|
108
|
+
* @remarks
|
|
109
|
+
* This renderer has better performance than the canvas renderer,
|
|
110
|
+
* but does not support captions and arrowheads.
|
|
111
|
+
*/
|
|
91
112
|
export declare const WebGLRendererType = "webgl";
|
|
113
|
+
/**
|
|
114
|
+
* A renderer using canvas.
|
|
115
|
+
*
|
|
116
|
+
* @remarks
|
|
117
|
+
* This renderer has lower performance than the WebGL renderer,
|
|
118
|
+
* but supports captions and arrowheads.
|
|
119
|
+
*/
|
|
92
120
|
export declare const CanvasRendererType = "canvas";
|
|
93
121
|
/**
|
|
94
122
|
* The different types of layouts available
|
|
95
123
|
*/
|
|
96
|
-
export type Layout = typeof ForceDirectedLayoutType | typeof HierarchicalLayoutType | typeof GridLayoutType | typeof FreeLayoutType | typeof d3ForceLayoutType;
|
|
97
|
-
|
|
124
|
+
export type Layout = typeof ForceDirectedLayoutType | typeof HierarchicalLayoutType | typeof GridLayoutType | typeof FreeLayoutType | typeof d3ForceLayoutType | typeof CircularLayoutType;
|
|
125
|
+
/**
|
|
126
|
+
* The options for the layout.
|
|
127
|
+
*/
|
|
128
|
+
export type LayoutOptions = ForceDirectedOptions | HierarchicalOptions | CircularOptions;
|
|
98
129
|
/**
|
|
99
130
|
* The different types of renderers available
|
|
100
131
|
*/
|
|
@@ -102,7 +133,6 @@ export type Renderer = typeof WebGLRendererType | typeof CanvasRendererType;
|
|
|
102
133
|
/** Configurations for a NVL instance */
|
|
103
134
|
export interface NvlOptions {
|
|
104
135
|
/**
|
|
105
|
-
* @internal
|
|
106
136
|
* Id for uniquely identifying the instance of Nvl
|
|
107
137
|
*/
|
|
108
138
|
instanceId?: string;
|
|
@@ -128,19 +158,13 @@ export interface NvlOptions {
|
|
|
128
158
|
* @defaultValue true
|
|
129
159
|
*/
|
|
130
160
|
allowDynamicMinZoom?: boolean;
|
|
131
|
-
/**
|
|
132
|
-
* @internal
|
|
133
|
-
* @deprecated
|
|
134
|
-
* The DOM element in which to render the graph visualization
|
|
135
|
-
*/
|
|
136
|
-
frame?: HTMLElement;
|
|
137
161
|
/**
|
|
138
162
|
* The DOM container in which to render the minimap.
|
|
139
163
|
*
|
|
140
|
-
* @
|
|
164
|
+
* @remarks When using a React ref, make sure the attached element is rendered before the NVL instance is created.
|
|
141
165
|
* Otherwise, the minimap will not be displayed.
|
|
142
166
|
*/
|
|
143
|
-
minimapContainer?: HTMLElement;
|
|
167
|
+
minimapContainer?: HTMLElement | null;
|
|
144
168
|
/** Configuration for the current layout */
|
|
145
169
|
layoutOptions?: LayoutOptions;
|
|
146
170
|
/** X-coordinate for panning of the current viewport */
|
|
@@ -149,12 +173,6 @@ export interface NvlOptions {
|
|
|
149
173
|
panY?: number;
|
|
150
174
|
/** Zoom value of the current viewport */
|
|
151
175
|
initialZoom?: number;
|
|
152
|
-
/**
|
|
153
|
-
* @deprecated use {@link renderer} instead
|
|
154
|
-
* Whether to user the Canvas or WebGL renderer
|
|
155
|
-
* Will be ignored when {@link renderer} is set
|
|
156
|
-
*/
|
|
157
|
-
useWebGL?: boolean;
|
|
158
176
|
/**
|
|
159
177
|
* What renderer to use
|
|
160
178
|
* Possible values are 'webgl' or 'canvas'
|
|
@@ -165,11 +183,13 @@ export interface NvlOptions {
|
|
|
165
183
|
renderer?: Renderer;
|
|
166
184
|
/**
|
|
167
185
|
* @internal
|
|
186
|
+
* @hidden
|
|
168
187
|
* Whether or not to disable WebGL completely.
|
|
169
188
|
*/
|
|
170
189
|
disableWebGL?: boolean;
|
|
171
190
|
/**
|
|
172
191
|
* @internal
|
|
192
|
+
* @hidden
|
|
173
193
|
* Specify the log level.
|
|
174
194
|
*/
|
|
175
195
|
logging?: {
|
|
@@ -177,11 +197,16 @@ export interface NvlOptions {
|
|
|
177
197
|
};
|
|
178
198
|
/**
|
|
179
199
|
* @internal
|
|
200
|
+
* @hidden
|
|
180
201
|
*/
|
|
181
202
|
relationshipThreshold?: number;
|
|
203
|
+
/** Callbacks for various events in the NVL instance. */
|
|
182
204
|
callbacks?: ExternalCallbacks;
|
|
205
|
+
/** Styling options for the NVL instance. */
|
|
183
206
|
styling?: {
|
|
207
|
+
/** The default color for nodes. */
|
|
184
208
|
defaultNodeColor?: string;
|
|
209
|
+
/** The default color for relationships. */
|
|
185
210
|
defaultRelationshipColor?: string;
|
|
186
211
|
/** The color to use for the default border of nodes */
|
|
187
212
|
nodeDefaultBorderColor?: string;
|
|
@@ -198,28 +223,9 @@ export interface NvlOptions {
|
|
|
198
223
|
/** The color to use for the viewport box in the minimap */
|
|
199
224
|
minimapViewportBoxColor?: string;
|
|
200
225
|
};
|
|
201
|
-
/**
|
|
202
|
-
* The color to use for the default border of nodes
|
|
203
|
-
* @deprecated Use {@link styling.nodeDefaultBorderColor} instead
|
|
204
|
-
*/
|
|
205
|
-
nodeDefaultBorderColor?: string;
|
|
206
|
-
/**
|
|
207
|
-
* The color to use for the selected border of nodes
|
|
208
|
-
* @deprecated Use {@link styling.selectedBorderColor} instead
|
|
209
|
-
*/
|
|
210
|
-
selectedBorderColor?: string;
|
|
211
|
-
/**
|
|
212
|
-
* The color to use for the disabled nodes and relationships
|
|
213
|
-
* @deprecated Use {@link styling.disabledItemColor} instead
|
|
214
|
-
*/
|
|
215
|
-
disabledItemColor?: string;
|
|
216
|
-
/**
|
|
217
|
-
* The color to use for the labels of the disabled nodes and relationships
|
|
218
|
-
* @deprecated Use {@link styling.disabledItemFontColor} instead
|
|
219
|
-
*/
|
|
220
|
-
disabledItemFontColor?: string;
|
|
221
226
|
/**
|
|
222
227
|
* @internal
|
|
228
|
+
* @hidden
|
|
223
229
|
* Defines a time limit for how long layout iterations may run
|
|
224
230
|
*/
|
|
225
231
|
layoutTimeLimit?: number;
|
|
@@ -1,10 +1,12 @@
|
|
|
1
|
+
import type { StyledCaption } from '../../renderers/canvasrenderer/types';
|
|
2
|
+
import type { Node, Relationship } from '../../types/graph-element';
|
|
1
3
|
import type { NvlOptions } from './types';
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
4
|
+
/**
|
|
5
|
+
* Converts a {@link Node.caption} string to {@link Node.captions} array format.
|
|
6
|
+
* If both caption and captions are provided, captions takes precedence.
|
|
7
|
+
*/
|
|
8
|
+
export declare const processCaptions: (item: Partial<Node | Relationship>) => StyledCaption[];
|
|
9
|
+
export declare const processColorStyles: (styling: NvlOptions['styling']) => {
|
|
8
10
|
nodeBorderStyles: {
|
|
9
11
|
default: {
|
|
10
12
|
rings?: {
|
|
@@ -24,40 +24,37 @@ export declare class Animation {
|
|
|
24
24
|
private hasNextAnimation;
|
|
25
25
|
/**
|
|
26
26
|
* Constructor
|
|
27
|
-
* @param
|
|
28
|
-
* @param
|
|
27
|
+
* @param elementId - The id of the element to animate.
|
|
28
|
+
* @param startValue - The start value of the animation.
|
|
29
29
|
*/
|
|
30
30
|
constructor(elementId: string, startValue: number);
|
|
31
31
|
/**
|
|
32
|
-
* Sets the duration of the animation
|
|
33
|
-
* @param
|
|
34
|
-
* @returns {void}
|
|
32
|
+
* Sets the duration of the animation.
|
|
33
|
+
* @param duration - The duration of the animation.
|
|
35
34
|
* @public
|
|
36
35
|
*/
|
|
37
36
|
setDuration(duration: number): void;
|
|
38
37
|
/**
|
|
39
38
|
* Returns the status of the animation
|
|
40
|
-
* @returns
|
|
39
|
+
* @returns The status of the animation.
|
|
41
40
|
* @public
|
|
42
41
|
*/
|
|
43
42
|
getStatus(): number;
|
|
44
43
|
/**
|
|
45
44
|
* Advances the animation to the next frame
|
|
46
|
-
* @returns
|
|
45
|
+
* @returns True if there is a next animation, false otherwise.
|
|
47
46
|
* @public
|
|
48
47
|
*/
|
|
49
48
|
advance(): boolean;
|
|
50
49
|
/**
|
|
51
50
|
* Sets the end value of the animation
|
|
52
|
-
* @param
|
|
53
|
-
* @returns {void}
|
|
51
|
+
* @param targetValue - The end value of the animation.
|
|
54
52
|
* @public
|
|
55
53
|
*/
|
|
56
54
|
setEndValue(targetValue: number): void;
|
|
57
55
|
/**
|
|
58
56
|
* Sets the end time of the animation
|
|
59
|
-
* @param
|
|
60
|
-
* @returns {void}
|
|
57
|
+
* @param newEndTime - The end time of the animation.
|
|
61
58
|
* @private
|
|
62
59
|
*/
|
|
63
60
|
private setEndTime;
|
|
@@ -18,18 +18,18 @@ export default class AnimationHandler {
|
|
|
18
18
|
constructor();
|
|
19
19
|
/**
|
|
20
20
|
* Main function run once per frame to advance all animations
|
|
21
|
-
* @returns
|
|
21
|
+
* @returns True if any animation is still running.
|
|
22
22
|
*/
|
|
23
23
|
advance(): boolean;
|
|
24
24
|
/**
|
|
25
25
|
* Sets a flag if animations should be ignored.
|
|
26
26
|
* If set to true all animations always return their end value.
|
|
27
|
-
* @param
|
|
27
|
+
* @param shouldIgnore - Whether animations should be ignored.
|
|
28
28
|
*/
|
|
29
29
|
ignoreAnimations(shouldIgnore: boolean): void;
|
|
30
30
|
/**
|
|
31
31
|
* Sets the duration for all animations
|
|
32
|
-
* @param
|
|
32
|
+
* @param options - An object containing animation durations for fade and size.
|
|
33
33
|
*/
|
|
34
34
|
setOptions(options: {
|
|
35
35
|
fadeDuration: number;
|
|
@@ -37,14 +37,13 @@ export default class AnimationHandler {
|
|
|
37
37
|
}): void;
|
|
38
38
|
/**
|
|
39
39
|
* Returns whether any animation is running
|
|
40
|
-
* @returns
|
|
41
|
-
*/
|
|
40
|
+
* @returns */
|
|
42
41
|
needsToRun(): boolean;
|
|
43
42
|
/**
|
|
44
43
|
* Returns the current value of an animation
|
|
45
|
-
* @param
|
|
46
|
-
* @param
|
|
47
|
-
* @returns
|
|
44
|
+
* @param elementId - The id of the element the animation is running on.
|
|
45
|
+
* @param name - The name of the animation.
|
|
46
|
+
* @returns The current value of the animation.
|
|
48
47
|
*/
|
|
49
48
|
getValueForAnimationName(elementId: string, name: string, target: number, type?: number): number;
|
|
50
49
|
private createAnimation;
|
|
@@ -53,20 +52,20 @@ export default class AnimationHandler {
|
|
|
53
52
|
* Creates a new size animation for the given element and name.
|
|
54
53
|
* If an animation already exists for the given element and name, it will be returned.
|
|
55
54
|
* If not, a new animation will be created.
|
|
56
|
-
* @param
|
|
57
|
-
* @param
|
|
58
|
-
* @param
|
|
59
|
-
* @returns
|
|
55
|
+
* @param currentValue - The current value of the animation.
|
|
56
|
+
* @param elementId - The id of the element to animate.
|
|
57
|
+
* @param name - The name of the animation.
|
|
58
|
+
* @returns The animation.
|
|
60
59
|
*/
|
|
61
60
|
private createFadeAnimation;
|
|
62
61
|
/**
|
|
63
62
|
* Creates a new fade animation for the given element and name.
|
|
64
63
|
* If an animation already exists for the given element and name, it will be returned.
|
|
65
64
|
* If not, a new animation will be created.
|
|
66
|
-
* @param
|
|
67
|
-
* @param
|
|
68
|
-
* @param
|
|
69
|
-
* @returns
|
|
65
|
+
* @param currentValue - The current value of the animation.
|
|
66
|
+
* @param elementId - The id of the element to animate.
|
|
67
|
+
* @param name - The name of the animation.
|
|
68
|
+
* @returns The animation.
|
|
70
69
|
*/
|
|
71
70
|
private createSizeAnimation;
|
|
72
71
|
}
|
|
@@ -30,7 +30,7 @@ export default class CanvasRenderer {
|
|
|
30
30
|
});
|
|
31
31
|
/**
|
|
32
32
|
* Checks if the renderer needs to run.
|
|
33
|
-
* @returns
|
|
33
|
+
* @returns Whether the renderer needs to run.
|
|
34
34
|
*/
|
|
35
35
|
needsToRun(): boolean;
|
|
36
36
|
/**
|
|
@@ -55,26 +55,26 @@ export default class CanvasRenderer {
|
|
|
55
55
|
private renderRelationships;
|
|
56
56
|
/**
|
|
57
57
|
* Returns the nodes at the pointer position
|
|
58
|
-
* @param
|
|
59
|
-
* @returns
|
|
58
|
+
* @param pointer - The position of the pointer.
|
|
59
|
+
* @returns The nodes at the pointer position.
|
|
60
60
|
* @todo Sort nodes by distance descending
|
|
61
61
|
*/
|
|
62
62
|
getNodesAt(pointer: Point, hitNodeMarginWidth?: number): HitTargetNode[];
|
|
63
63
|
/**
|
|
64
64
|
* Returns the relationships at the pointer position
|
|
65
|
-
* @param
|
|
66
|
-
* @returns
|
|
65
|
+
* @param pointer - The position of the pointer.
|
|
66
|
+
* @returns The relationships at the pointer position.
|
|
67
67
|
* @todo: sort relationships by distance descending
|
|
68
68
|
*/
|
|
69
69
|
getRelsAt(pointer: Point): HitTargetRelationship[];
|
|
70
70
|
destroy(): void;
|
|
71
71
|
/**
|
|
72
72
|
* Checks if the bounding box is outside of the screen.
|
|
73
|
-
* @param boundingBox - The bounding box to check
|
|
74
|
-
* @param clientWidth - The client width of the canvas
|
|
75
|
-
* @param clientHeight - The client height of the canvas
|
|
76
|
-
* @returns Whether the bounding box is off screen
|
|
77
|
-
* @
|
|
73
|
+
* @param boundingBox - The bounding box to check.
|
|
74
|
+
* @param clientWidth - The client width of the canvas.
|
|
75
|
+
* @param clientHeight - The client height of the canvas.
|
|
76
|
+
* @returns Whether the bounding box is off screen.
|
|
77
|
+
* @remarks This check doesn't catch all items that are off screen but its simple and removes many of them
|
|
78
78
|
*/
|
|
79
79
|
private isBoundingBoxOffScreen;
|
|
80
80
|
/**
|
|
@@ -20,60 +20,60 @@ export default class ArrowBundle {
|
|
|
20
20
|
angles: number[];
|
|
21
21
|
labelInfo: Record<string, LabelGeometry>;
|
|
22
22
|
/**
|
|
23
|
-
* @param
|
|
24
|
-
* @param
|
|
25
|
-
* @param
|
|
23
|
+
* @param key - The key of the arrow bundle.
|
|
24
|
+
* @param fromId - The source node of the arrow bundle.
|
|
25
|
+
* @param toId - The target node of the arrow bundle.
|
|
26
26
|
*/
|
|
27
27
|
constructor(key: string, fromId: string, toId: string);
|
|
28
28
|
/**
|
|
29
29
|
* Insert a new arrow to the bundle
|
|
30
|
-
* @param
|
|
30
|
+
* @param rel - The relationship to insert.
|
|
31
31
|
*/
|
|
32
32
|
insert(rel: Relationship): void;
|
|
33
33
|
setLabelInfo(relId: string, labelInfo: LabelGeometry): void;
|
|
34
34
|
has({ id }: Relationship): boolean;
|
|
35
35
|
/**
|
|
36
36
|
* Remove an arrow from the bundle
|
|
37
|
-
* @param
|
|
37
|
+
* @param rel - The arrow to remove.
|
|
38
38
|
*/
|
|
39
39
|
remove({ id }: Relationship): void;
|
|
40
40
|
/**
|
|
41
41
|
* Get the size of the arrow bundle
|
|
42
|
-
* @returns
|
|
42
|
+
* @returns The size of the arrow bundle.
|
|
43
43
|
*/
|
|
44
44
|
size(): number;
|
|
45
45
|
relArray(): Relationship[];
|
|
46
46
|
/**
|
|
47
47
|
* Get the maximum font size of the arrows in the bundle
|
|
48
|
-
* @returns
|
|
48
|
+
* @returns The maximum font size of the arrows in the bundle.
|
|
49
49
|
*/
|
|
50
50
|
maxFontSize(): number;
|
|
51
51
|
/**
|
|
52
52
|
* Check if relationship is in opposite direction to the bundle.
|
|
53
|
-
* @param
|
|
54
|
-
* @returns
|
|
53
|
+
* @param rel - The relationship to check.
|
|
54
|
+
* @returns True if the relationship is in opposite direction to the bundle.
|
|
55
55
|
*/
|
|
56
56
|
relIsOppositeDirection({ from, to }: Relationship): boolean;
|
|
57
57
|
/**
|
|
58
58
|
* Get the index of a given arrow in the bundle
|
|
59
|
-
* @param
|
|
60
|
-
* @returns
|
|
59
|
+
* @param rel - The arrow to look for.
|
|
60
|
+
* @returns The index of the arrow in the bundle, or -1 if not found.
|
|
61
61
|
*/
|
|
62
62
|
indexOf({ id }: Relationship): number;
|
|
63
63
|
/**
|
|
64
64
|
* Get the arrow at a given index in the bundle
|
|
65
|
-
* @param
|
|
66
|
-
* @returns
|
|
65
|
+
* @param index - The index of the arrow to get.
|
|
66
|
+
* @returns The arrow at the given index.
|
|
67
67
|
*/
|
|
68
68
|
getRel(index: number): Relationship | null;
|
|
69
69
|
/**
|
|
70
70
|
* Set the waypoints for the arrow bundle
|
|
71
|
-
* @param
|
|
71
|
+
* @param waypoints - The waypoints for the arrow bundle.
|
|
72
72
|
*/
|
|
73
73
|
setWaypoints(waypoints: WaypointPath): void;
|
|
74
74
|
/**
|
|
75
75
|
* Set the angles for the arrow bundle
|
|
76
|
-
* @param
|
|
76
|
+
* @param angles - The angles for the arrow bundle.
|
|
77
77
|
*/
|
|
78
78
|
setAngles(angles: number[]): void;
|
|
79
79
|
}
|
|
@@ -7,15 +7,15 @@ export default class ArrowBundler {
|
|
|
7
7
|
constructor(rels: Relationship[], waypoints: Record<string, WaypointPath>);
|
|
8
8
|
/**
|
|
9
9
|
* Get the arrow bundle for a given relation
|
|
10
|
-
* @param
|
|
11
|
-
* @returns
|
|
10
|
+
* @param rel - The relationship.
|
|
11
|
+
* @returns The arrow bundle.
|
|
12
12
|
*/
|
|
13
13
|
getBundle(rel: Relationship): ArrowBundle;
|
|
14
14
|
/**
|
|
15
15
|
* Update the data
|
|
16
|
-
* @param
|
|
17
|
-
* @param
|
|
18
|
-
* @param
|
|
16
|
+
* @param addedRels - The added relations.
|
|
17
|
+
* @param removedRels - The removed relations.
|
|
18
|
+
* @param waypoints - The waypoints.
|
|
19
19
|
*/
|
|
20
20
|
updateData(addedRels: Record<string, Relationship>, removedRels: Record<string, Relationship>, updatedRels: Record<string, Relationship>, waypoints: Record<string, WaypointPath>): void;
|
|
21
21
|
/**
|
|
@@ -25,9 +25,9 @@ export default class ArrowBundler {
|
|
|
25
25
|
updatePositions(positionMap: Record<string, Node>): void;
|
|
26
26
|
/**
|
|
27
27
|
* Get a unique ID for a pair of IDs
|
|
28
|
-
* @param
|
|
29
|
-
* @param
|
|
30
|
-
* @returns
|
|
28
|
+
* @param id1 - The first ID.
|
|
29
|
+
* @param id2 - The second ID.
|
|
30
|
+
* @returns A unique ID for the pair of IDs.
|
|
31
31
|
*/
|
|
32
32
|
private generatePairId;
|
|
33
33
|
}
|
|
@@ -5,9 +5,9 @@ import type ImageCache from '../ImageCache';
|
|
|
5
5
|
import type ArrowBundle from './ArrowBundle';
|
|
6
6
|
/**
|
|
7
7
|
* This function calculates the difference in radius between two nodes.
|
|
8
|
-
* @param
|
|
9
|
-
* @param
|
|
10
|
-
* @returns
|
|
8
|
+
* @param toArrowGap - The gap between the node and the arrow on the to side.
|
|
9
|
+
* @param fromArrowGap - The gap between the node and the arrow on the from side.
|
|
10
|
+
* @returns The difference in radius between the two nodes.
|
|
11
11
|
* @comment can be affected for example by the label crust and selected ring
|
|
12
12
|
* as well as a gap between the node and the arrow on it's side.
|
|
13
13
|
*/
|
|
@@ -16,26 +16,26 @@ export declare const getRadiusDifference: (toArrowGap: number, fromArrowGap: num
|
|
|
16
16
|
* This function calculates the coordinates of the via point
|
|
17
17
|
* between two nodes. The via point is used to bend the edge
|
|
18
18
|
* between the two nodes.
|
|
19
|
-
* @param
|
|
20
|
-
* @param
|
|
21
|
-
* @param
|
|
22
|
-
* @param
|
|
23
|
-
* @returns
|
|
19
|
+
* @param fromNode - The node the edge starts from.
|
|
20
|
+
* @param toNode - The node the edge ends at.
|
|
21
|
+
* @param fromArrowGap - The gap between the node and the arrow on the from side.
|
|
22
|
+
* @param toArrowGap - The gap between the node and the arrow on the to side.
|
|
23
|
+
* @returns The coordinates of the via point.
|
|
24
24
|
*/
|
|
25
25
|
export declare const getViaCoordinates: (fromNode: Node, toNode: Node, fromArrowGap: number, toArrowGap: number, rel: Relationship, bundle: ArrowBundle) => Point;
|
|
26
26
|
export declare const getPointsForStraight: (rel: Relationship, bundle: ArrowBundle, fromNode: Node, toNode: Node, showLabel: boolean, curved?: boolean) => Point[];
|
|
27
27
|
/**
|
|
28
|
-
* Draws a label for a relationship
|
|
29
|
-
* @param
|
|
30
|
-
* @param
|
|
31
|
-
* @param
|
|
32
|
-
* @param
|
|
33
|
-
* @param
|
|
34
|
-
* @param
|
|
35
|
-
* @param
|
|
36
|
-
* @param
|
|
37
|
-
* @param
|
|
38
|
-
* @param
|
|
28
|
+
* Draws a label for a relationship.
|
|
29
|
+
* @param ctx - The canvas context.
|
|
30
|
+
* @param x - The x coordinate of the label.
|
|
31
|
+
* @param y - The y coordinate of the label.
|
|
32
|
+
* @param angle - The angle of the label.
|
|
33
|
+
* @param maxWidth - The maximum width of the label.
|
|
34
|
+
* @param rel - The relationship.
|
|
35
|
+
* @param bundle - The arrow bundle.
|
|
36
|
+
* @param disabledItemStyles - The styles for disabled items.
|
|
37
|
+
* @param fontColor - The color of the font.
|
|
38
|
+
* @param flip - Whether to flip the label.
|
|
39
39
|
*/
|
|
40
40
|
export declare const drawLabel: (ctx: CanvasRenderingContext2D, point: Point, angle: number, maxWidth: number, rel: Relationship, bundle: ArrowBundle, disabledItemStyles: DisabledItemStyles, fontColor: string, flip?: boolean) => void;
|
|
41
41
|
export declare const renderWaypointArrow: (ctx: CanvasRenderingContext2D, rel: Relationship, from: Node, to: Node, bundle: ArrowBundle, imageCache: ImageCache, showLabel: boolean, drawCurves: boolean, selectedBorderStyle: BorderStyle, disabledItemStyles: DisabledItemStyles, defaultRelationshipColor?: string) => void;
|
|
@@ -44,12 +44,12 @@ export declare const renderArrow: (ctx: CanvasRenderingContext2D, rel: Relations
|
|
|
44
44
|
export declare const distanceToEdge: (pos: Point, rel: Relationship, fromNode: Node, toNode: Node, bundle: ArrowBundle, showLabel: boolean, drawCurves?: boolean) => number;
|
|
45
45
|
/**
|
|
46
46
|
* Returns the bounding box of the arrow.
|
|
47
|
-
* @param
|
|
48
|
-
* @param
|
|
49
|
-
* @param
|
|
50
|
-
* @param
|
|
51
|
-
* @param
|
|
52
|
-
* @param
|
|
53
|
-
* @returns
|
|
47
|
+
* @param rel - The relationship to get the bounding box for.
|
|
48
|
+
* @param bundle - The arrow bundle the relationship is part of.
|
|
49
|
+
* @param fromNode - The node the relationship is coming from.
|
|
50
|
+
* @param toNode - The node the relationship is going to.
|
|
51
|
+
* @param showLabel - Whether or not a label is shown.
|
|
52
|
+
* @param drawCurves - Whether or the relationship is drawn as a curve.
|
|
53
|
+
* @returns The bounding box of the arrow.
|
|
54
54
|
*/
|
|
55
55
|
export declare const getBoundingBox: (rel: Relationship, bundle: ArrowBundle, fromNode: Node, toNode: Node, showLabel?: boolean, drawCurves?: boolean) => DOMRect | null;
|
|
@@ -11,17 +11,17 @@ type RingStyle = {
|
|
|
11
11
|
* If the node is selected, it returns the selectedStyle.rings array.
|
|
12
12
|
* If the node is not selected, it returns an array containing only one object with
|
|
13
13
|
* a width of 0 and an empty color.
|
|
14
|
-
* @param node
|
|
15
|
-
* @param animationHandler
|
|
16
|
-
* @param nodeBorderStyles
|
|
17
|
-
* @returns
|
|
14
|
+
* @param node - The node to get the ring styles for.
|
|
15
|
+
* @param animationHandler - The animation handler.
|
|
16
|
+
* @param nodeBorderStyles - The node border styles.
|
|
17
|
+
* @returns An array of ring styles.
|
|
18
18
|
*/
|
|
19
19
|
export declare const getRingStyles: (node: Node, animationHandler: AnimationHandler, nodeBorderStyles: any) => RingStyle[];
|
|
20
20
|
/**
|
|
21
21
|
* Returns the bounding box of a node with the given x, y, and size properties.
|
|
22
22
|
* If no size is given, the default size is used.
|
|
23
|
-
* @param
|
|
24
|
-
* @returns
|
|
23
|
+
* @param Node - The node to get the bounding box for.
|
|
24
|
+
* @returns The bounding box of the node.
|
|
25
25
|
*/
|
|
26
26
|
export declare const getBoundingBox: ({ x, y, size }: Node) => DOMRect;
|
|
27
27
|
/**
|
|
@@ -30,19 +30,19 @@ export declare const getBoundingBox: ({ x, y, size }: Node) => DOMRect;
|
|
|
30
30
|
* @param infoLevel {number} - The info level.
|
|
31
31
|
* @param nodeRadius {number} - The radius of the node.
|
|
32
32
|
* @param captionSize {number} - The size of the caption.
|
|
33
|
-
* @returns
|
|
33
|
+
* @returns The font size.
|
|
34
34
|
*/
|
|
35
35
|
export declare const infoLevelToFontSize: (infoLevel: number, nodeRadius?: number, captionSize?: number, hasIcon?: boolean) => number;
|
|
36
36
|
/**
|
|
37
37
|
* Returns maximum length of lines
|
|
38
38
|
* @param lines {array} - The lines info
|
|
39
|
-
* @returns
|
|
39
|
+
* @returns The font size.
|
|
40
40
|
*/
|
|
41
41
|
export declare const findMaxLength: (lines: any[], ctx: CanvasRenderingContext2D, pixelRatio: number) => number;
|
|
42
42
|
/**
|
|
43
43
|
* Returns minimum length of lines
|
|
44
44
|
* @param lines {array} - The lines info
|
|
45
|
-
* @returns
|
|
45
|
+
* @returns The font size.
|
|
46
46
|
*/
|
|
47
47
|
export declare const findMinLength: (lines: any[], ctx: CanvasRenderingContext2D, pixelRatio: number) => any;
|
|
48
48
|
/**
|