Giters

cytoscape / cytoscape.js-edgehandles

Edge creation UI extension for Cytoscape.js

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Handle rendering with cytoscape.js-cola

timmh opened this issue · comments

commented

Hi,

I am facing an issue using edgehandles together with cytoscape.js-cola with infinite: true.
When hovering over a node, the handle flickers and is impossible to grab.
A minimal example of this behavior can be seen here: https://codesandbox.io/s/elegant-elgamal-ie8qu
As soon as the layout is stopped, the handles display as expected.
Please let me know if this is considered an issue with cytoscape.js-cola.

Best regards

commented

I think that the infinite mode of Cola is incompatible with edgehandles. Infinite mode continuously positions the nodes, while a change in position necessitates hiding the handle.

Mixing those two features together doesn't make sense from a UI perspective, even if the technical problems could be addressed: It would be frustrating to try to create an edge while the nodes are moving.

While infinite mode makes for a fancy demo, it is an antipattern for many types of apps.

commented

Thank you for your response. I don't quite understand why a change in position necessarily requires hiding the handles, as long as the mouse cursor is still within the node's bounds (or at all for touch devices). Mixing those two features makes sense for my use case, particularly because the node positions converge quickly. But I get your point.
Currently I work around this issue by doing something similar to:

cy.on("mouseover", "node", () => layout.stop())
cy.on("mouseout", "node", () => layout.start())

This is however not ideal if the layout has not yet converged and the user accidentally hovers a node, and it doesn't work at all for touch devices.

commented

If the node moves, the handle is no longer in the correct place. Further a change in position indicates that the user is not interested in drawing edges at the moment: For example, a user can be dragging a node or he can be drawing an edge -- but he can never do both at once.

If drawing edges is important to you, you could consider not using an infinite mode of a layout. Consider running a layout as needed rather than all the time.

commented

OK, thank you for your time and effort.