hoveroff_event JS-func, use .nonce to trigger event

r-spatial · Jun 23, 2024 · 3e9d39c · 3e9d39c
1 parent af381dd
commit 3e9d39c
Show file tree

Hide file tree

Showing 6 changed files with 47 additions and 20 deletions.
diff --git a/NEWS b/NEWS
@@ -16,7 +16,7 @@ bug fixes
  * added `stroke` (default=TRUE) in `addGlPolygons` and `addGlPolygonsSrc` for drawing borders. #3 #68
  * Labels work similar to `leaflet`. `leafgl` accepts a single string, a vector of strings or a formula. #78
  * The `...` arguments are now passed to all methods in the underlying library. This allows us to set
-    additional arguments like `fragmentShaderSource`, `sensitivity` or `sensitivityHover`.
+    additional arguments like `fragmentShaderSource`, `sensitivity` or `sensitivityHover`. #81
 
 documentation etc
 

diff --git a/R/glify-points.R b/R/glify-points.R
@@ -54,6 +54,8 @@
 #'       \code{input$MAPID_glify_click}
 #'     \item \strong{Mouseover Events:}
 #'       \code{input$MAPID_glify_mouseover}
+#'     \item \strong{Mouseout Events:}
+#'       \code{input$MAPID_glify_mouseout}
 #'   }
 #'
 #'

diff --git a/inst/htmlwidgets/Leaflet.glify/GlifyUtils.js b/inst/htmlwidgets/Leaflet.glify/GlifyUtils.js
@@ -152,7 +152,8 @@ function click_event_pts(e, point, addpopup, popup, popupOptions, layer, layerId
             group: layer.settings.className,
             lat: point[0],
             lng: point[1],
-            data: content
+            data: content,
+            ".nonce": Math.random()
           });
     }
     if (addpopup) {
@@ -174,7 +175,8 @@ function hover_event_pts(e, point, addlabel, label, layer, tooltip, layerId, dat
             group: layer.settings.className,
             lat: point[0],
             lng: point[1],
-            data: content
+            data: content,
+            ".nonce": Math.random()
           });
     }
     if (addlabel) {
@@ -185,6 +187,21 @@ function hover_event_pts(e, point, addlabel, label, layer, tooltip, layerId, dat
     }
   }
 }
+function hoveroff_event_pts(e, point, layer, tooltip, layerId, data, map) {
+  if (map.hasLayer(layer.layer)) {
+    tooltip.remove();
+    var idx = data.findIndex(k => k==point);
+    if (HTMLWidgets.shinyMode) {
+          Shiny.setInputValue(map.id + "_glify_mouseout", {
+            id: layerId ? layerId[idx] : idx+1,
+            group: layer.settings.className,
+            lat: point[0],
+            lng: point[1],
+            ".nonce": Math.random()
+          });
+    }
+  }
+}
 function click_event(e, feature, addpopup, popup, popupOptions, layer, layerId, data, map) {
   if (map.hasLayer(layer.layer)) {
     const idx = data.features.findIndex(k => k==feature);
@@ -194,7 +211,8 @@ function click_event(e, feature, addpopup, popup, popupOptions, layer, layerId,
         group: Object.values(layer.layer._eventParents)[0].groupname,
         lat: e.latlng.lat,
         lng: e.latlng.lng,
-        data: feature.properties
+        data: feature.properties,
+        ".nonce": Math.random()
       });
     }
     if (addpopup) {
@@ -215,7 +233,8 @@ function hover_event(e, feature, addlabel, label, layer, tooltip, layerId, data,
         group: Object.values(layer.layer._eventParents)[0].groupname,
         lat: e.latlng.lat,
         lng: e.latlng.lng,
-        data: feature.properties
+        data: feature.properties,
+        ".nonce": Math.random()
       });
     }
     if (addlabel) {
@@ -228,6 +247,21 @@ function hover_event(e, feature, addlabel, label, layer, tooltip, layerId, data,
     }
   }
 }
+function hoveroff_event(e, feature, layer, tooltip, layerId, data, map) {
+  if (map.hasLayer(layer.layer)) {
+    tooltip.remove();
+    const idx = data.features.findIndex(k => k==feature);
+    if (HTMLWidgets.shinyMode) {
+      Shiny.setInputValue(map.id + "_glify_mouseout", {
+        id: layerId ? layerId[idx] : idx+1,
+        group: Object.values(layer.layer._eventParents)[0].groupname,
+        lat: e.latlng.lat,
+        lng: e.latlng.lng,
+        ".nonce": Math.random()
+      });
+    }
+  }
+}
 function json2table(json, cls) {
   const cols = Object.keys(json);
   const vals = Object.values(json);

diff --git a/inst/htmlwidgets/Leaflet.glify/addGlifyPoints.js b/inst/htmlwidgets/Leaflet.glify/addGlifyPoints.js
@@ -37,11 +37,8 @@ LeafletWidget.methods.addGlifyPoints = function(data, cols, popup, label, opacit
     map: map,
     click: clickFun,
     hover: mouseoverFun,
-    hoverOff: function(e, feat) {
-      tooltip.remove();
-      //if (HTMLWidgets.shinyMode) {
-      //  Shiny.setInputValue(map.id + "_glify_mouseover", null);
-      //}
+    hoverOff: function(e, point) {
+      hoveroff_event_pts(e, point, pointslayer, tooltip, layerId, data, map);
     },
     data: data,
     color: clrs,

diff --git a/inst/htmlwidgets/Leaflet.glify/addGlifyPolygons.js b/inst/htmlwidgets/Leaflet.glify/addGlifyPolygons.js
@@ -29,11 +29,8 @@ LeafletWidget.methods.addGlifyPolygons = function(data, cols, popup, label,
     map: map,
     click: clickFun,
     hover: mouseoverFun,
-    hoverOff: function(e, feat) {
-      tooltip.remove();
-      //if (HTMLWidgets.shinyMode) {
-      //  Shiny.setInputValue(map.id + "_glify_mouseover", null);
-      //}
+    hoverOff: function(e, feature) {
+      hoveroff_event(e, feature, shapeslayer, tooltip, layerId, data, map);
     },
     data: data,
     color: clrs,

diff --git a/inst/htmlwidgets/Leaflet.glify/addGlifyPolylines.js b/inst/htmlwidgets/Leaflet.glify/addGlifyPolylines.js
@@ -37,11 +37,8 @@ LeafletWidget.methods.addGlifyPolylines = function(data, cols, popup, label,
     map: map,
     click: clickFun,
     hover: mouseoverFun,
-    hoverOff: function(e, feat) {
-      tooltip.remove();
-      //if (HTMLWidgets.shinyMode) {
-      //  Shiny.setInputValue(map.id + "_glify_mouseover", null);
-      //}
+    hoverOff: function(e, feature) {
+      hoveroff_event(e, feature, lineslayer, tooltip, layerId, data, map);
     },
     latitudeKey: 1,
     longitudeKey: 0,