diff --git a/.github/PULL_REQUEST_TEMPLATE.md b/.github/PULL_REQUEST_TEMPLATE.md index edde9e165..aba0a8f3a 100644 --- a/.github/PULL_REQUEST_TEMPLATE.md +++ b/.github/PULL_REQUEST_TEMPLATE.md @@ -20,6 +20,7 @@ Author: - [ ] Automated tests have been included in this pull request, if possible, for the new feature(s) or bug fix. Check this box if tests are not pragmatically possible (e.g. rendering features could include screenshots or videos instead of automated tests). - [ ] The associated GitHub issues are included (above). - [ ] Notes have been included (above). +- [ ] For new or updated API, the `index.d.ts` Typescript definition file has been appropriately updated. Reviewers: diff --git a/index.d.ts b/index.d.ts new file mode 100644 index 000000000..009712d27 --- /dev/null +++ b/index.d.ts @@ -0,0 +1,6320 @@ +// +// Translation from Objects in help to Typescript interface. +// http://js.cytoscape.org/#notation/functions +// TypeScript Version: 2.3 + +/** + * WARNING: This is a provisional specification of the Cytoscape.js + * API in TypeScript, based on improvements made on the Typescript + * specification for Cytoscape.js in DefinitelyTyped. This is a work + * in progress and may not be complete, and it may have errors. Please + * report any issues to the issue tracker: + * + * https://github.com/cytoscape/cytoscape.js/issues + * + * cy --> Cy.Core + * the core + * + * eles --> Cy.Collection + * a collection of one or more elements (nodes and edges) + * + * ele --> Cy.Singular + * a collection of a single element (node or edge) + * + * node --> Cy.NodeSingular + * a collection of a single node + * + * nodes -> Cy.NodeCollection + * a collection of one or more nodes + * + * edge --> Cy.EdgeSingular + * a collection of a single edge + * + * edges -> Cy.EdgeCollection + * a collection of one or more edges + * + * The library makes a distinction between input and output parameters + * due to the dynamic behaviour of the Cytoscape library. + * + * For a input parameter it will always expect: + * - Cy.Collection + * The input can be any element (node and edge) collection. + * - Cy.NodeCollection + * The input must be a node collection. + * - Cy.EdgeCollection + * The input must be a edge collection. + * - Cy.Singular + * The input must be a single element. + * - Cy.NodeSingular + * The inut must be a single node. + * - Cy.EdgeSingular + * The input must be a single edge. + * + * For a output of a function it will always give: + * - Cy.Elements + * The output is a collection of node and edge elements OR single element. + * - Cy.EdgeCollection + * The output is a collection of edge elements OR single edge. + * - Cy.NodeCollection + * The output is a collection of node elements OR single node. + * + * A number of interfaces contain nothing as they serve to collect interfaces. + */ +export = cytoscape; +export as namespace cytoscape; + +/** + * WARNING: This is a provisional specification of the Cytoscape.js + * API in TypeScript, based on improvements made on the Typescript + * specification for Cytoscape.js in DefinitelyTyped. This is a work + * in progress and may not be complete, and it may have errors. Please + * report any issues to the issue tracker: + * + * https://github.com/cytoscape/cytoscape.js/issues + */ +declare function cytoscape(options?: cytoscape.CytoscapeOptions): cytoscape.Core; +declare function cytoscape(type: string, name: string): unknown; +declare function cytoscape(type: string, name: string, registrant: any): void; + +declare namespace cytoscape { + interface Position { + x: number; + y: number; + } + + type CssStyleDeclaration = any; + + interface ElementDefinition { + group?: ElementGroup; + data: NodeDataDefinition | EdgeDataDefinition; + /** + * Scratchpad data (usually temp or nonserialisable data) + */ + scratch?: Scratchpad; + /** + * The model position of the node (optional on init, mandatory after) + */ + position?: Position; + /** + * can alternatively specify position in rendered on-screen pixels + */ + renderedPosition?: Position; + /** + * Whether the element is selected (default false) + */ + selected?: boolean; + /** + * Whether the selection state is mutable (default true) + */ + selectable?: boolean; + /** + * When locked a node's position is immutable (default false) + */ + locked?: boolean; + /** + * Wether the node can be grabbed and moved by the user + */ + grabbable?: boolean; + /** + * Whether the element has passthrough panning enabled. + */ + pannable?: boolean; + /** + * a space separated list of class names that the element has + */ + classes?: string[] | string; + /** + * CssStyleDeclaration; + */ + style?: CssStyleDeclaration; + /** + * you should only use `style`/`css` for very special cases; use classes instead + */ + css?: Css.Node | Css.Edge; + } + + interface ElementDataDefinition { + /** + * elided id => autogenerated id + */ + id?: string; + position?: Position; + } + + interface EdgeDefinition extends ElementDefinition { + data: EdgeDataDefinition; + } + + interface EdgeDataDefinition extends ElementDataDefinition { + id?: string; + + /** + * the source node id (edge comes from this node) + */ + source: string; + /** + * the target node id (edge goes to this node) + */ + target: string; + + [key: string]: any; + } + + interface NodeDefinition extends ElementDefinition { + data: NodeDataDefinition; + } + + interface NodeDataDefinition extends ElementDataDefinition { + id?: string; + parent?: string; + [key: string]: any; + } + + interface CytoscapeOptions { + /////////////////////////////////////// + // very commonly used options: + /** + * A HTML DOM element in which the graph should be rendered. + * This is optional if Cytoscape.js is run headlessly or if you initialise using jQuery (in which case your jQuery object already has an associated DOM element). + * + * The default is undefined. + */ + container?: HTMLElement | null; + + /** + * An array of [[Elements]] specified as plain objects. For convenience, this option can alternatively be specified as a promise that resolves to the elements JSON. + */ + elements?: + | ElementsDefinition + | ElementDefinition[] + | Promise + | Promise + ; + /** + * The StylesheetJson (StylesheetJsonBlock[]) used to style the graph. For convenience, this option can alternatively be specified as a promise that resolves to the stylesheet. + */ + style?: StylesheetJson | Promise; + /** + * A plain object that specifies layout options. + * Which layout is initially run is specified by the name field. + * Refer to a layout's documentation for the options it supports. + * If you want to specify your node positions yourself in your elements JSON, + * you can use the preset layout — by default it does not set any positions, + * leaving your nodes in their current positions + * (e.g. specified in options.elements at initialisation time) + */ + layout?: LayoutOptions; + + /** + * A plain object that contains graph-level data (i.e. data that does not belong to any particular node or edge). + */ + data?: Record; + + /////////////////////////////////////// + // initial viewport state: + /** + * The initial zoom level of the graph. + * Make sure to disable viewport manipulation options, such as fit, in your layout so that it is not overridden when the layout is applied. + * You can set options.minZoom and options.maxZoom to set restrictions on the zoom level. + * + * The default value is 1. + */ + zoom?: number; + /** + * The initial panning position of the graph. Make sure to disable viewport manipulation options, such as fit, + * in your layout so that it is not overridden when the layout is applied. + */ + pan?: Position; + + /////////////////////////////////////// + // interaction options?: + /** + * A minimum bound on the zoom level of the graph. The viewport can not be scaled smaller than this zoom level. + * + * The default value is 1e-50. + */ + minZoom?: number; + /** + * A maximum bound on the zoom level of the graph. The viewport can not be scaled larger than this zoom level. + * + * The default value is 1e50. + */ + maxZoom?: number; + /** + * Whether zooming the graph is enabled, both by user events and programmatically. + * + * The default value is true. + */ + zoomingEnabled?: boolean; + /** + * Whether user events (e.g. mouse wheel, pinch-to-zoom) are allowed to zoom the graph. Programmatic changes to zoom are unaffected by this option. + * + * The default value is true. + */ + userZoomingEnabled?: boolean; + /** + * Whether panning the graph is enabled, both by user events and programmatically. + * + * The default value is true. + */ + panningEnabled?: boolean; + /** + * Whether user events (e.g. dragging the graph background) are allowed to pan the graph. Programmatic changes to pan are unaffected by this option. + * + * The default value is true. + */ + userPanningEnabled?: boolean; + /** + * Whether box selection (i.e. drag a box overlay around, and release it to select) is enabled. If enabled, the user must taphold to pan the graph. + * + * The default value is false. + */ + boxSelectionEnabled?: boolean; + /** + * A string indicating the selection behaviour from user input. + * By default, this is set automatically for you based on the type of input device detected. + * On touch devices, 'additive' is default — a new selection made by the user adds to the set of currenly selected elements. + * On mouse-input devices, 'single' is default — a new selection made by the user becomes the entire set of currently selected elements (i.e. the previous elements are unselected). + * + * The default value is (isTouchDevice ? 'additive' : 'single'). + */ + selectionType?: SelectionType; + /** + * A nonnegative integer that indicates the maximum allowable distance that a user may move during a tap gesture, + * on touch devices and desktop devices respectively. + * + * This makes tapping easier for users. + * These values have sane defaults, so it is not advised to change these options unless you have very good reason for doing so. + * Larger values will almost certainly have undesirable consequences. + * + * The default value is is 8. + */ + touchTapThreshold?: number; + /** + * A nonnegative integer that indicates the maximum allowable distance that a user may move during a tap gesture, + * on touch devices and desktop devices respectively. + * + * This makes tapping easier for users. + * These values have sane defaults, + * so it is not advised to change these options unless you have very good reason for doing so. + * Larger values will almost certainly have undesirable consequences. + * + * The default value is 4. + */ + desktopTapThreshold?: number; + /** + * Whether nodes should be locked (not draggable at all) by default (if true, overrides individual node state). + * + * The default value is false. + */ + autolock?: boolean; + /** + * Whether nodes should be ungrabified (not grabbable by user) by default (if true, overrides individual node state). + * + * The default value is false. + */ + autoungrabify?: boolean; + /** + * Whether nodes should be unselectified (immutable selection state) by default (if true, overrides individual element state). + * + * The default value is false. + */ + autounselectify?: boolean; + + /////////////////////////////////////// + // rendering options: + /** + * A convenience option that initialises the Core to run headlessly. + * You do not need to set this in environments that are implicitly headless (e.g. Node.js). + * However, it is handy to set headless: true if you want a headless Core in a browser. + * + * The default value is false. + */ + headless?: boolean; + /** + * A boolean that indicates whether styling should be used. + * For headless (i.e. outside the browser) environments, + * display is not necessary and so neither is styling necessary — thereby speeding up your code. + * You can manually enable styling in headless environments if you require it for a special case. + * Note that it does not make sense to disable style if you plan on rendering the graph. + * + * The default value is true. + */ + styleEnabled?: boolean; + /** + * When set to true, the renderer does not render edges while the viewport is being manipulated. + * This makes panning, zooming, dragging, et cetera more responsive for large graphs. + * + * The default value is false. + */ + hideEdgesOnViewport?: boolean; + /** + * when set to true, the renderer does not render labels while the viewport is being manipulated. + * This makes panning, zooming, dragging, et cetera more responsive for large graphs. + * + * The default value is false. + */ + hideLabelsOnViewport?: boolean; + /** + * When set to true, the renderer uses a texture (if supported) during panning and zooming instead of drawing the elements, + * making large graphs more responsive. + * + * The default value is false. + */ + textureOnViewport?: boolean; + /** + * When set to true, the renderer will use a motion blur effect to make the transition between frames seem smoother. + * This can significantly increase the perceived performance for a large graphs. + * + * The default value is false. + */ + motionBlur?: boolean; + /** + * When motionBlur: true, this value controls the opacity of motion blur frames. + * Higher values make the motion blur effect more pronounced. + * + * The default value is 0.2. + */ + motionBlurOpacity?: number; + /** + * Changes the scroll wheel sensitivity when zooming. This is a multiplicative modifier. + * So, a value between 0 and 1 reduces the sensitivity (zooms slower), and a value greater than 1 increases the sensitivity (zooms faster). + * + * The default value is 1. + */ + wheelSensitivity?: number; + /** + * Overrides the screen pixel ratio with a manually set value (1.0 or 0.666 recommended, if set). + * This can be used to increase performance on high density displays by reducing the effective area that needs to be rendered. + * If you want to use the hardware's actual pixel ratio at the expense of performance, you can set pixelRatio: 'auto'. + * + * The default value is 1. + */ + pixelRatio?: number | "auto"; + + /** + * Enables the experimental WebGL mode. + * WARNING: This is currently experimental, and may have API changes in future. + */ + webgl?: boolean; + + /** + * Prints debug info to the browser console. + * (optional) + * WARNING: This is currently experimental, and may have API changes in future. + */ + webglDebug?: boolean; + + /** + * The size of the WebGL texture. + * (provisional, may change in future releases) + * WARNING: This is currently experimental, and may have API changes in future. + */ + webglTexSize?: number; + + /** + * The number of rows in the WebGL texture. + * (provisional, may change in future releases) + * WARNING: This is currently experimental, and may have API changes in future. + */ + webglTexRows?: number; + + /** + * The batch size for WebGL. + * (provisional, may change in future releases) + * WARNING: This is currently experimental, and may have API changes in future. + */ + webglBatchSize?: number; + + /** + * The number of textures per batch in WebGL. + * (provisional, may change in future releases) + * WARNING: This is currently experimental, and may have API changes in future. + */ + webglTexPerBatch?: number; + } + + /** + * cy --> Cy.Core + * The core object is your interface to a graph. + * + * It is your entry point to Cytoscape.js: + * All of the library’s features are accessed through this object. + * http://js.cytoscape.org/#core + */ + interface Core + extends + CoreGraphManipulation, + CoreData, + CoreGraphManipulationExt, + CoreEvents, + CoreViewportManipulation, + CoreAnimation, + CoreLayout, + CoreStyle, + CoreExport + {} + + /** + * These are the principle functions used to interact with the graph model. + * + * http://js.cytoscape.org/#core/graph-manipulation + */ + interface CoreGraphManipulation { + /** + * Add elements to the graph and return them. + */ + add( + eles: ElementDefinition | ElementDefinition[] | ElementsDefinition | CollectionArgument, + ): CollectionReturnValue; + + /** + * Remove elements in collecion or match the selector from the graph and return them. + */ + remove(eles: CollectionArgument | Selector): CollectionReturnValue; + + /** + * Get a collection from elements in the graph matching the specified selector or from an array of elements. + * If no parameter specified, an empty collection will be returned + */ + collection(eles?: Selector | CollectionArgument[]): CollectionReturnValue; + + /** + * check whether the specified id is in the collection + */ + hasElementWithId(id: string): boolean; + + /** + * Get an element from its ID in a very performant way. + * http://js.cytoscape.org/#cy.getElementById + */ + getElementById(id: string): CollectionReturnValue; + + /** + * Get an element from its ID in a very performant way. + * http://js.cytoscape.org/#cy.getElementById + */ + $id(id: string): CollectionReturnValue; + + /** + * Get elements in the graph matching the specified selector. + * http://js.cytoscape.org/#cy.$ + */ + $(selector: Selector): CollectionReturnValue; + + /** + * Get elements in the graph matching the specified selector. + * http://js.cytoscape.org/#cy.$ + */ + elements(selector?: Selector): CollectionReturnValue; + + /** + * Get nodes in the graph matching the specified selector. + */ + nodes(selector?: Selector): NodeCollection; + + /** + * Get edges in the graph matching the specified selector. + */ + edges(selector?: Selector): EdgeCollection; + /** + * Get elements in the graph matching the specified selector or filter function. + */ + filter( + selector: Selector | ((ele: Singular, i: number, eles: CollectionArgument) => boolean), + ): CollectionReturnValue; + + /** + * Allow for manipulation of elements without triggering multiple style calculations or multiple redraws. + * http://js.cytoscape.org/#cy.batch + * A callback within which you can make batch updates to elements. + */ + batch(callback: () => void): void; + /** + * Allow for manipulation of elements without triggering multiple style calculations or multiple redraws. + * http://js.cytoscape.org/#cy.batch + * + * Starts batching manually (useful for asynchronous cases). + */ + startBatch(): void; + /** + * Allow for manipulation of elements without triggering multiple style calculations or multiple redraws. + * http://js.cytoscape.org/#cy.batch + * + * Ends batching manually (useful for asynchronous cases). + */ + endBatch(): void; + + /** + * Attaches the instance to the specified container for visualisation. + * http://js.cytoscape.org/#cy.mount + * + * If the core instance is headless prior to calling cy.mount(), then + * the instance will no longer be headless and the visualisation will + * be shown in the specified container. If the core instance is + * non-headless prior to calling cy.mount(), then the visualisation + * is swapped from the prior container to the specified container. + */ + mount(element: Element): void; + + /** + * Remove the instance from its current container. + * http://js.cytoscape.org/#cy.unmount + * + * This function sets the instance to be headless after unmounting from + * the current container. + */ + unmount(): void; + + /** + * A convenience function to explicitly destroy the Core. + * http://js.cytoscape.org/#cy.destroy + */ + destroy(): void; + + /** + * Get whether the instance of Cytoscape.js has been destroyed or not. + * https://js.cytoscape.org/#cy.destroyed + */ + destroyed(): boolean; + } + + /** + * https://js.cytoscape.org/#core/data + */ + interface CoreData { + /** + * Read and write developer-defined data associated with the graph. + * http://js.cytoscape.org/#cy.data + */ + /** + * Get the entire data object or a particular data field. + * @alias attr + * + * @param name The name of the field to get. + */ + data(name?: string): any; + /** + * Set a particular data field. + * @alias attr + * + * @param name The name of the field to set. + * @param value The value to set for the field (must be JSON-serializable). + */ + data(name: string, value: any): this; + /** + * Update multiple data fields at once via an object. + * @alias attr + * + * @param obj The object containing name-value pairs to update data fields (must be JSON-serializable). + */ + data(obj: Record): this; + /** + * Get the entire data object or a particular data field. + * + * @param name The name of the field to get. Get the entire data object + */ + attr(name?: string): any; + /** + * Set a particular data field. + * + * @param name The name of the field to set. + * @param value The value to set for the field (must be JSON-serializable). + */ + attr(name: string, value: any): this; + /** + * Update multiple data fields at once via an object. + * + * @param obj The object containing name-value pairs to update data fields. + */ + attr(obj: Record): this; + + /** + * Remove developer-defined data associated with the elements. + * https://js.cytoscape.org/#cy.removeData + * @alias removeAttr + * + * @param names A space-separated list of fields to delete. + */ + removeData(names?: string): this; + /** + * Remove developer-defined data associated with the elements. + * https://js.cytoscape.org/#cy.removeData + * + * @param names A space-separated list of fields to delete. + */ + removeAttr(names?: string): this; + } + + /** + * http://js.cytoscape.org/#core/graph-manipulation + * http://js.cytoscape.org/#extensions + * These functions are intended for use in extensions. + */ + interface CoreGraphManipulationExt { + /** + * Set the scratchpad at a particular namespace, + * where temporary or non-JSON data can be stored. + * App-level scratchpad data should use namespaces prefixed with underscore, like '_foo'. + * + * If no parameter provided, the entire scratchpad will be returned. + * If only namespace provided, the scratchpad with the namespace will be returned. + * + * @param namespace A namespace string. + * @param value The value to set at the specified namespace. + */ + scratch(namespace?: string): Scratchpad; + scratch(namespace: string, value: any): this; + + /** + * Remove scratchpad data. You should remove scratchpad data only at your own namespaces. + * http://js.cytoscape.org/#cy.removeScratch + * + * @param namespace A namespace string. + */ + removeScratch(namespace: string): this; + } + + /** + * The principle events from the graph model. + * http://js.cytoscape.org/#core/events + */ + interface CoreEvents { + /** + * Bind to events that occur in the graph. + * + * @param events A space separated list of event names. + * @param handler The handler function that is called when one of the specified events occurs. + * @param selector A selector to specify elements for which the handler is triggered. + * @param data A plain object which is passed to the handler in the event object argument. + * @param eventsMap A map of event names to handler functions. + */ + + on(events: EventNames, handler: EventHandler): this; + on(events: EventNames, selector: Selector, handler: EventHandler): this; + on(events: EventNames, selector: Selector, data: any, handler: EventHandler): this; + on(eventsMap: { [value: string]: EventHandler }, selector?: Selector, data?: any): this; + + bind(events: EventNames, handler: EventHandler): this; + bind(events: EventNames, selector: Selector, handler: EventHandler): this; + bind(events: EventNames, selector: Selector, data: any, handler: EventHandler): this; + bind(eventsMap: { [value: string]: EventHandler }, selector?: Selector, data?: any): this; + + listen(events: EventNames, handler: EventHandler): this; + listen(events: EventNames, selector: Selector, handler: EventHandler): this; + listen(events: EventNames, selector: Selector, data: any, handler: EventHandler): this; + listen(eventsMap: { [value: string]: EventHandler }, selector?: Selector, data?: any): this; + + addListener(events: EventNames, handler: EventHandler): this; + addListener(events: EventNames, selector: Selector, handler: EventHandler): this; + addListener(events: EventNames, selector: Selector, data: any, handler: EventHandler): this; + addListener(eventsMap: { [value: string]: EventHandler }, selector?: Selector, data?: any): this; + + /** + * Get a promise that is resolved with the first + * of any of the specified events triggered on the graph. + * @param events A space separated list of event names. + * @param selector [optional] A selector to specify elements for which the handler is triggered. + */ + promiseOn(events: EventNames, selector?: Selector): Promise; + pon(events: EventNames, selector?: Selector): Promise; + /** + * Bind to events that occur in the graph, and trigger the handler only once. + * + * @param events A space separated list of event names. + * @param handler The handler function that is called when one of the specified events occurs. + */ + one(events: EventNames, handler: EventHandler): this; + /** + * Bind to events that occur in the graph, and trigger the handler only once. + * + * @param events A space separated list of event names. + * @param handler The handler function that is called when one of the specified events occurs. + * @param selector A selector to specify elements for which the handler is triggered. + */ + one(events: EventNames, selector: Selector, handler: EventHandler): this; + /** + * Bind to events that occur in the graph, and trigger the handler only once. + * + * @param events A space separated list of event names. + * @param handler The handler function that is called when one of the specified events occurs. + * @param selector A selector to specify elements for which the handler is triggered. + * @param data A plain object which is passed to the handler in the event object argument. + */ + one(events: EventNames, selector: Selector, data: any, handler: EventHandler): this; + /** + * Bind to events that occur in the graph, and trigger the handler only once. + * + * @param eventsMap A map of event names to handler functions. + * @param selector A selector to specify elements for which the handler is triggered. + * @param data A plain object which is passed to the handler in the event object argument. + */ + one(eventsMap: { [value: string]: EventHandler }, selector?: Selector, data?: any): this; + + /** + * Remove event handlers. + * http://js.cytoscape.org/#cy.off + * + * @param events A space separated list of event names. + * @param selector [optional] The same selector used to bind to the events. + * @param handler [optional] A reference to the handler function to remove. + * @param eventsMap A map of event names to handler functions to remove. + */ + off(events: EventNames, handler?: EventHandler): this; + off(events: EventNames, selector: Selector, handler?: EventHandler): this; + off(eventsMap: { [value: string]: EventHandler }, selector?: Selector): this; + + unbind(events: EventNames, handler?: EventHandler): this; + unbind(events: EventNames, selector: Selector, handler?: EventHandler): this; + unbind(eventsMap: { [value: string]: EventHandler }, selector?: Selector): this; + + unlisten(events: EventNames, handler?: EventHandler): this; + unlisten(events: EventNames, selector: Selector, handler?: EventHandler): this; + unlisten(eventsMap: { [value: string]: EventHandler }, selector?: Selector): this; + + removeListener(events: EventNames, handler?: EventHandler): this; + removeListener(events: EventNames, selector: Selector, handler?: EventHandler): this; + removeListener(eventsMap: { [value: string]: EventHandler }, selector?: Selector): this; + + /** + * Remove all event handlers. + * https://js.cytoscape.org/#cy.removeAllListeners + */ + removeAllListeners(): this; + + /** + * Trigger one or more events. + * + * @param events A space separated list of event names to trigger. + * @param extraParams [optional] An array of additional parameters to pass to the handler. + */ + trigger(events: EventNames, extraParams?: any[]): this; + emit(events: EventNames, extraParams?: any[]): this; + + /** + * Run a callback as soon as the graph becomes ready. If the graph is already ready, then the callback is called immediately. + * @param fn The callback run as soon as the graph is ready, inside which this refers to the core (cy). + */ + ready(fn: EventHandler): this; + } + + interface ZoomOptionsModel { + /** The position about which to zoom. */ + position: Position; + } + interface ZoomOptionsRendered { + /** The rendered position about which to zoom. */ + renderedPosition: Position; + } + interface ZoomOptionsLevel { + /** The zoom level to set. */ + level: number; + } + type ZoomOptions = number | (ZoomOptionsLevel & (ZoomOptionsModel | ZoomOptionsRendered)); + + /** + * http://js.cytoscape.org/#core/viewport-manipulation + */ + interface CoreViewportManipulation { + /** + * Get the HTML DOM element in which the graph is visualised. + * A null value is returned if the Core is headless. + */ + container(): HTMLElement | null; + + /** + * Pan the graph to the centre of a collection. + * + * @param eles The collection to centre upon. + */ + center(eles?: CollectionArgument): this; + + /** + * Pan the graph to the centre of a collection. + * + * @param eles The collection to centre upon. + */ + centre(eles?: CollectionArgument): this; + + /** + * Pan and zooms the graph to fit to a collection. + * http://js.cytoscape.org/#cy.fit + * + * @param eles [optional] The collection to fit to. + * @param padding [optional] An amount of padding (in pixels) to have around the graph + */ + fit(eles?: CollectionArgument, padding?: number): this; + + /** + * Reset the graph to the default zoom level and panning position. + * http://js.cytoscape.org/#cy.reset + */ + reset(): this; + + /** + * Get the panning position of the graph. + * http://js.cytoscape.org/#cy.pan + */ + pan(): Position; + + /** + * Set the panning position of the graph. + * http://js.cytoscape.org/#cy.pan + * + * @param renderedPosition The rendered position to pan the graph to. + */ + pan(renderedPosition?: Position): this; + + /** + * Relatively pan the graph by a specified rendered position vector. + * http://js.cytoscape.org/#cy.panBy + * + * @param renderedPosition The rendered position vector to pan the graph by. + */ + panBy(renderedPosition: Position): this; + + /** + * Get whether panning is enabled. + * If cy.boxSelectionEnabled() === true, then the user + * must taphold to initiate panning. + * http://js.cytoscape.org/#cy.panningEnabled + */ + panningEnabled(): boolean; + + /** + * Set whether panning is enabled. If cy.boxSelectionEnabled() === true, then the user must taphold to initiate panning. + * http://js.cytoscape.org/#cy.panningEnabled + * + * @param bool A truthy value enables panning; a falsey value disables it. + */ + panningEnabled(bool?: boolean): this; + + /** + * Get whether panning by user events (e.g. dragging the graph background) is enabled. If cy.boxSelectionEnabled() === true, then the user must taphold to initiate panning. + * http://js.cytoscape.org/#cy.userPanningEnabled + */ + userPanningEnabled(): boolean; + + /** + * Set whether panning by user events (e.g. dragging the graph background) is enabled. If cy.boxSelectionEnabled() === true, then the user must taphold to initiate panning. + * http://js.cytoscape.org/#cy.userPanningEnabled + * + * @param bool A truthy value enables user panning; a falsey value disables it. + */ + userPanningEnabled(bool?: boolean): this; + /** + * Get the zoom level. + * http://js.cytoscape.org/#cy.zoom + */ + zoom(): number; + /** + * Set the zoom level. + * http://js.cytoscape.org/#cy.zoom + * + * @param level The zoom level to set. + * @param options The options for zooming. + */ + zoom(level?: number | ZoomOptions): this; + + /** + * Set or get whether zooming is enabled. Get if no parameter provided. + * http://js.cytoscape.org/#cy.zoomingEnabled + * + * @param bool A truthy value enables zooming; a falsey value disables it. + */ + zoomingEnabled(bool?: boolean): this; + + /** + * Get whether zooming by user events (e.g. mouse wheel, pinch-to-zoom) + * is enabled. + * http://js.cytoscape.org/#cy.userZoomingEnabled + */ + userZoomingEnabled(): boolean; + /** + * Get or set whether zooming by user events get if no parameter provided + * (e.g. mouse wheel, pinch-to-zoom) is enabled. + * http://js.cytoscape.org/#cy.userZoomingEnabled + * + * @param bool A truthy value enables user zooming; a falsey value disables it. + */ + userZoomingEnabled(bool?: boolean): this; + + /** + * Get the minimum zoom level. + * http://js.cytoscape.org/#cy.minZoom + */ + minZoom(): number; + /** + * Set the minimum zoom level. + * http://js.cytoscape.org/#cy.minZoom + * + * @param zoom The new minimum zoom level to use. + */ + minZoom(zoom: number): this; + + /** + * Get the maximum zoom level. + * http://js.cytoscape.org/#cy.maxZoom + */ + maxZoom(): number; + /** + * Set the maximum zoom level. + * http://js.cytoscape.org/#cy.maxZoom + * + * @param zoom The new maximum zoom level to use. + */ + maxZoom(zoom: number): this; + + /** + * Set the viewport state (pan & zoom) in one call. + * http://js.cytoscape.org/#cy.viewport + * + * @param options The viewport options. + * @param options.zoom The zoom level to set. + * @param options.pan The pan to set (a rendered position). + */ + viewport(options: { zoom: number; pan: Position }): this; + + /** + * Get whether box selection is enabled. + * If enabled, the user must hold left-click to initiate panning. + * http://js.cytoscape.org/#cy.boxSelectionEnabled + */ + boxSelectionEnabled(): boolean; + /** + * Set whether box selection is enabled. + * If enabled, the user must hold left-click to initiate panning. + * http://js.cytoscape.org/#cy.boxSelectionEnabled + * + * @param bool A truthy value enables box selection; a falsey value disables it. + */ + boxSelectionEnabled(bool?: boolean): this; + + /** + * Get the selection type. + * http://js.cytoscape.org/#cy.selectionType + */ + selectionType(): SelectionType; + /** + * Set the selection type. + * http://js.cytoscape.org/#cy.selectionType + * + * @param type The selection type string; one of 'single' (default) or 'additive'. + */ + selectionType(type: SelectionType): this; + + /** + * Get the on-screen width of the viewport in pixels. + * http://js.cytoscape.org/#cy.width + */ + width(): number; + + /** + * Get the on-screen height of the viewport in pixels. + * http://js.cytoscape.org/#cy.height + */ + height(): number; + + /** + * Get the extent of the viewport, a bounding box in model + * coordinates that lets you know what model + * positions are visible in the viewport. + * http://js.cytoscape.org/#cy.extent + */ + extent(): { + x1: number; + y1: number; + x2: number; + y2: number; + w: number; + h: number; + }; + + /** + * Get whether nodes are automatically locked + * (i.e. if true, nodes are locked despite their individual state). + * http://js.cytoscape.org/#cy.autolock + */ + autolock(): boolean; + /** + * Set whether nodes are automatically locked + * (i.e. if true, nodes are locked despite their individual state). + * http://js.cytoscape.org/#cy.autolock + * + * @param bool A truthy value enables autolocking; a falsey value disables it. + */ + autolock(bool?: boolean): this; + + /** + * Get whether nodes are automatically ungrabified + * (i.e. if true, nodes are ungrabbale despite their individual state). + * http://js.cytoscape.org/#cy.autoungrabify + */ + autoungrabify(): boolean; + /** + * Set whether nodes are automatically ungrabified + * (i.e. if true, nodes are ungrabbale despite their individual state). + * http://js.cytoscape.org/#cy.autoungrabify + * + * @param bool A truthy value enables autolocking; a falsey value disables it. + */ + autoungrabify(bool?: boolean): this; + + /** + * Get whether nodes are automatically unselectified + * (i.e. if true, nodes are unselectable despite their individual state). + * http://js.cytoscape.org/#cy.autounselectify + */ + autounselectify(): boolean; + /** + * Set whether nodes are automatically unselectified + * (i.e. if true, nodes are unselectable despite their individual state). + * http://js.cytoscape.org/#cy.autounselectify + * + * @param bool A truthy value enables autolocking; a falsey value disables it. + */ + autounselectify(bool?: boolean): this; + + /** + * Force the renderer to redraw (i.e. draw a new frame). + * + * This function forces the renderer to draw a new frame. + * It is useful for very specific edgecases, such as in certain UI plugins, + * but it should not be needed for most developers. + * http://js.cytoscape.org/#cy.forceRender + */ + forceRender(): this; + + /** + * Force the renderer to recalculate the viewport bounds. + * + * If your code resizes the graph's dimensions or position + * (i.e. by changing the style of the HTML DOM element that holds the graph), + * you will want to call cy.resize() to have the graph resize and redraw itself. + * + * Cytoscape.js can not automatically monitor the bounding box of the viewport, + * as querying the DOM for those dimensions can be expensive. + * Although cy.resize() is automatically called for you on the window's resize event, + * there is no resize or style event for arbitrary DOM elements. + * http://js.cytoscape.org/#cy.resize + */ + resize(): this; + invalidateDimensions(): this; + } + + /** + * http://js.cytoscape.org/#core/animation + */ + interface AnimationFitOptions { + eles: CollectionArgument | Selector; // to which the viewport will be fitted. + padding: number; // Padding to use with the fitting. + } + interface CenterOptions { + eles: CollectionArgument | Selector; // to which the viewport will be selected. + } + interface AnimationOptions { + /** A zoom level to which the graph will be animated. */ + zoom?: ZoomOptions; + /** A panning position to which the graph will be animated. */ + pan?: Position; + /** A relative panning position to which the graph will be animated. */ + panBy?: Position; + /** An object containing fitting options from which the graph will be animated. */ + fit?: AnimationFitOptions; + /** An object containing centring options from which the graph will be animated. */ + center?: CenterOptions; + /** easing - A transition-timing-function easing style string that shapes the animation progress curve. */ + easing?: Css.TransitionTimingFunction; + + /** duration - The duration of the animation in milliseconds. */ + duration?: number; + } + interface AnimateOptions extends AnimationOptions { + /** queue - A boolean indicating whether to queue the animation. */ + queue?: boolean; + /** complete - A function to call when the animation is done. */ + complete?(): void; + /** step - A function to call each time the animation steps. */ + step?(): void; + } + + interface CoreAnimation { + /** + * Get whether the viewport is currently being animated. + * http://js.cytoscape.org/#cy.animated + */ + animated(): boolean; + + /** + * Animate the viewport. + * http://js.cytoscape.org/#cy.animate + * + * @param anis An object containing the details of the animation. + * + * @param options An object containing animation options. + */ + animate(anis: AnimateOptions, options?: AnimateOptions): Core; + + /** + * Get an animation of the viewport. + * http://js.cytoscape.org/#cy.animation + */ + animation(options: AnimationOptions): AnimationManipulation; + + /** + * Add a delay between animations for the viewport. + * + * @param duration How long the delay should be in milliseconds. + * @param complete A function to call when the delay is complete. + */ + delay(duration: number, complete?: () => void): Core; + + /** + * Get a delay animation of the viewport. + * http://js.cytoscape.org/#cy.delayAnimation + */ + delayAnimation(duration: number): AnimationManipulation; + + /** + * Stop all viewport animations that are currently running. + * http://js.cytoscape.org/#cy.stop + * + * @param clearQueue A boolean, indicating whether the queue of animations should be emptied. + * @param jumpToEnd A boolean, indicating whether the currently-running animations should jump to their ends rather than just stopping midway. + */ + stop(clearQueue?: boolean, jumpToEnd?: boolean): Core; + + /** + * Remove all queued animations for the viewport. + * http://js.cytoscape.org/#cy.clearQueue + */ + clearQueue(): Core; + } + + /** + * http://js.cytoscape.org/#core/layout + */ + interface CoreLayout { + /** + * Run a layout, which algorithmically positions the nodes in the graph. + * For layouts included with Cytoscape.js, you can find their + * options documented in the Layouts section. + * For external layouts, please refer to their accompanying documentation. + * + * An analogue to run a layout on a subset of the graph exists as eles.layout(). + * http://js.cytoscape.org/#cy.layout + */ + layout(layout: LayoutOptions): Layouts; + /** + * Get a new layout, which can be used to algorithmically + * position the nodes in the graph. + * + * You must specify options.name with the name of the layout you wish to use. + * + * This function creates and returns a layout object. + * You may want to keep a reference to the layout for more advanced usecases, + * such as running multiple layouts simultaneously. + * Note that you must call layout.run() in order for it to affect the graph. + * An analogue to make a layout on a subset of the graph exists as eles.makeLayout(). + */ + makeLayout(options: LayoutOptions): Layouts; + createLayout(options: LayoutOptions): Layouts; + } + + /** + * Get the entry point to modify the visual style of the graph after initialisation. + * http://js.cytoscape.org/#core/style + */ + interface ElementStylesheetStyle extends StylesheetStyle { + json(): any; + } + interface ElementStylesheetCSS extends StylesheetCSS { + json(): any; + } + + interface CoreStyle { + /** + * Assign a new stylesheet to replace the existing one (if provided) + * and return the style. + */ + style(sheet?: StylesheetJsonBlock | StylesheetJsonBlock[] | string): Style; + } + + interface Style { + /** + * Add a rule to the stylesheet. + */ + append(style: string | StylesheetJsonBlock | StylesheetJsonBlock[]): this; + + /** + * Remove all styles, including default styles. + */ + clear(): this; + + /** + * Set the style from JSON data. + * @example + * style.fromJson([ + * { + * selector: 'node', + * style: { + * 'background-color': 'red' + * } + * } + * ]); + */ + fromJson(json: any): this; + + /** + * Set the style from a string. + * @example + * style.fromString('node { background-color: blue; }'); + */ + fromString(style: string): this; + + /** + * Resets to the default stylesheet. + */ + resetToDefault(): this; + + /** + * Sets the selector context for defining styles. + * @example + * style.selector('foo').style('color', 'black'); + */ + selector(s: string): this; + + /** + * Sets a style for the current selected selector. + * @example + * style.selector('foo').style('color', 'black'); + */ + style(key: string, value: string): this; + + /** + * Sets a style for the current selected selector. + * @example + * style.selector('foo').style({color: 'black'}); + */ + style(css: Css.Node | Css.Edge): this; + + /** + * Makes the changes active. + */ + update(): void; + } + + /** + * http://js.cytoscape.org/#cy.style + */ + type StylesheetJsonBlock = StylesheetStyle | StylesheetCSS; + type StylesheetJson = StylesheetJsonBlock[]; + + interface StylesheetStyle { + selector: string; + style: Css.Node | Css.Edge | Css.Core; + } + + /** + * http://js.cytoscape.org/#cy.style + */ + interface StylesheetCSS { + selector: string; + css: Css.Node | Css.Edge | Css.Core; + } + + /** + * http://js.cytoscape.org/#core/export + */ + interface ExportOptions { + /** + * The background colour of the image (transparent by default). + */ + bg?: string; + /** + * Whether to export the current viewport view (false, default) or the entire graph (true). + */ + full?: boolean; + /** + * This value specifies a positive number that scales the size of the resultant image. + */ + scale?: number; + /** + * Specifies the scale automatically in combination with maxHeight such that the resultant image is no wider than maxWidth. + */ + maxWidth?: number; + /** + * Specifies the scale automatically in combination with maxWidth such that the resultant image is no taller than maxHeight. + */ + maxHeight?: number; + } + interface ExportStringOptions extends ExportOptions { + /** + * output Whether the output should be 'base64uri' (default), 'base64', or 'blob'. + */ + output?: "base64uri" | "base64"; + } + interface ExportBlobOptions extends ExportOptions { + /** + * output Whether the output should be 'base64uri' (default), 'base64', or 'blob'. + */ + output?: "blob"; + } + + interface ExportBlobPromiseOptions extends ExportOptions { + /** + * output Whether the output should be 'base64uri' (default), 'base64', 'blob', or 'blob-promise'. + */ + output?: "blob-promise"; + } + + interface ExportJpgOptions extends ExportOptions { + /** + * quality Specifies the quality of the image from 0 + * (low quality, low filesize) to 1 (high quality, high filesize). + * If not set, the browser's default quality value is used. + */ + quality?: number; + } + + interface ExportJpgStringOptions extends ExportJpgOptions, ExportStringOptions {} + + interface ExportJpgBlobOptions extends ExportJpgOptions, ExportBlobOptions {} + + interface ExportJpgBlobPromiseOptions extends ExportJpgOptions, ExportBlobPromiseOptions {} + + interface CoreExport { + /** + * Export the current graph view as a PNG image in Base64 representation. + */ + png(options?: ExportStringOptions): string; + png(options?: ExportBlobOptions): Blob; + png(options?: ExportBlobPromiseOptions): Promise; + + /** + * Export the current graph view as a JPG image in Base64 representation. + */ + jpg(options?: ExportJpgStringOptions): string; + jpg(options?: ExportJpgBlobOptions): Blob; + jpg(options?: ExportJpgBlobPromiseOptions): Promise; + + /** + * Export the current graph view as a JPG image in Base64 representation. + */ + jpeg(options?: ExportJpgStringOptions): string; + jpeg(options?: ExportJpgBlobOptions): Blob; + jpeg(options?: ExportJpgBlobPromiseOptions): Promise; + + /** + * Export the graph as JSON, the same format used at initialisation. + */ + json(): object; + json(json: object): this; + } + + /** + * eles --> Cy.Collection + * a collection of one or more elements (nodes and edges) + * + * The input can be any element (node and edge) collection. + * http://js.cytoscape.org/#collection + */ + interface Collection + extends + CollectionGraphManipulation, + CollectionEvents, + CollectionData, + CollectionPosition, + CollectionTraversing, + CollectionLayout, + CollectionSelection, + CollectionStyle, + CollectionAnimation, + CollectionComparision, + CollectionIteration, + CollectionBuildingFiltering, + CollectionAlgorithms + {} + + /** + * ele --> Cy.Singular + * a collection of a single element (node or edge) + * NB: every singular collection is a general collection too (but not vice versa)! + */ + interface Singular + extends + Collection, + SingularGraphManipulation, + SingularData, + SingularPosition, + SingularSelection, + SingularStyle, + SingularAnimation + {} + + interface ElementsDefinition { + nodes: NodeDefinition[]; + edges: EdgeDefinition[]; + } + + type EventHandler = (event: EventObject, ...extraParams: any) => void; + + /** + * The output is a collection of node and edge elements OR single element. + */ + type CollectionArgument = Collection | EdgeCollection | NodeCollection | SingularElementArgument; + type CollectionReturnValue = Collection & EdgeCollection & NodeCollection & SingularElementReturnValue; + + /** + * edges -> Cy.EdgeCollection + * a collection of one or more edges + * + * The output is a collection of edge elements OR single edge. + */ + interface EdgeCollection extends Collection, EdgeCollectionTraversing {} + /** + * nodes -> Cy.NodeCollection + * a collection of one or more nodes + * + * The output is a collection of node elements OR single node. + */ + interface NodeCollection + extends + Collection, + NodeCollectionMetadata, + NodeCollectionPosition, + NodeCollectionTraversing, + NodeCollectionCompound, + NodeCollectionLayout + {} + + type SingularElementArgument = EdgeSingular | NodeSingular; + type SingularElementReturnValue = EdgeSingular & NodeSingular; + /** + * edge --> Cy.EdgeSingular + * a collection of a single edge + */ + interface EdgeSingular + extends + Singular, + EdgeCollection, + EdgeSingularData, + EdgeSingularPoints, + EdgeSingularTraversing + {} + + /** + * node --> Cy.NodeSingular + * a collection of a single node + */ + interface NodeSingular + extends + Singular, + NodeCollection, + NodeSingularMetadata, + NodeSingularPosition, + NodeSingularCompound, + NodeSingularLayout + {} + + /** + * http://js.cytoscape.org/#collection/graph-manipulation + */ + interface CollectionGraphManipulation { + /** + * Remove the elements from the graph. + * http://js.cytoscape.org/#eles.remove + */ + remove(): CollectionReturnValue; + + /** + * Put removed elements back into the graph. + * http://js.cytoscape.org/#eles.restore + */ + restore(): CollectionReturnValue; + + /** + * Get a new collection containing clones (i.e. copies) of the elements in the calling collection. + * http://js.cytoscape.org/#eles.clone + */ + clone(): CollectionReturnValue; + /** + * Get a new collection containing clones (i.e. copies) of the elements in the calling collection. + * http://js.cytoscape.org/#eles.clone + */ + copy(): CollectionReturnValue; + + /** + * Effectively move edges to different nodes. The modified (actually new) elements are returned. + * http://js.cytoscape.org/#eles.move + */ + move(location: { source?: string; target?: string }): EdgeCollection; + /** + * Effectively move nodes to different parent node. The modified (actually new) elements are returned. + * http://js.cytoscape.org/#eles.move + */ + move(location: { parent: string | null }): NodeCollection; + } + + /** + * http://js.cytoscape.org/#collection/graph-manipulation + */ + interface SingularGraphManipulation { + /** + * Get the core instance that owns the element. + */ + cy(): Core; + /** + * Get whether the element has been removed from the graph. + * http://js.cytoscape.org/#ele.removed + */ + removed(): boolean; + /** + * Get whether the element is inside the graph (i.e. not removed). + * http://js.cytoscape.org/#ele.inside + */ + inside(): boolean; + } + + /** + * http://js.cytoscape.org/#collection/events + */ + interface CollectionEvents { + /** + * http://js.cytoscape.org/#eles.on + * @param events A space separated list of event names. + * @param selector [optional] A delegate selector to specify child elements for which the handler runs. + * @param handler The handler function called when one of the specified events occurs. Takes the event object as a parameter. + */ + on(events: EventNames, selector: string, handler: EventHandler): this; + on(events: EventNames, handler: EventHandler): this; + bind(events: EventNames, selector: string, handler: EventHandler): this; + bind(events: EventNames, handler: EventHandler): this; + listen(events: EventNames, selector: string, handler: EventHandler): this; + listen(events: EventNames, handler: EventHandler): this; + addListener(events: EventNames, selector: string, handler: EventHandler): this; + addListener(events: EventNames, handler: EventHandler): this; + + /** + * http://js.cytoscape.org/#eles.promiseOn + * @alias pon + */ + promiseOn(events: EventNames, selector?: string): Promise; + pon(events: EventNames, selector?: string): Promise; + + /** + * @param events A space separated list of event names. + * @param selector [optional] A delegate selector to specify child elements for which the handler is triggered. + * @param data [optional] A plain object which is passed to the handler in the event object argument. + * @param function(event) The handler function that is called when one of the specified events occurs. + * @param event The event object. + * http://js.cytoscape.org/#eles.one + */ + one(events: EventNames, selector: string, data: any, handler: EventHandler): this; + one(events: EventNames, selector: string, handler: EventHandler): this; + one(events: EventNames, handler: EventHandler): this; + /** + * http://js.cytoscape.org/#eles.once + */ + once(events: EventNames, selector: string, data: any, handler: EventHandler): this; + once(events: EventNames, selector: string, handler: EventHandler): this; + once(events: EventNames, handler: EventHandler): this; + /** + * http://js.cytoscape.org/#eles.off + * @alias unbind, unlisten, removeListener + */ + off(events: EventNames, selector?: string, handler?: EventHandler): this; + unbind(events: EventNames, selector?: string, handler?: EventHandler): this; + unlisten(events: EventNames, selector?: string, handler?: EventHandler): this; + removeListener(events: EventNames, selector?: string, handler?: EventHandler): this; + /** + * https://js.cytoscape.org/#eles.removeAllListeners + */ + removeAllListeners(): this; + /** + * http://js.cytoscape.org/#eles.trigger + * @alias emit + */ + trigger(events: EventNames, extra?: unknown[]): this; + emit(events: EventNames, extra?: unknown[]): this; + } + + /** + * http://js.cytoscape.org/#collection/data + * + * The following fields are immutable: + * id: The id field is used to uniquely identify an element in the graph. + * source & target : These fields define an edge's relationship to nodes, and this relationship can not be changed after creation. + * parent: The parent field defines the parent (compound) node. + */ + interface CollectionData { + /** + * Read and write developer-defined data associated with the elements + * http://js.cytoscape.org/#eles.data + */ + + /** + * Get a particular data field for the element. + * @param name The name of the field to get. + */ + data(name?: string): any; + /** + * Set a particular data field for the element. + * @param name The name of the field to set. + * @param value The value to set for the field (must be JSON-serializable). + */ + data(name: string, value: any): this; + /** + * Update multiple data fields at once via an object. + * @param obj The object containing name- value pairs to update data fields (must be JSON-serializable). + */ + data(obj: any): this; + /** + * Get a particular data field for the element. + * @param name The name of the field to get. + */ + attr(name?: string): any; + /** + * Set a particular data field for the element. + * @param name The name of the field to set. + * @param value The value to set for the field (must be JSON-serializable). + */ + attr(name: string, value: any): this; + /** + * Update multiple data fields at once via an object. + * @param obj The object containing name- value pairs to update data fields. + */ + attr(obj: any): this; + + /** + * Remove developer-defined data associated with the elements. + * http://js.cytoscape.org/#eles.removeData + * @param names A space-separated list of fields to delete. + */ + removeData(names?: string): CollectionReturnValue; + removeAttr(names?: string): CollectionReturnValue; + + /** + * Get an array of the plain JavaScript object + * representation of all elements in the collection. + */ + jsons(): string[]; + } + /** + * http://js.cytoscape.org/#collection/data + */ + interface SingularData { + /** + * Get or set the scratchpad at a particular namespace, + * where temporary or non-JSON data can be stored. + * Get scratchpad if one or no parameter provided. + * App-level scratchpad data should use namespaces + * prefixed with underscore, like '_foo'. + * http://js.cytoscape.org/#ele.scratch + * @param namespace A namespace string. + * @param value The value to set at the specified namespace. + */ + scratch(namespace?: string): Scratchpad; + scratch(namespace: string, value: any): this; + + /** + * Remove scratchpad data. + * You should remove scratchpad data only at your own namespaces. + * http://js.cytoscape.org/#ele.removeScratch + * @param namespace A namespace string. + */ + removeScratch(namespace: string): this; + + /** + * A shortcut to get the ID of an element. + * http://js.cytoscape.org/#ele.id + */ + id(): string; + + /** + * Get the element's plain JavaScript object representation. + * http://js.cytoscape.org/#ele.json + */ + json(): Object; + + /** + * Get the group string that defines the type of the element. + * + * The group strings are 'nodes' for nodes and 'edges' for edges. + * In general, you should be using ele.isEdge() + * and ele.isNode() instead of ele.group(). + * http://js.cytoscape.org/#ele.group + */ + group(): ElementGroup; + + /** + * Get whether the element is a node. + * http://js.cytoscape.org/#ele.isNode + */ + isNode(): this is NodeSingular; + + /** + * Get whether the element is an edge. + * http://js.cytoscape.org/#ele.isEdge + */ + isEdge(): this is EdgeSingular; + + /** + * Get the connected component for the calling element. + * The component considers all elements in the graph. + * http://js.cytoscape.org/#ele.component + */ + component(): CollectionReturnValue; + } + /** + * http://js.cytoscape.org/#collection/data + */ + interface EdgeSingularData { + /** + * Get whether the edge is a loop (i.e. source same as target). + * http://js.cytoscape.org/#edge.isLoop + */ + isLoop(): boolean; + + /** + * Get whether the edge is simple (i.e. source different than target). + * http://js.cytoscape.org/#edge.isSimple + */ + isSimple(): boolean; + } + + /** + * http://js.cytoscape.org/#collection/metadata + */ + interface NodeSingularMetadata { + /** + * Get the degree of a node. + * @param includeLoops A boolean, indicating whether loops are to be included in degree calculations. + */ + degree(includeLoops: boolean): number; + /** + * Get the indegree of a node. + * @param includeLoops A boolean, indicating whether loops are to be included in degree calculations. + */ + indegree(includeLoops: boolean): number; + /** + * Get the outdegree of a node. + * @param includeLoops A boolean, indicating whether loops are to be included in degree calculations. + */ + outdegree(includeLoops: boolean): number; + } + + /** + * http://js.cytoscape.org/#collection/metadata + */ + interface NodeCollectionMetadata { + /** + * Get the total degree of a collection of nodes. + * @param includeLoops A boolean, indicating whether loops are to be included in degree calculations. + */ + totalDegree(includeLoops: boolean): number; + + /** + * Get the minimum degree of the nodes in the collection. + * @param includeLoops A boolean, indicating whether loops are to be included in degree calculations. + */ + minDegree(includeLoops: boolean): number; + + /** + * Get the maximum degree of the nodes in the collection. + * @param includeLoops A boolean, indicating whether loops are to be included in degree calculations. + */ + maxDegree(includeLoops: boolean): number; + + /** + * Get the minimum indegree of the nodes in the collection. + * @param includeLoops A boolean, indicating whether loops are to be included in degree calculations. + */ + minIndegree(includeLoops: boolean): number; + + /** + * Get the maximum indegree of the nodes in the collection. + * @param includeLoops A boolean, indicating whether loops are to be included in degree calculations. + */ + maxIndegree(includeLoops: boolean): number; + + /** + * Get the minimum outdegree of the nodes in the collection. + * @param includeLoops A boolean, indicating whether loops are to be included in degree calculations. + */ + minOutdegree(includeLoops: boolean): number; + + /** + * Get the maximum outdegree of the nodes in the collection. + * @param includeLoops A boolean, indicating whether loops are to be included in degree calculations. + */ + maxOutdegree(includeLoops: boolean): number; + } + + /** + * http://js.cytoscape.org/#collection/position--dimensions + */ + interface NodeSingularPosition { + /** + * Get the (model) position of a node. + */ + position(): Position; + /** + * Get the value of a specified position dimension. + * @param dimension The position dimension to set. + * @param value The value to set to the dimension. + */ + position(dimension: PositionDimension): number; + /** + * Set the value of a specified position dimension. + * @param dimension The position dimension to set. + * @param value The value to set to the dimension. + */ + position(dimension: PositionDimension, value: number): this; + /** + * Set the position using name-value pairs in the specified object. + * @param pos An object specifying name-value pairs representing dimensions to set. + */ + position(pos: Position): this; + /** + * Get the (model) position of a node. + */ + modelPosition(): Position; + /** + * Get the value of a specified position dimension. + * @param dimension The position dimension to set. + * @param value The value to set to the dimension. + */ + modelPosition(dimension: PositionDimension): number; + /** + * Set the value of a specified position dimension. + * @param dimension The position dimension to set. + * @param value The value to set to the dimension. + */ + modelPosition(dimension: PositionDimension, value: number): this; + /** + * Set the position using name-value pairs in the specified object. + * @param pos An object specifying name-value pairs representing dimensions to set. + */ + modelPosition(pos: Position): this; + /** + * Get the (model) position of a node. + */ + point(): Position; + /** + * Get the value of a specified position dimension. + * @param dimension The position dimension to set. + * @param value The value to set to the dimension. + */ + point(dimension: PositionDimension): number; + /** + * Set the value of a specified position dimension. + * @param dimension The position dimension to set. + * @param value The value to set to the dimension. + */ + point(dimension: PositionDimension, value: number): this; + /** + * Set the position using name-value pairs in the specified object. + * @param pos An object specifying name-value pairs representing dimensions to set. + */ + point(pos: Position): this; + + /** + * Get or set the rendered (on-screen) position of a node. + * http://js.cytoscape.org/#node.renderedPosition + */ + /** + * Get the value of a specified rendered position dimension. + * @param dimension The position dimension to get. + * @param value The value to set to the dimension. + * @param pos An object specifying name-value pairs representing dimensions to set. + */ + renderedPosition(dimension?: PositionDimension): Position; + renderedPosition(dimension: PositionDimension, value: Position): this; + renderedPosition(pos: { [name: string]: number }): this; + + /** + * Set the value of a specified rendered position dimension. + * @param dimension The position dimension to set. + * @param value The value to set to the dimension. + * @param pos An object specifying name-value pairs representing dimensions to set. + */ + renderedPoint(dimension?: PositionDimension): Position; + renderedPoint(dimension: PositionDimension, value: Position): this; + renderedPoint(pos: { [name: string]: number }): this; + + /** + * http://js.cytoscape.org/#node.relativePosition + */ + /** + * Get the value of a specified relative position dimension. + * @param dimension The position dimension to get. + * @param value The value to set to the dimension. + * @param pos An object specifying name-value pairs representing dimensions to set. + */ + relativePosition(dimension?: PositionDimension): Position; + relativePosition(dimension: PositionDimension, value: Position): this; + relativePosition(pos: { [name: string]: number }): this; + + /** + * Get the value of a specified relative position dimension. + * @param dimension The position dimension to get. + * @param value The value to set to the dimension. + * @param pos An object specifying name-value pairs representing dimensions to set. + */ + relativePoint(dimension?: PositionDimension): Position; + relativePoint(dimension: PositionDimension, value: Position): this; + relativePoint(pos: { [name: string]: number }): this; + + /** + * Get whether a node is currently grabbed, meaning the user has hold of the node. + * http://js.cytoscape.org/#node.grabbed + */ + grabbed(): boolean; + /** + * Get whether the user can grab a node. + * http://js.cytoscape.org/#node.grabbable + */ + grabbable(): boolean; + /** + * Get whether a node is locked, meaning that its position can not be changed. + * http://js.cytoscape.org/#node.locked + */ + locked(): boolean; + } + + /** + * @param ele The element being iterated over for which the function should return a position to set. + * @param ix The index of the element when iterating over the elements in the collection. + */ + type ElementPositionFunction = (ele: NodeSingular, ix: number) => Position; + type ElementCollectionFunction = (ele: NodeSingular, ix: number, eles: CollectionArgument) => Position; + + /** + * http://js.cytoscape.org/#collection/position--dimensions + */ + interface NodeCollectionPosition { + /** + * Shift the positions of the nodes by a given model position vector. + * @param dimension The position dimension to shift. + * @param value The value to shift the dimension. + */ + shift(dimension: PositionDimension, value?: number): this; + /** + * Shift the positions of the nodes by a given model position vector. + * @param pos An object specifying name-value pairs representing dimensions to shift. + */ + shift(pos: Position): this; + + /** + * Set the positions via a function. + * @param handler A callback function that returns the position to set for each element. + * @param pos An object specifying name-value pairs representing dimensions to set. + * http://js.cytoscape.org/#nodes.positions + */ + positions(handler: ElementPositionFunction | Position): this; + modelPositions(handler: ElementPositionFunction | Position): this; + points(handler: ElementPositionFunction | Position): this; + + /** + * Allow the user to grab the nodes. + * http://js.cytoscape.org/#nodes.grabify + */ + grabify(): this; + /** + * Disallow the user to grab the nodes. + * http://js.cytoscape.org/#nodes.ungrabify + */ + ungrabify(): this; + /** + * Lock the nodes such that their positions can not be changed. + * http://js.cytoscape.org/#nodes.lock + */ + lock(): this; + /** + * Unlock the nodes such that their positions can be changed. + * http://js.cytoscape.org/#nodes.unlock + */ + unlock(): this; + + /** + * Gets whether the element allows passthrough panning. + * http://js.cytoscape.org/#ele.pannable + */ + pannable(): boolean; + + /** + * Enables passthrough panning on the elements. + * http://js.cytoscape.org/#eles.panify + */ + panify(): this; + + /** + * Disables passthrough panning on the elements. + * http://js.cytoscape.org/#eles.unpanify + */ + unpanify(): this; + } + /** + * http://js.cytoscape.org/#collection/position--dimensions + */ + interface SingularPosition { + /** + * Get the width of the element. + */ + width(): number; + /** + * Get the outer width of the element (includes width, padding, & border). + */ + outerWidth(): number; + + /** + * Get the width of the element in rendered dimensions. + */ + renderedWidth(): number; + + /** + * Get the outer width of the element (includes width, padding, & border) in rendered dimensions. + */ + renderedOuterWidth(): number; + + /** + * Get the height of the element. + */ + height(): number; + /** + * Get the outer height of the element (includes height, padding, & border). + */ + outerHeight(): number; + /** + * Get the height of the element in rendered dimensions. + */ + renderedHeight(): number; + + /** + * Get the outer height of the element (includes height, padding, & border) in rendered dimensions. + */ + renderedOuterHeight(): number; + /** + * Gets whether the element is active (e.g. on user tap, grab, etc). + * http://js.cytoscape.org/#ele.active + */ + active(): boolean; + } + + interface BoundingBoxOptions { + /** A boolean indicating whether to include nodes in the bounding box (default true). */ + includeNodes?: boolean; + /** A boolean indicating whether to include edges in the bounding box (default true). */ + includeEdges?: boolean; + /** A boolean indicating whether to include labels in the bounding box (default true). */ + includeLabels?: boolean; + /** A boolean indicating whether to include main (node or edge) labels in the bounding box (default true). */ + includeMainLabels?: boolean; + /** A boolean indicating whether to include (edge) source-labels in the bounding box (default true). */ + includeSourceLabels?: boolean; + /** A boolean indicating whether to include (edge) target-labels in the bounding box (default true). */ + includeTargetLabels?: boolean; + /** A boolean indicating whether to include overlays (such as the one which appears when a node is clicked) in the bounding box (default true). */ + includeOverlays?: boolean; + /** A boolean indicating whether to include underlays in the bounding box (default: true). */ + includeUnderlays?: boolean; + } + /** + * http://js.cytoscape.org/#collection/position--dimensions + */ + interface CollectionPosition { + /** + * Get the bounding box of the elements in model coordinates. + * @param options An object containing options for the function. + * http://js.cytoscape.org/#eles.boundingBox + */ + boundingBox(options?: BoundingBoxOptions): BoundingBox12 & BoundingBoxWH; + boundingbox(options?: BoundingBoxOptions): BoundingBox12 & BoundingBoxWH; + /** + * Get the bounding box of the elements in rendered coordinates. + * @param options An object containing options for the function. + */ + renderedBoundingBox(options?: BoundingBoxOptions): BoundingBox12 & BoundingBoxWH; + renderedBoundingbox(options?: BoundingBoxOptions): BoundingBox12 & BoundingBoxWH; + } + + /** + * http://js.cytoscape.org/#collection/layout + */ + interface CollectionLayout { + /** + * Get a new layout, which can be used to algorithmically position the nodes in the collection. + * This function is useful for running a layout on a subset of the elements in the graph, perhaps in parallel to other layouts. + * + * You must specify options.name with the name of the layout you wish to use. + * + * Note: that you must call layout.run() in order for it to affect the graph. + * + * @param options The layout options. + */ + layout(options: LayoutOptions): Layouts; + makeLayout(options: LayoutOptions): Layouts; + createLayout(options: LayoutOptions): Layouts; + } + + /** + * http://js.cytoscape.org/#collection/layout + */ + interface LayoutPositionOptions { + // whether to animate changes to the layout + animate?: boolean; + // duration of animation in ms, if enabled + animationDuration?: number; + // easing of animation, if enabled + animationEasing?: Css.TransitionTimingFunction; + // collection of elements involved in the layout; set by cy.layout() or eles.layout(s) + eles: CollectionArgument; + // whether to fit the viewport to the graph + fit?: boolean; + // padding to leave between graph and viewport + padding?: number; + // pan the graph to the provided position, given as { x, y } + pan?: Position; + // callback for the layoutready event + ready?: undefined; + // callback for the layoutstop event + stop?: undefined; + // a positive value which adjusts spacing between nodes (>1 means greater than usual spacing) + spacingFactor?: number; + // zoom level as a positive number to set after animation + zoom?: number; + } + interface NodeCollectionLayout { + /** + * Position the nodes for a discrete/synchronous layout. + * http://js.cytoscape.org/#nodes.layoutPositions + * @param layout The layout. + * @param options The layout options object. + */ + layoutPositions(layout: string, options: LayoutPositionOptions, handler: ElementPositionFunction): void; + } + /** + * http://js.cytoscape.org/#collection/layout + */ + interface LayoutDimensionOptions { + // Boolean which changes whether label dimensions are included when calculating node dimensions + nodeDimensionsIncludeLabels: boolean; + } + + /** + * https://js.cytoscape.org/#node.layoutDimensions + */ + interface NodeSingularLayout { + /** + * Returns the node width and height. + * Meant for use in layout positioning to do overlap detection. + * @param options The layout options object. + */ + layoutDimensions(options: LayoutDimensionOptions): { w: number; h: number }; + } + + /** + * http://js.cytoscape.org/#collection/selection + */ + interface SingularSelection { + /** + * Get whether the element is selected. + * http://js.cytoscape.org/#ele.selected + */ + selected(): boolean; + + /** + * Get whether the element's selection state is mutable. + * http://js.cytoscape.org/#ele.selectable + */ + selectable(): boolean; + } + /** + * https://js.cytoscape.org/#collection/selection + */ + interface CollectionSelection { + /** + * Make the elements selected (NB other elements outside the collection are not affected). + * http://js.cytoscape.org/#eles.select + */ + select(): this; + /** + * Make the elements not selected (NB other elements outside the collection are not affected). + * http://js.cytoscape.org/#eles.unselect + */ + unselect(): this; + deselect(): this; + /** + * Make the selection states of the elements mutable. + * http://js.cytoscape.org/#eles.selectify + */ + selectify(): this; + /** + * Make the selection states of the elements immutable. + * http://js.cytoscape.org/#eles.unselectify + */ + unselectify(): this; + } + + /** + * http://js.cytoscape.org/#collection/style + */ + type ClassName = string; + /** A space-separated list of class names or an array */ + type ClassNames = string | ClassName[]; + + interface CollectionStyle { + /** + * Add classes to elements. + * http://js.cytoscape.org/#eles.addClass + * @param classes A space-separated list of class names to add to the elements. + */ + addClass(classes: ClassNames): this; + /** + * Remove classes from elements. + * @param classes A space-separated list of class names to remove from the elements. + * http://js.cytoscape.org/#eles.removeClass + */ + removeClass(classes: ClassNames): this; + /** + * Toggle whether the elements have the specified classes. + * @param classes A space-separated list of class names to toggle on the elements. + * @param toggle [optional] Instead of automatically toggling, adds the classes on truthy values or removes them on falsey values. + * http://js.cytoscape.org/#eles.toggleClass + */ + toggleClass(classes: ClassNames, toggle?: boolean): this; + /** + * Replace the current list of classes on the elements with the specified list. + * @param classes A space-separated list or array of class names that replaces the current class list. + * http://js.cytoscape.org/#eles.classes + * Note: can be used to clear all classes (empty string or array). + */ + classes(classes: ClassNames): this; + classes(classes: ClassNames): this | string[]; + classes(): string[]; + /** + * Add classes to the elements, and then remove the classes after a specified duration. + * @param classes A space-separated list of class names to flash on the elements. + * @param duration [optional] The duration in milliseconds that the classes should be added on the elements. After the duration, the classes are removed. + * http://js.cytoscape.org/#eles.flashClass + */ + flashClass(classes: ClassNames, duration?: number): this; + + /** + * Set a particular style property value. + * @param name The name of the visual style property to set. + * @param value The value to which the property is set. + */ + style(name: string, value: any): this; + /** + * Get a particular style property value. + * @param name The name of the visual style property to get. + */ + style(name: string): any; + /** + * Set several particular style property values. + * @param obj An object of style property name-value pairs to set. + */ + style(obj: object): this; + /** + * Get a name-value pair object containing visual style properties and their values for the element. + */ + style(): { [index: string]: any }; + /** + * Set a particular style property value. + * @param name The name of the visual style property to set. + * @param value The value to which the property is set. + */ + css(name: string, value: any): this; + /** + * Get a particular style property value. + * @param name The name of the visual style property to get. + */ + css(name: string): any; + /** + * Set several particular style property values. + * @param obj An object of style property name-value pairs to set. + */ + css(obj: object): this; + /** + * Get a name-value pair object containing visual style properties and their values for the element. + */ + css(): { [index: string]: any }; + /** + * Remove all or specific style overrides. + * @param names A space-separated list of property names to remove overrides + */ + removeStyle(names?: string): this; + } + + /** + * http://js.cytoscape.org/#collection/style + */ + interface SingularStyle { + /** + * Get whether an element has a particular class. + * @param className The name of the class to test for. + * http://js.cytoscape.org/#ele.hasClass + */ + hasClass(className: ClassName): boolean; + + /** + * Get a name-value pair object containing rendered visual + * style properties and their values for the element. + * @param name The name of the visual style property to get. + */ + renderedStyle(): { [name: string]: any }; + renderedStyle(name: string): any; + + renderedCss(): { [name: string]: any }; + renderedCss(name: string): any; + + /** + * Get the numeric value of a style property in + * preferred units that can be used for calculations. + * @param name The name of the style property to get. + * http://js.cytoscape.org/#ele.numericStyle + */ + numericStyle(name: string): any; + + /** + * Get the units that ele.numericStyle() is expressed in, for a particular property. + * @param name The name of the style property to get. + * http://js.cytoscape.org/#ele.numericStyleUnits + */ + numericStyleUnits(name: string): any; + /** + * Get whether the element is visible. + * http://js.cytoscape.org/#ele.visible + */ + visible(): boolean; + /** + * Get whether the element is hidden. + * http://js.cytoscape.org/#ele.visible + */ + hidden(): boolean; + /** + * Get the effective opacity of the element + * (i.e. on-screen opacity), + * which takes into consideration parent node opacity. + * http://js.cytoscape.org/#ele.effectiveOpacity + */ + effectiveOpacity(): number; + /** + * Get whether the element's effective opacity is completely transparent, + * which takes into consideration parent node opacity. + * http://js.cytoscape.org/#ele.transparent + */ + transparent(): number; + } + + /** + * http://js.cytoscape.org/#collection/animation + */ + interface ElementAnimateOptionsBase { + /** An object containing name-value pairs of style properties to animate. */ + style?: { [name: string]: any }; + /** The duration of the animation in milliseconds. */ + duration?: number; + /** A boolean indicating whether to queue the animation. */ + queue?: boolean; + /** A function to call when the animation is done. */ + complete?(): void; + /** A function to call each time the animation steps. */ + step?(): void; + /** A transition-timing-function easing style string that shapes the animation progress curve. */ + easing?: Css.TransitionTimingFunction; + } + interface ElementAnimateOptionPos extends ElementAnimateOptionsBase { + /** A position to which the elements will be animated. */ + position?: Position; + } + interface ElementAnimateOptionRen extends ElementAnimateOptionsBase { + /** A rendered position to which the elements will be animated. */ + renderedPosition?: Position; + } + interface CollectionAnimation { + /** + * Animate the elements. + * @param options An object containing the details of the animation. + * http://js.cytoscape.org/#eles.animate + */ + animate(options: ElementAnimateOptionPos | ElementAnimateOptionRen, params?: ElementAnimateOptionsBase): this; + /** + * Add a delay between animations for the elements. + * @param duration How long the delay should be in milliseconds. + * @param complete A function to call when the delay is complete. + * http://js.cytoscape.org/#eles.delay + */ + delay(duration: number, complete?: () => void): this; + /** + * Stop all animations that are currently running. + * @param clearQueue A boolean, indicating whether the queue of animations should be emptied. + * @param jumpToEnd A boolean, indicating whether the currently-running animations should jump to their ends rather than just stopping midway. + * http://js.cytoscape.org/#eles.stop + */ + stop(clearQueue?: boolean, jumpToEnd?: boolean): this; + /** + * Remove all queued animations for the elements. + * http://js.cytoscape.org/#eles.clearQueue + */ + clearQueue(): this; + } + interface SingularAnimationOptionsBase { + /** A position to which the elements will be animated. */ + position: Position; + /** A rendered position to which the elements will be animated. */ + renderedPosition: Position; + /** An object containing name-value pairs of style properties to animate. */ + style: any; + /** The duration of the animation in milliseconds. */ + duration: number; + /** A transition-timing-function easing style string that shapes the animation progress curve. */ + easing: Css.TransitionTimingFunction; + } + interface SingularAnimationOptionsPos extends SingularAnimationOptionsBase { + /** A position to which the elements will be animated. */ + position: Position; + } + interface SingularAnimationOptionsRen extends SingularAnimationOptionsBase { + /** A rendered position to which the elements will be animated. */ + renderedPosition: Position; + } + interface SingularAnimation { + /** + * Get whether the element is currently being animated. + */ + animated(): boolean; + /** + * Get an animation for the element. + * @param options An object containing the details of the animation. + */ + animation(options: SingularAnimationOptionsRen | SingularAnimationOptionsPos): AnimationManipulation; + + /** + * Get a delay animation for the element. + * @param duration How long the delay should be in milliseconds. + * http://js.cytoscape.org/#ele.delayAnimation + */ + delayAnimation(duration: number): AnimationManipulation; + } + + /** + * http://js.cytoscape.org/#collection/comparison + */ + interface CollectionComparision { + /** + * Determine whether this collection contains exactly the same elements as another collection. + * @param eles The other elements to compare to. + */ + same(eles: CollectionArgument): boolean; + + /** + * Determine whether this collection contains any of the same elements as another collection. + * @param eles The other elements to compare to. + */ + anySame(eles: CollectionArgument): boolean; + + /** + * Determine whether this collection contains all of the elements of another collection. + */ + contains(eles: CollectionArgument): boolean; + has(eles: CollectionArgument): boolean; + + /** + * Determine whether all elements in the specified collection are in the neighbourhood of the calling collection. + * @param eles The other elements to compare to. + */ + allAreNeighbors(eles: CollectionArgument): boolean; + allAreNeighbours(eles: CollectionArgument): boolean; + + /** + * Determine whether any element in this collection matches a selector. + * + * @param selector The selector to match against. + */ + is(selector: Selector): boolean; + + /** + * Determine whether all elements in the collection match a selector. + * @param selector The selector to match against. + */ + allAre(selector: Selector): boolean; + + /** + * Determine whether any element in this collection satisfies the specified test function. + * + * @param test The test function that returns truthy values for elements that satisfy the test and falsey values for elements that do not satisfy the test. + * ele - The current element. + * i - The index of the current element. + * eles - The collection of elements being tested. + * @param thisArg [optional] The value for this within the test function. + */ + some(test: (ele: CollectionArgument, i: number, eles: CollectionArgument) => boolean, thisArg?: any): boolean; + + /** + * Determine whether all elements in this collection satisfy the specified test function. + * + * @param test The test function that returns truthy values for elements that satisfy the test and falsey values for elements that do not satisfy the test. + * ele - The current element. + * i - The index of the current element. + * eles - The collection of elements being tested. + * @param thisArg [optional] The value for this within the test function. + */ + every(test: (ele: CollectionArgument, i: number, eles: CollectionArgument) => boolean, thisArg?: any): boolean; + } + + /** + * http://js.cytoscape.org/#collection/iteration + */ + interface CollectionIteration { + /** + * Get the number of elements in the collection. + */ + size(): number; + /** + * Get the number of elements in the collection. + */ + length: number; + + /** + * Get whether the collection is empty, meaning it has no elements. + */ + empty(): boolean; + /** + * Get whether the collection is nonempty, meaning it has elements. + */ + nonempty(): boolean; + + /** + * Iterate over the elements in the collection using an implementation like the native array function namesake. + * + * This function behaves like Array.prototype.forEach() with minor changes for convenience: + * You can exit the iteration early by returning false in the iterating function. + * The Array.prototype.forEach() implementation does not support this, but it is included anyway on account of its utility. + * + * @param each The function executed each iteration. + * ele - The current element. + * i - The index of the current element. + * eles - The collection of elements being iterated. + * @param thisArg [optional] The value for this within the iterating function. + */ + // eslint-disable-next-line @typescript-eslint/no-invalid-void-type + each(each: (ele: TIn, i: number, eles: this) => void | boolean, thisArg?: any): this; + // eslint-disable-next-line @typescript-eslint/no-invalid-void-type + forEach(each: (ele: TIn, i: number, eles: this) => void | boolean, thisArg?: any): this; + + /** + * Get an element at a particular index in the collection. + * + * You may use eles[i] in place of eles.eq(i) as a more performant alternative. + * + * @param index The index of the element to get. + */ + eq(index: number): TOut; + /** + * Get an element at a particular index in the collection. + * + * @param index The index of the element to get. + */ + [index: number]: TOut; + /** + * Get the first element in the collection. + */ + first(): TOut; + /** + * Get the last element in the collection. + */ + last(): TOut; + + /** + * Get a subset of the elements in the collection based on specified indices. + * + * @param start [optional] An integer that specifies where to start the selection. + * The first element has an index of 0. + * Use negative numbers to select from the end of an array. + * @param end [optional] An integer that specifies where to end the selection. + * If omitted, all elements from the start position and to the end of the array will be selected. + * Use negative numbers to select from the end of an array. + */ + slice(start?: number, end?: number): this; + + /** + * Get the collection as an array, maintaining the order of the elements. + */ + toArray(): TOut[]; + + [Symbol.iterator](): Iterator; + } + + /** + * http://js.cytoscape.org/#collection/building--filtering + */ + /** + * Get a new collection, resulting from adding the collection with another one + * + * @param eles The elements or array of elements to add or elements in the graph matching the selector. + * http://js.cytoscape.org/#eles.union + */ + type CollectionBuildingUnionFunc = ( + eles: CollectionArgument | CollectionArgument[] | Selector, + ) => CollectionReturnValue; + + /** + * Get a new collection, resulting from the collection without some specified elements. + * http://js.cytoscape.org/#eles.difference + * @param eles The elements that will not be in the resultant collection. + * Elements from the calling collection matching this selector will not be in the resultant collection. + */ + type CollectionBuildingDifferenceFunc = (eles: CollectionArgument | Selector) => CollectionReturnValue; + + /** + * Get the elements in both this collection and another specified collection. + * http://js.cytoscape.org/#eles.intersection + * @param eles The elements to intersect with. + * A selector representing the elements to intersect with. + * All elements in the graph matching the selector are used as the passed collection. + */ + type CollectionBuildingIntersectionFunc = (eles: CollectionArgument | Selector) => CollectionReturnValue; + + /** + * Get the elements that are in the calling collection or the passed collection but not in both. + * http://js.cytoscape.org/#eles.symmetricDifference + * @param eles The elements to apply the symmetric difference with. + * A selector representing the elements to apply the symmetric difference with. + * All elements in the graph matching the selector are used as the passed collection. + */ + type CollectionSymmetricDifferenceFunc = (eles: CollectionArgument | Selector) => CollectionReturnValue; + /** + * http://js.cytoscape.org/#collection/building--filtering + */ + interface CollectionBuildingFiltering { + /** + * Get an element in the collection from its ID in a very performant way. + * @param id The ID of the element to get. + */ + getElementById(id: string): TOut; + /** + * Get an element in the collection from its ID in a very performant way. + * @param id The ID of the element to get. + */ + $id(id: string): TOut; + + /** + * Get a new collection, resulting from adding the collection with another one + * http://js.cytoscape.org/#eles.union + */ + union: CollectionBuildingUnionFunc; + u: CollectionBuildingUnionFunc; + add: CollectionBuildingUnionFunc; + "+": CollectionBuildingUnionFunc; + or: CollectionBuildingUnionFunc; + "|": CollectionBuildingUnionFunc; + + /** + * Get a new collection, resulting from the collection without some specified elements. + * http://js.cytoscape.org/#eles.difference + */ + difference: CollectionBuildingDifferenceFunc; + subtract: CollectionBuildingDifferenceFunc; + "\\": CollectionBuildingDifferenceFunc; + not: CollectionBuildingDifferenceFunc; + "!": CollectionBuildingDifferenceFunc; + relativeComplement: CollectionBuildingDifferenceFunc; + "-": CollectionBuildingDifferenceFunc; + + /** + * Get all elements in the graph that are not in the calling collection. + * http://js.cytoscape.org/#eles.absoluteComplement + */ + absoluteComplement(): CollectionReturnValue; + abscomp(): CollectionReturnValue; + complement(): CollectionReturnValue; + + /** + * Get the elements in both this collection and another specified collection. + * http://js.cytoscape.org/#eles.intersection + */ + intersection: CollectionBuildingIntersectionFunc; + intersect: CollectionBuildingIntersectionFunc; + and: CollectionBuildingIntersectionFunc; + n: CollectionBuildingIntersectionFunc; + "&": CollectionBuildingIntersectionFunc; + ".": CollectionBuildingIntersectionFunc; + + /** + * Get the elements that are in the calling collection + * or the passed collection but not in both. + * http://js.cytoscape.org/#eles.symmetricDifference + */ + symmetricDifference: CollectionSymmetricDifferenceFunc; + symdiff: CollectionSymmetricDifferenceFunc; + xor: CollectionSymmetricDifferenceFunc; + "^": CollectionSymmetricDifferenceFunc; + "(+)": CollectionSymmetricDifferenceFunc; + "(-)": CollectionSymmetricDifferenceFunc; + + /** + * Perform a traditional left/right diff on the two collections. + * + * @param selector + * A selector representing the elements on the right side of the diff. All elements in the graph matching the selector are used as the passed collection. + * The elements on the right side of the diff. + * @return This function returns a plain object of the form { left, right, both } where + * left - is the set of elements only in the calling (i.e. left) collection, + * right - is the set of elements only in the passed (i.e. right) collection, and + * both - is the set of elements in both collections. + * http://js.cytoscape.org/#eles.diff + */ + diff(selector: Selector | CollectionArgument): { + left: CollectionReturnValue; + right: CollectionReturnValue; + both: CollectionReturnValue; + }; + + /** + * Perform a in-place merge of the given elements into the calling collection. + * @param eles The elements to merge in-place or a selector representing the elements to merge. + * All elements in the graph matching the selector are used as the passed collection. + * + * This function modifies the calling collection instead of returning a new one. + * Use of this function should be considered for performance in some cases, but otherwise should be avoided. Consider using eles.union() instead. + * Use this function only on new collections that you create yourself, using cy.collection(). + * This ensures that you do not unintentionally modify another collection. + * + * Examples + * With a collection: + * @example + * var col = cy.collection(); // new, empty collection + * var j = cy.$('#j'); + * var e = cy.$('#e'); + * col.merge( j ).merge( e ); + * + * With a selector: + * @example + * var col = cy.collection(); // new, empty collection + * col.merge('#j').merge('#e'); + */ + merge(eles: CollectionArgument | Selector): this; + /** + * Perform an in-place operation on the calling collection to remove the given elements. + * @param eles The elements to remove in-place or a selector representing the elements to remove . + * All elements in the graph matching the selector are used as the passed collection. + * + * This function modifies the calling collection instead of returning a new one. + * Use of this function should be considered for performance in some cases, but otherwise should be avoided. Consider using eles.filter() or eles.remove() instead. + * Use this function only on new collections that you create yourself, using cy.collection(). + * This ensures that you do not unintentionally modify another collection. + * + * Examples + * With a collection: + * @example + * var col = cy.collection(); // new, empty collection + * var e = cy.$('#e'); + * col.merge( cy.nodes() ); + * col.unmerge( e ); + * + * With a selector: + * @example + * var col = cy.collection(); // new, empty collection + * col.merge( cy.nodes() ); + * col.unmerge('#e'); + */ + unmerge(eles: CollectionArgument | Selector): this; + + /** + * Get a new collection containing elements that are accepted by the specified filter. + * + * @param selector The selector to match against. + * @param filter selector The filter function that returns true for elements to include. + * i - The index of the current element being considered. + * ele - The element being considered. + * http://js.cytoscape.org/#eles.filter + */ + filter( + selector: Selector | ((ele: TIn, i: number, eles: CollectionArgument) => boolean), + ): CollectionReturnValue; + /** + * Get the nodes that match the specified selector. + * + * @param selector The selector to match against. + * http://js.cytoscape.org/#eles.filter + */ + nodes(selector?: Selector): NodeCollection; + /** + * Get the edges that match the specified selector. + * + * @param selector The selector to match against. + * http://js.cytoscape.org/#eles.filter + */ + edges(selector?: Selector): EdgeCollection; + + /** + * Get a new collection containing the elements sorted by the + * specified comparison function. + * + * @param sort The sorting comparison function that returns a negative number + * for ele1 before ele2, 0 for ele1 same as ele2, + * or a positive number for ele1 after ele2. + * + * http://js.cytoscape.org/#eles.sort + */ + sort(sort: (ele1: TIn, ele2: TIn) => number): CollectionReturnValue; + + /** + * Get an array containing values mapped from the collection. + * + * @param fn The function that returns the mapped value for each element. + * ele - The current element. + * i - The index of the current element. + * eles - The collection of elements being mapped. + * @param thisArg [optional] The value for this within the iterating function. + * + * http://js.cytoscape.org/#eles.map + */ + map(fn: (ele: TIn, i: number, eles: CollectionArgument) => T, thisArg?: any): T[]; + + /** + * Reduce a single value by applying a + * function against an accumulator and each value of the collection. + * + * @param fn The function that returns the accumulated value + * given the previous value and the current element. + * prevVal The value accumulated from previous elements. + * ele The current element. + * i The index of the current element. + * eles The collection of elements being reduced. + * @param initialValue The initial value for reducing + * It is used also for type inference of output, but the type can be + * also stated explicitly as generic + * http://js.cytoscape.org/#eles.reduce + */ + reduce(fn: (prevVal: T, ele: TIn, i: number, eles: CollectionArgument) => T, initialValue: T): T; + + /** + * Find a minimum value in a collection. + * + * @param fn The function that returns the value to compare for each element. + * ele - The current element. + * i - The index of the current element. + * eles - The collection of elements being mapped. + * @param thisArg [optional] The value for this within the iterating function. + * + * http://js.cytoscape.org/#eles.min + */ + min( + fn: (ele: TIn, i: number, eles: CollectionArgument) => T, + thisArg?: any, + ): { + /** + * The minimum value found. + */ + value: T; + /** + * The element that corresponds to the minimum value. + */ + ele: SingularElementReturnValue; + }; + + /** + * Find a maximum value and the corresponding element. + * + * @param fn The function that returns the value to compare for each element. + * ele - The current element. + * i - The index of the current element. + * eles - The collection of elements being mapped. + * @param thisArg [optional] The value for this within the iterating function. + * + * http://js.cytoscape.org/#eles.max + */ + max( + fn: (ele: TIn, i: number, eles: CollectionArgument) => T, + thisArg?: any, + ): { + /** + * The minimum value found. + */ + value: T; + /** + * The element that corresponds to the minimum value. + */ + ele: SingularElementReturnValue; + }; + } + + /** + * http://js.cytoscape.org/#collection/traversing + */ + + type MinumumSpanningTree = any; + + interface CollectionTraversing { + // http://js.cytoscape.org/#collection/traversing + + /** + * Get the open neighbourhood of the elements. + * + * The neighbourhood returned by this function is a bit different than the traditional definition of a "neighbourhood": + * This returned neighbourhood includes the edges connecting the collection to the neighbourhood. This gives you more flexibility. + * An open neighbourhood is one that does not include the original set of elements. If unspecified, a neighbourhood is open by default. + * + * @param selector [optional] An optional selector that is used to filter the resultant collection. + */ + neighborhood(selector?: Selector): CollectionReturnValue; + + /** + * Get the open neighbourhood of the elements. + * + * The neighbourhood returned by this function is a bit different than the traditional definition of a "neighbourhood": + * This returned neighbourhood includes the edges connecting the collection to the neighbourhood. This gives you more flexibility. + * An open neighbourhood is one that does not include the original set of elements. If unspecified, a neighbourhood is open by default. + * + * @param selector [optional] An optional selector that is used to filter the resultant collection. + */ + openNeighborhood(selector?: Selector): CollectionReturnValue; + /** + * Get the closed neighbourhood of the elements. + * + * The neighbourhood returned by this function is a bit different than the traditional definition of a "neighbourhood": + * This returned neighbourhood includes the edges connecting the collection to the neighbourhood. This gives you more flexibility. + * A closed neighbourhood is one that does include the original set of elements. + * + * @param selector [optional] An optional selector that is used to filter the resultant collection. + */ + closedNeighborhood(selector?: Selector): CollectionReturnValue; + + /** + * Get the connected components, considering only the elements in the calling collection. + * An array of collections is returned, with each collection representing a component. + */ + components(): CollectionReturnValue[]; + + /** + * Get the connected components to which the passed elements belong. + * The components consider only the subgraph made by the elements in the calling collection. + * An array of collections is returned, with each collection representing a component. + * http://js.cytoscape.org/#eles.componentsOf + * @param root The components that contain these elements are returned. + */ + componentsOf(root: Selector): CollectionReturnValue[]; + } + /** + * http://js.cytoscape.org/#collection/edge-points + */ + interface EdgeSingularPoints { + /** + * Get an array of control point model positions for a {@code curve-style: bezier) or {@code curve-style: unbundled-bezier} edge. + * + * While the control points may be specified relatively in the CSS, + * this function returns the absolute model positions of the control points. + * The points are specified in the order of source-to-target direction. + * This function works for bundled beziers, but it is not applicable to the middle, straight-line edge in the bundle. + */ + controlPoints(): Position[]; + /** + * Get the control points in rendered coordinates. + * http://js.cytoscape.org/#edge.renderedControlPoints + */ + renderedControlPoints(): Position[]; + + /** + * Get an array of segment point model positions (i.e. bend points) for a {@code curve-style: segments} edge. + * + * While the segment points may be specified relatively in the stylesheet, + * this function returns the absolute model positions of the segment points. + * The points are specified in the order of source-to-target direction. + */ + segmentPoints(): Position[]; + /** + * Get the segment points in rendered coordinates. + * http://js.cytoscape.org/#edge.renderedSegmentPoints + */ + renderedSegmentPoints(): Position[]; + + /** + * Get the model position of where the edge ends, towards the source node. + */ + sourceEndpoint(): Position; + /** + * Get the source endpoint in rendered coordinates. + * http://js.cytoscape.org/#edge.renderedSourceEndpoint + */ + renderedSourceEndpoint(): Position; + + /** + * Get the model position of where the edge ends, towards the target node. + */ + targetEndpoint(): Position; + /** + * Get the target endpoint in rendered coordinates. + * http://js.cytoscape.org/#edge.renderedTargetEndpoint + */ + renderedTargetEndpoint(): Position; + + /** + * Get the model position of the midpoint of the edge. + * + * The midpoint is, by default, where the edge’s label is centred. It is also the position towards which mid arrows point. + * For curve-style: unbundled-bezier edges, the midpoint is the middle extremum if the number of control points is odd. + * For an even number of control points, the midpoint is where the two middle-most control points meet. + * This is the middle inflection point for bilaterally symmetric or skew symmetric edges, for example. + * For curve-style: segments edges, the midpoint is the middle segment point if the number of segment points is odd. + * For an even number of segment points, the overall midpoint is the midpoint of the middle-most line segment (i.e. the mean of the middle two segment points). + */ + midpoint(): Position; + /** + * Get the midpoint in rendered coordinates. + * http://js.cytoscape.org/#edge.renderedMidpoint + */ + renderedMidpoint(): Position; + } + interface EdgeSingularTraversing { + /** + * Get source node of this edge. + * @param selector An optional selector that is used to filter the resultant collection. + * http://js.cytoscape.org/#edge.source + */ + source(selector?: Selector): NodeSingular; + + /** + * Get target node of this edge. + * @param selector An optional selector that is used to filter the resultant collection. + * http://js.cytoscape.org/#edge.target + */ + target(selector?: Selector): NodeSingular; + } + interface EdgeCollectionTraversing { + // http://js.cytoscape.org/#collection/traversing + + /** + * Get the nodes connected to the edges in the collection + * + * @param selector [optional] An optional selector that is used to filter the resultant collection. + */ + connectedNodes(selector?: Selector): NodeCollection; + + /** + * Get source nodes connected to the edges in the collection. + * + * @param selector [optional] An optional selector that is used to filter the resultant collection. + */ + sources(selector?: Selector): NodeCollection; + + /** + * Get target nodes connected to the edges in the collection. + * + * @param selector [optional] An optional selector that is used to filter the resultant collection. + */ + targets(selector?: Selector): NodeCollection; + + /** + * Get edges parallel to those in the collection. + * + * Two edges are said to be parallel if they connect the same two nodes. + * Any two parallel edges may connect nodes in the same direction, in which case the edges share the same source and target. + * They may alternatively connect nodes in the opposite direction, in which case the source and target are reversed in the second edge. + * That is: + * - edge1.source().id() === edge2.source().id() + * && edge1.target().id() === edge2.target().id() + * OR + * - edge1.source().id() === edge2.target().id() + * && edge1.target().id() === edge2.source().id() + * + * @param selector [optional] An optional selector that is used to filter the resultant collection. + */ + parallelEdges(selector?: Selector): EdgeCollection; + + /** + * Get edges codirected to those in the collection. + * + * Two edges are said to be codirected if they connect the same two nodes in the same direction: The edges have the same source and target. + * That is: + * - edge1.source().id() === edge2.source().id() + * && edge1.target().id() === edge2.target().id() + * + * @param selector [optional] An optional selector that is used to filter the resultant collection. + */ + codirectedEdges(selector?: Selector): EdgeCollection; + } + interface NodeCollectionTraversing { + // http://js.cytoscape.org/#collection/traversing + + /** + * Get the edges connecting the collection to another collection. Direction of the edges does not matter. + * + * @param eles The other collection. + * @param selector The other collection, specified as a selector which is matched against all elements in the graph. + */ + edgesWith(eles: CollectionArgument | Selector): EdgeCollection; + + /** + * Get the edges coming from the collection (i.e. the source) going to another collection (i.e. the target). + * + * @param eles The other collection. + * @param selector The other collection, specified as a selector which is matched against all elements in the graph. + */ + edgesTo(eles: CollectionArgument | Selector): EdgeCollection; + + /** + * Get the edges connected to the nodes in the collection. + * + * @param selector [optional] An optional selector that is used to filter the resultant collection. + */ + connectedEdges(selector?: Selector): EdgeCollection; + + /** + * From the set of calling nodes, get the nodes which are roots (i.e. no incoming edges, as in a directed acyclic graph). + * + * @param selector [optional] An optional selector that is used to filter the resultant collection. + */ + roots(selector?: Selector): NodeCollection; + + /** + * From the set of calling nodes, get the nodes which are leaves (i.e. no outgoing edges, as in a directed acyclic graph). + * + * @param selector [optional] An optional selector that is used to filter the resultant collection. + */ + leaves(selector?: Selector): NodeCollection; + + /** + * Get edges (and their targets) coming out of the nodes in the collection. + * + * @param selector [optional] An optional selector that is used to filter the resultant collection. + */ + outgoers(selector?: Selector): CollectionReturnValue; + + /** + * Recursively get edges (and their targets) coming out of the nodes in the collection (i.e. the outgoers, the outgoers' outgoers, ...). + * + * @param selector [optional] An optional selector that is used to filter the resultant collection. + */ + successors(selector?: Selector): CollectionReturnValue; + + /** + * Get edges (and their sources) coming into the nodes in the collection. + * + * @param selector [optional] An optional selector that is used to filter the resultant collection. + */ + incomers(selector?: Selector): CollectionReturnValue; + + /** + * Recursively get edges (and their sources) coming into the nodes in the collection (i.e. the incomers, the incomers' incomers, ...). + * + * @param selector [optional] An optional selector that is used to filter the resultant collection. + */ + predecessors(selector?: Selector): CollectionReturnValue; + } + + /** + * http://js.cytoscape.org/#collection/algorithms + */ + + type WeightFn = (edge: EdgeCollection) => number; + + /** + * The handler returns true when it finds the desired node, and it returns false to cancel the search. + * v - The current node. + * e - The edge connecting the previous node to the current node. + * u - The previous node. + * i - The index indicating this node is the ith visited node. + * depth - How many edge hops away this node is from the root nodes. + */ + type SearchVisitFunction = ( + v: NodeSingular, + e: EdgeSingular, + u: NodeSingular, + i: number, + depth: number, + // eslint-disable-next-line @typescript-eslint/no-invalid-void-type + ) => boolean | void; + interface SearchFirstOptionsBase { + /** + * A handler function that is called when a node is visited in the search. + */ + visit?: SearchVisitFunction; + /** + * A boolean indicating whether the algorithm should only go along edges from source to target (default false). + */ + directed?: boolean; + } + interface SearchFirstOptions1 extends SearchFirstOptionsBase { + /** + * The root nodes (selector or collection) to start the search from. + */ + root: Selector | CollectionArgument; + } + interface SearchFirstOptions2 extends SearchFirstOptionsBase { + /** + * The root nodes (selector or collection) to start the search from. + */ + roots: Selector | CollectionArgument; + } + type SearchFirstOptions = SearchFirstOptions1 | SearchFirstOptions2; + interface SearchFirstResult { + /** + * The path of the search. + * - The path returned includes edges such that if path[i] is a node, then path[i - 1] is the edge used to get to that node. + */ + path: CollectionArgument; + /** + * The node found by the search + * - If no node was found, then found is empty. + * - If your handler function returns false, then the only the path up to that point is returned. + */ + found: NodeCollection; + } + + /** + * http://js.cytoscape.org/#eles.dijkstra + */ + interface SearchDijkstraOptions { + /** + * The root node (selector or collection) where the algorithm starts. + */ + root: Selector | CollectionArgument; + + /** + * A function that returns the positive numeric weight for this edge. + * + * If no weight function is defined, a constant weight of 1 is used for each edge. + */ + weight?: WeightFn; + + /** + * A boolean indicating whether the algorithm should only go along edges from source to target (default false). + */ + directed?: boolean; + } + /** + * http://js.cytoscape.org/#eles.dijkstra + */ + interface SearchDijkstraResult { + /** + * Returns the distance from the source node to node. + */ + distanceTo(node: NodeSingular): number; + + /** + * Returns a collection containing the shortest path from the source node to node. + * The path starts with the source node and includes the edges between the nodes in the path such that if pathTo(node)[i] is an edge, + * then pathTo(node)[i-1] is the previous node in the path and pathTo(node)[i+1] is the next node in the path. + */ + pathTo(node: NodeSingular): CollectionReturnValue; + } + /** + * http://js.cytoscape.org/#eles.aStar + */ + interface SearchAStarOptions { + root: Selector | CollectionArgument; + goal: Selector | CollectionArgument; + weight?: WeightFn; + heuristic?(node: NodeCollection): number; + directed?: boolean; + } + /** + * http://js.cytoscape.org/#eles.aStar + */ + interface SearchAStarResult { + found: boolean; + distance: number; + path: CollectionReturnValue; + } + + /** + * http://js.cytoscape.org/#eles.floydWarshall + */ + interface SearchFloydWarshallOptions { + weight: WeightFn; + directed?: boolean; + } + + /** + * http://js.cytoscape.org/#eles.floydWarshall + */ + interface SearchFloydWarshallResult { + /** + * Returns the distance from the source node to node. + */ + distance(fromNode: NodeSingular | CollectionSelection, toNode: NodeSingular | Selector): number; + + /** + * Returns a collection containing the shortest path from the source node to node. + * The path starts with the source node and includes the edges + * between the nodes in the path such that if pathTo(node)[i] is an edge, + * then pathTo(node)[i-1] is the previous node in the path and pathTo(node)[i+1] + * is the next node in the path. + */ + path(fromNode: NodeSingular | CollectionSelection, toNode: NodeSingular | Selector): CollectionReturnValue; + } + + /** + * http://js.cytoscape.org/#eles.bellmanFord + */ + interface SearchBellmanFordOptions { + /** + * The root node (selector or collection) where the search starts. + */ + root: any; + /** + * A function that returns the positive numeric weight for this edge. + */ + weight?: WeightFn; + /** + * Indicating whether the algorithm should only go along + * edges from source to target (default false). + */ + directed: boolean; + /** + * Indicating whether the algorithm should find and return + * negative weight cycles (default true). + */ + findNegativeWeightCycles?: boolean; + } + /** + * http://js.cytoscape.org/#eles.bellmanFord + */ + interface SearchBellmanFordResult { + /** + * function that computes the shortest path from root node to the argument node + * (either objects or selector string) + */ + pathTo(node: NodeSingular | Selector): CollectionReturnValue; + + /** + * function that computes the shortest distance from root node to argument node + * (either objects or selector string) + */ + distanceTo(node: NodeSingular | Selector): number; + + /* true/false. If true, pathTo and distanceTo will be undefined */ + hasNegativeWeightCycle: boolean; + + /** + * array of collections corresponding to the negative weight cycles found + * (only populated if the findNegativeWeightCycles option is set to true) + */ + negativeWeightCycles: CollectionReturnValue[]; + } + + /** + * http://js.cytoscape.org/#eles.kruskal + * trivial so implemented in the function + */ + + /** + * http://js.cytoscape.org/#eles.pageRank + */ + interface SearchPageRankOptions { + /** Numeric parameter for the algorithm. */ + dampingFactor?: number; + /** Numeric parameter that represents the required precision. */ + precision?: number; + /** Maximum number of iterations to perform. */ + iterations?: number; + } + /** + * http://js.cytoscape.org/#eles.pageRank + */ + interface SearchPageRankResult { + /** function that computes the rank of a given node (either object or selector string) */ + rank(node: NodeCollection): number; + } + + /** + * http://js.cytoscape.org/#eles.degreeCentrality + */ + interface SearchDegreeCentralityOptions { + /** + * The root node (selector or collection) for which the + * centrality calculation is made. + */ + root: NodeSingular | Selector; + /** A function that returns the weight for the edge. */ + weight?(edge: EdgeSingular): number; + /** + * The alpha value for the centrality calculation, ranging on [0, 1]. + * With value 0 (default), disregards edge weights and solely uses + * number of edges in the centrality calculation. With value 1, + * disregards number of edges and solely uses the edge weights + * in the centrality calculation. + */ + alpha?: number; + /** + * Whether the directed indegree and outdegree centrality is calculated (true) or + * whether the undirected centrality is calculated (false, default). + */ + directed?: boolean; + } + /** + * http://js.cytoscape.org/#eles.degreeCentrality + */ + interface SearchDegreeCentralityResultUndirected { + /** the degree centrality of the root node */ + degree: number; + } + interface SearchDegreeCentralityResultDirected { + /* the indegree centrality of the root node */ + indegree: number; + /* the outdegree centrality of the root node */ + outdegree: number; + } + /** + * http://js.cytoscape.org/#eles.degreeCentralityNormalized + */ + interface SearchDegreeCentralityNormalizedOptions { + /** A function that returns the weight for the edge. */ + weight(edge: EdgeSingular): number; + /** + * The alpha value for the centrality calculation, ranging on [0, 1]. + * With value 0 (default), disregards edge weights and solely uses + * number of edges in the centrality calculation. With value 1, + * disregards number of edges and solely uses the edge weights + * in the centrality calculation. + */ + alpha?: number; + /** + * A boolean indicating whether the directed indegree and outdegree centrality is calculated (true) or + * whether the undirected centrality is calculated (false, default). + */ + directed?: boolean; + } + /** + * http://js.cytoscape.org/#eles.degreeCentralityNormalized + */ + interface SearchDegreeCentralityNormalizedResultUndirected { + /** the normalised degree centrality of the specified node */ + degree(node: NodeSingular): any; + } + interface SearchDegreeCentralityNormalizedResultDirected { + /** the normalised indegree centrality of the specified node */ + indegree(node: NodeSingular): any; + + /** the normalised outdegree centrality of the specified node */ + outdegree(node: NodeSingular): any; + } + /** + * http://js.cytoscape.org/#eles.closenessCentrality + */ + interface SearchClosenessCentralityOptions { + /** + * The root node (selector or collection) for which the + * centrality calculation is made. + */ + root: NodeSingular | Selector; + /** A function that returns the weight for the edge. */ + weight?(edge: EdgeSingular): number; + + /** + * A boolean indicating whether the directed indegree and outdegree centrality is calculated (true) or + * whether the undirected centrality is calculated (false, default). + */ + directed?: boolean; + /** + * A boolean indicating whether the algorithm calculates the + * harmonic mean (true, default) or the arithmetic mean (false) of distances. + * The harmonic mean is very useful for graphs that are not strongly connected. + */ + harmonic?: boolean; + } + /** + * http://js.cytoscape.org/#eles.closenessCentrality + * trivial + */ + + /** + * http://js.cytoscape.org/#eles.closenessCentralityNormalized + */ + interface SearchClosenessCentralityNormalizedOptions { + /** A function that returns the weight for the edge. */ + weight?(edge: EdgeSingular): number; + directed?: boolean; + /** + * A boolean indicating whether the algorithm calculates the + * harmonic mean (true, default) or the arithmetic mean (false) of distances. + * The harmonic mean is very useful for graphs that are not strongly connected. + */ + harmonic?: boolean; + } + /** + * http://js.cytoscape.org/#eles.closenessCentralityNormalized + */ + interface SearchClosenessCentralityNormalizedResult { + /** the normalised closeness centrality of the specified node */ + closeness(node: NodeSingular): any; + } + + /** + * http://js.cytoscape.org/#eles.betweennessCentrality + */ + interface SearchBetweennessOptions { + /** A function that returns the weight for the edge. */ + weight?(edge: EdgeSingular): number; + + /** + * A boolean indicating whether the directed indegree and outdegree centrality is calculated (true) or + * whether the undirected centrality is calculated (false, default). + */ + directed?: boolean; + } + /** + * http://js.cytoscape.org/#eles.betweennessCentrality + */ + interface SearchBetweennessResult { + /** returns the betweenness centrality of the specified node */ + betweenness(node: NodeSingular): number; + + /** returns the normalised betweenness centrality of the specified node */ + betweennessNormalized(node: NodeSingular): number; + betweennessNormalised(node: NodeSingular): number; + } + + /** + * http://js.cytoscape.org/#eles.closenessCentralityNormalized + */ + interface SearchClosenessCentralityNormalizedOptions { + /** A function that returns the weight for the edge. */ + weight?(edge: EdgeSingular): number; + directed?: boolean; + /** + * A boolean indicating whether the algorithm calculates the + * harmonic mean (true, default) or the arithmetic mean (false) of distances. + * The harmonic mean is very useful for graphs that are not strongly connected. + */ + harmonic?: boolean; + } + /** + * http://js.cytoscape.org/#eles.closenessCentralityNormalized + * trivial + */ + + /** + * Options for hierarchical clustering. + */ + interface HierarchicalClusteringOptions { + attributes?: ((node: NodeSingular) => number)[]; + distance?: "euclidean" | "squaredEuclidean" | "manhattan" | "max" | ((length: number, getPAt: (i: number) => number, getQAt: (i: number) => number, nodeP?: NodeSingular, nodeQ?: NodeSingular) => number) | ((nodeP: NodeSingular, nodeQ: NodeSingular) => number); + linkage?: "mean" | "min" | "max"; + mode?: "threshold" | "dendrogram"; + threshold?: number; + dendrogramDepth?: number; + addDendrogram?: boolean; + } + + /** + * Result of hierarchical clustering. + */ + interface HierarchicalClusteringResult { + clusters: NodeCollection[]; + dendrogram?: CollectionReturnValue; + } + + /** + * Options for Markov clustering. + */ + interface MarkovClusteringOptions { + attributes?: ((edge: EdgeSingular) => number)[]; + expandFactor?: number; + inflateFactor?: number; + multFactor?: number; + maxIterations?: number; + } + + /** + * Result of Markov clustering. + */ + type MarkovClusteringResult = NodeCollection[]; + + /** + * Options for k-means clustering. + */ + interface KMeansOptions { + attributes: ((node: NodeSingular) => number)[]; + k: number; + distance?: "euclidean" | "squaredEuclidean" | "manhattan" | "max" | ((length: number, getPAt: (i: number) => number, getQAt: (i: number) => number, nodeP?: NodeSingular, nodeQ?: NodeSingular) => number); + maxIterations?: number; + sensitivityThreshold?: number; + } + + /** + * Result of k-means clustering. + */ + type KMeansResult = NodeCollection[]; + + /** + * Options for k-medoids clustering. + */ + interface KMedoidsOptions { + attributes: ((node: NodeSingular) => number)[]; + k: number; + distance?: "euclidean" | "squaredEuclidean" | "manhattan" | "max" | ((length: number, getPAt: (i: number) => number, getQAt: (i: number) => number, nodeP?: NodeSingular, nodeQ?: NodeSingular) => number) | ((nodeP: NodeSingular, nodeQ: NodeSingular) => number); + maxIterations?: number; + } + + /** + * Result of k-medoids clustering. + */ + type KMedoidsResult = NodeCollection[]; + + /** + * Options for fuzzy c-means clustering. + */ + interface FuzzyCMeansOptions { + attributes: ((node: NodeSingular) => number)[]; + k: number; + distance?: "euclidean" | "squaredEuclidean" | "manhattan" | "max" | ((length: number, getPAt: (i: number) => number, getQAt: (i: number) => number, nodeP?: NodeSingular, nodeQ?: NodeSingular) => number); + maxIterations?: number; + sensitivityThreshold?: number; + } + + /** + * Result of fuzzy c-means clustering. + */ + interface FuzzyCMeansResult { + clusters: NodeCollection[]; + degreeOfMembership: number[][]; + } + + /** + * Options for affinity propagation clustering. + */ + interface AffinityPropagationOptions { + attributes: ((node: NodeSingular) => number)[]; + distance?: "euclidean" | "squaredEuclidean" | "manhattan" | "max" | ((length: number, getPAt: (i: number) => number, getQAt: (i: number) => number, nodeP?: NodeSingular, nodeQ?: NodeSingular) => number) | ((nodeP: NodeSingular, nodeQ: NodeSingular) => number); + preference?: "median" | "mean" | "min" | "max" | number; + damping?: number; + minIterations?: number; + maxIterations?: number; + } + + /** + * Result of affinity propagation clustering. + */ + type AffinityPropagationResult = NodeCollection[]; + + /** + * Options for Hierholzer's algorithm. + */ + interface HierholzerOptions { + root?: Selector | NodeCollection; + directed?: boolean; + } + + /** + * Result of Hierholzer's algorithm. + */ + interface HierholzerResult { + found: boolean; + trail: CollectionReturnValue; + } + + interface SearchAlgorithms { + /** + * Perform a breadth-first search within the elements in the collection. + * @param options + * http://js.cytoscape.org/#eles.breadthFirstSearch + * @alias bfs + */ + breadthFirstSearch(options: SearchFirstOptions): SearchFirstResult; + bfs(options: SearchFirstOptions): SearchFirstResult; + + /** + * Perform a depth-first search within the elements in the collection. + * http://js.cytoscape.org/#eles.depthFirstSearch + * @alias dfs + */ + depthFirstSearch(options: SearchFirstOptions): SearchFirstResult; + dfs(options: SearchFirstOptions): SearchFirstResult; + + /** + * Perform Dijkstra's algorithm on the elements in the collection. + * This finds the shortest paths to all other nodes in the collection from the root node. + * http://js.cytoscape.org/#eles.dijkstra + */ + dijkstra(options: SearchDijkstraOptions): SearchDijkstraResult; + + /** + * Perform the A* search algorithm on the elements in the collection. + * This finds the shortest path from the root node to the goal node. + * http://js.cytoscape.org/#eles.aStar + */ + aStar(options: SearchAStarOptions): SearchAStarResult; + + /** + * Perform the Floyd Warshall search algorithm on the elements in the collection. + * This finds the shortest path between all pairs of nodes. + * http://js.cytoscape.org/#eles.floydWarshall + */ + floydWarshall(options: SearchFloydWarshallOptions): SearchFloydWarshallResult; + + /** + * Perform the Bellman-Ford search algorithm on the elements in the collection. + * This finds the shortest path from the starting node to all other nodes in the collection. + * http://js.cytoscape.org/#eles.bellmanFord + */ + bellmanFord(options: SearchBellmanFordOptions): SearchBellmanFordResult; + + /** + * Perform the Hierholzer search algorithm on the elements in the collection. + * This finds Eulerian trails and circuits. + * http://js.cytoscape.org/#eles.hierholzer + */ + hierholzer(options: HierholzerOptions): HierholzerResult; + } + + interface SpanningAlgorithms { + /** + * Perform Kruskal's algorithm on the elements in the collection, + * returning the minimum spanning tree, assuming undirected edges. + * http://js.cytoscape.org/#eles.kruskal + */ + kruskal(handler: (edge: EdgeCollection) => number): CollectionReturnValue; + } + + interface CutAlgorithms { + /** + * Finds the minimum cut in a graph using the Karger-Stein algorithm. + * The optimal result is found with a high probability, but without guarantee. + * http://js.cytoscape.org/#eles.kargerStein + */ + kargerStein(): { + cut: EdgeCollection; + components: CollectionReturnValue; + partitionFirst: NodeCollection; + partitionSecond: NodeCollection; + }; + + /** + * finds the biconnected components in an undirected graph, + * as well as their respective cut vertices, using an algorithm due to Hopcroft and Tarjan. + * http://js.cytoscape.org/#eles.hopcroftTarjanBiconnected + */ + hopcroftTarjanBiconnected(): { cut: NodeCollection; components: CollectionReturnValue }; + /** + * Finds the biconnected components in an undirected graph, + * as well as their respective cut vertices, using an algorithm due to Hopcroft and Tarjan. + * http://js.cytoscape.org/#eles.hopcroftTarjanBiconnected + */ + hopcroftTarjanBiconnectedComponents(): { cut: NodeCollection; components: CollectionReturnValue }; + /** + * Finds the biconnected components in an undirected graph, + * as well as their respective cut vertices, using an algorithm due to Hopcroft and Tarjan. + * http://js.cytoscape.org/#eles.hopcroftTarjanBiconnected + */ + htb(): { cut: NodeCollection; components: CollectionReturnValue }; + /** + * Finds the biconnected components in an undirected graph, + * as well as their respective cut vertices, using an algorithm due to Hopcroft and Tarjan. + * http://js.cytoscape.org/#eles.hopcroftTarjanBiconnected + */ + htbc(): { cut: NodeCollection; components: CollectionReturnValue }; + + /** + * Finds the strongly connected components of a directed graph using Tarjan's algorithm. + * http://js.cytoscape.org/#eles.tarjanStronglyConnected + */ + tarjanStronglyConnected(): { cut: EdgeCollection; components: CollectionReturnValue }; + /** + * Finds the strongly connected components of a directed graph using Tarjan's algorithm. + * http://js.cytoscape.org/#eles.tarjanStronglyConnected + */ + tarjanStronglyConnectedComponents(): { cut: EdgeCollection; components: CollectionReturnValue }; + /** + * Finds the strongly connected components of a directed graph using Tarjan's algorithm. + * http://js.cytoscape.org/#eles.tarjanStronglyConnected + */ + tsc(): { cut: EdgeCollection; components: CollectionReturnValue }; + /** + * Finds the strongly connected components of a directed graph using Tarjan's algorithm. + * http://js.cytoscape.org/#eles.tarjanStronglyConnected + */ + tscc(): { cut: EdgeCollection; components: CollectionReturnValue }; + } + + interface CentralityAlgorithms { + /** + * Considering only the elements in the calling collection, + * calculate the degree centrality of the specified root node. + * http://js.cytoscape.org/#eles.degreeCentrality + */ + degreeCentrality( + options: SearchDegreeCentralityOptions, + ): SearchDegreeCentralityResultDirected | SearchDegreeCentralityResultUndirected; + + /** + * Considering only the elements in the calling collection, + * calculate the normalised degree centrality of the nodes. + * http://js.cytoscape.org/#eles.degreeCentralityNormalized + */ + degreeCentralityNormalized( + options: SearchDegreeCentralityNormalizedOptions, + ): SearchDegreeCentralityNormalizedResultDirected | SearchDegreeCentralityNormalizedResultUndirected; + + /** + * Considering only the elements in the calling collection, + * calculate the closeness centrality of the specified root node. + * http://js.cytoscape.org/#eles.closenessCentrality + */ + closenessCentrality(options: SearchClosenessCentralityOptions): number; + /** + * Considering only the elements in the calling collection, + * calculate the closeness centrality of the nodes. + * http://js.cytoscape.org/#eles.closenessCentralityNormalized + */ + closenessCentralityNormalized( + options: SearchClosenessCentralityNormalizedOptions, + ): SearchClosenessCentralityNormalizedResult; + /** + * Considering only the elements in the calling collection, + * calculate the betweenness centrality of the nodes. + * http://js.cytoscape.org/#eles.betweennessCentrality + */ + betweennessCentrality(options: SearchBetweennessOptions): SearchBetweennessResult; + + /** + * Rank the nodes in the collection using the Page Rank algorithm. + * http://js.cytoscape.org/#eles.pageRank + */ + pageRank(options: SearchPageRankOptions): SearchPageRankResult; + } + + interface ClusteringAlgorithms { + /** + * Considering only the elements in the calling collection, + * run the Markov cluster algorithm of the nodes. + * http://js.cytoscape.org/#eles.markovClustering + */ + markovClustering(options: MarkovClusteringOptions): MarkovClusteringResult; + /** + * Considering only the nodes in the calling collection, + * calculate the k-means clustering of the nodes. + * http://js.cytoscape.org/#nodes.kMeans + */ + kMeans(options: KMeansOptions): KMeansResult; + /** + * Considering only the elements in the calling collection, + * calculate the agglomerative hierarchical clustering of the nodes. + * http://js.cytoscape.org/#nodes.hierarchicalClustering + */ + hierarchicalClustering(options: HierarchicalClusteringOptions): HierarchicalClusteringResult; + + /** + * Considering only the nodes in the calling collection, + * calculate the k-medoids clustering of the nodes. + * http://js.cytoscape.org/#nodes.kMedoids + */ + kMedoids(options: KMedoidsOptions): KMedoidsResult; + + /** + * Considering only the elements in the calling collection, + * calculate the fuzzy c-means clustering of the nodes. + * http://js.cytoscape.org/#nodes.fuzzyCMeans + */ + fuzzyCMeans(options: FuzzyCMeansOptions): FuzzyCMeansResult; + + /** + * Considering only the elements in the calling collection, + * calculate the affinity propagation clustering of the nodes. + * http://js.cytoscape.org/#nodes.affinityPropagation + */ + affinityPropagation(options: AffinityPropagationOptions): AffinityPropagationResult; + } + + interface CollectionAlgorithms extends SearchAlgorithms, SpanningAlgorithms, CutAlgorithms, CentralityAlgorithms, ClusteringAlgorithms {} + + /** + * http://js.cytoscape.org/#collection/compound-nodes + */ + interface NodeSingularCompound { + /** + * Get whether the node is a compound parent + * (i.e. a node containing one or more child nodes) + * http://js.cytoscape.org/#node.isParent + */ + isParent(): boolean; + /** + * Get whether the node is childless (i.e. a node with no child nodes) + * http://js.cytoscape.org/#node.isChildless + */ + isChildless(): boolean; + /** + * Get whether the node is a compound child (i.e. contained within a node) + * http://js.cytoscape.org/#node.isChild + */ + isChild(): boolean; + /** + * Get whether the node is an orphan (i.e. a node with no parent) + * http://js.cytoscape.org/#node.isOrphan + */ + isOrphan(): boolean; + } + /** + * http://js.cytoscape.org/#collection/compound-nodes + */ + interface NodeCollectionCompound { + /** + * Get the compound parent node of each node in the collection. + * @param selector A selector used to filter the resultant collection. + * http://js.cytoscape.org/#nodes.parent + */ + parent(selector?: Selector): NodeCollection; + /** + * Get all compound ancestor nodes + * (i.e. parents, parents' parents, etc.) of each node in the collection. + * @param selector A selector used to filter the resultant collection. + * http://js.cytoscape.org/#nodes.ancestors + */ + ancestors(selector?: Selector): NodeCollection; + parents(selector?: Selector): NodeCollection; + /** + * Get all compound ancestors common to all the nodes in the collection, + * starting with the closest and getting progressively farther. + * @param selector A selector used to filter the resultant collection. + * http://js.cytoscape.org/#nodes.commonAncestors + */ + commonAncestors(selector?: Selector): NodeCollection; + /** + * Get all orphan (i.e. has no compound parent) nodes in the calling collection. + * @param selector A selector used to filter the resultant collection. + * http://js.cytoscape.org/#nodes.orphans + */ + orphans(selector?: Selector): NodeCollection; + /** + * Get all nonorphan (i.e. has a compound parent) nodes in the calling collection. + * @param selector A selector used to filter the resultant collection. + * http://js.cytoscape.org/#nodes.nonorphans + */ + nonorphans(selector?: Selector): NodeCollection; + /** + * Get all compound child (i.e. direct descendant) nodes of each node in the collection. + * @param selector A selector used to filter the resultant collection. + * http://js.cytoscape.org/#nodes.children + */ + children(selector?: Selector): NodeCollection; + /** + * Get all compound descendant (i.e. children, children's children, etc.) + * nodes of each node in the collection. + * @param selector A selector used to filter the resultant collection. + * http://js.cytoscape.org/#nodes.descendants + */ + descendants(selector?: Selector): NodeCollection; + /** + * Get all sibling (i.e. same compound parent) + * nodes of each node in the collection. + * @param selector A selector used to filter the resultant collection. + * http://js.cytoscape.org/#nodes.siblings + */ + siblings(selector?: Selector): NodeCollection; + } + + /** + * A selector functions similar to a CSS selector on DOM elements, + * but selectors in Cytoscape.js instead work on + * collections of graph elements. + * Note that wherever a selector may be specified + * as the argument to a function, + * a eles.filter()-style filter function may be + * used in place of the selector. + * + * See http://js.cytoscape.org/#selectors for + * details about writing selectors. + * Selectors are an island grammar. + */ + type Selector = string; + + /** + * A space separated list of event names. + * http://js.cytoscape.org/#cy.promiseOn + */ + type EventNames = string; + + /** + * A string indicating the selection behaviour from user input. + * http://js.cytoscape.org/#core/initialisation + * + * 'additive' : a new selection made by the user adds to the set of currently selected elements. + * 'single' : a new selection made by the user becomes the entire set of currently + * selected elements (i.e. the previous elements are unselected) + */ + type SelectionType = "additive" | "single"; + + /** + * http://js.cytoscape.org/#ele.group + * http://js.cytoscape.org/#notation/elements-json + * + * 'nodes' + * 'edges' + */ + type ElementGroup = "nodes" | "edges"; + + /** + * 'x' : x coordinate + * 'y' : y coordinate + */ + type PositionDimension = "x" | "y"; + + /** + * Usually temp or nonserialisable data can be stored. + * http://js.cytoscape.org/#notation/elements-json + * http://js.cytoscape.org/#cy.scratch + * http://js.cytoscape.org/#ele.scratch + */ + type Scratchpad = any; + + /** + * Style in Cytoscape.js follows CSS conventions as closely as possible. + * In most cases, a property has the same name and behaviour as its corresponding CSS namesake. + * However, the properties in CSS are not sufficient to specify the style of some parts of the graph. + * In that case, additional properties are introduced that are unique to Cytoscape.js. + * + * For simplicity and ease of use, specificity rules are completely ignored in stylesheets. + * For a given style property for a given element, the last matching selector wins. + * + * http://js.cytoscape.org/#style + */ + namespace Css { + type Colour = string; + + /** + * In addition to specifying the value of a property outright, the developer may also use a mapper to dynamically specify the property value. + * - data() + * - mapData() + * - function( ele ){ ... } + * https://js.cytoscape.org/#style/mappers + */ + type MapperFunction = (ele: Element) => Type; + + type PropertyValue = + | Type + | MapperFunction; + type PropertyValueNode = PropertyValue; + type PropertyValueEdge = PropertyValue; + type PropertyValueCore = PropertyValue; + + /** + * The shape of the node’s body. + * Note that each shape fits within the specified width and height, + * and so you may have to adjust width and height + * if you desire an equilateral shape + * (i.e. width !== height for several equilateral shapes). + * 'polygon' is a custom polygon specified via shape-polygon-points. + */ + type NodeShape = + | "rectangle" + | "roundrectangle" + | "ellipse" + | "triangle" + | "pentagon" + | "hexagon" + | "heptagon" + | "octagon" + | "star" + | "barrel" + | "diamond" + | "vee" + | "rhomboid" + | "polygon" + | "tag" + | "round-rectangle" + | "round-triangle" + | "round-diamond" + | "round-pentagon" + | "round-hexagon" + | "round-heptagon" + | "round-octagon" + | "round-tag" + | "cut-rectangle" + | "bottom-round-rectangle" + | "concave-hexagon"; + + /** + * A space-separated list of numbers ranging on [-1, 1], + * representing alternating x and y values (i.e. x1 y1 x2 y2, x3 y3 ...). + * This represents the points in the polygon for the node’s shape. + * The bounding box of the node is given by (-1, -1), (1, -1), (1, 1), (-1, 1). + */ + type ShapePolygonPoints = string; + + /** + * The line style; may be solid, dotted, dashed, or double + */ + type LineStyle = "solid" | "dotted" | "dashed" | "double"; + + /** + * http://js.cytoscape.org/#style/node-body + */ + interface Node + extends + Partial, + Partial, + Partial, + PaddingNode, + Partial, + Partial>, + BackgroundImage, + Partial, + Partial>, + Partial, + Partial>, + Partial + { + /** + * The CSS content field + */ + content?: PropertyValueNode; + /** + * The width of the node’s body. + * This property can take on the special value label + * so the width is automatically based on the node’s label. + */ + width?: PropertyValueNode; + /** + * The height of the node’s body. + * This property can take on the special value label + * so the height is automatically based on the node’s label. + */ + height?: PropertyValueNode; + /** + * The shape of the node’s body. + */ + shape?: PropertyValueNode; + "shape-polygon-points"?: PropertyValueNode; + backgroundColor?: PropertyValueNode; + /** + * The colour of the node’s body. + */ + "background-color"?: PropertyValueNode; + /** + * Blackens the node’s body for values from 0 to 1; + * whitens the node’s body for values from 0 to -1. + */ + "background-blacken"?: PropertyValueNode; + /** + * The opacity level of the node’s background colour. + */ + "background-opacity"?: PropertyValueNode; + /** + * The filling style of the node’s body; may be solid (default), linear-gradient, or radial-gradient. + */ + "background-fill"?: PropertyValueNode<"solid" | "linear-gradient" | "radial-gradient">; + /** + * The size of the node’s border. + */ + "background-gradient-direction"?: PropertyValueNode; + /** + * The colors to use at each stop in the gradient for the node’s background; may be specified as a space-separated list or an array. + */ + "background-stop-colors"?: PropertyValueNode; + /** + * The positions of each stop in the gradient for the node’s background; may be specified as a space-separated list or an array. + */ + "background-stop-positions"?: PropertyValueNode; + "border-width"?: PropertyValueNode; + /** + * The style of the node’s border. + */ + "border-style"?: PropertyValueNode; + /** + * The colour of the node’s border. + */ + "border-color"?: PropertyValueNode; + /** + * The opacity of the node’s border. + * A value between [0 1]. + */ + "border-opacity"?: PropertyValueNode; + /** + * The position of the node’s border. + * One of: center, inside, outside. + */ + /** + * The cap style of the node’s border; may be butt, round or square. + */ + "border-cap"?: PropertyValueNode<"butt" | "round" | "square">; + /** + * The join style of the node’s border; may be miter, bevel or round. + */ + "border-join"?: PropertyValueNode<"miter" | "bevel" | "round">; + /** + * The dashed line pattern which specifies alternating lengths of lines and gaps. (e.g. [6, 3]). + */ + "border-dash-pattern"?: PropertyValueNode; + /** + * The dashed line offset (e.g. 24). It is useful for creating edge animations. + */ + "border-dash-offset"?: PropertyValueNode; + /** + * The position of the node’s border; may be center, inside, outside. + */ + "border-position"?: PropertyValueNode<"center" | "inside" | "outside">; + /** + * The corner radius for round shapes and the cut-rectangle, in px or em. + */ + "corner-radius"?: PropertyValueNode; + } + + /** + * A padding defines an addition to a node’s dimension. For example, + * padding adds to a node’s outer (i.e. total) width and height. + * This can beused to add spacing between a compound node parent + * and its children. + */ + interface PaddingNode { + /** + * The amount of padding around all sides of the node. Either percentage or pixel value can be specified. + * For example, both `50%` and `50px` are acceptable values. By default, percentage padding is calculated as a percentage of node width. + */ + "padding"?: PropertyValueNode; + /** + * Determines how padding is calculated if and only if the percentage unit is used. Accepts one of the keywords specified below. + * - `width`: calculate padding as a percentage of the node width. + * - `height`: calculate padding as a percentage of the node height. + * - `average`: calculate padding as a percentage of the average of the node width and height. + * - `min`: calculate padding as a percentage of the minimum of the node width and height. + * - `max`: calculate padding as a percentage of the maximum of the node width and height. + */ + "padding-relative-to"?: PropertyValueNode<"width" | "height" | "average" | "min" | "max">; + } + + interface CompoundParentSizing { + /** + * Whether to include labels of descendants in sizing a compound node; may be include or exclude. + */ + "compound-sizing-wrt-labels"?: PropertyValueNode<"include" | "exclude">; + /** + * Specifies the minimum (inner) width of the node’s body for a compound parent node (e.g. 400px). + */ + "min-width"?: PropertyValueNode; + /** + * When a compound node is enlarged by its min-width, this value specifies the percent of the extra width put on the left side of the node (e.g. 50%). + */ + "min-width-bias-left"?: PropertyValueNode; + /** + * When a compound node is enlarged by its min-width, this value specifies the percent of the extra width put on the right side of the node (e.g. 50%). + */ + "min-width-bias-right"?: PropertyValueNode; + /** + * Specifies the minimum (inner) height of the node’s body for a compound parent node (e.g. 400px). + */ + "min-height"?: PropertyValueNode; + /** + * When a compound node is enlarged by its min-height, this value specifies the percent of the extra width put on the top side of the node (e.g. 50%). + */ + "min-height-bias-top"?: PropertyValueNode; + } + + interface Outline { + /** + * The size of the node’s outline. + */ + "outline-width"?: PropertyValueNode; + /** + * The style of the node’s outline; may be solid, dotted, dashed, or double. + */ + "outline-style"?: PropertyValueNode; + /** + * The colour of the node’s outline. + */ + "outline-color"?: PropertyValueNode; + /** + * The opacity of the node’s outline. + */ + "outline-opacity"?: PropertyValueNode; + /** + * The offset of the node’s outline. + */ + "outline-offset"?: PropertyValueNode; + } + + interface Dictionary { + [key: string]: any; + } + + // export interface ElementCss extends CSSStyleDeclaration { } + /** + * A background image may be applied to a node’s body: + * + * http://js.cytoscape.org/#style/background-image + */ + interface BackgroundImage { + /** + * The URL that points to the image that should be used as the node’s background. + * PNG, JPG, and SVG are supported formats. + * You may use a data URI to use embedded images, + * thereby saving a HTTP request. + */ + "background-image"?: PropertyValueNode | PropertyValueNode; + /** + * All images are loaded with a crossorigin attribute which may be `anonymous` or + * `use-credentials`. + * + * The default is set to `anonymous`. + */ + "background-image-crossorigin"?: + | PropertyValueNode<"anonymous" | "use-credentials"> + | PropertyValueNode>; + /** + * The opacity of the background image. [0 1] + */ + "background-image-opacity"?: PropertyValueNode | PropertyValueNode; + /** + * Determines whether background image is smoothed (`yes`, default) or not (`no`). + * This is only a hint, and the browser may or may not respect the + * value set for this property. + */ + "background-image-smoothing"?: PropertyValueNode<"yes" | "no"> | PropertyValueNode>; + /** + * Determines whether background image is within (`inside`) + * or over top of the node (`over`). + * + * The default is set to `inside`. + */ + "background-image-containment"?: + | PropertyValueNode<"inside" | "over"> + | PropertyValueNode>; + /** + * Specifies the width of the image. + * A percent value (e.g. 50%) may be used to set + * the image width relative to the node width. + * If used in combination with background- fit, + * then this value overrides the width of the image + * in calculating the fitting — thereby overriding the aspect ratio. + * The auto value is used by default, which uses the width of the image. + */ + "background-width"?: + | PropertyValueNode + | PropertyValueNode> + ; + /** + * Specifies the height of the image. + * A percent value (e.g. 50%) may be used to set the image + * height relative to the node height. + * If used in combination with background- fit, + * then this value overrides the height of the image in calculating + * the fitting — thereby overriding the aspect ratio. + * The auto value is used by default, which uses the height of the image. + */ + "background-height"?: + | PropertyValueNode + | PropertyValueNode> + ; + /** + * How the background image is fit to the node; + * may be none for original size, + * contain to fit inside node, + * or cover to cover the node. + */ + "background-fit"?: + | PropertyValueNode<"none" | "contain" | "cover"> + | PropertyValueNode> + ; + /** + * Whether to repeat the background image; + * may be no-repeat, repeat-x, repeat-y, or repeat. + */ + "background-repeat"?: + | PropertyValueNode<"no-repeat" | "repeat-x" | "repeat-y" | "repeat"> + | PropertyValueNode> + ; + /** + * The x position of the background image, + * measured in percent(e.g. `'50%'`) or pixels (e.g. `'10px'`). + */ + "background-position-x"?: + | PropertyValueNode + | PropertyValueNode> + ; + /** + * The y position of the background image, + * measured in percent(e.g. `'50%'`) or pixels (e.g. `'10px'`). + */ + "background-position-y"?: + | PropertyValueNode + | PropertyValueNode> + ; + /** + * The x offset of the background image, + * measured in percent(e.g. `'50%'`) or pixels (e.g. `'10px'`). + */ + "background-offset-x"?: PropertyValueNode | PropertyValueNode>; + /** + * The y offset of the background image, + * measured in percent(e.g. `'50%'`) or pixels (e.g. `'10px'`). + */ + "background-offset-y"?: PropertyValueNode | PropertyValueNode>; + /** + * Changes whether the width is calculated relative to the width of the node or + * the width in addition to the padding; may be inner or include-padding. + * + * If not specified, include-padding is used by default. + */ + "background-width-relative-to"?: + | PropertyValueNode<"inner" | "include-padding"> + | PropertyValueNode>; + /** + * Changes whether the height is calculated relative to the height of the node or + * the height in addition to the padding; may be `inner` or `include-padding`. + * + * If not specified, `include-padding` is used by default. + */ + "background-height-relative-to"?: + | PropertyValueNode<"inner" | "include-padding"> + | PropertyValueNode>; + /** + * How background image clipping is handled; + * may be node for clipped to node shape or none for no clipping. + */ + "background-clip"?: + | PropertyValueNode<"node" | "none"> + | PropertyValueNode> + ; + /** + * Specifies a padding size (e.g. 20) that expands the bounding box of the node in + * all directions. This allows for images to be drawn outside of the normal bounding + * box of the node when `background-clip` is none. This is useful for small decorations + * just outside of the node. + * + * `bounds-expansions` accepts 1 value (for all directions), + * 2 values, ([topAndBottom, leftAndRight]) or 4 values ([top, right, bottom, left]). + */ + "bounds-expansion"?: PropertyValueNode< + | number + | string + | [number | string, number | string] + | [number | string, number | string, number | string, number | string] + >; + } + + /** + * The ghost properties allow for creating a ghosting effect, a semitransparent duplicate of the element drawn at an offset. + * https://js.cytoscape.org/#style/ghost + */ + interface Ghost { + /** + * Whether to use the ghost effect; may be yes or no. + */ + ghost: PropertyValueNode<"yes" | "no">; + /** + * The horizontal offset used to position the ghost effect. + */ + "ghost-offset-x": PropertyValueNode; + /** + * The vertical offset used to position the ghost effect. + */ + "ghost-offset-y": PropertyValueNode; + /** + * The opacity of the ghost effect. + */ + "ghost-opacity": PropertyValueNode; + } + + /** + * These properties allow you to create pie chart backgrounds on nodes. + * Note that 16 slices maximum are supported per node, + * so in the properties 1 <= i <= 16. + * Of course, you must specify a numerical value for each property in place of i. + * Each nonzero sized slice is placed in order of i, + * starting from the 12 o’clock position and working clockwise. + * + * You may find it useful to reserve a number to a particular + * colour for all nodes in your stylesheet. + * Then you can specify values for pie-i-background-size + * accordingly for each node via a mapper. + * This would allow you to create consistently coloured + * pie charts in each node of the graph based on element data. + * + * http://js.cytoscape.org/#style/pie-chart-background + */ + interface PieChartBackground { + /** + * + * The diameter of the pie, measured as a percent of node size (e.g. 100%) or an absolute length (e.g. 25px). + */ + "pie-size": PropertyValueNode; + /** + * @deprecated + * + * The colour of the node’s ith pie chart slice. + */ + "pie-i-background-color": PropertyValueNode; + /** + * @deprecated + * + * The size of the node’s ith (1 <= i <= 16) pie chart slice, measured in percent (e.g. 25% or 25). + */ + "pie-i-background-size": PropertyValueNode; + /** + * @deprecated + * + * The opacity of the node’s ith (1 <= i <= 16) pie chart slice. + */ + "pie-i-background-opacity": PropertyValueNode; + + /** + * The colour of the node’s 1st pie chart slice. + */ + "pie-1-background-color": PropertyValueNode; + /** + * The size of the node’s 1st pie chart slice, measured in percent (e.g. 25% or 25). + */ + "pie-1-background-size": PropertyValueNode; + /** + * The opacity of the node’s 1st pie chart slice. + */ + "pie-1-background-opacity": PropertyValueNode; + /** + * The colour of the node’s 2nd pie chart slice. + */ + "pie-2-background-color": PropertyValueNode; + /** + * The size of the node’s 2nd pie chart slice, measured in percent (e.g. 25% or 25). + */ + "pie-2-background-size": PropertyValueNode; + /** + * The opacity of the node’s 2nd pie chart slice. + */ + "pie-2-background-opacity": PropertyValueNode; + /** + * The colour of the node’s 3rd pie chart slice. + */ + "pie-3-background-color": PropertyValueNode; + /** + * The size of the node’s 3rd pie chart slice, measured in percent (e.g. 25% or 25). + */ + "pie-3-background-size": PropertyValueNode; + /** + * The opacity of the node’s 3rd pie chart slice. + */ + "pie-3-background-opacity": PropertyValueNode; + /** + * The colour of the node’s 4th pie chart slice. + */ + "pie-4-background-color": PropertyValueNode; + /** + * The size of the node’s 4th pie chart slice, measured in percent (e.g. 25% or 25). + */ + "pie-4-background-size": PropertyValueNode; + /** + * The opacity of the node’s 4th pie chart slice. + */ + "pie-4-background-opacity": PropertyValueNode; + /** + * The colour of the node’s 5th pie chart slice. + */ + "pie-5-background-color": PropertyValueNode; + /** + * The size of the node’s 5th pie chart slice, measured in percent (e.g. 25% or 25). + */ + "pie-5-background-size": PropertyValueNode; + /** + * The opacity of the node’s 5th pie chart slice. + */ + "pie-5-background-opacity": PropertyValueNode; + /** + * The colour of the node’s 6th pie chart slice. + */ + "pie-6-background-color": PropertyValueNode; + /** + * The size of the node’s 6th pie chart slice, measured in percent (e.g. 25% or 25). + */ + "pie-6-background-size": PropertyValueNode; + /** + * The opacity of the node’s 6th pie chart slice. + */ + "pie-6-background-opacity": PropertyValueNode; + /** + * The colour of the node’s 7th pie chart slice. + */ + "pie-7-background-color": PropertyValueNode; + /** + * The size of the node’s 7th pie chart slice, measured in percent (e.g. 25% or 25). + */ + "pie-7-background-size": PropertyValueNode; + /** + * The opacity of the node’s 7th pie chart slice. + */ + "pie-7-background-opacity": PropertyValueNode; + /** + * The colour of the node’s 8th pie chart slice. + */ + "pie-8-background-color": PropertyValueNode; + /** + * The size of the node’s 8th pie chart slice, measured in percent (e.g. 25% or 25). + */ + "pie-8-background-size": PropertyValueNode; + /** + * The opacity of the node’s 8th pie chart slice. + */ + "pie-8-background-opacity": PropertyValueNode; + /** + * The colour of the node’s 9th pie chart slice. + */ + "pie-9-background-color": PropertyValueNode; + /** + * The size of the node’s 9th pie chart slice, measured in percent (e.g. 25% or 25). + */ + "pie-9-background-size": PropertyValueNode; + /** + * The opacity of the node’s 9th pie chart slice. + */ + "pie-9-background-opacity": PropertyValueNode; + /** + * The colour of the node’s 10th pie chart slice. + */ + "pie-10-background-color": PropertyValueNode; + /** + * The size of the node’s 10th pie chart slice, measured in percent (e.g. 25% or 25). + */ + "pie-10-background-size": PropertyValueNode; + /** + * The opacity of the node’s 10th pie chart slice. + */ + "pie-10-background-opacity": PropertyValueNode; + /** + * The colour of the node’s 11th pie chart slice. + */ + "pie-11-background-color": PropertyValueNode; + /** + * The size of the node’s 11th pie chart slice, measured in percent (e.g. 25% or 25). + */ + "pie-11-background-size": PropertyValueNode; + /** + * The opacity of the node’s 11th pie chart slice. + */ + "pie-11-background-opacity": PropertyValueNode; + /** + * The colour of the node’s 12th pie chart slice. + */ + "pie-12-background-color": PropertyValueNode; + /** + * The size of the node’s 12th pie chart slice, measured in percent (e.g. 25% or 25). + */ + "pie-12-background-size": PropertyValueNode; + /** + * The opacity of the node’s 12th pie chart slice. + */ + "pie-12-background-opacity": PropertyValueNode; + /** + * The colour of the node’s 13th pie chart slice. + */ + "pie-13-background-color": PropertyValueNode; + /** + * The size of the node’s 13th pie chart slice, measured in percent (e.g. 25% or 25). + */ + "pie-13-background-size": PropertyValueNode; + /** + * The opacity of the node’s 13th pie chart slice. + */ + "pie-13-background-opacity": PropertyValueNode; + /** + * The colour of the node’s 14th pie chart slice. + */ + "pie-14-background-color": PropertyValueNode; + /** + * The size of the node’s 14th pie chart slice, measured in percent (e.g. 25% or 25). + */ + "pie-14-background-size": PropertyValueNode; + /** + * The opacity of the node’s 14th pie chart slice. + */ + "pie-14-background-opacity": PropertyValueNode; + /** + * The colour of the node’s 15th pie chart slice. + */ + "pie-15-background-color": PropertyValueNode; + /** + * The size of the node’s 15th pie chart slice, measured in percent (e.g. 25% or 25). + */ + "pie-15-background-size": PropertyValueNode; + /** + * The opacity of the node’s 15th pie chart slice. + */ + "pie-15-background-opacity": PropertyValueNode; + /** + * The colour of the node’s 16th pie chart slice. + */ + "pie-16-background-color": PropertyValueNode; + /** + * The size of the node’s 16th pie chart slice, measured in percent (e.g. 25% or 25). + */ + "pie-16-background-size": PropertyValueNode; + /** + * The opacity of the node’s 16th pie chart slice. + */ + "pie-16-background-opacity": PropertyValueNode; + } + + interface Edge + extends + EdgeLine, + EdgeArrow, + Partial, + Partial, + Partial, + Partial, + Partial, + Partial, + Partial, + Partial, + Partial, + Partial>, + Partial>, + Partial>, + Partial>, + Partial + {} + + /** + * These properties affect the styling of an edge’s line: + * + * http://js.cytoscape.org/#style/edge-line + */ + interface EdgeLine { + /** + * The width of an edge’s line. + */ + width?: PropertyValueEdge; + /** + * The curving method used to separate two or more edges between two nodes; + * may be + * - haystack (default, very fast, bundled straight edges for which loops and compounds are unsupported), + * - bezier(bundled curved edges), + * - unbundled - bezier(curved edges for use with manual control points), or + * - segments (a series of straight lines). + * Note that haystack edges work best with ellipse, rectangle, or similar nodes. + * Smaller node shapes, like triangle, will not be as aesthetically pleasing. + * Also note that edge arrows are unsupported for haystack edges. + */ + "curve-style"?: + | PropertyValueEdge<"haystack" | "straight" | "bezier" | "unbundled-bezier" | "segments" | "taxi"> + ; + /** + * The colour of the edge’s line. + */ + "line-color"?: PropertyValueEdge; + /** + * The style of the edge’s line. + */ + "line-style"?: PropertyValueEdge; + /** + * The cap of the edge's line. + */ + "line-cap"?: PropertyValueEdge<"butt" | "round" | "square">; + /** + * The filling style of the edge's line. + */ + "line-fill"?: PropertyValueEdge<"solid" | "linear-gradient" | "radial-gradient">; + /** + * The opacity of the edge’s line and arrow. Useful if you wish to have a separate opacity for the edge + * label versus the edge line. Note that the opacity value of the edge element affects the effective + * opacity of its line and label subcomponents. + * + * Value between `0` and `1` inclusive. + */ + "line-opacity"?: PropertyValueEdge; + /** + * The dashed line pattern which specifies alternating lengths of lines and gaps. + */ + "line-dash-pattern"?: Array>; + /** + * The dashed line offset. + */ + "line-dash-offset"?: PropertyValueEdge; + /** + * The width of the edge’s outline. + */ + "line-outline-width"?: PropertyValueEdge; + /** + * The colour of the edge’s outline. + */ + "line-outline-color"?: PropertyValueEdge; + /** + * The distance the edge ends from its target. + */ + "target-distance-from-node"?: PropertyValueEdge; + /** + * The distance the edge ends from its source. + */ + "source-distance-from-node"?: PropertyValueEdge; + } + + /** + * These properties specify the gradient colouration of an edge's line: + * + * https://js.cytoscape.org/#style/gradient + */ + interface Gradient { + /** + * The colors of the gradient stops. + */ + "line-gradient-stop-colors"?: Array>; + /** + * The positions of the gradient stops. + * If not specified (or invalid), the stops will divide equally. + */ + "line-gradient-stop-positions"?: Array>; + } + + /** + * For automatic, bundled bezier edges (curve - style: bezier): + * + * http://js.cytoscape.org/#style/bezier-edges + */ + interface BezierEdges { + /** + * From the line perpendicular from source to target, + * this value specifies the distance between successive bezier edges. + */ + "control-point-step-size": PropertyValueEdge; + /** + * A single value that overrides "control-point-step-size" with a manual value. + * Because it overrides the step size, bezier edges with the same value will overlap. + * Thus, it’s best to use this as a one- off value for particular edges if need be. + */ + "control-point-distance": PropertyValueEdge; + /** + * A single value that weights control points along the line from source to target. + * The value usually ranges on [0, 1], with + * 0 towards the source node and + * 1 towards the target node — + * but larger or smaller values can also be used. + */ + "control-point-weight": PropertyValueEdge; + /** + * With value intersection (default), + * the line from source to target for "control-point-weight" is + * from the outside of the source node’s shape to the outside of + * the target node’s shape.With value node- position, + * the line is from the source position to the target position. + * The "node-position" option makes calculating edge points easier + * — but it should be used carefully because you can create invalid + * points that intersection would have automatically corrected. + */ + "edge-distances": PropertyValueEdge<"intersection" | "node-position">; + } + /** + * Loop edges + * For loops (i.e. same source and target) + * + * https://js.cytoscape.org/#style/loop-edges + */ + interface LoopEdges { + /** + * Determines the angle that loops extend from the node in cases when the source and + * target node of an edge is the same. The angle is specified from the 12 o’clock + * position and it progresses clockwise for increasing positive values. + * The default is `-45deg` (extending to the upper left). + */ + "loop-direction": PropertyValueEdge; + /** + * Determines the angle between the leaving and returning edges in loops. Positive + * values result in clockwise looping and negative values result in counter-clockwise + * looping. Default is `-90deg`. + */ + "loop-sweep": PropertyValueEdge; + } + /** + * Unbundled bezier edges + * For bezier edges with manual control points (curve - style: unbundled - bezier): + * + * http://js.cytoscape.org/#style/unbundled-bezier-edges + */ + interface UnbundledBezierEdges { + /** + * A series of values that specify for each control point the + * distance perpendicular to a line formed + * from source to target, e.g. -20 20 - 20. + */ + "control-point-distances": PropertyValueEdge; + /** + * A series of values that weights control points along + * a line from source to target, e.g. 0.25 0.5 0.75. + * A value usually ranges on [0, 1], with + * 0 towards the source node and + * 1 towards the target node + * — but larger or smaller values can also be used. + */ + "control-point-weights": PropertyValueEdge; + /** + * With value intersection (default), + * the line from source to target for "control-point-weights" + * is from the outside of the source node’s shape to the + * outside of the target node’s shape. + * With value + * "node-position", the line is from the source position to the target position. + * The "node-position" option makes calculating edge points easier + * — but it should be used carefully because you can create + * invalid points that intersection would have automatically corrected. + */ + "edge-distances": PropertyValueEdge<"intersection" | "node-position">; + } + /** + * Haystack edges + * Loop edges and compound parent nodes are not supported by haystack edges. + * Haystack edges are a more performant replacement for plain, straight line edges. + * + * For fast, straight line edges (curve - style: haystack): + * http://js.cytoscape.org/#style/haystack-edges + */ + interface HaystackEdges { + /** + * A value between 0 and 1 inclusive that indicates the relative radius used to position haystack edges on their connected nodes. + * The outside of the node is at 1, and the centre of the node is at 0. + */ + "haystack-radius": PropertyValueEdge; + } + /** + * Segments edges + * For edges made of several straight lines (curve - style: segments): + * http://js.cytoscape.org/#style/segments-edges + */ + interface SegmentsEdges { + /** + * A series of values that specify for each segment point the distance perpendicular to a line formed from source to target, e.g. -20 20 - 20. + */ + "segment-distances": PropertyValueEdge; + /** + * A series of values that weights segment points along a line from source to target, + * e.g. 0.25 0.5 0.75.A value usually ranges on [0, 1], + * with 0 towards the source node and 1 towards the target node — but larger or smaller values can also be used. + */ + "segment-weights": PropertyValueEdge; + /** + * A series of values that provide the radii of the different points positioned by segment-distances and segment-weights, e.g. 15 0 5. + * If less radii are provided than points have been defined, the last provided radius will be used for all the missing radius. + * If a single radius is provided, it will therefore be applied to all the segment’s points. + */ + "segment-radii"?: PropertyValueEdge; + /** + * Defines where segment-radii are applied, which is particularly relevant when the corner angle is acute. + * Values can be: + * - `arc-radius`: Default strategy: The radius property is applied to the corner arc, which will be placed further away from the control point if the arc doesn’t fit in an acute angle. + * - `influence-radius`: The radius property is applied to the control point sphere of influence. The arcs for a given control point will all start and end at radius distance from the control-points. + */ + "radius-type"?: PropertyValueEdge<"arc-radius" | "influence-radius">; + /** + * With value + * * "intersection" (default), the line from source to target + * * for "segment-weights" is from the outside of the source node’s shape to the outside of the target node’s shape. + * * With value "node-position", the line is from the source position to the target position. + * The "node-position" option makes calculating edge points easier + * — but it should be used carefully because you can create + * invalid points that intersection would have automatically corrected. + */ + "edge-distances": PropertyValueEdge<"intersection" | "node-position">; + } + /** + * Taxi edges + * For hierarchical, bundled edges (curve-style: taxi) + * + * https://js.cytoscape.org/#style/taxi-edges + */ + interface TaxiEdges { + /** + * The main direction of the edge, the direction starting out from the source node; may be one of: + * * `auto`: Automatically use `vertical` or `horizontal`, based on whether the vertical or horizontal distance is largest. + * * `vertical`: Automatically use `downward` or `upward`, based on the vertical direction from source to target. + * * `downward`: Bundle outgoers downwards. + * * `upward`: Bundle outgoers upwards. + * * `horizontal`: Automatically use `righward` or `leftward`, based on the horizontal direction from source to target. + * * `rightward`: Bundle outgoers righwards. + * * `leftward`: Bundle outgoers leftwards. + */ + "taxi-direction": PropertyValueEdge< + "auto" | "vertical" | "downward" | "upward" | "horizontal" | "rightward" | "leftward" + >; + /** + * The distance along the primary axis where the first turn is applied. + * * This value may be an absolute distance (e.g. `'20px'`) or it may be a relative distance + * between the source and target (e.g. `'50%'`). + * * A negative value may be specified to indicate a distance in the oppostite, target to + * source direction (e.g. `'-20px'`). + * * Note that bundling may not work with an explicit direction (upward, downward, leftward, or rightward) + * in tandem with a turn distance specified in percent units. + */ + "taxi-turn": PropertyValueEdge; + /** + * The minimum distance along the primary axis that is maintained between the nodes and the turns. + * * This value only takes on absolute values (e.g. `'5px'`). + * * This property makes the taxi edge be re-routed when the turns would be otherwise too close to + * the source or target. As such, it also helps to avoid turns overlapping edge endpoint arrows. + */ + "taxi-turn-min-distance": PropertyValueEdge; + /** + * The radius of the rounded corners of the edge. + */ + "taxi-radius"?: PropertyValueEdge; + /** + * With value `intersection` (default), the `distances` (`taxi-turn` and `taxi-turn-min-distance`) + * are considered from the outside of the source’s bounds to the outside of the target’s bounds. + * With value `node-position`, the distances are considered from the source position to the target position. + * The `node-position` option makes calculating edge points easier — but it should be used carefully because + * you can create invalid points that `intersection` would have automatically corrected. + */ + "edge-distances": PropertyValueEdge<"intersection" | "node-position">; + } + + type ArrowShape = + | "tee" + | "vee" + | "triangle" + | "triangle-tee" + | "circle-triangle" + | "triangle-cross" + | "triangle-backcurve" + | "square" + | "circle" + | "diamond" + | "chevron" + | "none"; + + type ArrowFill = "filled" | "hollow"; + + /** + * Edge arrow + * * -arrow-color : The colour of the edge’s source arrow. + * * -arrow-shape : The shape of the edge’s source arrow. + * * -arrow-fill : The fill state of the edge’s source arrow. + * + * For each edge arrow property above, replace with one of + * * source : Pointing towards the source node, at the end of the edge. + * * mid-source : Pointing towards the source node, at the middle of the edge. + * * target : Pointing towards the target node, at the end of the edge. + * * mid-target: Pointing towards the target node, at the middle of the edge. + * + * Only mid arrows are supported on haystack edges. + * http://js.cytoscape.org/#style/edge-arrow + */ + interface EdgeArrow { + /** The size of the arrow. */ + "arrow-scale"?: PropertyValueEdge; + + /** The colour of the edge’s source arrow. */ + "source-arrow-color"?: PropertyValueEdge; + /** The colour of the edge’s "mid-source" arrow. */ + "mid-source-arrow-color"?: PropertyValueEdge; + /** The colour of the edge’s target arrow. */ + "target-arrow-color"?: PropertyValueEdge; + /** The colour of the edge’s "mid-target" arrow. */ + "mid-target-arrow-color"?: PropertyValueEdge; + + /** The shape of the edge’s source arrow. */ + "source-arrow-shape"?: PropertyValueEdge; + /** The shape of the edge’s mid-source arrow. */ + "mid-source-arrow-shape"?: PropertyValueEdge; + /** The shape of the edge’s target arrow. */ + "target-arrow-shape"?: PropertyValueEdge; + /** The shape of the edge’s mid-target arrow. */ + "mid-target-arrow-shape"?: PropertyValueEdge; + + /** The fill state of the edge’s source arrow. */ + "source-arrow-fill"?: PropertyValueEdge; + /** The fill state of the edge’s mid-source arrow. */ + "mid-source-arrow-fill"?: PropertyValueEdge; + /** The fill state of the edge’s target arrow. */ + "target-arrow-fill"?: PropertyValueEdge; + /** The fill state of the edge’s mid-target arrow. */ + "mid-target-arrow-fill"?: PropertyValueEdge; + } + + /** + * https://js.cytoscape.org/#style/edge-endpoints + */ + interface EdgeEndpoints { + /** Specifies the endpoint of the source side of the edge */ + "source-endpoint": PropertyValue< + SingularType, + | "inside-to-node" + | "outside-to-node" + | "outside-to-node-or-label" + | "outside-to-line" + | "outside-to-line-or-label" + | string + >; + /** Specifies the endpoint of the target side of the edge */ + "target-endpoint": PropertyValue< + SingularType, + | "inside-to-node" + | "outside-to-node" + | "outside-to-node-or-label" + | "outside-to-line" + | "outside-to-line-or-label" + | string + >; + } + + /** + * http://js.cytoscape.org/#style/visibility + */ + interface Visibility { + /** + * Whether to display the element; may be element for displayed or none for not displayed. + * Note that a "display: none" bezier edge does not take up space in its bundle. + */ + display: PropertyValue; + /** + * Whether the element is visible; may be visible or hidden. + * Note that a "visibility : hidden" bezier edge still takes up space in its bundle. + */ + visibility: PropertyValue; + /** + * The opacity of the element, ranging from 0 to 1. + * Note that the opacity of a compound node parent affects the effective opacity of its children. + */ + opacity: PropertyValue; + /** + * An integer value that affects the relative draw order of elements. + * In general, an element with a higher "z-index" will be drawn on top of an element with a lower "z-index". + * Note that edges are under nodes despite "z-index", except when necessary for compound nodes. + */ + "z-index": PropertyValue; + /** + * May be bottom, orphan, auto (default), or top. The first drawn is bottom, the second is orphan, + * which is the same depth as the root of the compound graph, followed by the default of auto + * which draws in depth order from root to leaves of the compound graph. The last drawn is top. + * It does not usually make sense to set this value for non-compound graphs. + */ + "z-compound-depth": PropertyValue; + /** + * May be auto (default) or manual. The auto setting draws edges under nodes, + * whereas manual ignores this convention and draws solely based on the z-index value. + */ + "z-index-compare": PropertyValue; + } + + /** https://developer.mozilla.org/en-US/docs/Web/CSS/font-style */ + type FontStyle = "normal" | "italic" | "oblique"; + + /** https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight */ + type FontWeight = number | "normal" | "bold" | "lighter" | "bolder"; + + /** http://js.cytoscape.org/#style/labels */ + type TextTranformation = "none" | "uppercase" | "lowercase"; + + /** + * Labels + * Label text: + * + * http://js.cytoscape.org/#style/labels + */ + interface Labels { + /** + * The text to display for an element’s label. + */ + label: PropertyValue; + /** + * The text to display for an edge’s source label. + */ + "source-label": PropertyValue; + /** + * The text to display for an edge’s target label. + */ + "target-label": PropertyValue; + /** + * Basic font styling: + */ + /** + * The colour of the element’s label. + */ + color: PropertyValue; + /** + * The opacity of the label text, including its outline. + */ + "text-opacity": PropertyValue; + /** + * A comma-separated list of font names to use on the label text. + */ + "font-family": PropertyValue; + /** + * The size of the label text. + * https://developer.mozilla.org/en-US/docs/Web/CSS/font-family + */ + "font-size": PropertyValue; + /** + * A CSS font style to be applied to the label text. + * https://developer.mozilla.org/en-US/docs/Web/CSS/font-style + */ + "font-style": PropertyValue; + /** + * A CSS font weight to be applied to the label text. + */ + "font-weight": PropertyValue; + /** + * A transformation to apply to the label text. + */ + "text-transform": PropertyValue; + + /** + * Wrapping text: + */ + + /** + * A wrapping style to apply to the label text; may be + * * "none" for no wrapping (including manual newlines ) or + * * "wrap" for manual and/ or autowrapping. + * * "ellipsis" to truncate the string and append + */ + "text-wrap": PropertyValue; + /** + * The maximum width for wrapped text, + * applied when "text-wrap" is set to wrap. + * For only manual newlines (i.e.\n), set a very large + * value like 1000px such that only your newline characters would apply. + */ + "text-max-width": PropertyValue; + /** + * The characters that may be used for possible wrapping locations when + * a line overflows `text-max-width`; may be `whitespace` (default) or `anywhere`. + * Note that anywhere is suited to CJK, where the characters are in a grid + * and no whitespace exists. Using anywhere with text in the Latin alphabet, + * for example, will split words at arbitrary locations. + */ + "text-overflow-wrap": PropertyValue; + /** + * The justification of multiline (wrapped) labels; may be + * `left`, `center`, `right`, or `auto` (default). The auto value makes it so that a + * node’s label is justified along the node — e.g. a label on the right side + * of a node is left justified. + */ + "text-justification": PropertyValue; + /** + * The line height of multiline text, as a relative, unitless value. It specifies the + * vertical spacing between each line. With value `1` (default), the lines are stacked + * directly on top of one another with no additional whitespace between them. + * With value `2`, for example, there is whitespace between each line equal to the visible + * height of a line of text. + */ + "line-height": PropertyValue; + + /** + * Node label alignment: + */ + + /** + * The vertical alignment of a node’s label. + */ + "text-halign": PropertyValue; + /** + * The vertical alignment of a node’s label. + */ + "text-valign": PropertyValue; + + /** + * Edge label alignment: + */ + + /** + * For the source label of an edge, how far from the source node the label should be placed. + */ + "source-text-offset": PropertyValue; + /** + * For the target label of an edge, how far from the target node the label should be placed. + */ + "target-text-offset": PropertyValue; + /** + * Margins: + */ + + /** + * A margin that shifts the label along the x- axis. + */ + "text-margin-x": PropertyValue; + /** + * A margin that shifts the label along the y- axis. + */ + "text-margin-y": PropertyValue; + /** + * (For the source label of an edge.) + */ + "source-text-margin-x": PropertyValue; + /** + * (For the source label of an edge.) + */ + "source-text-margin-y": PropertyValue; + /** + * (For the target label of an edge.) + */ + "target-text-margin-x": PropertyValue; + /** + * (For the target label of an edge.) + */ + "target-text-margin-y": PropertyValue; + /** + * Rotating text: + */ + + /** + * A rotation angle that is applied to the label. + * * Rotations are clockwise. + * * For edges, the special value `autorotate` can be used to align the label to the edge. + * * For nodes, the label is rotated along its anchor point on the node, so a label margin may help for some usecases. + * * The special value `none` can be used to denote 0deg. + * * Rotations works best with left-to-right text. + */ + "text-rotation": PropertyValue; + + /** + * (For the source label of an edge.) + */ + "source-text-rotation": PropertyValue; + /** + * (For the target label of an edge.) + */ + "target-text-rotation": PropertyValue; + + /** + * Outline: + */ + + /** + * The colour of the outline around the element’s label text. + */ + "text-outline-color": PropertyValue; + /** + * The opacity of the outline on label text. + */ + "text-outline-opacity": PropertyValue; + /** + * The size of the outline on label text. + */ + "text-outline-width": PropertyValue; + + /** + * Background: + */ + + /** + * The padding provides visual spacing between the text and the edge of the background. + */ + "text-background-padding": PropertyValue; + /** + * A colour to apply on the text background. + */ + "text-background-color": PropertyValue; + /** + * The opacity of the label background; the background is disabled for 0 (default value). + */ + "text-background-opacity": PropertyValue; + /** + * The shape to use for the label background. + */ + "text-background-shape": PropertyValue; + + /** + * Border: + */ + + /** + * The width of the border around the label; the border is disabled for 0 (default value). + */ + "text-border-opacity": PropertyValue; + /** + * The width of the border around the label. + */ + "text-border-width": PropertyValue; + /** + * The style of the border around the label. + */ + "text-border-style": PropertyValue; + /** + * The colour of the border around the label. + */ + "text-border-color": PropertyValue; + + /** + * Interactivity: + */ + + /** + * If zooming makes the effective font size of the label smaller than this, + * then no label is shown.Note that because of performance optimisations, + * the label may be shown at font sizes slightly smaller than this value. + * + * This effect is more pronounced at larger screen pixel ratios.However, + * it is guaranteed that the label will be shown at sizes equal to or greater than the value specified. + */ + "min-zoomed-font-size": PropertyValue; + /** + * Whether events should occur on an element if the label receives an event; may be `yes` or `no`. + * You may want a style applied to the text on active so you know the text is activatable. + */ + "text-events": PropertyValue; + } + + /** + * http://js.cytoscape.org/#style/events + */ + interface Events { + /** + * Whether events should occur on an element (e.g.tap, mouseover, etc.). + * * For "no", the element receives no events and events simply pass through to the core/viewport. + */ + events: PropertyValue; + /** + * Whether events should occur on an element if the label receives an event. + * You may want a style applied to the text on active so you know the text is activatable. + */ + "text-events": PropertyValue; + } + + /** + * These properties allow for the creation of overlays on top of nodes or edges, + * and are often used in the :active state. + * http://js.cytoscape.org/#style/overlay + */ + interface Overlay { + /** + * The colour of the overlay. + */ + "overlay-color": PropertyValueEdge; + /** + * The area outside of the element within which the overlay is shown. + */ + "overlay-padding": PropertyValueEdge; + /** + * The opacity of the overlay. + */ + "overlay-opacity": PropertyValueEdge; + + /** + * The shape of the node overlay; may be round-rectangle (default), ellipse. Doesn’t apply to edges. + */ + "overlay-shape"?: PropertyValueEdge<"round-rectangle" | "ellipse">; + } + + /** + * These properties allow for the creation of underlays behind nodes or edges, + * and are often used in a highlighted state. + */ + interface Underlay { + /** + * The colour of the underlay. + */ + "underlay-color"?: PropertyValueNode; + /** + * The area outside of the element within which the underlay is shown. + */ + "underlay-padding"?: PropertyValueNode; + /** + * The opacity of the underlay. + */ + "underlay-opacity"?: PropertyValueNode; + /** + * The shape of the node underlay; may be round-rectangle (default), ellipse. Doesn’t apply to edges. + */ + "underlay-shape"?: PropertyValueNode<"round-rectangle" | "ellipse">; + } + + /** + * Transition animation + */ + type TransitionTimingFunction = + | "linear" + | "spring" + | "cubic-bezier" + | "ease" + | "ease-in" + | "ease-out" + | "ease-in-out" + | "ease-in-sine" + | "ease-out-sine" + | "ease-in-out-sine" + | "ease-in-quad" + | "ease-out-quad" + | "ease-in-out-quad" + | "ease-in-cubic" + | "ease-out-cubic" + | "ease-in-out-cubic" + | "ease-in-quart" + | "ease-out-quart" + | "ease-in-out-quart" + | "ease-in-quint" + | "ease-out-quint" + | "ease-in-out-quint" + | "ease-in-expo" + | "ease-out-expo" + | "ease-in-out-expo" + | "ease-in-circ" + | "ease-out-circ" + | "ease-in-out-circ"; + + /** + * http://js.cytoscape.org/#style/transition-animation + */ + interface TransitionAnimation { + /** + * A comma separated list of style properties to animate in this state. + */ + "transition-property": string; + /** + * The length of the transition in seconds(e.g. 0.5s). + */ + "transition-duration": number; + /** + * The length of the delay in seconds before the transition occurs (e.g. 250ms). + */ + "transition-delay": number; + /** + * An easing function that controls the animation progress curve (a visualisation of easings serves as a reference). + */ + "transition-timing-function": TransitionTimingFunction; + } + + /** + * Core + * These properties affect UI global to the graph, and apply only to the core. + * You can use the special core selector string to set these properties. + * http://js.cytoscape.org/#style/core + */ + interface Core { + /** + * Indicator: + */ + + /** + * The colour of the indicator shown when the background is grabbed by the user. + */ + "active-bg-color": PropertyValueCore; + /** + * The opacity of the active background indicator. + */ + "active-bg-opacity": PropertyValueCore; + /** + * The size of the active background indicator. + */ + "active-bg-size": PropertyValueCore; + /** + * Selection box: + */ + /** + * The background colour of the selection box used for drag selection. + */ + "selection-box-color": PropertyValueCore; + /** + * The colour of the border on the selection box. + */ + "selection-box-border-color": PropertyValueCore; + /** + * The size of the border on the selection box. + */ + "selection-box-border-width": PropertyValueCore; + /** + * The opacity of the selection box. + */ + "selection-box-opacity": PropertyValueCore; + /** + * Texture during viewport gestures: + */ + /** + * The colour of the area outside the viewport texture when initOptions.textureOnViewport === true. + */ + "outside-texture-bg-color": PropertyValueCore; + /** + * The opacity of the area outside the viewport texture. + */ + "outside-texture-bg-opacity": PropertyValueCore; + } + } + + /** + * Events passed to handler callbacks are similar to + * jQuery event objects in that they wrap native event objects, + * mimicking their API. + * + * http://js.cytoscape.org/#events + */ + interface EventObject extends InputEventObject, LayoutEventObject {} + + interface EventObjectNode extends EventObject { + target: NodeSingular; + } + + interface EventObjectEdge extends EventObject { + target: EdgeSingular; + } + + interface EventObjectCore extends EventObject { + target: Core; + } + + /** + * http://js.cytoscape.org/#events/event-object + */ + interface AbstractEventObject { + /** a reference to the corresponding core Core */ + cy: Core; + /** indicates the element or core that first caused the event */ + target: any; + /** the event type string (e.g. "tap", "select") */ + type: UserInputDeviceEventName | UserInputDeviceEventNameExt | CollectionEventName | GraphEventName; + /** the event namespace string (e.g. "foo" for "foo.tap") */ + namespace: string; + /** Unix epoch time of event in milliseconds */ + timeStamp: number; + + preventDefault: () => void; + stopPropagation: () => void; + stopImmediatePropagation: () => void; + isDefaultPrevented: () => boolean; + isPropagationStopped: () => boolean; + isImmediatePropagationStopped: () => boolean; + } + interface InputEventObject extends AbstractEventObject { + /** position : indicates the model position of the event */ + position: Position; + /** renderedPosition : indicates the rendered position of the event */ + renderedPosition: Position; + /** originalEvent : the original user input device event object */ + originalEvent: MouseEvent; + } + interface LayoutEventObject extends AbstractEventObject { + /** + * layout : indicates the corresponding layout that triggered the event + * (useful if running multiple layouts simultaneously) + */ + layout: any; + } + + /** + * These are normal browser events that you can bind to via Cytoscape.js. + * You can bind these events to the core and to collections. + * http://js.cytoscape.org/#events/user-input-device-events + */ + type UserInputDeviceEventName = + // when the mouse button is pressed + | "mousedown" + // when the mouse button is released + | "mouseup" + // after mousedown then mouseup + | "click" + // when the cursor is put on top of the target + | "mouseover" + // when the cursor is moved off of the target + | "mouseout" + // when the cursor is moved somewhere on top of the target + | "mousemove" + // when one or more fingers starts to touch the screen + | "touchstart" + // when one or more fingers are moved on the screen + | "touchmove" + // when one or more fingers are removed from the screen + | "touchend"; + + /** + * There are also some higher level events that you can use + * so you don’t have to bind to different events for + * mouse-input devices and for touch devices. + * http://js.cytoscape.org/#events/user-input-device-events + */ + type UserInputDeviceEventNameExt = + // normalised tap start event (either mousedown or touchstart) + | "tapstart" + | "vmousedown" + // normalised move event (either touchmove or mousemove) + | "tapdrag" + | "vmousemove" + // normalised over element event (either touchmove or mousemove/mouseover) + | "tapdragover" + // normalised off of element event (either touchmove or mousemove/mouseout) + | "tapdragout" + // normalised tap end event (either mouseup or touchend) + | "tapend" + | "vmouseup" + // normalised tap event (either click, or touchstart followed by touchend without touchmove) + | "tap" + | "vclick" + // normalised tap hold event + | "taphold" + // normalised right-click mousedown or two-finger tapstart + | "cxttapstart" + // normalised right-click mouseup or two-finger tapend + | "cxttapend" + // normalised right-click or two-finger tap + | "cxttap" + // normalised mousemove or two-finger drag after cxttapstart but before cxttapend + | "cxtdrag" + // when going over a node via cxtdrag + | "cxtdragover" + // when going off a node via cxtdrag + | "cxtdragout" + // when starting box selection + | "boxstart" + // when ending box selection + | "boxend" + // triggered on elements when selected by box selection + | "boxselect" + // triggered on elements when inside the box on boxend + | "box"; + + /** + * These events are custom to Cytoscape.js. You can bind to these events for collections. + * http://js.cytoscape.org/#events/collection-events + */ + type CollectionEventName = + // when an element is added to the graph + | "add" + // when an element is removed from the graph + | "remove" + // when an element is moved w.r.t. topology. Nodes: when the compound parent is changed. Edges: when the source or target is changed + | "move" + // when an element is selected + | "select" + // when an element is unselected + | "unselect" + // when an element is selected by a tap gesture + | "tapselect" + // when an element is unselected by a tap elsewhere + | "tapunselect" + // triggered on elements when selected by box selection + | "boxselect" + // triggered on elements when inside the box on boxend + | "box" + // when an element is locked + | "lock" + // when an element is unlocked + | "unlock" + // when an element is grabbed directly (including only the one node directly under the cursor or the user’s finger) + | "grabon" + // when an element is grabbed (including all elements that would be dragged) + | "grab" + // when an element is grabbed and then moved + | "drag" + // when an element is freed (i.e. let go from being grabbed) + | "free" + // when an element is freed directly (including only the one node directly under the cursor or the user’s finger) + | "freeon" + // when an element is freed after being dragged (i.e. grab then drag then free) + | "dragfree" + // when an element is freed after being dragged directly (i.e. grabon, drag, freeon) + | "dragfreeon" + // when an element changes position + | "position" + // when an element’s data is changed + | "data" + // when an element’s scratchpad data is changed + | "scratch" + // when an element’s style is changed + | "style" + // when a node’s background image is loaded + | "background"; + + /** + * These events are custom to Cytoscape.js, and they occur on the core. + * http://js.cytoscape.org/#events/graph-events + */ + type GraphEventName = + // when a layout starts running + | "layoutstart" + // when a layout has set initial positions for all the nodes (but perhaps not final positions) + | "layoutready" + // when a layout has finished running completely or otherwise stopped running + | "layoutstop" + // when a new Core of Cytoscape.js is ready to be interacted with + | "ready" + // when the Core of Cytoscape.js was explicitly destroyed by calling .destroy(). + | "destroy" + // when the viewport is (re)rendered + | "render" + // when the viewport is panned + | "pan" + // when the viewport is panned via dragging + | "dragpan" + // when the viewport is zoomed + | "zoom" + // when the viewport is zoomed via pinch gesture. This event is only supported for browsers which support the gesturechange event or touch events. + // Other browsers will fire the scrollzoom event. + | "pinchzoom" + // when the viewport is zoomed via the scroll wheel + | "scrollzoom" + // when the viewport is changed (i.e. from a pan, a zoom, or from both when zooming about a point – e.g. pinch-to-zoom) + | "viewport" + // when the viewport is resized (usually by calling cy.resize(), a window resize, or toggling a class on the Cytoscape.js div) + | "resize"; + + /** + * Layouts + * http://js.cytoscape.org/#layouts + * + * The function of a layout is to set the positions on the nodes in the graph. + * Layouts are extensions of Cytoscape.js such that it is possible for + * anyone to write a layout without modifying the library itself. + * Several layouts are included with Cytoscape.js by default, + * and their options are described in the sections that follow + * with the default values specified. + * Note that you must set options.name to the name of the + * layout to specify which one you want to run. + * Each layout has its own algorithm for setting the position for each node. + * This algorithm influences the overall shape of the graph and the lengths of the edges. + * A layout’s algorithm can be customised by setting its options. + * Therefore, edge lengths can be controlled by setting the layout options appropriately. + * For force-directed (physics) layouts, + * there is generally an option to set a weight to each edge + * to affect the relative edge lengths. + * Edge length can also be affected by options like spacing + * factors, angles, and overlap avoidance. + * Setting edge length depends on the particular layout, + * and some layouts will allow for more precise edge lengths than others. + */ + + interface Layouts extends LayoutManipulation, LayoutEvents {} + + type LayoutOptions = + | NullLayoutOptions + | RandomLayoutOptions + | PresetLayoutOptions + | GridLayoutOptions + | CircleLayoutOptions + | ConcentricLayoutOptions + | BreadthFirstLayoutOptions + | CoseLayoutOptions + | BaseLayoutOptions; + + type LayoutHandler = (e: LayoutEventObject) => void; + + interface BaseLayoutOptions { + name: string; + // on layoutready event + ready?: LayoutHandler; + // on layoutstop event + stop?: LayoutHandler; + /** + * transform a given node position. Useful for changing flow direction in discrete layouts + * + * @param node The node. + * @param position The node position. + */ + transform?(node: NodeSingular, position: Position): Position; + } + /** + * http://js.cytoscape.org/#layouts/null + */ + interface NullLayoutOptions { + name: "null"; + } + interface BoundingBox12 { + x1: number; + y1: number; + x2: number; + y2: number; + } + interface BoundingBoxWH { + x1: number; + y1: number; + w: number; + h: number; + } + interface AnimatedLayoutOptions { + // whether to transition the node positions + animate?: boolean; + // duration of animation in ms if enabled + animationDuration?: number; + // easing of animation if enabled + animationEasing?: Css.TransitionTimingFunction; + /** + * a function that determines whether the node should be animated. + * All nodes animated by default on animate enabled. + * Non-animated nodes are positioned immediately when the layout starts + */ + animateFilter?(node: NodeSingular, index: number): boolean; + } + /** + * http://js.cytoscape.org/#layouts/random + */ + interface RandomLayoutOptions extends BaseLayoutOptions, AnimatedLayoutOptions { + name: "random"; + // whether to fit to viewport + fit?: boolean; + // fit padding + padding?: number; + // constrain layout bounds + boundingBox?: undefined | BoundingBox12 | BoundingBoxWH; + } + + /** + * http://js.cytoscape.org/#layouts/preset + */ + interface NodePositionMap { + [nodeid: string]: Position; + } + type NodePositionFunction = (nodeid: string) => Position; + interface PresetLayoutOptions extends BaseLayoutOptions, AnimatedLayoutOptions { + name: "preset"; + // map of (node id) => (position obj); or function(node){ return somPos; } + positions?: NodePositionMap | NodePositionFunction; + // the zoom level to set (prob want fit = false if set) + zoom?: number; + // the pan level to set (prob want fit = false if set) + pan?: number; + // whether to fit to viewport + fit?: boolean; + // padding on fit + padding?: number; + } + + // A function that determines the order of the nodes. The return value has the same + // semantics as for compare function passed to Array.sort. + type SortingFunction = (a: NodeSingular, b: NodeSingular) => number; + + interface ShapedLayoutOptions extends BaseLayoutOptions, AnimatedLayoutOptions { + // whether to fit to viewport + fit?: boolean; + // padding used on fit + padding?: number; + // constrain layout bounds + boundingBox?: BoundingBox12 | BoundingBoxWH; + + // prevents node overlap, may overflow boundingBox if not enough space + avoidOverlap?: boolean; + + // Excludes the label when calculating node bounding boxes for the layout algorithm + nodeDimensionsIncludeLabels?: boolean; + // Applies a multiplicative factor (>0) to expand or compress the overall area that the nodes take up + spacingFactor?: number; + + // a sorting function to order the nodes + sort?: SortingFunction; + } + /** + * http://js.cytoscape.org/#layouts/grid + */ + interface GridLayoutOptions extends ShapedLayoutOptions { + name: "grid"; + + // extra spacing around nodes when avoidOverlap: true + avoidOverlapPadding?: number; + + // uses all available space on false, uses minimal space on true + condense?: boolean; + // force num of rows in the grid + rows?: number; + // force num of columns in the grid + cols?: number; + // returns { row, col } for element + position?(node: NodeSingular): { row: number; col: number }; + } + + /** + * http://js.cytoscape.org/#layouts/circle + */ + interface CircleLayoutOptions extends ShapedLayoutOptions { + name: "circle"; + + // the radius of the circle + radius?: number; + + // where nodes start in radians, e.g. 3 / 2 * Math.PI, + startAngle?: number; + // how many radians should be between the first and last node (defaults to full circle) + sweep?: number; + // whether the layout should go clockwise (true) or counterclockwise/anticlockwise (false) + clockwise?: boolean; + } + /** + * http://js.cytoscape.org/#layouts/concentric + */ + interface ConcentricLayoutOptions extends ShapedLayoutOptions { + name: "concentric"; + + // where nodes start in radians, e.g. 3 / 2 * Math.PI, + startAngle?: number; + // how many radians should be between the first and last node (defaults to full circle) + sweep?: number; + // whether the layout should go clockwise (true) or counterclockwise/anticlockwise (false) + clockwise?: boolean; + + // whether levels have an equal radial distance betwen them, may cause bounding box overflow + equidistant?: boolean; + minNodeSpacing?: number; // min spacing between outside of nodes (used for radius adjustment) + // height of layout area (overrides container height) + height?: number; + // width of layout area (overrides container width) + width?: number; + // Applies a multiplicative factor (>0) to expand or compress the overall area that the nodes take up + spacingFactor?: number; + // returns numeric value for each node, placing higher nodes in levels towards the centre + concentric?(node: NodeSingular): number; + // the variation of concentric values in each level + levelWidth?(node: NodeCollection): number; + } + + /** + * http://js.cytoscape.org/#layouts/breadthfirst + */ + interface BreadthFirstLayoutOptions extends ShapedLayoutOptions { + name: "breadthfirst"; + + // whether the tree is directed downwards (or edges can point in any direction if false) + directed?: boolean; + // put depths in concentric circles if true, put depths top down if false + circle?: boolean; + // the roots of the trees + roots?: string[]; + // Deprecated: how many times to try to position the nodes in a maximal way (i.e. no backtracking) + maximalAdjustments?: number; + // whether to shift nodes down their natural BFS depths in order to avoid upwards edges (DAGS only) + maximal?: boolean; + // whether to create an even grid into which the DAG is placed (circle:false only) + grid?: boolean; + // a sorting function to order nodes at equal depth. e.g. function(a, b){ return a.data('weight') - b.data('weight') } + depthSort?: (a: NodeSingular, b: NodeSingular) => number; + } + + /** + * http://js.cytoscape.org/#layouts/cose + */ + interface CoseLayoutOptions extends ShapedLayoutOptions { + name: "cose"; + + // Number of iterations between consecutive screen positions update + // (0 -> only updated on the end) + refresh?: number; + // Randomize the initial positions of the nodes (true) or use existing positions (false) + randomize?: boolean; + // Extra spacing between components in non-compound graphs + componentSpacing?: number; + // Node repulsion (non overlapping) multiplier + nodeRepulsion?(node: any): number; + + // Node repulsion (overlapping) multiplier + nodeOverlap?: number; + // Ideal edge (non nested) length + idealEdgeLength?(edge: any): number; + // Divisor to compute edge forces + edgeElasticity?(edge: any): number; + + // Nesting factor (multiplier) to compute ideal edge length for nested edges + nestingFactor?: number; + // Gravity force (constant) + gravity?: number; + // Maximum number of iterations to perform + numIter?: number; + // Initial temperature (maximum node displacement) + initialTemp?: number; + // Cooling factor (how the temperature is reduced between consecutive iterations + coolingFactor?: number; + // Lower temperature threshold (below this point the layout will end) + minTemp?: number; + // Deprecated: Pass a reference to weaver to use threads for calculations + weaver?: boolean; + + // The layout animates only after this many milliseconds for animate:true + // (prevents flashing on fast runs) + animationThreshold?: number; + } + + /** + * http://js.cytoscape.org/#layouts/layout-manipulation + * Layouts have a set of functions available to them, + * which allow for more complex behaviour than the primary run-one-layout-at-a-time usecase. + * A new, developer accessible layout can be made via cy.makeLayout(). + */ + interface LayoutManipulation { + /** + * Start running the layout + * http://js.cytoscape.org/#layout.run + */ + run(): this; + start(): this; + /** + * Stop running the (asynchronous/discrete) layout + * http://js.cytoscape.org/#layout.stop + */ + stop(): this; + } + interface LayoutEvents { + /** + * http://js.cytoscape.org/#layouts/layout-events + */ + /** + * @param events A space separated list of event names. + * @param data [optional] A plain object which is passed to the + * handler in the event object argument. + * @param handler The handler function that is called + * when one of the specified events occurs. + */ + on(events: EventNames, handler: EventHandler): this; + on(events: EventNames, data: any, handler: EventHandler): this; + bind(events: EventNames, handler: EventHandler): this; + bind(events: EventNames, data: any, handler: EventHandler): this; + listen(events: EventNames, handler: EventHandler): this; + listen(events: EventNames, data: any, handler: EventHandler): this; + addListener(events: EventNames, handler: EventHandler): this; + addListener(events: EventNames, data: any, handler: EventHandler): this; + + /** + * Get a promise that is resolved with the first of any of + * the specified events triggered on the layout. + * http://js.cytoscape.org/#layout.promiseOn + */ + promiseOn(events: EventNames): Promise; + pon(events: EventNames): Promise; + + /** + * Bind to events that are emitted by the layout, and trigger the handler only once. + * @param events A space separated list of event names. + * @param data [optional] A plain object which is passed to the handler in the event object argument. + * @param handler The handler function that is called when one of the specified events occurs. + */ + one(events: EventNames, handler: EventHandler): this; + one(events: EventNames, data: any, handler: EventHandler): this; + + /** + * Remove event handlers on the layout. + * http://js.cytoscape.org/#layout.off + * + * @param events A space separated list of event names. + * @param handler [optional] A reference to the handler function to remove. + */ + off(events: EventNames, handler?: EventHandler): this; + unbind(events: EventNames, handler?: EventHandler): this; + unlisten(events: EventNames, handler?: EventHandler): this; + removeListener(events: EventNames, handler?: EventHandler): this; + + /** + * Remove all event handlers on the layout. + * https://js.cytoscape.org/#layout.removeAllListeners + */ + removeAllListeners(): this; + + /** + * Trigger one or more events on the layout. + * http://js.cytoscape.org/#layout.trigger + * @param events A space separated list of event names to trigger. + * @param extraParams [optional] An array of additional parameters to pass to the handler. + */ + trigger(events: EventNames, extraParams?: any[]): this; + } + + /** + * An animation represents a visible change in state over + * a duration of time for a single element. + * Animations can be generated via cy.animation() + * (for animations on the viewport) and ele.animation() + * (for animations on graph elements). + * http://js.cytoscape.org/#animations + */ + + /** + * http://js.cytoscape.org/#animations/animation-manipulation + */ + interface AnimationManipulation { + /** + * Requests that the animation be played, starting on the next frame. + * If the animation is complete, it restarts from the beginning. + * http://js.cytoscape.org/#ani.play + */ + play(): this; + /** + * Requests that the animation be played, starting on the next frame. + * If the animation is complete, it restarts from the beginning. + * http://js.cytoscape.org/#ani.play + */ + run(): this; + /** + * Get whether the animation is currently playing. + * http://js.cytoscape.org/#ani.playing + */ + playing(): boolean; + /** + * Get whether the animation is currently playing. + * http://js.cytoscape.org/#ani.playing + */ + running(): boolean; + /** + * Get or set how far along the animation has progressed. + * http://js.cytoscape.org/#ani.progress + */ + /** + * Get the progress of the animation in percent. + */ + progress(): number; + /** + * Set the progress of the animation in percent. + * @param progress The progress in percent (i.e. between 0 and 1 inclusive) to set to the animation. + */ + progress(progress: number): AnimationManipulation; + /** + * Get the progress of the animation in milliseconds. + */ + time(): number; + /** + * Set the progress of the animation in milliseconds. + * @param time The progress in milliseconds + * (i.e. between 0 and the duration inclusive) to set to the animation. + */ + time(time: number): AnimationManipulation; + /** + * Rewind the animation to the beginning. + */ + rewind(): AnimationManipulation; + /** + * Fastforward the animation to the end. + */ + fastforward(): AnimationManipulation; + + /** + * Pause the animation, maintaining the current progress. + * http://js.cytoscape.org/#ani.pause + */ + pause(): AnimationManipulation; + /** + * Stop the animation, maintaining the current progress + * and removing the animation from any associated queues. + * http://js.cytoscape.org/#ani.stop + */ + stop(): AnimationManipulation; + /** + * Get whether the animation has progressed to the end. + * http://js.cytoscape.org/#ani.completed + */ + completed(): AnimationManipulation; + complete(): AnimationManipulation; + /** + * Apply the animation at its current progress. + * http://js.cytoscape.org/#ani.apply + */ + apply(): AnimationManipulation; + /** + * Get whether the animation is currently applying. + * http://js.cytoscape.org/#ani.applying + */ + applying(): AnimationManipulation; + /** + * Reverse the animation such that its starting + * conditions and ending conditions are reversed. + * http://js.cytoscape.org/#ani.reverse + */ + reverse(): AnimationManipulation; + /** + * Get a promise that is fulfilled with the specified animation event. + * @param animationEvent A string for the event name; completed or complete for + * completing the animation or frame for the next frame of the animation. + * http://js.cytoscape.org/#ani.promise + */ + promise(animationEvent?: "completed" | "complete" | "frame"): Promise; + } + + /** + * Cytoscape extension type + * Definition of an extension would be in following form: + * @example + * declare module 'cytoscape-ext' { + * const ext: cytoscape.Ext; + * export = ext; + * } + */ + type Ext = (cy: typeof cytoscape) => void; + /** + * Register imported extension into cytoscape + * @param module Entry point for the extension, got by module = require('cy-ext') + * or by import module from 'cy-ext' + * http://js.cytoscape.org/#extensions + */ + function use(module: Ext): void; + /** + * Surpress Cytoscape internal warnings globally with a flag. + * @param condition If true, all Cytoscape warnings are surpressed. + * https://js.cytoscape.org/#core/initialisation + */ + function warnings(condition: boolean): void; +} diff --git a/package.json b/package.json index 768041a35..e2615ae57 100644 --- a/package.json +++ b/package.json @@ -30,6 +30,7 @@ "engines": { "node": ">=0.10" }, + "types": "index.d.ts", "main": "dist/cytoscape.cjs.js", "module": "dist/cytoscape.esm.mjs", "exports": {