Update zoomMove to work with multiple structures

R/api.R

@@ -10,9 +10,9 @@
 #'  general "RepresentationParameters" method and type specific Label-,
 #'  Structure- and Surface- RepresentationParameters in the official
 #'  \href{http://nglviewer.org/ngl/api/}{NGL.js} manual.
-#' @param structureIndex (optional) The index of the specific structure to which the
-#'   selection should be added. If not specified, the selection will be applied
-#'   to all loaded structures.
+#'@param structureIndex (optional) The index of the specific structure to which
+#'  the selection should be added (index 0 for the first). If not specified, the
+#'  selection will be applied to all loaded structures.
 #'@return API call containing \code{NGLVieweR} \code{id} and list of message
 #'  parameters.
 #'@family selections
@@ -791,6 +791,8 @@ updateFullscreen <- function(NGLVieweR_proxy, fullscreen = TRUE){
 #'  \href{http://nglviewer.org/ngl/api/}{NGL.js} manual.
 #'@param duration Optional animation time in milliseconds (default = 0).
 #'@param z_offSet Optional zoom offset value (default = 0).
+#'@param structureIndex Optional index of the structure to target for the zoom
+#'  animation. If `NULL` (default), the first structure (index 0) is targeted.
 #'@return API call containing \code{NGLVieweR} \code{id} and list of message
 #'  parameters.
 #'@family animations
@@ -856,10 +858,23 @@ updateFullscreen <- function(NGLVieweR_proxy, fullscreen = TRUE){
 #' shinyApp(ui, server)
 #' }
 #'@export
-updateZoomMove <- function(NGLVieweR_proxy, center, zoom, duration = 0, z_offSet = 0){
-  message <- list(id = NGLVieweR_proxy$id, center = center, zoom = zoom, duration = duration, z_offSet = z_offSet)
-  NGLVieweR_proxy$session$sendCustomMessage("NGLVieweR:updateZoomMove", message)
+updateZoomMove <- function(NGLVieweR_proxy, center, zoom, duration = 0, z_offSet = 0, structureIndex = NULL) {
+
+  message <- list(
+    id = NGLVieweR_proxy$id,
+    center = center,
+    zoom = zoom,
+    duration = duration,
+    z_offSet = z_offSet
+  )
+
+  if (!is.null(structureIndex)) {
+    message$structureIndex <- structureIndex
+  }
+
 
+  NGLVieweR_proxy$session$sendCustomMessage("NGLVieweR:updateZoomMove", message)
+
   return(NGLVieweR_proxy)
 }
 

inst/examples/updateZoomMove/app.R

@@ -9,7 +9,7 @@ ui = fluidPage(
       textInput("zoom", "Zoom", "200"),
       numericInput("zoomOffset", "Zoom offset", 80,0,100),
       numericInput("duration", "Duration", 2000,0,2000),
-      actionButton("zoom", "Zoom"),
+      actionButton("zoombtn", "Zoom"),
       actionButton("reset", "Reset")
     ),
     mainPanel(
@@ -23,25 +23,26 @@ server = function(input, output) {
       addRepresentation("cartoon", param = list(name = "cartoon", color="red")) %>%
       addRepresentation("ball+stick", param = list(name = "ball+stick", sele="200"))
   })
-
-  observeEvent(input$zoom,{
-
+  
+  observeEvent(input$zoombtn,{
+    
     NGLVieweR_proxy("structure") %>% updateZoomMove(center = isolate(input$center),
-                                                    zoom = isolate(input$zoom),
+                                                    zoom = isolate(input$zoombtn),
                                                     z_offSet = isolate(input$zoomOffset),
                                                     duration = isolate(input$duration))
-
+    
   })
-
+  
   observeEvent(input$reset,{
-
+    
     NGLVieweR_proxy("structure") %>% updateZoomMove(center = "*",
                                                     zoom = "*",
                                                     z_offSet = 0,
                                                     duration = 1000)
-
+    
   })
 }
 shinyApp(ui, server)
 
 
+

inst/htmlwidgets/NGLVieweR.js

@@ -300,22 +300,35 @@ Shiny.addCustomMessageHandler('NGLVieweR:updateFullscreen', function(message){
 
 });
 
-Shiny.addCustomMessageHandler('NGLVieweR:updateZoomMove', function(message){
-
-  var structure = getNGLStructure(message.id);
+Shiny.addCustomMessageHandler('NGLVieweR:updateZoomMove', function(message) {
+
+  // Get the array of loaded structures
+  var structures = getNGLStructure(message.id);
   var stage = getNGLStage(message.id);
 
- if(typeof(structure) !== "undefined"){
+  // Check if structures are loaded and stage is defined
+  if (structures && structures.length > 0 && stage) {
+    var structureIndex = message.structureIndex;
 
-  structure.then(function(o){
-
-      var center = o.getCenter(message.center);
-      var zoom = o.getZoom(message.zoom) + message.z_offSet;
+    // Check if a specific structure index is provided
+    if (typeof structureIndex === 'number' && structureIndex >= 0 && structureIndex < structures.length) {
+      // Handle zoomMove for the specified structure
+      var structure = structures[structureIndex];
+      var center = structure.getCenter(message.center);
+      var zoom = structure.getZoom(message.zoom) + (message.z_offSet || 0);
 
       stage.animationControls.zoomMove(center, zoom, message.duration);
- })
-}
+    } else {
+      // No specific index provided; default to the first structure
+      var structure = structures[0];
+      var center = structure.getCenter(message.center);
+      var zoom = structure.getZoom(message.zoom) + (message.z_offSet || 0);
 
+      stage.animationControls.zoomMove(center, zoom, message.duration);
+    }
+  } else {
+    console.log("Structures not loaded, unavailable, or stage undefined.");
+  }
 });
 
 Shiny.addCustomMessageHandler('NGLVieweR:updateFocus', function(message){