anvaka / VivaGraphJS

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

Recreating scene without reloading - dispose or clear? #234

Open gg4u opened 6 years ago

gg4u commented 6 years ago

Hi! I was reading - https://github.com/anvaka/VivaGraphJS/issues/57

@simov I put in copy, not sure if my issue is duplicate of yours, maybe you can help me.

Could you help in finding out how to flush current visualisation and draw the same graph again, keeping all references to nodes listeners intact?

My goal is to enable the user in changing visualisation of how its graph is rendered.

The graph structure and the layout object will be the same.

Which should I call: renderer.dispose() or graph.clear() ?

I would like to render again the same graph, I don't want to clear it out: so I tried to dispose() the renderer object, and call renderer.run() again.

It almost works, but breaks interactivity for missing object reference:

the layout is actually rendered again, but as soon as I tap on nodes (there are events to them), the renderer loose reference to links coordinates.

Going down the debugging, the first function to complain is actually the one calling for new nodes to be added to the graph, once a node is tapped - it seems cannot find a reference to the node that has been tapped.

I have something like:

graphics.node(function (node) {

    $(ui).on('tap', function (event) {  

        // this will break once the renderer was disposed and re run.
        addRelatedNodes(graph,node.id)
    }
}
screen shot 2018-09-26 at 12 46 48 pm

Should I copy the graph object first ?

I looked at https://github.com/anvaka/VivaGraphJS/issues/57 and @anvaka 's: example pointed out an error for pointing the new graph objects constructed as:

var newGraph = App.graphGenerator.grid(Math.random() * 20 |0 , Math.random() * 20 |0);

....but should I need to make a copy of my graph object, if it is actually the same ? Also, making a shallow copy or deep copy sounds a bit cumbersome.