Get/set pan/zoom parameters
ghotson opened this issue · 2 comments
Is it possible to get/set how zoomed in we are/where we are panned?
It's a bit of an annoyance that altering anything in my shiny plot makes everything zoom completely out again. It would be nice if I could grab that information and reset the image to the desired location whenever things are replotted through shiny.
Not a big deal, just thought I'd ask in case it's possible.
Thanks!
This would be a nice feature, and it is possible currently, but is not demo'd or intuitive. Let's say we use the last example from https://github.com/timelyportfolio/buildingwidgets/blob/gh-pages/week02/index.Rmd. Currently, it provides an ugly button to do the work, which works, but I think you want to take it one step further.
control with a button
library(svgPanZoom)
library(SVGAnnotation)
library(htmltools)
library(lattice)
spz = svgPanZoom(
svgPlot( {
show(wireframe(volcano, shade = TRUE,
aspect = c(61/87, 0.4),
light.source = c(10,0,10)))
} )
,controlIconsEnabled = T
, height = 500
, width = 500
, elementId = "story-volcano"
)
html_print(tagList(
"my favorite part of the volcano"
,tags$button("click here", onclick="zoomFavorite()")
,spz
,tags$script("
function zoomFavorite (){
var z = document.getElementById('story-volcano').zoomWidget;
// programatically zoom to specified point
z.zoomAtPoint( 3, {x:200, y:200});
}
")
))
default zoom on init
This I think will more directly solve your issue.
svgPanZoom(
svgPlot( {
show(wireframe(volcano, shade = TRUE,
aspect = c(61/87, 0.4),
light.source = c(10,0,10)))
} )
, controlIconsEnabled = T
, height = 500
, width = 500
, customEventsHandler = list(
init = htmlwidgets::JS('
function(options){
options.instance.zoomAtPoint( 3, {x:200, y:200})
}
')
)
)
There is a much more thorough discussion of this on the svg-pan-zoom
readme.
Thanks so much for using. I can't stress enough how happy it makes me that you're using this widget. I had thought this would be the most popular by far since it is so universal.
Are you ok if we close this, or can I help by providing a better answer? Thanks for using.