EventTypes

Event types

There are a number of event types that you can bind to with Cytoscape Web. They are listed below.

Any object that can be bound to (cy, cy.background() and collections) has a set of shortcut functions that can be used in place of bind() and trigger(). These shortcut functions share the same name as their corresponding event:

function handler(){
  console.log("handler");
}

cy.nodes().bind("click", handler); // this line
cy.nodes().click(handler);         // is the same as this line

cy.nodes().trigger("click"); // this line
cy.nodes().click();          // is the same as this line

All events that occur for the background or an element in the graph bubble up to the core.

User input device events

These are normal browser events that you can bind to via Cytoscape Web. You can bind these events to the core, to the background of the graph, and to collection.

• mousedown : when the mouse button is pressed
• mouseup : when the mouse button is released
• click : after mousedown then mouseup
• mouseover : when the cursor is put on top of the target
• mouseout : when the cursor is moved off of the target
• mousemove : when the cursor is moved somewhere on top of the target
• touchstart : when one or more fingers starts to touch the screen
• touchmove : when one or more fingers are moved on the screen
• touchend : when one or more fingers are removed from the screen

Collection events

These events are custom to Cytoscape Web. You can bind to these events for collections.

• select : when an element is selected
• unselect : when an element is unselected
• lock : when an element is locked
• unlock : when an element is unlocked
• grab : when an element is grabbed by the mouse cursor or a finger on a touch input
• drag : when an element is grabbed and then moved
• free : when an element is freed (i.e. let go from being grabbed)
• position : when an element changes position
• data : when an element's data is changed
• bypass : when an element's bypass is changed
• add : when an element is added to the graph
• remove : when an element is removed from the graph

Graph events

These events are custom to Cytoscape Web, and they occur on the core.

• layoutstart : when a layout starts running
• layoutready : when a layout has set positions for all the nodes
• layoutstop : when a layout has finished running completely or otherwise stopped running
• load : when a new graph is loaded via cy.load()
• ready : when a new instance of Cytoscape Web is ready to be interacted with
• done : when a new instance of Cytoscape Web is ready to be interacted with and its initial layout has finished running
• pan : when the viewport is panned
• zoom : when the viewport is zoomed