Proper way to handle events for multiple nodes , including touch devices - SVG renderer
- Dominant language
- JavaScript
- Stars
- 3.9k
- Forks
- 418
- PR merge metrics
- No merged PRs in 30d
Description
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
2. 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.
3. 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!
Contributor guide
No contributing guide indexed for this repository
Research direction
Start with demos/tutorial_svg/04 - Listen To Mouse Events.html and the ngraph.events usage described in issues #134 and #187. Trace the SVG renderer's interactive options and determine how the requested node, container, link, and touch events relate to the existing API. Done means the supported approach or a clearly scoped renderer change is documented for the listed events.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript
- Domain
- frontend
- Issue type
- Feature
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 25/100