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: {