vislite 1.2.0-alpha.2 → 1.2.0-alpha.4

package/lib/animation/index.es.js

@@ -1,14 +1,28 @@
 /*!
-* animation of VISLite JavaScript Library v1.2.0-alpha.2
+* animation of VISLite JavaScript Library v1.2.0-alpha.4
 * git+https://github.com/oi-contrib/VISLite.git
 */
+//当前正在运动的动画的tick函数堆栈
 var $timers = [];
+//唯一定时器的定时间隔
 var $interval = 13;
+//定时器ID
 var $timerId;
-function animation (doback, duration, callback) {
-    if (duration === void 0) { duration = 400; }
-    if (callback === void 0) { callback = function () { }; }
+
+/**
+ * 动画轮播
+ * @param {function} doback 轮询函数，有一个形参deep，0-1，表示执行进度
+ * @param {number} duration 动画时长，可选
+ * @param {function} callback 动画结束回调，可选，有一个形参deep，0-1，表示执行进度
+ *
+ * @returns {function} 返回一个函数，调用该函数，可以提前结束动画
+ */
+function animation(doback, duration, callback) {
+    if (arguments.length < 2) duration = 400;
+    if (arguments.length < 3) callback = function () { };
+
     var clock = {
+        //把tick函数推入堆栈
         "timer": function (tick, duration, callback) {
             if (!tick) {
                 throw new Error('Tick is required!');
@@ -24,29 +38,37 @@ function animation (doback, duration, callback) {
             clock.start();
             return id;
         },
+
+        //开启唯一的定时器timerId
         "start": function () {
             if (!$timerId) {
                 $timerId = setInterval(clock.tick, $interval);
             }
         },
+
+        //被定时器调用，遍历timers堆栈
         "tick": function () {
-            var createTime, flag, tick, callback, timer, duration, passTime;
-            var timers = $timers;
+            var createTime, flag, tick, callback, timer, duration, passTime, timers = $timers;
+
             $timers = [];
             $timers.length = 0;
+
             for (flag = 0; flag < timers.length; flag++) {
+                //初始化数据
                 timer = timers[flag];
                 createTime = timer.createTime;
                 tick = timer.tick;
                 duration = timer.duration;
                 callback = timer.callback;
+
+                //执行
                 passTime = (+new Date().valueOf() - createTime.valueOf()) / duration;
                 passTime = passTime > 1 ? 1 : passTime;
                 tick(passTime);
                 if (passTime < 1 && timer.id) {
+                    //动画没有结束再添加
                     $timers.push(timer);
-                }
-                else {
+                } else {
                     callback(passTime);
                 }
             }
@@ -54,6 +76,8 @@ function animation (doback, duration, callback) {
                 clock.stop();
             }
         },
+
+        //停止定时器，重置timerId=null
         "stop": function () {
             if ($timerId) {
                 clearInterval($timerId);
@@ -61,9 +85,14 @@ function animation (doback, duration, callback) {
             }
         }
     };
+
     var id = clock.timer(function (deep) {
+        //其中deep为0-1，表示改变的程度
         doback(deep);
     }, duration, callback);
+
+    // 返回一个函数
+    // 用于在动画结束前结束动画
     return function () {
         var i;
         for (i in $timers) {
@@ -73,6 +102,7 @@ function animation (doback, duration, callback) {
             }
         }
     };
+
 }
 
 export { animation as default };

package/lib/animation/index.es.min.js

@@ -1,5 +1,5 @@
 /*!
-* animation of VISLite JavaScript Library v1.2.0-alpha.2
+* animation of VISLite JavaScript Library v1.2.0-alpha.4
 * git+https://github.com/oi-contrib/VISLite.git
 */
-var t,e=[];function i(i,n,r){void 0===n&&(n=400),void 0===r&&(r=function(){});var a={timer:function(t,i,n){if(!t)throw new Error("Tick is required!");var r=(new Date).valueOf()+"_"+(1e3*Math.random()).toFixed(0);return e.push({id:r,createTime:new Date,tick:t,duration:i,callback:n}),a.start(),r},start:function(){t||(t=setInterval(a.tick,13))},tick:function(){var t,i,n,r,o,u,c,f=e;for((e=[]).length=0,i=0;i<f.length;i++)t=(o=f[i]).createTime,n=o.tick,u=o.duration,r=o.callback,n(c=(c=(+(new Date).valueOf()-t.valueOf())/u)>1?1:c),c<1&&o.id?e.push(o):r(c);e.length<=0&&a.stop()},stop:function(){t&&(clearInterval(t),t=null)}},o=a.timer((function(t){i(t)}),n,r);return function(){var t;for(t in e)if(e[t].id==o)return void(e[t].id=void 0)}}export{i as default};
+var t,e=[];function n(n,r,i){arguments.length<2&&(r=400),arguments.length<3&&(i=function(){});var a={timer:function(t,n,r){if(!t)throw new Error("Tick is required!");var i=(new Date).valueOf()+"_"+(1e3*Math.random()).toFixed(0);return e.push({id:i,createTime:new Date,tick:t,duration:n,callback:r}),a.start(),i},start:function(){t||(t=setInterval(a.tick,13))},tick:function(){var t,n,r,i,o,u,c,l=e;for((e=[]).length=0,n=0;n<l.length;n++)t=(o=l[n]).createTime,r=o.tick,u=o.duration,i=o.callback,r(c=(c=(+(new Date).valueOf()-t.valueOf())/u)>1?1:c),c<1&&o.id?e.push(o):i(c);e.length<=0&&a.stop()},stop:function(){t&&(clearInterval(t),t=null)}},o=a.timer((function(t){n(t)}),r,i);return function(){var t;for(t in e)if(e[t].id==o)return void(e[t].id=void 0)}}export{n as default};

package/lib/assemble/index.es.js

@@ -1,5 +1,5 @@
 /*!
-* assemble of VISLite JavaScript Library v1.2.0-alpha.2
+* assemble of VISLite JavaScript Library v1.2.0-alpha.4
 * git+https://github.com/oi-contrib/VISLite.git
 */
 function assemble (begin, end, step, count) {

package/lib/assemble/index.es.min.js

@@ -1,5 +1,5 @@
 /*!
-* assemble of VISLite JavaScript Library v1.2.0-alpha.2
+* assemble of VISLite JavaScript Library v1.2.0-alpha.4
 * git+https://github.com/oi-contrib/VISLite.git
 */
 function r(r,t,e,f){for(var n=[],o=0;o<f;o++)n[o]=r;return function(){for(var o=0;o<f;o++){if(n[o]+e<t){n[o]=+(n[o]+e).toFixed(7);break}o<f-1&&(n[o]=r)}return n}}export{r as default};

package/lib/getLoopColors/index.es.js

@@ -1,5 +1,5 @@
 /*!
-* getLoopColors of VISLite JavaScript Library v1.2.0-alpha.2
+* getLoopColors of VISLite JavaScript Library v1.2.0-alpha.4
 * git+https://github.com/oi-contrib/VISLite.git
 */
 function getLoopColors (num, alpha) {

package/lib/getLoopColors/index.es.min.js

@@ -1,5 +1,5 @@
 /*!
-* getLoopColors of VISLite JavaScript Library v1.2.0-alpha.2
+* getLoopColors of VISLite JavaScript Library v1.2.0-alpha.4
 * git+https://github.com/oi-contrib/VISLite.git
 */
 function r(r,a){void 0===a&&(a=1);var g=["rgba(84,112,198,"+a+")","rgba(145,204,117,"+a+")","rgba(250,200,88,"+a+")","rgba(238,102,102,"+a+")","rgba(115,192,222,"+a+")","rgba(59,162,114,"+a+")","rgba(252,132,82,"+a+")","rgba(154,96,180,"+a+")","rgba(234,124,204,"+a+")"],t=[];if(r<=g.length)return g;if(r%g.length==0)for(var e=0;e<r/g.length;e++)t=t.concat(g);else{for(var n=1;n<r/g.length;n++)t=t.concat(g);if(r%g.length==1)t=t.concat(g[4]);else for(var o=0;o<r%g.length;o++)t=t.concat(g[o])}return t}export{r as default};

package/lib/getWebGLContext/index.es.js

@@ -1,5 +1,5 @@
 /*!
-* getWebGLContext of VISLite JavaScript Library v1.2.0-alpha.2
+* getWebGLContext of VISLite JavaScript Library v1.2.0-alpha.4
 * git+https://github.com/oi-contrib/VISLite.git
 */
 function getWebGLContext (canvas, scale, opts, mode) {

package/lib/getWebGLContext/index.es.min.js

@@ -1,5 +1,5 @@
 /*!
-* getWebGLContext of VISLite JavaScript Library v1.2.0-alpha.2
+* getWebGLContext of VISLite JavaScript Library v1.2.0-alpha.4
 * git+https://github.com/oi-contrib/VISLite.git
 */
 var e=function(e,t,i){if(void 0===t&&(t=1),!e)throw new Error("VISLite getWebGLContext:The mount point requires an HTMLElement type but encountered null.");var n,r=e.clientWidth,a=e.clientHeight,o=e;return o._vislite_canvas_?n=o._vislite_canvas_:(n=document.createElement("canvas"),e.appendChild(n),o._vislite_canvas_=n,e.setAttribute("vislite","WebGL")),n.style.width=r+"px",n.setAttribute("width",r+""),n.style.height=a+"px",n.setAttribute("height",a+""),function(e,t,i,n){void 0===i&&(i={}),void 0===n&&(n="scaleToFill");for(var r=["experimental-webgl","webkit-3d","moz-webgl"],a=e.getContext("webgl",i),o=0;o<r.length;o++){try{a=e.getContext(r[o],i)}catch(e){}if(a)break}if(!a)throw new Error("Non canvas or browser does not support webgl.");var l=a.canvas.width,s=a.canvas.height,c=t,v=t;"aspectFit"==n?l>s?c*=s/l:s>l&&(v*=l/s):"aspectFill"==n&&(l>s?v*=l/s:s>l&&(c*=s/l));var h=l*c,u=s*v;return a.viewport(.5*(l-h),.5*(s-u),h,u),a.depthFunc(a.LEQUAL),a.enable(a.DEPTH_TEST),a}(n,t,{},i)};export{e as default};

package/lib/index.umd.js

@@ -1,5 +1,5 @@
 /*!
-* VISLite JavaScript Library v1.2.0-alpha.2
+* VISLite JavaScript Library v1.2.0-alpha.4
 * git+https://github.com/oi-contrib/VISLite.git
 */
 (function (global, factory) {
@@ -293,13 +293,27 @@
         return colors;
     }
 
+    //当前正在运动的动画的tick函数堆栈
     var $timers = [];
+    //唯一定时器的定时间隔
     var $interval = 13;
+    //定时器ID
     var $timerId;
-    function animation (doback, duration, callback) {
-        if (duration === void 0) { duration = 400; }
-        if (callback === void 0) { callback = function () { }; }
+
+    /**
+     * 动画轮播
+     * @param {function} doback 轮询函数，有一个形参deep，0-1，表示执行进度
+     * @param {number} duration 动画时长，可选
+     * @param {function} callback 动画结束回调，可选，有一个形参deep，0-1，表示执行进度
+     *
+     * @returns {function} 返回一个函数，调用该函数，可以提前结束动画
+     */
+    function animation(doback, duration, callback) {
+        if (arguments.length < 2) duration = 400;
+        if (arguments.length < 3) callback = function () { };
+
         var clock = {
+            //把tick函数推入堆栈
             "timer": function (tick, duration, callback) {
                 if (!tick) {
                     throw new Error('Tick is required!');
@@ -315,29 +329,37 @@
                 clock.start();
                 return id;
             },
+
+            //开启唯一的定时器timerId
             "start": function () {
                 if (!$timerId) {
                     $timerId = setInterval(clock.tick, $interval);
                 }
             },
+
+            //被定时器调用，遍历timers堆栈
             "tick": function () {
-                var createTime, flag, tick, callback, timer, duration, passTime;
-                var timers = $timers;
+                var createTime, flag, tick, callback, timer, duration, passTime, timers = $timers;
+
                 $timers = [];
                 $timers.length = 0;
+
                 for (flag = 0; flag < timers.length; flag++) {
+                    //初始化数据
                     timer = timers[flag];
                     createTime = timer.createTime;
                     tick = timer.tick;
                     duration = timer.duration;
                     callback = timer.callback;
+
+                    //执行
                     passTime = (+new Date().valueOf() - createTime.valueOf()) / duration;
                     passTime = passTime > 1 ? 1 : passTime;
                     tick(passTime);
                     if (passTime < 1 && timer.id) {
+                        //动画没有结束再添加
                         $timers.push(timer);
-                    }
-                    else {
+                    } else {
                         callback(passTime);
                     }
                 }
@@ -345,6 +367,8 @@
                     clock.stop();
                 }
             },
+
+            //停止定时器，重置timerId=null
             "stop": function () {
                 if ($timerId) {
                     clearInterval($timerId);
@@ -352,9 +376,14 @@
                 }
             }
         };
+
         var id = clock.timer(function (deep) {
+            //其中deep为0-1，表示改变的程度
             doback(deep);
         }, duration, callback);
+
+        // 返回一个函数
+        // 用于在动画结束前结束动画
         return function () {
             var i;
             for (i in $timers) {
@@ -364,6 +393,7 @@
                 }
             }
         };
+
     }
 
     function ruler (maxValue, minValue, num, option) {
@@ -562,7 +592,6 @@
     function full(el, config) {
         _setAttribute(el, "stroke", config.strokeStyle);
         _setAttribute(el, "fill", config.fillStyle);
-        _setAttribute(el, "stroke-dasharray", config.lineDash.join(','));
     }
     function fill(el, config) {
         _setAttribute(el, "fill", config.fillStyle);
@@ -570,7 +599,6 @@
     function stroke(el, config) {
         _setAttribute(el, "stroke", config.strokeStyle);
         _setAttribute(el, "fill", "none");
-        _setAttribute(el, "stroke-dasharray", config.lineDash.join(','));
     }
 
     function setStyle (el, styles) {
@@ -651,10 +679,14 @@
         setAttribute(el, "cy", cy);
         setAttribute(el, "r", r);
     };
-    var initPath = function (el, path) {
+    var initPath = function (el, path, config) {
         if (el.nodeName.toLowerCase() !== "path")
             throw new Error("Need a <path> !");
         setAttribute(el, "d", path);
+        setAttribute(el, "stroke-dasharray", config.lineDash.join(','));
+        setAttribute(el, "stroke-width", config.lineWidth + "");
+        setAttribute(el, "stroke-linecap", config.lineCap + "");
+        setAttribute(el, "stroke-linejoin", config.lineJoin + "");
     };
     var initRect$1 = function (el, x, y, width, height) {
         if (el.nodeName.toLowerCase() !== "rect")
@@ -761,7 +793,6 @@
             this.__config = {
                 fillStyle: "#000",
                 strokeStyle: "#000",
-                lineWidth: 1,
                 textAlign: "left",
                 textBaseline: "middle",
                 "fontSize": 16,
@@ -769,6 +800,9 @@
                 "arcStartCap": "butt",
                 "arcEndCap": "butt",
                 lineDash: [],
+                lineWidth: 1,
+                lineCap: "butt",
+                lineJoin: "miter"
             };
             this.__path = "";
             this.__currentPosition = [];
@@ -923,17 +957,17 @@
             return this;
         };
         SVG.prototype.fill = function () {
-            initPath(this.__useEl, this.__path);
+            initPath(this.__useEl, this.__path, this.__config);
             fill(this.__useEl, this.__config);
             return this;
         };
         SVG.prototype.stroke = function () {
-            initPath(this.__useEl, this.__path);
+            initPath(this.__useEl, this.__path, this.__config);
             stroke(this.__useEl, this.__config);
             return this;
         };
         SVG.prototype.full = function () {
-            initPath(this.__useEl, this.__path);
+            initPath(this.__useEl, this.__path, this.__config);
             full(this.__useEl, this.__config);
             return this;
         };
@@ -1104,9 +1138,11 @@
                 "fillStyle": 'black',
                 "strokeStyle": 'black',
                 "lineWidth": 1,
+                "lineCap": "butt",
+                "lineJoin": "miter",
+                "lineDash": [],
                 "textAlign": 'left',
                 "textBaseline": 'middle',
-                "lineDash": [],
                 "shadowBlur": 0,
                 "shadowColor": "black"
             };
@@ -1494,13 +1530,13 @@
         };
     }
 
-    var enhanceGradient = function (gradient) {
+    var enhanceGradient = function (gradient, calcStop) {
         var enhanceGradient = {
             "value": function () {
                 return gradient;
             },
             "setColor": function (stop, color) {
-                gradient.addColorStop(stop, color);
+                gradient.addColorStop(calcStop ? calcStop(stop) : stop, color);
                 return enhanceGradient;
             }
         };
@@ -1513,6 +1549,12 @@
     var radialGradient = function (painter, cx, cy, r) {
         var gradient = painter.createRadialGradient(cx, cy, 0, cx, cy, r);
         return enhanceGradient(gradient);
+    };
+    var conicGradient = function (painter, cx, cy, startDeg, deg) {
+        var gradient = painter.createConicGradient(startDeg, cx, cy);
+        return enhanceGradient(gradient, deg ? function (stop) {
+            return deg / (Math.PI * 2) * stop;
+        } : undefined);
     };
 
     var Canvas$1 = (function (_super) {
@@ -1621,6 +1663,9 @@
         Canvas.prototype.createRadialGradient = function (cx, cy, r) {
             return radialGradient(this.painter, cx, cy, r);
         };
+        Canvas.prototype.createConicGradient = function (cx, cy, beginDeg, deg) {
+            return conicGradient(this.painter, cx, cy, beginDeg, deg);
+        };
         Canvas.prototype.getColor = function (x, y) {
             x *= this.__scaleSize;
             y *= this.__scaleSize;
@@ -1740,7 +1785,7 @@
             var _this = this;
             this.__el.addEventListener(eventName, function (event) {
                 _this.getRegion(event.offsetX, event.offsetY).then(function (regionName) {
-                    callback(regionName);
+                    callback(regionName, event.offsetX, event.offsetY);
                 });
             });
             return this;
@@ -1993,47 +2038,54 @@
         return Mercator;
     }());
 
-    function throttle (callback, option) {
-        if (option === void 0) { option = {}; }
-        option = initOption(option, {
+    function throttle(callback, _option) {
+
+        // 缺省值
+        var option = {
             time: 200,
             keep: false,
             opportunity: "end"
-        });
-        var hadInterval = false;
-        var hadClick = false;
-        var oneClick = false;
-        var arg;
+        };
+
+        // 校对
+        if (_option) {
+            for (var key in _option) {
+                option[key] = _option[key];
+            }
+        }
+
+        var hadInterval = false, hadClick = false, oneClick = false, arg;
         return function () {
-            var _this = this;
+            const _this = this;
             arg = arguments;
+
+            // 如果前置任务都完成了
             if (!hadInterval) {
                 if (option.opportunity != 'end') {
                     callback.apply(_this, arg);
                 }
                 hadInterval = true;
-                var interval_1 = setInterval(function () {
+
+                var interval = setInterval(() => {
                     if (hadClick) {
                         if (!option.keep) {
                             callback.apply(_this, arg);
                         }
-                    }
-                    else {
+                    } else {
                         if (option.opportunity != 'begin') {
-                            if (oneClick || option.opportunity == 'end')
-                                callback.apply(_this, arg);
+                            if (oneClick || option.opportunity == 'end') callback.apply(_this, arg);
                         }
                         hadInterval = false;
                         oneClick = false;
-                        clearInterval(interval_1);
+                        clearInterval(interval);
                     }
                     hadClick = false;
                 }, option.time);
-            }
-            else {
+            } else {
                 hadClick = true;
                 oneClick = true;
             }
+
         };
     }