Add 'auto' brush fill and stroke (#2864)

* Add 'auto' brush fill and stroke

* getStyle() from utils

* Update getThematicOption()

* Use getThematicOption() helper in startPNG(), too

R/image-interact-opts.R

@@ -76,8 +76,12 @@ hoverOpts <- function(id, delay = 300,
 #'   `imageOutput`/`plotOutput` calls may share the same `id`
 #'   value; brushing one image or plot will cause any other brushes with the
 #'   same `id` to disappear.
-#' @param fill Fill color of the brush.
-#' @param stroke Outline color of the brush.
+#' @param fill Fill color of the brush. If `'auto'`, it derives from the link
+#'   color of the plot's HTML container (if **thematic** is enabled, and `accent`
+#'   is a non-`'auto'` value, that color is used instead).
+#' @param stroke Outline color of the brush. If `'auto'`, it derives from the
+#'   foreground color of the plot's HTML container (if **thematic** is enabled,
+#'   and `fg` is a non-`'auto'` value, that color is used instead).
 #' @param opacity Opacity of the brush
 #' @param delay How long to delay (in milliseconds) when debouncing or
 #'   throttling, before sending the brush data to the server.
@@ -107,6 +111,13 @@ brushOpts <- function(id, fill = "#9cf", stroke = "#036",
   if (is.null(id))
     stop("id must not be NULL")
 
+  if (identical(fill, "auto")) {
+    fill <- getThematicOption("accent", "auto")
+  }
+  if (identical(stroke, "auto")) {
+    stroke <- getThematicOption("fg", "auto")
+  }
+
   list(
     id = id,
     fill = fill,
@@ -119,3 +130,13 @@ brushOpts <- function(id, fill = "#9cf", stroke = "#036",
     resetOnNew = resetOnNew
   )
 }
+
+getThematicOption <- function(name = "", default = NULL, resolve = FALSE) {
+  if (isNamespaceLoaded("thematic")) {
+    # TODO: use :: once thematic is on CRAN
+    tgo <- utils::getFromNamespace("thematic_get_option", "thematic")
+    tgo(name = name, default = default, resolve = resolve)
+  } else {
+    default
+  }
+}

R/imageutils.R

@@ -23,8 +23,7 @@ startPNG <- function(filename, width, height, res, ...) {
   # devices allow their bg arg to be overridden by par(bg=...), which thematic does prior
   # to plot-time, but it shouldn't hurt to inform other the device directly as well
   if (is.null(args$bg) && isNamespaceLoaded("thematic")) {
-    # TODO: use :: once thematic is on CRAN
-    args$bg <- utils::getFromNamespace("thematic_get_option", "thematic")("bg", "white", resolve = FALSE)
+    args$bg <- getThematicOption("bg", "white")
     # auto vals aren't resolved until plot time, so if we see one, resolve it
     if (isTRUE("auto" == args$bg)) {
       args$bg <- getCurrentOutputInfo()[["bg"]]()

inst/www/shared/shiny.js

@@ -346,6 +346,23 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
       labelNode.text(labelTxt);
       labelNode.removeClass("shiny-label-null");
     }
+  } // Compute the color property of an a tag, scoped within the element
+
+
+  function getComputedLinkColor(el) {
+    var a = document.createElement("a");
+    a.href = "/";
+    var div = document.createElement("div");
+    div.style.setProperty("position", "absolute", "important");
+    div.style.setProperty("top", "-1000px", "important");
+    div.style.setProperty("left", "0", "important");
+    div.style.setProperty("width", "30px", "important");
+    div.style.setProperty("height", "10px", "important");
+    div.appendChild(a);
+    el.appendChild(div);
+    var linkColor = window.getComputedStyle(a).getPropertyValue("color");
+    el.removeChild(div);
+    return linkColor;
   } //---------------------------------------------------------------------
   // Source file: ../srcjs/browser.js
 
@@ -2442,7 +2459,16 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
         brushDirection: OR($el.data('brush-direction'), 'xy'),
         brushResetOnNew: OR(strToBool($el.data('brush-reset-on-new')), false),
         coordmap: data.coordmap
-      }; // Copy items from data to img. Don't set the coordmap as an attribute.
+      };
+
+      if (opts.brushFill === "auto") {
+        opts.brushFill = getComputedLinkColor($el[0]);
+      }
+
+      if (opts.brushStroke === "auto") {
+        opts.brushStroke = getStyle($el[0], "color");
+      } // Copy items from data to img. Don't set the coordmap as an attribute.
+
 
       $.each(data, function (key, value) {
         if (value === null || key === 'coordmap') {
@@ -6376,23 +6402,6 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
       }
 
       return bgColor;
-    } // Compute the color property of an a tag, scoped within the element
-
-
-    function getComputedLinkColor(el) {
-      var a = document.createElement("a");
-      a.href = "/";
-      var div = document.createElement("div");
-      div.style.setProperty("position", "absolute", "important");
-      div.style.setProperty("top", "-1000px", "important");
-      div.style.setProperty("left", "0", "important");
-      div.style.setProperty("width", "30px", "important");
-      div.style.setProperty("height", "10px", "important");
-      div.appendChild(a);
-      el.appendChild(div);
-      var linkColor = getStyle(a, "color");
-      el.removeChild(div);
-      return linkColor;
     }
 
     function getComputedFont(el) {

man/brushOpts.Rd

@@ -23,9 +23,13 @@ then the coordinates will be available as \code{input$plot_brush}. Multiple
 value; brushing one image or plot will cause any other brushes with the
 same \code{id} to disappear.}
 
-\item{fill}{Fill color of the brush.}
+\item{fill}{Fill color of the brush. If \code{'auto'}, it derives from the link
+color of the plot's HTML container (if \strong{thematic} is enabled, and \code{accent}
+is a non-\code{'auto'} value, that color is used instead).}
 
-\item{stroke}{Outline color of the brush.}
+\item{stroke}{Outline color of the brush. If \code{'auto'}, it derives from the
+foreground color of the plot's HTML container (if \strong{thematic} is enabled,
+and \code{fg} is a non-\code{'auto'} value, that color is used instead).}
 
 \item{opacity}{Opacity of the brush}
 

srcjs/init_shiny.js

@@ -322,23 +322,6 @@ function initShiny() {
     return bgColor;
   }
 
-  // Compute the color property of an a tag, scoped within the element
-  function getComputedLinkColor(el) {
-    let a = document.createElement("a");
-    a.href = "/";
-    let div = document.createElement("div");
-    div.style.setProperty("position", "absolute", "important");
-    div.style.setProperty("top", "-1000px", "important");
-    div.style.setProperty("left", "0", "important");
-    div.style.setProperty("width", "30px", "important");
-    div.style.setProperty("height", "10px", "important");
-    div.appendChild(a);
-    el.appendChild(div);
-    let linkColor = getStyle(a, "color");
-    el.removeChild(div);
-    return linkColor;
-  }
-
   function getComputedFont(el) {
     let fontFamily = getStyle(el, "font-family");
     let fontSize = getStyle(el, "font-size");

srcjs/output_binding_image.js

@@ -71,6 +71,14 @@ $.extend(imageOutputBinding, {
       coordmap: data.coordmap
     };
 
+    if (opts.brushFill === "auto") {
+      opts.brushFill = getComputedLinkColor($el[0]);
+    }
+    if (opts.brushStroke === "auto") {
+      opts.brushStroke = getStyle($el[0], "color");
+    }
+
+
     // Copy items from data to img. Don't set the coordmap as an attribute.
     $.each(data, function(key, value) {
       if (value === null || key === 'coordmap') {

srcjs/utils.js

@@ -346,3 +346,21 @@ function updateLabel(labelTxt, labelNode) {
   }
 
 }
+
+
+// Compute the color property of an a tag, scoped within the element
+function getComputedLinkColor(el) {
+  let a = document.createElement("a");
+  a.href = "/";
+  let div = document.createElement("div");
+  div.style.setProperty("position", "absolute", "important");
+  div.style.setProperty("top", "-1000px", "important");
+  div.style.setProperty("left", "0", "important");
+  div.style.setProperty("width", "30px", "important");
+  div.style.setProperty("height", "10px", "important");
+  div.appendChild(a);
+  el.appendChild(div);
+  let linkColor = window.getComputedStyle(a).getPropertyValue("color");
+  el.removeChild(div);
+  return linkColor;
+}