11

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:

enter image description here

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). enter image description here

Martin Preusse
  • 9,151
  • 12
  • 48
  • 80

1 Answers1

5

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.

maxkfranz
  • 11,896
  • 1
  • 27
  • 36
  • 3
    `cy.resize()` works in 2.2.4 but doesn't work in 2.2.5 or 2.2.6. I didn't change anything in the code except referencing 2.2.4. – Martin Preusse May 07 '14 at 15:20
  • Thanks for fixing the bug! Next time I'll raise a github issue ;) – Martin Preusse May 08 '14 at 11:29
  • Excellent, thanks! I just ran into this also and was able to resolve by using version 2.2.7. For others, make sure you go download the latest version to avoid this. – Noah Stahl May 18 '14 at 03:46