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

package.json

@@ -17,13 +17,17 @@
     "cytoscape-edgehandles": "^3.6.0",
     "cytoscape-grid-guide": "^2.3.2",
     "cytoscape-node-editing": "^4.0.0",
+    "cytoscape-svg": "^0.4.0",
     "file-saver": "^2.0.5",
     "hotkeys-js": "^3.8.7",
     "jquery": "^3.0.0",
     "konva": "^7.0.3",
     "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', 'svg', '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,.svg,.jpg,.jpeg"
                         onChange={(e) => readFile(superState, dispatcher, e.target.files[0])}
                     />
                     <span className="arrow">&#10230;</span>

src/graph-builder/graph-core/1-core.js

@@ -1,6 +1,7 @@
 import cytoscape from 'cytoscape';
 import edgehandles from 'cytoscape-edgehandles';
 import gridGuide from 'cytoscape-grid-guide';
+import svg from 'cytoscape-svg';
 import Konva from 'konva';
 import nodeEditing from 'cytoscape-node-editing';
 import $ from 'jquery';
@@ -44,6 +45,9 @@ class CoreGraph {
         if (typeof cytoscape('core', 'gridGuide') !== 'function') {
             gridGuide(cytoscape);
         }
+        if (typeof cytoscape('core', 'svg') !== 'function') {
+            cytoscape.use(svg);
+        }
         // if (cy) this.cy = cy;
         this.cy = cytoscape({ ...cyOptions(darkMode), container: element });
         this.cy.on('position', 'node', () => {

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,75 @@ 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 b64Data = b64Uri.split(',')[1];
+            const buffer = new Uint8Array(window.atob(b64Data).split('').map((c) => c.charCodeAt(0)));
+            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 === 'SVG') {
+            const blob = new Blob([this.cy.svg({ full: true })], { type: 'image/svg+xml;charset=utf-8' });
+            saveAs(blob, `${this.getName()}-DHGWorkflow.svg`);
+            return;
+        }
+        if (format === 'SVG-EMBEDDED') {
+            const svgStr = this.cy.svg({ full: true });
+            const parser = new DOMParser();
+            const doc = parser.parseFromString(svgStr, 'image/svg+xml');
+            const metadata = doc.createElementNS('http://www.w3.org/2000/svg', 'metadata');
+            metadata.setAttribute('data-graphml', this.getGraphML());
+            doc.documentElement.insertBefore(metadata, doc.documentElement.firstChild);
+            const newSvg = new XMLSerializer().serializeToString(doc);
+            const blob = new Blob([newSvg], { type: 'image/svg+xml;charset=utf-8' });
+            saveAs(blob, `${this.getName()}.graphml.svg`);
+            return;
+        }
+        if (format === 'JPG-EMBEDDED') {
+            const b64Uri = this.cy.jpg({ full: true });
+            const b64Data = b64Uri.split(',')[1];
+            const buffer = new Uint8Array(window.atob(b64Data).split('').map((c) => c.charCodeAt(0)));
+            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,106 @@ 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 === 'svg') {
+            fr.onload = (x) => {
+                try {
+                    const parserDOM = new DOMParser();
+                    const svgDoc = parserDOM.parseFromString(x.target.result, 'image/svg+xml');
+                    const metadata = svgDoc.getElementsByTagName('metadata')[0];
+                    const graphML = metadata ? metadata.getAttribute('data-graphml') : null;
+                    if (graphML) {
+                        parser(graphML).then(({ authorName }) => {
+                            setState({
+                                type: T.ADD_GRAPH,
+                                payload: {
+                                    projectName,
+                                    graphML,
+                                    fileHandle: null,
+                                    fileName: file.name,
+                                    authorName,
+                                },
+                            });
+                            toast.success('Imported embedded GraphML from SVG!');
+                        }).catch(() => toast.error('Embedded GraphML inside SVG is invalid.'));
+                    } else {
+                        toast.error('This SVG does not contain an embedded GraphML Workflow.');
+                    }
+                } catch (err) {
+                    toast.error('Could not parse the SVG file.');
+                }
+            };
+            if (fileHandle) fr.readAsText(await fileHandle.getFile());
+            else fr.readAsText(file);
+        } else if (ext === 'jpg' || ext === 'jpeg') {
+            fr.onload = (x) => {
+                try {
+                    const buffer = new Uint8Array(x.target.result);
+                    let pos = 2; // skip SOI
+                    let graphMLData = '';
+                    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
+                            graphMLData += new TextDecoder().decode(buffer.slice(pos + 4, pos + 2 + len));
+                        }
+                        pos += 2 + len;
+                    }
+
+                    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,11 @@ 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: () => downloadImg(s, d, 'SVG'), name: 'SVG' },
+            { fn: () => downloadImg(s, d, 'SVG-EMBEDDED'), name: 'SVG (with GraphML)' },
             { fn: () => saveAsJson(s, d), name: 'JSON' },
         ],
         visibility: true,