fromJSON only work once

This issue has been tracked since 2022-01-10.

Hi, I have import functionality in my app which is based on graph.fromJSON. The thing is that it doesn't work after the first time, when I do import first time everything works fine, but then it doesn't react. I'm using joint with React.js, I found workaround to use useMemo and update graph instance every-time user hits import

kumilingus wrote this answer on 2022-01-10

Hi, you'd need to provide an example. You can import a JSON over and over again with graph.fromJSON() under normal circumstances.

rubenyeghikyan-highway wrote this answer on 2022-01-10

I don't do anthing special here

I have useEffect which listens to currentAction changes

useEffect(() => {
    if (graph && graph.toJSON) {
      if (currentAction === 'export') {
        const dataJSON = graph.toJSON();
        const url =
          'data:text/json;charset=utf-8,' +
          encodeURIComponent(JSON.stringify(dataJSON));
        const a = document.createElement('a');
        a.style.display = 'none';
        a.href = url;
        a.download = 'export.json';
        document.body.appendChild(a);
        a.click();
        window.URL.revokeObjectURL(url);
        dispatch({
          type: WEB_DIAGRAM_IMPORT,
          payload: dataJSON,
        });
      } else if (currentAction === 'import') {
        const data = JSON.parse(jsonToParse as string);
        graph.fromJSON(data);
        // jointjs doesn't reset already existing elements so we need to do it manually
        graph.resetCells(data.cells);
        dispatch({
          type WEB_DIAGRAM_EXPORT,
          payload: jsonToParse,
        });
      }
    }
  }, [currentAction]);
kumilingus wrote this answer on 2022-01-10

That's a little odd. graph.fromJSON() is calling graph.resetCells() internally -https://github.com/clientIO/joint/blob/master/src/dia/Graph.mjs#L231-L234.

rubenyeghikyan-highway wrote this answer on 2022-01-10

That's a little odd. graph.fromJSON() is calling graph.resetCells() internally -https://github.com/clientIO/joint/blob/master/src/dia/Graph.mjs#L231-L234.

I see, In fact it doesn't work, so I have to call it manually. Anyway this is not the main issue, the main issue is that graph.fromJSON doesn't work properly

rubenyeghikyan-highway wrote this answer on 2022-01-10

here is recording demonstrating that graph.fromJSON doesn't work as expected http://recordit.co/zOP5iwK1Ud

kumilingus wrote this answer on 2022-01-10

I thought that the following code had fixed the problem for you.

// jointjs doesn't reset already existing elements so we need to do it manually
graph.resetCells(data.cells);

If not, then the resetCells() has the alleged issue.

Anyway I am not able to reproduce the issue.

const json = JSON.parse(JSON.serialize(graph.toJSON()));
graph.fromJSON(json);
graph.fromJSON(json);

What is the issue exactly? And how to reproduce it? Can you create an example?


Also, this is not the most efficient way how to update a graph from a JSON. It is better to iterate over data.cells and:

  • if the cell with id does not exists in the graph you will add it (graph.addCell(data.cells[0]))
  • if the cell with id exists in the graph you will update it (graph.getCell(id).set(data.cells[0]))
  • if there is a cell in the graph that is not in JSON you will remove it (cellFromGraph.remove())
kumilingus wrote this answer on 2022-01-10

here is recording demonstrating that graph.fromJSON doesn't work as expected http://recordit.co/zOP5iwK1Ud

Is there any error in the console?

rubenyeghikyan-highway wrote this answer on 2022-01-10

here is recording demonstrating that graph.fromJSON doesn't work as expected http://recordit.co/zOP5iwK1Ud

Is there any error in the console?

no error

kumilingus wrote this answer on 2022-01-10

When you debug it, is the JSON passed to the fromJSON() always the same as the one in the clipboard? Are you able to reproduce it in any other demo we have?

rubenyeghikyan-highway wrote this answer on 2022-01-10

any demo link which has import functionality? couldn't found

rubenyeghikyan-highway wrote this answer on 2022-01-10

When you debug it, is the JSON passed to the fromJSON() always the same as the one in the clipboard? Are you able to reproduce it in any other demo we have?

using same JSON every time

kumilingus wrote this answer on 2022-01-10

any demo link which has import functionality? couldn't found

You can open a demo e.g. https://resources.jointjs.com/demos/joint/demo/devs/index.html, open the browser console and do this (and move elements in between commands):
image

rubenyeghikyan-highway wrote this answer on 2022-01-10

demo works perfectly fine, even with my custom JSON. I'm thinking maybe the reason is that I use useMemo which memoizes graph instance

  const graph: joint.dia.Graph<
    joint.dia.Graph.Attributes,
    joint.dia.ModelSetOptions
  > = useMemo(() => new joint.dia.Graph({}, { cellNamespace: namespace }), []);
rubenyeghikyan-highway wrote this answer on 2022-01-10
rubenyeghikyan-highway wrote this answer on 2022-01-10

Tried to expose graph on window and use fromJSON directly from console, works fine. Seems there is some issues when I use it with React.js. Will continue investigation. I think we can close this now.

P.S.
Tried removing this line. Works perfectly, seems there was issue when I was no using useMemo or something else, but issue is resolved now.

// jointjs doesn't reset already existing elements so we need to do it manually
graph.resetCells(data.cells);

Thanks a lot for your time and quick replies

kumilingus wrote this answer on 2022-01-10

No problem. Feel free to reopen the issue again.

rubenyeghikyan-highway wrote this answer on 2022-01-11

UPDATE:
Turned out it was Redux issue, when state is changed, I didn't clean (bring back to initial) state afterwards, so when I was trying to do 2nd, 3rd time state was not changed so callback was not triggered. Turned out pretty dumb mistake actually, my bad

More Details About Repo
Owner Name clientIO
Repo Name joint
Full Name clientIO/joint
Language JavaScript
Created Date 2009-09-11
Updated Date 2022-12-03
Star Count 3715
Watcher Count 155
Fork Count 817
Issue Count 51

YOU MAY BE INTERESTED

Issue Title Created Date Updated Date