search

cytoscape / cytoscape.js-compound-drag-and-drop

Compound node drag-and-drop UI for adding and removing children
MIT License
33 stars 15 forks source link

Prevent dropSibling orphan from snapping to draggedNode #35

Open TheDrEmil opened 1 month ago

TheDrEmil commented 1 month ago

When using this configuration of compound drag and drop:

newParentNode: (grabbedNode, dropSibling) => { return dropSibling; },

the drop sibling snaps towards the dragged node when the specified overThreshold is surpassed. However the dropSibling should not move and only expand its border to include the dragged node.

maxkfranz commented 1 month ago

Would you upload a video and a demo (jsbin, codepen, etc.) to demonstrate your issue?

TheDrEmil commented 2 weeks ago

Hi,

sorry for the late response. Here is the code: https://codepen.io/DrEmil/pen/xxoxrpR

and here is the demo video:

DnD Issue Demo

When you drag a node towards an orphan, the orphan snaps towards the draggedNode, however when you drag another node towards the compound node, it simply extends its border to include the draggedNode. How can I make the orphan node not snap towards the draggedNode but only extend its border just as the compound node?

Thank you

maxkfranz commented 2 days ago

When you drag a node towards an orphan, the orphan snaps towards the draggedNode, however when you drag another node towards the compound node, it simply extends its border to include the draggedNode.

Yes

See re. position & dimensions: https://js.cytoscape.org/#notation/compound-nodes

How can I make the orphan node not snap towards the draggedNode but only extend its border just as the compound node?

There are classes on all the relevant nodes, as documented in the readme. You can try styling the network as you have in mind.