cytoscape/cytoscape.js-cola

`infinite: true` not updating for grabbed compound children

fbussolin opened this issue · 6 comments

Hello,

Is possible to have AvoidOverlap/Drag features working as the same as cola library?

I mean, when you drag a node all the physics running, nodes being dragged together/etc as the same as:
http://marvl.infotech.monash.edu/webcola/examples/smallnonoverlappinggraph.html
http://marvl.infotech.monash.edu/webcola/examples/gridifiedSmallGroups.html

Instead of http://js.cytoscape.org/demos/2ebdc40f1c2540de6cf0/ behavior with all nodes being overlapped without any movement of others nodes.

I've tried those on the latest version of Chrome and Firefox.

Best Regards,

let options = {
  name: 'cola',

  // infinite layout options
  infinite: true // overrides all other options for a forces-all-the-time mode
};

cy.layout( options );

infinite: true does not work as explained.

Try to drag one node on top of others here (see the behavior during the dragging/without release mouse button. Nodes will not be overlapped and will push others):
http://marvl.infotech.monash.edu/webcola/examples/smallnonoverlappinggraph.html
http://marvl.infotech.monash.edu/webcola/examples/gridifiedSmallGroups.html

Just for example, I know infinite is not set here:
http://js.cytoscape.org/demos/2ebdc40f1c2540de6cf0/

Just to make it clear, my question is: Is possible to replicate the same behavior during dragging?

infinite: true does exactly that. Please read through the readme to make sure you set your other options appropriately, e.g.

If you want to maintain interactivity, you probably should not mix infinite: true with fit: true. Fitting naturally changes the zoom level, making dragging misaligned and feel weird to users --- though it still works technically. Better to just fit: false when inifinite: true, and cy.center() or cy.fit() on layoutready.

I read all of this, and I did...

Try for yourself:
In your demo.html change the following:

from:
{ data: { id: 'j', name: 'Jerry' } },
{ data: { id: 'e', name: 'Elaine' } },
{ data: { id: 'k', name: 'Kramer' } },
{ data: { id: 'g', name: 'George' } }

to:
{ data: { id: 'a', name: 'Group A' } },
{ data: { id: 'b', name: 'Group B' } },
{ data: { id: 'j', name: 'Jerry', parent: 'a' } },
{ data: { id: 'e', name: 'Elaine', parent: 'a' } },
{ data: { id: 'k', name: 'Kramer', parent: 'b' } },
{ data: { id: 'g', name: 'George', parent: 'b' } }

Compound nodes...

In future, please provide a live demo of any issues you run into -- or at least data plus code snippets. Otherwise, it's not possible to reproduce it properly.

Try the code on master and let me know whether it works for you.

Thanks

Sorry to not explain properly.
I will try to understand the exact terms before asking or provide data/code snippets.

Seems to be working fine after your change.

Thank you very much.