Undo/Redo

This is used if you've made a mistake or by any other reason you want to undo the changes you have made. You can undo and redo many actions in FlowChart JS and you have a counters for both. Evey undo/redo action is saved in the Window sessionStorage property and can be saved in the database too.

How to add undo/redo buttons:

You just need to add the menuBar:

 
   Copy
chart.uiMenuBar.show();
    

Edit in BALKAN Code

Shortcuts

How to update the database:

With undo/redo option you need to use the onChanged method to update the database:

 
   Copy
chart.onChanged(function(args){
    var data = chart.json();
    // post data to server
    // ...
});
    

UI customization:

You can use the onChange method to crete your own UI.

HTML:

 
           Copy
<button id="btn_undo">Undo</button>
<button id="btn_redo">Redo</button>
    

 
   Copy
let btn_undo = document.getElementById('btn_undo');
let btn_redo = document.getElementById('btn_redo');


let refreshBtnUI = function(){
    btn_undo.innerHTML = `undo (${chart.undoStepsCount()})`;          
    btn_redo.innerHTML = `redo (${chart.redoStepsCount()})`;        
    btn_undo.disabled = chart.undoStepsCount() == 0;
    btn_redo.disabled = chart.redoStepsCount() == 0;
}

chart.onUndoRedoChanged(function(){        
    refreshBtnUI();
    return false;
});

btn_undo.addEventListener('click', function(){
    chart.undo();
});

btn_redo.addEventListener('click', function(){
    chart.redo();
});
    

Edit in BALKAN Code