Update Leaflet.glify to commit a384fae. (WIP)

.gitignore

@@ -2,3 +2,4 @@
 .Rhistory
 .RData
 .Ruserdata
+testfiles

DESCRIPTION

@@ -29,7 +29,7 @@ Description: Provides bindings to the 'Leaflet.glify' JavaScript library which e
 License: MIT + file LICENSE
 Encoding: UTF-8
 LazyData: true
-RoxygenNote: 7.0.2
+RoxygenNote: 7.1.1
 Imports:
   geojsonsf,
   htmltools,

R/glify-lines.R

@@ -31,6 +31,11 @@ addGlPolylines = function(map,
                           weight = 1,
                           layerId = NULL,
                           src = FALSE,
+                          hover = NULL,
+                          hoverWait = 250,
+                          sensitivity = 0.1,
+                          sensitivityHover = 0.03,
+                          pane = "overlayPane",
                           ...) {
 
   if (isTRUE(src)) {
@@ -43,6 +48,11 @@ addGlPolylines = function(map,
       , popup = popup
       , weight = weight
       , layerId = layerId
+      , hover = hover
+      , hoverWait = hoverWait
+      , sensitivity = sensitivity
+      , sensitivityHover = sensitivityHover
+      , pane = pane
       , ...
     )
     return(m)
@@ -74,6 +84,19 @@ addGlPolylines = function(map,
 
   cols = jsonify::to_json(color, digits = 3)
 
+  # hover
+  if (!is.null(hover) && !isTRUE(hover)) {
+    htmldeps <- htmltools::htmlDependencies(hover)
+    if (length(htmldeps) != 0) {
+      map$dependencies = c(
+        map$dependencies,
+        htmldeps
+      )
+    }
+    hover = makePopup(hover, data)
+    hover = jsonify::to_json(hover)
+  }
+
   # popup
   if (is.null(popup)) {
     # geom = sf::st_transform(sf::st_geometry(data), crs = 4326)
@@ -132,6 +155,11 @@ addGlPolylines = function(map,
     , group
     , weight
     , layerId
+    , hover
+    , hoverWait
+    , sensitivity
+    , sensitivityHover
+    , pane
   )
 
   leaflet::expandLimits(
@@ -152,6 +180,11 @@ addGlPolylinesSrc = function(map,
                              popup = NULL,
                              weight = 1,
                              layerId = NULL,
+                             hover = NULL,
+                             hoverWait = 250,
+                             sensitivity = 0.1,
+                             sensitivityHover = 0.03,
+                             pane = "overlayPane",
                              ...) {
 
   if (is.null(group)) group = deparse(substitute(data))
@@ -275,6 +308,11 @@ addGlPolylinesSrc = function(map,
     , opacity
     , group
     , layerId
+    , hover
+    , hoverWait
+    , sensitivity
+    , sensitivityHover
+    , pane
   )
 
   leaflet::expandLimits(

R/glify-points.R

@@ -17,12 +17,23 @@
 #' @param radius point size in pixels.
 #' @param group a group name for the feature layer.
 #' @param popup Object representing the popup. Can be of type character with column names,
-#'   formula, logical, data.frame or matrix, Spatial, list or JSON. If the lenght does not
+#'   formula, logical, data.frame or matrix, Spatial, list or JSON. If the length does not
 #'   match the number of rows in the dataset, the popup vector is repeated to match the dimension.
 #' @param layerId the layer id
 #' @param weight line width/thicknes in pixels for \code{addGlPolylines}.
 #' @param src whether to pass data to the widget via file attachments.
-#' @param ... Passed to \code{\link[jsonify]{to_json}} for the data coordinates.
+#' @param hover Object representing the hover. Can be of type character with column names,
+#'   formula, logical, data.frame or matrix, Spatial, list or JSON. If the length does not
+#'   match the number of rows in the dataset, the popup vector is repeated to match the dimension.
+#' @param hoverWait Amount of milliseconds to wait before the next hover event is triggered.
+#' @param pane A string which defines the pane of the layer.
+#' @param sensitivity A numeric value which exaggerates the size of the clickable
+#'   area to make it easier to click a point/line.
+#' @param sensitivityHover A numeric value which exaggerates the size of the hoverable
+#'   area to make it easier to hover a point/line.
+#' @param border Boolean value which determines if a border should be drawn.
+#' @param ... Passed to \code{\link[jsonify]{to_json}} for the data coordinates,
+#'   except for the \code{palette} argument, which is used for the coloring method.
 #'
 #' @describeIn addGlPoints add points to a leaflet map using Leaflet.glify
 #' @examples
@@ -56,6 +67,11 @@ addGlPoints = function(map,
                        popup = NULL,
                        layerId = NULL,
                        src = FALSE,
+                       hover = NULL,
+                       hoverWait = 250,
+                       sensitivity = 0.1,
+                       sensitivityHover = 0.03,
+                       pane = "overlayPane",
                        ...) {
 
   if (isTRUE(src)) {
@@ -68,6 +84,11 @@ addGlPoints = function(map,
       , group = group
       , popup = popup
       , layerId = layerId
+      , hover = hover
+      , hoverWait = hoverWait
+      , sensitivity = sensitivity
+      , sensitivityHover = sensitivityHover
+      , pane = pane
       , ...
     )
     return(m)
@@ -107,8 +128,19 @@ addGlPoints = function(map,
     }
     popup = makePopup(popup, data)
     popup = jsonify::to_json(popup)
-  } else {
-    popup = NULL
+  }
+
+  # hover
+  if (!is.null(hover)) {
+    htmldeps <- htmltools::htmlDependencies(hover)
+    if (length(htmldeps) != 0) {
+      map$dependencies = c(
+        map$dependencies,
+        htmldeps
+      )
+    }
+    hover = makePopup(hover, data)
+    hover = jsonify::to_json(hover)
   }
 
   # data
@@ -148,6 +180,11 @@ addGlPoints = function(map,
     , radius
     , group
     , layerId
+    , hover
+    , hoverWait
+    , sensitivity
+    , sensitivityHover
+    , pane
   )
 
   leaflet::expandLimits(
@@ -169,6 +206,11 @@ addGlPointsSrc = function(map,
                           group = "glpoints",
                           popup = NULL,
                           layerId = NULL,
+                          hover = NULL,
+                          hoverWait = 250,
+                          sensitivity = 0.1,
+                          sensitivityHover = 0.03,
+                          pane = "overlayPane",
                           ...) {
 
   ## currently leaflet.glify only supports single (fill)opacity!
@@ -301,6 +343,11 @@ addGlPointsSrc = function(map,
     , fillOpacity
     , group
     , layerId
+    , hover
+    , hoverWait
+    , sensitivity
+    , sensitivityHover
+    , pane
   )
 
   leaflet::expandLimits(

R/glify-polygons.R

@@ -31,6 +31,10 @@ addGlPolygons = function(map,
                          popup = NULL,
                          layerId = NULL,
                          src = FALSE,
+                         border = FALSE,
+                         hover = NULL,
+                         hoverWait = 250,
+                         pane = "overlayPane",
                          ...) {
 
   if (isTRUE(src)) {
@@ -43,6 +47,10 @@ addGlPolygons = function(map,
       , group = group
       , popup = popup
       , layerId = layerId
+      , border = border
+      , hover = hover
+      , hoverWait = hoverWait
+      , pane = pane
       , ...
     )
     return(m)
@@ -74,6 +82,19 @@ addGlPolygons = function(map,
 
   cols = jsonify::to_json(fillColor, digits = 3)
 
+  # hover
+  if (!is.null(hover) && !isTRUE(hover)) {
+    htmldeps <- htmltools::htmlDependencies(hover)
+    if (length(htmldeps) != 0) {
+      map$dependencies = c(
+        map$dependencies,
+        htmldeps
+      )
+    }
+    hover = makePopup(hover, data)
+    hover = jsonify::to_json(hover)
+  }
+
   # popup
   if (is.null(popup)) {
     # geom = sf::st_transform(sf::st_geometry(data), crs = 4326)
@@ -130,6 +151,10 @@ addGlPolygons = function(map,
     , fillOpacity
     , group
     , layerId
+    , border
+    , hover
+    , hoverWait
+    , pane
   )
 
   leaflet::expandLimits(
@@ -151,6 +176,10 @@ addGlPolygonsSrc = function(map,
                             group = "glpolygons",
                             popup = NULL,
                             layerId = NULL,
+                            border = FALSE,
+                            hover = NULL,
+                            hoverWait = 250,
+                            pane = "overlayPane",
                             ...) {
 
   if (is.null(group)) group = deparse(substitute(data))
@@ -244,7 +273,6 @@ addGlPolygonsSrc = function(map,
       map$dependencies,
       glifyPopupAttachmentSrc(fl_popup, layerId)
     )
-
   }
 
   map = leaflet::invokeMethod(
@@ -255,6 +283,10 @@ addGlPolygonsSrc = function(map,
     , fillOpacity
     , group
     , layerId
+    , border
+    , hover
+    , hoverWait
+    , pane
   )
 
   leaflet::expandLimits(

inst/htmlwidgets/Leaflet.glify/addGlifyPoints.js

@@ -1,4 +1,5 @@
-LeafletWidget.methods.addGlifyPoints = function(data, cols, popup, opacity, radius, group, layerId) {
+LeafletWidget.methods.addGlifyPoints = function(data, cols, popup, opacity, radius, group, layerId,
+                                                hover, hoverWait, sensitivity, sensitivityHover, pane) {
 
   const map = this;
 
@@ -24,7 +25,7 @@ LeafletWidget.methods.addGlifyPoints = function(data, cols, popup, opacity, radi
       if (popup === true) {
         pop = function (e, feature) {
           var popUp = '<pre>'+JSON.stringify(feature.properties,null,' ').replace(/[\{\}"]/g,'')+'</pre>';
-          if (map.hasLayer(pointslayer.glLayer)) {
+          if (map.hasLayer(pointslayer.layer)) {
             L.popup({ maxWidth: 2000 })
               .setLatLng(e.latlng)
               .setContent(popUp)
@@ -33,7 +34,7 @@ LeafletWidget.methods.addGlifyPoints = function(data, cols, popup, opacity, radi
         };
       } else {
         pop = function (e, feature) {
-          if (map.hasLayer(pointslayer.glLayer)) {
+          if (map.hasLayer(pointslayer.layer)) {
             L.popup({ maxWidth: 2000 })
               .setLatLng(e.latlng)
               .setContent(feature.properties[[popup]].toString())
@@ -55,41 +56,54 @@ LeafletWidget.methods.addGlifyPoints = function(data, cols, popup, opacity, radi
     className: group
   });
 
-  map.layerManager.addLayer(pointslayer.glLayer, null, null, group);
+  map.layerManager.addLayer(pointslayer.layer, null, null, group);
 */
 
-  var pointslayer = L.glify.points({
-    map: map,
-    click: (e, point, xy) => {
+  var mouse_event_pts = function(e, point, addpopup, popup, event) {
+    var etype = event === "hover" ? "_glify_mouseover" : "_glify_click";
+    if (map.hasLayer(pointslayer.layer)) {
       var idx = data.findIndex(k => k==point);
-      //set up a standalone popup (use a popup as a layer)
-      if (map.hasLayer(pointslayer.glLayer)) {
-        var content = popup ? popup[idx].toString() : null;
-        if (HTMLWidgets.shinyMode) {
-              Shiny.setInputValue(map.id + "_glify_click", {
-                id: layerId ? layerId[idx] : idx+1,
-                group: pointslayer.settings.className,
-                lat: point[0],
-                lng: point[1],
-                data: content
-              });
-        }
-        if (popup !== null) {
-          L.popup()
-            .setLatLng(point)
-            .setContent(content)
-            .openOn(map);
-        }
+      var content = popup ? popup[idx].toString() : null;
+      if (HTMLWidgets.shinyMode) {
+        Shiny.setInputValue(map.id + etype, {
+          id: layerId ? layerId[idx] : idx+1,
+          lat: point[0],
+          lng: point[1],
+          data: content
+        });
+      }
+      if (addpopup) {
+        var pops = L.popup({ maxWidth: 2000 })
+            .setLatLng(e.latlng)
+            .setContent(content);
+        map.layerManager.removeLayer("leafglpopups");
+        map.layerManager.addLayer(pops, "popup", "leafglpopups");
       }
-    },
+    }
+  }
+  var pop = function (e, point, xy) {
+    mouse_event_pts(e, point, popup !== null, popup, "click");
+  };
+  var hov = function (e, point, xy) {
+    mouse_event_pts(e, point, hover !== null, hover, "hover");
+  };
+
+  var pointslayer = L.glify.points({
+    map: map,
+    click: pop,
+    hover: hov,
+    hoverWait: hoverWait,
+    sensitivityHover: sensitivityHover,
+    sensitivity: sensitivity,
     data: data,
     color: clrs,
     opacity: opacity,
     size: rad,
-    className: group
+    className: group,
+    pane: pane
   });
 
-  map.layerManager.addLayer(pointslayer.glLayer, "glify", layerId, group);
+  map.layerManager.addLayer(pointslayer.layer, "glify", layerId, group);
 };