Fixed #467 - Wordcloud that visualizes comments doesn't render proper…

…ly at first
surveyjs · Aug 30, 2024 · 46e812f · 46e812f
1 parent b65fb95
commit 46e812f
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 11 deletions.
diff --git a/src/wordcloud/widget.ts b/src/wordcloud/widget.ts
@@ -103,25 +103,35 @@ export class WordCloudWidget {
   public render(target: HTMLDivElement): void {
     this._renderedTarget = target;
     var cloudElement = document.createElement("div");
-    cloudElement.className = "sa-visualizer-wordcloud";
-    cloudElement.style.position = "relative";
-    target.appendChild(cloudElement);
 
-    if(this._options.maxHeight > 0) {
-      cloudElement.style.height = this._options.maxHeight + "px";
-      cloudElement.style.overflow = "auto";
-    }
+    document.body.appendChild(cloudElement);
+    cloudElement.style.position = "fixed";
+    cloudElement.style.top = "-1000px";
+    cloudElement.style.width = "0";
+    cloudElement.style.height = "0";
+
     const startPoint = {
       x: cloudElement.offsetWidth / 2,
       y: cloudElement.offsetHeight / 2
     };
     const [yMin, yMax] = this.arrangeWords(cloudElement, startPoint);
-    if(this._options.maxHeight == 0) {
-      cloudElement.style.height = yMax - yMin + this._options.padding * 2 + "px";
-    }
     this._placedWords.forEach(wordInfo => {
       wordInfo.element.style.top = wordInfo.top - yMin + this._options.padding + "px";
     });
+
+    cloudElement.remove();
+    cloudElement.style.top = "auto";
+    cloudElement.style.left = "50%";
+    cloudElement.className = "sa-visualizer-wordcloud";
+    cloudElement.style.position = "relative";
+    if(this._options.maxHeight > 0) {
+      cloudElement.style.height = this._options.maxHeight + "px";
+      cloudElement.style.overflow = "auto";
+    }
+    if(this._options.maxHeight == 0) {
+      cloudElement.style.height = yMax - yMin + this._options.padding * 2 + "px";
+    }
+    target.appendChild(cloudElement);
   }
   public dispose(): void {
     if(!!this._renderedTarget) {

diff --git a/tests/wordcloud.test.ts b/tests/wordcloud.test.ts
@@ -46,7 +46,7 @@ test("WordCloudWidget render", () => {
   const renderTarget = document.createElement("div");
 
   wcw.render(renderTarget);
-  expect(renderTarget.innerHTML).toBe("<div class=\"sa-visualizer-wordcloud\" style=\"position: relative; height: 1649.9259536805148px;\"><div style=\"position: absolute; font-size: 40px; line-height: 0.8em; color: black; left: 1px; top: 10px;\" title=\"word2 (10)\">word2</div><div style=\"position: absolute; font-size: 4.444444444444445px; line-height: 0.8em; color: black; left: -763.7678872004664px; top: 1629.9259536805148px;\" title=\"word1 (2)\">word1</div></div>");
+  expect(renderTarget.innerHTML).toBe("<div style=\"position: relative; top: -1000px; width: 0px; height: 1649.9259536805148px; left: 50%;\" class=\"sa-visualizer-wordcloud\"><div style=\"position: absolute; font-size: 40px; line-height: 0.8em; color: black; left: 1px; top: 10px;\" title=\"word2 (10)\">word2</div><div style=\"position: absolute; font-size: 4.444444444444445px; line-height: 0.8em; color: black; left: -763.7678872004664px; top: 1629.9259536805148px;\" title=\"word1 (2)\">word1</div></div>");
   wcw.dispose();
   expect(renderTarget.innerHTML).toBe("");
 });