Feature/autosave (#36)

* Implemented autosave

* Package update

* Updated node versions in pipeline

* Only support node 20 for build for now

Author: marcveens

.github/workflows/build.yml

@@ -16,7 +16,7 @@ jobs:
 
     strategy:
       matrix:
-        node-version: [16.x, 18.x]
+        node-version: [16.x, 18.x, 20.x]
         # See supported Node.js release schedule at https://nodejs.org/en/about/releases/
 
     steps:

CHANGELOG.md

@@ -1,3 +1,8 @@
+# 1.0.0
+About time to make this package a 1.0.0 version!
+
+- Added `autosave` property, which will trigger `onAutoSave` after every change
+
 # 0.2.0
 - Added `csv` parameter for CSV loading support
 

README.md

@@ -103,6 +103,8 @@ function App() {
 All options are based on the documentation at <a href="https://www.drawio.com/doc/faq/embed-mode">draw.io/doc/faq/embed-mode</a>. If something is off, please let me know by creating an <a href="https://github.com/marcveens/react-drawio/issues/new">issue</a>.
 
 ### `props`
+- `autosave` (`boolean`, default: `false`)\
+  When enabled, it will call `onAutoSave` for all changes made
 - `urlParameters` (`UrlParameters`, default: `undefined`)\
   Parameters documented at https://www.drawio.com/doc/faq/embed-mode
 - `xml` (`string`, default: `undefined`)\
@@ -117,6 +119,8 @@ All options are based on the documentation at <a href="https://www.drawio.com/do
   For self hosted instances of draw.io, insert your URL here
 
 - `onLoad` (`(data: EventLoad) => void`, optional)
+- `onAutoSave` (`(data: EventAutoSave) => void`, optional)\
+  This will only trigger when the `autosave` property is `true`
 - `onSave` (`(data: EventSave) => void`, optional)
 - `onClose` (`(data: EventExit) => void`, optional)
 - `onConfigure` (`(data: EventConfigure) => void`, optional)

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "react-drawio",
-  "version": "0.2.0",
+  "version": "1.0.0",
   "type": "module",
   "description": "React component for integrating the Diagrams (draw.io) embed iframe",
   "main": "index.js",

package.json

@@ -5,21 +5,23 @@ import {
   useRef,
   useState
 } from 'react';
-import { DrawIoEmbedProps, DrawIoEmbedRef } from './types';
+import { ActionLoad, DrawIoEmbedProps, DrawIoEmbedRef } from './types';
 import { getEmbedUrl } from './utils/getEmbedUrl';
 import { handleEvent } from './utils/handleEvent';
-import { useActions } from './hooks/useActions';
+import { UniqueActionProps, useActions } from './hooks/useActions';
 import React from 'react';
 
 export const DrawIoEmbed = forwardRef<DrawIoEmbedRef, DrawIoEmbedProps>(
   (props, ref) => {
     const {
+      autosave = false,
       baseUrl,
       urlParameters,
       configuration,
       xml,
       csv,
       exportFormat,
+      onAutoSave,
       onSave,
       onClose,
       onLoad,
@@ -57,6 +59,11 @@ export const DrawIoEmbed = forwardRef<DrawIoEmbedRef, DrawIoEmbedProps>(
               onConfigure(data);
             }
           },
+          autosave: (data) => {
+            if (onAutoSave) {
+              onAutoSave(data);
+            }
+          },
           save: (data) => {
             action.exportDiagram({
               format: exportFormat || 'xmlsvg',
@@ -126,20 +133,29 @@ export const DrawIoEmbed = forwardRef<DrawIoEmbedRef, DrawIoEmbedProps>(
     );
 
     useEffect(() => {
+      let loadObject: UniqueActionProps<ActionLoad> = {};
+
       if (isInitialized) {
         if (xml) {
           if (exportFormat === 'xmlpng') {
-            action.load({ xmlpng: xml });
+            loadObject = { xmlpng: xml };
           } else {
-            action.load({ xml });
+            loadObject = { xml };
           }
         } else if (csv) {
-          action.load({ descriptor: { format: 'csv', data: csv } });
+          loadObject = { descriptor: { format: 'csv', data: csv } };
         } else {
-          action.load({ xml: '' });
+          loadObject = { xml: '' };
         }
+
+        loadObject = {
+          ...loadObject,
+          autosave: autosave
+        };
+
+        action.load(loadObject);
       }
-    }, [isInitialized, xml, csv]);
+    }, [isInitialized, xml, csv, autosave]);
 
     // Initial load
     useEffect(() => {

src/DrawIoEmbed.tsx

@@ -14,7 +14,7 @@ import {
   EmbedActions
 } from '../types';
 
-type UniqueActionProps<T> = Omit<T, 'action'>;
+export type UniqueActionProps<T> = Omit<T, 'action'>;
 
 export const useActions = (iframeRef: RefObject<HTMLIFrameElement | null>) => {
   const sendAction = (

src/hooks/useActions.ts

@@ -1,6 +1,10 @@
 import { useActions } from './hooks/useActions';
 
 export type DrawIoEmbedProps = {
+  /**
+   * This will cause the `onAutoSave` event to be triggered every time the diagram is changed
+   */
+  autosave?: boolean;
   /**
    * Base URL for draw.io embed URL. Defaults to https://embed.diagrams.net
    */
@@ -23,6 +27,7 @@ export type DrawIoEmbedProps = {
   configuration?: { [key: string]: any };
   exportFormat?: ExportFormats;
   onLoad?: (data: EventLoad) => void;
+  onAutoSave?: (data: EventAutoSave) => void;
   onSave?: (data: EventSave) => void;
   onClose?: (data: EventExit) => void;
   onConfigure?: (data: EventConfigure) => void;
@@ -93,6 +98,7 @@ type ExportFormats = 'html' | 'html2' | 'svg' | 'xmlsvg' | 'png' | 'xmlpng';
 export type EmbedEvents =
   | EventInit
   | EventLoad
+  | EventAutoSave
   | EventSave
   | EventExit
   | EventConfigure
@@ -120,6 +126,17 @@ export type EventSave = {
   parentEvent?: string;
 };
 
+export type EventAutoSave = {
+  event: 'autosave';
+  bounds: PagePosition;
+  currentPage: number;
+  page: PagePosition;
+  pageVisible: boolean;
+  scale: number;
+  translate: { x: number; y: number };
+  xml: string;
+};
+
 export type EventExit = {
   event: 'exit';
   modified: boolean;
@@ -182,6 +199,7 @@ export type ActionLoad = {
   xml?: string;
   xmlpng?: string;
   descriptor?: { format: 'csv'; data: string };
+  autosave?: boolean;
 };
 
 export type ActionMerge = {
@@ -273,3 +291,10 @@ export type ActionExport = {
   /** Specifies the background color */
   background?: string;
 };
+
+type PagePosition = {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+};

src/types.ts

@@ -21,6 +21,7 @@ const meta: Meta<typeof DrawIoEmbed> = {
   },
   argTypes: {
     onLoad: { action: 'onLoad' },
+    onAutoSave: { action: 'onAutoSave' },
     onSave: { action: 'onSave' },
     onClose: { action: 'onClose' },
     onConfigure: { action: 'onConfigure' },
@@ -365,6 +366,12 @@ export const ExportDataPng: Story = {
   ]
 };
 
+export const AutoSave: Story = {
+  args: {
+    autosave: true
+  }
+};
+
 export const NoSaveAndExit: Story = {
   args: {
     urlParameters: {