timelyportfolio/svgPanZoom

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.