cytoscape.js: wrong mouse pointer position after container change

Question

I use cytoscape.js 2.2.5 to draw a graph in an angular.js app and I can properly select nodes. When the <div> with the graph moves, the mouse pointer position on the canvas is not updated. That means I have to click on the 'old' position of a node to select it.

I tried cy.reset(), cy.center() and cy.fit(), but the mouse pointer position doesn't change.

How can I update the graph after I change the position of the cytoscape <div>?

Original page:

After change of <div> position

When I remove the blue panel and the graph <div> moves up, the mouse pointer position is wrong. I use the ng-show directive (which uses css hidden/visible).

Answer 1

When you resize (or move, I suppose) the cy div, you need to notify the core of the change. Unfortunately, the browser DOM model doesn't have a way to track this automatically.

cy.resize(); // notify that the container has changed dims

http://cytoscape.github.io/cytoscape.js/#core/viewport-manipulation/cy.resize

Perhaps cy.resize() should have an alias like cy.invalidateDimensions() so it's clear you need it for your usecase.