Interface Core

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 {
    $(selector: string): CollectionReturnValue;
    $id(id: string): CollectionReturnValue;
    add(eles:
        | ElementDefinition
        | ElementsDefinition
        | ElementDefinition[]
        | CollectionArgument): CollectionReturnValue;
    addListener(events: string, handler: EventHandler): this;
    addListener(events: string, selector: string, handler: EventHandler): this;
    addListener(events: string, selector: string, data: any, handler: EventHandler): this;
    addListener(eventsMap: {
        [value: string]: EventHandler;
    }, selector?: string, data?: any): this;
    animate(anis: AnimateOptions, options?: AnimateOptions): cytoscape.Core;
    animated(): boolean;
    animation(options: AnimationOptions): AnimationManipulation;
    attr(name?: string): any;
    attr(name: string, value: any): this;
    attr(obj: Record<string, any>): this;
    autolock(): boolean;
    autolock(bool?: boolean): this;
    autoungrabify(): boolean;
    autoungrabify(bool?: boolean): this;
    autounselectify(): boolean;
    autounselectify(bool?: boolean): this;
    batch(callback: (() => void)): void;
    bind(events: string, handler: EventHandler): this;
    bind(events: string, selector: string, handler: EventHandler): this;
    bind(events: string, selector: string, data: any, handler: EventHandler): this;
    bind(eventsMap: {
        [value: string]: EventHandler;
    }, selector?: string, data?: any): this;
    boxSelectionEnabled(): boolean;
    boxSelectionEnabled(bool?: boolean): this;
    center(eles?: CollectionArgument): this;
    centre(eles?: CollectionArgument): this;
    clearQueue(): cytoscape.Core;
    collection(eles?: string | CollectionArgument[]): CollectionReturnValue;
    container(): null | HTMLElement;
    createLayout(options: LayoutOptions): Layouts;
    data(name?: string): any;
    data(name: string, value: any): this;
    data(obj: Record<string, any>): this;
    delay(duration: number, complete?: (() => void)): cytoscape.Core;
    delayAnimation(duration: number): AnimationManipulation;
    destroy(): void;
    destroyed(): boolean;
    edges(selector?: string): cytoscape.EdgeCollection;
    elements(selector?: string): CollectionReturnValue;
    emit(events: string, extraParams?: any[]): this;
    endBatch(): void;
    extent(): {
        h: number;
        w: number;
        x1: number;
        x2: number;
        y1: number;
        y2: number;
    };
    filter(selector: string | ((ele: Singular<SingularElementReturnValue, SingularElementArgument>, i: number, eles: CollectionArgument) => boolean)): CollectionReturnValue;
    fit(eles?: CollectionArgument, padding?: number): this;
    forceRender(): this;
    getElementById(id: string): CollectionReturnValue;
    hasElementWithId(id: string): boolean;
    height(): number;
    invalidateDimensions(): this;
    jpeg(options?: ExportJpgStringOptions): string;
    jpeg(options?: ExportJpgBlobOptions): Blob;
    jpeg(options?: ExportJpgBlobPromiseOptions): Promise<Blob>;
    jpg(options?: ExportJpgStringOptions): string;
    jpg(options?: ExportJpgBlobOptions): Blob;
    jpg(options?: ExportJpgBlobPromiseOptions): Promise<Blob>;
    json(): object;
    json(json: object): this;
    layout(layout: LayoutOptions): Layouts;
    listen(events: string, handler: EventHandler): this;
    listen(events: string, selector: string, handler: EventHandler): this;
    listen(events: string, selector: string, data: any, handler: EventHandler): this;
    listen(eventsMap: {
        [value: string]: EventHandler;
    }, selector?: string, data?: any): this;
    makeLayout(options: LayoutOptions): Layouts;
    maxZoom(): number;
    maxZoom(zoom: number): this;
    minZoom(): number;
    minZoom(zoom: number): this;
    mount(element: Element): void;
    nodes(selector?: string): cytoscape.NodeCollection;
    off(events: string, handler?: EventHandler): this;
    off(events: string, selector: string, handler?: EventHandler): this;
    off(eventsMap: {
        [value: string]: EventHandler;
    }, selector?: string): this;
    on(events: string, handler: EventHandler): this;
    on(events: string, selector: string, handler: EventHandler): this;
    on(events: string, selector: string, data: any, handler: EventHandler): this;
    on(eventsMap: {
        [value: string]: EventHandler;
    }, selector?: string, data?: any): this;
    one(events: string, handler: EventHandler): this;
    one(events: string, selector: string, handler: EventHandler): this;
    one(events: string, selector: string, data: any, handler: EventHandler): this;
    one(eventsMap: {
        [value: string]: EventHandler;
    }, selector?: string, data?: any): this;
    pan(): Position;
    pan(renderedPosition?: Position): this;
    panBy(renderedPosition: Position): this;
    panningEnabled(): boolean;
    panningEnabled(bool?: boolean): this;
    png(options?: ExportStringOptions): string;
    png(options?: ExportBlobOptions): Blob;
    png(options?: ExportBlobPromiseOptions): Promise<Blob>;
    pon(events: string, selector?: string): Promise<EventHandler>;
    promiseOn(events: string, selector?: string): Promise<EventHandler>;
    ready(fn: EventHandler): this;
    remove(eles: string | CollectionArgument): CollectionReturnValue;
    removeAllListeners(): this;
    removeAttr(names?: string): this;
    removeData(names?: string): this;
    removeListener(events: string, handler?: EventHandler): this;
    removeListener(events: string, selector: string, handler?: EventHandler): this;
    removeListener(eventsMap: {
        [value: string]: EventHandler;
    }, selector?: string): this;
    removeScratch(namespace: string): this;
    reset(): this;
    resize(): this;
    scratch(namespace?: string): any;
    scratch(namespace: string, value: any): this;
    selectionType(): SelectionType;
    selectionType(type: SelectionType): this;
    startBatch(): void;
    stop(clearQueue?: boolean, jumpToEnd?: boolean): cytoscape.Core;
    style(sheet?: string | Stylesheet | Stylesheet[]): Style;
    trigger(events: string, extraParams?: any[]): this;
    unbind(events: string, handler?: EventHandler): this;
    unbind(events: string, selector: string, handler?: EventHandler): this;
    unbind(eventsMap: {
        [value: string]: EventHandler;
    }, selector?: string): this;
    unlisten(events: string, handler?: EventHandler): this;
    unlisten(events: string, selector: string, handler?: EventHandler): this;
    unlisten(eventsMap: {
        [value: string]: EventHandler;
    }, selector?: string): this;
    unmount(): void;
    userPanningEnabled(): boolean;
    userPanningEnabled(bool?: boolean): this;
    userZoomingEnabled(): boolean;
    userZoomingEnabled(bool?: boolean): this;
    viewport(options: {
        pan: Position;
        zoom: number;
    }): this;
    width(): number;
    zoom(): number;
    zoom(level?: ZoomOptions): this;
    zoomingEnabled(bool?: boolean): this;
}

