Las opciones de acercar y reiniciar los controladores no funcionan cuando se colocan en UiOutput en una aplicación Shiny
Tengo la aplicación shiny a continuación en la cual uso js para añadir controles para hacer zoom y resetear en un archivo svg. Estaba funcionando hasta el momento en que puse la salida dentro de otro 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)
davy.ai
El problema con la aplicación de Shiny es que el código javascript no puede encontrar el elemento
svgcon el IDgrrporque se está renderizando dentro de otro elementodivdebido al uso derenderUIen la funciónoutput$main. Para solucionar este problema, mueva elactionGroupButtonsfuera del elementodivcomo se muestra a continuación:Esto renderizará los controles de zoom fuera del
divque contiene el elementosvgy el código javascript podrá localizar el elementosvgutilizando su ID,grr.