0

I've been working through the cytoscape edgehandles demo and I experienced several problems while manipulating it.

First of all, it looks like the canvas context is not x=0, y=0 in the cy viewport, as the position of a node situated at the top left corner is not 0,0.

Second, if the cy div is embedded into a div that is first set to {display:none}, when one uses a jquery function to show it ($("div#id").show();), the graph is not displayed in the viewport any more.

When it can eventually be displayed (the window must be manually resized by the user to display it), the graph scale has diminished, and all nodes appear on the top left corner of the viewport. The graph default settings have been altered.

How could this problems be avoided? Any hint would greatly be appreciated!

umbolt
  • 23
  • 6

1 Answers1

0

First of all, it looks like the canvas context is not x=0, y=0 in the cy viewport, as the position of a node situated at the top left corner is not 0,0.

You can't assume (0, 0) if you use a layout that could change the viewport (via fit for example).

Second, if the cy div is embedded into a div that is first set to {display:none}, when one uses a jquery function to show it ($("div#id").show();), the graph is not displayed in the viewport any more.

Yes. You can't do that (or at least in that way or alone). Cy.js can't get the dimensions that way. You'll have to use cy.resize(), as mentioned in the docs for init.

Or you could use something other than display: none for hiding, like off-page absolute positioning etc.

When it can eventually be displayed (the window must be manually resized by the user to display it), the graph scale has diminished, and all nodes appear on the top left corner of the viewport. The graph default settings have been altered.

Yes, because the window resize can be detected whereas your show/hide can not (because of a limitation of HTML+CSS). Again, use cy.resize().

maxkfranz
  • 11,896
  • 1
  • 27
  • 36