nabil6391 / graphview

Flutter GraphView is used to display data in graph structures. It can display Tree layout, Directed and Layered graph. Useful for Family Tree, Hierarchy View.
MIT License
424 stars 117 forks source link

can u add draggable feature!!!! #1

Closed DeepStyles closed 2 years ago

nabil6391 commented 4 years ago

@DeepStyles can you explain a bit more? what is the use case and what do you actually want.

DeepStyles commented 4 years ago

K for directional view, I can use draggable feature to drag any node which helps in mindmap kinda app tht exist in other platforms. I saw widget_ arrows package which kinda similar to this one, but don't hav draggable feature.

nabil6391 commented 4 years ago

It might be something that can be done in force directed graph, I will see what can be done.

nabil6391 commented 4 years ago

I was able to to it partially, but there are some bugs so might take time.

DeepStyles commented 4 years ago

r u using stateful widgets with globlal key??(theres also draggable package on pub)

nabil6391 commented 4 years ago

The problem is that I am setting the nodes position on my own. Have to adjust similarly

nabil6391 commented 4 years ago

@DeepStyles have a look at version 0.6.0 . The example is also updated

DeepStyles commented 4 years ago

nice had a peek, cant we drag the individual node (including arrow following around)???

nabil6391 commented 4 years ago

Not sure what you mean. Did you look at the gif?

DeepStyles commented 4 years ago

In the gif, it's dragging entire graph instead can we have options to drag individual nodes.

nabil6391 commented 4 years ago

It is actually dragging individual nodes, after which the nodes around it moves according to repulsion

DeepStyles commented 4 years ago

Instead of nodes around moving can't we have just connections moving when we drag related node.

nabil6391 commented 4 years ago

Best if you give an example of what are describing

roberteverman commented 4 years ago

Here's something I just threw together using a timer, custom painter and provider. I also ended up creating my own spring algorithm for the interactive repulsion and attraction between nodes. I think this is along the lines of what DeepStyles is talking about. It's also a little smoother than what is shown in the GIF. I recommend checking out the Java library Graph Stream for inspiration (https://graphstream-project.org/). I don't think it has been updated in a while but it would be awesome if that level of functionality existed in Flutter. Example 1 Example 4

DeepStyles commented 4 years ago

looks cool with animations...

nabil6391 commented 4 years ago

Yes looks very good, I am not that good with animations though, if you can share the code @roberteverman or maybe look into mine, to give a suggestion that would be great.

DeepStyles commented 4 years ago

lol github glitchy for me, anyway can we able to add and delete nodes dynamically(I saw nodes are pre-added in init method.

nabil6391 commented 4 years ago

Yes we can add and remove notes dynamically. Have a look at the examples.

roberteverman commented 4 years ago

Yes looks very good, I am not that good with animations though, if you can share the code @roberteverman or maybe look into mine, to give a suggestion that would be great.

Absolutely! I'm a bit of a novice so I'll clean up my code, make it more readable and upload it by this weekend. I used the Graph, node and edge classes from your library but instead of the graphview I used my own positioned widgets inside of a stack and updated the positions dynamically based on gesture controllers on the nodes. There's probably a much better way to do it. For the animations, I just used a timer and stepped through the attraction / repulsion calculations updating the nodes every hundred milliseconds or so. The edges were done the same way but drawn with a custom painter. I set it up so I can stop and start the timer / animations using a boolean attached to the play button. The reset button just randomizes the starting coordinates for each node. I'm sure you can probably find a better way that uses less memory but it at least works well with small graphs.

roberteverman commented 3 years ago

Yes looks very good, I am not that good with animations though, if you can share the code @roberteverman or maybe look into mine, to give a suggestion that would be great.

Sorry for the delayed response. I've uploaded a (somewhat) cleaner version of my code in the example above here:

https://github.com/roberteverman/animated_graphview

Feel free to try it out here:

https://roberteverman.github.io/animated_graphview/#landing_screen

The play button in the top corner starts and stops the animations so you can drag the nodes individually. The refresh button randomizes the positions of the nodes. It's very basic and like I said there's probably at least a million ways of doing it better. Hopefully this gives you a couple of ideas for adding a draggable feature!

smhoz commented 3 years ago

I'm waiting for this feature (including arrow following around and arrow change)

nabil6391 commented 2 years ago

The draggable feature has been added now for directed graphs Have a look