Merge pull request #46 from JacobXPX/master

Fix tthe Issue #45, please update it.

.Rbuildignore

@@ -5,4 +5,5 @@ examples/img/1.png
 examples/img/2.png
 examples/img/3.png
 examples/img/4.png
-examples/img/sample.png
+examples/img/sample.png
+examples/img/new.gif

DESCRIPTION

@@ -3,6 +3,7 @@ Type: Package
 Title: Create Word Cloud by htmlWidget
 Version: 0.2.2
 Author: Dawei Lang
+Contributer of this version: Puxin(Jacob) Xu
 Description: A fast visualization tool for creating wordcloud
     by using wordcloud2.js.
 License: GPL-2

R/renderWordcloud2.R

@@ -4,15 +4,14 @@
 ##' Function for plotting wordcloud2 in shiny
 ##'
 ##' @usage
-##' wordcloud2Output(outputId, width = "100\%", height = "400px",
-##'                  clickedWordInputId = "selected_word")
+##' wordcloud2Output(outputId, width = "100\%", height = "400px")
+##' 
 ##' renderWordcloud2(expr, env = parent.frame(), quoted = FALSE)
 ##'
 ##' @param outputId output variable to read from
 ##' @param width,height Must be a valid CSS unit (like \code{"100\%"},
 ##'   \code{"400px"}, \code{"auto"}) or a number, which will be coerced to a
 ##'   string and have \code{"px"} appended.
-##' @param clickedWordInputId can be referenced in the server as \code{input$clickedWordInputId}. Default is selected_word.
 ##' @param expr An expression that generates a networkD3 graph
 ##' @param env The environment in which to evaluate \code{expr}.
 ##' @param quoted Is \code{expr} a quoted expression (with \code{quote()})? This
@@ -23,8 +22,8 @@
 ##' Use renderWordcloud2 to render an wordcloud2 object and use wordcloud2Output
 ##' output an wordcloud2 object. See more details in shiny package.
 ##'
-##' The value assigned to the associated \code{clickedWordInputId} will be of the form \code{word:freq}.
 ##' This will be the same value as shown in the hover information (example: \code{super:32}).
+##' clickedWordInputId is automatically generated by: paste0(outputId, "_clicked_word"))
 ##'
 ##' @name wordcloud2-shiny
 NULL
@@ -33,19 +32,22 @@ getClickedWord <- function(WordInputId) {
   #OUPUT
   #       - referencing input in server will return a string of form word:freq (same as hover info shown in wordcloud; ie 'super:32')
   shiny::tags$script(shiny::HTML(
-    "$(document).on('click', '#canvas', function() {",
-    'word = document.getElementById("wcSpan").innerHTML;',
-    sprintf("Shiny.onInputChange('%s', word);",WordInputId),
+    "$(document).on('click', '#canvas', function(evt) {",
+    'var id = evt.target.nextElementSibling.firstChild.id;',
+    'word = document.getElementById(id).innerHTML;',
+    'console.log(id);',
+    "Shiny.onInputChange(id.replace('wcSpan','_clicked_word'), word);",
+    #sprintf("Shiny.onInputChange(id'_%s', word);",WordInputId),
     "});"
   ))
 }
 
 #' @rdname wordcloud2-shiny
 #' @export
-wordcloud2Output <- function(outputId, width = "100%", height = "400px", clickedWordInputId="selected_word") {
+wordcloud2Output <- function(outputId, width = "100%", height = "400px") {
   widget_out <- htmlwidgets::shinyWidgetOutput(outputId, "wordcloud2", width, height, package = "wordcloud2")
 
-  shiny::div(getClickedWord(clickedWordInputId), widget_out)
+  shiny::div(getClickedWord(), widget_out)
 }
 
 #' @rdname wordcloud2-shiny

inst/htmlwidgets/lib/wordcloud2-0.0.1/hover.js

@@ -2,38 +2,42 @@
 function newlabel(el){
   var newDiv = document.createElement("div");
   var newSpan = document.createElement("span");
-  newDiv.id = 'wcLabel';
-  newSpan.id = "wcSpan";
+  var id = el.id
+  newDiv.id = id + "wcLabel";
+  newDiv.className += "wcLabel";
+  newSpan.id = id + "wcSpan";
+  newSpan.className += "wcSpan";
   el.appendChild(newDiv);
-  document.getElementById("wcLabel").appendChild(newSpan);
+  document.getElementById(id + "wcLabel").appendChild(newSpan);
 }
 
 // hover function
 function cv_handleHover(item, dimension, evt) {
-  var el = document.getElementById("wcLabel");
+  var path = evt.path || (evt.composedPath && evt.composedPath());
+  var id = path[1].id
+  var el = document.getElementById(id + "wcLabel");
+  var target = evt.target || evt.srcElement;
   if (!item) {
     el.setAttribute('hidden', true);
 
     return;
   }
 
   el.removeAttribute('hidden');
-  // console.log(evt.srcElement.offsetLeft);
 
-  el.style.left = dimension.x + evt.srcElement.offsetLeft + 'px';
-  el.style.top = dimension.y + evt.srcElement.offsetTop + 'px';
+  el.style.left = dimension.x + target.offsetLeft + 'px';
+  el.style.top = dimension.y + target.offsetTop + 'px';
   el.style.width = dimension.w + 'px';
   el.style.height = dimension.h + 'px';
 
   this.hoverDimension = dimension;
 
-  document.getElementById("wcSpan").setAttribute(
+  document.getElementById(id + "wcSpan").setAttribute(
     'data-l10n-args', JSON.stringify({ word: item[0], count: item[1] }));
-  document.getElementById("wcSpan").innerHTML =item[0]+":" + item[1];
+  document.getElementById(id + "wcSpan").innerHTML =item[0]+":" + item[1];
 
 }
 
-
 //mask function
 function maskInit(el,x){
   str = x.figBase64;
@@ -130,4 +134,4 @@ function maskInit(el,x){
                   hover: x.hover || cv_handleHover,
                   abortThreshold: 3000
                   });
-}
+}

inst/htmlwidgets/lib/wordcloud2-0.0.1/wordcloud.css

@@ -1,19 +1,20 @@
-
-.wcLabel {
-  position: absolute;
-  border: 2px solid #fff;
-  box-shadow: 0 0 4px 0 #008;
-  padding: 2px;
-  /*margin: -4px 0 0 -4px;*/
-  pointer-events: none; }
-
-.wcSpan {
-  position: absolute;
-  top: 100%;
-  left: 0;
-  background-color: rgba(255, 255, 255, 0.8);
-  color: #333;
-  margin-top: 6px;
-  padding: 0 0.5em;
-  border-radius: 0.5em;
-  white-space: nowrap; }
+
+.wcLabel {
+  position: absolute;
+  border: 2px solid #fff;
+  box-shadow: 0 0 4px 0 #008;
+  padding: 2px;
+  /*margin: -4px 0 0 -4px;*/
+  pointer-events: none; }
+
+.wcSpan {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  background-color: rgba(255, 255, 255, 0.8);
+  color: #333;
+  margin-top: 6px;
+  padding: 0 0.5em;
+  border-radius: 0.5em;
+  white-space: nowrap; }
+