Skip to content
Permalink
Browse files

Merge pull request #46 from JacobXPX/master

Fix tthe Issue #45, please update it.
  • Loading branch information...
Lchiffon committed Jun 20, 2018
2 parents 0e0fc19 + 17eb082 commit 8a12a3b63c975c9d193832ee1a27489cf9ed689f
@@ -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
@@ -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
@@ -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
BIN +224 KB examples/img/new.gif
Binary file not shown.
BIN +6.91 KB inst/examples/b.png
Binary file not shown.
@@ -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
});
}
}
@@ -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; }

Some generated files are not rendered by default. Learn more.

0 comments on commit 8a12a3b

Please sign in to comment.
You can’t perform that action at this time.