在闪亮的应用程序中放置在 UiOutput 中时，缩放和重置控制器不起作用

Posted 2023-02-14

【中文标题】在闪亮的应用程序中放置在 UiOutput 中时，缩放和重置控制器不起作用

【英文标题】：Zoom and reset contollers do not work when placed in UiOutput in shiny app

【发布时间】：2022-01-21 23:49:33

【问题描述】：

我有下面的闪亮应用程序，我在其中使用 js 添加控件以缩放和重置 svg 文件。它一直在工作，直到我将输出放入另一个 UiOutput 中。

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))
  ),
  
  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)

【参考方案1】：

这是因为当文档准备好时，renderUI 中定义的元素还没有准备好。一种可能的技术是使用间隔，每 100 毫秒“筛选”一次文档，直到找到元素。

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)

【讨论】：

知道为什么会出现这个错误吗？ ***.com/questions/70426286/…