How To Retain Drawn Boxes And Path On Page Refresh Mxgraph

i want to retain drawn boxes and path once page is refreshed. i'm using mxgraph https://jgraph.github.io/mxgraph/docs/manual.html Question: once the drawing is done, if i do page

Solution 1:

This uses the XML encoding of mxgraph. You see this code in one of the examples of mxGraph. While it is not json, it is very easy to turn into json, and can be edited or saved as you wish. Now it it stored in localStorage as you asked.

Add the following lines at the end of your main function (after the last call to addVertex):

// read state on load 
if(window.localStorage.graphState){
    var doc = mxUtils.parseXml(window.localStorage.graphState);
    var dec = new mxCodec(doc);
    dec.decode(doc.documentElement, graph.getModel());
}

// save state on change
graph.getModel().addListener('change',function(){
    var codec = new mxCodec();
    window.localStorage.graphState = codec.encode(
            graph.getModel()
        ).outerHTML;
});

Update using JSON

Update 2: Switched to my own custom html2json and json2html implementation to make the answer fully self-contained

If you do need a proper JSON object, you can convert from xml to json and back. Below you can see I stringify and parse the json object, this is only needed to save it in localStorage though.

First add these two functions to convert from html/xml to json and from json back to html/xml:

function html2json(html){
    if(html.nodeType==3){
        return {
            "tagName":"#text",
            "content":html.textContent
        }
    }
    var element = {
        "tagName":html.tagName
    };

    if(html.getAttributeNames().length>0){
        element.attributes = html.getAttributeNames().reduce(
            function(acc,at){acc[at]=html.getAttribute(at); return acc;},
            {}
        );
    }

    if(html.childNodes.length>0){
        element.children = Array.from(html.childNodes)
            .filter(
                function(el){
                    return el.nodeType!=3
                    ||el.textContent.trim().length>0
                })
            .map(function(el){return html2json(el);});
    }
    return element;
}

function json2html(json){
    var xmlDoc = document.implementation.createDocument(null, json.tagName);

    var addAttributes = function(jsonNode, node){
        if(jsonNode.attributes){
            Object.keys(jsonNode.attributes).map(
                function(name){
                    node.setAttribute(name,jsonNode.attributes[name]);
                }
            );
        }
    }

    var addChildren = function(jsonNode,node){
        if(jsonNode.children){
            jsonNode.children.map(
                function(jsonChildNode){
                    json2htmlNode(jsonChildNode,node);
                }
            );
        }
    }

    var json2htmlNode = function(jsonNode,parent){
        if(jsonNode.tagName=="#text"){
            return xmlDoc.createTextNode(jsonNode.content);
        }

        var node = xmlDoc.createElement(jsonNode.tagName);

        addAttributes(jsonNode,node);
        addChildren(jsonNode,node);

        parent.appendChild(node);
    }

    addAttributes(json,xmlDoc.firstElementChild);
    addChildren(json,xmlDoc.firstElementChild);

    return xmlDoc;
}

Then change my JavaScript snippet from above like this to transform the xml into json and back:

// read state on load 
if(window.localStorage.graphState){ 
    var doc = json2html(JSON.parse(localStorage.graphState));   
  var dec = new mxCodec(doc);
  dec.decode(doc.documentElement, graph.getModel());
}

// save state on change
graph.getModel().addListener('change',function(){
        var codec = new mxCodec();      
    window.localStorage.graphState = JSON.stringify(html2json(codec.encode(
      graph.getModel()
    )));
});