Hierarchy (view full)

Methods

$ $id add addListener animate animated animation attr autolock autoungrabify autounselectify batch bind boxSelectionEnabled center centre clearQueue collection container createLayout data delay delayAnimation destroy destroyed edges elements emit endBatch extent filter fit forceRender getElementById hasElementWithId height invalidateDimensions jpeg jpg json layout listen makeLayout maxZoom minZoom mount nodes off on one pan panBy panningEnabled png pon promiseOn ready remove removeAllListeners removeAttr removeData removeListener removeScratch reset resize scratch selectionType startBatch stop style trigger unbind unlisten unmount userPanningEnabled userZoomingEnabled viewport width zoom zoomingEnabled

Methods

$

$id

add

addListener

animate

animated

animation

attr

autolock

autoungrabify

autounselectify

batch

bind

boxSelectionEnabled

center

centre

clearQueue

collection

container

createLayout

data

delay

delayAnimation

destroy

destroyed

edges

elements

emit

endBatch

extent

filter

fit

forceRender

getElementById

hasElementWithId

height

invalidateDimensions

jpeg

jpg

json

layout

listen

makeLayout

  • makeLayout(options): 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().

    Parameters

    Returns Layouts

maxZoom

minZoom

mount

nodes

off

on

one

  • one(events, handler): this

  • Bind to events that occur in the graph, and trigger the handler only once.

    Parameters

    • events: string

      A space separated list of event names.

    • handler: EventHandler

      The handler function that is called when one of the specified events occurs.

    Returns this

  • one(events, selector, handler): this

  • Bind to events that occur in the graph, and trigger the handler only once.

    Parameters

    • events: string

      A space separated list of event names.

    • selector: string

      A selector to specify elements for which the handler is triggered.

    • handler: EventHandler

      The handler function that is called when one of the specified events occurs.

    Returns this

  • one(events, selector, data, handler): this

  • Bind to events that occur in the graph, and trigger the handler only once.

    Parameters

    • events: string

      A space separated list of event names.

    • selector: string

      A selector to specify elements for which the handler is triggered.

    • data: any

      A plain object which is passed to the handler in the event object argument.

    • handler: EventHandler

      The handler function that is called when one of the specified events occurs.

    Returns this

  • one(eventsMap, selector?, data?): this

  • Bind to events that occur in the graph, and trigger the handler only once.

    Parameters

    • eventsMap: {
          [value: string]: EventHandler;
      }

      A map of event names to handler functions.

    • Optionalselector: string

      A selector to specify elements for which the handler is triggered.

    • Optionaldata: any

      A plain object which is passed to the handler in the event object argument.

    Returns this

pan

panBy

panningEnabled

png

pon

promiseOn

ready

remove

removeAllListeners

removeAttr

removeData

removeListener

removeScratch

reset

resize

  • resize(): 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

    Returns this

scratch

selectionType

startBatch

stop

style

trigger

unbind

unlisten

unmount

userPanningEnabled

userZoomingEnabled

viewport

width

zoom

zoomingEnabled

Settings

Member Visibility

On This Page

Methods