Merge pull request #153 from ecomfe/fix-shrink

fix: shrinkToFit should not make others invisible
ecomfe · Nov 24, 2022 · ada5d36 · ada5d36
2 parents 9c2572d + 98540f8
commit ada5d36
Show file tree

Hide file tree

Showing 2 changed files with 84 additions and 9 deletions.
diff --git a/example/test.html b/example/test.html
@@ -0,0 +1,66 @@
+<html>
+    <head>
+        <meta charset="utf-8">
+        <script src='https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js'></script>
+        <!-- <script src="../../echarts/dist/echarts.js"></script> -->
+        <script src='../dist/echarts-wordcloud.js'></script>
+    </head>
+    <body>
+        <style>
+            html, body {
+                margin: 0;
+                position: relative;
+            }
+            #main {
+                width: 500px;
+                height: 400px;
+                margin: 50px;
+                border: 1px solid #eee;
+            }
+            #border {
+                position: absolute;
+                left: 100px;
+                top: 50px;
+                width: 400px;
+                height: 300px;
+                border: 1px solid #f00;
+            }
+        </style>
+        <div id='main'></div>
+        <div id='border'></div>
+        <h3>Expect text with 0 to 9 to be displayed all</h3>
+        <script>
+            var chart = echarts.init(document.getElementById('main'));
+
+            var data = [];
+            for (let i = 0; i < 10; ++i) {
+                data.push({
+                    name: (i % 2 ? 'WordCloud' : 'WWWWWWWWWWordCloud') + i,
+                    value: (30 - i) * (30 - i)
+                });
+            }
+
+            var option = {
+                tooltip: {},
+                series: [ {
+                    type: 'wordCloud',
+                    gridSize: 2,
+                    sizeRange: [12, 60],
+                    rotationRange: [0, 0],
+                    shape: 'square',
+                    width: 400,
+                    height: 300,
+                    left: 50,
+                    top: 50,
+                    drawOutOfBound: false,
+                    shrinkToFit: true,
+                    data
+                } ]
+            };
+
+            chart.setOption(option);
+
+            window.onresize = chart.resize;
+        </script>
+    </body>
+</html>
diff --git a/src/layout.js b/src/layout.js
@@ -452,6 +452,10 @@ var WordCloud = function WordCloud(elements, options) {
     var x = Math.floor((eventX * (canvas.width / rect.width || 1)) / g);
     var y = Math.floor((eventY * (canvas.height / rect.height || 1)) / g);
 
+    if (!infoGrid[x]) {
+      return null
+    }
+
     return infoGrid[x][y];
   };
 
@@ -978,7 +982,11 @@ var WordCloud = function WordCloud(elements, options) {
   /* putWord() processes each item on the list,
        calculate it's size and determine it's position, and actually
        put it on the canvas. */
-  var putWord = function putWord(item) {
+  var putWord = function putWord(item, loopIndex) {
+    if (loopIndex > 20) {
+      return null;
+    }
+
     var word, weight, attributes;
     if (Array.isArray(item)) {
       word = item[0];
@@ -1078,16 +1086,17 @@ var WordCloud = function WordCloud(elements, options) {
       //   // leave putWord() and return true
       //   return true;
       // }
+    }
 
-      if (settings.shrinkToFit) {
-        if (Array.isArray(item)) {
-          item[1] = (item[1] * 3) / 4;
-        } else {
-          item.weight = (item.weight * 3) / 4;
-        }
-        return putWord(item);
+    if (settings.shrinkToFit) {
+      if (Array.isArray(item)) {
+        item[1] = (item[1] * 3) / 4;
+      } else {
+        item.weight = (item.weight * 3) / 4;
       }
+      return putWord(item, loopIndex + 1);
     }
+
     // we tried all distances but text won't fit, return null
     return null;
   };
@@ -1300,7 +1309,7 @@ var WordCloud = function WordCloud(elements, options) {
           return;
         }
         escapeTime = new Date().getTime();
-        var drawn = putWord(settings.list[i]);
+        var drawn = putWord(settings.list[i], 0);
         var canceled = !sendEvent('wordclouddrawn', true, {
           item: settings.list[i],
           drawn: drawn