wordcloud2.js icon indicating copy to clipboard operation
wordcloud2.js copied to clipboard

Published 20 hours ago • verified publisher icon timdream

container offset process

Open gudaoxuri opened this issue 10 years ago • 4 comments

please add el.offsetLeft and el.offsetTop like this:

 var styleRules = {
...
        'left': el.offsetLeft + ((gx + info.gw / 2) * g + info.fillTextOffsetX) + 'px',
        'top': el.offsetTop + ((gy + info.gh / 2) * g + info.fillTextOffsetY) + 'px',
...

gudaoxuri avatar Jun 10 '14 01:06 gudaoxuri

Would you mind submit a pull request? What it solves? Your comment looks ambiguous to me.

timdream avatar Jun 11 '14 02:06 timdream

Hello, I know this is old, but I stumbled on this, too. Unless el.offsetLeft + and el.offsetRIght + is applied as suggested, the cloud will display at the absolute coordinates of the window instead of the div (which is inside another container-div). The result is the cloud being displayed at the top of the screen instead of the actual div position. I also noticed that a hover over either the area where it should be displayed, or the area where it is actually displayed, will put the cloud into the position it should have been from the beginning.

I'll probably come back with a pull request for this, soon.

frankmayer avatar Jun 02 '16 20:06 frankmayer

@frankmayer I see what you are talking about. The css left and top are referenced against the containing block. The easiest way to create a containing block would be to simply set position to relative. It doesn't has to be the actual parent container of the words (which is the div you pass to WordCloud()), it can be set on any parent element that the words should be position against. Obviously, as you have observed, the default containing block is <html>, the root element.

I would recommend the right and quick fix to this bug is to do element.style.style = 'relative'; on the (non-<canvas>) elements passed to WordCloud. With that, I am closing #71 and please file a new pull request.

Thank you for filing and the pull request again! CSS has it's long history and it's not the most well-designed declarative language :'(

timdream avatar Jun 14 '16 15:06 timdream

Demo page works because

https://github.com/timdream/wordcloud2.js/blob/gh-pages/index.html#L30 https://github.com/timdream/wordcloud2.js/blob/gh-pages/index.html#L36

If we adopt the fix suggested above, we could actually remove these styles.

timdream avatar Jun 14 '16 15:06 timdream