anvaka / VivaGraphJS

Graph drawing library for JavaScript
Other
3.76k stars 425 forks source link

convert multi select demo into reusable component #104

Open anvaka opened 9 years ago

anvaka commented 9 years ago

Currently vivagraph allows to select only one node at time. Sometimes it's useful to be able to select multiple nodes.

https://github.com/anvaka/VivaGraphJS/tree/master/demos/other/webgl-area-select - gives a good starting point of how to do it, but it is not structured as a highly reusable component.

Converting it into component would simplify code reuse

danpaulsmith commented 9 years ago

I'm going to try to take this further and allow the user to drag multiple nodes after selecting. If you can help me start that would be appreciated

danpaulsmith commented 9 years ago

Struggling a little with this. You're returning "bindDragNDrop" in webglInputManager.js, but I don't know when to call that. I want to preserve your current dragndrop functionality for webgl nodes, but I want to add in the ability to translate multiple nodes if they have been selected.

anvaka commented 9 years ago

Dan, I think current implementation of input events is a little bit messed up. I'm struggling myself with it quite often. Still couldn't find an extensible way to implement it.

The bindDragNDrop function is more appropriate for a single node. In case of multiple nodes it is less helpful. Instead what you could do, is handle mouse events yourself.

You can get list of selected nodes following example of higlightIfInside. After you get all selected nodes track mouseDown/mouseMove/mouseUp events, and set each node position, similar to how renderer does it

danpaulsmith commented 9 years ago

Thanks, that did the trick :thumbsup:

On 20 Feb 2015, at 01:47, Andrei Kashcha notifications@github.com wrote:

Dan, I think current implementation of input events is a little bit messed up. I'm struggling myself with it quite often. Still couldn't find an extensible way to implement it.

The bindDragNDrop function is more appropriate for a single node. In case of multiple nodes it is less helpful. Instead what you could do, is handle mouse events yourself.

You can get list of selected nodes following example of higlightIfInside. After you get all selected nodes track mouseDown/mouseMove/mouseUp events, and set each node position, similar to how renderer does it

— Reply to this email directly or view it on GitHub.

daniloimparato commented 5 years ago

@danpaulsmith would you happen to still have your solution lying around?