rshinyzoomingpan

Add a zoom reset button in svg file in shiny app


I have the shiny app below in which I want to add controls for pan and zoom like here using the panzoom package. I have added +/- but what about a reset option? If you know any other package that can do it feel free to do it.

library(shiny)
library(shinyWidgets)
library(DiagrammeR)
library(magrittr)

js <- '
$(document).ready(function(){
  var element = document.getElementById("grr");
  var instance = panzoom(element);
  $("#zoomout").on("click", function(){
    instance.smoothZoom(0, 0, 0.9);
  });
  $("#zoomin").on("click", function(){
    instance.smoothZoom(0, 0, 1.1);
  });
});
$("#zoomout").on("dblclick", function(){
    return false;
  });
  $("#zoomin").on("dblclick", function(){
    return false;
  });
'

ui <- fluidPage(
  tags$head(
    tags$script(src = "https://unpkg.com/panzoom@9.4.0/dist/panzoom.min.js"),
    tags$script(HTML(js))
  ),
  
  grVizOutput("grr", width = "100%", height = "90vh"),
  
  actionGroupButtons(
    inputIds = c("zoomout", "zoomin"),
    labels = list(icon("minus"), icon("plus")),
    status = "primary"
  )
)

server <- function(input, output) {
  
  reactives <- reactiveValues()
  
  observe({
    reactives$graph <- render_graph(
      create_graph() %>%
        add_n_nodes(n = 2) %>%
        add_edge(
          from = 1,
          to = 2,
          edge_data = edge_data(
            value = 4.3
          )
        )
    )
  })
  
  output$grr <- renderGrViz(reactives$graph)
  
}

shinyApp(ui, server)

Solution

  • library(shiny)
    library(shinyWidgets)
    library(DiagrammeR)
    library(magrittr)
    
    js <- '
    $(document).ready(function(){
      var element = document.getElementById("grr");
      var instance = panzoom(element);
      var z = 1;
      $("#zoomout").on("click", function(){
        instance.smoothZoom(0, 0, 0.9);
        z *= 0.9;
      });
      $("#zoomin").on("click", function(){
        instance.smoothZoom(0, 0, 1.1);
        z *= 1.1;
      });
      $("#reset").on("click", function(){
        instance.smoothZoom(0, 0, 1/z);
        z = 1;
      });
      $("#zoomout").on("dblclick", function(){
        return false;
      });
      $("#zoomin").on("dblclick", function(){
        return false;
      });
    });
    '
    
    ui <- fluidPage(
      tags$head(
        tags$script(src = "https://unpkg.com/panzoom@9.4.0/dist/panzoom.min.js"),
        tags$script(HTML(js))
      ),
      
      grVizOutput("grr", width = "100%", height = "90vh"),
      
      actionGroupButtons(
        inputIds = c("zoomout", "zoomin", "reset"),
        labels = list(icon("minus"), icon("plus"), "Reset"),
        status = "primary"
      )
      
    )
    
    server <- function(input, output) {
      
      reactives <- reactiveValues()
      
      observe({
        reactives$graph <- render_graph(
          create_graph() %>%
            add_n_nodes(n = 2) %>%
            add_edge(
              from = 1,
              to = 2,
              edge_data = edge_data(
                value = 4.3
              )
            )
        )
      })
      
      output$grr <- renderGrViz(reactives$graph)
      
    }
    
    shinyApp(ui, server)