Add feature for Embedded Workflows for Images (PNG, SVG, JPEG)

package.json

@@ -24,6 +24,9 @@
     "lucide-react": "^0.487.0",
     "md5": "^2.3.0",
     "moment": "^2.29.4",
+    "png-chunk-text": "^1.0.0",
+    "png-chunks-encode": "^1.0.0",
+    "png-chunks-extract": "^1.0.0",
     "prismjs": "^1.30.0",
     "process": "^0.11.10",
     "rc-slider": "^9.7.2",

src/component/File-drag-drop.jsx

@@ -40,8 +40,9 @@ const app = ({ superState, dispatcher }) => {
             e.preventDefault();
             fileRef.current.value = null;
             const droppedFile = e.dataTransfer.files[0];
-            const ext = droppedFile && droppedFile.name.split('.').slice(-1)[0];
-            if (e.dataTransfer.files.length === 1 && (ext === 'graphml' || ext === 'json')) {
+            const ext = droppedFile && droppedFile.name.split('.').slice(-1)[0]?.toLowerCase();
+            const allowed = ['graphml', 'json', 'png', 'jpg', 'jpeg'];
+            if (e.dataTransfer.files.length === 1 && allowed.includes(ext)) {
                 readFile(superStateRef.current, dispatcherRef.current, droppedFile);
             }
         };
@@ -70,7 +71,7 @@ const app = ({ superState, dispatcher }) => {
                         ref={fileRef}
                         onClick={(e) => { e.target.value = null; }}
                         style={{ display: 'none' }}
-                        accept=".graphml,.json"
+                        accept=".graphml,.json,.png,.jpg,.jpeg"
                         onChange={(e) => readFile(superState, dispatcher, e.target.files[0])}
                     />
                     <span className="arrow">&#10230;</span>

src/component/fileBrowser.jsx

@@ -53,15 +53,16 @@ const LocalFileBrowser = ({ superState, dispatcher }) => {
     }, [superState.fileState]);
 
     const handleSelectFile = (data) => {
-        const fileExtensions = ['jpeg', 'jpg', 'png', 'exe'];
+        const fileExtensions = ['exe'];
         const fileExt = data.fileObj.name.split('.').pop().toLowerCase();
         if (fileExtensions.includes(fileExt)) {
             // eslint-disable-next-line no-alert
             alert('Wrong file extension');
             return;
         }
 
-        if (fileExt === 'graphml' || fileExt === 'json') {
+        const allowedExts = ['graphml', 'json', 'png', 'jpg', 'jpeg'];
+        if (allowedExts.includes(fileExt)) {
             let foundi = -1;
             superState.graphs.forEach((g, i) => {
                 if ((g.fileName === data.fileObj.name)) {
@@ -140,6 +141,8 @@ const LocalFileBrowser = ({ superState, dispatcher }) => {
                     accept: {
                         'text/graphml': ['.graphml'],
                         'application/json': ['.json'],
+                        'image/png': ['.png'],
+                        'image/jpeg': ['.jpg', '.jpeg'],
                     },
                 },
             ],
@@ -207,7 +210,7 @@ const LocalFileBrowser = ({ superState, dispatcher }) => {
                         ref={fileRef}
                         onClick={(e) => { e.target.value = null; }}
                         style={{ display: 'none' }}
-                        accept=".graphml,.json"
+                        accept=".graphml,.json,.png,.jpg,.jpeg"
                         onChange={(e) => readFile(superState, dispatcher, e.target.files[0])}
                     />
                 )}

src/graph-builder/graph-core/5-load-save.js

@@ -1,5 +1,8 @@
 import { saveAs } from 'file-saver';
 import { toast } from 'react-toastify';
+import extractChunks from 'png-chunks-extract';
+import encodeChunks from 'png-chunks-encode';
+import textChunk from 'png-chunk-text';
 import localStorageManager from '../local-storage-manager';
 import graphmlBuilder from '../graphml/builder';
 import BendingDistanceWeight from '../calculations/bending-dist-weight';
@@ -30,8 +33,64 @@ class GraphLoadSave extends GraphUndoRedo {
     downloadImg(format) {
         this.cy.emit('hide-bend');
         this.cy.$('.eh-handle').remove();
-        if (format === 'PNG') saveAs(this.cy.png({ full: true }), `${this.getName()}-DHGWorkflow.png`);
-        if (format === 'JPG') saveAs(this.cy.jpg({ full: true }), `${this.getName()}-DHGWorkflow.jpg`);
+        if (format === 'JPG') {
+            saveAs(this.cy.jpg({ full: true }), `${this.getName()}-DHGWorkflow.jpg`);
+            return;
+        }
+        if (format === 'PNG') {
+            saveAs(this.cy.png({ full: true }), `${this.getName()}-DHGWorkflow.png`);
+            return;
+        }
+        if (format === 'PNG-EMBEDDED') {
+            const b64Uri = this.cy.png({ full: true });
+            const binaryString = window.atob(b64Uri.split(',')[1]);
+            const buffer = new Uint8Array(binaryString.length);
+            for (let i = 0; i < binaryString.length; i += 1) {
+                buffer[i] = binaryString.charCodeAt(i);
+            }
+            const chunks = extractChunks(buffer);
+            chunks.splice(-1, 0, textChunk.encode('graphml', this.getGraphML()));
+            const newBuffer = new Uint8Array(encodeChunks(chunks));
+            const blob = new Blob([newBuffer], { type: 'image/png' });
+            saveAs(blob, `${this.getName()}.graphml.png`);
+            return;
+        }
+        if (format === 'JPG-EMBEDDED') {
+            const b64Uri = this.cy.jpg({ full: true });
+            const binaryString = window.atob(b64Uri.split(',')[1]);
+            const buffer = new Uint8Array(binaryString.length);
+            for (let i = 0; i < binaryString.length; i += 1) {
+                buffer[i] = binaryString.charCodeAt(i);
+            }
+            const graphMLStr = this.getGraphML();
+            const graphMLBytes = new TextEncoder().encode(graphMLStr);
+
+            const comSegments = [];
+            for (let i = 0; i < graphMLBytes.length; i += 65533) {
+                const chunk = graphMLBytes.slice(i, i + 65533);
+                const segmentLen = chunk.length + 2;
+                const seg = new Uint8Array(4 + chunk.length);
+                seg[0] = 0xFF;
+                seg[1] = 0xFE;
+                seg[2] = Math.floor(segmentLen / 256);
+                seg[3] = segmentLen % 256;
+                seg.set(chunk, 4);
+                comSegments.push(seg);
+            }
+
+            const totalComSize = comSegments.reduce((sum, seg) => sum + seg.length, 0);
+            const newBuffer = new Uint8Array(buffer.length + totalComSize);
+            newBuffer.set(buffer.slice(0, 2), 0); // FF D8
+            let offset = 2;
+            comSegments.forEach((seg) => {
+                newBuffer.set(seg, offset);
+                offset += seg.length;
+            });
+            newBuffer.set(buffer.slice(2), offset);
+
+            const blob = new Blob([newBuffer], { type: 'image/jpeg' });
+            saveAs(blob, `${this.getName()}.graphml.jpg`);
+        }
     }
 
     shouldNodeBeSaved(nodeID) {

src/toolbarActions/toolbarFunctions.js

@@ -1,5 +1,7 @@
 import { saveAs } from 'file-saver';
 import { toast } from 'react-toastify';
+import extractChunks from 'png-chunks-extract';
+import textChunk from 'png-chunk-text';
 import parser from '../graph-builder/graphml/parser';
 import { actionType as T } from '../reducer';
 
@@ -150,7 +152,7 @@ const readFile = async (state, setState, file, fileHandle) => {
         }
         const fr = new FileReader();
         const projectName = file.name;
-        const ext = file.name.split('.').pop();
+        const ext = file.name.split('.').pop()?.toLowerCase();
         if (ext === 'graphml') {
             fr.onload = (x) => {
                 parser(x.target.result).then(({ authorName }) => {
@@ -186,6 +188,88 @@ const readFile = async (state, setState, file, fileHandle) => {
                 }
             };
             fr.readAsText(file);
+        } else if (ext === 'png') {
+            fr.onload = (x) => {
+                try {
+                    const buffer = new Uint8Array(x.target.result);
+                    const chunks = extractChunks(buffer);
+                    const textChunks = chunks.filter((c) => c.name === 'tEXt').map((c) => textChunk.decode(c));
+                    const graphMLMeta = textChunks.find((c) => c.keyword === 'graphml');
+                    if (graphMLMeta && graphMLMeta.text) {
+                        parser(graphMLMeta.text).then(({ authorName }) => {
+                            setState({
+                                type: T.ADD_GRAPH,
+                                payload: {
+                                    projectName,
+                                    graphML: graphMLMeta.text,
+                                    fileHandle: null,
+                                    fileName: file.name,
+                                    authorName,
+                                },
+                            });
+                            toast.success('Imported embedded GraphML from Image!');
+                        }).catch(() => toast.error('Embedded GraphML inside PNG is invalid.'));
+                    } else {
+                        toast.error('This PNG does not contain an embedded GraphML Workflow.');
+                    }
+                } catch (err) {
+                    toast.error('Could not parse the PNG file.');
+                }
+            };
+            if (fileHandle) fr.readAsArrayBuffer(await fileHandle.getFile());
+            else fr.readAsArrayBuffer(file);
+        } else if (ext === 'jpg' || ext === 'jpeg') {
+            fr.onload = (x) => {
+                try {
+                    const buffer = new Uint8Array(x.target.result);
+                    let pos = 2; // skip SOI
+                    const comSegments = [];
+                    while (pos < buffer.length) {
+                        if (buffer[pos] !== 0xFF) break;
+                        const marker = buffer[pos + 1];
+                        if (marker === 0xDA) break; // SOS - Start of Scan
+                        const len = (buffer[pos + 2] * 256) + buffer[pos + 3];
+                        if (marker === 0xFE) { // COM Comment segment
+                            comSegments.push(buffer.slice(pos + 4, pos + 2 + len));
+                        }
+                        pos += 2 + len;
+                    }
+
+                    let graphMLData = '';
+                    if (comSegments.length > 0) {
+                        const totalLength = comSegments.reduce((sum, seg) => sum + seg.length, 0);
+                        const allBytes = new Uint8Array(totalLength);
+                        let offset = 0;
+                        for (let i = 0; i < comSegments.length; i += 1) {
+                            allBytes.set(comSegments[i], offset);
+                            offset += comSegments[i].length;
+                        }
+                        graphMLData = new TextDecoder().decode(allBytes);
+                    }
+
+                    if (graphMLData) {
+                        parser(graphMLData).then(({ authorName }) => {
+                            setState({
+                                type: T.ADD_GRAPH,
+                                payload: {
+                                    projectName,
+                                    graphML: graphMLData,
+                                    fileHandle: null,
+                                    fileName: file.name,
+                                    authorName,
+                                },
+                            });
+                            toast.success('Imported embedded GraphML from JPEG!');
+                        }).catch(() => toast.error('Embedded GraphML inside JPEG is invalid.'));
+                    } else {
+                        toast.error('This JPEG does not contain an embedded GraphML Workflow.');
+                    }
+                } catch (err) {
+                    toast.error('Could not parse the JPEG file.');
+                }
+            };
+            if (fileHandle) fr.readAsArrayBuffer(await fileHandle.getFile());
+            else fr.readAsArrayBuffer(file);
         }
     }
 };

src/toolbarActions/toolbarList.js

@@ -303,7 +303,9 @@ const toolbarList = (state, dispatcher) => [
         icon: FaDownload,
         action: (s, d) => [
             { fn: () => downloadImg(s, d, 'JPG'), name: 'JPG' },
+            { fn: () => downloadImg(s, d, 'JPG-EMBEDDED'), name: 'JPG (with GraphML)' },
             { fn: () => downloadImg(s, d, 'PNG'), name: 'PNG' },
+            { fn: () => downloadImg(s, d, 'PNG-EMBEDDED'), name: 'PNG (with GraphML)' },
             { fn: () => saveAsJson(s, d), name: 'JSON' },
         ],
         visibility: true,