Hi thanks this works, when I apply all this to what I am working on I’m facing the problem where once the nodes are clumped up they don’t move together. When I move the mouse, one node moves and the other doesn’t or vice versa. I didn’t change anything about the above suggested code. Have you seen this behavior before ?
No, sorry, I haven’t noticed any problems. Other than the already noted-in-the-comments limitation that it doesn’t work if there are links connecting the dragged nodes.
Hi walter. Please see codepen again, it shows the behavior I’m experiencing. Note the line i added if(part !== tool.currentPart) is not in my application, just hoping if you see why this kind of behavior happens it might be able to help me out.
Also why do you use point tool.draggedParts.get(tool.currentPart).point and location part.location ? They always show different numbers.
DragingTool.draggedParts is a Map that remembers the original location for each dragged node. It is needed to avoid accumulating errors during a drag. It needs to be replaced for your situation so that during dragging over a node the clumped-together nodes stay together, and so that when leaving a node the nodes all go back to their original relative locations, not the temporary cascaded relative locations.
I found that it was easier to use a second Map to implement the clumping/collapsing animation and its opposite.
If it is replaced, why would it show erratic behavior. Is it trying to go back to its original location ?
What do you mean by this? a point and location property are opposites of each other ?
I don’t notice what I would call erratic behavior in the sample I just gave you, above.
I meant the expanding animation. The animation would move each node back to their locations that they had just before colapsing/clumping. I suppose that if the dragged-over node is large that you could find that the offset between the mouse-enter point and the mouse-leave point is large. That could be accounted for when doing the animations, but I didn’t bother in the code above.
I meant in my codepen, theres erratic behaviour
In the mouse enter you use node.location for the animation then you used part.move using tool.draggedParts.get(tool.currentPart).point, why not use tool.currentPart.location. I’m asking because in my application, location and point are two different values, what is the significance of using one over the other ?
Animations need to work on the actual locations; dragging works using the original locations.
Using the target (dragged-over) node location plus cascading offset as the animation destination makes the nodes appear to go toward the center of the stationary node. However, then they get shifted slightly to be offset from wherever the mouse is, as the mouse moves further. That’s more noticeable when the node is large. If you prefer to use something other than nloc plus cascading offset, that’s OK with me – whatever works best for your app.