is there event emitted when cy.add(elements) finished? appears there's event fired each element added, don't see event when elements have been added , rendered.
ex:
var elements = [ { data: {id: 'n1'} }, { data: {id: 'n2'} }, { data: {id: 'n3'} }, ]; cy.add(elements); cy.on('add',function(evt){ console.log('element added') }) the log run 3 times.
update refactored per comment. allow detect , after each "batch" added.
i started example cytoscape.js website , heavily edited answer.
you want run snippet full screen see canvas , console @ same time.
// generating new ids var ids = []; function newid() { if (!ids.length) { ids.push('1'); } else { var id = '' + (parseint(ids[ids.length - 1]) + 1); ids.push(id); } return ids[ids.length - 1]; } // draw first time var cy = cytoscape({ container: document.getelementbyid('cy'), elements: [], // don't add elements style: [{ selector: 'node', style: { 'background-color': '#666', 'label': 'data(id)', 'width': 10, 'height': 10 } }, { selector: 'edge', style: { 'width': 3, 'line-color': '#ccc', 'target-arrow-color': '#ccc', 'target-arrow-shape': 'triangle' } }], layout: { name: 'grid', rows: 1 } }); var batchtotal = 0; var totaladded = 0; // start listening events cy.on('add', function(evt) { console.log('event heard: add'); if (totaladded < batchtotal) { totaladded++; } console.log('totaladded/batchtotal: ', totaladded + '/' + batchtotal); if (totaladded == batchtotal) { console.log('entire batch added'); // whatever want! } }); var xstart = 10; var x = xstart; var y = 40; var xinc = 20; var yinc = 30; var max = 200; var addtotal = 2; // adding new elements function add() { // let's build multiple elements add @ once var elements = []; var id; var el; (var = 0; < addtotal; i++) { id = newid(); el = { data: { id: id }, position: { x: x, y: y } }; elements.push(el); if (x <= max) { x += xinc; } else { x = xstart; y += yinc; } } addelements(elements); } // wrap cy.add() method // can inject our total counter function addelements (elements) { if (!array.isarray(elements)) elements = [elements]; // convert array // useful in more robust app // addtotal may change batchtotal = elements.length; // reset totaladded = 0; cy.add(elements); }<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>cytoscapejs example</title> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/cytoscape/2.7.0/cytoscape.js"></script> <style type="text/css"> #cy { width: 300px; height: 300px; display: block; } </style> </head> <body> <button onclick="add()">add</button> <p>click add , watch console. <strong>entire batch added</strong> message.</p> <div id="cy"></div> <script type="text/javascript" src="js/app.js"></script> </body> </html>