From 045e9edd2eccf975a6460a5046acf182664fa97d Mon Sep 17 00:00:00 2001
From: tim-salabim <tim.appelhans@gmail.com>
Date: Mon, 4 Jan 2021 14:33:32 +0100
Subject: [PATCH] use ... to pass additional JS arguments to addGlPoints. close
 #53 #54. partly address #59 #60

---
 R/glify-points.R                              | 11 ++-
 .../Leaflet.glify/addGlifyPoints.js           | 71 +++++++------------
 2 files changed, 35 insertions(+), 47 deletions(-)

diff --git a/R/glify-points.R b/R/glify-points.R
index bb926ce..06d2b45 100644
--- a/R/glify-points.R
+++ b/R/glify-points.R
@@ -22,7 +22,13 @@
 #' @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 ... Used to pass additional named arguments to \code{\link[jsonify]{to_json}}
+#'   & to pass additional arguments to the underlying JavaScript functions. Typical
+#'   use-cases include setting 'digits' to round the point coordinates or to pass
+#'   a different 'fragmentShaderSource' to control the shape of the points. Use
+#'   'point' (default) to render circles with a thin black outline,
+#'   'simpleCircle' for circles without outline or
+#'   'sqaure' for squares (without outline).
 #'
 #' @describeIn addGlPoints add points to a leaflet map using Leaflet.glify
 #' @examples
@@ -58,6 +64,8 @@ addGlPoints = function(map,
                        src = FALSE,
                        ...) {
 
+  dotopts = list(...)
+
   if (isTRUE(src)) {
     m = addGlPointsSrc(
       map = map
@@ -148,6 +156,7 @@ addGlPoints = function(map,
     , radius
     , group
     , layerId
+    , dotopts
   )
 
   leaflet::expandLimits(
diff --git a/inst/htmlwidgets/Leaflet.glify/addGlifyPoints.js b/inst/htmlwidgets/Leaflet.glify/addGlifyPoints.js
index 8852560..7004fc4 100644
--- a/inst/htmlwidgets/Leaflet.glify/addGlifyPoints.js
+++ b/inst/htmlwidgets/Leaflet.glify/addGlifyPoints.js
@@ -1,4 +1,4 @@
-LeafletWidget.methods.addGlifyPoints = function(data, cols, popup, opacity, radius, group, layerId) {
+LeafletWidget.methods.addGlifyPoints = function(data, cols, popup, opacity, radius, group, layerId, dotOptions) {
 
   const map = this;
 
@@ -18,49 +18,8 @@ LeafletWidget.methods.addGlifyPoints = function(data, cols, popup, opacity, radi
     rad = function(index, point) { return radius[index]; };
   }
 
-/*
-  var pop;
-  if (popup) {
-      if (popup === true) {
-        pop = function (e, feature) {
-          var popUp = '<pre>'+JSON.stringify(feature.properties,null,' ').replace(/[\{\}"]/g,'')+'</pre>';
-          if (map.hasLayer(pointslayer.glLayer)) {
-            L.popup({ maxWidth: 2000 })
-              .setLatLng(e.latlng)
-              .setContent(popUp)
-              .openOn(map);
-          }
-        };
-      } else {
-        pop = function (e, feature) {
-          if (map.hasLayer(pointslayer.glLayer)) {
-            L.popup({ maxWidth: 2000 })
-              .setLatLng(e.latlng)
-              .setContent(feature.properties[[popup]].toString())
-              .openOn(map);
-          }
-        };
-      }
-  } else {
-      pop = null;
-  }
-
-  var pointslayer = L.glify.points({
-    map: map,
-    click: pop,
-    data: data,
-    color: clrs,
-    opacity: opacity,
-    size: size,
-    className: group
-  });
-
-  map.layerManager.addLayer(pointslayer.glLayer, null, null, group);
-*/
-
-  var pointslayer = L.glify.points({
-    map: map,
-    click: (e, point, xy) => {
+  // click function
+  let clickFun = (e, point, xy) => {
       var idx = data.findIndex(k => k==point);
       //set up a standalone popup (use a popup as a layer)
       if (map.hasLayer(pointslayer.glLayer)) {
@@ -81,14 +40,34 @@ LeafletWidget.methods.addGlifyPoints = function(data, cols, popup, opacity, radi
             .openOn(map);
         }
       }
-    },
+    };
+
+  // arguments for gl layer
+  var pointsArgs = {
+    map: map,
+    click: clickFun,
     data: data,
     color: clrs,
     opacity: opacity,
     size: rad,
     className: group
-  });
+  };
+
+  // extract correct fragmentShaderSource if provided via dotOptions
+  if (dotOptions.fragmentShaderSource !== undefined && dotOptions.fragmentShaderSource !== null) {
+    let fragmentShader = dotOptions.fragmentShaderSource;
+    dotOptions.fragmentShaderSource = () => {
+      return L.glify.shader.fragment[fragmentShader];
+    };
+  }
+
+  // append dotOptions to layer arguments
+  Object.entries(dotOptions).forEach(([key,value]) => { pointsArgs[key] = value });
+
+  // initialze layer
+  var pointslayer = L.glify.points(pointsArgs);
 
+  // add layer to map using RStudio leaflet's layerManager
   map.layerManager.addLayer(pointslayer.glLayer, "glify", layerId, group);
 };