From 7e0f87e1d0291d9b706496ed9f1fa4e19aa1933e Mon Sep 17 00:00:00 2001 From: Matthieu Maitre Date: Sun, 4 Dec 2016 01:17:06 -0800 Subject: [PATCH 1/4] Port from https://github.com/agileek/typings-vis/blob/master/vs.d.ts --- vis/index.d.ts | 1753 +++++++++++++++++++++++++++++++++++++++++++++ vis/tsconfig.json | 19 + vis/tslint.json | 1 + vis/vis-tests.ts | 197 +++++ 4 files changed, 1970 insertions(+) create mode 100644 vis/index.d.ts create mode 100644 vis/tsconfig.json create mode 100644 vis/tslint.json create mode 100644 vis/vis-tests.ts diff --git a/vis/index.d.ts b/vis/index.d.ts new file mode 100644 index 0000000000..a46480228c --- /dev/null +++ b/vis/index.d.ts @@ -0,0 +1,1753 @@ +// Type definitions for vis.js +// Project: https://github.com/almende/vis +// Definitions by: Michaël Bitard , Adrian Caballero , Severin , kaktus40 , Matthieu Maitre +// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped + +declare namespace vis { + type IdType = string | number; + type SubgroupType = IdType; + type DateType = Date | number | string; + type HeightWidthType = IdType; + type TimelineTimeAxisScaleType = 'millisecond' | 'second' | 'minute' | 'hour' | 'weekday' | 'day' | 'month' | 'year'; + type TimelineEventPropertiesResultWhatType = 'item' | 'background' | 'axis' | 'group-label' | 'custom-time' | 'current-time'; + type TimelineEvents = + 'currentTimeTick' | + 'click' | + 'contextmenu' | + 'doubleClick' | + 'groupDragged' | + 'changed' | + 'rangechange' | + 'rangechanged' | + 'select' | + 'timechange' | + 'timechanged'; + + interface DataItem { + className?: string; + content: string; + end?: DateType; + group?: any; + id?: IdType; + start: DateType; + style?: string; + subgroup?: SubgroupType; + title?: string; + type?: string; + editable?: boolean; + } + + interface DataGroup { + className?: string; + content: string; + id: IdType; + style?: string; + subgroup?: SubgroupType; + title?: string; + } + + interface TimelineEditableOption { + add?: boolean; + remove?: boolean; + updateGroup?: boolean; + updateTime?: boolean; + } + + interface TimelineGroupEditableOption { + add?: boolean; + remove?: boolean; + order?: boolean; + } + + interface TimelineMarginItem { + horizontal?: number; + vertical?: number; + } + + type TimelineMarginItemType = number | TimelineMarginItem; + + interface TimelineMarginOption { + axis?: number; + item?: TimelineMarginItemType; + } + + interface TimelineOrientationOption { + axis?: string; + item?: string; + } + + interface TimelineTimeAxisOption { + scale?: TimelineTimeAxisScaleType; + step?: number; + } + + type TimelineOptionsConfigureFunction = (option: string, path: Array) => boolean; + type TimelineOptionsConfigureType = boolean | TimelineOptionsConfigureFunction; + type TimelineOptionsDataAttributesType = boolean | string | string[]; + type TimelineOptionsEditableType = boolean | TimelineEditableOption; + type TimelineOptionsGroupEditableType = boolean | TimelineGroupEditableOption; + type TimelineOptionsGroupOrderType = string | Function; // TODO + type TimelineOptionsGroupOrderSwapFunction = (fromGroup: any, toGroup: any, groups: DataSet) => void; + type TimelineOptionsMarginType = number | TimelineMarginOption; + type TimelineOptionsOrientationType = string | TimelineOrientationOption; + type TimelineOptionsSnapFunction = (date: Date, scale: string, step: number) => Date | number; + // type TimelineOptions = + + interface TimelineOptions { + align?: string; + autoResize?: boolean; + clickToUse?: boolean; + configure?: TimelineOptionsConfigureType; + dataAttributes?: TimelineOptionsDataAttributesType; + editable?: TimelineOptionsEditableType; + end?: DateType; + format?: any; // TODO + groupEditable?: TimelineOptionsGroupEditableType; + groupOrder?: TimelineOptionsGroupOrderType; + groupOrderSwap?: TimelineOptionsGroupOrderSwapFunction; + groupTemplate?: Function; // TODO + height?: HeightWidthType; + hiddenDates?: any; // TODO + itemsAlwaysDraggable?: boolean; + locale?: string; + locales?: any; // TODO + moment?: Function; // TODO + margin?: TimelineOptionsMarginType; + max?: DateType; + maxHeight?: HeightWidthType; + maxMinorChars?: number; + min?: DateType; + minHeight?: HeightWidthType; + moveable?: boolean; + multiselect?: boolean; + multiselectPerGroup?: boolean; + onAdd?: Function; // TODO + onAddGroup?: Function; // TODO + onUpdate?: Function; // TODO + onMove?: Function; // TODO + onMoveGroup?: Function; // TODO + onMoving?: Function; // TODO + onRemove?: Function; // TODO + onRemoveGroup?: Function; // TODO + order?: Function; // TODO + orientation?: TimelineOptionsOrientationType; + selectable?: boolean; + showCurrentTime?: boolean; + showMajorLabels?: boolean; + showMinorLabels?: boolean; + stack?: boolean; + snap?: TimelineOptionsSnapFunction; + start?: DateType; + template?: Function; // TODO + throttleRedraw?: number; + timeAxis?: TimelineTimeAxisOption; + type?: string; + width?: HeightWidthType; + zoomable?: boolean; + zoomKey?: string; + zoomMax?: number; + zoomMin?: number; + } + + interface TimelineFitAnimation { + duration?: number; + easingFunction?: string; + } + + type TimelineFitAnimationType = boolean | TimelineFitAnimation; + + interface TimelineFitOptions { + animation?: TimelineFitAnimationType; + } + + interface TimelineEventPropertiesResult { + group?: number; + item?: number; + pageX: number; + pageY: number; + x: number; + y: number; + time: Date; + snappedTime: Date; + what?: TimelineEventPropertiesResultWhatType; + event: Event; + } + + /** + * Options that can be passed to a DataSet. + * + * @interface DataSetOptions + */ + interface DataSetOptions extends DataSetQueueOptions { + /** + * The name of the field containing the id of the items. + * When data is fetched from a server which uses some specific field to identify items, + * this field name can be specified in the DataSet using the option fieldId. + * For example CouchDB uses the field "_id" to identify documents. + * + * @type {string} + * @memberOf DataSetOptions + */ + fieldId?: string; + + /** + * An object containing field names as key, and data types as value. + * By default, the type of the properties of items are left unchanged. + * Item properties can be normalized by specifying a field type. + * This is useful for example to automatically convert stringified dates coming + * from a server into JavaScript Date objects. + * The available data types are listed in section Data Types. + * + * @type {*} + * @memberOf DataSetOptions + */ + type?: any; + } + + interface DataSetQueueOptions { + /** + * Queue data changes ('add', 'update', 'remove') and flush them at once. + * The queue can be flushed manually by calling DataSet.flush(), + * or can be flushed after a configured delay or maximum number of entries. + * When queue is true, a queue is created with default options. + * Options can be specified by providing an object: + * delay: number - The queue will be flushed automatically after an inactivity of this delay in milliseconds. Default value is null. + * max: number - When the queue exceeds the given maximum number of entries, the queue is flushed automatically. Default value is Infinity. + * + * @type {(any | boolean)} + * @memberOf DataSetOptions + */ + queue?: any | boolean; + } + + export class DataSet { + + /** + * Creates an instance of DataSet. + * + * @param {DataSetOptions} [options] DataSet options. + * + * @memberOf DataSet + */ + constructor(options: DataSetOptions); + + /** + * Creates an instance of DataSet. + * + * @param {Array} [data] An Array with items. + * @param {DataSetOptions} [options] DataSet options. + * + * @memberOf DataSet + */ + constructor(data?: Array, options?: DataSetOptions); + + /** + * The number of items in the DataSet. + * + * @type {number} + * @memberOf DataSet + */ + length: number; + + /** + * Add one or multiple items to the DataSet. + * Adding an item will fail when there already is an item with the same id. + * + * @param {(T | T[])} data data can be a single item or an array with items. + * @param {IdType} [senderId] Optional sender id. + * @returns {IdType[]} The function returns an array with the ids of the added items. + * + * @memberOf DataSet + */ + add(data: T | T[], senderId?: IdType): IdType[]; + + /** + * Clear all data from the DataSet. + * + * @param {IdType} [senderId] Optional sender id. + * @returns {IdType[]} The function returns an array with the ids of the removed items. + * + * @memberOf DataSet + */ + clear(senderId?: IdType): IdType[]; + + /** + * Find all distinct values of a specified field. + * If data items do not contain the specified field are ignored. + * + * @param {string} field The search term. + * @returns {any[]} Returns an unordered array containing all distinct values. + * + * @memberOf DataSet + */ + distinct(field: string): any[]; + + /** + * Flush queued changes. + * Only available when the DataSet is configured with the option queue. + * + * @memberOf DataSet + */ + flush(): void; + + /** + * Execute a callback function for every item in the dataset. + * + * @param {(item: T, id: IdType) => void} callback The item callback. + * @param {DataSelectionOptions} [options] Optional options + * + * @memberOf DataSet + */ + forEach(callback: (item: T, id: IdType) => void, options?: DataSelectionOptions): void; + + /** + * Get all items from the DataSet. + * + * @param {DataSelectionOptions} [options] Optional options. + * @returns {T[]} When no item is found, null is returned when a single item was requested, + * and and empty Array is returned in case of multiple id's. + * + * @memberOf DataSet + */ + get(options?: DataSelectionOptions): T[]; + + /** + * Get a single item from the DataSet. + * + * @param {IdType} id The item id. + * @param {DataSelectionOptions} [options] + * @returns {T} When no item is found, null is returned when a single item was requested, + * and and empty Array is returned in case of multiple id's. + * + * @memberOf DataSet + */ + get(id: IdType, options?: DataSelectionOptions): T; + + /** + * Get multiple items from the DataSet. + * + * @param {IdType[]} ids Array of item ids. + * @param {DataSelectionOptions} [options] Optional options. + * @returns {T[]} When no item is found, null is returned when a single item was requested, + * and and empty Array is returned in case of multiple id's. + * + * @memberOf DataSet + */ + get(ids: IdType[], options?: DataSelectionOptions): T[]; + + /** + * Get the DataSet itself. + * In case of a DataView, this function does not return the DataSet + * to which the DataView is connected. + * + * @returns {DataSet} The DataSet itself. + * + * @memberOf DataSet + */ + getDataSet(): DataSet; + + /** + * Get ids of all items or of a filtered set of items. + * + * @param {DataSelectionOptions} [options] + * @returns {IdType[]} ids of all items or of a filtered set of items. + * + * @memberOf DataSet + */ + getIds(options?: DataSelectionOptions): IdType[]; + + /** + * Map every item in the DataSet. + * + * @param {(item: T, id: IdType) => T} callback The mapping callback. + * @param {DataSelectionOptions} [options] Optional options. + * @returns {T[]} The mapped items. + * + * @memberOf DataSet + */ + map(callback: (item: T, id: IdType) => any, options?: DataSelectionOptions): any[]; + + /** + * Find the item with maximum value of specified field. + * + * @param {string} field + * @returns {T} Returns null if no item is found. + * + * @memberOf DataSet + */ + max(field: string): T; + + /** + * Find the item with minimum value of specified field. + * + * @param {string} field + * @returns {T} Returns null if no item is found. + * + * @memberOf DataSet + */ + min(field: string): T; + + /** + * Subscribe from an event. + * + * @param {string} event The event name. + * @param {((event: string, properties: any, senderId: IdType) => void)} callback + * a callback function which will be called each time the event occurs. + * + * @memberOf DataSet + */ + on(event: string, callback: (event: string, properties: any, senderId: IdType) => void): void; + + /** + * Unsubscribe to an event. + * + * @param {string} event The event name. + * @param {((event: string, properties: any, senderId: IdType) => void)} callback + * The exact same callback that was used when calling 'on'. + * + * @memberOf DataSet + */ + off(event: string, callback: (event: string, properties: any, senderId: IdType) => void): void; + + /** + * Remove one by id or by the items themselves. + * + * @param {IdType} id The item id. + * @param {IdType} [senderId] The sender id. + * @returns {IdType[]} Returns an array with the ids of the removed items. + * + * @memberOf DataSet + */ + remove(id: IdType, senderId?: IdType): IdType[]; + + /** + * Remove multiple items by id or by the items themselves. + * + * @param {IdType[]} ids The item ids. + * @param {IdType} [senderId] The sender id. + * @returns {IdType[]} Returns an array with the ids of the removed items. + * + * @memberOf DataSet + */ + remove(ids: IdType[], senderId?: IdType): IdType[]; + + /** + * Set options for the DataSet. + * + * @param {DataSetQueueOptions} [options] + * + * @memberOf DataSet + */ + setOptions(options?: DataSetQueueOptions): void; + + /** + * Update one or multiple existing items. + * When an item doesn't exist, it will be created. + * + * @param {(T | T[])} data a single item or an array with items. + * @param {IdType} [senderId] + * @returns {IdType[]} Returns an array with the ids of the updated items. + * + * @memberOf DataSet + */ + update(data: T | T[], senderId?: IdType): IdType[]; + } + + /** + * The DataSet contains functionality to format, filter, and sort data retrieved + * via the methods get, getIds, forEach, and map. + * These methods can have these options as a parameter. + * + * @interface DataSelectionOptions + */ + interface DataSelectionOptions { + /** + * An array with field names, or an object with current field name + * and new field name that the field is returned as. + * By default, all properties of the items are emitted. + * When fields is defined, only the properties whose name is specified + * in fields will be included in the returned items. + * + * @type {(string[] | any)} + * @memberOf DataSelectionOptions + */ + fields?: string[] | any; + + /** + * An object containing field names as key, and data types as value. + * By default, the type of the properties of an item are left unchanged. + * When a field type is specified, this field in the items will be converted to the specified type. + * This can be used for example to convert ISO strings containing a date to a JavaScript Date object, + * or convert strings to numbers or vice versa. The available data types are listed in section Data Types. + * + * @type {*} + * @memberOf DataSelectionOptions + */ + type?: any; + + /** + * Items can be filtered on specific properties by providing a filter function. + * A filter function is executed for each of the items in the DataSet, + * and is called with the item as parameter. + * The function must return a boolean. + * All items for which the filter function returns true will be emitted. + * See section Data Filtering. + * + * @memberOf DataSelectionOptions + */ + filter?: (item: T) => boolean; + + /** + * Order the items by a field name or custom sort function. + * + * @type {(string | any)} + * @memberOf DataSelectionOptions + */ + order?: string | any; + + /** + * Determine the type of output of the get function. + * Allowed values are 'Array' | 'Object'. + * The default returnType is an Array. + * The Object type will return a JSON object with the ID's as keys. + * + * @type {string} + * @memberOf DataSelectionOptions + */ + returnType?: string; + } + + export class DataView { + constructor(items: Array); + + length: number; + } + + type DataItemCollectionType = Array | DataSet | DataView; + type DataGroupCollectionType = Array | DataSet | DataView; + + export class Timeline { + constructor( + container: HTMLElement, + items: DataItemCollectionType, + groups: DataGroupCollectionType, + options?: TimelineOptions + ); + constructor( + container: HTMLElement, + items: DataItemCollectionType, + options?: TimelineOptions + ); + + addCustomTime(time: DateType, id?: IdType): IdType; + destroy(): void; + fit(options?: TimelineFitOptions): void; + focus(id: IdType, options?: TimelineFitOptions): void; + focus(ids: Array, options?: TimelineFitOptions): void; + getCurrentTime(): Date; + getCustomTime(id?: IdType): Date; + getEventProperties(event: Event): TimelineEventPropertiesResult; + getItemRange(): any; // TODO + getSelection(): Array; + getVisibleItems(): Array; + getWindow(): { start: Date, end: Date }; + moveTo(time: DateType, options?: TimelineFitOptions): void; + on(event: TimelineEvents, callback: Function): void; + off(event: TimelineEvents, callback: Function): void; + redraw(): void; + removeCustomTime(id: IdType): void; + setCurrentTime(time: DateType): void; + setCustomTime(time: DateType, id?: IdType): void; + setCustomTimeTitle(title: string, id?: IdType): void; + setData(data: { groups?: DataGroupCollectionType; items?: DataItemCollectionType }): void; + setGroups(groups?: DataGroupCollectionType): void; + setItems(items: DataItemCollectionType): void; + setOptions(options: TimelineOptions): void; + setSelection(id: IdType): void; + setSelection(ids: Array): void; + setWindow(start: DateType, end: DateType, options?: TimelineFitOptions): void; + } + + export interface ITimelineStatic { + new (id: HTMLElement, data: any, options?: any): vis.ITimeline; + } + + export interface ITimeline { + setGroups(groups?: ITimelineGroup[]): void; + setItems(items?: ITimelineItem[]): void; + getWindow(): ITimelineWindow; + setWindow(start: any, date: any): void; + focus(selection: any): void; + on(event?: string, callback?: (properties: any) => void): void; + } + + export interface ITimelineWindow { + start: Date; + end: Date; + } + + export interface ITimelineItem { + id: number; + content: string; + group?: number; + start: number; + end?: number; + editable?: boolean; + } + + export interface ITimelineOptions { + stack?: boolean; + start?: any; + end?: any; + orientation?: string; + } + + export interface ITimelineGroup { + id: number; + content: string; + style?: string; + } + + export interface IVisSelectProperties { + items: number[]; + } + + export interface INetwork { + network?: any; + selectNodes?(nodeIds: string[], highlightEdges?: boolean): void; + unselectAll?(): void; + fit?(): void; + } + + /** + * Network is a visualization to display networks and networks consisting of nodes and edges. + * The visualization is easy to use and supports custom shapes, styles, colors, sizes, images, and more. + * The network visualization works smooth on any modern browser for up to a few thousand nodes and edges. + * To handle a larger amount of nodes, Network has clustering support. Network uses HTML canvas for rendering. + * + * @export + * @class Network + * @implements {INetwork} + */ + export class Network { + + /** + * Creates an instance of Network. + * + * @param {HTMLElement} container the HTML element representing the network container + * @param {IData} data network data + * @param {IOptions} [options] optional network options + * + * @memberOf Network + */ + constructor(container: HTMLElement, data: IData, options?: IOptions); + + /** + * Remove the network from the DOM and remove all Hammer bindings and references. + * + * @memberOf Network + */ + destroy(): void; + + /** + * Override all the data in the network. + * If stabilization is enabled in the physics module, + * the network will stabilize again. + * This method is also performed when first initializing the network. + * + * @param {IData} data network data + * + * @memberOf Network + */ + setData(data: IData): void; + + /** + * Set the options. + * All available options can be found in the modules above. + * Each module requires it's own container with the module name to contain its options. + * + * @param {IOptions} options network options + * + * @memberOf Network + */ + setOptions(options: IOptions): void; + + /** + * Set an event listener. + * Depending on the type of event you get different parameters for the callback function. + * + * @param {string} eventName the name of the event, f.e. 'click' + * @param {(params?: any) => void} callback the callback function that will be raised + * + * @memberOf Network + */ + on(eventName: string, callback: (params?: any) => void): void; + + /** + * Remove an event listener. + * The function you supply has to be the exact same as the one you used in the on function. + * If no function is supplied, all listeners will be removed. + * + * @param {string} eventName the name of the event, f.e. 'click' + * @param {(params?: any) => void} [callback] the exact same callback function that was used when calling 'on' + * + * @memberOf Network + */ + off(eventName: string, callback?: (params?: any) => void): void; + + /** + * Set an event listener only once. + * After it has taken place, the event listener will be removed. + * Depending on the type of event you get different parameters for the callback function. + * + * @param {string} eventName the name of the event, f.e. 'click' + * @param {(params?: any) => void} callback the callback function that will be raised once + * + * @memberOf Network + */ + once(eventName: string, callback: (params?: any) => void): void; + + /** + * This function converts canvas coordinates to coordinates on the DOM. + * Input and output are in the form of {x:Number, y:Number} (IPosition interface). + * The DOM values are relative to the network container. + * + * @param {IPosition} position the canvas coordinates + * @returns {IPosition} the DOM coordinates + * + * @memberOf Network + */ + canvasToDOM(position: IPosition): IPosition; + + /** + * This function converts DOM coordinates to coordinates on the canvas. + * Input and output are in the form of {x:Number,y:Number} (IPosition interface). + * The DOM values are relative to the network container. + * + * @param {IPosition} position the DOM coordinates + * @returns {IPosition} the canvas coordinates + * + * @memberOf Network + */ + DOMtoCanvas(position: IPosition): IPosition; + + /** + * Redraw the network. + * + * @memberOf Network + */ + redraw(): void; + + /** + * Set the size of the canvas. + * This is automatically done on a window resize. + * + * @param {string} width width in a common format, f.e. '100px' + * @param {string} height height in a common format, f.e. '100px' + * + * @memberOf Network + */ + setSize(width: string, height: string): void; + + /** + * The joinCondition function is presented with all nodes. + * + * @param {IClusterOptions} [options] + * + * @memberOf Network + */ + cluster(options?: IClusterOptions): void; + + /** + * This method looks at the provided node and makes a cluster of it and all it's connected nodes. + * The behaviour can be customized by proving the options object. + * All options of this object are explained below. + * The joinCondition is only presented with the connected nodes. + * + * @param {string} nodeId the id of the node + * @param {IClusterOptions} [options] the cluster options + * + * @memberOf Network + */ + clusterByConnection(nodeId: string, options?: IClusterOptions): void; + + /** + * This method checks all nodes in the network and those with a equal or higher + * amount of edges than specified with the hubsize qualify. + * If a hubsize is not defined, the hubsize will be determined as the average + * value plus two standard deviations. + * For all qualifying nodes, clusterByConnection is performed on each of them. + * The options object is described for clusterByConnection and does the same here. + * + * @param {number} [hubsize] optional hubsize + * @param {IClusterOptions} [options] optional cluster options + * + * @memberOf Network + */ + clusterByHubsize(hubsize?: number, options?: IClusterOptions): void; + + /** + * This method will cluster all nodes with 1 edge with their respective connected node. + * + * @param {IClusterOptions} [options] optional cluster options + * + * @memberOf Network + */ + clusterOutliers(options?: IClusterOptions): void; + + /** + * Nodes can be in clusters. + * Clusters can also be in clusters. + * This function returns an array of nodeIds showing where the node is. + * + * Example: + * cluster 'A' contains cluster 'B', cluster 'B' contains cluster 'C', + * cluster 'C' contains node 'fred'. + * + * network.clustering.findNode('fred') will return ['A','B','C','fred']. + * + * @param {string} nodeId the node id. + * @returns {string[]} an array of nodeIds showing where the node is + * + * @memberOf Network + */ + findNode(nodeId: string): string[]; + + /** + * Returns true if the node whose ID has been supplied is a cluster. + * + * @param {string} nodeId the node id. + * @returns {boolean} + * + * @memberOf Network + */ + isCluster(nodeId: string): boolean; + + /** + * Returns an array of all nodeIds of the nodes that + * would be released if you open the cluster. + * + * @param {string} clusterNodeId the id of the cluster node + * @returns {string[]} + * + * @memberOf Network + */ + getNodesInCluster(clusterNodeId: string): string[]; + + /** + * Opens the cluster, releases the contained nodes and edges, + * removing the cluster node and cluster edges. + * The options object is optional and currently supports one option, + * releaseFunction, which is a function that can be used to manually + * position the nodes after the cluster is opened. + * + * @param {string} nodeId the node id + * @param {IOpenClusterOptions} [options] optional open cluster options + * + * @memberOf Network + */ + openCluster(nodeId: string, options?: IOpenClusterOptions): void; + + /** + * If you like the layout of your network + * and would like it to start in the same way next time, + * ask for the seed using this method and put it in the layout.randomSeed option. + * + * @returns {number} the current seed of the network. + * + * @memberOf Network + */ + getSeed(): number; + + /** + * Programatically enable the edit mode. + * Similar effect to pressing the edit button. + * + * @memberOf Network + */ + enableEditMode(): void; + + /** + * Programatically disable the edit mode. + * Similar effect to pressing the close icon (small cross in the corner of the toolbar). + * + * @memberOf Network + */ + disableEditMode(): void; + + /** + * Go into addNode mode. Having edit mode or manipulation enabled is not required. + * To get out of this mode, call disableEditMode(). + * The callback functions defined in handlerFunctions still apply. + * To use these methods without having the manipulation GUI, make sure you set enabled to false. + * + * @memberOf Network + */ + addNodeMode(): void; + + /** + * Edit the selected node. + * The explaination from addNodeMode applies here as well. + * + * @memberOf Network + */ + editNode(): void; + + /** + * Go into addEdge mode. + * The explaination from addNodeMode applies here as well. + * + * @memberOf Network + */ + addEdgeMode(): void; + + /** + * Go into editEdge mode. + * The explaination from addNodeMode applies here as well. + * + * @memberOf Network + */ + editEdgeMode(): void; + + /** + * Delete selected. + * Having edit mode or manipulation enabled is not required. + * + * @memberOf Network + */ + deleteSelected(): void; + + /** + * Returns the x y positions in canvas space of the nodes with the supplied nodeIds as an object. + * + * Alternative inputs are a String containing a nodeId or nothing. + * When a String is supplied, the position of the node corresponding to the ID is returned. + * When nothing is supplied, the positions of all nodes are returned. + * + * @param {string[]} nodeIds + * @returns {{[nodeId: string]: IPosition}} + * + * @memberOf Network + */ + getPositions(nodeIds: string[]): { [nodeId: string]: IPosition }; + getPositions(nodeId: string): IPosition; + getPositions(): { [nodeId: string]: IPosition }; + + /** + * When using the vis.DataSet to load your nodes into the network, + * this method will put the X and Y positions of all nodes into that dataset. + * If you're loading your nodes from a database and have this dynamically coupled with the DataSet, + * you can use this to stablize your network once, then save the positions in that database + * through the DataSet so the next time you load the nodes, stabilization will be near instantaneous. + * + * If the nodes are still moving and you're using dynamic smooth edges (which is on by default), + * you can use the option stabilization.onlyDynamicEdges in the physics module to improve initialization time. + * + * This method does not support clustering. + * At the moment it is not possible to cache positions when using clusters since + * they cannot be correctly initialized from just the positions. + * + * @memberOf Network + */ + storePositions(): void; + + /** + * You can use this to programatically move a node. + * The supplied x and y positions have to be in canvas space! + * + * @param {string} nodeId the node that will be moved + * @param {number} x new canvas space x position + * @param {number} y new canvas space y position + * + * @memberOf Network + */ + moveNode(nodeId: string, x: number, y: number): void; + + /** + * Returns a bounding box for the node including label. + * + * @param {string} nodeId + * @returns {IBoundingBox} + * + * @memberOf Network + */ + getBoundingBox(nodeId: string): IBoundingBox; + + /** + * Returns an array of nodeIds of the all the nodes that are directly connected to this node. + * If you supply an edgeId, vis will first match the id to nodes. + * If no match is found, it will search in the edgelist and return an array: [fromId, toId]. + * + * @param {string} nodeOrEdgeId a node or edge id + * @returns {(string[] | {fromId: string, toId: string}[])} + * + * @memberOf Network + */ + getConnectedNodes(nodeOrEdgeId: string): string[] | { fromId: string, toId: string }[]; + + /** + * Returns an array of edgeIds of the edges connected to this node. + * + * @param {string} nodeId the node id + * @returns {string[]} + * + * @memberOf Network + */ + getConnectedEdges(nodeId: string): string[]; + + /** + * Start the physics simulation. + * This is normally done whenever needed and is only really useful + * if you stop the simulation yourself and wish to continue it afterwards. + * + * @memberOf Network + */ + startSimulation(): void; + + /** + * This stops the physics simulation and triggers a stabilized event. + * Tt can be restarted by dragging a node, + * altering the dataset or calling startSimulation(). + * + * @memberOf Network + */ + stopSimulation(): void; + + /** + * You can manually call stabilize at any time. + * All the stabilization options above are used. + * You can optionally supply the number of iterations it should do. + * + * @param {number} [iterations] the number of iterations it should do + * + * @memberOf Network + */ + stabilize(iterations?: number): void; + + /** + * Returns an object with selected nodes and edges ids. + * + * @returns {{ nodes: string[], edges: string[] }} + * + * @memberOf Network + */ + getSelection(): { nodes: string[], edges: string[] }; + + /** + * Returns an array of selected node ids like so: + * [nodeId1, nodeId2, ..]. + * + * @returns {string[]} + * + * @memberOf Network + */ + getSelectedNodes(): string[]; + + /** + * Returns an array of selected edge ids like so: + * [edgeId1, edgeId2, ..]. + * + * @returns {string[]} + * + * @memberOf Network + */ + getSelectedEdges(): string[]; + + /** + * Returns a nodeId or undefined. + * The DOM positions are expected to be in pixels from the top left corner of the canvas. + * + * @param {IPosition} position + * @returns {string} + * + * @memberOf Network + */ + getNodeAt(position: IPosition): string; + + /** + * Returns a edgeId or undefined. + * The DOM positions are expected to be in pixels from the top left corner of the canvas. + * + * @param {IPosition} position + * @returns {string} + * + * @memberOf Network + */ + getEdgeAt(position: IPosition): string; + + /** + * Selects the nodes corresponding to the id's in the input array. + * If highlightEdges is true or undefined, the neighbouring edges will also be selected. + * This method unselects all other objects before selecting its own objects. Does not fire events. + * + * @param {string[]} nodeIds + * @param {boolean} [highlightEdges] + * + * @memberOf Network + */ + selectNodes(nodeIds: string[], highlightEdges?: boolean): void; + + /** + * Selects the edges corresponding to the id's in the input array. + * This method unselects all other objects before selecting its own objects. + * Does not fire events. + * + * @param {string[]} edgeIds + * + * @memberOf Network + */ + selectEdges(edgeIds: string[]): void; + + /** + * Sets the selection. + * You can also pass only nodes or edges in selection object. + * + * @param {{ nodes: string[], edges: string[] }} selection + * @param {ISelectionOptions} [options] + * + * @memberOf Network + */ + setSelection(selection: { nodes: string[], edges: string[] }, options?: ISelectionOptions): void; + + /** + * Unselect all objects. + * Does not fire events. + * + * @memberOf Network + */ + unselectAll(): void; + + /** + * Returns the current scale of the network. + * 1.0 is comparible to 100%, 0 is zoomed out infinitely. + * + * @returns {number} the current scale of the network + * + * @memberOf Network + */ + getScale(): number; + + /** + * Returns the current central focus point of the view in the form: { x: {Number}, y: {Number} } + * + * @returns {IPosition} the view position; + * + * @memberOf Network + */ + getViewPosition(): IPosition; + + /** + * Zooms out so all nodes fit on the canvas. + * + * @param {IFitOptions} [options] All options are optional for the fit method + * + * @memberOf Network + */ + fit(options?: IFitOptions): void; + + /** + * You can focus on a node with this function. + * What that means is the view will lock onto that node, if it is moving, the view will also move accordingly. + * If the view is dragged by the user, the focus is broken. You can supply options to customize the effect. + * + * @param {string} nodeId + * @param {IFocusOptions} [options] + * + * @memberOf Network + */ + focus(nodeId: string, options?: IFocusOptions): void; + + /** + * You can animate or move the camera using the moveTo method. + * + * @param {IMoveToOptions} options + * + * @memberOf Network + */ + moveTo(options: IMoveToOptions): void; + + /** + * Programatically release the focussed node. + * + * @memberOf Network + */ + releaseNode(): void; + + /** + * If you use the configurator, you can call this method to get an options object that contains + * all differences from the default options caused by users interacting with the configurator. + * + * @returns {*} + * + * @memberOf Network + */ + getOptionsFromConfigurator(): any; + } + + /** + * Options interface for focus function. + * + * @export + * @interface IFocusOptions + * @extends {IViewPortOptions} + */ + export interface IFocusOptions extends IViewPortOptions { + /** + * Locked denotes whether or not the view remains locked to + * the node once the zoom-in animation is finished. + * Default value is true. + * + * @type {boolean} + * @memberOf IFocusOptions + */ + locked?: boolean; + } + + /** + * Base options interface for some viewport functions. + * + * @export + * @interface IViewPortOptions + */ + export interface IViewPortOptions { + /** + * The scale is the target zoomlevel. + * Default value is 1.0. + * + * @type {number} the scale. + * @memberOf IFocusOptions + */ + scale?: number; + + /** + * The offset (in DOM units) is how many pixels from the center the view is focussed. + * Default value is {x:0,y:0} + * + * @type {IPosition} + * @memberOf IFocusOptions + */ + offset?: IPosition; + + /** + * For animation you can either use a Boolean to use it with the default options or + * disable it or you can define the duration (in milliseconds) and easing function manually. + * + * @type {(IAnimationOptions | boolean)} + * @memberOf IFitOptions + */ + animation?: IAnimationOptions | boolean; + } + + /** + * You will have to define at least a scale, position or offset. + * Otherwise, there is nothing to move to. + * + * @export + * @interface IMoveToOptions + * @extends {IViewPortOptions} + */ + export interface IMoveToOptions extends IViewPortOptions { + /** + * The position (in canvas units!) is the position of the central focus point of the camera. + * + * @type {IPosition} + * @memberOf IMoveToOptions + */ + position?: IPosition; + } + + /** + * Animation options interface. + * + * @export + * @interface IAnimationOptions + */ + export interface IAnimationOptions { + + /** + * The duration (in milliseconds). + * + * @type {number} + * @memberOf IAnimationOptions + */ + duration: number; + /** + * The easing function. + * + * Available are: + * linear, easeInQuad, easeOutQuad, easeInOutQuad, easeInCubic, + * easeOutCubic, easeInOutCubic, easeInQuart, easeOutQuart, easeInOutQuart, + * easeInQuint, easeOutQuint, easeInOutQuint. + * + * @type {string} + * @memberOf IAnimationOptions + */ + easingFunction: string; + } + + /** + * Optional options for the fit method. + * + * @export + * @interface IFitOptions + */ + export interface IFitOptions { + + /** + * The nodes can be used to zoom to fit only specific nodes in the view. + * + * @type {string[]} + * @memberOf IFitOptions + */ + nodes?: string[]; + + /** + * For animation you can either use a Boolean to use it with the default options or + * disable it or you can define the duration (in milliseconds) and easing function manually. + * + * @type {(IAnimationOptions | boolean)} + * @memberOf IFitOptions + */ + animation: IAnimationOptions | boolean; + } + + export interface ISelectionOptions { + unselectAll?: boolean; + highlightEdges?: boolean; + } + + /** + * These values are in canvas space. + * + * @export + * @interface IBoundingBox + */ + export interface IBoundingBox { + top: number; + left: number; + right: number; + bottom: number; + } + + /** + * Cluster methods options interface. + * + * @export + * @interface IClusterOptions + */ + export interface IClusterOptions { + + /** + * Optional for all but the cluster method. + * The cluster module loops over all nodes that are selected to be in the cluster + * and calls this function with their data as argument. If this function returns true, + * this node will be added to the cluster. You have access to all options (including the default) + * as well as any custom fields you may have added to the node to determine whether or not to include it in the cluster. + * + * @memberOf IClusterOptions + */ + joinCondition?: (nodeOptions: any) => boolean; + + /** + * Optional. + * Before creating the new cluster node, this (optional) function will be called with the properties + * supplied by you (clusterNodeProperties), all contained nodes and all contained edges. + * You can use this to update the properties of the cluster based on which items it contains. + * The function should return the properties to create the cluster node. + * + * @type {(clusterOptions: any, childNodesOptions: any[], childEdgesOptions: any[])} + * @memberOf IClusterOptions + */ + processProperties?: (clusterOptions: any, childNodesOptions: any[], childEdgesOptions: any[]) => any; + + /** + * Optional. + * This is an object containing the options for the cluster node. + * All options described in the nodes module are allowed. + * This allows you to style your cluster node any way you want. + * This is also the style object that is provided in the processProperties function for fine tuning. + * If undefined, default node options will be used. + * + * @type {INodeOptions} + * @memberOf IClusterOptions + */ + clusterNodeProperties?: INodeOptions; + + /** + * Optional. + * This is an object containing the options for the edges connected to the cluster. + * All options described in the edges module are allowed. + * Using this, you can style the edges connecting to the cluster any way you want. + * If none are provided, the options from the edges that are replaced are used. + * If undefined, default edge options will be used. + * + * @type {IEdgeOptions} + * @memberOf IClusterOptions + */ + clusterEdgeProperties?: IEdgeOptions; + } + + /** + * Options for the openCluster function of Network. + * + * @export + * @interface IOpenClusterOptions + */ + export interface IOpenClusterOptions { + + /** + * A function that can be used to manually position the nodes after the cluster is opened. + * The containedNodesPositions contain the positions of the nodes in the cluster at the + * moment they were clustered. This function is expected to return the newPositions, + * which can be the containedNodesPositions (altered) or a new object. + * This has to be an object with keys equal to the nodeIds that exist in the + * containedNodesPositions and an {x:x,y:y} position object. + * + * For all nodeIds not listed in this returned object, + * we will position them at the location of the cluster. + * This is also the default behaviour when no releaseFunction is defined. + * + * @memberOf IOpenClusterOptions + */ + releaseFunction: (clusterPosition: IPosition, containedNodesPositions: { [nodeId: string]: IPosition }) => { [nodeId: string]: IPosition }; + } + + export interface IPosition { + x: number; + y: number; + } + + export interface IProperties { + + nodes: string[]; + + edges: string[]; + + event: string[]; + + pointer: { + DOM: IPosition; + canvas: IPosition; + }; + + previousSelection?: { + nodes: string[]; + edges: string[]; + }; + } + + export interface Callback { + callback?: (params?: any) => void; + } + + export interface IData { + nodes?: INode[] | DataSet; + edges?: IEdge[] | DataSet; + } + + export interface INode { + id?: IdType; + label?: string; + x?: number; + y?: number; + fixed?: boolean; + image?: string; + shape?: string; + } + + export interface IEdge { + from?: IdType; + to?: IdType; + id?: IdType; + } + + export interface IOptions { + autoResize?: boolean; + + width?: string; + + height?: string; + + locale?: string; + + locales?: string[]; + + clickToUse?: boolean; + + configure?: any; // http://visjs.org/docs/network/configure.html# + + edges?: IEdgeOptions; + + nodes?: INodeOptions; + + groups?: any; + + layout?: any; // http://visjs.org/docs/network/layout.html + + interaction?: any; // visjs.org/docs/network/interaction.html?keywords=edges + + manipulation?: any; // http://visjs.org/docs/network/manipulation.html# + + physics?: any; // http://visjs.org/docs/network/physics.html# + } + + export interface INodeOptions { + borderWidth?: number; + + borderWidthSelected?: number; + + brokenImage?: string; + + color?: { + border?: string, + background?: string, + highlight?: string | { + border?: string, + background?: string, + }, + hover?: string | { + border?: string, + background?: string, + } + }; + + fixed?: boolean | { + x?: boolean, + y?: boolean, + }; + + font?: string | { + color: string, + size: number, // px + face: string, + background: string, + strokeWidth: number, // px + strokeColor: string, + align: string, + }; + + group?: string; + + hidden?: boolean; + + icon?: { + face?: string, + code?: string, + size?: number, // 50, + color?: string, + }; + + id?: string; + + image?: string; + + label?: string; + + labelHighlightBold?: boolean; + + level?: number; + + mass?: number; + + physics?: boolean; + + scaling?: IOptionsScaling; + + shadow?: boolean | IOptionsShadow; + + shape?: string; + + shapeProperties?: { + borderDashes: boolean | number[], // only for borders + borderRadius: number, // only for box shape + interpolation: boolean, // only for image and circularImage shapes + useImageSize: boolean, // only for image and circularImage shapes + useBorderWithImage: boolean // only for image shape + }; + + size?: number; + + title?: string; + + value?: number; + + x?: number; + + y?: number; + } + + export interface IEdgeOptions { + arrows?: string | { + to?: boolean | { + enabled?: boolean, + scaleFactor?: number, + }, + middle?: boolean | { + enabled?: boolean, + scaleFactor?: number, + }, + from: boolean | { + enabled?: boolean, + scaleFactor?: number, + } + }; + + arrowStrikethrough?: boolean; + + color?: string | { + color?: string, + highlight?: string, + hover?: string, + inherit?: boolean | string, + opacity?: number, + }; + + dashes?: boolean | number[]; + + font?: string | { + color?: string, + size?: number, // px + face?: string, + background?: string, + strokeWidth?: number, // px + strokeColor?: string, + align?: string, + }; + + from?: number | string; + + hidden?: boolean; + + hoverWidth?: number; // please note, hoverWidth could be also a function. This case is not represented here + + id?: string; + + label?: string; + + labelHighlightBold?: boolean; + + length?: number; + + physics?: boolean; + + scaling?: IOptionsScaling; + + selectionWidth?: number; // please note, selectionWidth could be also a function. This case is not represented here + + selfReferenceSize?: number; + + shadow?: boolean | IOptionsShadow; + + smooth?: boolean | { + enabled: boolean, + type: string, + forceDirection?: string | boolean, + roundness: number, + }; + + title?: string; + + to?: number | string; + + value?: number; + + width?: number; + } + + export interface IOptionsScaling { + min?: number; + max?: number; + label?: boolean | { + enabled?: boolean, + min?: number, + max?: number, + maxVisible?: number, + drawThreshold?: number + }; + customScalingFunction?(min?: number, max?: number, total?: number, value?: number): number; + } + + export interface IOptionsShadow { + enabled: boolean; + color: string; + size: number; + x: number; + y: number; + } + + export interface IEvents { + click?(properties?: IProperties): void; + + doubleClick?(properties?: IProperties): void; + + oncontext?(properties?: IProperties): void; + + hold?(properties?: IProperties): void; + + release?(properties?: IProperties): void; + + select?(properties?: IProperties): void; + + selectNode?(properties?: IProperties): void; + + selectEdge?(properties?: IProperties): void; + + deselectNode?(properties?: IProperties): void; + + deselectEdge?(properties?: IProperties): void; + + dragStart?(properties?: IProperties): void; + + dragging?(properties?: IProperties): void; + + dragEnd?(properties?: IProperties): void; + + hoverNode?(node?: string): void; + + blurNode?(node?: string): void; + + hoverEdge?(node?: string): void; + + blurEdge?(node?: string): void; + + zoom?(node?: string): void; + + showPopup?(node?: string): void; + + hidePopup?(node?: string): void; + + startStabilizing?(): void; + + stabilizationProgress?(properties?: { + iterations?: number, + total?: number, + }): void; + + stabilizationIterationsDone?(): void; + + stabilized?(properties?: { + iterations?: number, + }): void; + + resize?(properties?: { + width: number, + height: number, + oldWidth: number, + oldHeight: number, + }): void; + + initRedraw?(): void; + + beforeDrawing?(canvasContext?: any): void; + + afterDrawing?(canvasContext?: any): void; + + animationFinished?(): void; + + configChange?(properties?: any): void; + } +} + +declare module "vis" { + export = vis; +} diff --git a/vis/tsconfig.json b/vis/tsconfig.json new file mode 100644 index 0000000000..7bc6546349 --- /dev/null +++ b/vis/tsconfig.json @@ -0,0 +1,19 @@ +{ + "compilerOptions": { + "module": "commonjs", + "target": "es6", + "noImplicitAny": true, + "strictNullChecks": true, + "baseUrl": "../", + "typeRoots": [ + "../" + ], + "types": [], + "noEmit": true, + "forceConsistentCasingInFileNames": true + }, + "files": [ + "index.d.ts", + "vis-tests.ts" + ] +} \ No newline at end of file diff --git a/vis/tslint.json b/vis/tslint.json new file mode 100644 index 0000000000..2221e40e4a --- /dev/null +++ b/vis/tslint.json @@ -0,0 +1 @@ +{ "extends": "../tslint.json" } \ No newline at end of file diff --git a/vis/vis-tests.ts b/vis/vis-tests.ts new file mode 100644 index 0000000000..b6240abca4 --- /dev/null +++ b/vis/vis-tests.ts @@ -0,0 +1,197 @@ +/// + +// Test DataSet constructor +new vis.DataSet(); +new vis.DataSet({}); +new vis.DataSet([]); +new vis.DataSet([], {}); + +// Test Network constructor +new vis.Network(new HTMLDivElement(), { nodes: new vis.DataSet(), edges: new vis.DataSet() }, {}); + +// +// Test code sample from http://visjs.org/docs/data/dataset.html#Example +// + +interface TestData { + id: number; + text?: string; + date?: any; + group?: number; + balance?: number; + first?: boolean; +} + +// create a DataSet +var options = {}; +var data = new vis.DataSet(options); + +// add items +// note that the data items can contain different properties and data formats +data.add([ + { id: 1, text: 'item 1', date: new Date(2013, 6, 20), group: 1, first: true }, + { id: 2, text: 'item 2', date: '2013-06-23', group: 2 }, + { id: 3, text: 'item 3', date: '2013-06-25', group: 2 }, + { id: 4, text: 'item 4' } +]); + +// subscribe to any change in the DataSet +data.on('*', function (event, properties, senderId) { + console.log('event', event, properties); +}); + +// update an existing item +data.update({ id: 2, group: 1 }); + +// remove an item +data.remove(4); + +// get all ids +var ids = data.getIds(); +console.log('ids', ids); + +// get a specific item +var item1 = data.get(1); +console.log('item1', item1); + +// retrieve a filtered subset of the data +var items = data.get({ + filter: function (item) { + return item.group == 1; + } +}); +console.log('filtered items', items); + +// retrieve formatted items +var items = data.get({ + fields: ['id', 'date'], + type: { + date: 'ISODate' + } +}); +console.log('formatted items', items); + +// +// Test code sample from http://visjs.org/docs/data/dataset.html#Subscriptions +// + +// create a DataSet +var data = new vis.DataSet(); + +// subscribe to any change in the DataSet +data.on('*', function (event, properties, senderId) { + console.log('event:', event, 'properties:', properties, 'senderId:', senderId); +}); + +// add an item +data.add({ id: 1, text: 'item 1' }); // triggers an 'add' event +data.update({ id: 1, text: 'item 1 (updated)' }); // triggers an 'update' event +data.remove(1); // triggers an 'remove' event + +// +// Test code sample from http://visjs.org/docs/data/dataset.html#Data_Manipulation +// + +// create a DataSet +var data = new vis.DataSet(); + +// add items +data.add([ + { id: 1, text: 'item 1' }, + { id: 2, text: 'item 2' }, + { id: 3, text: 'item 3' } +]); + +// update an item +data.update({ id: 2, text: 'item 2 (updated)' }); + +// remove an item +data.remove(3); + +// +// Test code sample from http://visjs.org/docs/data/dataset.html#Data_Selection +// + +// create a DataSet +var data = new vis.DataSet(); +data.add([ + { id: 1, text: 'item 1', date: '2013-06-20', group: 1, first: true }, + { id: 2, text: 'item 2', date: '2013-06-23', group: 2 }, + { id: 3, text: 'item 3', date: '2013-06-25', group: 2 }, + { id: 4, text: 'item 4' } +]); + +// retrieve formatted items +var items = data.get({ + fields: ['id', 'date', 'group'], // output the specified fields only + type: { + date: 'Date', // convert the date fields to Date objects + group: 'String' // convert the group fields to Strings + } +}); + +var dataset = new vis.DataSet(); + +// retrieve all items having a property group with value 2 +var group2 = dataset.get({ + filter: function (item) { + return (item.group == 2); + } +}); + +// retrieve all items having a property balance with a value above zero +var positiveBalance = dataset.get({ + filter: function (item) { + return (item.balance > 0); + } +}); + +// +// Test code sample from Getting Started http://visjs.org/docs/network/ +// + +// create an array with nodes +var nodes = new vis.DataSet([ + { id: 1, label: 'Node 1' }, + { id: 2, label: 'Node 2' }, + { id: 3, label: 'Node 3' }, + { id: 4, label: 'Node 4' }, + { id: 5, label: 'Node 5' } +]); + +// create an array with edges +var edges = new vis.DataSet([ + { from: 1, to: 3 }, + { from: 1, to: 2 }, + { from: 2, to: 4 }, + { from: 2, to: 5 } +]); + +// create a network +var container = document.getElementById('mynetwork'); + +// provide the data in the vis format +var data2 = { + nodes: nodes, + edges: edges +}; +var options = {}; + +// initialize your network! +var network = new vis.Network(container, data2, options); + +// +// Test code sample from http://visjs.org/docs/network/configure.html# +// + +// these are all options in full. +var options2 = { + configure: { + enabled: true, + filter: 'nodes,edges', + container: container, + showButton: true + } +} + +network.setOptions(options2); \ No newline at end of file From 269c18303aa725d99c9cc34cc8dce92318eeb7f9 Mon Sep 17 00:00:00 2001 From: Matthieu Maitre Date: Sun, 4 Dec 2016 01:59:24 -0800 Subject: [PATCH 2/4] Fix travis build failures --- vis/index.d.ts | 72 ++++++++++++++++++++----------------------------- vis/tslint.json | 8 +++++- 2 files changed, 36 insertions(+), 44 deletions(-) diff --git a/vis/index.d.ts b/vis/index.d.ts index a46480228c..2fcb8a9246 100644 --- a/vis/index.d.ts +++ b/vis/index.d.ts @@ -1,4 +1,4 @@ -// Type definitions for vis.js +// Type definitions for vis.js 4.17 // Project: https://github.com/almende/vis // Definitions by: Michaël Bitard , Adrian Caballero , Severin , kaktus40 , Matthieu Maitre // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped @@ -81,12 +81,12 @@ declare namespace vis { step?: number; } - type TimelineOptionsConfigureFunction = (option: string, path: Array) => boolean; + type TimelineOptionsConfigureFunction = (option: string, path: string[]) => boolean; type TimelineOptionsConfigureType = boolean | TimelineOptionsConfigureFunction; type TimelineOptionsDataAttributesType = boolean | string | string[]; type TimelineOptionsEditableType = boolean | TimelineEditableOption; type TimelineOptionsGroupEditableType = boolean | TimelineGroupEditableOption; - type TimelineOptionsGroupOrderType = string | Function; // TODO + type TimelineOptionsGroupOrderType = string | (() => void); // TODO type TimelineOptionsGroupOrderSwapFunction = (fromGroup: any, toGroup: any, groups: DataSet) => void; type TimelineOptionsMarginType = number | TimelineMarginOption; type TimelineOptionsOrientationType = string | TimelineOrientationOption; @@ -105,13 +105,13 @@ declare namespace vis { groupEditable?: TimelineOptionsGroupEditableType; groupOrder?: TimelineOptionsGroupOrderType; groupOrderSwap?: TimelineOptionsGroupOrderSwapFunction; - groupTemplate?: Function; // TODO + groupTemplate?: () => void; // TODO height?: HeightWidthType; hiddenDates?: any; // TODO itemsAlwaysDraggable?: boolean; locale?: string; locales?: any; // TODO - moment?: Function; // TODO + moment?: () => void; // TODO margin?: TimelineOptionsMarginType; max?: DateType; maxHeight?: HeightWidthType; @@ -121,15 +121,15 @@ declare namespace vis { moveable?: boolean; multiselect?: boolean; multiselectPerGroup?: boolean; - onAdd?: Function; // TODO - onAddGroup?: Function; // TODO - onUpdate?: Function; // TODO - onMove?: Function; // TODO - onMoveGroup?: Function; // TODO - onMoving?: Function; // TODO - onRemove?: Function; // TODO - onRemoveGroup?: Function; // TODO - order?: Function; // TODO + onAdd?: () => void; // TODO + onAddGroup?: () => void; // TODO + onUpdate?: () => void; // TODO + onMove?: () => void; // TODO + onMoveGroup?: () => void; // TODO + onMoving?: () => void; // TODO + onRemove?: () => void; // TODO + onRemoveGroup?: () => void; // TODO + order?: () => void; // TODO orientation?: TimelineOptionsOrientationType; selectable?: boolean; showCurrentTime?: boolean; @@ -138,7 +138,7 @@ declare namespace vis { stack?: boolean; snap?: TimelineOptionsSnapFunction; start?: DateType; - template?: Function; // TODO + template?: () => void; // TODO throttleRedraw?: number; timeAxis?: TimelineTimeAxisOption; type?: string; @@ -239,7 +239,7 @@ declare namespace vis { * * @memberOf DataSet */ - constructor(data?: Array, options?: DataSetOptions); + constructor(data?: T[], options?: DataSetOptions); /** * The number of items in the DataSet. @@ -410,7 +410,7 @@ declare namespace vis { off(event: string, callback: (event: string, properties: any, senderId: IdType) => void): void; /** - * Remove one by id or by the items themselves. + * Remove one or more items by id. * * @param {IdType} id The item id. * @param {IdType} [senderId] The sender id. @@ -418,18 +418,7 @@ declare namespace vis { * * @memberOf DataSet */ - remove(id: IdType, senderId?: IdType): IdType[]; - - /** - * Remove multiple items by id or by the items themselves. - * - * @param {IdType[]} ids The item ids. - * @param {IdType} [senderId] The sender id. - * @returns {IdType[]} Returns an array with the ids of the removed items. - * - * @memberOf DataSet - */ - remove(ids: IdType[], senderId?: IdType): IdType[]; + remove(id: IdType | IdType[], senderId?: IdType): IdType[]; /** * Set options for the DataSet. @@ -518,13 +507,13 @@ declare namespace vis { } export class DataView { - constructor(items: Array); + constructor(items: T[]); length: number; } - type DataItemCollectionType = Array | DataSet | DataView; - type DataGroupCollectionType = Array | DataSet | DataView; + type DataItemCollectionType = DataItem[] | DataSet | DataView; + type DataGroupCollectionType = DataGroup[] | DataSet | DataView; export class Timeline { constructor( @@ -542,18 +531,17 @@ declare namespace vis { addCustomTime(time: DateType, id?: IdType): IdType; destroy(): void; fit(options?: TimelineFitOptions): void; - focus(id: IdType, options?: TimelineFitOptions): void; - focus(ids: Array, options?: TimelineFitOptions): void; + focus(ids: IdType | IdType[], options?: TimelineFitOptions): void; getCurrentTime(): Date; getCustomTime(id?: IdType): Date; getEventProperties(event: Event): TimelineEventPropertiesResult; getItemRange(): any; // TODO - getSelection(): Array; - getVisibleItems(): Array; + getSelection(): IdType[]; + getVisibleItems(): IdType[]; getWindow(): { start: Date, end: Date }; moveTo(time: DateType, options?: TimelineFitOptions): void; - on(event: TimelineEvents, callback: Function): void; - off(event: TimelineEvents, callback: Function): void; + on(event: TimelineEvents, callback: () => void): void; + off(event: TimelineEvents, callback: () => void): void; redraw(): void; removeCustomTime(id: IdType): void; setCurrentTime(time: DateType): void; @@ -563,8 +551,7 @@ declare namespace vis { setGroups(groups?: DataGroupCollectionType): void; setItems(items: DataItemCollectionType): void; setOptions(options: TimelineOptions): void; - setSelection(id: IdType): void; - setSelection(ids: Array): void; + setSelection(ids: IdType | IdType[]): void; setWindow(start: DateType, end: DateType, options?: TimelineFitOptions): void; } @@ -929,9 +916,8 @@ declare namespace vis { * * @memberOf Network */ - getPositions(nodeIds: string[]): { [nodeId: string]: IPosition }; + getPositions(nodeIds?: string[]): { [nodeId: string]: IPosition }; getPositions(nodeId: string): IPosition; - getPositions(): { [nodeId: string]: IPosition }; /** * When using the vis.DataSet to load your nodes into the network, @@ -983,7 +969,7 @@ declare namespace vis { * * @memberOf Network */ - getConnectedNodes(nodeOrEdgeId: string): string[] | { fromId: string, toId: string }[]; + getConnectedNodes(nodeOrEdgeId: string): string[] | Array<{ fromId: string, toId: string }>; /** * Returns an array of edgeIds of the edges connected to this node. diff --git a/vis/tslint.json b/vis/tslint.json index 2221e40e4a..5bf00f4459 100644 --- a/vis/tslint.json +++ b/vis/tslint.json @@ -1 +1,7 @@ -{ "extends": "../tslint.json" } \ No newline at end of file +{ + "extends": "../tslint.json", + "rules": { + // Needed for ambient 'vis' namespace + "no-single-declare-module": false + } +} \ No newline at end of file From e34c418711d0bc450f2e0d38adcdac10f57d4c34 Mon Sep 17 00:00:00 2001 From: Matthieu Maitre Date: Sun, 4 Dec 2016 02:27:38 -0800 Subject: [PATCH 3/4] Port PR https://github.com/agileek/typings-vis/pull/12 --- vis/index.d.ts | 3223 +++++++++++++++++++++++----------------------- vis/vis-tests.ts | 108 +- 2 files changed, 1669 insertions(+), 1662 deletions(-) diff --git a/vis/index.d.ts b/vis/index.d.ts index 2fcb8a9246..5247ea21f7 100644 --- a/vis/index.d.ts +++ b/vis/index.d.ts @@ -4,1736 +4,1743 @@ // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped declare namespace vis { - type IdType = string | number; - type SubgroupType = IdType; - type DateType = Date | number | string; - type HeightWidthType = IdType; - type TimelineTimeAxisScaleType = 'millisecond' | 'second' | 'minute' | 'hour' | 'weekday' | 'day' | 'month' | 'year'; - type TimelineEventPropertiesResultWhatType = 'item' | 'background' | 'axis' | 'group-label' | 'custom-time' | 'current-time'; - type TimelineEvents = - 'currentTimeTick' | - 'click' | - 'contextmenu' | - 'doubleClick' | - 'groupDragged' | - 'changed' | - 'rangechange' | - 'rangechanged' | - 'select' | - 'timechange' | - 'timechanged'; + type IdType = string | number; + type SubgroupType = IdType; + type DateType = Date | number | string; + type HeightWidthType = IdType; + type TimelineTimeAxisScaleType = 'millisecond' | 'second' | 'minute' | 'hour' | + 'weekday' | 'day' | 'month' | 'year'; + type TimelineEventPropertiesResultWhatType = 'item' | 'background' | 'axis' | + 'group-label' | 'custom-time' | 'current-time'; + type TimelineEvents = + 'currentTimeTick' | + 'click' | + 'contextmenu' | + 'doubleClick' | + 'groupDragged' | + 'changed' | + 'rangechange' | + 'rangechanged' | + 'select' | + 'itemover' | + 'itemout' | + 'timechange' | + 'timechanged'; - interface DataItem { - className?: string; - content: string; - end?: DateType; - group?: any; - id?: IdType; - start: DateType; - style?: string; - subgroup?: SubgroupType; - title?: string; - type?: string; - editable?: boolean; - } + interface DataItem { + className?: string; + content: string; + end?: DateType; + group?: any; + id?: IdType; + start: DateType; + style?: string; + subgroup?: SubgroupType; + title?: string; + type?: string; + editable?: boolean; + } - interface DataGroup { - className?: string; - content: string; - id: IdType; - style?: string; - subgroup?: SubgroupType; - title?: string; - } + interface DataGroup { + className?: string; + content: string; + id: IdType; + style?: string; + subgroupOrder?: string | (() => void); + title?: string; + } - interface TimelineEditableOption { - add?: boolean; - remove?: boolean; - updateGroup?: boolean; - updateTime?: boolean; - } + interface TimelineEditableOption { + add?: boolean; + remove?: boolean; + updateGroup?: boolean; + updateTime?: boolean; + } - interface TimelineGroupEditableOption { - add?: boolean; - remove?: boolean; - order?: boolean; - } + interface TimelineGroupEditableOption { + add?: boolean; + remove?: boolean; + order?: boolean; + } - interface TimelineMarginItem { - horizontal?: number; - vertical?: number; - } + interface TimelineMarginItem { + horizontal?: number; + vertical?: number; + } - type TimelineMarginItemType = number | TimelineMarginItem; + type TimelineMarginItemType = number | TimelineMarginItem; - interface TimelineMarginOption { - axis?: number; - item?: TimelineMarginItemType; - } + interface TimelineMarginOption { + axis?: number; + item?: TimelineMarginItemType; + } - interface TimelineOrientationOption { - axis?: string; - item?: string; - } + interface TimelineOrientationOption { + axis?: string; + item?: string; + } - interface TimelineTimeAxisOption { - scale?: TimelineTimeAxisScaleType; - step?: number; - } + interface TimelineTimeAxisOption { + scale?: TimelineTimeAxisScaleType; + step?: number; + } - type TimelineOptionsConfigureFunction = (option: string, path: string[]) => boolean; - type TimelineOptionsConfigureType = boolean | TimelineOptionsConfigureFunction; - type TimelineOptionsDataAttributesType = boolean | string | string[]; - type TimelineOptionsEditableType = boolean | TimelineEditableOption; - type TimelineOptionsGroupEditableType = boolean | TimelineGroupEditableOption; - type TimelineOptionsGroupOrderType = string | (() => void); // TODO - type TimelineOptionsGroupOrderSwapFunction = (fromGroup: any, toGroup: any, groups: DataSet) => void; - type TimelineOptionsMarginType = number | TimelineMarginOption; - type TimelineOptionsOrientationType = string | TimelineOrientationOption; - type TimelineOptionsSnapFunction = (date: Date, scale: string, step: number) => Date | number; - // type TimelineOptions = + type TimelineOptionsConfigureFunction = (option: string, path: string[]) => boolean; + type TimelineOptionsConfigureType = boolean | TimelineOptionsConfigureFunction; + type TimelineOptionsDataAttributesType = boolean | string | string[]; + type TimelineOptionsEditableType = boolean | TimelineEditableOption; + type TimelineOptionsGroupEditableType = boolean | TimelineGroupEditableOption; + type TimelineOptionsGroupOrderType = string | (() => void); // TODO + type TimelineOptionsGroupOrderSwapFunction = (fromGroup: any, toGroup: any, groups: DataSet) => void; + type TimelineOptionsMarginType = number | TimelineMarginOption; + type TimelineOptionsOrientationType = string | TimelineOrientationOption; + type TimelineOptionsSnapFunction = (date: Date, scale: string, step: number) => Date | number; + // type TimelineOptions = - interface TimelineOptions { - align?: string; - autoResize?: boolean; - clickToUse?: boolean; - configure?: TimelineOptionsConfigureType; - dataAttributes?: TimelineOptionsDataAttributesType; - editable?: TimelineOptionsEditableType; - end?: DateType; - format?: any; // TODO - groupEditable?: TimelineOptionsGroupEditableType; - groupOrder?: TimelineOptionsGroupOrderType; - groupOrderSwap?: TimelineOptionsGroupOrderSwapFunction; - groupTemplate?: () => void; // TODO - height?: HeightWidthType; - hiddenDates?: any; // TODO - itemsAlwaysDraggable?: boolean; - locale?: string; - locales?: any; // TODO - moment?: () => void; // TODO - margin?: TimelineOptionsMarginType; - max?: DateType; - maxHeight?: HeightWidthType; - maxMinorChars?: number; - min?: DateType; - minHeight?: HeightWidthType; - moveable?: boolean; - multiselect?: boolean; - multiselectPerGroup?: boolean; - onAdd?: () => void; // TODO - onAddGroup?: () => void; // TODO - onUpdate?: () => void; // TODO - onMove?: () => void; // TODO - onMoveGroup?: () => void; // TODO - onMoving?: () => void; // TODO - onRemove?: () => void; // TODO - onRemoveGroup?: () => void; // TODO - order?: () => void; // TODO - orientation?: TimelineOptionsOrientationType; - selectable?: boolean; - showCurrentTime?: boolean; - showMajorLabels?: boolean; - showMinorLabels?: boolean; - stack?: boolean; - snap?: TimelineOptionsSnapFunction; - start?: DateType; - template?: () => void; // TODO - throttleRedraw?: number; - timeAxis?: TimelineTimeAxisOption; - type?: string; - width?: HeightWidthType; - zoomable?: boolean; - zoomKey?: string; - zoomMax?: number; - zoomMin?: number; - } + interface TimelineOptions { + align?: string; + autoResize?: boolean; + clickToUse?: boolean; + configure?: TimelineOptionsConfigureType; + dataAttributes?: TimelineOptionsDataAttributesType; + editable?: TimelineOptionsEditableType; + end?: DateType; + format?: any; // TODO + groupEditable?: TimelineOptionsGroupEditableType; + groupOrder?: TimelineOptionsGroupOrderType; + groupOrderSwap?: TimelineOptionsGroupOrderSwapFunction; + groupTemplate?: () => void; // TODO + height?: HeightWidthType; + hiddenDates?: any; // TODO + horizontalScroll?: boolean; + itemsAlwaysDraggable?: boolean; + locale?: string; + locales?: any; // TODO + moment?: () => void; // TODO + margin?: TimelineOptionsMarginType; + max?: DateType; + maxHeight?: HeightWidthType; + maxMinorChars?: number; + min?: DateType; + minHeight?: HeightWidthType; + moveable?: boolean; + multiselect?: boolean; + multiselectPerGroup?: boolean; + onAdd?: () => void; // TODO + onAddGroup?: () => void; // TODO + onUpdate?: () => void; // TODO + onMove?: () => void; // TODO + onMoveGroup?: () => void; // TODO + onMoving?: () => void; // TODO + onRemove?: () => void; // TODO + onRemoveGroup?: () => void; // TODO + order?: () => void; // TODO + orientation?: TimelineOptionsOrientationType; + selectable?: boolean; + showCurrentTime?: boolean; + showMajorLabels?: boolean; + showMinorLabels?: boolean; + stack?: boolean; + snap?: TimelineOptionsSnapFunction; + start?: DateType; + template?: () => void; // TODO + throttleRedraw?: number; + timeAxis?: TimelineTimeAxisOption; + type?: string; + tooltipOnItemUpdateTime?: boolean | { template: (item: any) => any }; + verticalScroll?: boolean; + width?: HeightWidthType; + zoomable?: boolean; + zoomKey?: string; + zoomMax?: number; + zoomMin?: number; + } - interface TimelineFitAnimation { - duration?: number; - easingFunction?: string; - } + interface TimelineFitAnimation { + duration?: number; + easingFunction?: string; + } - type TimelineFitAnimationType = boolean | TimelineFitAnimation; + type TimelineFitAnimationType = boolean | TimelineFitAnimation; - interface TimelineFitOptions { - animation?: TimelineFitAnimationType; - } + interface TimelineFitOptions { + animation?: TimelineFitAnimationType; + } - interface TimelineEventPropertiesResult { - group?: number; - item?: number; - pageX: number; - pageY: number; - x: number; - y: number; - time: Date; - snappedTime: Date; - what?: TimelineEventPropertiesResultWhatType; - event: Event; - } + interface TimelineEventPropertiesResult { + group?: number; + item?: number; + pageX: number; + pageY: number; + x: number; + y: number; + time: Date; + snappedTime: Date; + what?: TimelineEventPropertiesResultWhatType; + event: Event; + } + + /** + * Options that can be passed to a DataSet. + * + * @interface DataSetOptions + */ + interface DataSetOptions extends DataSetQueueOptions { + /** + * The name of the field containing the id of the items. + * When data is fetched from a server which uses some specific field to identify items, + * this field name can be specified in the DataSet using the option fieldId. + * For example CouchDB uses the field "_id" to identify documents. + * + * @type {string} + * @memberOf DataSetOptions + */ + fieldId?: string; /** - * Options that can be passed to a DataSet. + * An object containing field names as key, and data types as value. + * By default, the type of the properties of items are left unchanged. + * Item properties can be normalized by specifying a field type. + * This is useful for example to automatically convert stringified dates coming + * from a server into JavaScript Date objects. + * The available data types are listed in section Data Types. * - * @interface DataSetOptions + * @type {*} + * @memberOf DataSetOptions */ - interface DataSetOptions extends DataSetQueueOptions { - /** - * The name of the field containing the id of the items. - * When data is fetched from a server which uses some specific field to identify items, - * this field name can be specified in the DataSet using the option fieldId. - * For example CouchDB uses the field "_id" to identify documents. - * - * @type {string} - * @memberOf DataSetOptions - */ - fieldId?: string; + type?: any; + } - /** - * An object containing field names as key, and data types as value. - * By default, the type of the properties of items are left unchanged. - * Item properties can be normalized by specifying a field type. - * This is useful for example to automatically convert stringified dates coming - * from a server into JavaScript Date objects. - * The available data types are listed in section Data Types. - * - * @type {*} - * @memberOf DataSetOptions - */ - type?: any; - } + interface DataSetQueueOptions { + /** + * Queue data changes ('add', 'update', 'remove') and flush them at once. + * The queue can be flushed manually by calling DataSet.flush(), + * or can be flushed after a configured delay or maximum number of entries. + * When queue is true, a queue is created with default options. + * Options can be specified by providing an object: + * delay: number - The queue will be flushed automatically after an inactivity of this delay in milliseconds. Default value is null. + * Default value is null. + * max: number - When the queue exceeds the given maximum number of entries, the queue is flushed automatically. Default value is Infinity. + * Default value is Infinity. + * + * @type {(any | boolean)} + * @memberOf DataSetOptions + */ + queue?: any | boolean; + } - interface DataSetQueueOptions { - /** - * Queue data changes ('add', 'update', 'remove') and flush them at once. - * The queue can be flushed manually by calling DataSet.flush(), - * or can be flushed after a configured delay or maximum number of entries. - * When queue is true, a queue is created with default options. - * Options can be specified by providing an object: - * delay: number - The queue will be flushed automatically after an inactivity of this delay in milliseconds. Default value is null. - * max: number - When the queue exceeds the given maximum number of entries, the queue is flushed automatically. Default value is Infinity. - * - * @type {(any | boolean)} - * @memberOf DataSetOptions - */ - queue?: any | boolean; - } - - export class DataSet { - - /** - * Creates an instance of DataSet. - * - * @param {DataSetOptions} [options] DataSet options. - * - * @memberOf DataSet - */ - constructor(options: DataSetOptions); - - /** - * Creates an instance of DataSet. - * - * @param {Array} [data] An Array with items. - * @param {DataSetOptions} [options] DataSet options. - * - * @memberOf DataSet - */ - constructor(data?: T[], options?: DataSetOptions); - - /** - * The number of items in the DataSet. - * - * @type {number} - * @memberOf DataSet - */ - length: number; - - /** - * Add one or multiple items to the DataSet. - * Adding an item will fail when there already is an item with the same id. - * - * @param {(T | T[])} data data can be a single item or an array with items. - * @param {IdType} [senderId] Optional sender id. - * @returns {IdType[]} The function returns an array with the ids of the added items. - * - * @memberOf DataSet - */ - add(data: T | T[], senderId?: IdType): IdType[]; - - /** - * Clear all data from the DataSet. - * - * @param {IdType} [senderId] Optional sender id. - * @returns {IdType[]} The function returns an array with the ids of the removed items. - * - * @memberOf DataSet - */ - clear(senderId?: IdType): IdType[]; - - /** - * Find all distinct values of a specified field. - * If data items do not contain the specified field are ignored. - * - * @param {string} field The search term. - * @returns {any[]} Returns an unordered array containing all distinct values. - * - * @memberOf DataSet - */ - distinct(field: string): any[]; - - /** - * Flush queued changes. - * Only available when the DataSet is configured with the option queue. - * - * @memberOf DataSet - */ - flush(): void; - - /** - * Execute a callback function for every item in the dataset. - * - * @param {(item: T, id: IdType) => void} callback The item callback. - * @param {DataSelectionOptions} [options] Optional options - * - * @memberOf DataSet - */ - forEach(callback: (item: T, id: IdType) => void, options?: DataSelectionOptions): void; - - /** - * Get all items from the DataSet. - * - * @param {DataSelectionOptions} [options] Optional options. - * @returns {T[]} When no item is found, null is returned when a single item was requested, - * and and empty Array is returned in case of multiple id's. - * - * @memberOf DataSet - */ - get(options?: DataSelectionOptions): T[]; - - /** - * Get a single item from the DataSet. - * - * @param {IdType} id The item id. - * @param {DataSelectionOptions} [options] - * @returns {T} When no item is found, null is returned when a single item was requested, - * and and empty Array is returned in case of multiple id's. - * - * @memberOf DataSet - */ - get(id: IdType, options?: DataSelectionOptions): T; - - /** - * Get multiple items from the DataSet. - * - * @param {IdType[]} ids Array of item ids. - * @param {DataSelectionOptions} [options] Optional options. - * @returns {T[]} When no item is found, null is returned when a single item was requested, - * and and empty Array is returned in case of multiple id's. - * - * @memberOf DataSet - */ - get(ids: IdType[], options?: DataSelectionOptions): T[]; - - /** - * Get the DataSet itself. - * In case of a DataView, this function does not return the DataSet - * to which the DataView is connected. - * - * @returns {DataSet} The DataSet itself. - * - * @memberOf DataSet - */ - getDataSet(): DataSet; - - /** - * Get ids of all items or of a filtered set of items. - * - * @param {DataSelectionOptions} [options] - * @returns {IdType[]} ids of all items or of a filtered set of items. - * - * @memberOf DataSet - */ - getIds(options?: DataSelectionOptions): IdType[]; - - /** - * Map every item in the DataSet. - * - * @param {(item: T, id: IdType) => T} callback The mapping callback. - * @param {DataSelectionOptions} [options] Optional options. - * @returns {T[]} The mapped items. - * - * @memberOf DataSet - */ - map(callback: (item: T, id: IdType) => any, options?: DataSelectionOptions): any[]; - - /** - * Find the item with maximum value of specified field. - * - * @param {string} field - * @returns {T} Returns null if no item is found. - * - * @memberOf DataSet - */ - max(field: string): T; - - /** - * Find the item with minimum value of specified field. - * - * @param {string} field - * @returns {T} Returns null if no item is found. - * - * @memberOf DataSet - */ - min(field: string): T; - - /** - * Subscribe from an event. - * - * @param {string} event The event name. - * @param {((event: string, properties: any, senderId: IdType) => void)} callback - * a callback function which will be called each time the event occurs. - * - * @memberOf DataSet - */ - on(event: string, callback: (event: string, properties: any, senderId: IdType) => void): void; - - /** - * Unsubscribe to an event. - * - * @param {string} event The event name. - * @param {((event: string, properties: any, senderId: IdType) => void)} callback - * The exact same callback that was used when calling 'on'. - * - * @memberOf DataSet - */ - off(event: string, callback: (event: string, properties: any, senderId: IdType) => void): void; - - /** - * Remove one or more items by id. - * - * @param {IdType} id The item id. - * @param {IdType} [senderId] The sender id. - * @returns {IdType[]} Returns an array with the ids of the removed items. - * - * @memberOf DataSet - */ - remove(id: IdType | IdType[], senderId?: IdType): IdType[]; - - /** - * Set options for the DataSet. - * - * @param {DataSetQueueOptions} [options] - * - * @memberOf DataSet - */ - setOptions(options?: DataSetQueueOptions): void; - - /** - * Update one or multiple existing items. - * When an item doesn't exist, it will be created. - * - * @param {(T | T[])} data a single item or an array with items. - * @param {IdType} [senderId] - * @returns {IdType[]} Returns an array with the ids of the updated items. - * - * @memberOf DataSet - */ - update(data: T | T[], senderId?: IdType): IdType[]; - } + export class DataSet { /** - * The DataSet contains functionality to format, filter, and sort data retrieved - * via the methods get, getIds, forEach, and map. - * These methods can have these options as a parameter. + * Creates an instance of DataSet. * - * @interface DataSelectionOptions + * @param {DataSetOptions} [options] DataSet options. + * + * @memberOf DataSet */ - interface DataSelectionOptions { - /** - * An array with field names, or an object with current field name - * and new field name that the field is returned as. - * By default, all properties of the items are emitted. - * When fields is defined, only the properties whose name is specified - * in fields will be included in the returned items. - * - * @type {(string[] | any)} - * @memberOf DataSelectionOptions - */ - fields?: string[] | any; - - /** - * An object containing field names as key, and data types as value. - * By default, the type of the properties of an item are left unchanged. - * When a field type is specified, this field in the items will be converted to the specified type. - * This can be used for example to convert ISO strings containing a date to a JavaScript Date object, - * or convert strings to numbers or vice versa. The available data types are listed in section Data Types. - * - * @type {*} - * @memberOf DataSelectionOptions - */ - type?: any; - - /** - * Items can be filtered on specific properties by providing a filter function. - * A filter function is executed for each of the items in the DataSet, - * and is called with the item as parameter. - * The function must return a boolean. - * All items for which the filter function returns true will be emitted. - * See section Data Filtering. - * - * @memberOf DataSelectionOptions - */ - filter?: (item: T) => boolean; - - /** - * Order the items by a field name or custom sort function. - * - * @type {(string | any)} - * @memberOf DataSelectionOptions - */ - order?: string | any; - - /** - * Determine the type of output of the get function. - * Allowed values are 'Array' | 'Object'. - * The default returnType is an Array. - * The Object type will return a JSON object with the ID's as keys. - * - * @type {string} - * @memberOf DataSelectionOptions - */ - returnType?: string; - } - - export class DataView { - constructor(items: T[]); - - length: number; - } - - type DataItemCollectionType = DataItem[] | DataSet | DataView; - type DataGroupCollectionType = DataGroup[] | DataSet | DataView; - - export class Timeline { - constructor( - container: HTMLElement, - items: DataItemCollectionType, - groups: DataGroupCollectionType, - options?: TimelineOptions - ); - constructor( - container: HTMLElement, - items: DataItemCollectionType, - options?: TimelineOptions - ); - - addCustomTime(time: DateType, id?: IdType): IdType; - destroy(): void; - fit(options?: TimelineFitOptions): void; - focus(ids: IdType | IdType[], options?: TimelineFitOptions): void; - getCurrentTime(): Date; - getCustomTime(id?: IdType): Date; - getEventProperties(event: Event): TimelineEventPropertiesResult; - getItemRange(): any; // TODO - getSelection(): IdType[]; - getVisibleItems(): IdType[]; - getWindow(): { start: Date, end: Date }; - moveTo(time: DateType, options?: TimelineFitOptions): void; - on(event: TimelineEvents, callback: () => void): void; - off(event: TimelineEvents, callback: () => void): void; - redraw(): void; - removeCustomTime(id: IdType): void; - setCurrentTime(time: DateType): void; - setCustomTime(time: DateType, id?: IdType): void; - setCustomTimeTitle(title: string, id?: IdType): void; - setData(data: { groups?: DataGroupCollectionType; items?: DataItemCollectionType }): void; - setGroups(groups?: DataGroupCollectionType): void; - setItems(items: DataItemCollectionType): void; - setOptions(options: TimelineOptions): void; - setSelection(ids: IdType | IdType[]): void; - setWindow(start: DateType, end: DateType, options?: TimelineFitOptions): void; - } - - export interface ITimelineStatic { - new (id: HTMLElement, data: any, options?: any): vis.ITimeline; - } - - export interface ITimeline { - setGroups(groups?: ITimelineGroup[]): void; - setItems(items?: ITimelineItem[]): void; - getWindow(): ITimelineWindow; - setWindow(start: any, date: any): void; - focus(selection: any): void; - on(event?: string, callback?: (properties: any) => void): void; - } - - export interface ITimelineWindow { - start: Date; - end: Date; - } - - export interface ITimelineItem { - id: number; - content: string; - group?: number; - start: number; - end?: number; - editable?: boolean; - } - - export interface ITimelineOptions { - stack?: boolean; - start?: any; - end?: any; - orientation?: string; - } - - export interface ITimelineGroup { - id: number; - content: string; - style?: string; - } - - export interface IVisSelectProperties { - items: number[]; - } - - export interface INetwork { - network?: any; - selectNodes?(nodeIds: string[], highlightEdges?: boolean): void; - unselectAll?(): void; - fit?(): void; - } + constructor(options: DataSetOptions); /** - * Network is a visualization to display networks and networks consisting of nodes and edges. - * The visualization is easy to use and supports custom shapes, styles, colors, sizes, images, and more. - * The network visualization works smooth on any modern browser for up to a few thousand nodes and edges. - * To handle a larger amount of nodes, Network has clustering support. Network uses HTML canvas for rendering. + * Creates an instance of DataSet. * - * @export - * @class Network - * @implements {INetwork} + * @param {T[]} [data] An Array with items. + * @param {DataSetOptions} [options] DataSet options. + * + * @memberOf DataSet */ - export class Network { - - /** - * Creates an instance of Network. - * - * @param {HTMLElement} container the HTML element representing the network container - * @param {IData} data network data - * @param {IOptions} [options] optional network options - * - * @memberOf Network - */ - constructor(container: HTMLElement, data: IData, options?: IOptions); - - /** - * Remove the network from the DOM and remove all Hammer bindings and references. - * - * @memberOf Network - */ - destroy(): void; - - /** - * Override all the data in the network. - * If stabilization is enabled in the physics module, - * the network will stabilize again. - * This method is also performed when first initializing the network. - * - * @param {IData} data network data - * - * @memberOf Network - */ - setData(data: IData): void; - - /** - * Set the options. - * All available options can be found in the modules above. - * Each module requires it's own container with the module name to contain its options. - * - * @param {IOptions} options network options - * - * @memberOf Network - */ - setOptions(options: IOptions): void; - - /** - * Set an event listener. - * Depending on the type of event you get different parameters for the callback function. - * - * @param {string} eventName the name of the event, f.e. 'click' - * @param {(params?: any) => void} callback the callback function that will be raised - * - * @memberOf Network - */ - on(eventName: string, callback: (params?: any) => void): void; - - /** - * Remove an event listener. - * The function you supply has to be the exact same as the one you used in the on function. - * If no function is supplied, all listeners will be removed. - * - * @param {string} eventName the name of the event, f.e. 'click' - * @param {(params?: any) => void} [callback] the exact same callback function that was used when calling 'on' - * - * @memberOf Network - */ - off(eventName: string, callback?: (params?: any) => void): void; - - /** - * Set an event listener only once. - * After it has taken place, the event listener will be removed. - * Depending on the type of event you get different parameters for the callback function. - * - * @param {string} eventName the name of the event, f.e. 'click' - * @param {(params?: any) => void} callback the callback function that will be raised once - * - * @memberOf Network - */ - once(eventName: string, callback: (params?: any) => void): void; - - /** - * This function converts canvas coordinates to coordinates on the DOM. - * Input and output are in the form of {x:Number, y:Number} (IPosition interface). - * The DOM values are relative to the network container. - * - * @param {IPosition} position the canvas coordinates - * @returns {IPosition} the DOM coordinates - * - * @memberOf Network - */ - canvasToDOM(position: IPosition): IPosition; - - /** - * This function converts DOM coordinates to coordinates on the canvas. - * Input and output are in the form of {x:Number,y:Number} (IPosition interface). - * The DOM values are relative to the network container. - * - * @param {IPosition} position the DOM coordinates - * @returns {IPosition} the canvas coordinates - * - * @memberOf Network - */ - DOMtoCanvas(position: IPosition): IPosition; - - /** - * Redraw the network. - * - * @memberOf Network - */ - redraw(): void; - - /** - * Set the size of the canvas. - * This is automatically done on a window resize. - * - * @param {string} width width in a common format, f.e. '100px' - * @param {string} height height in a common format, f.e. '100px' - * - * @memberOf Network - */ - setSize(width: string, height: string): void; - - /** - * The joinCondition function is presented with all nodes. - * - * @param {IClusterOptions} [options] - * - * @memberOf Network - */ - cluster(options?: IClusterOptions): void; - - /** - * This method looks at the provided node and makes a cluster of it and all it's connected nodes. - * The behaviour can be customized by proving the options object. - * All options of this object are explained below. - * The joinCondition is only presented with the connected nodes. - * - * @param {string} nodeId the id of the node - * @param {IClusterOptions} [options] the cluster options - * - * @memberOf Network - */ - clusterByConnection(nodeId: string, options?: IClusterOptions): void; - - /** - * This method checks all nodes in the network and those with a equal or higher - * amount of edges than specified with the hubsize qualify. - * If a hubsize is not defined, the hubsize will be determined as the average - * value plus two standard deviations. - * For all qualifying nodes, clusterByConnection is performed on each of them. - * The options object is described for clusterByConnection and does the same here. - * - * @param {number} [hubsize] optional hubsize - * @param {IClusterOptions} [options] optional cluster options - * - * @memberOf Network - */ - clusterByHubsize(hubsize?: number, options?: IClusterOptions): void; - - /** - * This method will cluster all nodes with 1 edge with their respective connected node. - * - * @param {IClusterOptions} [options] optional cluster options - * - * @memberOf Network - */ - clusterOutliers(options?: IClusterOptions): void; - - /** - * Nodes can be in clusters. - * Clusters can also be in clusters. - * This function returns an array of nodeIds showing where the node is. - * - * Example: - * cluster 'A' contains cluster 'B', cluster 'B' contains cluster 'C', - * cluster 'C' contains node 'fred'. - * - * network.clustering.findNode('fred') will return ['A','B','C','fred']. - * - * @param {string} nodeId the node id. - * @returns {string[]} an array of nodeIds showing where the node is - * - * @memberOf Network - */ - findNode(nodeId: string): string[]; - - /** - * Returns true if the node whose ID has been supplied is a cluster. - * - * @param {string} nodeId the node id. - * @returns {boolean} - * - * @memberOf Network - */ - isCluster(nodeId: string): boolean; - - /** - * Returns an array of all nodeIds of the nodes that - * would be released if you open the cluster. - * - * @param {string} clusterNodeId the id of the cluster node - * @returns {string[]} - * - * @memberOf Network - */ - getNodesInCluster(clusterNodeId: string): string[]; - - /** - * Opens the cluster, releases the contained nodes and edges, - * removing the cluster node and cluster edges. - * The options object is optional and currently supports one option, - * releaseFunction, which is a function that can be used to manually - * position the nodes after the cluster is opened. - * - * @param {string} nodeId the node id - * @param {IOpenClusterOptions} [options] optional open cluster options - * - * @memberOf Network - */ - openCluster(nodeId: string, options?: IOpenClusterOptions): void; - - /** - * If you like the layout of your network - * and would like it to start in the same way next time, - * ask for the seed using this method and put it in the layout.randomSeed option. - * - * @returns {number} the current seed of the network. - * - * @memberOf Network - */ - getSeed(): number; - - /** - * Programatically enable the edit mode. - * Similar effect to pressing the edit button. - * - * @memberOf Network - */ - enableEditMode(): void; - - /** - * Programatically disable the edit mode. - * Similar effect to pressing the close icon (small cross in the corner of the toolbar). - * - * @memberOf Network - */ - disableEditMode(): void; - - /** - * Go into addNode mode. Having edit mode or manipulation enabled is not required. - * To get out of this mode, call disableEditMode(). - * The callback functions defined in handlerFunctions still apply. - * To use these methods without having the manipulation GUI, make sure you set enabled to false. - * - * @memberOf Network - */ - addNodeMode(): void; - - /** - * Edit the selected node. - * The explaination from addNodeMode applies here as well. - * - * @memberOf Network - */ - editNode(): void; - - /** - * Go into addEdge mode. - * The explaination from addNodeMode applies here as well. - * - * @memberOf Network - */ - addEdgeMode(): void; - - /** - * Go into editEdge mode. - * The explaination from addNodeMode applies here as well. - * - * @memberOf Network - */ - editEdgeMode(): void; - - /** - * Delete selected. - * Having edit mode or manipulation enabled is not required. - * - * @memberOf Network - */ - deleteSelected(): void; - - /** - * Returns the x y positions in canvas space of the nodes with the supplied nodeIds as an object. - * - * Alternative inputs are a String containing a nodeId or nothing. - * When a String is supplied, the position of the node corresponding to the ID is returned. - * When nothing is supplied, the positions of all nodes are returned. - * - * @param {string[]} nodeIds - * @returns {{[nodeId: string]: IPosition}} - * - * @memberOf Network - */ - getPositions(nodeIds?: string[]): { [nodeId: string]: IPosition }; - getPositions(nodeId: string): IPosition; - - /** - * When using the vis.DataSet to load your nodes into the network, - * this method will put the X and Y positions of all nodes into that dataset. - * If you're loading your nodes from a database and have this dynamically coupled with the DataSet, - * you can use this to stablize your network once, then save the positions in that database - * through the DataSet so the next time you load the nodes, stabilization will be near instantaneous. - * - * If the nodes are still moving and you're using dynamic smooth edges (which is on by default), - * you can use the option stabilization.onlyDynamicEdges in the physics module to improve initialization time. - * - * This method does not support clustering. - * At the moment it is not possible to cache positions when using clusters since - * they cannot be correctly initialized from just the positions. - * - * @memberOf Network - */ - storePositions(): void; - - /** - * You can use this to programatically move a node. - * The supplied x and y positions have to be in canvas space! - * - * @param {string} nodeId the node that will be moved - * @param {number} x new canvas space x position - * @param {number} y new canvas space y position - * - * @memberOf Network - */ - moveNode(nodeId: string, x: number, y: number): void; - - /** - * Returns a bounding box for the node including label. - * - * @param {string} nodeId - * @returns {IBoundingBox} - * - * @memberOf Network - */ - getBoundingBox(nodeId: string): IBoundingBox; - - /** - * Returns an array of nodeIds of the all the nodes that are directly connected to this node. - * If you supply an edgeId, vis will first match the id to nodes. - * If no match is found, it will search in the edgelist and return an array: [fromId, toId]. - * - * @param {string} nodeOrEdgeId a node or edge id - * @returns {(string[] | {fromId: string, toId: string}[])} - * - * @memberOf Network - */ - getConnectedNodes(nodeOrEdgeId: string): string[] | Array<{ fromId: string, toId: string }>; - - /** - * Returns an array of edgeIds of the edges connected to this node. - * - * @param {string} nodeId the node id - * @returns {string[]} - * - * @memberOf Network - */ - getConnectedEdges(nodeId: string): string[]; - - /** - * Start the physics simulation. - * This is normally done whenever needed and is only really useful - * if you stop the simulation yourself and wish to continue it afterwards. - * - * @memberOf Network - */ - startSimulation(): void; - - /** - * This stops the physics simulation and triggers a stabilized event. - * Tt can be restarted by dragging a node, - * altering the dataset or calling startSimulation(). - * - * @memberOf Network - */ - stopSimulation(): void; - - /** - * You can manually call stabilize at any time. - * All the stabilization options above are used. - * You can optionally supply the number of iterations it should do. - * - * @param {number} [iterations] the number of iterations it should do - * - * @memberOf Network - */ - stabilize(iterations?: number): void; - - /** - * Returns an object with selected nodes and edges ids. - * - * @returns {{ nodes: string[], edges: string[] }} - * - * @memberOf Network - */ - getSelection(): { nodes: string[], edges: string[] }; - - /** - * Returns an array of selected node ids like so: - * [nodeId1, nodeId2, ..]. - * - * @returns {string[]} - * - * @memberOf Network - */ - getSelectedNodes(): string[]; - - /** - * Returns an array of selected edge ids like so: - * [edgeId1, edgeId2, ..]. - * - * @returns {string[]} - * - * @memberOf Network - */ - getSelectedEdges(): string[]; - - /** - * Returns a nodeId or undefined. - * The DOM positions are expected to be in pixels from the top left corner of the canvas. - * - * @param {IPosition} position - * @returns {string} - * - * @memberOf Network - */ - getNodeAt(position: IPosition): string; - - /** - * Returns a edgeId or undefined. - * The DOM positions are expected to be in pixels from the top left corner of the canvas. - * - * @param {IPosition} position - * @returns {string} - * - * @memberOf Network - */ - getEdgeAt(position: IPosition): string; - - /** - * Selects the nodes corresponding to the id's in the input array. - * If highlightEdges is true or undefined, the neighbouring edges will also be selected. - * This method unselects all other objects before selecting its own objects. Does not fire events. - * - * @param {string[]} nodeIds - * @param {boolean} [highlightEdges] - * - * @memberOf Network - */ - selectNodes(nodeIds: string[], highlightEdges?: boolean): void; - - /** - * Selects the edges corresponding to the id's in the input array. - * This method unselects all other objects before selecting its own objects. - * Does not fire events. - * - * @param {string[]} edgeIds - * - * @memberOf Network - */ - selectEdges(edgeIds: string[]): void; - - /** - * Sets the selection. - * You can also pass only nodes or edges in selection object. - * - * @param {{ nodes: string[], edges: string[] }} selection - * @param {ISelectionOptions} [options] - * - * @memberOf Network - */ - setSelection(selection: { nodes: string[], edges: string[] }, options?: ISelectionOptions): void; - - /** - * Unselect all objects. - * Does not fire events. - * - * @memberOf Network - */ - unselectAll(): void; - - /** - * Returns the current scale of the network. - * 1.0 is comparible to 100%, 0 is zoomed out infinitely. - * - * @returns {number} the current scale of the network - * - * @memberOf Network - */ - getScale(): number; - - /** - * Returns the current central focus point of the view in the form: { x: {Number}, y: {Number} } - * - * @returns {IPosition} the view position; - * - * @memberOf Network - */ - getViewPosition(): IPosition; - - /** - * Zooms out so all nodes fit on the canvas. - * - * @param {IFitOptions} [options] All options are optional for the fit method - * - * @memberOf Network - */ - fit(options?: IFitOptions): void; - - /** - * You can focus on a node with this function. - * What that means is the view will lock onto that node, if it is moving, the view will also move accordingly. - * If the view is dragged by the user, the focus is broken. You can supply options to customize the effect. - * - * @param {string} nodeId - * @param {IFocusOptions} [options] - * - * @memberOf Network - */ - focus(nodeId: string, options?: IFocusOptions): void; - - /** - * You can animate or move the camera using the moveTo method. - * - * @param {IMoveToOptions} options - * - * @memberOf Network - */ - moveTo(options: IMoveToOptions): void; - - /** - * Programatically release the focussed node. - * - * @memberOf Network - */ - releaseNode(): void; - - /** - * If you use the configurator, you can call this method to get an options object that contains - * all differences from the default options caused by users interacting with the configurator. - * - * @returns {*} - * - * @memberOf Network - */ - getOptionsFromConfigurator(): any; - } + constructor(data?: T[], options?: DataSetOptions); /** - * Options interface for focus function. + * The number of items in the DataSet. * - * @export - * @interface IFocusOptions - * @extends {IViewPortOptions} + * @type {number} + * @memberOf DataSet */ - export interface IFocusOptions extends IViewPortOptions { - /** - * Locked denotes whether or not the view remains locked to - * the node once the zoom-in animation is finished. - * Default value is true. - * - * @type {boolean} - * @memberOf IFocusOptions - */ - locked?: boolean; - } + length: number; /** - * Base options interface for some viewport functions. + * Add one or multiple items to the DataSet. + * Adding an item will fail when there already is an item with the same id. * - * @export - * @interface IViewPortOptions + * @param {(T | T[])} data data can be a single item or an array with items. + * @param {IdType} [senderId] Optional sender id. + * @returns {IdType[]} The function returns an array with the ids of the added items. + * + * @memberOf DataSet */ - export interface IViewPortOptions { - /** - * The scale is the target zoomlevel. - * Default value is 1.0. - * - * @type {number} the scale. - * @memberOf IFocusOptions - */ - scale?: number; - - /** - * The offset (in DOM units) is how many pixels from the center the view is focussed. - * Default value is {x:0,y:0} - * - * @type {IPosition} - * @memberOf IFocusOptions - */ - offset?: IPosition; - - /** - * For animation you can either use a Boolean to use it with the default options or - * disable it or you can define the duration (in milliseconds) and easing function manually. - * - * @type {(IAnimationOptions | boolean)} - * @memberOf IFitOptions - */ - animation?: IAnimationOptions | boolean; - } + public add(data: T | T[], senderId?: IdType): IdType[]; /** - * You will have to define at least a scale, position or offset. - * Otherwise, there is nothing to move to. + * Clear all data from the DataSet. * - * @export - * @interface IMoveToOptions - * @extends {IViewPortOptions} + * @param {IdType} [senderId] Optional sender id. + * @returns {IdType[]} The function returns an array with the ids of the removed items. + * + * @memberOf DataSet */ - export interface IMoveToOptions extends IViewPortOptions { - /** - * The position (in canvas units!) is the position of the central focus point of the camera. - * - * @type {IPosition} - * @memberOf IMoveToOptions - */ - position?: IPosition; - } + public clear(senderId?: IdType): IdType[]; /** - * Animation options interface. + * Find all distinct values of a specified field. + * If data items do not contain the specified field are ignored. * - * @export - * @interface IAnimationOptions + * @param {string} field The search term. + * @returns {any[]} Returns an unordered array containing all distinct values. + * + * @memberOf DataSet */ - export interface IAnimationOptions { - - /** - * The duration (in milliseconds). - * - * @type {number} - * @memberOf IAnimationOptions - */ - duration: number; - /** - * The easing function. - * - * Available are: - * linear, easeInQuad, easeOutQuad, easeInOutQuad, easeInCubic, - * easeOutCubic, easeInOutCubic, easeInQuart, easeOutQuart, easeInOutQuart, - * easeInQuint, easeOutQuint, easeInOutQuint. - * - * @type {string} - * @memberOf IAnimationOptions - */ - easingFunction: string; - } + public distinct(field: string): any[]; /** - * Optional options for the fit method. + * Flush queued changes. + * Only available when the DataSet is configured with the option queue. * - * @export - * @interface IFitOptions + * @memberOf DataSet */ - export interface IFitOptions { - - /** - * The nodes can be used to zoom to fit only specific nodes in the view. - * - * @type {string[]} - * @memberOf IFitOptions - */ - nodes?: string[]; - - /** - * For animation you can either use a Boolean to use it with the default options or - * disable it or you can define the duration (in milliseconds) and easing function manually. - * - * @type {(IAnimationOptions | boolean)} - * @memberOf IFitOptions - */ - animation: IAnimationOptions | boolean; - } - - export interface ISelectionOptions { - unselectAll?: boolean; - highlightEdges?: boolean; - } + public flush(): void; /** - * These values are in canvas space. + * Execute a callback function for every item in the dataset. * - * @export - * @interface IBoundingBox + * @param {(item: T, id: IdType) => void} callback The item callback. + * @param {DataSelectionOptions} [options] Optional options + * + * @memberOf DataSet */ - export interface IBoundingBox { - top: number; - left: number; - right: number; - bottom: number; - } + public forEach(callback: (item: T, id: IdType) => void, options?: DataSelectionOptions): void; /** - * Cluster methods options interface. + * Get all items from the DataSet. * - * @export - * @interface IClusterOptions + * @param {DataSelectionOptions} [options] Optional options. + * @returns {T[]} When no item is found, null is returned when a single item was requested, + * and and empty Array is returned in case of multiple id's. + * + * @memberOf DataSet */ - export interface IClusterOptions { - - /** - * Optional for all but the cluster method. - * The cluster module loops over all nodes that are selected to be in the cluster - * and calls this function with their data as argument. If this function returns true, - * this node will be added to the cluster. You have access to all options (including the default) - * as well as any custom fields you may have added to the node to determine whether or not to include it in the cluster. - * - * @memberOf IClusterOptions - */ - joinCondition?: (nodeOptions: any) => boolean; - - /** - * Optional. - * Before creating the new cluster node, this (optional) function will be called with the properties - * supplied by you (clusterNodeProperties), all contained nodes and all contained edges. - * You can use this to update the properties of the cluster based on which items it contains. - * The function should return the properties to create the cluster node. - * - * @type {(clusterOptions: any, childNodesOptions: any[], childEdgesOptions: any[])} - * @memberOf IClusterOptions - */ - processProperties?: (clusterOptions: any, childNodesOptions: any[], childEdgesOptions: any[]) => any; - - /** - * Optional. - * This is an object containing the options for the cluster node. - * All options described in the nodes module are allowed. - * This allows you to style your cluster node any way you want. - * This is also the style object that is provided in the processProperties function for fine tuning. - * If undefined, default node options will be used. - * - * @type {INodeOptions} - * @memberOf IClusterOptions - */ - clusterNodeProperties?: INodeOptions; - - /** - * Optional. - * This is an object containing the options for the edges connected to the cluster. - * All options described in the edges module are allowed. - * Using this, you can style the edges connecting to the cluster any way you want. - * If none are provided, the options from the edges that are replaced are used. - * If undefined, default edge options will be used. - * - * @type {IEdgeOptions} - * @memberOf IClusterOptions - */ - clusterEdgeProperties?: IEdgeOptions; - } + public get(options?: DataSelectionOptions): T[]; /** - * Options for the openCluster function of Network. + * Get a single item from the DataSet. * - * @export - * @interface IOpenClusterOptions + * @param {IdType} id The item id. + * @param {DataSelectionOptions} [options] + * @returns {T} When no item is found, null is returned when a single item was requested, + * and and empty Array is returned in case of multiple id's. + * + * @memberOf DataSet */ - export interface IOpenClusterOptions { + public get(id: IdType, options?: DataSelectionOptions): T; + + /** + * Get multiple items from the DataSet. + * + * @param {IdType[]} ids Array of item ids. + * @param {DataSelectionOptions} [options] Optional options. + * @returns {T[]} When no item is found, null is returned when a single item was requested, + * and and empty Array is returned in case of multiple id's. + * + * @memberOf DataSet + */ + public get(ids: IdType[], options?: DataSelectionOptions): T[]; + + /** + * Get the DataSet itself. + * In case of a DataView, this function does not return the DataSet + * to which the DataView is connected. + * + * @returns {DataSet} The DataSet itself. + * + * @memberOf DataSet + */ + public getDataSet(): DataSet; + + /** + * Get ids of all items or of a filtered set of items. + * + * @param {DataSelectionOptions} [options] + * @returns {IdType[]} ids of all items or of a filtered set of items. + * + * @memberOf DataSet + */ + public getIds(options?: DataSelectionOptions): IdType[]; + + /** + * Map every item in the DataSet. + * + * @param {(item: T, id: IdType) => T} callback The mapping callback. + * @param {DataSelectionOptions} [options] Optional options. + * @returns {T[]} The mapped items. + * + * @memberOf DataSet + */ + public map(callback: (item: T, id: IdType) => any, options?: DataSelectionOptions): any[]; + + /** + * Find the item with maximum value of specified field. + * + * @param {string} field + * @returns {T} Returns null if no item is found. + * + * @memberOf DataSet + */ + public max(field: string): T; + + /** + * Find the item with minimum value of specified field. + * + * @param {string} field + * @returns {T} Returns null if no item is found. + * + * @memberOf DataSet + */ + public min(field: string): T; + + /** + * Subscribe from an event. + * + * @param {string} event The event name. + * @param {((event: string, properties: any, senderId: IdType) => void)} callback + * a callback function which will be called each time the event occurs. + * + * @memberOf DataSet + */ + public on(event: string, callback: (event: string, properties: any, senderId: IdType) => void): void; + + /** + * Unsubscribe to an event. + * + * @param {string} event The event name. + * @param {((event: string, properties: any, senderId: IdType) => void)} callback + * The exact same callback that was used when calling 'on'. + * + * @memberOf DataSet + */ + public off(event: string, callback: (event: string, properties: any, senderId: IdType) => void): void; + + /** + * Remove one or more items by id. + * + * @param {IdType} id The item id. + * @param {IdType} [senderId] The sender id. + * @returns {IdType[]} Returns an array with the ids of the removed items. + * + * @memberOf DataSet + */ + public remove(id: IdType | IdType[], senderId?: IdType): IdType[]; + + /** + * Set options for the DataSet. + * + * @param {DataSetQueueOptions} [options] + * + * @memberOf DataSet + */ + public setOptions(options?: DataSetQueueOptions): void; + + /** + * Update one or multiple existing items. + * When an item doesn't exist, it will be created. + * + * @param {(T | T[])} data a single item or an array with items. + * @param {IdType} [senderId] + * @returns {IdType[]} Returns an array with the ids of the updated items. + * + * @memberOf DataSet + */ + public update(data: T | T[], senderId?: IdType): IdType[]; + } + + /** + * The DataSet contains functionality to format, filter, and sort data retrieved + * via the methods get, getIds, forEach, and map. + * These methods can have these options as a parameter. + * + * @interface DataSelectionOptions + */ + interface DataSelectionOptions { + /** + * An array with field names, or an object with current field name + * and new field name that the field is returned as. + * By default, all properties of the items are emitted. + * When fields is defined, only the properties whose name is specified + * in fields will be included in the returned items. + * + * @type {(string[] | any)} + * @memberOf DataSelectionOptions + */ + fields?: string[] | any; + + /** + * An object containing field names as key, and data types as value. + * By default, the type of the properties of an item are left unchanged. + * When a field type is specified, this field in the items will be converted to the specified type. + * This can be used for example to convert ISO strings containing a date to a JavaScript Date object, + * or convert strings to numbers or vice versa. The available data types are listed in section Data Types. + * + * @type {*} + * @memberOf DataSelectionOptions + */ + type?: any; + + /** + * Items can be filtered on specific properties by providing a filter function. + * A filter function is executed for each of the items in the DataSet, + * and is called with the item as parameter. + * The function must return a boolean. + * All items for which the filter function returns true will be emitted. + * See section Data Filtering. + * + * @memberOf DataSelectionOptions + */ + filter?: (item: T) => boolean; + + /** + * Order the items by a field name or custom sort function. + * + * @type {(string | any)} + * @memberOf DataSelectionOptions + */ + order?: string | any; + + /** + * Determine the type of output of the get function. + * Allowed values are 'Array' | 'Object'. + * The default returnType is an Array. + * The Object type will return a JSON object with the ID's as keys. + * + * @type {string} + * @memberOf DataSelectionOptions + */ + returnType?: string; + } + + export class DataView { + public length: number; + constructor(items: T[]); + } + + type DataItemCollectionType = DataItem[] | DataSet | DataView; + type DataGroupCollectionType = DataGroup[] | DataSet | DataView; + + export class Timeline { + constructor( + container: HTMLElement, + items: DataItemCollectionType, + groups: DataGroupCollectionType, + options?: TimelineOptions + ); + constructor( + container: HTMLElement, + items: DataItemCollectionType, + options?: TimelineOptions + ); + + public addCustomTime(time: DateType, id?: IdType): IdType; + public destroy(): void; + public fit(options?: TimelineFitOptions): void; + public focus(ids: IdType | IdType[], options?: TimelineFitOptions): void; + public getCurrentTime(): Date; + public getCustomTime(id?: IdType): Date; + public getEventProperties(event: Event): TimelineEventPropertiesResult; + public getItemRange(): any; // TODO + public getSelection(): IdType[]; + public getVisibleItems(): IdType[]; + public getWindow(): { start: Date, end: Date }; + public moveTo(time: DateType, options?: TimelineFitOptions): void; + public on(event: TimelineEvents, callback: () => void): void; + public off(event: TimelineEvents, callback: () => void): void; + public redraw(): void; + public removeCustomTime(id: IdType): void; + public setCurrentTime(time: DateType): void; + public setCustomTime(time: DateType, id?: IdType): void; + public setCustomTimeTitle(title: string, id?: IdType): void; + public setData(data: { groups?: DataGroupCollectionType; items?: DataItemCollectionType }): void; + public setGroups(groups?: DataGroupCollectionType): void; + public setItems(items: DataItemCollectionType): void; + public setOptions(options: TimelineOptions): void; + public setSelection(ids: IdType | IdType[]): void; + public setWindow(start: DateType, end: DateType, options?: TimelineFitOptions): void; + } + + export interface ITimelineStatic { + new (id: HTMLElement, data: any, options?: any): vis.ITimeline; + } + + export interface ITimeline { + setGroups(groups?: ITimelineGroup[]): void; + setItems(items?: ITimelineItem[]): void; + getWindow(): ITimelineWindow; + setWindow(start: any, date: any): void; + focus(selection: any): void; + on(event?: string, callback?: (properties: any) => void): void; + } + + export interface ITimelineWindow { + start: Date; + end: Date; + } + + export interface ITimelineItem { + id: number; + content: string; + group?: number; + start: number; + end?: number; + editable?: boolean; + } + + export interface ITimelineOptions { + stack?: boolean; + start?: any; + end?: any; + orientation?: string; + } + + export interface ITimelineGroup { + id: number; + content: string; + style?: string; + } + + export interface IVisSelectProperties { + items: number[]; + } + + export interface INetwork { + network?: any; + selectNodes?(nodeIds: string[], highlightEdges?: boolean): void; + unselectAll?(): void; + fit?(): void; + } + type NetworkEvents = + 'click' | + 'doubleClick' | + 'oncontext' | + 'hold' | + 'release' | + 'select' | + 'selectNode' | + 'selectEdge' | + 'deselectNode' | + 'deselectEdge' | + 'dragStart' | + 'dragging' | + 'dragEnd' | + 'hoverNode' | + 'blurNode' | + 'hoverEdge' | + 'blurEdge' | + 'zoom' | + 'showPopup' | + 'hidePopup' | + 'startStabilizing' | + 'stabilizationProgress' | + 'stabilizationIterationsDone' | + 'stabilized' | + 'resize' | + 'initRedraw' | + 'beforeDrawing' | + 'afterDrawing' | + 'animationFinished' | + 'configChange'; + + /** + * Network is a visualization to display networks and networks consisting of nodes and edges. + * The visualization is easy to use and supports custom shapes, styles, colors, sizes, images, and more. + * The network visualization works smooth on any modern browser for up to a few thousand nodes and edges. + * To handle a larger amount of nodes, Network has clustering support. Network uses HTML canvas for rendering. + * + * @export + * @class Network + * @implements {INetwork} + */ + export class Network { + + /** + * Creates an instance of Network. + * + * @param {HTMLElement} container the HTML element representing the network container + * @param {IData} data network data + * @param {IOptions} [options] optional network options + * + * @memberOf Network + */ + constructor(container: HTMLElement, data: IData, options?: IOptions); + + /** + * Remove the network from the DOM and remove all Hammer bindings and references. + * + * @memberOf Network + */ + public destroy(): void; + + /** + * Override all the data in the network. + * If stabilization is enabled in the physics module, + * the network will stabilize again. + * This method is also performed when first initializing the network. + * + * @param {IData} data network data + * + * @memberOf Network + */ + public setData(data: IData): void; + + /** + * Set the options. + * All available options can be found in the modules above. + * Each module requires it's own container with the module name to contain its options. + * + * @param {IOptions} options network options + * + * @memberOf Network + */ + public setOptions(options: IOptions): void; + + /** + * Set an event listener. + * Depending on the type of event you get different parameters for the callback function. + * + * @param {string} eventName the name of the event, f.e. 'click' + * @param {(params?: any) => void} callback the callback function that will be raised + * + * @memberOf Network + */ + public on(eventName: NetworkEvents, callback: (params?: any) => void): void; + + /** + * Remove an event listener. + * The function you supply has to be the exact same as the one you used in the on function. + * If no function is supplied, all listeners will be removed. + * + * @param {string} eventName the name of the event, f.e. 'click' + * @param {(params?: any) => void} [callback] the exact same callback function that was used when calling 'on' + * + * @memberOf Network + */ + public off(eventName: NetworkEvents, callback?: (params?: any) => void): void; + + /** + * Set an event listener only once. + * After it has taken place, the event listener will be removed. + * Depending on the type of event you get different parameters for the callback function. + * + * @param {string} eventName the name of the event, f.e. 'click' + * @param {(params?: any) => void} callback the callback function that will be raised once + * + * @memberOf Network + */ + public once(eventName: NetworkEvents, callback: (params?: any) => void): void; + + /** + * This function converts canvas coordinates to coordinates on the DOM. + * Input and output are in the form of {x:Number, y:Number} (IPosition interface). + * The DOM values are relative to the network container. + * + * @param {IPosition} position the canvas coordinates + * @returns {IPosition} the DOM coordinates + * + * @memberOf Network + */ + public canvasToDOM(position: IPosition): IPosition; + + /** + * This function converts DOM coordinates to coordinates on the canvas. + * Input and output are in the form of {x:Number,y:Number} (IPosition interface). + * The DOM values are relative to the network container. + * + * @param {IPosition} position the DOM coordinates + * @returns {IPosition} the canvas coordinates + * + * @memberOf Network + */ + public DOMtoCanvas(position: IPosition): IPosition; + + /** + * Redraw the network. + * + * @memberOf Network + */ + public redraw(): void; + + /** + * Set the size of the canvas. + * This is automatically done on a window resize. + * + * @param {string} width width in a common format, f.e. '100px' + * @param {string} height height in a common format, f.e. '100px' + * + * @memberOf Network + */ + public setSize(width: string, height: string): void; + + /** + * The joinCondition function is presented with all nodes. + * + * @param {IClusterOptions} [options] + * + * @memberOf Network + */ + public cluster(options?: IClusterOptions): void; + + /** + * This method looks at the provided node and makes a cluster of it and all it's connected nodes. + * The behaviour can be customized by proving the options object. + * All options of this object are explained below. + * The joinCondition is only presented with the connected nodes. + * + * @param {string} nodeId the id of the node + * @param {IClusterOptions} [options] the cluster options + * + * @memberOf Network + */ + public clusterByConnection(nodeId: string, options?: IClusterOptions): void; + + /** + * This method checks all nodes in the network and those with a equal or higher + * amount of edges than specified with the hubsize qualify. + * If a hubsize is not defined, the hubsize will be determined as the average + * value plus two standard deviations. + * For all qualifying nodes, clusterByConnection is performed on each of them. + * The options object is described for clusterByConnection and does the same here. + * + * @param {number} [hubsize] optional hubsize + * @param {IClusterOptions} [options] optional cluster options + * + * @memberOf Network + */ + public clusterByHubsize(hubsize?: number, options?: IClusterOptions): void; + + /** + * This method will cluster all nodes with 1 edge with their respective connected node. + * + * @param {IClusterOptions} [options] optional cluster options + * + * @memberOf Network + */ + public clusterOutliers(options?: IClusterOptions): void; + + /** + * Nodes can be in clusters. + * Clusters can also be in clusters. + * This function returns an array of nodeIds showing where the node is. + * + * Example: + * cluster 'A' contains cluster 'B', cluster 'B' contains cluster 'C', + * cluster 'C' contains node 'fred'. + * + * network.clustering.findNode('fred') will return ['A','B','C','fred']. + * + * @param {IdType} nodeId the node id. + * @returns {IdType[]} an array of nodeIds showing where the node is + * + * @memberOf Network + */ + public findNode(nodeId: IdType): IdType[]; + + /** + * Similar to findNode in that it returns all the edge ids that were + * created from the provided edge during clustering. + * + * @param {IdType} baseEdgeId the base edge id + * @returns {IdType[]} an array of edgeIds + */ + public getClusteredEdges(baseEdgeId: IdType): IdType[]; + + /** + * When a clusteredEdgeId is available, this method will return the original + * baseEdgeId provided in data.edges ie. + * After clustering the 'SelectEdge' event is fired but provides only the clustered edge. + * This method can then be used to return the baseEdgeId. + * + * @param {IdType} clusteredEdgeId + * @returns {IdType} + */ + public getBaseEdge(clusteredEdgeId: IdType): IdType; + + /** + * Visible edges between clustered nodes are not the same edge as the ones provided + * in data.edges passed on network creation. With each layer of clustering, copies of + * the edges between clusters are created and the previous edges are hidden, + * until the cluster is opened. This method takes an edgeId (ie. a base edgeId from data.edges) + * and applys the options to it and any edges that were created from it while clustering. + * + * @param {IdType} startEdgeId + * @param {IEdgeOptions} [options] + */ + public updateEdge(startEdgeId: IdType, options?: IEdgeOptions): void; + + /** + * Clustered Nodes when created are not contained in the original data.nodes + * passed on network creation. This method updates the cluster node. + */ + public updateClusteredNode(clusteredNodeId: IdType, options?: INodeOptions): void; + + /** + * Returns true if the node whose ID has been supplied is a cluster. + * + * @param {IdType} nodeId the node id. + * @returns {boolean} + * + * @memberOf Network + */ + public isCluster(nodeId: IdType): boolean; + + /** + * Returns an array of all nodeIds of the nodes that + * would be released if you open the cluster. + * + * @param {IdType} clusterNodeId the id of the cluster node + * @returns {IdType[]} + * + * @memberOf Network + */ + public getNodesInCluster(clusterNodeId: IdType): IdType[]; + + /** + * Opens the cluster, releases the contained nodes and edges, + * removing the cluster node and cluster edges. + * The options object is optional and currently supports one option, + * releaseFunction, which is a function that can be used to manually + * position the nodes after the cluster is opened. + * + * @param {IdType} nodeId the node id + * @param {IOpenClusterOptions} [options] optional open cluster options + * + * @memberOf Network + */ + public openCluster(nodeId: IdType, options?: IOpenClusterOptions): void; + + /** + * If you like the layout of your network + * and would like it to start in the same way next time, + * ask for the seed using this method and put it in the layout.randomSeed option. + * + * @returns {number} the current seed of the network. + * + * @memberOf Network + */ + public getSeed(): number; + + /** + * Programatically enable the edit mode. + * Similar effect to pressing the edit button. + * + * @memberOf Network + */ + public enableEditMode(): void; + + /** + * Programatically disable the edit mode. + * Similar effect to pressing the close icon (small cross in the corner of the toolbar). + * + * @memberOf Network + */ + public disableEditMode(): void; + + /** + * Go into addNode mode. Having edit mode or manipulation enabled is not required. + * To get out of this mode, call disableEditMode(). + * The callback functions defined in handlerFunctions still apply. + * To use these methods without having the manipulation GUI, make sure you set enabled to false. + * + * @memberOf Network + */ + public addNodeMode(): void; + + /** + * Edit the selected node. + * The explaination from addNodeMode applies here as well. + * + * @memberOf Network + */ + public editNode(): void; + + /** + * Go into addEdge mode. + * The explaination from addNodeMode applies here as well. + * + * @memberOf Network + */ + public addEdgeMode(): void; + + /** + * Go into editEdge mode. + * The explaination from addNodeMode applies here as well. + * + * @memberOf Network + */ + public editEdgeMode(): void; + + /** + * Delete selected. + * Having edit mode or manipulation enabled is not required. + * + * @memberOf Network + */ + public deleteSelected(): void; + + /** + * Returns the x y positions in canvas space of the nodes with the supplied nodeIds as an object. + * + * Alternative inputs are a String containing a nodeId or nothing. + * When a String is supplied, the position of the node corresponding to the ID is returned. + * When nothing is supplied, the positions of all nodes are returned. + * + * @param {string[]} nodeIds + * @returns {{[nodeId: IdType]: IPosition}} + * + * @memberOf Network + */ + public getPositions(nodeIds?: IdType[]): { [nodeId: string]: IPosition }; + public getPositions(nodeId: IdType): IPosition; + + /** + * When using the vis.DataSet to load your nodes into the network, + * this method will put the X and Y positions of all nodes into that dataset. + * If you're loading your nodes from a database and have this dynamically coupled with the DataSet, + * you can use this to stablize your network once, then save the positions in that database + * through the DataSet so the next time you load the nodes, stabilization will be near instantaneous. + * + * If the nodes are still moving and you're using dynamic smooth edges (which is on by default), + * you can use the option stabilization.onlyDynamicEdges in the physics module to improve initialization time. + * + * This method does not support clustering. + * At the moment it is not possible to cache positions when using clusters since + * they cannot be correctly initialized from just the positions. + * + * @memberOf Network + */ + public storePositions(): void; + + /** + * You can use this to programatically move a node. + * The supplied x and y positions have to be in canvas space! + * + * @param {IdType} nodeId the node that will be moved + * @param {number} x new canvas space x position + * @param {number} y new canvas space y position + * + * @memberOf Network + */ + public moveNode(nodeId: IdType, x: number, y: number): void; + + /** + * Returns a bounding box for the node including label. + * + * @param {IdType} nodeId + * @returns {IBoundingBox} + * + * @memberOf Network + */ + public getBoundingBox(nodeId: IdType): IBoundingBox; + + /** + * Returns an array of nodeIds of the all the nodes that are directly connected to this node. + * If you supply an edgeId, vis will first match the id to nodes. + * If no match is found, it will search in the edgelist and return an array: [fromId, toId]. + * + * @param {IdType} nodeOrEdgeId a node or edge id + * @returns {(IdType[] | {fromId: IdType, toId: IdType}[])} + * + * @memberOf Network + */ + public getConnectedNodes(nodeOrEdgeId: IdType): IdType[] | Array<{ fromId: IdType, toId: IdType }>; + + /** + * Returns an array of edgeIds of the edges connected to this node. + * + * @param {IdType} nodeId the node id + * @returns {IdType[]} + * + * @memberOf Network + */ + public getConnectedEdges(nodeId: IdType): IdType[]; + + /** + * Start the physics simulation. + * This is normally done whenever needed and is only really useful + * if you stop the simulation yourself and wish to continue it afterwards. + * + * @memberOf Network + */ + public startSimulation(): void; + + /** + * This stops the physics simulation and triggers a stabilized event. + * Tt can be restarted by dragging a node, + * altering the dataset or calling startSimulation(). + * + * @memberOf Network + */ + public stopSimulation(): void; + + /** + * You can manually call stabilize at any time. + * All the stabilization options above are used. + * You can optionally supply the number of iterations it should do. + * + * @param {number} [iterations] the number of iterations it should do + * + * @memberOf Network + */ + public stabilize(iterations?: number): void; + + /** + * Returns an object with selected nodes and edges ids. + * + * @returns {{ nodes: IdType[], edges: IdType[] }} + * + * @memberOf Network + */ + public getSelection(): { nodes: IdType[], edges: IdType[] }; + + /** + * Returns an array of selected node ids like so: + * [nodeId1, nodeId2, ..]. + * + * @returns {IdType[]} + * + * @memberOf Network + */ + public getSelectedNodes(): IdType[]; + + /** + * Returns an array of selected edge ids like so: + * [edgeId1, edgeId2, ..]. + * + * @returns {IdType[]} + * + * @memberOf Network + */ + public getSelectedEdges(): IdType[]; + + /** + * Returns a nodeId or undefined. + * The DOM positions are expected to be in pixels from the top left corner of the canvas. + * + * @param {IPosition} position + * @returns {IdType} + * + * @memberOf Network + */ + public getNodeAt(position: IPosition): IdType; + + /** + * Returns a edgeId or undefined. + * The DOM positions are expected to be in pixels from the top left corner of the canvas. + * + * @param {IPosition} position + * @returns {IdType} + * + * @memberOf Network + */ + public getEdgeAt(position: IPosition): IdType; + + /** + * Selects the nodes corresponding to the id's in the input array. + * If highlightEdges is true or undefined, the neighbouring edges will also be selected. + * This method unselects all other objects before selecting its own objects. Does not fire events. + * + * @param {IdType[]} nodeIds + * @param {boolean} [highlightEdges] + * + * @memberOf Network + */ + public selectNodes(nodeIds: IdType[], highlightEdges?: boolean): void; + + /** + * Selects the edges corresponding to the id's in the input array. + * This method unselects all other objects before selecting its own objects. + * Does not fire events. + * + * @param {IdType[]} edgeIds + * + * @memberOf Network + */ + public selectEdges(edgeIds: IdType[]): void; + + /** + * Sets the selection. + * You can also pass only nodes or edges in selection object. + * + * @param {{ nodes: IdType[], edges: IdType[] }} selection + * @param {ISelectionOptions} [options] + * + * @memberOf Network + */ + public setSelection(selection: { nodes: IdType[], edges: IdType[] }, options?: ISelectionOptions): void; + + /** + * Unselect all objects. + * Does not fire events. + * + * @memberOf Network + */ + public unselectAll(): void; + + /** + * Returns the current scale of the network. + * 1.0 is comparible to 100%, 0 is zoomed out infinitely. + * + * @returns {number} the current scale of the network + * + * @memberOf Network + */ + public getScale(): number; + + /** + * Returns the current central focus point of the view in the form: { x: {Number}, y: {Number} } + * + * @returns {IPosition} the view position; + * + * @memberOf Network + */ + public getViewPosition(): IPosition; + + /** + * Zooms out so all nodes fit on the canvas. + * + * @param {IFitOptions} [options] All options are optional for the fit method + * + * @memberOf Network + */ + public fit(options?: IFitOptions): void; + + /** + * You can focus on a node with this function. + * What that means is the view will lock onto that node, if it is moving, the view will also move accordingly. + * If the view is dragged by the user, the focus is broken. You can supply options to customize the effect. + * + * @param {IdType} nodeId + * @param {IFocusOptions} [options] + * + * @memberOf Network + */ + public focus(nodeId: IdType, options?: IFocusOptions): void; + + /** + * You can animate or move the camera using the moveTo method. + * + * @param {IMoveToOptions} options + * + * @memberOf Network + */ + public moveTo(options: IMoveToOptions): void; + + /** + * Programatically release the focussed node. + * + * @memberOf Network + */ + public releaseNode(): void; + + /** + * If you use the configurator, you can call this method to get an options object that contains + * all differences from the default options caused by users interacting with the configurator. + * + * @returns {*} + * + * @memberOf Network + */ + public getOptionsFromConfigurator(): any; + } + + /** + * Options interface for focus function. + * + * @export + * @interface IFocusOptions + * @extends {IViewPortOptions} + */ + export interface IFocusOptions extends IViewPortOptions { + /** + * Locked denotes whether or not the view remains locked to + * the node once the zoom-in animation is finished. + * Default value is true. + * + * @type {boolean} + * @memberOf IFocusOptions + */ + locked?: boolean; + } + + /** + * Base options interface for some viewport functions. + * + * @export + * @interface IViewPortOptions + */ + export interface IViewPortOptions { + /** + * The scale is the target zoomlevel. + * Default value is 1.0. + * + * @type {number} the scale. + * @memberOf IFocusOptions + */ + scale?: number; + + /** + * The offset (in DOM units) is how many pixels from the center the view is focussed. + * Default value is {x:0,y:0} + * + * @type {IPosition} + * @memberOf IFocusOptions + */ + offset?: IPosition; + + /** + * For animation you can either use a Boolean to use it with the default options or + * disable it or you can define the duration (in milliseconds) and easing function manually. + * + * @type {(IAnimationOptions | boolean)} + * @memberOf IFitOptions + */ + animation?: IAnimationOptions | boolean; + } + + /** + * You will have to define at least a scale, position or offset. + * Otherwise, there is nothing to move to. + * + * @export + * @interface IMoveToOptions + * @extends {IViewPortOptions} + */ + export interface IMoveToOptions extends IViewPortOptions { + /** + * The position (in canvas units!) is the position of the central focus point of the camera. + * + * @type {IPosition} + * @memberOf IMoveToOptions + */ + position?: IPosition; + } + + /** + * Animation options interface. + * + * @export + * @interface IAnimationOptions + */ + export interface IAnimationOptions { + + /** + * The duration (in milliseconds). + * + * @type {number} + * @memberOf IAnimationOptions + */ + duration: number; + /** + * The easing function. + * + * Available are: + * linear, easeInQuad, easeOutQuad, easeInOutQuad, easeInCubic, + * easeOutCubic, easeInOutCubic, easeInQuart, easeOutQuart, easeInOutQuart, + * easeInQuint, easeOutQuint, easeInOutQuint. + * + * @type {string} + * @memberOf IAnimationOptions + */ + easingFunction: string; + } + + /** + * Optional options for the fit method. + * + * @export + * @interface IFitOptions + */ + export interface IFitOptions { + + /** + * The nodes can be used to zoom to fit only specific nodes in the view. + * + * @type {string[]} + * @memberOf IFitOptions + */ + nodes?: string[]; + + /** + * For animation you can either use a Boolean to use it with the default options or + * disable it or you can define the duration (in milliseconds) and easing function manually. + * + * @type {(IAnimationOptions | boolean)} + * @memberOf IFitOptions + */ + animation: IAnimationOptions | boolean; + } + + export interface ISelectionOptions { + unselectAll?: boolean; + highlightEdges?: boolean; + } + + /** + * These values are in canvas space. + * + * @export + * @interface IBoundingBox + */ + export interface IBoundingBox { + top: number; + left: number; + right: number; + bottom: number; + } + + /** + * Cluster methods options interface. + * + * @export + * @interface IClusterOptions + */ + export interface IClusterOptions { + + /** + * Optional for all but the cluster method. + * The cluster module loops over all nodes that are selected to be in the cluster + * and calls this function with their data as argument. If this function returns true, + * this node will be added to the cluster. You have access to all options (including the default) + * as well as any custom fields you may have added to the node to determine whether or not to include it in the cluster. + * + * @memberOf IClusterOptions + */ + joinCondition?: (nodeOptions: any) => boolean; + + /** + * Optional. + * Before creating the new cluster node, this (optional) function will be called with the properties + * supplied by you (clusterNodeProperties), all contained nodes and all contained edges. + * You can use this to update the properties of the cluster based on which items it contains. + * The function should return the properties to create the cluster node. + * + * @type {(clusterOptions: any, childNodesOptions: any[], childEdgesOptions: any[])} + * @memberOf IClusterOptions + */ + processProperties?: (clusterOptions: any, childNodesOptions: any[], childEdgesOptions: any[]) => any; + + /** + * Optional. + * This is an object containing the options for the cluster node. + * All options described in the nodes module are allowed. + * This allows you to style your cluster node any way you want. + * This is also the style object that is provided in the processProperties function for fine tuning. + * If undefined, default node options will be used. + * + * @type {INodeOptions} + * @memberOf IClusterOptions + */ + clusterNodeProperties?: INodeOptions; + + /** + * Optional. + * This is an object containing the options for the edges connected to the cluster. + * All options described in the edges module are allowed. + * Using this, you can style the edges connecting to the cluster any way you want. + * If none are provided, the options from the edges that are replaced are used. + * If undefined, default edge options will be used. + * + * @type {IEdgeOptions} + * @memberOf IClusterOptions + */ + clusterEdgeProperties?: IEdgeOptions; + } + + /** + * Options for the openCluster function of Network. + * + * @export + * @interface IOpenClusterOptions + */ + export interface IOpenClusterOptions { + + /** + * A function that can be used to manually position the nodes after the cluster is opened. + * The containedNodesPositions contain the positions of the nodes in the cluster at the + * moment they were clustered. This function is expected to return the newPositions, + * which can be the containedNodesPositions (altered) or a new object. + * This has to be an object with keys equal to the nodeIds that exist in the + * containedNodesPositions and an {x:x,y:y} position object. + * + * For all nodeIds not listed in this returned object, + * we will position them at the location of the cluster. + * This is also the default behaviour when no releaseFunction is defined. + * + * @memberOf IOpenClusterOptions + */ + releaseFunction: ( + clusterPosition: IPosition, + containedNodesPositions: { [nodeId: string]: IPosition }) => { [nodeId: string]: IPosition }; + } + + export interface IPosition { + x: number; + y: number; + } + + export interface IProperties { + + nodes: string[]; + + edges: string[]; + + event: string[]; + + pointer: { + DOM: IPosition; + canvas: IPosition; + }; + + previousSelection?: { + nodes: string[]; + edges: string[]; + }; + } + + export interface Callback { + callback?: (params?: any) => void; + } + + export interface IData { + nodes?: INode[] | DataSet; + edges?: IEdge[] | DataSet; + } + + export interface INode { + id?: IdType; + label?: string; + x?: number; + y?: number; + fixed?: boolean; + image?: string; + shape?: string; + } + + export interface IEdge { + from?: IdType; + to?: IdType; + id?: IdType; + } + + export interface IOptions { + autoResize?: boolean; + + width?: string; + + height?: string; - /** - * A function that can be used to manually position the nodes after the cluster is opened. - * The containedNodesPositions contain the positions of the nodes in the cluster at the - * moment they were clustered. This function is expected to return the newPositions, - * which can be the containedNodesPositions (altered) or a new object. - * This has to be an object with keys equal to the nodeIds that exist in the - * containedNodesPositions and an {x:x,y:y} position object. - * - * For all nodeIds not listed in this returned object, - * we will position them at the location of the cluster. - * This is also the default behaviour when no releaseFunction is defined. - * - * @memberOf IOpenClusterOptions - */ - releaseFunction: (clusterPosition: IPosition, containedNodesPositions: { [nodeId: string]: IPosition }) => { [nodeId: string]: IPosition }; - } + locale?: string; - export interface IPosition { - x: number; - y: number; - } + locales?: string[]; - export interface IProperties { + clickToUse?: boolean; - nodes: string[]; + configure?: any; // http://visjs.org/docs/network/configure.html# - edges: string[]; + edges?: IEdgeOptions; - event: string[]; - - pointer: { - DOM: IPosition; - canvas: IPosition; - }; + nodes?: INodeOptions; - previousSelection?: { - nodes: string[]; - edges: string[]; - }; - } + groups?: any; - export interface Callback { - callback?: (params?: any) => void; - } + layout?: any; // http://visjs.org/docs/network/layout.html - export interface IData { - nodes?: INode[] | DataSet; - edges?: IEdge[] | DataSet; - } + interaction?: any; // visjs.org/docs/network/interaction.html?keywords=edges - export interface INode { - id?: IdType; - label?: string; - x?: number; - y?: number; - fixed?: boolean; - image?: string; - shape?: string; - } + manipulation?: any; // http://visjs.org/docs/network/manipulation.html# - export interface IEdge { - from?: IdType; - to?: IdType; - id?: IdType; - } + physics?: any; // http://visjs.org/docs/network/physics.html# + } - export interface IOptions { - autoResize?: boolean; + export interface INodeOptions { + borderWidth?: number; - width?: string; + borderWidthSelected?: number; - height?: string; + brokenImage?: string; - locale?: string; + color?: { + border?: string, + background?: string, + highlight?: string | { + border?: string, + background?: string, + }, + hover?: string | { + border?: string, + background?: string, + } + }; - locales?: string[]; + fixed?: boolean | { + x?: boolean, + y?: boolean, + }; - clickToUse?: boolean; + font?: string | { + color: string, + size: number, // px + face: string, + background: string, + strokeWidth: number, // px + strokeColor: string, + align: string, + }; - configure?: any; // http://visjs.org/docs/network/configure.html# + group?: string; - edges?: IEdgeOptions; + hidden?: boolean; - nodes?: INodeOptions; + icon?: { + face?: string, + code?: string, + size?: number, // 50, + color?: string, + }; - groups?: any; + id?: string; - layout?: any; // http://visjs.org/docs/network/layout.html + image?: string; - interaction?: any; // visjs.org/docs/network/interaction.html?keywords=edges + label?: string; - manipulation?: any; // http://visjs.org/docs/network/manipulation.html# + labelHighlightBold?: boolean; - physics?: any; // http://visjs.org/docs/network/physics.html# - } + level?: number; - export interface INodeOptions { - borderWidth?: number; + mass?: number; - borderWidthSelected?: number; + physics?: boolean; - brokenImage?: string; + scaling?: IOptionsScaling; - color?: { - border?: string, - background?: string, - highlight?: string | { - border?: string, - background?: string, - }, - hover?: string | { - border?: string, - background?: string, - } - }; + shadow?: boolean | IOptionsShadow; - fixed?: boolean | { - x?: boolean, - y?: boolean, - }; + shape?: string; - font?: string | { - color: string, - size: number, // px - face: string, - background: string, - strokeWidth: number, // px - strokeColor: string, - align: string, - }; + shapeProperties?: { + borderDashes: boolean | number[], // only for borders + borderRadius: number, // only for box shape + interpolation: boolean, // only for image and circularImage shapes + useImageSize: boolean, // only for image and circularImage shapes + useBorderWithImage: boolean // only for image shape + }; - group?: string; + size?: number; - hidden?: boolean; + title?: string; - icon?: { - face?: string, - code?: string, - size?: number, // 50, - color?: string, - }; + value?: number; - id?: string; + x?: number; - image?: string; + y?: number; + } - label?: string; + export interface IEdgeOptions { + arrows?: string | { + to?: boolean | { + enabled?: boolean, + scaleFactor?: number, + }, + middle?: boolean | { + enabled?: boolean, + scaleFactor?: number, + }, + from: boolean | { + enabled?: boolean, + scaleFactor?: number, + } + }; - labelHighlightBold?: boolean; + arrowStrikethrough?: boolean; - level?: number; + color?: string | { + color?: string, + highlight?: string, + hover?: string, + inherit?: boolean | string, + opacity?: number, + }; - mass?: number; + dashes?: boolean | number[]; - physics?: boolean; + font?: string | { + color?: string, + size?: number, // px + face?: string, + background?: string, + strokeWidth?: number, // px + strokeColor?: string, + align?: string, + }; - scaling?: IOptionsScaling; + from?: number | string; - shadow?: boolean | IOptionsShadow; + hidden?: boolean; - shape?: string; + hoverWidth?: number; // please note, hoverWidth could be also a function. This case is not represented here - shapeProperties?: { - borderDashes: boolean | number[], // only for borders - borderRadius: number, // only for box shape - interpolation: boolean, // only for image and circularImage shapes - useImageSize: boolean, // only for image and circularImage shapes - useBorderWithImage: boolean // only for image shape - }; + id?: string; - size?: number; + label?: string; - title?: string; + labelHighlightBold?: boolean; - value?: number; + length?: number; - x?: number; + physics?: boolean; - y?: number; - } + scaling?: IOptionsScaling; - export interface IEdgeOptions { - arrows?: string | { - to?: boolean | { - enabled?: boolean, - scaleFactor?: number, - }, - middle?: boolean | { - enabled?: boolean, - scaleFactor?: number, - }, - from: boolean | { - enabled?: boolean, - scaleFactor?: number, - } - }; + selectionWidth?: number; // please note, selectionWidth could be also a function. This case is not represented here - arrowStrikethrough?: boolean; + selfReferenceSize?: number; - color?: string | { - color?: string, - highlight?: string, - hover?: string, - inherit?: boolean | string, - opacity?: number, - }; + shadow?: boolean | IOptionsShadow; - dashes?: boolean | number[]; + smooth?: boolean | { + enabled: boolean, + type: string, + forceDirection?: string | boolean, + roundness: number, + }; - font?: string | { - color?: string, - size?: number, // px - face?: string, - background?: string, - strokeWidth?: number, // px - strokeColor?: string, - align?: string, - }; + title?: string; - from?: number | string; + to?: number | string; - hidden?: boolean; + value?: number; - hoverWidth?: number; // please note, hoverWidth could be also a function. This case is not represented here + width?: number; + } - id?: string; + export interface IOptionsScaling { + min?: number; + max?: number; + label?: boolean | { + enabled?: boolean, + min?: number, + max?: number, + maxVisible?: number, + drawThreshold?: number + }; + customScalingFunction?(min?: number, max?: number, total?: number, value?: number): number; + } - label?: string; - - labelHighlightBold?: boolean; - - length?: number; - - physics?: boolean; - - scaling?: IOptionsScaling; - - selectionWidth?: number; // please note, selectionWidth could be also a function. This case is not represented here - - selfReferenceSize?: number; - - shadow?: boolean | IOptionsShadow; - - smooth?: boolean | { - enabled: boolean, - type: string, - forceDirection?: string | boolean, - roundness: number, - }; - - title?: string; - - to?: number | string; - - value?: number; - - width?: number; - } - - export interface IOptionsScaling { - min?: number; - max?: number; - label?: boolean | { - enabled?: boolean, - min?: number, - max?: number, - maxVisible?: number, - drawThreshold?: number - }; - customScalingFunction?(min?: number, max?: number, total?: number, value?: number): number; - } - - export interface IOptionsShadow { - enabled: boolean; - color: string; - size: number; - x: number; - y: number; - } - - export interface IEvents { - click?(properties?: IProperties): void; - - doubleClick?(properties?: IProperties): void; - - oncontext?(properties?: IProperties): void; - - hold?(properties?: IProperties): void; - - release?(properties?: IProperties): void; - - select?(properties?: IProperties): void; - - selectNode?(properties?: IProperties): void; - - selectEdge?(properties?: IProperties): void; - - deselectNode?(properties?: IProperties): void; - - deselectEdge?(properties?: IProperties): void; - - dragStart?(properties?: IProperties): void; - - dragging?(properties?: IProperties): void; - - dragEnd?(properties?: IProperties): void; - - hoverNode?(node?: string): void; - - blurNode?(node?: string): void; - - hoverEdge?(node?: string): void; - - blurEdge?(node?: string): void; - - zoom?(node?: string): void; - - showPopup?(node?: string): void; - - hidePopup?(node?: string): void; - - startStabilizing?(): void; - - stabilizationProgress?(properties?: { - iterations?: number, - total?: number, - }): void; - - stabilizationIterationsDone?(): void; - - stabilized?(properties?: { - iterations?: number, - }): void; - - resize?(properties?: { - width: number, - height: number, - oldWidth: number, - oldHeight: number, - }): void; - - initRedraw?(): void; - - beforeDrawing?(canvasContext?: any): void; - - afterDrawing?(canvasContext?: any): void; - - animationFinished?(): void; - - configChange?(properties?: any): void; - } + export interface IOptionsShadow { + enabled: boolean; + color: string; + size: number; + x: number; + y: number; + } } declare module "vis" { - export = vis; + export = vis; } diff --git a/vis/vis-tests.ts b/vis/vis-tests.ts index b6240abca4..39773cf9ca 100644 --- a/vis/vis-tests.ts +++ b/vis/vis-tests.ts @@ -14,12 +14,12 @@ new vis.Network(new HTMLDivElement(), { nodes: new vis.DataSet(), edges: new vis // interface TestData { - id: number; - text?: string; - date?: any; - group?: number; - balance?: number; - first?: boolean; + id: number; + text?: string; + date?: any; + group?: number; + balance?: number; + first?: boolean; } // create a DataSet @@ -29,15 +29,15 @@ var data = new vis.DataSet(options); // add items // note that the data items can contain different properties and data formats data.add([ - { id: 1, text: 'item 1', date: new Date(2013, 6, 20), group: 1, first: true }, - { id: 2, text: 'item 2', date: '2013-06-23', group: 2 }, - { id: 3, text: 'item 3', date: '2013-06-25', group: 2 }, - { id: 4, text: 'item 4' } + { id: 1, text: 'item 1', date: new Date(2013, 6, 20), group: 1, first: true }, + { id: 2, text: 'item 2', date: '2013-06-23', group: 2 }, + { id: 3, text: 'item 3', date: '2013-06-25', group: 2 }, + { id: 4, text: 'item 4' } ]); // subscribe to any change in the DataSet data.on('*', function (event, properties, senderId) { - console.log('event', event, properties); + console.log('event', event, properties); }); // update an existing item @@ -56,18 +56,18 @@ console.log('item1', item1); // retrieve a filtered subset of the data var items = data.get({ - filter: function (item) { - return item.group == 1; - } + filter: function (item) { + return item.group == 1; + } }); console.log('filtered items', items); // retrieve formatted items var items = data.get({ - fields: ['id', 'date'], - type: { - date: 'ISODate' - } + fields: ['id', 'date'], + type: { + date: 'ISODate' + } }); console.log('formatted items', items); @@ -80,7 +80,7 @@ var data = new vis.DataSet(); // subscribe to any change in the DataSet data.on('*', function (event, properties, senderId) { - console.log('event:', event, 'properties:', properties, 'senderId:', senderId); + console.log('event:', event, 'properties:', properties, 'senderId:', senderId); }); // add an item @@ -97,9 +97,9 @@ var data = new vis.DataSet(); // add items data.add([ - { id: 1, text: 'item 1' }, - { id: 2, text: 'item 2' }, - { id: 3, text: 'item 3' } + { id: 1, text: 'item 1' }, + { id: 2, text: 'item 2' }, + { id: 3, text: 'item 3' } ]); // update an item @@ -115,35 +115,35 @@ data.remove(3); // create a DataSet var data = new vis.DataSet(); data.add([ - { id: 1, text: 'item 1', date: '2013-06-20', group: 1, first: true }, - { id: 2, text: 'item 2', date: '2013-06-23', group: 2 }, - { id: 3, text: 'item 3', date: '2013-06-25', group: 2 }, - { id: 4, text: 'item 4' } + { id: 1, text: 'item 1', date: '2013-06-20', group: 1, first: true }, + { id: 2, text: 'item 2', date: '2013-06-23', group: 2 }, + { id: 3, text: 'item 3', date: '2013-06-25', group: 2 }, + { id: 4, text: 'item 4' } ]); // retrieve formatted items var items = data.get({ - fields: ['id', 'date', 'group'], // output the specified fields only - type: { - date: 'Date', // convert the date fields to Date objects - group: 'String' // convert the group fields to Strings - } + fields: ['id', 'date', 'group'], // output the specified fields only + type: { + date: 'Date', // convert the date fields to Date objects + group: 'String' // convert the group fields to Strings + } }); var dataset = new vis.DataSet(); // retrieve all items having a property group with value 2 var group2 = dataset.get({ - filter: function (item) { - return (item.group == 2); - } + filter: function (item) { + return (item.group == 2); + } }); // retrieve all items having a property balance with a value above zero var positiveBalance = dataset.get({ - filter: function (item) { - return (item.balance > 0); - } + filter: function (item) { + return (item.balance > 0); + } }); // @@ -152,19 +152,19 @@ var positiveBalance = dataset.get({ // create an array with nodes var nodes = new vis.DataSet([ - { id: 1, label: 'Node 1' }, - { id: 2, label: 'Node 2' }, - { id: 3, label: 'Node 3' }, - { id: 4, label: 'Node 4' }, - { id: 5, label: 'Node 5' } + { id: 1, label: 'Node 1' }, + { id: 2, label: 'Node 2' }, + { id: 3, label: 'Node 3' }, + { id: 4, label: 'Node 4' }, + { id: 5, label: 'Node 5' } ]); // create an array with edges var edges = new vis.DataSet([ - { from: 1, to: 3 }, - { from: 1, to: 2 }, - { from: 2, to: 4 }, - { from: 2, to: 5 } + { from: 1, to: 3 }, + { from: 1, to: 2 }, + { from: 2, to: 4 }, + { from: 2, to: 5 } ]); // create a network @@ -172,8 +172,8 @@ var container = document.getElementById('mynetwork'); // provide the data in the vis format var data2 = { - nodes: nodes, - edges: edges + nodes: nodes, + edges: edges }; var options = {}; @@ -186,12 +186,12 @@ var network = new vis.Network(container, data2, options); // these are all options in full. var options2 = { - configure: { - enabled: true, - filter: 'nodes,edges', - container: container, - showButton: true - } + configure: { + enabled: true, + filter: 'nodes,edges', + container: container, + showButton: true + } } network.setOptions(options2); \ No newline at end of file From c09535b9f654dd96fff3977c612afdd330420eb5 Mon Sep 17 00:00:00 2001 From: Matthieu Maitre Date: Sun, 4 Dec 2016 02:32:10 -0800 Subject: [PATCH 4/4] Fix travis build failures --- vis/index.d.ts | 200 ++++++++++++++++++++++++------------------------- 1 file changed, 100 insertions(+), 100 deletions(-) diff --git a/vis/index.d.ts b/vis/index.d.ts index 5247ea21f7..5d813affac 100644 --- a/vis/index.d.ts +++ b/vis/index.d.ts @@ -268,7 +268,7 @@ declare namespace vis { * * @memberOf DataSet */ - public add(data: T | T[], senderId?: IdType): IdType[]; + add(data: T | T[], senderId?: IdType): IdType[]; /** * Clear all data from the DataSet. @@ -278,7 +278,7 @@ declare namespace vis { * * @memberOf DataSet */ - public clear(senderId?: IdType): IdType[]; + clear(senderId?: IdType): IdType[]; /** * Find all distinct values of a specified field. @@ -289,7 +289,7 @@ declare namespace vis { * * @memberOf DataSet */ - public distinct(field: string): any[]; + distinct(field: string): any[]; /** * Flush queued changes. @@ -297,7 +297,7 @@ declare namespace vis { * * @memberOf DataSet */ - public flush(): void; + flush(): void; /** * Execute a callback function for every item in the dataset. @@ -307,7 +307,7 @@ declare namespace vis { * * @memberOf DataSet */ - public forEach(callback: (item: T, id: IdType) => void, options?: DataSelectionOptions): void; + forEach(callback: (item: T, id: IdType) => void, options?: DataSelectionOptions): void; /** * Get all items from the DataSet. @@ -318,7 +318,7 @@ declare namespace vis { * * @memberOf DataSet */ - public get(options?: DataSelectionOptions): T[]; + get(options?: DataSelectionOptions): T[]; /** * Get a single item from the DataSet. @@ -330,7 +330,7 @@ declare namespace vis { * * @memberOf DataSet */ - public get(id: IdType, options?: DataSelectionOptions): T; + get(id: IdType, options?: DataSelectionOptions): T; /** * Get multiple items from the DataSet. @@ -342,7 +342,7 @@ declare namespace vis { * * @memberOf DataSet */ - public get(ids: IdType[], options?: DataSelectionOptions): T[]; + get(ids: IdType[], options?: DataSelectionOptions): T[]; /** * Get the DataSet itself. @@ -353,7 +353,7 @@ declare namespace vis { * * @memberOf DataSet */ - public getDataSet(): DataSet; + getDataSet(): DataSet; /** * Get ids of all items or of a filtered set of items. @@ -363,7 +363,7 @@ declare namespace vis { * * @memberOf DataSet */ - public getIds(options?: DataSelectionOptions): IdType[]; + getIds(options?: DataSelectionOptions): IdType[]; /** * Map every item in the DataSet. @@ -374,7 +374,7 @@ declare namespace vis { * * @memberOf DataSet */ - public map(callback: (item: T, id: IdType) => any, options?: DataSelectionOptions): any[]; + map(callback: (item: T, id: IdType) => any, options?: DataSelectionOptions): any[]; /** * Find the item with maximum value of specified field. @@ -384,7 +384,7 @@ declare namespace vis { * * @memberOf DataSet */ - public max(field: string): T; + max(field: string): T; /** * Find the item with minimum value of specified field. @@ -394,7 +394,7 @@ declare namespace vis { * * @memberOf DataSet */ - public min(field: string): T; + min(field: string): T; /** * Subscribe from an event. @@ -405,7 +405,7 @@ declare namespace vis { * * @memberOf DataSet */ - public on(event: string, callback: (event: string, properties: any, senderId: IdType) => void): void; + on(event: string, callback: (event: string, properties: any, senderId: IdType) => void): void; /** * Unsubscribe to an event. @@ -416,7 +416,7 @@ declare namespace vis { * * @memberOf DataSet */ - public off(event: string, callback: (event: string, properties: any, senderId: IdType) => void): void; + off(event: string, callback: (event: string, properties: any, senderId: IdType) => void): void; /** * Remove one or more items by id. @@ -427,7 +427,7 @@ declare namespace vis { * * @memberOf DataSet */ - public remove(id: IdType | IdType[], senderId?: IdType): IdType[]; + remove(id: IdType | IdType[], senderId?: IdType): IdType[]; /** * Set options for the DataSet. @@ -436,7 +436,7 @@ declare namespace vis { * * @memberOf DataSet */ - public setOptions(options?: DataSetQueueOptions): void; + setOptions(options?: DataSetQueueOptions): void; /** * Update one or multiple existing items. @@ -448,7 +448,7 @@ declare namespace vis { * * @memberOf DataSet */ - public update(data: T | T[], senderId?: IdType): IdType[]; + update(data: T | T[], senderId?: IdType): IdType[]; } /** @@ -516,7 +516,7 @@ declare namespace vis { } export class DataView { - public length: number; + length: number; constructor(items: T[]); } @@ -536,31 +536,31 @@ declare namespace vis { options?: TimelineOptions ); - public addCustomTime(time: DateType, id?: IdType): IdType; - public destroy(): void; - public fit(options?: TimelineFitOptions): void; - public focus(ids: IdType | IdType[], options?: TimelineFitOptions): void; - public getCurrentTime(): Date; - public getCustomTime(id?: IdType): Date; - public getEventProperties(event: Event): TimelineEventPropertiesResult; - public getItemRange(): any; // TODO - public getSelection(): IdType[]; - public getVisibleItems(): IdType[]; - public getWindow(): { start: Date, end: Date }; - public moveTo(time: DateType, options?: TimelineFitOptions): void; - public on(event: TimelineEvents, callback: () => void): void; - public off(event: TimelineEvents, callback: () => void): void; - public redraw(): void; - public removeCustomTime(id: IdType): void; - public setCurrentTime(time: DateType): void; - public setCustomTime(time: DateType, id?: IdType): void; - public setCustomTimeTitle(title: string, id?: IdType): void; - public setData(data: { groups?: DataGroupCollectionType; items?: DataItemCollectionType }): void; - public setGroups(groups?: DataGroupCollectionType): void; - public setItems(items: DataItemCollectionType): void; - public setOptions(options: TimelineOptions): void; - public setSelection(ids: IdType | IdType[]): void; - public setWindow(start: DateType, end: DateType, options?: TimelineFitOptions): void; + addCustomTime(time: DateType, id?: IdType): IdType; + destroy(): void; + fit(options?: TimelineFitOptions): void; + focus(ids: IdType | IdType[], options?: TimelineFitOptions): void; + getCurrentTime(): Date; + getCustomTime(id?: IdType): Date; + getEventProperties(event: Event): TimelineEventPropertiesResult; + getItemRange(): any; // TODO + getSelection(): IdType[]; + getVisibleItems(): IdType[]; + getWindow(): { start: Date, end: Date }; + moveTo(time: DateType, options?: TimelineFitOptions): void; + on(event: TimelineEvents, callback: () => void): void; + off(event: TimelineEvents, callback: () => void): void; + redraw(): void; + removeCustomTime(id: IdType): void; + setCurrentTime(time: DateType): void; + setCustomTime(time: DateType, id?: IdType): void; + setCustomTimeTitle(title: string, id?: IdType): void; + setData(data: { groups?: DataGroupCollectionType; items?: DataItemCollectionType }): void; + setGroups(groups?: DataGroupCollectionType): void; + setItems(items: DataItemCollectionType): void; + setOptions(options: TimelineOptions): void; + setSelection(ids: IdType | IdType[]): void; + setWindow(start: DateType, end: DateType, options?: TimelineFitOptions): void; } export interface ITimelineStatic { @@ -673,7 +673,7 @@ declare namespace vis { * * @memberOf Network */ - public destroy(): void; + destroy(): void; /** * Override all the data in the network. @@ -685,7 +685,7 @@ declare namespace vis { * * @memberOf Network */ - public setData(data: IData): void; + setData(data: IData): void; /** * Set the options. @@ -696,7 +696,7 @@ declare namespace vis { * * @memberOf Network */ - public setOptions(options: IOptions): void; + setOptions(options: IOptions): void; /** * Set an event listener. @@ -707,7 +707,7 @@ declare namespace vis { * * @memberOf Network */ - public on(eventName: NetworkEvents, callback: (params?: any) => void): void; + on(eventName: NetworkEvents, callback: (params?: any) => void): void; /** * Remove an event listener. @@ -719,7 +719,7 @@ declare namespace vis { * * @memberOf Network */ - public off(eventName: NetworkEvents, callback?: (params?: any) => void): void; + off(eventName: NetworkEvents, callback?: (params?: any) => void): void; /** * Set an event listener only once. @@ -731,7 +731,7 @@ declare namespace vis { * * @memberOf Network */ - public once(eventName: NetworkEvents, callback: (params?: any) => void): void; + once(eventName: NetworkEvents, callback: (params?: any) => void): void; /** * This function converts canvas coordinates to coordinates on the DOM. @@ -743,7 +743,7 @@ declare namespace vis { * * @memberOf Network */ - public canvasToDOM(position: IPosition): IPosition; + canvasToDOM(position: IPosition): IPosition; /** * This function converts DOM coordinates to coordinates on the canvas. @@ -755,14 +755,14 @@ declare namespace vis { * * @memberOf Network */ - public DOMtoCanvas(position: IPosition): IPosition; + DOMtoCanvas(position: IPosition): IPosition; /** * Redraw the network. * * @memberOf Network */ - public redraw(): void; + redraw(): void; /** * Set the size of the canvas. @@ -773,7 +773,7 @@ declare namespace vis { * * @memberOf Network */ - public setSize(width: string, height: string): void; + setSize(width: string, height: string): void; /** * The joinCondition function is presented with all nodes. @@ -782,7 +782,7 @@ declare namespace vis { * * @memberOf Network */ - public cluster(options?: IClusterOptions): void; + cluster(options?: IClusterOptions): void; /** * This method looks at the provided node and makes a cluster of it and all it's connected nodes. @@ -795,7 +795,7 @@ declare namespace vis { * * @memberOf Network */ - public clusterByConnection(nodeId: string, options?: IClusterOptions): void; + clusterByConnection(nodeId: string, options?: IClusterOptions): void; /** * This method checks all nodes in the network and those with a equal or higher @@ -810,7 +810,7 @@ declare namespace vis { * * @memberOf Network */ - public clusterByHubsize(hubsize?: number, options?: IClusterOptions): void; + clusterByHubsize(hubsize?: number, options?: IClusterOptions): void; /** * This method will cluster all nodes with 1 edge with their respective connected node. @@ -819,7 +819,7 @@ declare namespace vis { * * @memberOf Network */ - public clusterOutliers(options?: IClusterOptions): void; + clusterOutliers(options?: IClusterOptions): void; /** * Nodes can be in clusters. @@ -837,7 +837,7 @@ declare namespace vis { * * @memberOf Network */ - public findNode(nodeId: IdType): IdType[]; + findNode(nodeId: IdType): IdType[]; /** * Similar to findNode in that it returns all the edge ids that were @@ -846,7 +846,7 @@ declare namespace vis { * @param {IdType} baseEdgeId the base edge id * @returns {IdType[]} an array of edgeIds */ - public getClusteredEdges(baseEdgeId: IdType): IdType[]; + getClusteredEdges(baseEdgeId: IdType): IdType[]; /** * When a clusteredEdgeId is available, this method will return the original @@ -857,7 +857,7 @@ declare namespace vis { * @param {IdType} clusteredEdgeId * @returns {IdType} */ - public getBaseEdge(clusteredEdgeId: IdType): IdType; + getBaseEdge(clusteredEdgeId: IdType): IdType; /** * Visible edges between clustered nodes are not the same edge as the ones provided @@ -869,13 +869,13 @@ declare namespace vis { * @param {IdType} startEdgeId * @param {IEdgeOptions} [options] */ - public updateEdge(startEdgeId: IdType, options?: IEdgeOptions): void; + updateEdge(startEdgeId: IdType, options?: IEdgeOptions): void; /** * Clustered Nodes when created are not contained in the original data.nodes * passed on network creation. This method updates the cluster node. */ - public updateClusteredNode(clusteredNodeId: IdType, options?: INodeOptions): void; + updateClusteredNode(clusteredNodeId: IdType, options?: INodeOptions): void; /** * Returns true if the node whose ID has been supplied is a cluster. @@ -885,7 +885,7 @@ declare namespace vis { * * @memberOf Network */ - public isCluster(nodeId: IdType): boolean; + isCluster(nodeId: IdType): boolean; /** * Returns an array of all nodeIds of the nodes that @@ -896,7 +896,7 @@ declare namespace vis { * * @memberOf Network */ - public getNodesInCluster(clusterNodeId: IdType): IdType[]; + getNodesInCluster(clusterNodeId: IdType): IdType[]; /** * Opens the cluster, releases the contained nodes and edges, @@ -910,7 +910,7 @@ declare namespace vis { * * @memberOf Network */ - public openCluster(nodeId: IdType, options?: IOpenClusterOptions): void; + openCluster(nodeId: IdType, options?: IOpenClusterOptions): void; /** * If you like the layout of your network @@ -921,7 +921,7 @@ declare namespace vis { * * @memberOf Network */ - public getSeed(): number; + getSeed(): number; /** * Programatically enable the edit mode. @@ -929,7 +929,7 @@ declare namespace vis { * * @memberOf Network */ - public enableEditMode(): void; + enableEditMode(): void; /** * Programatically disable the edit mode. @@ -937,7 +937,7 @@ declare namespace vis { * * @memberOf Network */ - public disableEditMode(): void; + disableEditMode(): void; /** * Go into addNode mode. Having edit mode or manipulation enabled is not required. @@ -947,7 +947,7 @@ declare namespace vis { * * @memberOf Network */ - public addNodeMode(): void; + addNodeMode(): void; /** * Edit the selected node. @@ -955,7 +955,7 @@ declare namespace vis { * * @memberOf Network */ - public editNode(): void; + editNode(): void; /** * Go into addEdge mode. @@ -963,7 +963,7 @@ declare namespace vis { * * @memberOf Network */ - public addEdgeMode(): void; + addEdgeMode(): void; /** * Go into editEdge mode. @@ -971,7 +971,7 @@ declare namespace vis { * * @memberOf Network */ - public editEdgeMode(): void; + editEdgeMode(): void; /** * Delete selected. @@ -979,7 +979,7 @@ declare namespace vis { * * @memberOf Network */ - public deleteSelected(): void; + deleteSelected(): void; /** * Returns the x y positions in canvas space of the nodes with the supplied nodeIds as an object. @@ -993,8 +993,8 @@ declare namespace vis { * * @memberOf Network */ - public getPositions(nodeIds?: IdType[]): { [nodeId: string]: IPosition }; - public getPositions(nodeId: IdType): IPosition; + getPositions(nodeIds?: IdType[]): { [nodeId: string]: IPosition }; + getPositions(nodeId: IdType): IPosition; /** * When using the vis.DataSet to load your nodes into the network, @@ -1012,7 +1012,7 @@ declare namespace vis { * * @memberOf Network */ - public storePositions(): void; + storePositions(): void; /** * You can use this to programatically move a node. @@ -1024,7 +1024,7 @@ declare namespace vis { * * @memberOf Network */ - public moveNode(nodeId: IdType, x: number, y: number): void; + moveNode(nodeId: IdType, x: number, y: number): void; /** * Returns a bounding box for the node including label. @@ -1034,7 +1034,7 @@ declare namespace vis { * * @memberOf Network */ - public getBoundingBox(nodeId: IdType): IBoundingBox; + getBoundingBox(nodeId: IdType): IBoundingBox; /** * Returns an array of nodeIds of the all the nodes that are directly connected to this node. @@ -1046,7 +1046,7 @@ declare namespace vis { * * @memberOf Network */ - public getConnectedNodes(nodeOrEdgeId: IdType): IdType[] | Array<{ fromId: IdType, toId: IdType }>; + getConnectedNodes(nodeOrEdgeId: IdType): IdType[] | Array<{ fromId: IdType, toId: IdType }>; /** * Returns an array of edgeIds of the edges connected to this node. @@ -1056,7 +1056,7 @@ declare namespace vis { * * @memberOf Network */ - public getConnectedEdges(nodeId: IdType): IdType[]; + getConnectedEdges(nodeId: IdType): IdType[]; /** * Start the physics simulation. @@ -1065,7 +1065,7 @@ declare namespace vis { * * @memberOf Network */ - public startSimulation(): void; + startSimulation(): void; /** * This stops the physics simulation and triggers a stabilized event. @@ -1074,7 +1074,7 @@ declare namespace vis { * * @memberOf Network */ - public stopSimulation(): void; + stopSimulation(): void; /** * You can manually call stabilize at any time. @@ -1085,7 +1085,7 @@ declare namespace vis { * * @memberOf Network */ - public stabilize(iterations?: number): void; + stabilize(iterations?: number): void; /** * Returns an object with selected nodes and edges ids. @@ -1094,7 +1094,7 @@ declare namespace vis { * * @memberOf Network */ - public getSelection(): { nodes: IdType[], edges: IdType[] }; + getSelection(): { nodes: IdType[], edges: IdType[] }; /** * Returns an array of selected node ids like so: @@ -1104,7 +1104,7 @@ declare namespace vis { * * @memberOf Network */ - public getSelectedNodes(): IdType[]; + getSelectedNodes(): IdType[]; /** * Returns an array of selected edge ids like so: @@ -1114,7 +1114,7 @@ declare namespace vis { * * @memberOf Network */ - public getSelectedEdges(): IdType[]; + getSelectedEdges(): IdType[]; /** * Returns a nodeId or undefined. @@ -1125,7 +1125,7 @@ declare namespace vis { * * @memberOf Network */ - public getNodeAt(position: IPosition): IdType; + getNodeAt(position: IPosition): IdType; /** * Returns a edgeId or undefined. @@ -1136,7 +1136,7 @@ declare namespace vis { * * @memberOf Network */ - public getEdgeAt(position: IPosition): IdType; + getEdgeAt(position: IPosition): IdType; /** * Selects the nodes corresponding to the id's in the input array. @@ -1148,7 +1148,7 @@ declare namespace vis { * * @memberOf Network */ - public selectNodes(nodeIds: IdType[], highlightEdges?: boolean): void; + selectNodes(nodeIds: IdType[], highlightEdges?: boolean): void; /** * Selects the edges corresponding to the id's in the input array. @@ -1159,7 +1159,7 @@ declare namespace vis { * * @memberOf Network */ - public selectEdges(edgeIds: IdType[]): void; + selectEdges(edgeIds: IdType[]): void; /** * Sets the selection. @@ -1170,7 +1170,7 @@ declare namespace vis { * * @memberOf Network */ - public setSelection(selection: { nodes: IdType[], edges: IdType[] }, options?: ISelectionOptions): void; + setSelection(selection: { nodes: IdType[], edges: IdType[] }, options?: ISelectionOptions): void; /** * Unselect all objects. @@ -1178,7 +1178,7 @@ declare namespace vis { * * @memberOf Network */ - public unselectAll(): void; + unselectAll(): void; /** * Returns the current scale of the network. @@ -1188,7 +1188,7 @@ declare namespace vis { * * @memberOf Network */ - public getScale(): number; + getScale(): number; /** * Returns the current central focus point of the view in the form: { x: {Number}, y: {Number} } @@ -1197,7 +1197,7 @@ declare namespace vis { * * @memberOf Network */ - public getViewPosition(): IPosition; + getViewPosition(): IPosition; /** * Zooms out so all nodes fit on the canvas. @@ -1206,7 +1206,7 @@ declare namespace vis { * * @memberOf Network */ - public fit(options?: IFitOptions): void; + fit(options?: IFitOptions): void; /** * You can focus on a node with this function. @@ -1218,7 +1218,7 @@ declare namespace vis { * * @memberOf Network */ - public focus(nodeId: IdType, options?: IFocusOptions): void; + focus(nodeId: IdType, options?: IFocusOptions): void; /** * You can animate or move the camera using the moveTo method. @@ -1227,14 +1227,14 @@ declare namespace vis { * * @memberOf Network */ - public moveTo(options: IMoveToOptions): void; + moveTo(options: IMoveToOptions): void; /** * Programatically release the focussed node. * * @memberOf Network */ - public releaseNode(): void; + releaseNode(): void; /** * If you use the configurator, you can call this method to get an options object that contains @@ -1244,7 +1244,7 @@ declare namespace vis { * * @memberOf Network */ - public getOptionsFromConfigurator(): any; + getOptionsFromConfigurator(): any; } /**