feat: toolbar gains new button "fullscreen".

davidgohel · davidgohel · commit 68d3a6586da7 · 2026-01-22T15:59:55.000+01:00
diff --git a/DESCRIPTION b/DESCRIPTION
@@ -1,7 +1,7 @@
 Type: Package
 Package: ggiraph
 Title: Make 'ggplot2' Graphics Interactive
-Version: 0.9.3
+Version: 0.9.4.001
 Authors@R: c(
     person("David", "Gohel", , "david.gohel@ardata.fr", role = c("aut", "cre")),
     person("Panagiotis", "Skintzos", , "sigmapi@posteo.net", role = "aut"),
diff --git a/NEWS.md b/NEWS.md
@@ -1,3 +1,8 @@
+# ggiraph 0.9.4
+
+- toolbar gains new button "fullscreen".
+
+
 # ggiraph 0.9.3
 
 ## Change
diff --git a/R/girafe_options.R b/R/girafe_options.R
@@ -60,7 +60,7 @@ opts_tooltip <- function(
   delay_mouseover = 200,
   delay_mouseout = 500,
   placement = c("auto", "doc", "container"),
-  zindex = 999
+  zindex = 9999
 ) {
   css <- check_css(
     css = css,
@@ -494,7 +494,8 @@ opts_zoom <- function(min = 1, max = 1, duration = 300, default_on = FALSE) {
 #'   zoom_off = 'deactivate pan/zoom',
 #'   zoom_rect = 'zoom with rectangle',
 #'   zoom_reset = 'reset pan/zoom',
-#'   saveaspng = 'download png'
+#'   saveaspng = 'download png',
+#'   fullscreen = 'fullscreen'
 #' )
 #' @param fixed if FALSE (default), the toolbar will float above the graphic, if
 #' TRUE, the toolbar will be fixed and always visible.
@@ -503,7 +504,7 @@ opts_zoom <- function(min = 1, max = 1, duration = 300, default_on = FALSE) {
 #'
 #' Valid button groups: 'selection', 'zoom', 'misc'
 #'
-#' Valid button names: 'lasso_select', 'lasso_deselect', 'zoom_onoff', 'zoom_rect', 'zoom_reset', 'saveaspng'
+#' Valid button names: 'lasso_select', 'lasso_deselect', 'zoom_onoff', 'zoom_rect', 'zoom_reset', 'saveaspng', 'fullscreen'
 #'
 #' @note
 #' `saveaspng` relies on JavaScript promises, so any browsers that don't natively
diff --git a/inst/htmlwidgets/girafe.css b/inst/htmlwidgets/girafe.css
@@ -149,3 +149,47 @@
 .ggiraph-svg .ggiraph-svg-rootg [id] {
   pointer-events: all;
 }
+
+/* fullscreen modal styles */
+.ggiraph-fullscreen-modal {
+  position: fixed;
+  inset: 0;
+  background-color: rgba(0, 0, 0, 0.85);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.ggiraph-fullscreen-content {
+  position: relative;
+  height: 90vw;
+  max-height: 90vh;
+  background-color: white;
+  border-radius: 8px;
+  padding: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.ggiraph-fullscreen-close {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  width: 32px;
+  height: 32px;
+  border: none;
+  background: #f0f0f0;
+  border-radius: 50%;
+  cursor: pointer;
+  font-size: 20px;
+  line-height: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.ggiraph-fullscreen-close:hover {
+  background-color: #e30c37;
+  color: white;
+}
diff --git a/inst/htmlwidgets/girafe.js b/inst/htmlwidgets/girafe.js
diff --git a/inst/htmlwidgets/girafe.yaml b/inst/htmlwidgets/girafe.yaml
@@ -1,6 +1,6 @@
 dependencies:
   - name: ggiraphjs
-    version: 0.9.2
+    version: 0.9.4
     src: htmlwidgets
     script: girafe.js
     stylesheet: girafe.css
diff --git a/man/opts_toolbar.Rd b/man/opts_toolbar.Rd
diff --git a/man/opts_tooltip.Rd b/man/opts_tooltip.Rd
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ggiraphjs",
-  "version": "0.9.2",
+  "version": "0.9.4",
   "main": "index.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
diff --git a/srcjs/modules/factory.js b/srcjs/modules/factory.js
@@ -61,7 +61,7 @@ export function factory(shinyMode) {
 
         ggobj.setupZoom(x.settings.zoom, x.settings.toolbar.tooltips);
 
-        ggobj.setupToolbar(x.settings.toolbar);
+        ggobj.setupToolbar(x.settings.toolbar, x.settings.tooltip.zindex);
 
         ggobj.setupTooltip(x.settings.tooltip);
 
diff --git a/srcjs/modules/fullscreen.js b/srcjs/modules/fullscreen.js
@@ -0,0 +1,136 @@
+import * as d3 from 'd3';
+
+export default class FullscreenHandler {
+  constructor(svgid, containerid, tooltipZindex) {
+    this.svgid = svgid;
+    this.containerid = containerid;
+    this.modalId = svgid + '_fullscreen_modal';
+    this.isOpen = false;
+    this.boundHandleKeydown = this.handleKeydown.bind(this);
+    // z-index must be >= tooltip z-index to appear above tooltips
+    this.zindex = (tooltipZindex-1) || 9998;
+    // Store original state for restoration
+    this.originalParent = null;
+    this.originalNextSibling = null;
+    this.originalStyles = {};
+  }
+
+  init() {
+    return true;
+  }
+
+  destroy() {
+    this.closeModal();
+  }
+
+  getButtons() {
+    const that = this;
+    return [
+      {
+        key: 'fullscreen',
+        block: 'misc',
+        class: 'neutral',
+        tooltip: 'fullscreen',
+        icon: "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><g><polygon points='396,396 396,320 436,320 436,456 300,456 300,416 396,416'/><polygon points='116,396 192,396 192,456 56,456 56,320 116,320'/><polygon points='116,116 116,192 56,192 56,56 192,56 192,96 96,96'/><polygon points='396,116 320,116 320,56 456,56 456,192 396,192'/></g></svg>",
+        onclick: function () {
+          that.openModal();
+        }
+      }
+    ];
+  }
+
+  openModal() {
+    if (this.isOpen) return;
+    this.isOpen = true;
+
+    const svgElement = document.getElementById(this.svgid);
+    if (!svgElement) return;
+
+    // Store original position and styles for restoration
+    this.originalParent = svgElement.parentNode;
+    this.originalNextSibling = svgElement.nextSibling;
+    this.originalStyles = {
+      width: svgElement.style.width,
+      height: svgElement.style.height,
+      maxWidth: svgElement.style.maxWidth,
+      maxHeight: svgElement.style.maxHeight
+    };
+
+    // Create the modal overlay
+    const modal = d3
+      .select('body')
+      .append('div')
+      .attr('id', this.modalId)
+      .attr('class', 'ggiraph-fullscreen-modal')
+      .style('z-index', this.zindex);
+
+    // Create modal content container
+    const content = modal
+      .append('div')
+      .attr('class', 'ggiraph-fullscreen-content');
+
+    // Add close button
+    content
+      .append('button')
+      .attr('class', 'ggiraph-fullscreen-close')
+      .attr('type', 'button')
+      .attr('aria-label', 'Close fullscreen')
+      .html('&times;')
+      .on('click', () => this.closeModal());
+
+    // Move the original SVG into the modal (preserves all event handlers)
+    svgElement.style.width = '100%';
+    svgElement.style.height = '100%';
+    svgElement.style.maxWidth = '100%';
+    svgElement.style.maxHeight = '100%';
+    content.node().appendChild(svgElement);
+
+    // Add click handler on backdrop to close
+    modal.on('click', (event) => {
+      if (event.target === modal.node()) {
+        this.closeModal();
+      }
+    });
+
+    // Add keyboard listener for Escape
+    document.addEventListener('keydown', this.boundHandleKeydown);
+  }
+
+  closeModal() {
+    if (!this.isOpen) return;
+    this.isOpen = false;
+
+    const svgElement = document.getElementById(this.svgid);
+    if (svgElement && this.originalParent) {
+      // Restore original styles
+      svgElement.style.width = this.originalStyles.width;
+      svgElement.style.height = this.originalStyles.height;
+      svgElement.style.maxWidth = this.originalStyles.maxWidth;
+      svgElement.style.maxHeight = this.originalStyles.maxHeight;
+
+      // Move SVG back to original position
+      if (this.originalNextSibling) {
+        this.originalParent.insertBefore(svgElement, this.originalNextSibling);
+      } else {
+        this.originalParent.appendChild(svgElement);
+      }
+    }
+
+    // Remove modal
+    d3.select('#' + this.modalId).remove();
+
+    // Remove keyboard listener
+    document.removeEventListener('keydown', this.boundHandleKeydown);
+
+    // Clear stored references
+    this.originalParent = null;
+    this.originalNextSibling = null;
+    this.originalStyles = {};
+  }
+
+  handleKeydown(event) {
+    if (event.key === 'Escape') {
+      this.closeModal();
+    }
+  }
+}
diff --git a/srcjs/modules/svg.js b/srcjs/modules/svg.js
@@ -8,6 +8,7 @@ import SelectionHandler from './selection.js';
 import { MouseHandler, EVENT_TYPES } from './mouse.js';
 import NearestHandler from './nearest.js';
 import PngHandler from './png.js';
+import FullscreenHandler from './fullscreen.js';
 
 export default class SVGObject {
   constructor(containerid, shinyMode) {
@@ -246,7 +247,7 @@ export default class SVGObject {
     }
   }
 
-  setupToolbar(options) {
+  setupToolbar(options, tooltipZindex) {
     // register png handler
     let handler;
 
@@ -258,12 +259,22 @@ export default class SVGObject {
     } catch (e) {
       console.error(e);
     }
+    // register fullscreen handler
+    try {
+      if (!options.hidden.includes('fullscreen')) {
+        handler = new FullscreenHandler(this.svgid, this.containerid, tooltipZindex);
+        if (handler.init()) this.handlers.set('fullscreen', handler);
+      }
+    } catch (e) {
+      console.error(e);
+    }
     // register toolbar handler
     try {
       const providers = [];
       this.handlers.forEach(function (h) {
         if (
           h instanceof PngHandler ||
+          h instanceof FullscreenHandler ||
           h instanceof ZoomHandler ||
           (h instanceof SelectionHandler &&
             h.attrName == 'data-id' &&

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "ggiraphjs",`
`3`		`- "version": "0.9.2",`
	`3`	`+ "version": "0.9.4",`
`4`	`4`	`"main": "index.js",`
`5`	`5`	`"scripts": {`
`6`	`6`	`"test": "echo \"Error: no test specified\" && exit 1",`