Add pngFull function to Cytoscape.js Core with Visual Cues Enhancement

.github/workflows/main.yaml

@@ -6,7 +6,7 @@ jobs:
   chrome-headless:
     runs-on: ubuntu-latest
     # https://github.com/cypress-io/cypress-docker-images
-    container: cypress/browsers:node12.18.3-chrome87-ff82
+    container: cypress/browsers
     steps:
       - name: Checkout
         uses: actions/checkout@v1

README.md

@@ -15,7 +15,7 @@ https://user-images.githubusercontent.com/8426741/151511191-82ee64b9-3709-4cef-a
 
 ## API
 
-Adds `setActiveCueInstance` and `getActiveInstanceId` to the **cytoscape core** methods.
+Adds `setActiveCueInstance` , `getActiveInstanceId`, and `pngFull` to the **cytoscape core** methods.
 
 #### `cy.setActiveCueInstance(id: number)`
 
@@ -26,6 +26,10 @@ Adds `setActiveCueInstance` and `getActiveInstanceId` to the **cytoscape core**
 
 - Gets the active cue instace id.
 
+#### `cy.pngFull(options: any, ignoreElementClasses: string[]): string`
+
+- Gets a base64 encoded PNG of the graph including the cues.
+
 Adds `addCue`, `removeCue`, `updateCue`, `getCueData`, `showCue`, `hideCue` to the **cytoscape collection** methods.
 
 #### `ele.addCue(cueOptions: CueOptions): boolean[]`

demo/demo.html

@@ -103,6 +103,8 @@ <h2 class="accordion-header" id="panelsStayOpen-headingOne">
                   Save
                 </button>
                 <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
+                  <li><a class="dropdown-item" href="#" onclick="exportPng()">PNG</a></li>
+                  <li><a class="dropdown-item" href="#" onclick="exportPngAll()">PNG (hall)</a></li>
                   <li><a class="dropdown-item" href="#" onclick="exportJson()">JSON</a></li>
                   <li><a class="dropdown-item" href="#" onclick="exportGraphml()">GraphML</a></li>
                   <li><a class="dropdown-item" href="#" onclick="exportSif()">SIF</a></li>

demo/file-operations.js

@@ -90,6 +90,45 @@ function exportJson() {
   str2file(JSON.stringify(elements, undefined, 4), 'sample-graph.json');
 }
 
+function exportPng() {
+  const options = { bg: 'white', scale: 3, full: false };
+  let base64png;
+  base64png = cy.pngFull(options);
+  base64png.then((result) => {
+    fetch(result)
+    .then(res => res.blob())
+    .then(x => {
+      const anchor = document.createElement('a');
+      anchor.download = 'sample.png';
+      anchor.href = (window.URL).createObjectURL(x);
+      anchor.click();
+      return x;
+    })
+  }).catch((error) => {
+    console.error(error); // Handle errors
+  });
+}
+
+function exportPngAll() {
+  const options = { bg: 'white', scale: 3, full: true };
+  let base64png;
+  base64png = cy.pngFull(options);
+  base64png.then((result) => {
+    fetch(result)
+    .then(res => res.blob())
+    .then(x => {
+      const anchor = document.createElement('a');
+      anchor.download = 'sample.png';
+      anchor.href = (window.URL).createObjectURL(x);
+      anchor.click();
+      return x;
+    })
+  }).catch((error) => {
+    console.error(error); // Handle errors
+  });
+}
+
+
 function exportGraphml() {
   str2file(cy.graphml(), 'sample-graph.graphml');
 }