mxGraph -Save functionality not working locally

Question

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.

After save button click getting below error message

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, Jun 19 '19 at 22:54
@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, Jun 20 '19 at 06:31
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, Jun 20 '19 at 20:23
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, Jun 20 '19 at 20:50
This is the GraphEditor example, it has a README, https://github.com/jgraph/mxgraph/tree/master/javascript/examples/grapheditor — Frodo Baggins, Jun 21 '19 at 07:57

score 3 · Answer 1 · answered Jun 24 '19 at 11:00

3

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);

answered Jun 24 '19 at 11:00

NickAth

1,089
1
14
35

@NickAuth, I used this code let result = encoder.encode(graph.getModel()); but console is throwing the error 'graph is undefined'. How I can declare the graph? – Bala Jul 15 '19 at 10:37
@Bala it seems that you have not created any `graph` object that is the main object for `mxgraph` to create a diagram, could you please show me the code you have used so far or create another question? – NickAth Jul 15 '19 at 10:39
@NickAuth, I can get the whole XML using local stoarage as below, Editor.useLocalStorage = true; var temp = localStorage['testing.xml']; but as per my requirement I have to get the XML without using localstorage. – Bala Jul 15 '19 at 10:51
@NickAuth, I used this let encoder = new mxCodec(); let result = encoder.encode(graph.getModel()); let xml = mxUtils.getXml(result); How to create a graph object? – Bala Jul 15 '19 at 10:59
1

I see that you have already posted a question here https://stackoverflow.com/questions/56899522/how-to-get-the-xml-string-from-mxgrpah-diagram , lets discuss it there – NickAth Jul 15 '19 at 11:09
@NickAuth, I have edited the question https://stackoverflow.com/questions/56899522/ – Bala Jul 15 '19 at 12:08
again, This time XML to diagram. I used your code snippet above 'code to upload the xml to re-generate the saved state of the graph' but getting the exception as below. Uncaught TypeError: cell.getParent is not a function at mxGraphModel.getParent (mxGraphModel.js:602) at mxGraph.cellsAdded (mxGraph.js:4658) at mxGraph.addCells (mxGraph.js:4621) – Bala Jul 17 '19 at 10:38
I have a tricky workaround for this case but I do not think that is relevant to this thread, could you update this https://stackoverflow.com/questions/56899522/ question or open a new one? – NickAth Jul 17 '19 at 11:34

score 2 · Answer 2 · answered Jun 21 '19 at 01:40

2

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.

answered Jun 21 '19 at 01:40

Andrew Core

76
7

my code block here, SAVE_URL="C:\Sajith" value like this Now there is no error but xml not able to SAVE. can u help me here any issue ? – Sajith Jun 27 '19 at 07:05
Code block: ExportDialog.saveLocalFile = function (editorUi, data, filename, format) { if (data.length < MAX_REQUEST_SIZE) { editorUi.hideDialog(); var req = new mxXmlRequest(SAVE_URL, 'xml=' + encodeURIComponent(data) + '&filename=' + encodeURIComponent(filename) + '&format=' + format); req.simulate(document, '_blank'); alert(document); } else { mxUtils.alert(mxResources.get('drawingTooLarge')); mxUtils.popup(xml); } }; – Sajith Jun 27 '19 at 07:05
Honestly, I'm not sure what the issue is myself, I'm also trying to solve this same problem... I think the main problem is that I can't get the save dialog to come up. My current solution is to take the encoded diagram that I want to save, and setting document.body.innerHTML(xml);, then just copying and saving that manually. – Andrew Core Jun 28 '19 at 18:22
What exactly happens when you run your code? For me, clicking save just does nothing. – Andrew Core Jun 28 '19 at 18:37
@Sajith, Hope you able to get the xml from diagram. Can you please share with me? I am also struggling with the same issue. – Bala Jul 08 '19 at 11:54
1

@Balamurugan I was able to get it by setting the variable `Editor.useLocalStorage = true;` Now the save button saves the xml to the window variable localStorage. Open your console and type localStorage. You'll find it's an object with properties that correspond to the xml files you're trying to save. To save them, I've been doing `var temp = localStorage['diagram.xml'];` `console.log(temp);` – Andrew Core Jul 08 '19 at 13:33
@AndrewCore, I can save the xml in local storage. Many thanks. Now I'm trying to pass the XML to next page to store all the elements in database. – Bala Jul 13 '19 at 08:26
@AndrewCore, Is there any possible ways to get the XML from graph without using local storage? – Bala Jul 15 '19 at 10:36

mxGraph -Save functionality not working locally

2 Answers2

Linked