Node drag and drop methods

[Nerah]

Is your feature request related to a problem? Please describe.
Let's imagine that I want all the data of my graph to be dynamically persistent.
Actually, it would be impossible for the position of the nodes.
If I take the time to change their position in a specific way and then refresh the graph directly, they all come back to their original position. I find it a bit frustrating.

Describe the solution you'd like
I have the feeling it would be meaningful to have the possibility to detect when a node is drag or drop.

Describe your use case
I would like to use these methods to get the actual position of a node that I just move. If it comes possible, I will be able to save the new position of the node.

Describe alternatives you've considered
I saw that there are actually instance methods to specify the behavior of the drag and drop action on nodes of the graph, like _onDragEnd(). It would be nice if we had the possibility to specify their behavior ourselves.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[jiriproX]

Hi, I'm looking for that feature as well. Is there any other way how to persist node position after node drag and drop? I would need to save actual node position as initial node position for next refresh.

[danielcaldas]

Hello @jiriproX you can actually achieve that just by saving the graph data object that you pass down to Graph as props in some storage (e.g. localStorage) and the add that as the initial state. It works like a charm. You need to use staticGraph or (yet to be released) a new upcoming property called staticGraphWithDragAndDrop that will still allow you to drag and drop nodes.

[jiriproX]

Hi Daniel, it seems that proposed solution does not work for my usecase. I download list of nodes and links from server. Then I generate default initial positions for nodes. That I can store to localStorage and use it for page reloading. At this point I want user to drag and drop nodes to some meaningful layout.
Here is the crucial point. I'm not able to store "that new meaningful" layout for next reload.
Do you have any advice how to achieve that?

[wendymungovan]

I have a solution but it is a little bit funky. We had to do something similar. If you extend the Graph class you can add in this function that will get at the private variables. Then your calling class will be able to call for each node and get the position when you want to do that.

/** * Gets the x,y position of the given node from the d3Nodes state * @param id node id * @returns {*|*[]} undefined or [x,y] point */ getNodePosition(id) { const node = this.state.d3Nodes.find(node =>${node.id}===${id}); return node && [node.x,node.y]; }

[jiriproX]

Requested feature seems to be delivered by onNodePositionChange callback added in PR(#228). It was merged yesterday and will be part of next release.
@danielcaldas When will be new version 2.2.x or 2.3.x released?

[danielcaldas]

Yes, @jiriproX. This will be in the next release of react-d3-graph. I'll close the issue upon release.

[jiriproX]

Hi, Question is when is next release planned? Thanks. From: Daniel Caldas [mailto:notifications@github.com] Sent: Wednesday, September 11, 2019 18:19 To: danielcaldas/react-d3-graph <react-d3-graph@noreply.github.com> Cc: Prokes, JiriX X <jirix.x.prokes@intel.com>; Mention <mention@noreply.github.com> Subject: Re: [danielcaldas/react-d3-graph] Node drag and drop methods (#204) Yes, @jiriproX<https://github.com/jiriproX>. This will be in the next release of react-d3-graph. I'll close the issue upon release. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub<#204?email_source=notifications&email_token=ADFJIBBYNEPHUFMGPKVP7E3QJEK7VA5CNFSM4HQO6FVKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOD6PBU3Y#issuecomment-530455151>, or mute the thread<https://github.com/notifications/unsubscribe-auth/ADFJIBGYMFWPNWUVCHLS76DQJEK7VANCNFSM4HQO6FVA>. -------------------------------------------------------------- Intel Research and Development Ireland Limited Registered in Ireland Registered Office: Collinstown Industrial Park, Leixlip, County Kildare Registered Number: 308263 This e-mail and any attachments may contain confidential material for the sole use of the intended recipient(s). Any review or distribution by others is strictly prohibited. If you are not the intended recipient, please contact the sender and delete all copies.

[danielcaldas]

Hi @jiriproX, I have another release planned by the end of the month. Please bear with me. Until there you can point your react-d3-graph dependency and consume it from master directly instead of npm. Checkout npm examples.

[danielcaldas]

Closing this with release of react-d3-graph@2.3.0.