@makechart/tagcloud 0.0.1 → 0.0.2

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # Change Logs
 
+## v0.0.2
+
+ - extend the lite base ( `@makechart/base` `lite/index.html`, no d3 ): needs `@makechart/base` >= 0.2.0
+   and `@plotdb/chart` >= 3.7.0
+   its own d3@7 and d3-cloud loading are replaced by `d3-cloud` 1.2.5 as a dependency
+ - add `pkg.name`
+ - rotation and random colors are seeded, so the same data always gives the same result
+ - fix bug: it didn't render. the svg is now positioned at the top left instead of being pushed below
+   the base layout block
+ - fix bug: `xfl` was used without declaration
+ - add test cases ( `test/index.ls`, run with `npm test` via `@makechart/viewer` )
+
+
 ## v0.0.1
 
 init release

package/index.html

@@ -1,5 +1,8 @@
 <div><script type="@plotdb/block">/* generated by claude */
 
+// xl 字型的載入器 ( @xlfont/load ), init 時從 context 取得
+var xfl;
+
 
 var loadfont = function() {
   var font, this$ = this;
@@ -32,27 +35,44 @@ var loadfont = function() {
   }
 };
 
+// 同 d3.randomLcg ( 移植自 d3-random, ISC )
+var lcg = function(seed) {
+  var mul = 0x19660D, inc = 0x3C6EF35F, eps = 1 / 0x100000000;
+  var state = (0 <= seed && seed < 1 ? seed / eps : Math.abs(seed)) | 0;
+  return function() { return eps * ((state = (mul * state + inc) | 0) >>> 0); };
+};
+var svgns = "http://www.w3.org/2000/svg";
+
 module.exports = {
   pkg: {
-    extend: {name: "@makechart/base"},
+    name: "tagcloud",
+    // lite: 不帶 d3 的 base ( 見 @plotdb/chart utils ). d3-cloud 的 build 已內含 d3-dispatch, 不需要 d3 core
+    extend: {name: "@makechart/base", path: "lite/index.html"},
     dependencies: [
-      {url: "https://cdn.jsdelivr.net/npm/d3@7/dist/d3.min.js"},
-      {url: "https://cdn.jsdelivr.net/npm/d3-cloud@1/build/d3.layout.cloud.js"},
-      {name: "ldcolor"}
+      {name: "d3-cloud", version: "1.2.5", path: "build/d3.layout.cloud.js", async: false},
+      {name: "ldcolor"},
+      {name: "@xlfont/load", version: "main"}
     ]
   },
   init: function(opt) {
     var d3 = opt.ctx.d3;
     var cloud = opt.ctx.d3.layout.cloud;
     var ldcolor = opt.ctx.ldcolor;
+    xfl = opt.ctx.xfl;
+    var Scale = opt.ctx.chart.utils.scale;
     var root = opt.root;
-    
+    // 旋轉與隨機顏色用固定種子的亂數: 同樣的資料與設定每次排出一樣的結果
+    var rng = lcg(1);
+
     // 創建 SVG 容器
-    var svg = d3.select(root).append("svg")
-      .attr("width", "100%")
-      .attr("height", "100%");
-    
-    var g = svg.append("g");
+    var svg = root.appendChild(document.createElementNS(svgns, "svg"));
+    svg.setAttribute("width", "100%");
+    svg.setAttribute("height", "100%");
+    // svg 接在 base 的 layout 區塊後面, 會被擠到可視範圍外; 疊回左上角
+    svg.style.position = "absolute";
+    svg.style.left = svg.style.top = 0;
+
+    var g = svg.appendChild(document.createElementNS(svgns, "g"));
     var layout = cloud();
     
     opt.pubsub.fire("init", {
@@ -124,11 +144,11 @@ module.exports = {
           // 根據設定選擇比例尺
           var sizeScale;
           if (this.cfg.sizeScale === "sqrt") {
-            sizeScale = d3.scaleSqrt()
+            sizeScale = Scale.sqrt()
               .domain([minSize, maxSize])
               .range([this.cfg.font.minsize, this.cfg.font.maxsize]);
           } else {
-            sizeScale = d3.scaleLinear()
+            sizeScale = Scale.linear()
               .domain([minSize, maxSize])
               .range([this.cfg.font.minsize, this.cfg.font.maxsize]);
           }
@@ -152,6 +172,7 @@ module.exports = {
             });
           }
           
+          rng = lcg(1);
           this.parsed = this.data.map(function(d, i) {
             var color;
             
@@ -161,7 +182,7 @@ module.exports = {
             } else {
               // 沒有分類資料時，根據設定決定顏色
               if (that.cfg.randomColor === "true") {
-                color = colors[Math.floor(Math.random() * colors.length)];
+                color = colors[Math.floor(rng() * colors.length)];
               } else {
                 color = colors[0];
               }
@@ -179,7 +200,8 @@ module.exports = {
           var rect = root.getBoundingClientRect();
           this.width = rect.width;
           this.height = rect.height;
-          svg.attr("width", this.width).attr("height", this.height);
+          svg.setAttribute("width", this.width);
+          svg.setAttribute("height", this.height);
 	  loadfont.apply(this, []);
         },
         render: function() {
@@ -193,21 +215,22 @@ module.exports = {
           
           // 準備旋轉函式
           var rotateFunction;
+          rng = lcg(2);
           switch (this.cfg.rotationMode) {
             case "none":
               rotateFunction = function() { return 0; };
               break;
             case "fixed":
               rotateFunction = function() { 
-                return ~~(Math.random() * 2) * that.cfg.rotationStep; 
+                return ~~(rng() * 2) * that.cfg.rotationStep;
               };
               break;
             case "random":
             default:
               rotateFunction = function() { 
                 var steps = Math.floor(that.cfg.maxRotation / that.cfg.rotationStep) + 1;
-                var randomStep = Math.floor(Math.random() * steps);
-                return (Math.random() < 0.5 ? 1 : -1) * randomStep * that.cfg.rotationStep;
+                var randomStep = Math.floor(rng() * steps);
+                return (rng() < 0.5 ? 1 : -1) * randomStep * that.cfg.rotationStep;
               };
               break;
           }
@@ -224,23 +247,22 @@ module.exports = {
             .random(function() { return 0.5; }) // 固定隨機種子讓結果更一致
             .on("end", function(words) {
               // 清除舊內容
-              g.selectAll("*").remove();
-              
+              g.textContent = "";
+
               // 居中
-              g.attr("transform", "translate(" + that.width/2 + "," + that.height/2 + ")");
-              
+              g.setAttribute("transform", "translate(" + that.width/2 + "," + that.height/2 + ")");
+
               // 繪製文字
-              g.selectAll("text")
-                .data(words)
-                .enter().append("text")
-                .style("font-size", function(d) { return d.size + "px"; })
-                .style("font-family", (that.cfg.font.family || {}).name || 'sans-serif')
-                .style("fill", function(d) { return d.color; })
-                .attr("text-anchor", "middle")
-                .attr("transform", function(d) {
-                  return "translate(" + [d.x, d.y] + ")rotate(" + d.rotate + ")";
-                })
-                .text(function(d) { return d.text; });
+              words.forEach(function(d) {
+                var t = g.appendChild(document.createElementNS(svgns, "text"));
+                t.__data__ = d;
+                t.style.fontSize = d.size + "px";
+                t.style.fontFamily = (that.cfg.font.family || {}).name || 'sans-serif';
+                t.style.fill = d.color;
+                t.setAttribute("text-anchor", "middle");
+                t.setAttribute("transform", "translate(" + [d.x, d.y] + ")rotate(" + d.rotate + ")");
+                t.textContent = d.text;
+              });
             });
           
           // 開始佈局
@@ -250,7 +272,7 @@ module.exports = {
           if (layout) {
             layout.stop();
           }
-          svg.remove();
+          if (svg.parentNode) svg.parentNode.removeChild(svg);
         }
       }
     });

package/package.json

@@ -1 +1 @@
-{"name":"@makechart/tagcloud","version":"0.0.1","description":"","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"keywords":[],"author":"zbryikt","license":"MIT","dependencies":{"@plotdb/srcbuild":"^0.0.69","fedep":"1.6.0","livescript":"^1.6.0"}}
+{"name":"@makechart/tagcloud","version":"0.0.2","description":"","scripts":{"test":"mctest","test:serve":"mctest serve -o","test:dev":"mctest -l \"@makechart/base:../base;@plotdb/chart:../../../plotdb/projects/chart;@plotdb/dash:../../../plotdb/projects/dash\"","test:dev:serve":"mctest serve -o -l \"@makechart/base:../base;@plotdb/chart:../../../plotdb/projects/chart;@plotdb/dash:../../../plotdb/projects/dash\""},"keywords":[],"author":"zbryikt","license":"MIT","dependencies":{"@plotdb/srcbuild":"^0.0.69","fedep":"1.6.0","livescript":"^1.6.0"},"devDependencies":{"@makechart/viewer":"^0.0.3"}}