多次按下“-”时，重置按钮以随机大小重置 svg

Question

在下面闪亮的应用程序中，我缩放并重置了一个 svg 文件。正如您在 gif 中看到的那样，如果您连续快速单击按钮，脚本似乎会失去轨迹并随机调整大小？在 gif 中，我反复单击 - 按钮，然后在最后按 Reset。

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

js <- '
$(document).ready(function(){
  var instance;
  var myinterval = setInterval(function(){
    var element = document.getElementById("grr");
    if(element !== null){
      clearInterval(myinterval);
      instance = panzoom(element);
    }
  }, 100);
  var z = 1;
  $("body").on("click", "#zoomout", function(){
    instance.smoothZoom(0, 0, 0.9);
    z *= 0.9;
  });
  $("body").on("click", "#zoomin", function(){
    instance.smoothZoom(0, 0, 1.1);
    z *= 1.1;
  });
  $("body").on("click", "#reset", function(){
    instance.smoothZoom(0, 0, 1/z);
    z = 1;
  });
  $("body").on("dblclick", "#zoomout", function(){
    return false;
  });
  $("body").on("dblclick", "#zoomin", 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))
  ),
  
  uiOutput("main")
  #grVizOutput("grr", width = "100%", height = "90vh"),
)

server <- function(input, output) {
  
  output$main <- renderUI({
    div(
      grVizOutput("grr", width = "100%", height = "90vh"),
      
      actionGroupButtons(
        inputIds = c("zoomout", "zoomin", "reset"),
        labels = list(icon("minus"), icon("plus"), "Reset"),
        status = "primary"
      )
    )
    
  })
  output$grr <- renderGrViz(render_graph(
    create_graph() %>%
      add_n_nodes(n = 2) %>%
      add_edge(
        from = 1,
        to = 2,
        edge_data = edge_data(
          value = 4.3
        )
      )
  ))
  
}

shinyApp(ui, server)

Answer 1

这就是我第一次遇到的奇怪错误。一种可能的解决方案是将脚本放在 renderUI 中：

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

js <- '
  var element = document.getElementById("grr");
  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")
  ),
  
  uiOutput("main")
)

server <- function(input, output) {
  
  output$main <- renderUI({
    tagList(
      div(
        grVizOutput("grr", width = "100%", height = "90vh"),
        
        actionGroupButtons(
          inputIds = c("zoomout", "zoomin", "reset"),
          labels = list(icon("minus"), icon("plus"), "Reset"),
          status = "primary"
        )
      ),
      tags$script(HTML(js))
    )
    
  })
  
  output$grr <- renderGrViz(render_graph(
    create_graph() %>%
      add_n_nodes(n = 2) %>%
      add_edge(
        from = 1,
        to = 2,
        edge_data = edge_data(
          value = 4.3
        )
      )
  ))
  
}

shinyApp(ui, server)

Answer 2

这是一个与另一个 panzoom 库类似的应用程序。效果更好。

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

js <- '
  var element = document.getElementById("grr");
  var panzoom = Panzoom(element, {
    maxScale: 5
  });
  var z = 1;
  $("#zoomout").on("click", function(){
    z *= 0.9;
    panzoom.zoom(z, { animate: true });
  });
  $("#zoomin").on("click", function(){
    z *= 1.1;
    panzoom.zoom(z, { animate: true });
  });
  $("#reset").on("click", function(){
    z = 1;
    panzoom.reset();
  });
'

ui <- fluidPage(
  tags$head(
    tags$script(src = "https://unpkg.com/@panzoom/panzoom@4.4.3/dist/panzoom.min.js")
  ),

  uiOutput("main")
)

server <- function(input, output) {

  output$main <- renderUI({
    tagList(
      div(
        grVizOutput("grr", width = "100%", height = "90vh"),

        actionGroupButtons(
          inputIds = c("zoomout", "zoomin", "reset"),
          labels = list(icon("minus"), icon("plus"), "Reset"),
          status = "primary"
        )
      ),
      tags$script(HTML(js))
    )

  })

  output$grr <- renderGrViz(render_graph(
    create_graph() %>%
      add_n_nodes(n = 2) %>%
      add_edge(
        from = 1,
        to = 2,
        edge_data = edge_data(
          value = 4.3
        )
      )
  ))

}

shinyApp(ui, server)

多次按下“-”时，重置按钮以随机大小重置 svg

Reset button reset svg in random size when "-" is pressed multiple times

r

zooming

shiny