Saving always returns blank diagram.

[Vladmidir]

Hi

I am currently integrating draw.io into a project using this library. I ran into an issue with saving diagrams. All user triggered save events return blank diagram data. That is, if I autosave every 10 seconds, then everything works fine. But if the user clicks the save button or ctrl + s, then a blank diagram is returned (and saved in the database, overwriting all progress).

Let me know if I am not doing something right. For now I will try to fork the project and disable user triggered saves.

Thank you

[marcveens]

Hi @Vladmidir,

Can you provide a minimal reproducible example so I can have a look? It sounds like somehow the xml property value is reset after a user clicks the save button.

[Vladmidir]

Code

Okay, so I autosave the diagram by exporting every 10 seconds. That works perfectly good.
Here is a simplified version of my Editor page.

import { useEffect, useRef, useMemo, useState, useCallback } from 'react';
import { ActionExport, DrawIoEmbed, DrawIoEmbedRef} from 'react-drawio';


const CONFIG = {
    enableCustomLibraries: false,
    appendCustomLibraries: false,
    expandLibraries: true, 
    defaultLibraries: "uml",
    override: false
}   

const Editor = () => {

  const drawioRef = useRef<DrawIoEmbedRef>(null);
  const diagramData = useRef<string | undefined>("");
  
  
  function doExport() {
      if (drawioRef.current) {
          drawioRef.current.exportDiagram({
              format: 'xmlpng',
          });
      }
  };


  useEffect(() => {
      const interval = setInterval(() => {
          console.log("autosaving");
          doExport();
      }, 10000);
      return () => { clearInterval(interval) };
  }, []);


   /**
     * Save the diagram to the server by sending a PUT request to /api/solutions/inprogress with the diagram data.
     */
  const handleSave = useCallback((data: {event: string, xml: string, data: string, message: {exit?: boolean}}) => {
      // make sure to only process "export" events
      // if (data.message.exit == true) return;


      const rawData = data.data;
      diagramData.current = rawData.substring(rawData.indexOf(",") + 1); //trim the data:image/png;base64, part

      if (1) {
          console.log("Saving diagram: " + diagramData.current + 
          "on event" + data.event);
          console.log(data.message);

          //PUT request omitted
      }
    },[]);


return (
    <div>
        <div style={{height: "100vh"}}>
            < DrawIoEmbed 
                ref={drawioRef}
                configuration={CONFIG}
                urlParameters={
                    {
                        // ui: "atlas",
                        spin: true,
                        modified: true,
                        keepmodified: true,
                        libraries: true,
                        noSaveBtn: true,
                        saveAndExit: false,
                        noExitBtn: true
                    }
                }
                onExport={(data) => {handleSave(data)}} //Note: it says the type is wrong, but it is not.
                onLoad={(data) => console.log(data)}
                />

        </div>
        <button onClick={ () => {
            if (drawioRef.current !== null && diagramData.current !== undefined){
                drawioRef.current?.load({
                    xmlpng: diagramData.current
                });
                console.log("Loaded diagram from stash");
            }
            else {
                console.log("No diagram data found");
            }
        }}>Import Diagram</button>
    </div>
);
};

export default Editor;

I was able to disable user triggered saves with the

if (data.message.exit == true) return; 

line. Although typescript says that the type of message does not contain the exit property... It shows up when I console.log. And it is the only property that differentiates user triggered saves vs auto saves.

Algorithm to recreate

You should be able to recreate what I had described in my first post if you do the following:

1. Run the app.
2. Add an element to the diagram.
3. Wait for the autosave to happen (wait for the console log).
4. You should be able to load the content of the recently autosaved diagram. Click the Import Diagram button. You should see the autosaved diagram.
5. Save the diagram manually by typing ctrl + s or clicking the save and exit or save button. (make sure to do step 6, before the next autosave occurs).
6. Click Import Diagram. You should see a blank file. In the console, you should see that a blank diagram is being saved.

Let me know how it goes.

Thank you

[marcveens]

Thanks for your extensive example! I think I found the issue.

I see in your example that you export and import in a xmlpng format. By default, the DrawIoEmbed exports in a xmlsvg format. I realize now that it's not documented in the readme, but it's possible to change the default export format by using <DrawIoEmbed exportFormat="xmlpng" />. When running your example, this solves the issue. I'll make sure to update the docs!

[Vladmidir]

Awesome, thank you !