UNPKG

29.3 kBTypeScriptView Raw
1// Type definitions for vis.js 4.21
2// Project: https://github.com/almende/vis, http://visjs.org
3// Definitions by: Michaël Bitard <https://github.com/MichaelBitard>
4// MacLeod Broad <https://github.com/macleodbroad-wf>
5// Adrian Caballero <https://github.com/adripanico>
6// Severin <https://github.com/seveves>
7// kaktus40 <https://github.com/kaktus40>
8// Matthieu Maitre <https://github.com/mmaitre314>
9// Adam Lewis <https://github.com/supercargo>
10// Alex Soh <https://github.com/takato1314>
11// Oleksii Kachura <https://github.com/alex-kachura>
12// dcop <https://github.com/dcop>
13// Avraham Essoudry <https://github.com/avrahamcool>
14// Dmitriy Trifonov <https://github.com/divideby>
15// Sam Welek <https://github.com/tiberiushunter>
16// Slaven Tomac <https://github.com/slavede>
17// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
18
19import { DataInterface, DataSet, DataView } from 'vis-data';
20export type DataInterfaceEdges = DataInterface<Edge, 'id'>
21export type DataInterfaceNodes = DataInterface<Node, 'id'>
22export type DataSetEdges = DataSet<Edge, 'id'>
23export type DataSetNodes = DataSet<Node, 'id'>
24export type DataViewEdges = DataView<Edge, 'id'>
25export type DataViewNodes = DataView<Node, 'id'>
26
27export type IdType = string | number;
28export type DirectionType = 'from' | 'to';
29
30/**
31 * If true (default) or an Object, the range is animated smoothly to the new window.
32 * An object can be provided to specify duration and easing function.
33 * Default duration is 500 ms, and default easing function is 'easeInOutQuad'.
34 */
35export type TimelineAnimationType = boolean | AnimationOptions;
36
37export type NetworkEvents =
38 'click' |
39 'doubleClick' |
40 'oncontext' |
41 'hold' |
42 'release' |
43 'select' |
44 'selectNode' |
45 'selectEdge' |
46 'deselectNode' |
47 'deselectEdge' |
48 'dragStart' |
49 'dragging' |
50 'dragEnd' |
51 'hoverNode' |
52 'blurNode' |
53 'hoverEdge' |
54 'blurEdge' |
55 'zoom' |
56 'showPopup' |
57 'hidePopup' |
58 'startStabilizing' |
59 'stabilizationProgress' |
60 'stabilizationIterationsDone' |
61 'stabilized' |
62 'resize' |
63 'initRedraw' |
64 'beforeDrawing' |
65 'afterDrawing' |
66 'animationFinished' |
67 'configChange';
68
69/**
70 * Network is a visualization to display networks and networks consisting of nodes and edges.
71 * The visualization is easy to use and supports custom shapes, styles, colors, sizes, images, and more.
72 * The network visualization works smooth on any modern browser for up to a few thousand nodes and edges.
73 * To handle a larger amount of nodes, Network has clustering support. Network uses HTML canvas for rendering.
74 */
75export class Network {
76 /**
77 * Creates an instance of Network.
78 *
79 * @param container the HTML element representing the network container
80 * @param data network data
81 * @param [options] optional network options
82 */
83 constructor(container: HTMLElement, data: Data, options?: Options);
84
85 /**
86 * Remove the network from the DOM and remove all Hammer bindings and references.
87 */
88 destroy(): void;
89
90 /**
91 * Override all the data in the network.
92 * If stabilization is enabled in the physics module,
93 * the network will stabilize again.
94 * This method is also performed when first initializing the network.
95 *
96 * @param data network data
97 */
98 setData(data: Data): void;
99
100 /**
101 * Set the options.
102 * All available options can be found in the modules above.
103 * Each module requires it's own container with the module name to contain its options.
104 *
105 * @param options network options
106 */
107 setOptions(options: Options): void;
108
109 /**
110 * Set an event listener.
111 * Depending on the type of event you get different parameters for the callback function.
112 *
113 * @param eventName the name of the event, f.e. 'click'
114 * @param callback the callback function that will be raised
115 */
116 on(eventName: NetworkEvents, callback: (params?: any) => void): void;
117
118 /**
119 * Remove an event listener.
120 * The function you supply has to be the exact same as the one you used in the on function.
121 * If no function is supplied, all listeners will be removed.
122 *
123 * @param eventName the name of the event, f.e. 'click'
124 * @param [callback] the exact same callback function that was used when calling 'on'
125 */
126 off(eventName: NetworkEvents, callback?: (params?: any) => void): void;
127
128 /**
129 * Set an event listener only once.
130 * After it has taken place, the event listener will be removed.
131 * Depending on the type of event you get different parameters for the callback function.
132 *
133 * @param eventName the name of the event, f.e. 'click'
134 * @param callback the callback function that will be raised once
135 */
136 once(eventName: NetworkEvents, callback: (params?: any) => void): void;
137
138 /**
139 * This function converts canvas coordinates to coordinates on the DOM.
140 * Input and output are in the form of {x:Number, y:Number} (IPosition interface).
141 * The DOM values are relative to the network container.
142 *
143 * @param position the canvas coordinates
144 * @returns the DOM coordinates
145 */
146 canvasToDOM(position: Position): Position;
147
148 /**
149 * This function converts DOM coordinates to coordinates on the canvas.
150 * Input and output are in the form of {x:Number,y:Number} (IPosition interface).
151 * The DOM values are relative to the network container.
152 *
153 * @param position the DOM coordinates
154 * @returns the canvas coordinates
155 */
156 DOMtoCanvas(position: Position): Position;
157
158 /**
159 * Redraw the network.
160 */
161 redraw(): void;
162
163 /**
164 * Set the size of the canvas.
165 * This is automatically done on a window resize.
166 *
167 * @param width width in a common format, f.e. '100px'
168 * @param height height in a common format, f.e. '100px'
169 */
170 setSize(width: string, height: string): void;
171
172 /**
173 * The joinCondition function is presented with all nodes.
174 */
175 cluster(options?: ClusterOptions): void;
176
177 /**
178 * This method looks at the provided node and makes a cluster of it and all it's connected nodes.
179 * The behaviour can be customized by proving the options object.
180 * All options of this object are explained below.
181 * The joinCondition is only presented with the connected nodes.
182 *
183 * @param nodeId the id of the node
184 * @param [options] the cluster options
185 */
186 clusterByConnection(nodeId: string, options?: ClusterOptions): void;
187
188 /**
189 * This method checks all nodes in the network and those with a equal or higher
190 * amount of edges than specified with the hubsize qualify.
191 * If a hubsize is not defined, the hubsize will be determined as the average
192 * value plus two standard deviations.
193 * For all qualifying nodes, clusterByConnection is performed on each of them.
194 * The options object is described for clusterByConnection and does the same here.
195 *
196 * @param [hubsize] optional hubsize
197 * @param [options] optional cluster options
198 */
199 clusterByHubsize(hubsize?: number, options?: ClusterOptions): void;
200
201 /**
202 * This method will cluster all nodes with 1 edge with their respective connected node.
203 *
204 * @param [options] optional cluster options
205 */
206 clusterOutliers(options?: ClusterOptions): void;
207
208 /**
209 * Nodes can be in clusters.
210 * Clusters can also be in clusters.
211 * This function returns an array of nodeIds showing where the node is.
212 *
213 * Example:
214 * cluster 'A' contains cluster 'B', cluster 'B' contains cluster 'C',
215 * cluster 'C' contains node 'fred'.
216 *
217 * network.clustering.findNode('fred') will return ['A','B','C','fred'].
218 *
219 * @param nodeId the node id.
220 * @returns an array of nodeIds showing where the node is
221 */
222 findNode(nodeId: IdType): IdType[];
223
224 /**
225 * Similar to findNode in that it returns all the edge ids that were
226 * created from the provided edge during clustering.
227 *
228 * @param baseEdgeId the base edge id
229 * @returns an array of edgeIds
230 */
231 getClusteredEdges(baseEdgeId: IdType): IdType[];
232
233 /**
234 * When a clusteredEdgeId is available, this method will return the original
235 * baseEdgeId provided in data.edges ie.
236 * After clustering the 'SelectEdge' event is fired but provides only the clustered edge.
237 * This method can then be used to return the baseEdgeId.
238 */
239 getBaseEdge(clusteredEdgeId: IdType): IdType;
240
241 /**
242 * For the given clusteredEdgeId, this method will return all the original
243 * base edge id's provided in data.edges.
244 * For a non-clustered (i.e. 'base') edge, clusteredEdgeId is returned.
245 * Only the base edge id's are returned.
246 * All clustered edges id's under clusteredEdgeId are skipped,
247 * but scanned recursively to return their base id's.
248 */
249 getBaseEdges(clusteredEdgeId: IdType): IdType[];
250
251 /**
252 * Visible edges between clustered nodes are not the same edge as the ones provided
253 * in data.edges passed on network creation. With each layer of clustering, copies of
254 * the edges between clusters are created and the previous edges are hidden,
255 * until the cluster is opened. This method takes an edgeId (ie. a base edgeId from data.edges)
256 * and applys the options to it and any edges that were created from it while clustering.
257 */
258 updateEdge(startEdgeId: IdType, options?: EdgeOptions): void;
259
260 /**
261 * Clustered Nodes when created are not contained in the original data.nodes
262 * passed on network creation. This method updates the cluster node.
263 */
264 updateClusteredNode(clusteredNodeId: IdType, options?: NodeOptions): void;
265
266 /**
267 * Returns true if the node whose ID has been supplied is a cluster.
268 *
269 * @param nodeId the node id.
270 */
271 isCluster(nodeId: IdType): boolean;
272
273 /**
274 * Returns an array of all nodeIds of the nodes that
275 * would be released if you open the cluster.
276 *
277 * @param clusterNodeId the id of the cluster node
278 */
279 getNodesInCluster(clusterNodeId: IdType): IdType[];
280
281 /**
282 * Opens the cluster, releases the contained nodes and edges,
283 * removing the cluster node and cluster edges.
284 * The options object is optional and currently supports one option,
285 * releaseFunction, which is a function that can be used to manually
286 * position the nodes after the cluster is opened.
287 *
288 * @param nodeId the node id
289 * @param [options] optional open cluster options
290 */
291 openCluster(nodeId: IdType, options?: OpenClusterOptions): void;
292
293 /**
294 * If you like the layout of your network
295 * and would like it to start in the same way next time,
296 * ask for the seed using this method and put it in the layout.randomSeed option.
297 *
298 * @returns the current seed of the network.
299 */
300 getSeed(): number;
301
302 /**
303 * Programatically enable the edit mode.
304 * Similar effect to pressing the edit button.
305 */
306 enableEditMode(): void;
307
308 /**
309 * Programatically disable the edit mode.
310 * Similar effect to pressing the close icon (small cross in the corner of the toolbar).
311 */
312 disableEditMode(): void;
313
314 /**
315 * Go into addNode mode. Having edit mode or manipulation enabled is not required.
316 * To get out of this mode, call disableEditMode().
317 * The callback functions defined in handlerFunctions still apply.
318 * To use these methods without having the manipulation GUI, make sure you set enabled to false.
319 */
320 addNodeMode(): void;
321
322 /**
323 * Edit the selected node.
324 * The explaination from addNodeMode applies here as well.
325 */
326 editNode(): void;
327
328 /**
329 * Go into addEdge mode.
330 * The explaination from addNodeMode applies here as well.
331 */
332 addEdgeMode(): void;
333
334 /**
335 * Go into editEdge mode.
336 * The explaination from addNodeMode applies here as well.
337 */
338 editEdgeMode(): void;
339
340 /**
341 * Delete selected.
342 * Having edit mode or manipulation enabled is not required.
343 */
344 deleteSelected(): void;
345
346 /**
347 * Returns the x y positions in canvas space of the nodes with the supplied nodeIds as an object.
348 *
349 * Alternative inputs are a String containing a nodeId or nothing.
350 * When a String is supplied, the position of the node corresponding to the ID is returned.
351 * When nothing is supplied, the positions of all nodes are returned.
352 */
353 getPositions(nodeIds?: IdType[]): { [nodeId: string]: Position };
354 getPositions(nodeId: IdType): Position;
355
356 /**
357 * When using the vis.DataSet to load your nodes into the network,
358 * this method will put the X and Y positions of all nodes into that dataset.
359 * If you're loading your nodes from a database and have this dynamically coupled with the DataSet,
360 * you can use this to stablize your network once, then save the positions in that database
361 * through the DataSet so the next time you load the nodes, stabilization will be near instantaneous.
362 *
363 * If the nodes are still moving and you're using dynamic smooth edges (which is on by default),
364 * you can use the option stabilization.onlyDynamicEdges in the physics module to improve initialization time.
365 *
366 * This method does not support clustering.
367 * At the moment it is not possible to cache positions when using clusters since
368 * they cannot be correctly initialized from just the positions.
369 */
370 storePositions(): void;
371
372 /**
373 * You can use this to programatically move a node.
374 * The supplied x and y positions have to be in canvas space!
375 *
376 * @param nodeId the node that will be moved
377 * @param x new canvas space x position
378 * @param y new canvas space y position
379 */
380 moveNode(nodeId: IdType, x: number, y: number): void;
381
382 /**
383 * Returns a bounding box for the node including label.
384 *
385 */
386 getBoundingBox(nodeId: IdType): BoundingBox;
387
388 /**
389 * Returns an array of nodeIds of the all the nodes that are directly connected to this node.
390 * If you supply an edgeId, vis will first match the id to nodes.
391 * If no match is found, it will search in the edgelist and return an array: [fromId, toId].
392 *
393 * @param nodeOrEdgeId a node or edge id
394 */
395 getConnectedNodes(nodeOrEdgeId: IdType, direction?: DirectionType): IdType[] | Array<{ fromId: IdType, toId: IdType }>;
396
397 /**
398 * Returns an array of edgeIds of the edges connected to this node.
399 *
400 * @param nodeId the node id
401 */
402 getConnectedEdges(nodeId: IdType): IdType[];
403
404 /**
405 * Start the physics simulation.
406 * This is normally done whenever needed and is only really useful
407 * if you stop the simulation yourself and wish to continue it afterwards.
408 */
409 startSimulation(): void;
410
411 /**
412 * This stops the physics simulation and triggers a stabilized event.
413 * Tt can be restarted by dragging a node,
414 * altering the dataset or calling startSimulation().
415 */
416 stopSimulation(): void;
417
418 /**
419 * You can manually call stabilize at any time.
420 * All the stabilization options above are used.
421 * You can optionally supply the number of iterations it should do.
422 *
423 * @param [iterations] the number of iterations it should do
424 */
425 stabilize(iterations?: number): void;
426
427 /**
428 * Returns an object with selected nodes and edges ids.
429 *
430 */
431 getSelection(): { nodes: IdType[], edges: IdType[] };
432
433 /**
434 * Returns an array of selected node ids like so:
435 * [nodeId1, nodeId2, ..].
436 *
437 */
438 getSelectedNodes(): IdType[];
439
440 /**
441 * Returns an array of selected edge ids like so:
442 * [edgeId1, edgeId2, ..].
443 *
444 */
445 getSelectedEdges(): IdType[];
446
447 /**
448 * Returns a nodeId or undefined.
449 * The DOM positions are expected to be in pixels from the top left corner of the canvas.
450 *
451 */
452 getNodeAt(position: Position): IdType;
453
454 /**
455 * Returns a edgeId or undefined.
456 * The DOM positions are expected to be in pixels from the top left corner of the canvas.
457 *
458 */
459 getEdgeAt(position: Position): IdType;
460
461 /**
462 * Selects the nodes corresponding to the id's in the input array.
463 * If highlightEdges is true or undefined, the neighbouring edges will also be selected.
464 * This method unselects all other objects before selecting its own objects. Does not fire events.
465 *
466 */
467 selectNodes(nodeIds: IdType[], highlightEdges?: boolean): void;
468
469 /**
470 * Selects the edges corresponding to the id's in the input array.
471 * This method unselects all other objects before selecting its own objects.
472 * Does not fire events.
473 *
474 */
475 selectEdges(edgeIds: IdType[]): void;
476
477 /**
478 * Sets the selection.
479 * You can also pass only nodes or edges in selection object.
480 *
481 */
482 setSelection(selection: { nodes: IdType[], edges: IdType[] }, options?: SelectionOptions): void;
483
484 /**
485 * Unselect all objects.
486 * Does not fire events.
487 */
488 unselectAll(): void;
489
490 /**
491 * Returns the current scale of the network.
492 * 1.0 is comparible to 100%, 0 is zoomed out infinitely.
493 *
494 * @returns the current scale of the network
495 */
496 getScale(): number;
497
498 /**
499 * Returns the current central focus point of the view in the form: { x: {Number}, y: {Number} }
500 *
501 * @returns the view position;
502 */
503 getViewPosition(): Position;
504
505 /**
506 * Zooms out so all nodes fit on the canvas.
507 *
508 * @param [options] All options are optional for the fit method
509 */
510 fit(options?: FitOptions): void;
511
512 /**
513 * You can focus on a node with this function.
514 * What that means is the view will lock onto that node, if it is moving, the view will also move accordingly.
515 * If the view is dragged by the user, the focus is broken. You can supply options to customize the effect.
516 *
517 */
518 focus(nodeId: IdType, options?: FocusOptions): void;
519
520 /**
521 * You can animate or move the camera using the moveTo method.
522 *
523 */
524 moveTo(options: MoveToOptions): void;
525
526 /**
527 * Programatically release the focussed node.
528 */
529 releaseNode(): void;
530
531 /**
532 * If you use the configurator, you can call this method to get an options object that contains
533 * all differences from the default options caused by users interacting with the configurator.
534 *
535 */
536 getOptionsFromConfigurator(): any;
537}
538
539/**
540 * Options interface for focus function.
541 */
542export interface FocusOptions extends ViewPortOptions {
543 /**
544 * Locked denotes whether or not the view remains locked to
545 * the node once the zoom-in animation is finished.
546 * Default value is true.
547 */
548 locked?: boolean;
549}
550
551/**
552 * Base options interface for some viewport functions.
553 */
554export interface ViewPortOptions {
555 /**
556 * The scale is the target zoomlevel.
557 * Default value is 1.0.
558 */
559 scale?: number;
560
561 /**
562 * The offset (in DOM units) is how many pixels from the center the view is focussed.
563 * Default value is {x:0,y:0}
564 */
565 offset?: Position;
566
567 /**
568 * For animation you can either use a Boolean to use it with the default options or
569 * disable it or you can define the duration (in milliseconds) and easing function manually.
570 */
571 animation?: AnimationOptions | boolean;
572}
573
574/**
575 * You will have to define at least a scale, position or offset.
576 * Otherwise, there is nothing to move to.
577 */
578export interface MoveToOptions extends ViewPortOptions {
579 /**
580 * The position (in canvas units!) is the position of the central focus point of the camera.
581 */
582 position?: Position;
583}
584
585/**
586 * Animation options interface.
587 */
588export interface AnimationOptions {
589 /**
590 * The duration (in milliseconds).
591 */
592 duration: number;
593 /**
594 * The easing function.
595 *
596 * Available are:
597 * linear, easeInQuad, easeOutQuad, easeInOutQuad, easeInCubic,
598 * easeOutCubic, easeInOutCubic, easeInQuart, easeOutQuart, easeInOutQuart,
599 * easeInQuint, easeOutQuint, easeInOutQuint.
600 */
601 easingFunction: EasingFunction;
602}
603
604export type EasingFunction =
605 'linear' |
606 'easeInQuad' |
607 'easeOutQuad' |
608 'easeInOutQuad' |
609 'easeInCubic' |
610 'easeOutCubic' |
611 'easeInOutCubic' |
612 'easeInQuart' |
613 'easeOutQuart' |
614 'easeInOutQuart' |
615 'easeInQuint' |
616 'easeOutQuint' |
617 'easeInOutQuint';
618
619/**
620 * Optional options for the fit method.
621 */
622export interface FitOptions {
623 /**
624 * The nodes can be used to zoom to fit only specific nodes in the view.
625 */
626 nodes?: string[];
627
628 /**
629 * For animation you can either use a Boolean to use it with the default options or
630 * disable it or you can define the duration (in milliseconds) and easing function manually.
631 */
632 animation: TimelineAnimationType;
633}
634
635export interface SelectionOptions {
636 unselectAll?: boolean;
637 highlightEdges?: boolean;
638}
639
640/**
641 * These values are in canvas space.
642 */
643export interface BoundingBox {
644 top: number;
645 left: number;
646 right: number;
647 bottom: number;
648}
649
650/**
651 * Cluster methods options interface.
652 */
653export interface ClusterOptions {
654 /**
655 * Optional for all but the cluster method.
656 * The cluster module loops over all nodes that are selected to be in the cluster
657 * and calls this function with their data as argument. If this function returns true,
658 * this node will be added to the cluster. You have access to all options (including the default)
659 * as well as any custom fields you may have added to the node to determine whether or not to include it in the cluster.
660 */
661 joinCondition?(nodeOptions: any): boolean;
662
663 /**
664 * Optional.
665 * Before creating the new cluster node, this (optional) function will be called with the properties
666 * supplied by you (clusterNodeProperties), all contained nodes and all contained edges.
667 * You can use this to update the properties of the cluster based on which items it contains.
668 * The function should return the properties to create the cluster node.
669 */
670 processProperties?(clusterOptions: any, childNodesOptions: any[], childEdgesOptions: any[]): any;
671
672 /**
673 * Optional.
674 * This is an object containing the options for the cluster node.
675 * All options described in the nodes module are allowed.
676 * This allows you to style your cluster node any way you want.
677 * This is also the style object that is provided in the processProperties function for fine tuning.
678 * If undefined, default node options will be used.
679 */
680 clusterNodeProperties?: NodeOptions;
681
682 /**
683 * Optional.
684 * This is an object containing the options for the edges connected to the cluster.
685 * All options described in the edges module are allowed.
686 * Using this, you can style the edges connecting to the cluster any way you want.
687 * If none are provided, the options from the edges that are replaced are used.
688 * If undefined, default edge options will be used.
689 */
690 clusterEdgeProperties?: EdgeOptions;
691}
692
693/**
694 * Options for the openCluster function of Network.
695 */
696export interface OpenClusterOptions {
697 /**
698 * A function that can be used to manually position the nodes after the cluster is opened.
699 * The containedNodesPositions contain the positions of the nodes in the cluster at the
700 * moment they were clustered. This function is expected to return the newPositions,
701 * which can be the containedNodesPositions (altered) or a new object.
702 * This has to be an object with keys equal to the nodeIds that exist in the
703 * containedNodesPositions and an {x:x,y:y} position object.
704 *
705 * For all nodeIds not listed in this returned object,
706 * we will position them at the location of the cluster.
707 * This is also the default behaviour when no releaseFunction is defined.
708 */
709 releaseFunction(
710 clusterPosition: Position,
711 containedNodesPositions: { [nodeId: string]: Position }): { [nodeId: string]: Position };
712}
713
714export interface Position {
715 x: number;
716 y: number;
717}
718
719export interface Data {
720 nodes?: Node[] | DataInterfaceNodes;
721 edges?: Edge[] | DataInterfaceEdges;
722}
723
724export interface Node extends NodeOptions {
725 id?: IdType;
726}
727
728export interface Edge extends EdgeOptions {
729 from?: IdType;
730 to?: IdType;
731 id?: IdType;
732}
733
734export interface Locales {
735 [language: string]: LocaleMessages | undefined;
736 en?: LocaleMessages;
737 cn?: LocaleMessages;
738 de?: LocaleMessages;
739 es?: LocaleMessages;
740 it?: LocaleMessages;
741 nl?: LocaleMessages;
742 'pt-br'?: LocaleMessages;
743 ru?: LocaleMessages;
744}
745
746export interface LocaleMessages {
747 edit: string;
748 del: string;
749 back: string;
750 addNode: string;
751 addEdge: string;
752 editNode: string;
753 editEdge: string;
754 addDescription: string;
755 edgeDescription: string;
756 editEdgeDescription: string;
757 createEdgeError: string;
758 deleteClusterError: string;
759 editClusterError: string;
760}
761
762export interface Options {
763 autoResize?: boolean;
764
765 width?: string;
766
767 height?: string;
768
769 locale?: string;
770
771 locales?: Locales;
772
773 clickToUse?: boolean;
774
775 configure?: any; // https://visjs.github.io/vis-network/docs/network/configure.html
776
777 edges?: EdgeOptions;
778
779 nodes?: NodeOptions;
780
781 groups?: any;
782
783 layout?: any; // https://visjs.github.io/vis-network/docs/network/layout.html
784
785 interaction?: any; // https://visjs.github.io/vis-network/docs/network/interaction.html?keywords=edges
786
787 manipulation?: any; // https://visjs.github.io/vis-network/docs/network/manipulation.html
788
789 physics?: any; // https://visjs.github.io/vis-network/docs/network/physics.html
790}
791
792export interface Image {
793 unselected?: string;
794 selected?: string;
795}
796
797export interface Color {
798 border?: string;
799
800 background?: string;
801
802 highlight?: string | {
803 border?: string;
804 background?: string;
805 };
806
807 hover?: string | {
808 border?: string;
809 background?: string;
810 };
811}
812
813export interface NodeOptions {
814 borderWidth?: number;
815
816 borderWidthSelected?: number;
817
818 brokenImage?: string;
819
820 color?: string | Color;
821
822 fixed?: boolean | {
823 x?: boolean,
824 y?: boolean,
825 };
826
827 font?: string | {
828 color?: string,
829 size?: number, // px
830 face?: string,
831 background?: string,
832 strokeWidth?: number, // px
833 strokeColor?: string,
834 align?: string,
835 vadjust?: string,
836 multi?: string,
837 bold?: string | FontOptions,
838 ital?: string | FontOptions,
839 boldital?: string | FontOptions,
840 mono?: string | FontOptions,
841 };
842
843 group?: string;
844
845 hidden?: boolean;
846
847 icon?: {
848 face?: string,
849 code?: string,
850 size?: number, // 50,
851 color?: string,
852 };
853
854 image?: string | Image;
855
856 label?: string;
857
858 labelHighlightBold?: boolean;
859
860 level?: number;
861
862 margin?: {
863 top?: number;
864 right?: number;
865 bottom?: number;
866 left?: number;
867 };
868
869 mass?: number;
870
871 physics?: boolean;
872
873 scaling?: OptionsScaling;
874
875 shadow?: boolean | OptionsShadow;
876
877 shape?: string;
878
879 shapeProperties?: {
880 borderDashes?: boolean | number[], // only for borders
881 borderRadius?: number, // only for box shape
882 interpolation?: boolean, // only for image and circularImage shapes
883 useImageSize?: boolean, // only for image and circularImage shapes
884 useBorderWithImage?: boolean // only for image shape
885 };
886
887 size?: number;
888
889 title?: string;
890
891 value?: number;
892
893 /**
894 * If false, no widthConstraint is applied. If a number is specified, the minimum and maximum widths of the node are set to the value.
895 * The node's label's lines will be broken on spaces to stay below the maximum and the node's width
896 * will be set to the minimum if less than the value.
897 */
898 widthConstraint?: number | boolean | { minimum?: number, maximum?: number };
899
900 x?: number;
901
902 y?: number;
903}
904
905export interface EdgeOptions {
906 arrows?: string | {
907 to?: boolean | {
908 enabled?: boolean,
909 scaleFactor?: number,
910 type?: string
911 },
912 middle?: boolean | {
913 enabled?: boolean,
914 scaleFactor?: number,
915 type?: string
916 },
917 from?: boolean | {
918 enabled?: boolean,
919 scaleFactor?: number,
920 type?: string
921 }
922 };
923
924 arrowStrikethrough?: boolean;
925
926 color?: string | {
927 color?: string,
928 highlight?: string,
929 hover?: string,
930 inherit?: boolean | string,
931 opacity?: number,
932 };
933
934 dashes?: boolean | number[];
935
936 font?: string | {
937 color?: string,
938 size?: number, // px
939 face?: string,
940 background?: string,
941 strokeWidth?: number, // px
942 strokeColor?: string,
943 align?: string,
944 vadjust?: string,
945 multi?: string,
946 bold?: string | FontOptions,
947 ital?: string | FontOptions,
948 boldital?: string | FontOptions,
949 mono?: string | FontOptions,
950 };
951
952 hidden?: boolean;
953
954 hoverWidth?: number; // please note, hoverWidth could be also a function. This case is not represented here
955
956 label?: string;
957
958 labelHighlightBold?: boolean;
959
960 length?: number;
961
962 physics?: boolean;
963
964 scaling?: OptionsScaling;
965
966 selectionWidth?: number; // please note, selectionWidth could be also a function. This case is not represented here
967
968 selfReferenceSize?: number;
969
970 shadow?: boolean | OptionsShadow;
971
972 smooth?: boolean | {
973 enabled: boolean,
974 type: string,
975 forceDirection?: string | boolean,
976 roundness: number,
977 };
978
979 title?: string;
980
981 value?: number;
982
983 width?: number;
984}
985
986export interface FontOptions {
987 color?: string;
988 size?: number;
989 face?: string;
990 mod?: string;
991 vadjust?: string;
992}
993
994export interface OptionsScaling {
995 min?: number;
996 max?: number;
997 label?: boolean | {
998 enabled?: boolean,
999 min?: number,
1000 max?: number,
1001 maxVisible?: number,
1002 drawThreshold?: number
1003 };
1004 customScalingFunction?(min?: number, max?: number, total?: number, value?: number): number;
1005}
1006
1007export interface OptionsShadow {
1008 enabled: boolean;
1009 color: string;
1010 size: number;
1011 x: number;
1012 y: number;
1013}