anvaka / VivaGraphJS

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

Proper way to handle events for multiple nodes , including touch devices - SVG renderer #231

Open gg4u opened 6 years ago

gg4u commented 6 years ago

I am looking at ngraph.events and learnt a possible use of it to register a callback function to object in https://github.com/anvaka/VivaGraphJS/issues/134

In https://github.com/anvaka/VivaGraphJS/issues/187 it shows examples to subscribe events for nodes, but it is for webgl using a canvas.

I would like to know which is better approach for registering events to nodes in SVG renderer.

So far I am following a tutorial example - https://github.com/anvaka/VivaGraphJS/blob/master/demos/tutorial_svg/04%20-%20Listen%20To%20Mouse%20Events.html

For each node, I will register three events - I m using Hammer to handle touch events on nodes, panstart / panend (pulling a node) and tap (for tap/click on a node).

Now, I would like to better handle performance of rendering.

My questions are:

1. Is registering too many events less advisable than registering one single event to the parent graph container ?

Like described here: https://www.kirupa.com/html5/handling_events_for_many_elements.htm

  1. Vivagraph come with scroll, drag and nodes function for the renderer:
renderer = Viva.Graph.View.renderer(graph, {
         ..
          interactive : 'drag nodes scroll',
        ..
          container : document.getElementById('myContainer')
      });

How can I register callback to them, so than I can capture events related to elements (graph container, nodes and links), without using external libraries ?

I should be able to capture events panstart, panend and touch - user should be able to pull nodes and tap on nodes, also from mobiles.

  1. If I was to extend other events to be listened on the renderer or on the graph object, could you show an example for doing so ?

As example, I could pass Viva.Events( graph ) where graph is an object constructed with Viva.Graph() , that will be eventified - it will add .on() .off().

I could do that for each element of the graph object.

Could you show how would you use eventify with a couple of examples, say I want to listen to tap on nodes and tap on links.

Thank you for helping to improve coding skills!

zouhairm commented 5 years ago

@gg4u : did you manage to figure out a way to do this?