Add save as PNG button issue #4

.Rbuildignore

@@ -10,6 +10,7 @@
 ^_pkgdown\.yml$
 ^pkgdown$
 ^docs$
+^doc$
 ^LICENSE\.md$
 ^README\.Rmd$
 ^\.github$

DESCRIPTION

@@ -20,6 +20,7 @@ Depends:
     R (>= 3.5.0)
 Imports:
     htmlwidgets,
+    fontawesome,
     magrittr,
     dplyr,
     tidyr,

NAMESPACE

@@ -33,6 +33,7 @@ export(read_fasta)
 export(read_gbk)
 export(read_gff)
 export(renderGC_chart)
+import(fontawesome)
 import(htmlwidgets)
 importFrom(dplyr,any_of)
 importFrom(dplyr,arrange)

R/geneviewer.R

@@ -49,6 +49,7 @@ magrittr::`%>%`
 #' # GC_chart(file_path) %>%
 #'
 #' @import htmlwidgets
+#' @import fontawesome
 #' @export
 GC_chart <- function(data, start = "start", end = "end", cluster = NULL, group = NULL, strand = NULL, width = "100%", height = "400px", style = list(), elementId = NULL) {
 
@@ -191,6 +192,7 @@ GC_chart <- function(data, start = "start", end = "end", cluster = NULL, group =
     width = width,
     height = height,
     package = "geneviewer",
+    dependencies = fontawesome::fa_html_dependency(),
     elementId = elementId
   )
 }

docs/articles/BLASTP_files/D3-7.8.5/geneviewer.yaml

@@ -16,4 +16,11 @@ dependencies:
     src: htmlwidgets
     script: ./lib/D3-7.8.5/d3.min.js
     stylesheet: ./lib/styles.css
-
+  - name: html2canvas
+    version: 1.4.1
+    src: htmlwidgets
+    script: ./lib/html2canvas-1.4.1/html2canvas.min.js
+  - name: FileSaver-2.0.4
+    version: 2.0.4
+    src: htmlwidgets
+    script: ./lib/FileSaver-2.0.4/FileSaver.min.js

docs/articles/BLASTP_files/D3-7.8.5/geneviewerwidget.js

