Added png loading example

Author: marcveens

.storybook/main.ts

@@ -14,6 +14,7 @@ const config: StorybookConfig = {
   },
   docs: {
     autodocs: 'tag'
-  }
+  },
+  staticDirs: ['../public']
 };
 export default config;

public/mydrawio.png

@@ -3,6 +3,7 @@ import { DrawIoEmbed } from '../src/DrawIoEmbed';
 import { useEffect, useRef, useState } from 'react';
 import { DrawIoEmbedRef } from '../src/types';
 import React from 'react';
+import { useRemoteFile } from './hooks/useRemoteFile';
 
 const meta: Meta<typeof DrawIoEmbed> = {
   title: 'Components/DrawIoEmbed',
@@ -49,6 +50,21 @@ export const WithData: Story = {
   }
 };
 
+export const WithRemotePng: Story = {
+  decorators: [
+    (Story) => {
+      const { inputXml, urlToBase64 } = useRemoteFile();
+
+      useEffect(() => {
+        urlToBase64('/mydrawio.png');
+      }, []);
+
+      return <Story args={{ xml: inputXml }} />;
+    }
+  ],
+  args: {}
+};
+
 export const WithConfigurations: Story = {
   args: {
     xml: '<mxfile host="embed.diagrams.net" modified="2023-08-27T13:33:23.800Z" agent="Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/115.0.0.0 Safari/537.36" version="21.6.9" etag="xthbfrarG6SmZwCYJPbt" type="embed"><diagram id="kaqXdMjmixOsNJA9w4jU" name="Page-1"><mxGraphModel dx="314" dy="361" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="850" pageHeight="1100" math="0" shadow="0"><root><mxCell id="0" /><mxCell id="1" parent="0" /><mxCell id="2" value="" style="shape=cube;whiteSpace=wrap;html=1;boundedLbl=1;backgroundOutline=1;darkOpacity=0.05;darkOpacity2=0.1;fillColor=#99FFFF;strokeColor=#0066CC;" vertex="1" parent="1"><mxGeometry x="110" y="150" width="120" height="80" as="geometry" /></mxCell></root></mxGraphModel></diagram></mxfile>',

stories/DiagramsEmbed.stories.tsx

@@ -0,0 +1,28 @@
+import { useState } from 'react';
+
+export const useRemoteFile = () => {
+  const [inputXml, setInputXml] = useState<string>('');
+
+  const urlToBase64 = async (url: string) => {
+    const data = await fetch(url);
+
+    console.log(data);
+
+    if (data) {
+      const blob = await data.blob();
+
+      const reader = new FileReader();
+      reader.readAsDataURL(blob);
+      reader.onloadend = () => {
+        const base64data = reader.result;
+
+        setInputXml(base64data as string);
+      };
+    }
+  };
+
+  return {
+    inputXml,
+    urlToBase64
+  };
+};