feat: girafe toolbar can now be fixed instead of floating

fix #250

DESCRIPTION

@@ -2,7 +2,7 @@ Package: ggiraph
 Type: Package
 Title: Make 'ggplot2' Graphics Interactive
 Description: Create interactive 'ggplot2' graphics using 'htmlwidgets'.
-Version: 0.8.10.003
+Version: 0.8.10.004
 Authors@R: c(
     person("David", "Gohel", role = c("aut", "cre"),
     email = "[email protected]"),

NEWS.md

@@ -8,6 +8,8 @@
 
 - support trailing commas everywhere
 - Update to tinyxml2 10.0.0
+- girafe toolbar can now be fixed instead of floating. This feature can be 
+defined with `opts_toolbar(fixed = TRUE)`.
 
 # ggiraph 0.8.9
 

R/girafe_options.R

@@ -429,7 +429,8 @@ opts_zoom <- function(min = 1, max = 1, duration = 300){
 #'   zoom_reset = 'reset pan/zoom',
 #'   saveaspng = 'download png'
 #' )
-#'
+#' @param fixed if FALSE (default), the toolbar will float above the graphic, if
+#' TRUE, the toolbar will be fixed and always visible.
 #' @param hidden A character vector with the names of the buttons or button groups to be hidden
 #' from the toolbar.
 #'
@@ -465,6 +466,7 @@ opts_toolbar <- function(position = c("topright", "top", "bottom",
                          pngname = "diagram",
                          tooltips = NULL,
                          hidden = NULL,
+                         fixed = FALSE,
                          delay_mouseover = 200,
                          delay_mouseout = 500) {
   position = arg_match(position, error_call = NULL)
@@ -497,6 +499,7 @@ opts_toolbar <- function(position = c("topright", "top", "bottom",
     position = position,
     pngname = pngname,
     tooltips = tooltips,
+    fixed = fixed,
     hidden = hidden,
     delay_over = delay_mouseover,
     delay_out = delay_mouseout

srcjs/styles.css

@@ -19,43 +19,50 @@
 }
 
 .ggiraph-toolbar {
-  position: absolute;
   background-color: rgb(255, 255, 255);
   background-color: rgba(255, 255, 255, 0.3);
   border-radius: 5px;
   padding: 2px;
+}
+.ggiraph-toolbar-floating {
+  position: absolute;
   opacity: 0;
 }
-.ggiraph-toolbar-top {
+.ggiraph-toolbar-top,
+.ggiraph-toolbar-bottom {
   text-align: center;
+}
+.ggiraph-toolbar-topleft,
+.ggiraph-toolbar-bottomleft {
+  text-align: left;
+}
+.ggiraph-toolbar-topright,
+.ggiraph-toolbar-bottomright {
+  text-align: right;
+}
+.ggiraph-toolbar-floating-top {
   top: 3px;
   right: 0;
   left: 0;
 }
-.ggiraph-toolbar-topleft {
-  text-align: left;
+.ggiraph-toolbar-floating-topleft {
   top: 3px;
   left: 3px;
 }
-.ggiraph-toolbar-topright {
-  text-align: right;
+.ggiraph-toolbar-floating-topright {
   top: 3px;
   right: 3px;
 }
-
-.ggiraph-toolbar-bottom {
-  text-align: center;
+.ggiraph-toolbar-floating-bottom {
   bottom: 3px;
   right: 0;
   left: 0;
 }
-.ggiraph-toolbar-bottomleft {
-  text-align: left;
+.ggiraph-toolbar-floating-bottomleft {
   left: 3px;
   bottom: 3px;
 }
-.ggiraph-toolbar-bottomright {
-  text-align: right;
+.ggiraph-toolbar-floating-bottomright {
   right: 3px;
   bottom: 3px;
 }

srcjs/toolbar.js

@@ -6,6 +6,7 @@ export default class ToolbarHandler {
     this.svgid = svgid;
     this.clsName = options.clsName;
     this.position = options.position;
+    this.fixed = options.fixed;
     this.delay_over = options.delay_over;
     this.delay_out = options.delay_out;
     this.tooltips = options.tooltips ? options.tooltips : {};
@@ -22,13 +23,33 @@ export default class ToolbarHandler {
       return false;
     }
 
-    const toolbarEl = d3
-      .select('#' + this.containerid + ' .girafe_container_std')
-      .append('div')
-      .attr('id', this.svgid + '_toolbar')
-      .classed(this.clsName, true)
-      .classed(this.clsName + '-' + this.position, true)
-      .attr('data-forsvg', this.svgid);
+    let toolbarEl = null;
+
+    if (!this.fixed) {
+      toolbarEl = d3
+        .select('#' + this.containerid + ' .girafe_container_std')
+        .append('div')
+        .attr('id', this.svgid + '_toolbar')
+        .classed(this.clsName, true)
+        .classed(this.clsName + '-floating', true)
+        .classed(this.clsName + '-floating' + '-' + this.position, true)
+        .attr('data-forsvg', this.svgid);
+    } else if (this.fixed && this.position.includes('bottom')) {
+      toolbarEl = d3
+        .select('#' + this.containerid + ' .girafe_container_std')
+        .append('div')
+        .attr('id', this.svgid + '_toolbar')
+        .classed(this.clsName, true)
+        .attr('data-forsvg', this.svgid);
+    } else {
+      toolbarEl = d3
+        .select('#' + this.containerid + ' .girafe_container_std')
+        .insert('div', ':first-child')
+        .attr('id', this.svgid + '_toolbar')
+        .classed(this.clsName, true)
+        .attr('data-forsvg', this.svgid);
+    }
+    toolbarEl.classed(this.clsName + '-' + this.position, true);
 
     // add blocks
     const that = this;
@@ -114,7 +135,7 @@ export default class ToolbarHandler {
   }
 
   clear(event) {
-    if (this.on && !this.isValidTarget(event.relatedTarget)) {
+    if (!this.fixed && this.on && !this.isValidTarget(event.relatedTarget)) {
       this.on = false;
       d3.select('#' + this.containerid)
         .select('.' + this.clsName)
@@ -129,7 +150,7 @@ export default class ToolbarHandler {
   }
 
   applyOn() {
-    if (!this.on) {
+    if (!this.fixed && !this.on) {
       this.on = true;
       d3.select('#' + this.svgid + '_toolbar')
         .transition()