cytoscape/index.d.ts

Graph theory (a.k.a. network) library for analysis and visualisation

//
// 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;
    }

    interface BoundingBox {
        x1: number;
        y1: number;
        x2: number;
        y2: number;
        w: number;
        h: 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<ElementsDefinition>
            | Promise<ElementDefinition[]>
           ;
        /**
         * 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<StylesheetJson>;
        /**
         * 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<string, any>;

        ///////////////////////////////////////
        // 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<string, any>): 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<string, any>): 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<EventHandler>;
        pon(events: EventNames, selector?: Selector): Promise<EventHandler>;
        /**
         * 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(): BoundingBox;

        /**
         * Get the rendered extent of the viewport, a bounding box in rendered
         * coordinates that lets you know what rendered
         * positions are visible in the viewport.
         * http://js.cytoscape.org/#cy.renderedExtent
         */
        renderedExtent(): BoundingBox;

        /**
         * 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 {