add dinamically new nodes : which API for PIXI graphics VS vivagraph?
- Dominant language
- No language data
- Stars
- 1.5k
- Forks
- 130
- PR merge metrics
- No merged PRs in 30d
Description
Hi,
I would like to to switch from vivagraph SVG rendering to webGL based on PIXI.
I am looking at the PIXI examples, but struggle to understand how the logic works respect to vivagraph.
In the PIXI example, you define a getNodeAt function on stage, to return the node at coordinates x,y.
But like that the stage is bounded to graphics, and while I can interact with coordinates, I can't interact with the graph object. So I don't know how to call graph.addNodes or createNodeUI to add new graphs elements.
So I tried to add a native PIXI event to the sprite of nodes themselves, when I initialise a new node - http://pixijs.download/v4.3.4/docs/PIXI.interaction.InteractionManager.html#event:click -
like:
```
function initNode(node) {
var bunny = new PIXI.Sprite.fromImage('2.png');
bunny.interactive = true;
bunny.on('tap', function(e) {
alert("tap!!");
});
graphics.addChild(bunny);
}
```
But, despite I don't see any error, it does not work and the event does not fire.
Only` stage.movedown` seems to work.
Instead, with Viva it was really great API, for I could just swtich the renderer engine between svg and webgl.
Could you show examples on how to handle adding or removing graph elements in pixigraphics ?
Can pixi rendering be integrated in vivagraph , instead of WebGL rendering ? Could someone show an example?
That would be ideal, for PIXI can already handle well all the webgl part.
Contributor guide
No contributing guide indexed for this repository
Research direction
Start by reviewing the PIXI interaction documentation linked in the issue and the existing ngraph APIs named there: graph.addNodes, createNodeUI, and the initNode example. Reproduce why the node sprite's tap event does not fire, then determine whether examples can cover adding and removing graph elements and integrating PIXI rendering with vivagraph.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript
- Domain
- computer-graphics, web-dev
- Issue type
- Feature
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 20/100