remove cytoscape-svg causing licensing conflicts

Author: GREENRAT-K405

package-lock.json

@@ -17,7 +17,6 @@
     "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",

package.json

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

src/component/File-drag-drop.jsx

@@ -1,7 +1,6 @@
 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';
@@ -45,9 +44,6 @@ 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/1-core.js

@@ -52,23 +52,6 @@ class GraphLoadSave extends GraphUndoRedo {
             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];

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

@@ -218,36 +218,6 @@ const readFile = async (state, setState, file, fileHandle) => {
             };
             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 {

src/toolbarActions/toolbarFunctions.js

@@ -306,8 +306,6 @@ const toolbarList = (state, dispatcher) => [
             { 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,