@neo4j-nvl/base 0.3.3 → 0.3.4-34f121d2

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.
@@ -1,6 +1,6 @@
1
1
  import type { ExternalCallbacks } from './modules/ExternalCallbackHandler';
2
2
  import type { ForceDirectedOptions, HierarchicalOptions, Layout, LayoutOptions, NvlOptions, NvlState, Renderer, ZoomOptions } from './modules/state';
3
- import { ForceDirectedLayoutType, FreeLayoutType, GridLayoutType, HierarchicalLayoutType, d3ForceLayoutType } from './modules/state';
3
+ import { CanvasRendererType, ForceDirectedLayoutType, FreeLayoutType, GridLayoutType, HierarchicalLayoutType, WebGLRendererType, d3ForceLayoutType } from './modules/state';
4
4
  import type { StyledCaption } from './renderers/canvasrenderer/types';
5
5
  import { drawCircleBand } from './renderers/canvasrenderer/util';
6
6
  import type { Node, PartialNode, PartialRelationship, Relationship } from './types/graph-element';
@@ -21,32 +21,22 @@ interface NvlMouseEvent extends MouseEvent {
21
21
  * ```ts
22
22
  * import { NVL } from '@neo4j-nvl/base'
23
23
  *
24
- * const nodes = [
25
- * { id: '1', label: 'Node 1', color: '#e04141' },
26
- * { id: '2', label: 'Node 2', color: '#e09c41' }
27
- * ]
28
- * const relationships = [
29
- * { id: '12', from: '1', to: '2' }
30
- * ]
31
- * const options = {
32
- * initialZoom: 0.5
33
- * }
24
+ * const nodes = [{ id: '1' }, { id: '2' }]
25
+ * const relationships = [{ id: '12', from: '1', to: '2' }]
26
+ *
27
+ * const options = { initialZoom: 0.5 }
28
+ *
34
29
  * const callbacks = {
35
30
  * onLayoutDone: () => console.log('Layout done')
36
31
  * }
32
+ *
37
33
  * const nvl = new NVL(document.getElementById('frame'), nodes, relationships, options, callbacks)
38
34
  * ```
39
35
  */
40
36
  declare class NVL {
41
- private readonly externalCallbackHandler;
42
- private readonly performance;
43
- private visState;
44
- private nvlController;
45
- private options;
46
- private segmentTrack;
37
+ #private;
47
38
  /**
48
39
  * Creates a new NVL instance.
49
- * @constructor
50
40
  * @param {HTMLElement} frame - The DOM element to display the graph in
51
41
  * @param {Node[]} nvlNodes - An Array of nodes
52
42
  * @param {Relationship[]} nvlRels - An Array of relationships
@@ -58,16 +48,16 @@ declare class NVL {
58
48
  * Restarts the NVL instance.
59
49
  * @param {NvlOptions} options - new options for the NVL instance
60
50
  * @param {boolean} retainPositions - whether or not to retain the current node positions
61
- * @note new options will be merged with current options
51
+ * New options will be merged with current options
62
52
  */
63
53
  restart(options?: NvlOptions, retainPositions?: boolean): void;
64
54
  /**
65
55
  * Adds nodes and relationships to NVL and updates existing nodes and relationships.
66
56
  * @param {Node[] | PartialNode[]} nodes - An Array of nodes to be added or updated
67
57
  * @param {Relationship[] | PartialRelationship[]} relationships - An Array of relationships to be added or updated
68
- * @note To update nodes or relationships, they must have an id that matches the id of the
58
+ * To update nodes or relationships, they must have an id that matches the id of the
69
59
  * node or relationship to be updated.
70
- * @note Only the properties that are provided will be updated.
60
+ * Only the properties that are provided will be updated.
71
61
  * If an existing property is not provided, it will not be changed.
72
62
  * @example
73
63
  * Adding and updating nodes and relationships
@@ -104,10 +94,10 @@ declare class NVL {
104
94
  * Updates relationships in the current scene with the provided array of nodes and relationships.
105
95
  * @param {Node[] | PartialNode[]} nodes The updated nodes.
106
96
  * @param {Relationship[] | PartialRelationship[]} relationships The updated relationships.
107
- * @note ignores any nodes or relationships that do not exist in the current scene.
108
- * @note To update nodes or relationships, they must have an id that matches the id of the
97
+ * Ignores any nodes or relationships that do not exist in the current scene.
98
+ * To update nodes or relationships, they must have an id that matches the id of the
109
99
  * node or relationship to be updated.
110
- * @note Only the properties that are provided will be updated.
100
+ * Only the properties that are provided will be updated.
111
101
  * If an existing property is not provided, it will not be changed.
112
102
  * @example
113
103
  * Updating nodes and relationships
@@ -136,7 +126,7 @@ declare class NVL {
136
126
  /**
137
127
  * Removes the specified nodes from the current scene.
138
128
  * @param {string[]} nodeIds The node ids to be removed.
139
- * @note adjacent relationships will also be removed.
129
+ * Adjacent relationships will also be removed.
140
130
  */
141
131
  removeNodesWithIds(nodeIds: string[]): void;
142
132
  /**
@@ -145,9 +135,8 @@ declare class NVL {
145
135
  */
146
136
  removeRelationshipsWithIds(relationshipIds: string[]): void;
147
137
  /**
148
- * Returns the node data that is currently stored in the visualisation for a given id.
149
- * @param {string} id The id of the node that should be returned.
150
- * @returns {Node} The node or undefined if there is no node with the given id.
138
+ * Returns all nodes that is currently stored in the visualisation.
139
+ * @returns {Node[]} The array of nodes.
151
140
  */
152
141
  getNodes(): Node[];
153
142
  /**
@@ -190,7 +179,7 @@ declare class NVL {
190
179
  * Updates pan and zoom fit the specified nodes in the viewport.
191
180
  * @param {string[]} nodeIds The ids of the nodes to fit on the screen,
192
181
  * @param {NvlState['zoomOptions']} zoomOptions specific options on how to transition the zoom
193
- * @note If the zoom level required to fit the provided nodes is outside of the range provided by the
182
+ * If the zoom level required to fit the provided nodes is outside of the range provided by the
194
183
  * {@link NvlOptions.minZoom} and {@link NvlOptions.maxZoom} options,
195
184
  * and {@link NvlOptions.allowDynamicMinZoom} is set to `false`,
196
185
  * the zoom level will be set to the closest valid zoom level,
@@ -216,9 +205,8 @@ declare class NVL {
216
205
  /**
217
206
  * Restarts NVL with or without WebGL support.
218
207
  * @param {boolean} disabled Whether or not WebGL should be disabled.
219
- * @note not to be confused with {@link setUseWebGLRenderer}, which only affects the rendering method
208
+ * Not to be confused with {@link setUseWebGLRenderer}, which only affects the rendering method
220
209
  * @experimental
221
- * @internal
222
210
  */
223
211
  setDisableWebGL(disabled?: boolean): void;
224
212
  /**
@@ -243,7 +231,7 @@ declare class NVL {
243
231
  setLayoutOptions(options: LayoutOptions): void;
244
232
  /**
245
233
  * Returns the nodes that are currently in the visualization.
246
- * @note The `rels` property of the returned object is always empty.
234
+ * The `rels` property of the returned object is always empty.
247
235
  * @returns {{ nodes: Node[], rels: Relationship [] }} An array of the nodes in the visualization.
248
236
  */
249
237
  getNodesOnScreen(): {
@@ -273,7 +261,7 @@ declare class NVL {
273
261
  * @param {{ filename: string, backgroundColor: string }} options The filename and background color of the png.
274
262
  * @param {string} options.filename The filename of the png file.
275
263
  * @param {string} options.backgroundColor - The background color of the png file.
276
- * @note The size of the png file will be the size of the canvas in the DOM.
264
+ * The size of the png file will be the size of the canvas in the DOM.
277
265
  */
278
266
  saveToFile(options: {
279
267
  filename?: string;
@@ -284,7 +272,7 @@ declare class NVL {
284
272
  * @param {{ filename: string, backgroundColor: string }} options The filename and background color of the png.
285
273
  * @param {string} options.filename The filename of the png file.
286
274
  * @param {string} options.backgroundColor - The background color of the png file.
287
- * @note The size of the png file will be as large as the entire graph at the default zoom level.
275
+ * The size of the png file will be as large as the entire graph at the default zoom level.
288
276
  * Can result in a very large file.
289
277
  */
290
278
  saveFullGraphToLargeFile(options: {
@@ -294,13 +282,13 @@ declare class NVL {
294
282
  /**
295
283
  * Sets the zoom of the viewport to a specific value.
296
284
  * @param {number} absolute The desired zoom level.
297
- * @note When updating both the zoom level and pan coordinates,
285
+ * When updating both the zoom level and pan coordinates,
298
286
  * use {@link setZoomAndPan} instead of calling {@link setZoom} and {@link setPan}
299
287
  * separately to avoid jittering.
300
- * @note If the zoom level is outside of the range provided by the
288
+ * If the zoom level is outside of the range provided by the
301
289
  * {@link NvlOptions.minZoom} and {@link NvlOptions.maxZoom} options,
302
290
  * the zoom level will be set to the closest valid zoom level.
303
- * @note If {@link NvlOptions.allowDynamicMinZoom} is set to true,
291
+ * If {@link NvlOptions.allowDynamicMinZoom} is set to true,
304
292
  * the {@link NvlOptions.minZoom} option will be ignored of the current graph does not fit the viewport.
305
293
  */
306
294
  setZoom(absolute: number): void;
@@ -308,7 +296,7 @@ declare class NVL {
308
296
  * Sets the zoom of the viewport to a specific value.
309
297
  * @param {number} panX The desired panX value.
310
298
  * @param {number} panY The desired panY value.
311
- * @note When updating both the zoom level and pan coordinates,
299
+ * When updating both the zoom level and pan coordinates,
312
300
  * use {@link setZoomAndPan} instead of calling {@link setZoom} and {@link setPan}
313
301
  * separately to avoid jittering.
314
302
  */
@@ -318,11 +306,11 @@ declare class NVL {
318
306
  * @param {number} zoom The desired zoom level.
319
307
  * @param {number} panX The desired panX value.
320
308
  * @param {number} panY The desired panY value.
321
- * @note When only updating the zoom level or pan coordinates, use {@link setZoom} or {@link setPan} instead.
322
- * @note If the zoom level is outside of the range provided by the
309
+ * When only updating the zoom level or pan coordinates, use {@link setZoom} or {@link setPan} instead.
310
+ * If the zoom level is outside of the range provided by the
323
311
  * {@link NvlOptions.minZoom} and {@link NvlOptions.maxZoom} options,
324
312
  * the zoom level will be set to the closest valid zoom level.
325
- * @note If {@link NvlOptions.allowDynamicMinZoom} is set to true,
313
+ * If {@link NvlOptions.allowDynamicMinZoom} is set to true,
326
314
  * the {@link NvlOptions.minZoom} option will be ignored of the current graph does not fit the viewport.
327
315
  */
328
316
  setZoomAndPan(zoom: number, panX: number, panY: number): void;
@@ -364,13 +352,6 @@ declare class NVL {
364
352
  * @returns The container element of the NVL instance.
365
353
  */
366
354
  getContainer(): HTMLElement;
367
- private initialise;
368
- private setupLogging;
369
- private nodeRemoval;
370
- private edgeRemoval;
371
- private update;
372
- private validateNodes;
373
- private validateRelationships;
374
355
  private checkWebGLCompatibility;
375
356
  }
376
357
  /**
@@ -381,5 +362,5 @@ declare const colorMapperFunctions: {
381
362
  textColorForBackground: (color: string) => string;
382
363
  };
383
364
  export default NVL;
384
- export type { NvlOptions, Renderer, Node, Relationship, PartialNode, PartialRelationship, Layout, LayoutOptions, ForceDirectedOptions, HierarchicalOptions, ExternalCallbacks, HitTargets, HitTargetNode, HitTargetRelationship, Point, NvlMouseEvent, ZoomOptions, StyledCaption };
365
+ export type { NvlOptions, Renderer, Node, Relationship, PartialNode, PartialRelationship, Layout, LayoutOptions, ForceDirectedOptions, HierarchicalOptions, ExternalCallbacks, HitTargets, HitTargetNode, HitTargetRelationship, Point, NvlMouseEvent, ZoomOptions, StyledCaption, WebGLRendererType, CanvasRendererType };
385
366
  export { NVL, colorMapperFunctions, CompatibilityError, ForceDirectedLayoutType, HierarchicalLayoutType, GridLayoutType, FreeLayoutType, d3ForceLayoutType, drawCircleBand };
@@ -15,12 +15,13 @@ export declare class CoseBilkentLayout extends AnimatedLayout {
15
15
  cytoCompleteCallback: () => void;
16
16
  computing: boolean;
17
17
  pendingLayoutData: LayoutData;
18
- worker: SharedWorker;
18
+ worker: SharedWorker | any;
19
19
  constructor(config: {
20
20
  state: NvlState;
21
21
  cytoCompleteCallback?: () => void;
22
22
  animationCompleteCallback?: () => void;
23
23
  });
24
+ setupWorker(): Promise<unknown>;
24
25
  setOptions(): void;
25
26
  update(refreshPositions?: boolean, updateMobXNodes?: Node[], updateMobXRelationships?: Relationship[]): void;
26
27
  getShouldUpdate(): boolean;
@@ -15,6 +15,7 @@ export declare class HierarchicalLayout extends AnimatedLayout {
15
15
  private directionChanged;
16
16
  private packingChanged;
17
17
  constructor(config: HierarchicalLayoutConfig);
18
+ setupWorker(): Promise<unknown>;
18
19
  setOptions(options: LayoutOptions): void;
19
20
  update(refreshPositions?: boolean): void;
20
21
  getShouldUpdate(): boolean;
@@ -19,7 +19,7 @@ export declare class CallbackHelper {
19
19
  * Register a callback function to be called when an event of that name happens
20
20
  * @param {string} name The name of the callback to register
21
21
  * @param {function} callback A function that will be called when an event of that name happens
22
- * @note If other callbacks are already registered for that name it is added to the list
22
+ * If other callbacks are already registered for that name it is added to the list
23
23
  */
24
24
  register(name: keyof ExternalCallbacks, callback: CallbackFunction): void;
25
25
  /**
@@ -117,11 +117,11 @@ export interface NvlOptions {
117
117
  /**
118
118
  * Whether or not to dynamically allow decreasing minimum zoom value
119
119
  * if current graph does not fit on screen at minimum zoom.
120
- * @note When set to true, zoom and fit operations will allow zooming out
120
+ * When set to true, zoom and fit operations will allow zooming out
121
121
  * further than the minimum zoom value if the graph does not fit on screen.
122
122
  * When set to false, zoom and fit operations will stop at the minimum zoom value,
123
123
  * even if the full graph does not fit on screen at that zoom level.
124
- * @default true
124
+ * @defaultValue true
125
125
  */
126
126
  allowDynamicMinZoom?: boolean;
127
127
  /**
@@ -143,14 +143,14 @@ export interface NvlOptions {
143
143
  /**
144
144
  * @deprecated use {@link renderer} instead
145
145
  * Whether to user the Canvas or WebGL renderer
146
- * @note will be ignored when {@link renderer} is set
146
+ * Will be ignored when {@link renderer} is set
147
147
  */
148
148
  useWebGL?: boolean;
149
149
  /**
150
150
  * What renderer to use
151
151
  * Possible values are 'webgl' or 'canvas'
152
152
  * @defaultValue 'webgl'
153
- * @note WebGL renderer uses GPU and has better performance.
153
+ * WebGL renderer uses GPU and has better performance.
154
154
  * Captions and arrowheads are only displayed when using the canvas renderer.
155
155
  */
156
156
  renderer?: Renderer;
@@ -177,7 +177,6 @@ export interface NvlOptions {
177
177
  selectedBorderColor?: string;
178
178
  /**
179
179
  * @internal
180
- * @experimental
181
180
  * Defines a time limit for how long layout iterations may run
182
181
  */
183
182
  layoutTimeLimit?: number;
@@ -7,8 +7,8 @@ import type { StyledCaption } from '../renderers/canvasrenderer/types';
7
7
  interface GraphElement {
8
8
  /**
9
9
  * The id of the current node or relationship.
10
- * @note ids need to be unique across all nodes and relationships.
11
- * @note ids need to be strings and cannot be empty.
10
+ * Ids need to be unique across all nodes and relationships.
11
+ * Ids need to be strings and cannot be empty.
12
12
  */
13
13
  readonly id: string;
14
14
  color?: string;
@@ -26,23 +26,23 @@ interface GraphElement {
26
26
  captionSize?: number;
27
27
  /**
28
28
  * The caption align.
29
- * @note Has no affect on self-referring relationships.
29
+ * Has no affect on self-referring relationships.
30
30
  */
31
31
  captionAlign?: 'top' | 'bottom' | 'center';
32
32
  /**
33
33
  * The caption text and font style.
34
- * @note Captions are only visible when using the 'canvas' renderer.
34
+ * Captions are only visible when using the 'canvas' renderer.
35
35
  */
36
36
  captions?: StyledCaption[];
37
37
  /**
38
38
  * An icon to be displayed anywhere on top of the graph element.
39
- * @note Icons are expected to be square.
39
+ * Icons are expected to be square.
40
40
  */
41
41
  overlayIcon?: {
42
42
  url: string;
43
43
  /**
44
44
  * The position of the icon relative to the node or relationship.
45
- * @note The position is a percentage of the node or relationship size.
45
+ * The position is a percentage of the node or relationship size.
46
46
  * `[1, 1]` is the bottom right corner of the node or relationship.
47
47
  * `[-1, -1]` is the top left corner of the node or relationship.
48
48
  * @defaultValue `[0, 0]`, the center of the node or relationship.
@@ -50,7 +50,7 @@ interface GraphElement {
50
50
  position?: number[];
51
51
  /**
52
52
  * The size of the icon relative to the node size or relationship caption size.
53
- * @note The size is a percentage of the node size or relationship caption size.
53
+ * The size is a percentage of the node size or relationship caption size.
54
54
  * @defaultValue `1`, the same size as the node size or relationship caption size.
55
55
  */
56
56
  size?: number;
@@ -73,9 +73,9 @@ interface Node extends GraphElement {
73
73
  activated?: boolean;
74
74
  /**
75
75
  * The url to an icon to display inside the node.
76
- * @note Icons are expected to be black. If the node's background color is dark,
76
+ * Icons are expected to be black. If the node's background color is dark,
77
77
  * the icon will be inverted to white.
78
- * @note Icons are expected to be square.
78
+ * Icons are expected to be square.
79
79
  */
80
80
  icon?: string;
81
81
  /**
@@ -106,7 +106,7 @@ interface Relationship extends GraphElement {
106
106
  /**
107
107
  * The DOM element to display on top of a relationship caption.
108
108
  * @experimental
109
- * @note The {@link captionSize} and {@link captionAlign} properties
109
+ * The {@link captionSize} and {@link captionAlign} properties
110
110
  * will affect the position and height of the html container element.
111
111
  */
112
112
  captionHtml?: HTMLElement;
@@ -2,7 +2,7 @@
2
2
  * Fixes the canvas size to match the parent element's size.
3
3
  * @param canvas The canvas to fix the size of.
4
4
  *
5
- * @note Make sure canvas pixel buffer is 1 to 1 vs screen pixels
5
+ * Make sure canvas pixel buffer is 1 to 1 vs screen pixels
6
6
  */
7
7
  export declare const fitCanvasSizeToParent: (canvas: HTMLCanvasElement) => void;
8
8
  export declare const addWebGLContextLostListener: (canvas: HTMLCanvasElement, contextLostCallback?: (e: WebGLContextEvent) => void) => void;
@@ -78,9 +78,9 @@ export declare class Segment {
78
78
  * @param {Point} lineStartToPointVector - The vector from the start of the line to the point.
79
79
  * @param {Point} lineVector - The vector of the line.
80
80
  * @returns {number} The projection of the point onto the line.
81
- * @note The projection ratio is a value between 0 and 1.
82
- * @note The projection ratio is 0 if the point is closest to the start of the line.
83
- * @note The projection ratio is 1 if the point is closest to the end of the line.
81
+ * The projection ratio is a value between 0 and 1.
82
+ * The projection ratio is 0 if the point is closest to the start of the line.
83
+ * The projection ratio is 1 if the point is closest to the end of the line.
84
84
  * @see {@link https://en.wikipedia.org/wiki/Vector_projection}
85
85
  */
86
86
  export declare const getProjectionRatio: (lineStartToPointVector: Point, lineVector: Point) => number;
@@ -90,7 +90,7 @@ export declare const getProjectionRatio: (lineStartToPointVector: Point, lineVec
90
90
  * @param {Point} lineEnd - The second point of the line.
91
91
  * @param {Point} point - The point to calculate the distance to.
92
92
  * @returns {number} The distance between the point and the line.
93
- * @note If the actual distance does not matter,
93
+ * If the actual distance does not matter,
94
94
  * if you only want to compare what this function
95
95
  * returns to other results of this function, you
96
96
  * can just return the squared distance instead
@@ -105,7 +105,7 @@ export declare const getDistanceToLine: (lineStart: Point, lineEnd: Point, point
105
105
  * @param {Point} p3 - Second point of second line
106
106
  * @returns {Point | null} Intersection point
107
107
  * @see https://github.com/bit101/CodingMath/blob/master/episode33/parallel.js
108
- * @note Returns null if lines are parallel
108
+ * Returns null if lines are parallel
109
109
  */
110
110
  export declare const getIntersection: (p0: Point, p1: Point, p2: Point, p3: Point) => Point | null;
111
111
  /**
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@neo4j-nvl/base",
3
- "version": "0.3.3",
3
+ "version": "0.3.4-34f121d2",
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",
@@ -27,14 +27,8 @@
27
27
  "prepack": "cp ../../LICENSE.txt ./",
28
28
  "postpack": "rm LICENSE.txt"
29
29
  },
30
- "typedoc": {
31
- "entryPoint": "./src/index.ts",
32
- "readmeFile": "./README.md",
33
- "displayName": "Base",
34
- "tsconfig": "./tsconfig.json"
35
- },
36
30
  "dependencies": {
37
- "@neo4j-nvl/layout-workers": "0.3.3",
31
+ "@neo4j-nvl/layout-workers": "0.3.4-34f121d2",
38
32
  "@segment/analytics-next": "^1.70.0",
39
33
  "color-string": "^1.9.1",
40
34
  "d3-force": "^3.0.0",
@@ -67,5 +61,6 @@
67
61
  "eslint": "*",
68
62
  "jest": "*",
69
63
  "typescript": "*"
70
- }
64
+ },
65
+ "stableVersion": "0.3.4"
71
66
  }