0.2.0 - Added csv support

Author: marcveens

CHANGELOG.md

@@ -1,3 +1,6 @@
+# 0.2.0
+- Added `csv` parameter for CSV loading support
+
 # 0.1.9
 - Added `embed=1` URL parameter, as documented by draw.io
 

package-lock.json

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

package.json

@@ -0,0 +1,70 @@
+## From https://github.com/jgraph/drawio-diagrams/blob/dev/examples/csv/car-partial-supply-chain.txt
+## Supply chain tracking example
+# label: %name%
+# stylename: shapeType
+# styles: {"raw": "shape=parallelogram;fillColor=#f5f5f5;strokeColor=#666666;perimeter=parallelogramPerimeter;", \
+#          "well": "shape=cylinder;fillColor=#f5f5f5;strokeColor=#666666;", \
+#          "foundry": "shape=trapezoid;fillColor=#dae8fc;strokeColor=#6c8ebf;perimeter=trapezoidPerimeter;", \
+#          "manufacturer":"shape=hexagon;fillColor=#d5e8d4;strokeColor=#82b366;perimeter=hexagonPerimeter;", \
+#          "chemicals":"rounded=0;fillColor=#f8cecc;strokeColor=#b85450", \
+#          "electronics":"rounded=1;fillColor=#fff2cc;strokeColor=#d6b656", \
+#          "assembly":"shape=triangle;fillColor=#ffe6cc;strokeColor=#d79b00;perimeter=trianglePerimeter;", \
+#          "component":"shape=ellipse;fillColor=#ffffff;strokeColor=#000000;perimeter=ellipsePerimeter;"}
+# namespace: csvimport-
+# connect: {"from":"supplier", "to":"id", "invert":true, "style":"curved=1;endArrow=blockThin;startArrow=none;strokeColor=#999999;endFill=1;"}
+# width: auto
+# height: auto
+# padding: 40
+# ignore: id,shapeType,supplier
+# nodespacing: 40
+# levelspacing: 40
+# edgespacing: 40
+# layout: horizontalflow
+## CSV data starts below this line
+id,name,supplier,shapeType
+mb,Mine B,,raw
+ma,Mine A,,raw
+mc,Mine C,,raw
+md,Mine D,,raw
+w1,Well 1,,well
+w2,Well 2,,well
+w3,Well 3,,well
+w4,Well 4,,well
+fa,Foundry A,"mb,mc,ma",foundry
+fb,Foundry B,"mc,md",foundry
+fc,Foundry C,"ma,md",foundry
+o1,Oil and Gas 1,w2,raw
+o2,Oil and Gas 2,"w4,w3",raw
+o3,Oil and Gas 3,w1,raw
+man1,Manufacturer 1,fb,manufacturer
+man2,Manufacturer 2,fc,manufacturer
+man3,Manufacturer 3,fa,manufacturer
+man4,Manufacturer 4,fc,manufacturer
+man5,Manufacturer 5,ca,manufacturer
+ca,Chemicals A,o3,chemicals
+cb,Chemicals B,o1,chemicals
+cc,Chemicals C,o2,chemicals
+ea,Electronics A,cc,electronics
+eb,Electronics B,cc,electronics
+a1,Assembly 1,"3,4,5",assembly
+a2,Assembly 2,2,assembly
+a3,Assembly 3,"1,2,6,8,10,11",assembly
+a4,Assembly 4,"9,12,13,7,15,14",assembly
+a5,Assembly 5,16,assembly
+1,gearbox housing,fb,component
+2,gears,man3,component
+3,turbine,man1,component
+4,stator,man1,component
+5,impellor,man1,component
+6,bearings,man2,component
+7,transmission fluid,cb,component
+8,sealant,cc,component
+9,transmission control unit,ea,component
+10,gasket,man5,component
+11,seals,man5,component
+12,planetary gear train,a2,component
+13,torque converter,a1,component
+14,hydraulic controls,man4,component
+15,gearbox,a3,component
+16,transmission,a4,component
+17,car,a5,component

public/mydrawio.csv

@@ -18,6 +18,7 @@ export const DrawIoEmbed = forwardRef<DrawIoEmbedRef, DrawIoEmbedProps>(
       urlParameters,
       configuration,
       xml,
+      csv,
       exportFormat,
       onSave,
       onClose,
@@ -132,11 +133,13 @@ export const DrawIoEmbed = forwardRef<DrawIoEmbedRef, DrawIoEmbedProps>(
           } else {
             action.load({ xml });
           }
+        } else if (csv) {
+          action.load({ descriptor: { format: 'csv', data: csv } });
         } else {
           action.load({ xml: '' });
         }
       }
-    }, [isInitialized, xml]);
+    }, [isInitialized, xml, csv]);
 
     // Initial load
     useEffect(() => {

src/DrawIoEmbed.tsx

@@ -13,6 +13,10 @@ export type DrawIoEmbedProps = {
    * XML structure for prefilling the editor
    */
   xml?: string;
+  /**
+   * CSV data for prefilling the editor
+   */
+  csv?: string;
   /**
    * For configuration options, see https://www.drawio.com/doc/faq/configure-diagram-editor
    */
@@ -177,6 +181,7 @@ export type ActionLoad = {
   action: 'load';
   xml?: string;
   xmlpng?: string;
+  descriptor?: { format: 'csv'; data: string };
 };
 
 export type ActionMerge = {

src/types.ts

@@ -82,6 +82,21 @@ export const WithRemoteVsdx: Story = {
   args: {}
 };
 
+export const WithRemoteCsv: Story = {
+  decorators: [
+    (Story) => {
+      const { inputCsv, loadCsv } = useRemoteFile();
+
+      useEffect(() => {
+        loadCsv('/mydrawio.csv');
+      }, []);
+
+      return <Story args={{ csv: inputCsv }} />;
+    }
+  ],
+  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

@@ -8,6 +8,7 @@ const basePath = import.meta.env.VITE_GH_PAGE === 'true' ? '/react-drawio' : '';
 
 export const useRemoteFile = () => {
   const [inputXml, setInputXml] = useState<string>('');
+  const [inputCsv, setInputCsv] = useState<string>('');
 
   const urlToBase64 = async (url: string, options?: UrlToBase64Options) => {
     const data = await fetch(`${basePath}${url}`);
@@ -21,16 +22,31 @@ export const useRemoteFile = () => {
         let base64data = (reader.result || '') as string;
 
         if (options?.isVisio) {
-          base64data = base64data.replace('data:application/octet-stream;base64', 'data:application/vnd.visio;base64');
+          base64data = base64data.replace(
+            'data:application/octet-stream;base64',
+            'data:application/vnd.visio;base64'
+          );
         }
 
         setInputXml(base64data);
       };
     }
   };
 
+  const loadCsv = async (url: string) => {
+    const data = await fetch(`${basePath}${url}`);
+
+    if (data) {
+      const text = await data.text();
+
+      setInputCsv(text);
+    }
+  };
+
   return {
     inputXml,
-    urlToBase64
+    inputCsv,
+    urlToBase64,
+    loadCsv
   };
 };