Added types for more 'export' parameters (#22)

Author: marcveens

CHANGELOG.md

@@ -1,3 +1,6 @@
+# 0.1.8
+- Added types for more `export` parameters
+
 # 0.1.7
 - Added `parentEvent` parameters to `onSave` and `onClose` events when the callbacks are triggered by another event.
 

src/types.ts

@@ -239,4 +239,28 @@ export type ActionExport = {
   message?: string;
   xml?: string;
   parentEvent?: string;
+  /** Enable a spinner while the image is being generated */
+  spin?: boolean;
+  /** Specify the zoom (default is 1) */
+  scale?: number;
+  /** Define the array of visible layer IDs */
+  layerIds?: string[];
+  /** Specify the page to be exported */
+  pageId?: string;
+  /** Specify to export the current selected page */
+  currentPage?: boolean;
+  /** (px) Defines the width of the image to be exported */
+  width?: string;
+  /** (px) Defines the border  */
+  border?: string;
+  /** Specifies if a shadow filter should be applied to the export */
+  shadow?: boolean;
+  /** Specifies if a grid should be added */
+  grid?: boolean;
+  /** Specifies if the theme should be kept (eg. for dark themes) */
+  keepTheme?: boolean;
+  /** Specifies if a transparent background should be used */
+  transparent?: boolean;
+  /** Specifies the background color */
+  background?: string;
 };

stories/DiagramsEmbed.stories.tsx

@@ -252,7 +252,7 @@ export const SetSpinner: Story = {
   ]
 };
 
-export const ExportData: Story = {
+export const ExportDataSvg: Story = {
   args: WithData.args,
   decorators: [
     (Story, context) => {
@@ -298,6 +298,58 @@ export const ExportData: Story = {
   ]
 };
 
+export const ExportDataPng: Story = {
+  args: WithData.args,
+  decorators: [
+    (Story, context) => {
+      const [isLoaded, setIsLoaded] = useState(false);
+      const [imgData, setImgData] = useState<string | null>(null);
+      const drawioRef = useRef<DrawIoEmbedRef>(null);
+
+      useEffect(() => {
+        if (drawioRef.current && isLoaded) {
+          drawioRef.current.exportDiagram({
+            format: 'png',
+            transparent: false,
+            grid: true,
+            scale: 1.5,
+            shadow: true
+          });
+        }
+      }, [drawioRef.current, isLoaded]);
+
+      return (
+        <>
+          <Story
+            args={{
+              ...context.args,
+              onLoad: () => setIsLoaded(true),
+              onExport(data) {
+                console.log('onExport', data);
+                setImgData(data.data);
+              },
+              onSave(data) {
+                console.log('onSave', data);
+              },
+              onClose(data) {
+                console.log('onClose', data);
+              },
+              ref: drawioRef
+            }}
+          />
+          <div style={{ marginTop: '10px' }}>
+            <strong>Result as transparent PNG (with extra options)</strong>
+            <br />
+            <div style={{ backgroundColor: '#DDD' }}>
+              {imgData && <img src={imgData} />}
+            </div>
+          </div>
+        </>
+      );
+    }
+  ]
+};
+
 export const NoSaveAndExit: Story = {
   args: {
     urlParameters: {