mxGraph -Save functionality not working locally

4
votes

I downloaded https://github.com/jgraph/mxgraph open source code from Git,this application Save functionality not working in the locally. Is there any possible for run the save functionality in Locally?. is there any configuration required for that? please help me.

enter image description here

After save button click getting below error message

enter image description here

2
mxgraphdraw.io
What do you want to achieve with this "Save"/"Export"? Download a draft of the current graph so that you could later import it? Download a .svg file? – NickAth
@NickAth,I want to save current displaying diagram, but not able to do it, there is showing error message once I click the save button that time will show one popup for select save type like svg,xml etc...Then I select xml or choose any other option then after click the save button then showing error message. There is any local configuration required for save functionality? – Sajith
Have you setup a backend server? MxGraph has two parts: the JS and html frontend, and the java|php|.Net backend. The backend is required for saving – Andrew Core
I guess as @AndrewCore suggests you have to set up a backend to apply this save functionality, however there are ways to save your diagram in xml format (which you can re-use to upload later) using only Javascript on the client side, if you are interested in this I could provide a snippet of code. – NickAth
This is the GraphEditor example, it has a README, github.com/jgraph/mxgraph/tree/master/javascript/examples/… – Thomas the Tank Engine

2 Answers

3
votes

I provide the code snippets for local save && upload of the saved file

code to export the xml of the current graph object

let encoder = new mxCodec();
let result = encoder.encode(graph.getModel());
let xml = mxUtils.getXml(result);
//workaround for the xml export, do not include the <mxGraphModel> tags
xml = xml.substring(xml.indexOf("<mxGraphModel>")+"<mxGraphModel>".length, xml.indexOf("</mxGraphModel>"));

code to upload the xml to re-generate the saved state of the graph

let doc = mxUtils.parseXml(xml);
let codec = new mxCodec(doc);
codec.decode(doc.documentElement, graph.getModel());
let elt = doc.documentElement.firstChild;
let cells = [];
while (elt != null)
{   
    let cell = codec.decode(elt)
    if(cell != undefined){
            if(cell.id != undefined && cell.parent != undefined && (cell.id == cell.parent)){
                elt = elt.nextSibling;
                continue;
            }
            cells.push(cell);
    }
    elt = elt.nextSibling;
}
graph.addCells(cells);
2
votes

You can save locally by using the mxCodec class found in the IO package. Check out the example code here. I'm not sure how to tie it into that specific button, but find the function that is called when you click save and add/replace it with the three lines needed to encode as xml.

As for how to get that xml code to save as a file, I'm not sure. Perhaps you'll find that code when you modify the save button functionality. The easy way would be to create a div and replace its innerhtml with the xml data, then just copy it and save it yourself.