diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml
index 2cc9752..7f63c91 100644
--- a/.github/workflows/build.yml
+++ b/.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:
diff --git a/CHANGELOG.md b/CHANGELOG.md
index db36b46..aeaefdf 100644
--- a/CHANGELOG.md
+++ b/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
diff --git a/README.md b/README.md
index c429cd4..54237a4 100644
--- a/README.md
+++ b/README.md
@@ -103,6 +103,8 @@ function App() {
All options are based on the documentation at draw.io/doc/faq/embed-mode. If something is off, please let me know by creating an issue.
### `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 (
(props, ref) => {
const {
+ autosave = false,
baseUrl,
urlParameters,
configuration,
xml,
csv,
exportFormat,
+ onAutoSave,
onSave,
onClose,
onLoad,
@@ -57,6 +59,11 @@ export const DrawIoEmbed = forwardRef(
onConfigure(data);
}
},
+ autosave: (data) => {
+ if (onAutoSave) {
+ onAutoSave(data);
+ }
+ },
save: (data) => {
action.exportDiagram({
format: exportFormat || 'xmlsvg',
@@ -126,20 +133,29 @@ export const DrawIoEmbed = forwardRef(
);
useEffect(() => {
+ let loadObject: UniqueActionProps = {};
+
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(() => {
diff --git a/src/hooks/useActions.ts b/src/hooks/useActions.ts
index 408751e..b7fd8e5 100644
--- a/src/hooks/useActions.ts
+++ b/src/hooks/useActions.ts
@@ -14,7 +14,7 @@ import {
EmbedActions
} from '../types';
-type UniqueActionProps = Omit;
+export type UniqueActionProps = Omit;
export const useActions = (iframeRef: RefObject) => {
const sendAction = (
diff --git a/src/types.ts b/src/types.ts
index f31eb8e..f8e52cb 100644
--- a/src/types.ts
+++ b/src/types.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;
+};
diff --git a/stories/DiagramsEmbed.stories.tsx b/stories/DiagramsEmbed.stories.tsx
index f361a88..9cbe963 100644
--- a/stories/DiagramsEmbed.stories.tsx
+++ b/stories/DiagramsEmbed.stories.tsx
@@ -21,6 +21,7 @@ const meta: Meta = {
},
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: {