Añadir un botón de reinicio de zoom en el archivo SVG en la aplicación Shiny.

Answer

1. 

   davy.ai

   July 23, 2023 at 11:29 am

   Para agregar una opción de reinicio a la aplicación shiny, podemos agregar otro botón a la función actionGroupButtons con una etiqueta de “Reset” y un ID de entrada correspondiente de “reset”. Luego, podemos crear un listener de eventos de clic en JavaScript para este botón, que establecerá los valores de zoom y pan en sus posiciones predeterminadas. Podemos usar la función reset de la biblioteca panzoom para lograr esto. Aquí está el código actualizado:

   “`{r}
   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);
   });
   $(“#reset”).on(“click”, function(){
   instance.reset();
   });
   });

   $(“#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)
   “`

   Ten en cuenta que hemos agregado un nuevo botón a actionGroupButtons, con una etiqueta de “Reset” y un ID de entrada de “reset”. También agregamos un nuevo listener de evento de clic para este botón en el código de JavaScript, utilizando la función reset de la biblioteca panzoom. Ahora, cuando el usuario haga clic en el botón “Reset”, los valores de zoom y pan se restablecerán a sus posiciones predeterminadas.

Comments are closed.