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 = newmxCodec(doc);
    dec.decode(doc.documentElement, graph.getModel());
}

// save state on change
graph.getModel().addListener('change',function(){
    var codec = newmxCodec();
    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:

functionhtml2json(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){returnhtml2json(el);});
    }
    return element;
}

functionjson2html(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 = newmxCodec(doc);
  dec.decode(doc.documentElement, graph.getModel());
}

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