anvaka / anvaka/VivaGraphJS

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

Open
#231 1 comment 1 reaction 0 assignees View on GitHub
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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.