@@ -20,6 +20,7 @@ HTMLWidgets.widget({
       d3.select(el).selectAll('*').remove();
 
       el.style["height"] = "100%"
+      el.style["position"] = "relative"
 
       // Apply styles
       if (style && typeof style === 'object' && Object.keys(style).length > 0) {
@@ -83,6 +84,7 @@ HTMLWidgets.widget({
         .append("div")
         .attr("id", `geneviewer-graph-container-${widgetId}`)
         .style("flex-direction", graphContainer["direction"])
+        .style("position", "relative")
         .classed("geneviewer-container", true);
 
       // Add Clusters
@@ -125,6 +127,7 @@ HTMLWidgets.widget({
 
         var clusterLinks = getClusterLinks(graphLinks, clusterKey);
         var linksOptions = {};
+
         if (Array.isArray(links) && links.length > 0 && links[0].options) {
         linksOptions = links[0].options;
         }
@@ -169,6 +172,9 @@ HTMLWidgets.widget({
 
       }
 
+      // Save icon
+      createSaveIcon(widgetId, el);
+
     };
 
     var addLinks = function(width, height, clusters) {

docs/articles/BLASTP_files/D3-7.8.5/lib/geneviewer-0.1.8/geneviewer.js

@@ -12,7 +12,7 @@ function createDivContainer(targetElement) {
   return new DivContainer(div);
 }
 
-//Utils
+// Utils
 
 function getUniqueId(baseId) {
   var i = 1;
@@ -583,6 +583,70 @@ function addScalePadding(startValue, endValue, padding, to) {
   }
 }
 
+function createSaveIcon(widgetId, el) {
+    // Create an icon in the top right corner of the container div
+    var icon = d3.select(el).append("i")
+        .attr("class", "fa-solid fa-download")
+        .attr("id", `saveIcon-${widgetId}`)
+        .style("position", "absolute")
+        .style("z-index", "1000")
+        .style("top", "10px")
+        .style("right", "10px")
+        .style("display", "none")
+        .style("color", "#D3D3D3")
+        .style("padding", "5px")
+        .style("cursor", "pointer");
+
+    // Create tooltip
+    var tooltip = d3.select(el).append("div")
+        .attr("id", `saveIconTooltip-${widgetId}`)
+        .attr("class", "save-tooltip")
+        .style("position", "absolute")
+        .style("top", "40px")
+        .style("right", "10px")
+        .style("display", "none")
+        .style("background-color", "#333")
+        .style("color", "#fff")
+        .style("padding", "5px")
+        .style("border-radius", "3px")
+        .style("font-size", "12px")
+        .style("font-family", "Arial, sans-serif")
+        .style("z-index", "1001")
+        .style("pointer-events", "none")
+        .text("Save as PNG");
+
+    // Ensure icon is displayed on hover and change color
+    d3.select(el).on("mouseenter", function() {
+        d3.select(`#saveIcon-${widgetId}`).style("display", "block");
+    }).on("mouseleave", function() {
+        d3.select(`#saveIcon-${widgetId}`).style("display", "none");
+    });
+
+    // Change icon color on hover and display tooltip
+    d3.select(`#saveIcon-${widgetId}`).on("mouseenter", function() {
+        d3.select(this).style("color", "#555555");
+        tooltip.style("display", "block");
+    }).on("mouseleave", function() {
+        d3.select(this).style("color", "#D3D3D3");
+        tooltip.style("display", "none");
+    });
+
+    // Add save icon functionality
+    document.getElementById(`saveIcon-${widgetId}`).addEventListener("click", function () {
+        // Hide the icon and tooltip temporarily
+        var iconElement = document.getElementById(`saveIcon-${widgetId}`);
+        var tooltipElement = document.getElementById(`saveIconTooltip-${widgetId}`);
+        iconElement.style.display = 'none';
+        tooltipElement.style.display = 'none';
+
+        html2canvas(el, { backgroundColor: null }).then(canvas => {
+            canvas.toBlob(function (blob) {
+                saveAs(blob, "graph.png");
+            });
+        });
+    });
+}
+
 // Make links function
 
 function getLinkCoordinates(graphContainer, data) {
@@ -662,8 +726,8 @@ function makeLinks(graphContainer, links, clusters) {
     };
 
   const graphRect = graphContainer.node().getBoundingClientRect();
-      // Create a container div for the SVG
-    const svgContainer = graphContainer.insert("div", ":first-child")
+  // Create a container div for the SVG
+  const svgContainer = graphContainer.insert("div", ":first-child")
         .style("position", "relative")
         .style("width", "100%")
         .style("height", "100%");
@@ -675,7 +739,7 @@ function makeLinks(graphContainer, links, clusters) {
       .attr("height", graphRect.height)
       .classed("GeneLink", true)
       .style("position", "absolute")
-      .style("z-index", 1)
+      .style("z-index", -1)
       .style("left", `${graphContainer.left}px`)
       .style("top", `${graphContainer.top}px`);
 

docs/articles/BLASTP_files/FileSaver-2.0.4-2.0.4/geneviewer.yaml

@@ -0,0 +1,26 @@
+dependencies:
+  - name: geneviewerwidget
+    version: 0.1.8
+    src: htmlwidgets
+    script: geneviewerwidget.js
+  - name: Themes
+    version: 0.1.8
+    src: htmlwidgets
+    script: ./lib/geneviewer-0.1.8/Themes.js
+  - name: geneviewer
+    version: 0.1.8
+    src: htmlwidgets
+    script: ./lib/geneviewer-0.1.8/geneviewer.js
+  - name: D3
+    version: 7.8.5
+    src: htmlwidgets
+    script: ./lib/D3-7.8.5/d3.min.js
+    stylesheet: ./lib/styles.css
+  - name: html2canvas
+    version: 1.4.1
+    src: htmlwidgets
+    script: ./lib/html2canvas-1.4.1/html2canvas.min.js
+  - name: FileSaver-2.0.4
+    version: 2.0.4
+    src: htmlwidgets
+    script: ./lib/FileSaver-2.0.4/FileSaver.min.js