vislite 1.3.0 → 1.4.0

package/lib/index.umd.js

@@ -1,5 +1,5 @@
 /*!
-* VISLite JavaScript Library v1.3.0
+* VISLite JavaScript Library v1.4.0
 * git+https://github.com/oi-contrib/VISLite.git
 */
 (function (global, factory) {
@@ -293,107 +293,118 @@
         return colors;
     }
 
-    //当前正在运动的动画的tick函数堆栈
-    var $timers = [];
-    //唯一定时器的定时间隔
-    var $interval = 13;
-    //定时器ID
-    var $timerId;
-
-    /**
-     * 动画轮播
-     * @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!');
-                }
-                var id = new Date().valueOf() + "_" + (Math.random() * 1000).toFixed(0);
-                $timers.push({
-                    "id": id,
-                    "createTime": new Date(),
-                    "tick": tick,
-                    "duration": duration,
-                    "callback": 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, 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 {
-                        callback(passTime);
-                    }
-                }
-                if ($timers.length <= 0) {
-                    clock.stop();
-                }
-            },
-
-            //停止定时器，重置timerId=null
-            "stop": function () {
-                if ($timerId) {
-                    clearInterval($timerId);
-                    $timerId = null;
-                }
-            }
-        };
-
-        var id = clock.timer(function (deep) {
-            //其中deep为0-1，表示改变的程度
-            doback(deep);
-        }, duration, callback);
-
-        // 返回一个函数
-        // 用于在动画结束前结束动画
-        return function () {
-            var i;
-            for (i in $timers) {
-                if ($timers[i].id == id) {
-                    $timers[i].id = void 0;
-                    return;
-                }
-            }
-        };
-
+    /*!
+    * animation of OIPage v1.3.0
+    * git+https://github.com/oi-contrib/OIPage.git
+    */
+
+    //当前正在运动的动画的tick函数堆栈
+    var $timers = [];
+    //唯一定时器的定时间隔
+    var $interval = 13;
+    //定时器ID
+    var $timerId;
+
+    /**
+     * 动画轮播
+     * @param {function} doback 轮询函数，有一个形参deep，0-1，表示执行进度
+     * @param {number} duration 动画时长，可选
+     * @param {function} callback 动画结束回调，可选，有一个形参deep，0-1，表示执行进度
+     *
+     * @returns {function} 返回一个函数，调用该函数，可以提前结束动画
+     */
+    function animation$1(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!');
+                }
+                var id = new Date().valueOf() + "_" + (Math.random() * 1000).toFixed(0);
+                $timers.push({
+                    "id": id,
+                    "createTime": new Date(),
+                    "tick": tick,
+                    "duration": duration,
+                    "callback": 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, 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 {
+                        callback(passTime);
+                    }
+                }
+                if ($timers.length <= 0) {
+                    clock.stop();
+                }
+            },
+
+            //停止定时器，重置timerId=null
+            "stop": function () {
+                if ($timerId) {
+                    clearInterval($timerId);
+                    $timerId = null;
+                }
+            }
+        };
+
+        var id = clock.timer(function (deep) {
+            //其中deep为0-1，表示改变的程度
+            doback(deep);
+        }, duration, callback);
+
+        return {
+            // 一个函数
+            // 用于在动画结束前结束动画
+            stop: function () {
+                var i;
+                for (i in $timers) {
+                    if ($timers[i].id == id) {
+                        $timers[i].id = void 0;
+                        return;
+                    }
+                }
+            }
+        };
+
+    }
+
+    function animation (doback, duration, callback) {
+        return animation$1(doback, duration || 400, callback || function () { }).stop;
     }
 
     function ruler (maxValue, minValue, num, option) {
@@ -802,7 +813,7 @@
     };
     var linearGradient$1 = function (el, x0, y0, x1, y1) {
         var defs = initDefs(el);
-        var gradientId = "vislite-lg-" + new Date().valueOf() + "-" + Math.random();
+        var gradientId = "visliteLg" + new Date().valueOf() + "" + (Math.random() * 1000000).toFixed(0);
         var linearGradient = toNode("linearGradient");
         defs.appendChild(linearGradient);
         setAttribute(linearGradient, "id", gradientId);
@@ -814,7 +825,7 @@
     };
     var radialGradient$1 = function (el, cx, cy, r) {
         var defs = initDefs(el);
-        var gradientId = "vislite-rg-" + new Date().valueOf() + "-" + Math.random();
+        var gradientId = "visliteRg" + new Date().valueOf() + "" + (Math.random() * 1000000).toFixed(0);
         var radialGradient = toNode("radialGradient");
         defs.appendChild(radialGradient);
         setAttribute(radialGradient, "id", gradientId);
@@ -826,8 +837,8 @@
 
     function defaultFactory$1 () {
         return {
-            fillStyle: "#000",
-            strokeStyle: "#000",
+            fillStyle: "rgb(0,0,0)",
+            strokeStyle: "rgb(0,0,0)",
             textAlign: "left",
             textBaseline: "middle",
             "fontSize": 16,
@@ -1069,6 +1080,7 @@
     var SVG = (function (_super) {
         __extends(SVG, _super);
         function SVG(el) {
+            var _this = this;
             if (!el) {
                 throw new Error("VISLite SVG:The mount point requires an HTMLElement type but encountered null.");
             }
@@ -1078,8 +1090,30 @@
             ViewSVG.setAttribute("width", width + "");
             ViewSVG.setAttribute("height", height + "");
             ViewSVG.setAttribute("viewBox", "0 0 " + width + " " + height);
-            return _super.call(this, ViewSVG) || this;
+            _this = _super.call(this, ViewSVG) || this;
+            _this.__el = el;
+            return _this;
         }
+        SVG.prototype.toDataURL = function () {
+            var _this = this;
+            return new Promise(function (resolve) {
+                var width = _this.__el.clientWidth, height = _this.__el.clientHeight;
+                var img = document.createElement('img');
+                img.setAttribute('width', width + "");
+                img.setAttribute('height', height + "");
+                var base64_svg = "data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' width='" + width + "' height='" + height + "'>" + _this.__svg.innerHTML.replace(/"/g, "'") + "</svg>";
+                img.setAttribute('src', base64_svg);
+                setTimeout(function () {
+                    var canvas = document.createElement('canvas');
+                    canvas.setAttribute('width', width + "");
+                    canvas.setAttribute('height', height + "");
+                    var painter = canvas.getContext('2d');
+                    if (painter)
+                        painter.drawImage(img, 0, 0, width, height);
+                    resolve(canvas.toDataURL());
+                }, 100);
+            });
+        };
         return SVG;
     }(SVG$1));
 
@@ -1640,7 +1674,7 @@
         var gradient = painter.createConicGradient(startDeg, cx, cy);
         return enhanceGradient(gradient, deg ? function (stop) {
             return deg / (Math.PI * 2) * stop;
-        } : undefined);
+        } : void 0);
     };
 
     var Canvas$1 = (function (_super) {
@@ -2128,55 +2162,60 @@
         return Mercator;
     }());
 
-    function throttle(callback, _option) {
-
-        // 缺省值
-        var option = {
-            time: 200,
-            keep: false,
-            opportunity: "end"
-        };
-
-        // 校对
-        if (_option) {
-            for (var key in _option) {
-                option[key] = _option[key];
-            }
-        }
-
-        var hadInterval = false, hadClick = false, oneClick = false, arg;
-        return function () {
-            const _this = this;
-            arg = arguments;
-
-            // 如果前置任务都完成了
-            if (!hadInterval) {
-                if (option.opportunity != 'end') {
-                    callback.apply(_this, arg);
-                }
-                hadInterval = true;
-
-                var interval = setInterval(() => {
-                    if (hadClick) {
-                        if (!option.keep) {
-                            callback.apply(_this, arg);
-                        }
-                    } else {
-                        if (option.opportunity != 'begin') {
-                            if (oneClick || option.opportunity == 'end') callback.apply(_this, arg);
-                        }
-                        hadInterval = false;
-                        oneClick = false;
-                        clearInterval(interval);
-                    }
-                    hadClick = false;
-                }, option.time);
-            } else {
-                hadClick = true;
-                oneClick = true;
-            }
-
-        };
+    /*!
+    * throttle of OIPage v1.3.0
+    * git+https://github.com/oi-contrib/OIPage.git
+    */
+
+    function throttle(callback, _option) {
+
+        // 缺省值
+        var option = {
+            time: 200,
+            keep: false,
+            opportunity: "end"
+        };
+        
+        // 校对
+        if (_option) {
+            for (var key in _option) {
+                option[key] = _option[key];
+            }
+        }
+
+        var hadInterval = false, hadClick = false, oneClick = false, arg;
+        return function () {
+            const _this = this;
+            arg = arguments;
+
+            // 如果前置任务都完成了
+            if (!hadInterval) {
+                if (option.opportunity != 'end') {
+                    callback.apply(_this, arg);
+                }
+                hadInterval = true;
+
+                var interval = setInterval(() => {
+                    if (hadClick) {
+                        if (!option.keep) {
+                            callback.apply(_this, arg);
+                        }
+                    } else {
+                        if (option.opportunity != 'begin') {
+                            if (oneClick || option.opportunity == 'end') callback.apply(_this, arg);
+                        }
+                        hadInterval = false;
+                        oneClick = false;
+                        clearInterval(interval);
+                    }
+                    hadClick = false;
+                }, option.time);
+            } else {
+                hadClick = true;
+                oneClick = true;
+            }
+
+        };
     }
 
     function mllData(geoJson) {
@@ -2550,7 +2589,7 @@
             var _this = this;
             var newTree = this.use(this.__oralTree, this.__noOpens);
             var cacheTree = JSON.parse(JSON.stringify(newTree));
-            animation(function (deep) {
+            animation$1(function (deep) {
                 if (_this.__preTree) {
                     for (var key in cacheTree.node) {
                         if (newTree.node[key].show || _this.__preTree.node[key].show) {
@@ -2591,6 +2630,317 @@
         return TreeLayout;
     }(Tree));
 
+    var PieLayout = (function () {
+        function PieLayout(config) {
+            if (config === void 0) { config = {}; }
+            this.name = 'PieLayout';
+            this.__option = {
+                cx: 200,
+                cy: 200,
+                radius: [50, 100],
+                duration: 200,
+            };
+            this.__hoverIndex = -1;
+            this.__config = initOption(config, {
+                name: function (pieData, initPie) { return pieData.name; },
+                value: function (pieData, initPie) { return pieData.value; }
+            });
+        }
+        PieLayout.prototype.setOption = function (option) {
+            initOption(option, this.__option);
+            return this;
+        };
+        PieLayout.prototype.use = function (initPie, hoverIndex) {
+            if (hoverIndex === void 0) { hoverIndex = -1; }
+            var pie = {
+                count: initPie.length,
+                cx: this.__option.cx,
+                cy: this.__option.cy,
+                radius: this.__option.radius,
+                hoverIndex: hoverIndex,
+                node: []
+            };
+            var totalValue = 0, names = [], values = [];
+            for (var i = 0; i < initPie.length; i++) {
+                names[i] = this.__config.name(initPie[i], initPie);
+                values[i] = this.__config.value(initPie[i], initPie);
+                totalValue += values[i];
+            }
+            var beginDeg = Math.PI * -0.5, currenDeg;
+            for (var i = 0; i < initPie.length; i++) {
+                currenDeg = values[i] / totalValue * Math.PI * 2;
+                var radius = [this.__option.radius[0], this.__option.radius[1] * (1 + (hoverIndex === i ? 0.05 : 0))];
+                var pdeg = beginDeg + currenDeg * 0.5, pradius = Math.max(this.__option.radius[0], this.__option.radius[1]);
+                var p0 = rotate$1(pie.cx, pie.cy, pdeg, pie.cx + pradius, pie.cy);
+                var p1 = rotate$1(pie.cx, pie.cy, pdeg, pie.cx + pradius + 15, pie.cy);
+                var pflag = p0[0] > pie.cx ? 1 : -1;
+                var p2 = [p1[0] + pflag * 20, p1[1]];
+                var p3 = [p1[0] + pflag * 25, p1[1]];
+                pie.node[i] = {
+                    value: values[i],
+                    name: names[i],
+                    beginDeg: beginDeg,
+                    deg: currenDeg,
+                    isHover: hoverIndex === i,
+                    radius: radius,
+                    label: {
+                        line: [p0, p1, p2],
+                        position: p3,
+                        align: pflag === -1 ? "right" : "left"
+                    }
+                };
+                beginDeg += currenDeg;
+            }
+            return pie;
+        };
+        PieLayout.prototype.bind = function (initPie, renderBack) {
+            this.__rback = renderBack;
+            this.__oralPie = initPie;
+            this.__prePie = this.use(this.__oralPie, this.__hoverIndex);
+            this.__rback(this.__prePie);
+            return this;
+        };
+        PieLayout.prototype.unbind = function () {
+            this.__rback = function () { return null; };
+            this.__oralPie = null;
+            this.__prePie = null;
+            this.__hoverIndex = -1;
+            return this;
+        };
+        PieLayout.prototype.setHover = function (index) {
+            if (!this.__prePie || this.__hoverIndex === index)
+                return this;
+            this.__hoverIndex = index;
+            this.doUpdate();
+            return this;
+        };
+        PieLayout.prototype.doUpdate = function () {
+            var _this = this;
+            var newPie = this.use(this.__oralPie, this.__hoverIndex);
+            var cachePie = JSON.parse(JSON.stringify(newPie));
+            animation$1(function (deep) {
+                if (_this.__prePie) {
+                    for (var i = 0; i < cachePie.count; i++) {
+                        cachePie.node[i].radius[1] = _this.__prePie.node[i].radius[1] + (newPie.node[i].radius[1] - _this.__prePie.node[i].radius[1]) * deep;
+                    }
+                }
+                _this.__rback(cachePie);
+            }, this.__option.duration, function () {
+                _this.__prePie = newPie;
+                _this.__rback(_this.__prePie);
+            });
+            return this;
+        };
+        return PieLayout;
+    }());
+
+    var BarLayout = (function () {
+        function BarLayout(config) {
+            if (config === void 0) { config = {}; }
+            this.name = 'BarLayout';
+            this.__option = {
+                x: 50,
+                y: 350,
+                width: 400,
+                height: 300,
+                category: "xAxis",
+                duration: 200
+            };
+            this.__config = initOption(config, {});
+        }
+        BarLayout.prototype.setOption = function (option) {
+            initOption(option, this.__option);
+            return this;
+        };
+        BarLayout.prototype.use = function (initBar) {
+            var bar = {
+                coordinate: {
+                    x: this.__option.x,
+                    y: this.__option.y,
+                    width: this.__option.width,
+                    height: this.__option.height,
+                    xAxis: {
+                        type: this.__option.category === "xAxis" ? "category" : "value",
+                        data: []
+                    },
+                    yAxis: {
+                        type: this.__option.category === "xAxis" ? "value" : "category",
+                        data: []
+                    }
+                },
+                node: []
+            };
+            var maxValue = void 0, minValue = void 0;
+            if (initBar.data) {
+                for (var _i = 0, _a = initBar.data; _i < _a.length; _i++) {
+                    var val = _a[_i];
+                    if (maxValue === void 0 || val > maxValue)
+                        maxValue = val;
+                    if (minValue === void 0 || val < minValue)
+                        minValue = val;
+                }
+            }
+            else if (initBar.value) {
+                for (var _b = 0, _c = initBar.value; _b < _c.length; _b++) {
+                    var item = _c[_b];
+                    for (var _d = 0, _e = item.data; _d < _e.length; _d++) {
+                        var val = _e[_d];
+                        if (maxValue === void 0 || val > maxValue)
+                            maxValue = val;
+                        if (minValue === void 0 || val < minValue)
+                            minValue = val;
+                    }
+                }
+            }
+            else {
+                throw new Error('No data leads to parsing errors');
+            }
+            var rulerArray = ruler(maxValue || 0, minValue || 0, 5);
+            var categoryLen;
+            var valueLen;
+            if (this.__option.category === "xAxis") {
+                bar.coordinate.xAxis.data = initBar.category;
+                bar.coordinate.yAxis.data = rulerArray;
+                categoryLen = this.__option.width;
+                valueLen = -1 * this.__option.height;
+            }
+            else {
+                bar.coordinate.xAxis.data = rulerArray;
+                bar.coordinate.yAxis.data = initBar.category;
+                categoryLen = this.__option.height;
+                valueLen = this.__option.width;
+            }
+            var category = [];
+            var categorySingle1Width = categoryLen / initBar.category.length;
+            var categorySingle2Width = categorySingle1Width * 0.9;
+            var categoryStart = categorySingle1Width * 0.05;
+            if (initBar.data) {
+                for (var i = 0; i < initBar.data.length; i++) {
+                    category.push([
+                        categoryStart + categorySingle1Width * i,
+                        categorySingle2Width
+                    ]);
+                }
+            }
+            else {
+                var categorySingle3Width = categorySingle2Width / initBar.value.length;
+                var categorySingle4Width = categorySingle3Width * 0.9;
+                var categoryStartBlance = categorySingle3Width * 0.05;
+                for (var i = 0; i < initBar.value[0].data.length; i++) {
+                    category[i] = [];
+                    for (var j = 0; j < initBar.value.length; j++) {
+                        category[i].push([
+                            categoryStart + categorySingle1Width * i + categorySingle3Width * j + categoryStartBlance,
+                            categorySingle4Width
+                        ]);
+                    }
+                }
+            }
+            var singleValueLen = valueLen / (rulerArray[rulerArray.length - 1] - rulerArray[0]);
+            var getLenByValue = function (value) {
+                return singleValueLen * (value - rulerArray[0]);
+            };
+            if (this.__option.category === "xAxis") {
+                if (initBar.data) {
+                    var nodeBar = [];
+                    for (var i = 0; i < initBar.data.length; i++) {
+                        nodeBar.push({
+                            x: this.__option.x + category[i][0],
+                            y: this.__option.y,
+                            width: category[i][1],
+                            height: getLenByValue(initBar.data[i]),
+                            value: initBar.data[i]
+                        });
+                    }
+                    bar.node.push({
+                        bar: nodeBar
+                    });
+                }
+                else {
+                    for (var j = 0; j < initBar.value.length; j++) {
+                        var nodeBar = [];
+                        for (var i = 0; i < initBar.value[j].data.length; i++) {
+                            nodeBar.push({
+                                x: this.__option.x + category[i][j][0],
+                                y: this.__option.y,
+                                width: category[i][j][1],
+                                height: getLenByValue(initBar.value[j].data[i]),
+                                value: initBar.value[j].data[i]
+                            });
+                        }
+                        bar.node.push({
+                            name: initBar.value[j].name,
+                            bar: nodeBar
+                        });
+                    }
+                }
+            }
+            else {
+                if (initBar.data) {
+                    var nodeBar = [];
+                    for (var i = 0; i < initBar.data.length; i++) {
+                        nodeBar.push({
+                            x: this.__option.x,
+                            y: this.__option.y - this.__option.height + category[i][0],
+                            width: getLenByValue(initBar.data[i]),
+                            height: category[i][1],
+                            value: initBar.data[i]
+                        });
+                    }
+                    bar.node.push({
+                        bar: nodeBar
+                    });
+                }
+                else {
+                    for (var j = 0; j < initBar.value.length; j++) {
+                        var nodeBar = [];
+                        for (var i = 0; i < initBar.value[j].data.length; i++) {
+                            nodeBar.push({
+                                x: this.__option.x,
+                                y: this.__option.y - this.__option.height + category[i][j][0],
+                                width: getLenByValue(initBar.value[j].data[i]),
+                                height: category[i][j][1],
+                                value: initBar.value[j].data[i]
+                            });
+                        }
+                        bar.node.push({
+                            name: initBar.value[j].name,
+                            bar: nodeBar
+                        });
+                    }
+                }
+            }
+            return bar;
+        };
+        BarLayout.prototype.bind = function (initBar, renderBack) {
+            this.__rback = renderBack;
+            this.__oralBar = initBar;
+            this.__preBar = this.use(this.__oralBar);
+            this.__rback(this.__preBar);
+            return this;
+        };
+        BarLayout.prototype.unbind = function () {
+            this.__rback = function () { return null; };
+            this.__oralBar = null;
+            this.__preBar = null;
+            return this;
+        };
+        BarLayout.prototype.doUpdate = function () {
+            var _this = this;
+            var newBar = this.use(this.__oralBar);
+            var cacheBar = JSON.parse(JSON.stringify(newBar));
+            animation$1(function (deep) {
+                if (_this.__preBar) ;
+                _this.__rback(cacheBar);
+            }, this.__option.duration, function () {
+                _this.__preBar = newBar;
+                _this.__rback(_this.__preBar);
+            });
+            return this;
+        };
+        return BarLayout;
+    }());
+
     var index = {
         Cardinal: Cardinal,
         Hermite: Hermite,
@@ -2614,6 +2964,8 @@
         assemble: assemble,
         MapCoordinate: MapCoordinate,
         TreeLayout: TreeLayout,
+        PieLayout: PieLayout,
+        BarLayout: BarLayout,
         initOption: initOption,
         mergeOption: mergeOption
     };