Namespaced tooltips for multiple wordclouds

.gitignore

@@ -1,4 +1,5 @@
-.Rproj.user
-.Rhistory
-.RData
-wordcloud2.Rproj
+.Rproj.user
+.Rhistory
+.RData
+wordcloud2.Rproj
+.DS_Store

R/wordcloud2.R

@@ -149,7 +149,7 @@ wordcloud2 <- function(data,
   )
 
 
-  chart = htmlwidgets::createWidget("wordcloud2", settings,
+  htmlwidgets::createWidget("wordcloud2", settings,
                             width = widgetsize[1],
                             height = widgetsize[2],
                             sizingPolicy = htmlwidgets::sizingPolicy(
@@ -158,7 +158,6 @@ wordcloud2 <- function(data,
                               browser.padding = 0,
                               browser.fill = TRUE
                             ))
-  chart
 }
 
 

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

@@ -2,47 +2,48 @@
 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 id = evt.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){
-  console.log(1)
   str = x.figBase64;
-  //console.log(str)
   var newImg = new Image();
   newImg.src = str;
   newImg.style.position = 'absolute';
   newImg.style.left = 0;
-  // console.log(el.clientHeight);
   newImg.width = el.clientWidth;
   newImg.height = el.clientHeight;
   // maskCanvas = init(el, x, newImg);
@@ -55,7 +56,6 @@ function maskInit(el,x){
   var imageData = ctx.getImageData(0, 0, maskCanvas.width, maskCanvas.height);
   var newImageData = ctx.createImageData(imageData);
   // M = 0
-  console.log(imageData.data.length);
   for (var i = 0; i < imageData.data.length; i += 4) {
     var tone = imageData.data[i] +
       imageData.data[i + 1] +
@@ -84,12 +84,10 @@ function maskInit(el,x){
   bctx.fillStyle = x.backgroundColor || '#fff';
   bctx.fillRect(0, 0, 1, 1);
   var bgPixel = bctx.getImageData(0, 0, 1, 1).data;
-  console.log(bgPixel);
   var maskCanvasScaled = document.createElement('canvas');
   maskCanvasScaled.width = el.clientWidth;
   maskCanvasScaled.height = el.clientHeight;
   ctx = maskCanvasScaled.getContext('2d');
-  console.log(maskCanvasScaled);
   ctx.drawImage(maskCanvas,
     0, 0, maskCanvas.width, maskCanvas.height);
 
@@ -136,4 +134,3 @@ function maskInit(el,x){
                   abortThreshold: 3000
                   });
 }
-

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

@@ -1,13 +1,13 @@
 
-#wcLabel {
+.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 {
+.wcSpan {
   position: absolute;
   top: 100%;
   left: 0;