diff --git a/CHANGELOG.md b/CHANGELOG.md index 5ab26d9..db36b46 100644 --- a/CHANGELOG.md +++ b/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 diff --git a/package-lock.json b/package-lock.json index 338fc57..ec77a64 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "react-drawio", - "version": "0.1.9", + "version": "0.2.0", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "react-drawio", - "version": "0.1.9", + "version": "0.2.0", "license": "MIT", "devDependencies": { "@rollup/plugin-node-resolve": "^15.2.1", diff --git a/package.json b/package.json index 67e59b4..9b81294 100644 --- a/package.json +++ b/package.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", diff --git a/public/mydrawio.csv b/public/mydrawio.csv new file mode 100644 index 0000000..01714c4 --- /dev/null +++ b/public/mydrawio.csv @@ -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 \ No newline at end of file diff --git a/src/DrawIoEmbed.tsx b/src/DrawIoEmbed.tsx index 470701d..ff3a396 100644 --- a/src/DrawIoEmbed.tsx +++ b/src/DrawIoEmbed.tsx @@ -18,6 +18,7 @@ export const DrawIoEmbed = forwardRef( urlParameters, configuration, xml, + csv, exportFormat, onSave, onClose, @@ -132,11 +133,13 @@ export const DrawIoEmbed = forwardRef( } 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(() => { diff --git a/src/types.ts b/src/types.ts index d559991..f31eb8e 100644 --- a/src/types.ts +++ b/src/types.ts @@ -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 = { diff --git a/stories/DiagramsEmbed.stories.tsx b/stories/DiagramsEmbed.stories.tsx index 8f61f4c..f361a88 100644 --- a/stories/DiagramsEmbed.stories.tsx +++ b/stories/DiagramsEmbed.stories.tsx @@ -82,6 +82,21 @@ export const WithRemoteVsdx: Story = { args: {} }; +export const WithRemoteCsv: Story = { + decorators: [ + (Story) => { + const { inputCsv, loadCsv } = useRemoteFile(); + + useEffect(() => { + loadCsv('/mydrawio.csv'); + }, []); + + return ; + } + ], + args: {} +}; + export const WithConfigurations: Story = { args: { xml: '', diff --git a/stories/hooks/useRemoteFile.tsx b/stories/hooks/useRemoteFile.tsx index afa2ec8..3c26bc0 100644 --- a/stories/hooks/useRemoteFile.tsx +++ b/stories/hooks/useRemoteFile.tsx @@ -8,6 +8,7 @@ const basePath = import.meta.env.VITE_GH_PAGE === 'true' ? '/react-drawio' : ''; export const useRemoteFile = () => { const [inputXml, setInputXml] = useState(''); + const [inputCsv, setInputCsv] = useState(''); const urlToBase64 = async (url: string, options?: UrlToBase64Options) => { const data = await fetch(`${basePath}${url}`); @@ -21,7 +22,10 @@ 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); @@ -29,8 +33,20 @@ export const useRemoteFile = () => { } }; + 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 }; };