vislite 1.3.0 → 1.4.0-alpha.0

package/lib/index.umd.js

@@ -1,5 +1,5 @@
 /*!
-* VISLite JavaScript Library v1.3.0
+* VISLite JavaScript Library v1.4.0-alpha.0
 * git+https://github.com/oi-contrib/VISLite.git
 */
 (function (global, factory) {
@@ -8,291 +8,296 @@
     (global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.VISLite = factory());
 })(this, (function () { 'use strict';
 
-    var Hermite = (function () {
-        function Hermite(u) {
-            if (u === void 0) { u = 0.5; }
-            this.name = 'Hermite';
-            this.__u = u;
-        }
-        Hermite.prototype.setP = function (x1, y1, x2, y2, s1, s2) {
-            if (x1 < x2) {
-                this.__a = x1;
-                this.__b = x2;
-                var p3 = this.__u * s1, p4 = this.__u * s2;
-                y1 /= (x2 - x1);
-                y2 /= (x2 - x1);
-                this.__MR = [
-                    2 * y1 - 2 * y2 + p3 + p4,
-                    3 * y2 - 3 * y1 - 2 * p3 - p4,
-                    p3,
-                    y1
-                ];
-            }
-            else
-                throw new Error('The point x-position should be increamented!');
-            return this;
-        };
-        Hermite.prototype.use = function (x) {
-            if (this.__MR) {
-                var sx = (x - this.__a) / (this.__b - this.__a), sx2 = sx * sx, sx3 = sx * sx2;
-                var sResult = sx3 * this.__MR[0] + sx2 * this.__MR[1] + sx * this.__MR[2] + this.__MR[3];
-                return sResult * (this.__b - this.__a);
-            }
-            else
-                throw new Error('You shoud first set the position!');
-        };
-        return Hermite;
+    var Hermite = (function () {
+        function Hermite(u) {
+            if (u === void 0) { u = 0.5; }
+            this.name = 'Hermite';
+            this.__u = u;
+        }
+        Hermite.prototype.setP = function (x1, y1, x2, y2, s1, s2) {
+            if (x1 < x2) {
+                this.__a = x1;
+                this.__b = x2;
+                var p3 = this.__u * s1, p4 = this.__u * s2;
+                y1 /= (x2 - x1);
+                y2 /= (x2 - x1);
+                this.__MR = [
+                    2 * y1 - 2 * y2 + p3 + p4,
+                    3 * y2 - 3 * y1 - 2 * p3 - p4,
+                    p3,
+                    y1
+                ];
+            }
+            else
+                throw new Error('The point x-position should be increamented!');
+            return this;
+        };
+        Hermite.prototype.use = function (x) {
+            if (this.__MR) {
+                var sx = (x - this.__a) / (this.__b - this.__a), sx2 = sx * sx, sx3 = sx * sx2;
+                var sResult = sx3 * this.__MR[0] + sx2 * this.__MR[1] + sx * this.__MR[2] + this.__MR[3];
+                return sResult * (this.__b - this.__a);
+            }
+            else
+                throw new Error('You shoud first set the position!');
+        };
+        return Hermite;
     }());
 
-    var Cardinal = (function () {
-        function Cardinal(t) {
-            if (t === void 0) { t = 0; }
-            this.name = 'Cardinal';
-            this.__t = t;
-        }
-        Cardinal.prototype.setP = function (points) {
-            this.__HS = {
-                "x": [],
-                "h": []
-            };
-            var flag, slope = (points[1][1] - points[0][1]) / (points[1][0] - points[0][0]), temp;
-            this.__HS.x[0] = points[0][0];
-            for (flag = 1; flag < points.length; flag++) {
-                if (points[flag][0] <= points[flag - 1][0])
-                    throw new Error('The point position should be increamented!');
-                this.__HS.x[flag] = points[flag][0];
-                if (flag < points.length - 1) {
-                    if ((points[flag + 1][1] > points[flag][1] && points[flag - 1][1] > points[flag][1]) ||
-                        (points[flag + 1][1] < points[flag][1] && points[flag - 1][1] < points[flag][1]) ||
-                        points[flag + 1][1] == points[flag][1] ||
-                        points[flag - 1][1] == points[flag][1]) {
-                        temp = 0;
-                    }
-                    else {
-                        temp = (points[flag + 1][1] - points[flag - 1][1]) / (points[flag + 1][0] - points[flag - 1][0]);
-                    }
-                }
-                else {
-                    temp = (points[flag][1] - points[flag - 1][1]) / (points[flag][0] - points[flag - 1][0]);
-                }
-                this.__HS.h[flag - 1] = new Hermite((1 - this.__t) * 0.5).setP(points[flag - 1][0], points[flag - 1][1], points[flag][0], points[flag][1], slope, temp);
-                slope = temp;
-            }
-            return this;
-        };
-        Cardinal.prototype.use = function (x) {
-            if (this.__HS) {
-                this.__i = -1;
-                while (this.__i + 1 < this.__HS.x.length && (x > this.__HS.x[this.__i + 1] || (this.__i == -1 && x >= this.__HS.x[this.__i + 1]))) {
-                    this.__i += 1;
-                }
-                if (this.__i < 0) {
-                    return this.__HS.h[0].use(this.__HS.x[0]);
-                }
-                else if (this.__i >= this.__HS.h.length) {
-                    return this.__HS.h[this.__HS.h.length - 1].use(this.__HS.x[this.__HS.x.length - 1]);
-                }
-                return this.__HS.h[this.__i].use(x);
-            }
-            else {
-                throw new Error('You shoud first set the position!');
-            }
-        };
-        return Cardinal;
+    var Cardinal = (function () {
+        function Cardinal(t) {
+            if (t === void 0) { t = 0; }
+            this.name = 'Cardinal';
+            this.__t = t;
+        }
+        Cardinal.prototype.setP = function (points) {
+            this.__HS = {
+                "x": [],
+                "h": []
+            };
+            var flag, slope = (points[1][1] - points[0][1]) / (points[1][0] - points[0][0]), temp;
+            this.__HS.x[0] = points[0][0];
+            for (flag = 1; flag < points.length; flag++) {
+                if (points[flag][0] <= points[flag - 1][0])
+                    throw new Error('The point position should be increamented!');
+                this.__HS.x[flag] = points[flag][0];
+                if (flag < points.length - 1) {
+                    if ((points[flag + 1][1] > points[flag][1] && points[flag - 1][1] > points[flag][1]) ||
+                        (points[flag + 1][1] < points[flag][1] && points[flag - 1][1] < points[flag][1]) ||
+                        points[flag + 1][1] == points[flag][1] ||
+                        points[flag - 1][1] == points[flag][1]) {
+                        temp = 0;
+                    }
+                    else {
+                        temp = (points[flag + 1][1] - points[flag - 1][1]) / (points[flag + 1][0] - points[flag - 1][0]);
+                    }
+                }
+                else {
+                    temp = (points[flag][1] - points[flag - 1][1]) / (points[flag][0] - points[flag - 1][0]);
+                }
+                this.__HS.h[flag - 1] = new Hermite((1 - this.__t) * 0.5).setP(points[flag - 1][0], points[flag - 1][1], points[flag][0], points[flag][1], slope, temp);
+                slope = temp;
+            }
+            return this;
+        };
+        Cardinal.prototype.use = function (x) {
+            if (this.__HS) {
+                this.__i = -1;
+                while (this.__i + 1 < this.__HS.x.length && (x > this.__HS.x[this.__i + 1] || (this.__i == -1 && x >= this.__HS.x[this.__i + 1]))) {
+                    this.__i += 1;
+                }
+                if (this.__i < 0) {
+                    return this.__HS.h[0].use(this.__HS.x[0]);
+                }
+                else if (this.__i >= this.__HS.h.length) {
+                    return this.__HS.h[this.__HS.h.length - 1].use(this.__HS.x[this.__HS.x.length - 1]);
+                }
+                return this.__HS.h[this.__i].use(x);
+            }
+            else {
+                throw new Error('You shoud first set the position!');
+            }
+        };
+        return Cardinal;
     }());
 
-    function _move (d, a, b, c) {
-        if (c === void 0) { c = 0; }
-        var sqrt = Math.sqrt(a * a + b * b + c * c);
-        return [
-            1, 0, 0, 0,
-            0, 1, 0, 0,
-            0, 0, 1, 0,
-            a * d / sqrt, b * d / sqrt, c * d / sqrt, 1
-        ];
+    function _move (d, a, b, c) {
+        if (c === void 0) { c = 0; }
+        var sqrt = Math.sqrt(a * a + b * b + c * c);
+        return [
+            1, 0, 0, 0,
+            0, 1, 0, 0,
+            0, 0, 1, 0,
+            a * d / sqrt, b * d / sqrt, c * d / sqrt, 1
+        ];
     }
 
-    function _rotate (deg) {
-        var sin = Math.sin(deg), cos = Math.cos(deg);
-        return [
-            cos, sin, 0, 0,
-            -sin, cos, 0, 0,
-            0, 0, 1, 0,
-            0, 0, 0, 1
-        ];
+    function _rotate (deg) {
+        var sin = Math.sin(deg), cos = Math.cos(deg);
+        return [
+            cos, sin, 0, 0,
+            -sin, cos, 0, 0,
+            0, 0, 1, 0,
+            0, 0, 0, 1
+        ];
     }
 
-    function _scale (xTimes, yTimes, zTimes, cx, cy, cz) {
-        if (cx === void 0) { cx = 0; }
-        if (cy === void 0) { cy = 0; }
-        if (cz === void 0) { cz = 0; }
-        return [
-            xTimes, 0, 0, 0,
-            0, yTimes, 0, 0,
-            0, 0, zTimes, 0,
-            cx - cx * xTimes, cy - cy * yTimes, cz - cz * zTimes, 1
-        ];
+    function _scale (xTimes, yTimes, zTimes, cx, cy, cz) {
+        if (cx === void 0) { cx = 0; }
+        if (cy === void 0) { cy = 0; }
+        if (cz === void 0) { cz = 0; }
+        return [
+            xTimes, 0, 0, 0,
+            0, yTimes, 0, 0,
+            0, 0, zTimes, 0,
+            cx - cx * xTimes, cy - cy * yTimes, cz - cz * zTimes, 1
+        ];
     }
 
-    function _transform (a1, b1, c1, a2, b2, c2) {
-        if (typeof a1 === 'number' && typeof b1 === 'number') {
-            if (typeof c1 !== 'number') {
-                c1 = 0;
-                a2 = a1;
-                b2 = b1;
-                c2 = 1;
-            }
-            else if (typeof a2 !== 'number' || typeof b2 !== 'number' || typeof c2 !== 'number') {
-                a2 = a1;
-                b2 = b1;
-                c2 = c1;
-                a1 = 0;
-                b1 = 0;
-                c1 = 0;
-            }
-            if (a1 == a2 && b1 == b2 && c1 == c2)
-                throw new Error('It\'s not a legitimate ray!');
-            var sqrt1 = Math.sqrt((a2 - a1) * (a2 - a1) + (b2 - b1) * (b2 - b1)), cos1 = sqrt1 != 0 ? (b2 - b1) / sqrt1 : 1, sin1 = sqrt1 != 0 ? (a2 - a1) / sqrt1 : 0, b = (a2 - a1) * sin1 + (b2 - b1) * cos1, c = c2 - c1, sqrt2 = Math.sqrt(b * b + c * c), cos2 = sqrt2 != 0 ? c / sqrt2 : 1, sin2 = sqrt2 != 0 ? b / sqrt2 : 0;
-            return [
-                [
-                    cos1, cos2 * sin1, sin1 * sin2, 0,
-                    -sin1, cos1 * cos2, cos1 * sin2, 0,
-                    0, -sin2, cos2, 0,
-                    b1 * sin1 - a1 * cos1, c1 * sin2 - a1 * sin1 * cos2 - b1 * cos1 * cos2, -a1 * sin1 * sin2 - b1 * cos1 * sin2 - c1 * cos2, 1
-                ],
-                [
-                    cos1, -sin1, 0, 0,
-                    cos2 * sin1, cos2 * cos1, -sin2, 0,
-                    sin1 * sin2, cos1 * sin2, cos2, 0,
-                    a1, b1, c1, 1
-                ]
-            ];
-        }
-        else {
-            throw new Error('a1 and b1 is required!');
-        }
+    function _transform (a1, b1, c1, a2, b2, c2) {
+        if (typeof a1 === 'number' && typeof b1 === 'number') {
+            if (typeof c1 !== 'number') {
+                c1 = 0;
+                a2 = a1;
+                b2 = b1;
+                c2 = 1;
+            }
+            else if (typeof a2 !== 'number' || typeof b2 !== 'number' || typeof c2 !== 'number') {
+                a2 = a1;
+                b2 = b1;
+                c2 = c1;
+                a1 = 0;
+                b1 = 0;
+                c1 = 0;
+            }
+            if (a1 == a2 && b1 == b2 && c1 == c2)
+                throw new Error('It\'s not a legitimate ray!');
+            var sqrt1 = Math.sqrt((a2 - a1) * (a2 - a1) + (b2 - b1) * (b2 - b1)), cos1 = sqrt1 != 0 ? (b2 - b1) / sqrt1 : 1, sin1 = sqrt1 != 0 ? (a2 - a1) / sqrt1 : 0, b = (a2 - a1) * sin1 + (b2 - b1) * cos1, c = c2 - c1, sqrt2 = Math.sqrt(b * b + c * c), cos2 = sqrt2 != 0 ? c / sqrt2 : 1, sin2 = sqrt2 != 0 ? b / sqrt2 : 0;
+            return [
+                [
+                    cos1, cos2 * sin1, sin1 * sin2, 0,
+                    -sin1, cos1 * cos2, cos1 * sin2, 0,
+                    0, -sin2, cos2, 0,
+                    b1 * sin1 - a1 * cos1, c1 * sin2 - a1 * sin1 * cos2 - b1 * cos1 * cos2, -a1 * sin1 * sin2 - b1 * cos1 * sin2 - c1 * cos2, 1
+                ],
+                [
+                    cos1, -sin1, 0, 0,
+                    cos2 * sin1, cos2 * cos1, -sin2, 0,
+                    sin1 * sin2, cos1 * sin2, cos2, 0,
+                    a1, b1, c1, 1
+                ]
+            ];
+        }
+        else {
+            throw new Error('a1 and b1 is required!');
+        }
     }
 
-    var _multiply = function (matrix4, param) {
-        var newParam = [];
-        for (var i = 0; i < 4; i++)
-            for (var j = 0; j < param.length / 4; j++)
-                newParam[j * 4 + i] =
-                    matrix4[i] * param[j * 4] +
-                        matrix4[i + 4] * param[j * 4 + 1] +
-                        matrix4[i + 8] * param[j * 4 + 2] +
-                        matrix4[i + 12] * param[j * 4 + 3];
-        return newParam;
-    };
-    var __initMatrix4 = [
-        1, 0, 0, 0,
-        0, 1, 0, 0,
-        0, 0, 1, 0,
-        0, 0, 0, 1
-    ];
-    var Matrix4 = (function () {
-        function Matrix4(initMatrix4) {
-            if (initMatrix4 === void 0) { initMatrix4 = __initMatrix4; }
-            this.name = 'Matrix4';
-            this.__matrix4 = initMatrix4;
-        }
-        Matrix4.prototype.setValue = function (initMatrix4) {
-            if (initMatrix4 === void 0) { initMatrix4 = __initMatrix4; }
-            this.__matrix4 = initMatrix4;
-            return this;
-        };
-        Matrix4.prototype.move = function (dis, a, b, c) {
-            if (c === void 0) { c = 0; }
-            this.__matrix4 = _multiply(_move(dis, a, b, c), this.__matrix4);
-            return this;
-        };
-        Matrix4.prototype.rotate = function (deg, a1, b1, c1, a2, b2, c2) {
-            var matrix4s = _transform(a1, b1, c1, a2, b2, c2);
-            this.__matrix4 = _multiply(_multiply(_multiply(matrix4s[1], _rotate(deg)), matrix4s[0]), this.__matrix4);
-            return this;
-        };
-        Matrix4.prototype.scale = function (xTimes, yTimes, zTimes, cx, cy, cz) {
-            if (cx === void 0) { cx = 0; }
-            if (cy === void 0) { cy = 0; }
-            if (cz === void 0) { cz = 0; }
-            this.__matrix4 = _multiply(_scale(xTimes, yTimes, zTimes, cx, cy, cz), this.__matrix4);
-            return this;
-        };
-        Matrix4.prototype.multiply = function (newMatrix4, flag) {
-            if (flag === void 0) { flag = false; }
-            this.__matrix4 = flag ? _multiply(this.__matrix4, newMatrix4) : _multiply(newMatrix4, this.__matrix4);
-            return this;
-        };
-        Matrix4.prototype.use = function (x, y, z, w) {
-            if (z === void 0) { z = 0; }
-            if (w === void 0) { w = 1; }
-            return _multiply(this.__matrix4, [x, y, z, w]);
-        };
-        Matrix4.prototype.value = function () {
-            return this.__matrix4;
-        };
-        return Matrix4;
+    var _multiply = function (matrix4, param) {
+        var newParam = [];
+        for (var i = 0; i < 4; i++)
+            for (var j = 0; j < param.length / 4; j++)
+                newParam[j * 4 + i] =
+                    matrix4[i] * param[j * 4] +
+                        matrix4[i + 4] * param[j * 4 + 1] +
+                        matrix4[i + 8] * param[j * 4 + 2] +
+                        matrix4[i + 12] * param[j * 4 + 3];
+        return newParam;
+    };
+    var __initMatrix4 = [
+        1, 0, 0, 0,
+        0, 1, 0, 0,
+        0, 0, 1, 0,
+        0, 0, 0, 1
+    ];
+    var Matrix4 = (function () {
+        function Matrix4(initMatrix4) {
+            if (initMatrix4 === void 0) { initMatrix4 = __initMatrix4; }
+            this.name = 'Matrix4';
+            this.__matrix4 = initMatrix4;
+        }
+        Matrix4.prototype.setValue = function (initMatrix4) {
+            if (initMatrix4 === void 0) { initMatrix4 = __initMatrix4; }
+            this.__matrix4 = initMatrix4;
+            return this;
+        };
+        Matrix4.prototype.move = function (dis, a, b, c) {
+            if (c === void 0) { c = 0; }
+            this.__matrix4 = _multiply(_move(dis, a, b, c), this.__matrix4);
+            return this;
+        };
+        Matrix4.prototype.rotate = function (deg, a1, b1, c1, a2, b2, c2) {
+            var matrix4s = _transform(a1, b1, c1, a2, b2, c2);
+            this.__matrix4 = _multiply(_multiply(_multiply(matrix4s[1], _rotate(deg)), matrix4s[0]), this.__matrix4);
+            return this;
+        };
+        Matrix4.prototype.scale = function (xTimes, yTimes, zTimes, cx, cy, cz) {
+            if (cx === void 0) { cx = 0; }
+            if (cy === void 0) { cy = 0; }
+            if (cz === void 0) { cz = 0; }
+            this.__matrix4 = _multiply(_scale(xTimes, yTimes, zTimes, cx, cy, cz), this.__matrix4);
+            return this;
+        };
+        Matrix4.prototype.multiply = function (newMatrix4, flag) {
+            if (flag === void 0) { flag = false; }
+            this.__matrix4 = flag ? _multiply(this.__matrix4, newMatrix4) : _multiply(newMatrix4, this.__matrix4);
+            return this;
+        };
+        Matrix4.prototype.use = function (x, y, z, w) {
+            if (z === void 0) { z = 0; }
+            if (w === void 0) { w = 1; }
+            return _multiply(this.__matrix4, [x, y, z, w]);
+        };
+        Matrix4.prototype.value = function () {
+            return this.__matrix4;
+        };
+        return Matrix4;
     }());
 
-    function rotate$1 (cx, cy, deg, x, y) {
-        var cos = Math.cos(deg), sin = Math.sin(deg);
-        return [
-            (x - cx) * cos - (y - cy) * sin + cx,
-            (x - cx) * sin + (y - cy) * cos + cy
-        ];
+    function rotate$1 (cx, cy, deg, x, y) {
+        var cos = Math.cos(deg), sin = Math.sin(deg);
+        return [
+            (x - cx) * cos - (y - cy) * sin + cx,
+            (x - cx) * sin + (y - cy) * cos + cy
+        ];
     }
 
-    function move (ax, ay, d, x, y) {
-        var sqrt = Math.sqrt(ax * ax + ay * ay);
-        return [
-            ax * d / sqrt + x,
-            ay * d / sqrt + y
-        ];
+    function move (ax, ay, d, x, y) {
+        var sqrt = Math.sqrt(ax * ax + ay * ay);
+        return [
+            ax * d / sqrt + x,
+            ay * d / sqrt + y
+        ];
     }
 
-    function scale (cx, cy, times, x, y) {
-        return [
-            times * (x - cx) + cx,
-            times * (y - cy) + cy
-        ];
+    function scale (cx, cy, times, x, y) {
+        return [
+            times * (x - cx) + cx,
+            times * (y - cy) + cy
+        ];
     }
 
-    function getLoopColors (num, alpha, colorsFactory) {
-        if (alpha === void 0) { alpha = 1; }
-        var colorList = colorsFactory ? colorsFactory(alpha) : [
-            'rgba(84,112,198,' + alpha + ")", 'rgba(145,204,117,' + alpha + ")",
-            'rgba(250,200,88,' + alpha + ")", 'rgba(238,102,102,' + alpha + ")",
-            'rgba(115,192,222,' + alpha + ")", 'rgba(59,162,114,' + alpha + ")",
-            'rgba(252,132,82,' + alpha + ")", 'rgba(154,96,180,' + alpha + ")",
-            'rgba(234,124,204,' + alpha + ")"
-        ];
-        var colors = [];
-        if (num <= colorList.length) {
-            return colorList;
-        }
-        else {
-            if (num % colorList.length == 0) {
-                for (var i = 0; i < (num / colorList.length); i++) {
-                    colors = colors.concat(colorList);
-                }
-            }
-            else {
-                for (var j = 1; j < (num / colorList.length); j++) {
-                    colors = colors.concat(colorList);
-                }
-                if (num % colorList.length == 1) {
-                    colors = colors.concat(colorList[4]);
-                }
-                else {
-                    for (var k = 0; k < num % colorList.length; k++) {
-                        colors = colors.concat(colorList[k]);
-                    }
-                }
-            }
-        }
-        return colors;
+    function getLoopColors (num, alpha, colorsFactory) {
+        if (alpha === void 0) { alpha = 1; }
+        var colorList = colorsFactory ? colorsFactory(alpha) : [
+            'rgba(84,112,198,' + alpha + ")", 'rgba(145,204,117,' + alpha + ")",
+            'rgba(250,200,88,' + alpha + ")", 'rgba(238,102,102,' + alpha + ")",
+            'rgba(115,192,222,' + alpha + ")", 'rgba(59,162,114,' + alpha + ")",
+            'rgba(252,132,82,' + alpha + ")", 'rgba(154,96,180,' + alpha + ")",
+            'rgba(234,124,204,' + alpha + ")"
+        ];
+        var colors = [];
+        if (num <= colorList.length) {
+            return colorList;
+        }
+        else {
+            if (num % colorList.length == 0) {
+                for (var i = 0; i < (num / colorList.length); i++) {
+                    colors = colors.concat(colorList);
+                }
+            }
+            else {
+                for (var j = 1; j < (num / colorList.length); j++) {
+                    colors = colors.concat(colorList);
+                }
+                if (num % colorList.length == 1) {
+                    colors = colors.concat(colorList[4]);
+                }
+                else {
+                    for (var k = 0; k < num % colorList.length; k++) {
+                        colors = colors.concat(colorList[k]);
+                    }
+                }
+            }
+        }
+        return colors;
     }
 
+    /*!
+    * animation of OIPage v1.2.0
+    * git+https://github.com/oi-contrib/OIPage.git
+    */
+
     //当前正在运动的动画的tick函数堆栈
     var $timers = [];
     //唯一定时器的定时间隔
@@ -382,156 +387,158 @@
             doback(deep);
         }, duration, callback);
 
-        // 返回一个函数
-        // 用于在动画结束前结束动画
-        return function () {
-            var i;
-            for (i in $timers) {
-                if ($timers[i].id == id) {
-                    $timers[i].id = void 0;
-                    return;
+        return {
+            // 一个函数
+            // 用于在动画结束前结束动画
+            stop: function () {
+                var i;
+                for (i in $timers) {
+                    if ($timers[i].id == id) {
+                        $timers[i].id = void 0;
+                        return;
+                    }
                 }
             }
         };
 
     }
 
-    function ruler (maxValue, minValue, num, option) {
-        if (maxValue < minValue) {
-            var temp = minValue;
-            minValue = maxValue;
-            maxValue = temp;
-        }
-        else if (maxValue == minValue) {
-            return [maxValue];
-        }
-        var times100 = (function (_value) {
-            var _times100_base = (_value < 100 && _value > -100) ? 10 : 0.1;
-            var _times100 = -1, _tiemsValue = _value;
-            while (_times100_base == 10 ?
-                (_tiemsValue >= -100 && _tiemsValue <= 100)
-                :
-                    (_tiemsValue <= -100 || _tiemsValue >= 100)) {
-                _times100 += 1;
-                _tiemsValue *= _times100_base;
-            }
-            if (_times100_base == 10) {
-                return Math.pow(10, _times100);
-            }
-            else {
-                var temp = "0.";
-                for (var i = 1; i < _times100; i++) {
-                    temp += "0";
-                }
-                return +(temp + "1");
-            }
-        })(maxValue - minValue);
-        var distance100_oral = Math.ceil((maxValue - minValue) * times100 / num);
-        var getResult = function (changValue) {
-            var distance100 = {
-                3: 2,
-                4: 5,
-                6: 5,
-                7: 5,
-                8: 10,
-                9: 10,
-                11: 10,
-                12: 10,
-                13: 15,
-                14: 15,
-                16: 15,
-                17: 15,
-                18: 20,
-                19: 20,
-                21: 20,
-                22: 20,
-                23: 25,
-                24: 25,
-                26: 25,
-                27: 25
-            }[distance100_oral + changValue] || (distance100_oral + changValue);
-            var distance = distance100 / times100;
-            var begin = Math.floor(minValue / distance) * distance;
-            var rulerArray = [];
-            rulerArray.push(begin);
-            for (var index = 1; rulerArray[rulerArray.length - 1] < maxValue; index++) {
-                rulerArray.push(begin + distance * index);
-            }
-            return rulerArray;
-        };
-        var rulerArray = getResult(0);
-        var balanceMax = function () {
-            var rulerArray_temp = [];
-            var changeDist = rulerArray[rulerArray.length - 1] - (option === null || option === void 0 ? void 0 : option.max);
-            for (var index = 0; index < rulerArray.length; index++) {
-                if (index + 1 < rulerArray.length && rulerArray[index + 1] - changeDist < minValue) ;
-                else {
-                    rulerArray_temp.push(rulerArray[index] - changeDist);
-                }
-            }
-            return rulerArray_temp;
-        };
-        var balanceMin = function () {
-            var rulerArray_temp = [];
-            var changeDist = rulerArray[0] - (option === null || option === void 0 ? void 0 : option.min);
-            for (var index = 0; index < rulerArray.length; index++) {
-                rulerArray_temp[index] = rulerArray[index] - changeDist;
-                if (maxValue <= rulerArray_temp[index])
-                    break;
-            }
-            return rulerArray_temp;
-        };
-        if (option) {
-            if ('max' in option && 'min' in option && option.max >= maxValue && option.min <= minValue) {
-                var isAnswer = function () {
-                    if (rulerArray[0] >= option.min && rulerArray[rulerArray.length - 1] <= option.max)
-                        return true;
-                    var rulerArray_max = balanceMax();
-                    if (rulerArray_max[0] >= option.min && rulerArray_max[rulerArray_max.length - 1] <= option.max) {
-                        rulerArray = rulerArray_max;
-                        return true;
-                    }
-                    var rulerArray_min = balanceMin();
-                    if (rulerArray_min[0] >= option.min && rulerArray_min[rulerArray_max.length - 1] <= option.max) {
-                        rulerArray = rulerArray_min;
-                        return true;
-                    }
-                };
-                if (isAnswer())
-                    return rulerArray;
-                for (var changValue = 1; changValue < 100; changValue++) {
-                    rulerArray = getResult(changValue);
-                    if (isAnswer())
-                        return rulerArray;
-                    rulerArray = getResult(-changValue);
-                    if (isAnswer())
-                        return rulerArray;
-                }
-            }
-            if ('max' in option && option.max >= maxValue) {
-                if (option.max < rulerArray[rulerArray.length - 1]) {
-                    rulerArray = balanceMax();
-                }
-            }
-            else if ('min' in option && option.min <= minValue) {
-                if (option.min > rulerArray[0]) {
-                    rulerArray = balanceMin();
-                }
-            }
-        }
-        for (var index = 0; index < rulerArray.length; index++) {
-            var valStr = rulerArray[index] + "";
-            if (/\./.test(valStr)) {
-                if (/9{7,}$/.test(valStr)) {
-                    valStr = valStr.replace(/9{7,}$/, '');
-                    rulerArray[index] = +(valStr.substring(0, valStr.length - 1) + ((+valStr[valStr.length - 1]) + 1));
-                }
-                else if (/0{7,}\d$/.test(valStr)) {
-                    rulerArray[index] = +(valStr.replace(/0{7,}\d$/, ''));
-                }
-            }
-        }
-        return rulerArray;
+    function ruler (maxValue, minValue, num, option) {
+        if (maxValue < minValue) {
+            var temp = minValue;
+            minValue = maxValue;
+            maxValue = temp;
+        }
+        else if (maxValue == minValue) {
+            return [maxValue];
+        }
+        var times100 = (function (_value) {
+            var _times100_base = (_value < 100 && _value > -100) ? 10 : 0.1;
+            var _times100 = -1, _tiemsValue = _value;
+            while (_times100_base == 10 ?
+                (_tiemsValue >= -100 && _tiemsValue <= 100)
+                :
+                    (_tiemsValue <= -100 || _tiemsValue >= 100)) {
+                _times100 += 1;
+                _tiemsValue *= _times100_base;
+            }
+            if (_times100_base == 10) {
+                return Math.pow(10, _times100);
+            }
+            else {
+                var temp = "0.";
+                for (var i = 1; i < _times100; i++) {
+                    temp += "0";
+                }
+                return +(temp + "1");
+            }
+        })(maxValue - minValue);
+        var distance100_oral = Math.ceil((maxValue - minValue) * times100 / num);
+        var getResult = function (changValue) {
+            var distance100 = {
+                3: 2,
+                4: 5,
+                6: 5,
+                7: 5,
+                8: 10,
+                9: 10,
+                11: 10,
+                12: 10,
+                13: 15,
+                14: 15,
+                16: 15,
+                17: 15,
+                18: 20,
+                19: 20,
+                21: 20,
+                22: 20,
+                23: 25,
+                24: 25,
+                26: 25,
+                27: 25
+            }[distance100_oral + changValue] || (distance100_oral + changValue);
+            var distance = distance100 / times100;
+            var begin = Math.floor(minValue / distance) * distance;
+            var rulerArray = [];
+            rulerArray.push(begin);
+            for (var index = 1; rulerArray[rulerArray.length - 1] < maxValue; index++) {
+                rulerArray.push(begin + distance * index);
+            }
+            return rulerArray;
+        };
+        var rulerArray = getResult(0);
+        var balanceMax = function () {
+            var rulerArray_temp = [];
+            var changeDist = rulerArray[rulerArray.length - 1] - (option === null || option === void 0 ? void 0 : option.max);
+            for (var index = 0; index < rulerArray.length; index++) {
+                if (index + 1 < rulerArray.length && rulerArray[index + 1] - changeDist < minValue) ;
+                else {
+                    rulerArray_temp.push(rulerArray[index] - changeDist);
+                }
+            }
+            return rulerArray_temp;
+        };
+        var balanceMin = function () {
+            var rulerArray_temp = [];
+            var changeDist = rulerArray[0] - (option === null || option === void 0 ? void 0 : option.min);
+            for (var index = 0; index < rulerArray.length; index++) {
+                rulerArray_temp[index] = rulerArray[index] - changeDist;
+                if (maxValue <= rulerArray_temp[index])
+                    break;
+            }
+            return rulerArray_temp;
+        };
+        if (option) {
+            if ('max' in option && 'min' in option && option.max >= maxValue && option.min <= minValue) {
+                var isAnswer = function () {
+                    if (rulerArray[0] >= option.min && rulerArray[rulerArray.length - 1] <= option.max)
+                        return true;
+                    var rulerArray_max = balanceMax();
+                    if (rulerArray_max[0] >= option.min && rulerArray_max[rulerArray_max.length - 1] <= option.max) {
+                        rulerArray = rulerArray_max;
+                        return true;
+                    }
+                    var rulerArray_min = balanceMin();
+                    if (rulerArray_min[0] >= option.min && rulerArray_min[rulerArray_max.length - 1] <= option.max) {
+                        rulerArray = rulerArray_min;
+                        return true;
+                    }
+                };
+                if (isAnswer())
+                    return rulerArray;
+                for (var changValue = 1; changValue < 100; changValue++) {
+                    rulerArray = getResult(changValue);
+                    if (isAnswer())
+                        return rulerArray;
+                    rulerArray = getResult(-changValue);
+                    if (isAnswer())
+                        return rulerArray;
+                }
+            }
+            if ('max' in option && option.max >= maxValue) {
+                if (option.max < rulerArray[rulerArray.length - 1]) {
+                    rulerArray = balanceMax();
+                }
+            }
+            else if ('min' in option && option.min <= minValue) {
+                if (option.min > rulerArray[0]) {
+                    rulerArray = balanceMin();
+                }
+            }
+        }
+        for (var index = 0; index < rulerArray.length; index++) {
+            var valStr = rulerArray[index] + "";
+            if (/\./.test(valStr)) {
+                if (/9{7,}$/.test(valStr)) {
+                    valStr = valStr.replace(/9{7,}$/, '');
+                    rulerArray[index] = +(valStr.substring(0, valStr.length - 1) + ((+valStr[valStr.length - 1]) + 1));
+                }
+                else if (/0{7,}\d$/.test(valStr)) {
+                    rulerArray[index] = +(valStr.replace(/0{7,}\d$/, ''));
+                }
+            }
+        }
+        return rulerArray;
     }
 
     /******************************************************************************
@@ -583,1551 +590,1579 @@
 
     var XLINK_ATTRIBUTE = ["href", "title", "show", "type", "role", "actuate"];
 
-    var setLineAttr = function (el, config) {
-        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 + "");
-    };
-    function toNode(tagname) {
-        return document.createElementNS('http://www.w3.org/2000/svg', tagname);
-    }
-    var _setAttribute = function (el, key, value) {
-        if (XLINK_ATTRIBUTE.indexOf(key) > -1) {
-            el.setAttributeNS("http://www.w3.org/1999/xlink", 'xlink:' + key, value + "");
-        }
-        else {
-            el.setAttribute(key, value + "");
-        }
-    };
-    var setAttribute = _setAttribute;
-    function getAttribute(el, key) {
-        if (XLINK_ATTRIBUTE.indexOf(key) > -1)
-            key = 'xlink:' + key;
-        return el.getAttribute(key);
-    }
-    function full(el, config) {
-        setLineAttr(el, config);
-        _setAttribute(el, "stroke", config.strokeStyle);
-        _setAttribute(el, "fill", config.fillStyle);
-    }
-    function fill(el, config) {
-        _setAttribute(el, "fill", config.fillStyle);
-    }
-    function stroke(el, config) {
-        setLineAttr(el, config);
-        _setAttribute(el, "stroke", config.strokeStyle);
-        _setAttribute(el, "fill", "none");
+    var setLineAttr = function (el, config) {
+        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 + "");
+    };
+    function toNode(tagname) {
+        return document.createElementNS('http://www.w3.org/2000/svg', tagname);
+    }
+    var _setAttribute = function (el, key, value) {
+        if (XLINK_ATTRIBUTE.indexOf(key) > -1) {
+            el.setAttributeNS("http://www.w3.org/1999/xlink", 'xlink:' + key, value + "");
+        }
+        else {
+            el.setAttribute(key, value + "");
+        }
+    };
+    var setAttribute = _setAttribute;
+    function getAttribute(el, key) {
+        if (XLINK_ATTRIBUTE.indexOf(key) > -1)
+            key = 'xlink:' + key;
+        return el.getAttribute(key);
+    }
+    function full(el, config) {
+        setLineAttr(el, config);
+        _setAttribute(el, "stroke", config.strokeStyle);
+        _setAttribute(el, "fill", config.fillStyle);
+    }
+    function fill(el, config) {
+        _setAttribute(el, "fill", config.fillStyle);
+    }
+    function stroke(el, config) {
+        setLineAttr(el, config);
+        _setAttribute(el, "stroke", config.strokeStyle);
+        _setAttribute(el, "fill", "none");
     }
 
-    function setStyle (el, styles) {
-        for (var key in styles) {
-            el.style[key] = styles[key];
-        }
+    function setStyle (el, styles) {
+        for (var key in styles) {
+            el.style[key] = styles[key];
+        }
     }
 
-    var rotate = function (cx, cy, deg, x, y) {
-        var cos = Math.cos(deg), sin = Math.sin(deg);
-        return [
-            +((x - cx) * cos - (y - cy) * sin + cx).toFixed(7),
-            +((x - cx) * sin + (y - cy) * cos + cy).toFixed(7)
-        ];
-    };
-    function arc (beginA, rotateA, cx, cy, r1, r2, doback) {
-        if (rotateA < 0) {
-            beginA += rotateA;
-            rotateA *= -1;
-        }
-        var temp = [];
-        var p;
-        p = rotate(0, 0, beginA, r1, 0);
-        temp[0] = p[0];
-        temp[1] = p[1];
-        p = rotate(0, 0, rotateA, p[0], p[1]);
-        temp[2] = p[0];
-        temp[3] = p[1];
-        p = rotate(0, 0, beginA, r2, 0);
-        temp[4] = p[0];
-        temp[5] = p[1];
-        p = rotate(0, 0, rotateA, p[0], p[1]);
-        temp[6] = p[0];
-        temp[7] = p[1];
-        doback(beginA, beginA + rotateA, temp[0] + cx, temp[1] + cy, temp[4] + cx, temp[5] + cy, temp[2] + cx, temp[3] + cy, temp[6] + cx, temp[7] + cy, (r2 - r1) * 0.5);
+    var rotate = function (cx, cy, deg, x, y) {
+        var cos = Math.cos(deg), sin = Math.sin(deg);
+        return [
+            +((x - cx) * cos - (y - cy) * sin + cx).toFixed(7),
+            +((x - cx) * sin + (y - cy) * cos + cy).toFixed(7)
+        ];
+    };
+    function arc (beginA, rotateA, cx, cy, r1, r2, doback) {
+        if (rotateA < 0) {
+            beginA += rotateA;
+            rotateA *= -1;
+        }
+        var temp = [];
+        var p;
+        p = rotate(0, 0, beginA, r1, 0);
+        temp[0] = p[0];
+        temp[1] = p[1];
+        p = rotate(0, 0, rotateA, p[0], p[1]);
+        temp[2] = p[0];
+        temp[3] = p[1];
+        p = rotate(0, 0, beginA, r2, 0);
+        temp[4] = p[0];
+        temp[5] = p[1];
+        p = rotate(0, 0, rotateA, p[0], p[1]);
+        temp[6] = p[0];
+        temp[7] = p[1];
+        doback(beginA, beginA + rotateA, temp[0] + cx, temp[1] + cy, temp[4] + cx, temp[5] + cy, temp[2] + cx, temp[3] + cy, temp[6] + cx, temp[7] + cy, (r2 - r1) * 0.5);
     }
 
-    var initDefs = function (el) {
-        var defs = el.getElementsByTagName('defs');
-        if (defs.length <= 0) {
-            var newDefs = toNode("defs");
-            el.appendChild(newDefs);
-            return newDefs;
-        }
-        else {
-            return defs[0];
-        }
-    };
-    var initText$1 = function (el, config, x, y, deg) {
-        if (el.nodeName.toLowerCase() !== "text")
-            throw new Error("Need a <text> !");
-        setAttribute(el, "dy", {
-            top: config["fontSize"] * 0.5,
-            middle: 0,
-            bottom: -config["fontSize"] * 0.5,
-        }[config.textBaseline]);
-        setStyle(el, {
-            "text-anchor": {
-                left: "start",
-                right: "end",
-                center: "middle",
-            }[config.textAlign],
-            "dominant-baseline": "central",
-            "font-size": config["fontSize"] + "px",
-            "font-family": config["fontFamily"],
-        });
-        setAttribute(el, "x", x);
-        setAttribute(el, "y", y);
-        if (typeof deg == "number") {
-            deg = deg % 360;
-            setAttribute(el, "transform", "rotate(" + deg + "," + x + "," + y + ")");
-        }
-    };
-    var initCircle$1 = function (el, cx, cy, r) {
-        if (el.nodeName.toLowerCase() !== "circle")
-            throw new Error("Need a <circle> !");
-        setAttribute(el, "cx", cx);
-        setAttribute(el, "cy", cy);
-        setAttribute(el, "r", r);
-    };
-    var initPath = function (el, path) {
-        if (el.nodeName.toLowerCase() !== "path")
-            throw new Error("Need a <path> !");
-        setAttribute(el, "d", path);
-    };
-    var initRect$1 = function (el, config, x, y, width, height) {
-        if (el.nodeName.toLowerCase() !== "path")
-            throw new Error("Need a <path> !");
-        var rectRadius = [];
-        if (Array.isArray(config.rectRadius) && config.rectRadius.length > 0) {
-            for (var index = 0; index < 4; index++) {
-                rectRadius.push.apply(rectRadius, config.rectRadius);
-            }
-        }
-        if (height < 0) {
-            height *= -1;
-            y -= height;
-        }
-        if (width < 0) {
-            width *= -1;
-            x -= width;
-        }
-        var d = "";
-        if (rectRadius.length >= 4) {
-            d = "M" + (x + rectRadius[0]) + " " + y;
-            d += "L" + (x + width - rectRadius[1]) + " " + y;
-            d += "A" + rectRadius[1] + " " + rectRadius[1] + " 0 0 1 " + (x + width) + " " + (y + rectRadius[1]);
-            d += "L" + (x + width) + " " + (y + height - rectRadius[2]);
-            d += "A" + rectRadius[2] + " " + rectRadius[2] + " 0 0 1 " + (x + width - rectRadius[2]) + " " + (y + height);
-            d += "L" + (x + rectRadius[3]) + " " + (y + height);
-            d += "A" + rectRadius[3] + " " + rectRadius[3] + " 0 0 1 " + x + " " + (y + height - rectRadius[3]);
-            d += "L" + x + " " + (y + rectRadius[0]);
-            d += "A" + rectRadius[0] + " " + rectRadius[0] + " 0 0 1 " + (x + rectRadius[0]) + " " + y;
-        }
-        else {
-            d = "M" + x + " " + y;
-            d += "L" + (x + width) + " " + y;
-            d += "L" + (x + width) + " " + (y + height);
-            d += "L" + x + " " + (y + height);
-            d += "Z";
-        }
-        setAttribute(el, "d", d);
-    };
-    var initArc$1 = function (el, config, cx, cy, r1, r2, beginDeg, deg) {
-        if (el.nodeName.toLowerCase() !== "path")
-            throw new Error("Need a <path> !");
-        beginDeg = (beginDeg / 180) * Math.PI;
-        deg = (deg / 180) * Math.PI;
-        beginDeg = beginDeg % (Math.PI * 2);
-        if (r1 > r2) {
-            var temp = r1;
-            r1 = r2;
-            r2 = temp;
-        }
-        if (deg >= Math.PI * 1.999999 || deg <= -Math.PI * 1.999999) {
-            deg = Math.PI * 1.999999;
-        }
-        else {
-            deg = deg % (Math.PI * 2);
-        }
-        arc(beginDeg, deg, cx, cy, r1, r2, function (beginA, endA, begInnerX, begInnerY, begOuterX, begOuterY, endInnerX, endInnerY, endOuterX, endOuterY, r) {
-            var f = endA - beginA > Math.PI ? 1 : 0;
-            var d = "M" + begInnerX + " " + begInnerY;
-            if (r < 0)
-                r = -r;
-            d +=
-                "A" + r1 + " " + r1 + " 0 " + f + " 1 " + endInnerX + " " + endInnerY;
-            if (config.arcEndCap == "round")
-                d += "A" + r + " " + r + " " + " 0 1 0 " + endOuterX + " " + endOuterY;
-            else if (config.arcEndCap == "-round")
-                d += "A" + r + " " + r + " " + " 0 1 1 " + endOuterX + " " + endOuterY;
-            else
-                d += "L" + endOuterX + " " + endOuterY;
-            d +=
-                "A" + r2 + " " + r2 + " 0 " + f + " 0 " + begOuterX + " " + begOuterY;
-            if (config.arcStartCap == "round")
-                d += "A" + r + " " + r + " " + " 0 1 0 " + begInnerX + " " + begInnerY;
-            else if (config.arcStartCap == "-round")
-                d += "A" + r + " " + r + " " + " 0 1 1 " + begInnerX + " " + begInnerY;
-            else
-                d += "L" + begInnerX + " " + begInnerY;
-            if (config.arcStartCap == "butt")
-                d += "Z";
-            setAttribute(el, "d", d);
-        });
+    var initDefs = function (el) {
+        var defs = el.getElementsByTagName('defs');
+        if (defs.length <= 0) {
+            var newDefs = toNode("defs");
+            el.appendChild(newDefs);
+            return newDefs;
+        }
+        else {
+            return defs[0];
+        }
+    };
+    var initText$1 = function (el, config, x, y, deg) {
+        if (el.nodeName.toLowerCase() !== "text")
+            throw new Error("Need a <text> !");
+        setAttribute(el, "dy", {
+            top: config["fontSize"] * 0.5,
+            middle: 0,
+            bottom: -config["fontSize"] * 0.5,
+        }[config.textBaseline]);
+        setStyle(el, {
+            "text-anchor": {
+                left: "start",
+                right: "end",
+                center: "middle",
+            }[config.textAlign],
+            "dominant-baseline": "central",
+            "font-size": config["fontSize"] + "px",
+            "font-family": config["fontFamily"],
+        });
+        setAttribute(el, "x", x);
+        setAttribute(el, "y", y);
+        if (typeof deg == "number") {
+            deg = deg % 360;
+            setAttribute(el, "transform", "rotate(" + deg + "," + x + "," + y + ")");
+        }
+    };
+    var initCircle$1 = function (el, cx, cy, r) {
+        if (el.nodeName.toLowerCase() !== "circle")
+            throw new Error("Need a <circle> !");
+        setAttribute(el, "cx", cx);
+        setAttribute(el, "cy", cy);
+        setAttribute(el, "r", r);
+    };
+    var initPath = function (el, path) {
+        if (el.nodeName.toLowerCase() !== "path")
+            throw new Error("Need a <path> !");
+        setAttribute(el, "d", path);
+    };
+    var initRect$1 = function (el, config, x, y, width, height) {
+        if (el.nodeName.toLowerCase() !== "path")
+            throw new Error("Need a <path> !");
+        var rectRadius = [];
+        if (Array.isArray(config.rectRadius) && config.rectRadius.length > 0) {
+            for (var index = 0; index < 4; index++) {
+                rectRadius.push.apply(rectRadius, config.rectRadius);
+            }
+        }
+        if (height < 0) {
+            height *= -1;
+            y -= height;
+        }
+        if (width < 0) {
+            width *= -1;
+            x -= width;
+        }
+        var d = "";
+        if (rectRadius.length >= 4) {
+            d = "M" + (x + rectRadius[0]) + " " + y;
+            d += "L" + (x + width - rectRadius[1]) + " " + y;
+            d += "A" + rectRadius[1] + " " + rectRadius[1] + " 0 0 1 " + (x + width) + " " + (y + rectRadius[1]);
+            d += "L" + (x + width) + " " + (y + height - rectRadius[2]);
+            d += "A" + rectRadius[2] + " " + rectRadius[2] + " 0 0 1 " + (x + width - rectRadius[2]) + " " + (y + height);
+            d += "L" + (x + rectRadius[3]) + " " + (y + height);
+            d += "A" + rectRadius[3] + " " + rectRadius[3] + " 0 0 1 " + x + " " + (y + height - rectRadius[3]);
+            d += "L" + x + " " + (y + rectRadius[0]);
+            d += "A" + rectRadius[0] + " " + rectRadius[0] + " 0 0 1 " + (x + rectRadius[0]) + " " + y;
+        }
+        else {
+            d = "M" + x + " " + y;
+            d += "L" + (x + width) + " " + y;
+            d += "L" + (x + width) + " " + (y + height);
+            d += "L" + x + " " + (y + height);
+            d += "Z";
+        }
+        setAttribute(el, "d", d);
+    };
+    var initArc$1 = function (el, config, cx, cy, r1, r2, beginDeg, deg) {
+        if (el.nodeName.toLowerCase() !== "path")
+            throw new Error("Need a <path> !");
+        beginDeg = (beginDeg / 180) * Math.PI;
+        deg = (deg / 180) * Math.PI;
+        beginDeg = beginDeg % (Math.PI * 2);
+        if (r1 > r2) {
+            var temp = r1;
+            r1 = r2;
+            r2 = temp;
+        }
+        if (deg >= Math.PI * 1.999999 || deg <= -Math.PI * 1.999999) {
+            deg = Math.PI * 1.999999;
+        }
+        else {
+            deg = deg % (Math.PI * 2);
+        }
+        arc(beginDeg, deg, cx, cy, r1, r2, function (beginA, endA, begInnerX, begInnerY, begOuterX, begOuterY, endInnerX, endInnerY, endOuterX, endOuterY, r) {
+            var f = endA - beginA > Math.PI ? 1 : 0;
+            var d = "M" + begInnerX + " " + begInnerY;
+            if (r < 0)
+                r = -r;
+            d +=
+                "A" + r1 + " " + r1 + " 0 " + f + " 1 " + endInnerX + " " + endInnerY;
+            if (config.arcEndCap == "round")
+                d += "A" + r + " " + r + " " + " 0 1 0 " + endOuterX + " " + endOuterY;
+            else if (config.arcEndCap == "-round")
+                d += "A" + r + " " + r + " " + " 0 1 1 " + endOuterX + " " + endOuterY;
+            else
+                d += "L" + endOuterX + " " + endOuterY;
+            d +=
+                "A" + r2 + " " + r2 + " 0 " + f + " 0 " + begOuterX + " " + begOuterY;
+            if (config.arcStartCap == "round")
+                d += "A" + r + " " + r + " " + " 0 1 0 " + begInnerX + " " + begInnerY;
+            else if (config.arcStartCap == "-round")
+                d += "A" + r + " " + r + " " + " 0 1 1 " + begInnerX + " " + begInnerY;
+            else
+                d += "L" + begInnerX + " " + begInnerY;
+            if (config.arcStartCap == "butt")
+                d += "Z";
+            setAttribute(el, "d", d);
+        });
     };
 
-    var enhanceGradient$1 = function (gradient, gradientId) {
-        var enhanceGradient = {
-            "value": function () {
-                return "url(#" + gradientId + ")";
-            },
-            "setColor": function (stop, color) {
-                var stopEl = toNode("stop");
-                gradient.appendChild(stopEl);
-                setAttribute(stopEl, "offset", (stop * 100) + "%");
-                setAttribute(stopEl, "style", "stop-color:" + color + ";");
-                return enhanceGradient;
-            }
-        };
-        return enhanceGradient;
-    };
-    var linearGradient$1 = function (el, x0, y0, x1, y1) {
-        var defs = initDefs(el);
-        var gradientId = "vislite-lg-" + new Date().valueOf() + "-" + Math.random();
-        var linearGradient = toNode("linearGradient");
-        defs.appendChild(linearGradient);
-        setAttribute(linearGradient, "id", gradientId);
-        setAttribute(linearGradient, "x1", x0 + "%");
-        setAttribute(linearGradient, "y1", y0 + "%");
-        setAttribute(linearGradient, "x2", x1 + "%");
-        setAttribute(linearGradient, "y2", y1 + "%");
-        return enhanceGradient$1(linearGradient, gradientId);
-    };
-    var radialGradient$1 = function (el, cx, cy, r) {
-        var defs = initDefs(el);
-        var gradientId = "vislite-rg-" + new Date().valueOf() + "-" + Math.random();
-        var radialGradient = toNode("radialGradient");
-        defs.appendChild(radialGradient);
-        setAttribute(radialGradient, "id", gradientId);
-        setAttribute(radialGradient, "cx", cx + "%");
-        setAttribute(radialGradient, "cy", cy + "%");
-        setAttribute(radialGradient, "r", r + "%");
-        return enhanceGradient$1(radialGradient, gradientId);
+    var enhanceGradient$1 = function (gradient, gradientId) {
+        var enhanceGradient = {
+            "value": function () {
+                return "url(#" + gradientId + ")";
+            },
+            "setColor": function (stop, color) {
+                var stopEl = toNode("stop");
+                gradient.appendChild(stopEl);
+                setAttribute(stopEl, "offset", (stop * 100) + "%");
+                setAttribute(stopEl, "style", "stop-color:" + color + ";");
+                return enhanceGradient;
+            }
+        };
+        return enhanceGradient;
+    };
+    var linearGradient$1 = function (el, x0, y0, x1, y1) {
+        var defs = initDefs(el);
+        var gradientId = "visliteLg" + new Date().valueOf() + "" + (Math.random() * 1000000).toFixed(0);
+        var linearGradient = toNode("linearGradient");
+        defs.appendChild(linearGradient);
+        setAttribute(linearGradient, "id", gradientId);
+        setAttribute(linearGradient, "x1", x0 + "%");
+        setAttribute(linearGradient, "y1", y0 + "%");
+        setAttribute(linearGradient, "x2", x1 + "%");
+        setAttribute(linearGradient, "y2", y1 + "%");
+        return enhanceGradient$1(linearGradient, gradientId);
+    };
+    var radialGradient$1 = function (el, cx, cy, r) {
+        var defs = initDefs(el);
+        var gradientId = "visliteRg" + new Date().valueOf() + "" + (Math.random() * 1000000).toFixed(0);
+        var radialGradient = toNode("radialGradient");
+        defs.appendChild(radialGradient);
+        setAttribute(radialGradient, "id", gradientId);
+        setAttribute(radialGradient, "cx", cx + "%");
+        setAttribute(radialGradient, "cy", cy + "%");
+        setAttribute(radialGradient, "r", r + "%");
+        return enhanceGradient$1(radialGradient, gradientId);
     };
 
-    function defaultFactory$1 () {
-        return {
-            fillStyle: "#000",
-            strokeStyle: "#000",
-            textAlign: "left",
-            textBaseline: "middle",
-            "fontSize": 16,
-            "fontFamily": "sans-serif",
-            "arcStartCap": "butt",
-            "arcEndCap": "butt",
-            lineDash: [],
-            lineWidth: 1,
-            lineCap: "butt",
-            lineJoin: "miter",
-            "rectRadius": []
-        };
+    function defaultFactory$1 () {
+        return {
+            fillStyle: "rgb(0,0,0)",
+            strokeStyle: "rgb(0,0,0)",
+            textAlign: "left",
+            textBaseline: "middle",
+            "fontSize": 16,
+            "fontFamily": "sans-serif",
+            "arcStartCap": "butt",
+            "arcEndCap": "butt",
+            lineDash: [],
+            lineWidth: 1,
+            lineCap: "butt",
+            lineJoin: "miter",
+            "rectRadius": []
+        };
     }
 
-    var SVG$1 = (function () {
-        function SVG(svg) {
-            this.name = "SVG";
-            this.__config = defaultFactory$1();
-            this.__path = "";
-            this.__currentPosition = [];
-            this.__svg = svg;
-        }
-        SVG.prototype.config = function (params) {
-            if (typeof params !== "object") {
-                return this.__config[params];
-            }
-            else {
-                for (var key in params) {
-                    this.__config[key] = params[key];
-                }
-            }
-            return this;
-        };
-        SVG.prototype.reset = function () {
-            this.config(defaultFactory$1());
-            return this;
-        };
-        SVG.prototype.useEl = function (el) {
-            this.__useEl = el;
-            return this;
-        };
-        SVG.prototype.getEl = function () {
-            return this.__useEl;
-        };
-        SVG.prototype.appendEl = function (el, context) {
-            context = context || this.__svg;
-            if (typeof el == "string")
-                el = toNode(el);
-            context.appendChild(el);
-            this.__useEl = el;
-            return this;
-        };
-        SVG.prototype.appendBoard = function (el, context) {
-            var _el = el;
-            if (typeof el == "string")
-                _el =
-                    {
-                        text: "text",
-                        path: "path",
-                        arc: "path",
-                        circle: "circle",
-                        rect: "rect",
-                    }[el] || "";
-            if (_el == "")
-                throw new Error("Unsupported drawing method:" + el);
-            return this.appendEl(_el, context);
-        };
-        SVG.prototype.remove = function () {
-            if (!this.__useEl) {
-                throw new Error("Currently, no node can be deleted.");
-            }
-            else {
-                this.__useEl.parentNode.removeChild(this.__useEl);
-            }
-            return this;
-        };
-        SVG.prototype.attr = function (params) {
-            if (!this.__useEl)
-                throw new Error("Currently, no node can be modified or viewed.");
-            if (typeof params !== "object") {
-                return getAttribute(this.__useEl, params);
-            }
-            else {
-                for (var key in params) {
-                    setAttribute(this.__useEl, key, params[key]);
-                }
-                return this;
-            }
-        };
-        SVG.prototype.fillText = function (text, x, y, deg) {
-            if (deg === void 0) { deg = 0; }
-            initText$1(this.__useEl, this.__config, x, y, deg);
-            this.__useEl.textContent = text;
-            fill(this.__useEl, this.__config);
-            return this;
-        };
-        SVG.prototype.strokeText = function (text, x, y, deg) {
-            if (deg === void 0) { deg = 0; }
-            initText$1(this.__useEl, this.__config, x, y, deg);
-            this.__useEl.textContent = text;
-            stroke(this.__useEl, this.__config);
-            return this;
-        };
-        SVG.prototype.fullText = function (text, x, y, deg) {
-            if (deg === void 0) { deg = 0; }
-            initText$1(this.__useEl, this.__config, x, y, deg);
-            this.__useEl.textContent = text;
-            full(this.__useEl, this.__config);
-            return this;
-        };
-        SVG.prototype.fillArc = function (cx, cy, r1, r2, beginDeg, deg) {
-            initArc$1(this.__useEl, this.__config, cx, cy, r1, r2, beginDeg, deg);
-            fill(this.__useEl, this.__config);
-            return this;
-        };
-        SVG.prototype.strokeArc = function (cx, cy, r1, r2, beginDeg, deg) {
-            initArc$1(this.__useEl, this.__config, cx, cy, r1, r2, beginDeg, deg);
-            stroke(this.__useEl, this.__config);
-            return this;
-        };
-        SVG.prototype.fullArc = function (cx, cy, r1, r2, beginDeg, deg) {
-            initArc$1(this.__useEl, this.__config, cx, cy, r1, r2, beginDeg, deg);
-            full(this.__useEl, this.__config);
-            return this;
-        };
-        SVG.prototype.fillCircle = function (cx, cy, r) {
-            initCircle$1(this.__useEl, cx, cy, r);
-            fill(this.__useEl, this.__config);
-            return this;
-        };
-        SVG.prototype.strokeCircle = function (cx, cy, r) {
-            initCircle$1(this.__useEl, cx, cy, r);
-            stroke(this.__useEl, this.__config);
-            return this;
-        };
-        SVG.prototype.fullCircle = function (cx, cy, r) {
-            initCircle$1(this.__useEl, cx, cy, r);
-            full(this.__useEl, this.__config);
-            return this;
-        };
-        SVG.prototype.fillRect = function (x, y, width, height) {
-            initRect$1(this.__useEl, this.__config, x, y, width, height);
-            fill(this.__useEl, this.__config);
-            return this;
-        };
-        SVG.prototype.strokeRect = function (x, y, width, height) {
-            initRect$1(this.__useEl, this.__config, x, y, width, height);
-            stroke(this.__useEl, this.__config);
-            return this;
-        };
-        SVG.prototype.fullRect = function (x, y, width, height) {
-            initRect$1(this.__useEl, this.__config, x, y, width, height);
-            full(this.__useEl, this.__config);
-            return this;
-        };
-        SVG.prototype.beginPath = function () {
-            this.__currentPosition = [];
-            this.__path = "";
-            return this;
-        };
-        SVG.prototype.closePath = function () {
-            this.__path += "Z";
-            return this;
-        };
-        SVG.prototype.moveTo = function (x, y) {
-            this.__currentPosition = [x, y];
-            this.__path += "M" + x + " " + y;
-            return this;
-        };
-        SVG.prototype.lineTo = function (x, y) {
-            this.__currentPosition = [x, y];
-            this.__path += (this.__path == "" ? "M" : "L") + x + " " + y;
-            return this;
-        };
-        SVG.prototype.fill = function () {
-            initPath(this.__useEl, this.__path);
-            fill(this.__useEl, this.__config);
-            return this;
-        };
-        SVG.prototype.stroke = function () {
-            initPath(this.__useEl, this.__path);
-            stroke(this.__useEl, this.__config);
-            return this;
-        };
-        SVG.prototype.full = function () {
-            initPath(this.__useEl, this.__path);
-            full(this.__useEl, this.__config);
-            return this;
-        };
-        SVG.prototype.arc = function (x, y, r, beginDeg, deg) {
-            var begPosition = rotate$1(x, y, (beginDeg / 180) * Math.PI, x + r, y);
-            var endPosition = rotate$1(x, y, ((beginDeg + deg) / 180) * Math.PI, x + r, y);
-            if (this.__path == "") {
-                this.__path += "M" + begPosition[0] + "," + begPosition[1];
-            }
-            else if (begPosition[0] != this.__currentPosition[0] ||
-                begPosition[1] != this.__currentPosition[1]) {
-                this.__path += "L" + begPosition[0] + "," + begPosition[1];
-            }
-            this.__path +=
-                "A" +
-                    r +
-                    "," +
-                    r +
-                    " 0 " +
-                    (deg > 180 || deg < -180 ? 1 : 0) +
-                    "," +
-                    (deg > 0 ? 1 : 0) +
-                    " " +
-                    endPosition[0] +
-                    "," +
-                    endPosition[1];
-            return this;
-        };
-        SVG.prototype.quadraticCurveTo = function (cpx, cpy, x, y) {
-            this.__path += "Q" + cpx + " " + cpy + "," + x + " " + y;
-            return this;
-        };
-        SVG.prototype.bezierCurveTo = function (cp1x, cp1y, cp2x, cp2y, x, y) {
-            this.__path +=
-                "C" + cp1x + " " + cp1y + "," + cp2x + " " + cp2y + "," + x + " " + y;
-            return this;
-        };
-        SVG.prototype.bind = function (eventType, callback) {
-            this.__useEl.addEventListener(eventType, function (event) {
-                callback.call(this, event, this);
-            }, false);
-            return this;
-        };
-        SVG.prototype.createLinearGradient = function (x0, y0, x1, y1) {
-            return linearGradient$1(this.__svg, x0, y0, x1, y1);
-        };
-        SVG.prototype.createRadialGradient = function (cx, cy, r) {
-            return radialGradient$1(this.__svg, cx, cy, r);
-        };
-        return SVG;
+    var SVG$1 = (function () {
+        function SVG(svg) {
+            this.name = "SVG";
+            this.__config = defaultFactory$1();
+            this.__path = "";
+            this.__currentPosition = [];
+            this.__svg = svg;
+        }
+        SVG.prototype.config = function (params) {
+            if (typeof params !== "object") {
+                return this.__config[params];
+            }
+            else {
+                for (var key in params) {
+                    this.__config[key] = params[key];
+                }
+            }
+            return this;
+        };
+        SVG.prototype.reset = function () {
+            this.config(defaultFactory$1());
+            return this;
+        };
+        SVG.prototype.useEl = function (el) {
+            this.__useEl = el;
+            return this;
+        };
+        SVG.prototype.getEl = function () {
+            return this.__useEl;
+        };
+        SVG.prototype.appendEl = function (el, context) {
+            context = context || this.__svg;
+            if (typeof el == "string")
+                el = toNode(el);
+            context.appendChild(el);
+            this.__useEl = el;
+            return this;
+        };
+        SVG.prototype.appendBoard = function (el, context) {
+            var _el = el;
+            if (typeof el == "string")
+                _el =
+                    {
+                        text: "text",
+                        path: "path",
+                        arc: "path",
+                        circle: "circle",
+                        rect: "rect",
+                    }[el] || "";
+            if (_el == "")
+                throw new Error("Unsupported drawing method:" + el);
+            return this.appendEl(_el, context);
+        };
+        SVG.prototype.remove = function () {
+            if (!this.__useEl) {
+                throw new Error("Currently, no node can be deleted.");
+            }
+            else {
+                this.__useEl.parentNode.removeChild(this.__useEl);
+            }
+            return this;
+        };
+        SVG.prototype.attr = function (params) {
+            if (!this.__useEl)
+                throw new Error("Currently, no node can be modified or viewed.");
+            if (typeof params !== "object") {
+                return getAttribute(this.__useEl, params);
+            }
+            else {
+                for (var key in params) {
+                    setAttribute(this.__useEl, key, params[key]);
+                }
+                return this;
+            }
+        };
+        SVG.prototype.fillText = function (text, x, y, deg) {
+            if (deg === void 0) { deg = 0; }
+            initText$1(this.__useEl, this.__config, x, y, deg);
+            this.__useEl.textContent = text;
+            fill(this.__useEl, this.__config);
+            return this;
+        };
+        SVG.prototype.strokeText = function (text, x, y, deg) {
+            if (deg === void 0) { deg = 0; }
+            initText$1(this.__useEl, this.__config, x, y, deg);
+            this.__useEl.textContent = text;
+            stroke(this.__useEl, this.__config);
+            return this;
+        };
+        SVG.prototype.fullText = function (text, x, y, deg) {
+            if (deg === void 0) { deg = 0; }
+            initText$1(this.__useEl, this.__config, x, y, deg);
+            this.__useEl.textContent = text;
+            full(this.__useEl, this.__config);
+            return this;
+        };
+        SVG.prototype.fillArc = function (cx, cy, r1, r2, beginDeg, deg) {
+            initArc$1(this.__useEl, this.__config, cx, cy, r1, r2, beginDeg, deg);
+            fill(this.__useEl, this.__config);
+            return this;
+        };
+        SVG.prototype.strokeArc = function (cx, cy, r1, r2, beginDeg, deg) {
+            initArc$1(this.__useEl, this.__config, cx, cy, r1, r2, beginDeg, deg);
+            stroke(this.__useEl, this.__config);
+            return this;
+        };
+        SVG.prototype.fullArc = function (cx, cy, r1, r2, beginDeg, deg) {
+            initArc$1(this.__useEl, this.__config, cx, cy, r1, r2, beginDeg, deg);
+            full(this.__useEl, this.__config);
+            return this;
+        };
+        SVG.prototype.fillCircle = function (cx, cy, r) {
+            initCircle$1(this.__useEl, cx, cy, r);
+            fill(this.__useEl, this.__config);
+            return this;
+        };
+        SVG.prototype.strokeCircle = function (cx, cy, r) {
+            initCircle$1(this.__useEl, cx, cy, r);
+            stroke(this.__useEl, this.__config);
+            return this;
+        };
+        SVG.prototype.fullCircle = function (cx, cy, r) {
+            initCircle$1(this.__useEl, cx, cy, r);
+            full(this.__useEl, this.__config);
+            return this;
+        };
+        SVG.prototype.fillRect = function (x, y, width, height) {
+            initRect$1(this.__useEl, this.__config, x, y, width, height);
+            fill(this.__useEl, this.__config);
+            return this;
+        };
+        SVG.prototype.strokeRect = function (x, y, width, height) {
+            initRect$1(this.__useEl, this.__config, x, y, width, height);
+            stroke(this.__useEl, this.__config);
+            return this;
+        };
+        SVG.prototype.fullRect = function (x, y, width, height) {
+            initRect$1(this.__useEl, this.__config, x, y, width, height);
+            full(this.__useEl, this.__config);
+            return this;
+        };
+        SVG.prototype.beginPath = function () {
+            this.__currentPosition = [];
+            this.__path = "";
+            return this;
+        };
+        SVG.prototype.closePath = function () {
+            this.__path += "Z";
+            return this;
+        };
+        SVG.prototype.moveTo = function (x, y) {
+            this.__currentPosition = [x, y];
+            this.__path += "M" + x + " " + y;
+            return this;
+        };
+        SVG.prototype.lineTo = function (x, y) {
+            this.__currentPosition = [x, y];
+            this.__path += (this.__path == "" ? "M" : "L") + x + " " + y;
+            return this;
+        };
+        SVG.prototype.fill = function () {
+            initPath(this.__useEl, this.__path);
+            fill(this.__useEl, this.__config);
+            return this;
+        };
+        SVG.prototype.stroke = function () {
+            initPath(this.__useEl, this.__path);
+            stroke(this.__useEl, this.__config);
+            return this;
+        };
+        SVG.prototype.full = function () {
+            initPath(this.__useEl, this.__path);
+            full(this.__useEl, this.__config);
+            return this;
+        };
+        SVG.prototype.arc = function (x, y, r, beginDeg, deg) {
+            var begPosition = rotate$1(x, y, (beginDeg / 180) * Math.PI, x + r, y);
+            var endPosition = rotate$1(x, y, ((beginDeg + deg) / 180) * Math.PI, x + r, y);
+            if (this.__path == "") {
+                this.__path += "M" + begPosition[0] + "," + begPosition[1];
+            }
+            else if (begPosition[0] != this.__currentPosition[0] ||
+                begPosition[1] != this.__currentPosition[1]) {
+                this.__path += "L" + begPosition[0] + "," + begPosition[1];
+            }
+            this.__path +=
+                "A" +
+                    r +
+                    "," +
+                    r +
+                    " 0 " +
+                    (deg > 180 || deg < -180 ? 1 : 0) +
+                    "," +
+                    (deg > 0 ? 1 : 0) +
+                    " " +
+                    endPosition[0] +
+                    "," +
+                    endPosition[1];
+            return this;
+        };
+        SVG.prototype.quadraticCurveTo = function (cpx, cpy, x, y) {
+            this.__path += "Q" + cpx + " " + cpy + "," + x + " " + y;
+            return this;
+        };
+        SVG.prototype.bezierCurveTo = function (cp1x, cp1y, cp2x, cp2y, x, y) {
+            this.__path +=
+                "C" + cp1x + " " + cp1y + "," + cp2x + " " + cp2y + "," + x + " " + y;
+            return this;
+        };
+        SVG.prototype.bind = function (eventType, callback) {
+            this.__useEl.addEventListener(eventType, function (event) {
+                callback.call(this, event, this);
+            }, false);
+            return this;
+        };
+        SVG.prototype.createLinearGradient = function (x0, y0, x1, y1) {
+            return linearGradient$1(this.__svg, x0, y0, x1, y1);
+        };
+        SVG.prototype.createRadialGradient = function (cx, cy, r) {
+            return radialGradient$1(this.__svg, cx, cy, r);
+        };
+        return SVG;
     }());
 
-    var SVG = (function (_super) {
-        __extends(SVG, _super);
-        function SVG(el) {
-            if (!el) {
-                throw new Error("VISLite SVG:The mount point requires an HTMLElement type but encountered null.");
-            }
-            var width = el.clientWidth, height = el.clientHeight;
-            var ViewSVG = document.createElementNS("http://www.w3.org/2000/svg", 'svg');
-            el.appendChild(ViewSVG);
-            ViewSVG.setAttribute("width", width + "");
-            ViewSVG.setAttribute("height", height + "");
-            ViewSVG.setAttribute("viewBox", "0 0 " + width + " " + height);
-            return _super.call(this, ViewSVG) || this;
-        }
-        return SVG;
+    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.");
+            }
+            var width = el.clientWidth, height = el.clientHeight;
+            var ViewSVG = document.createElementNS("http://www.w3.org/2000/svg", 'svg');
+            el.appendChild(ViewSVG);
+            ViewSVG.setAttribute("width", width + "");
+            ViewSVG.setAttribute("height", height + "");
+            ViewSVG.setAttribute("viewBox", "0 0 " + width + " " + height);
+            _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));
 
-    var initText = function (painter, config, x, y, deg) {
-        painter.beginPath();
-        painter.translate(x, y);
-        painter.rotate(deg);
-        painter.font =
-            config.fontStyle +
-                " " +
-                config.fontWeight +
-                " " +
-                config.fontSize +
-                "px " +
-                config.fontFamily;
-        return painter;
-    };
-    var initArc = function (painter, config, cx, cy, r1, r2, beginDeg, deg) {
-        if (r1 > r2) {
-            var temp = r1;
-            r1 = r2;
-            r2 = temp;
-        }
-        beginDeg = beginDeg % (Math.PI * 2);
-        if (deg >= Math.PI * 1.999999 || deg <= -Math.PI * 1.999999) {
-            deg = Math.PI * 2;
-        }
-        else {
-            deg = deg % (Math.PI * 2);
-        }
-        arc(beginDeg, deg, cx, cy, r1, r2, function (beginA, endA, begInnerX, begInnerY, begOuterX, begOuterY, endInnerX, endInnerY, endOuterX, endOuterY, r) {
-            if (r < 0)
-                r = -r;
-            painter.beginPath();
-            painter.moveTo(begInnerX, begInnerY);
-            painter.arc(cx, cy, r1, beginA, endA, false);
-            if (config.arcEndCap == "round")
-                painter.arc((endInnerX + endOuterX) * 0.5, (endInnerY + endOuterY) * 0.5, r, endA - Math.PI, endA, true);
-            else if (config.arcEndCap == "-round")
-                painter.arc((endInnerX + endOuterX) * 0.5, (endInnerY + endOuterY) * 0.5, r, endA - Math.PI, endA, false);
-            else
-                painter.lineTo(endOuterX, endOuterY);
-            painter.arc(cx, cy, r2, endA, beginA, true);
-            if (config.arcStartCap == "round")
-                painter.arc((begInnerX + begOuterX) * 0.5, (begInnerY + begOuterY) * 0.5, r, beginA, beginA - Math.PI, true);
-            else if (config.arcStartCap == "-round")
-                painter.arc((begInnerX + begOuterX) * 0.5, (begInnerY + begOuterY) * 0.5, r, beginA, beginA - Math.PI, false);
-            else
-                painter.lineTo(begInnerX, begInnerY);
-        });
-        if (config.arcStartCap == "butt")
-            painter.closePath();
-        return painter;
-    };
-    var initCircle = function (painter, cx, cy, r) {
-        painter.beginPath();
-        painter.moveTo(cx + r, cy);
-        painter.arc(cx, cy, r, 0, Math.PI * 2);
-        return painter;
-    };
-    var initRect = function (painter, config, x, y, width, height) {
-        painter.beginPath();
-        var rectRadius = [];
-        if (Array.isArray(config.rectRadius) && config.rectRadius.length > 0) {
-            for (var index = 0; index < 4; index++) {
-                rectRadius.push.apply(rectRadius, config.rectRadius);
-            }
-        }
-        if (rectRadius.length >= 4) {
-            painter.arc(x + rectRadius[0], y + rectRadius[0], rectRadius[0], Math.PI, Math.PI * 1.5);
-            painter.arc(x + width - rectRadius[1], y + rectRadius[1], rectRadius[1], 1.5 * Math.PI, 0);
-            painter.arc(x + width - rectRadius[2], y + height - rectRadius[2], rectRadius[2], 0, Math.PI * 0.5);
-            painter.arc(x + rectRadius[3], y + height - rectRadius[3], rectRadius[3], 0.5 * Math.PI, Math.PI);
-            painter.closePath();
-        }
-        else {
-            painter.rect(x, y, width, height);
-        }
-        return painter;
+    var initText = function (painter, config, x, y, deg) {
+        painter.beginPath();
+        painter.translate(x, y);
+        painter.rotate(deg);
+        painter.font =
+            config.fontStyle +
+                " " +
+                config.fontWeight +
+                " " +
+                config.fontSize +
+                "px " +
+                config.fontFamily;
+        return painter;
+    };
+    var initArc = function (painter, config, cx, cy, r1, r2, beginDeg, deg) {
+        if (r1 > r2) {
+            var temp = r1;
+            r1 = r2;
+            r2 = temp;
+        }
+        beginDeg = beginDeg % (Math.PI * 2);
+        if (deg >= Math.PI * 1.999999 || deg <= -Math.PI * 1.999999) {
+            deg = Math.PI * 2;
+        }
+        else {
+            deg = deg % (Math.PI * 2);
+        }
+        arc(beginDeg, deg, cx, cy, r1, r2, function (beginA, endA, begInnerX, begInnerY, begOuterX, begOuterY, endInnerX, endInnerY, endOuterX, endOuterY, r) {
+            if (r < 0)
+                r = -r;
+            painter.beginPath();
+            painter.moveTo(begInnerX, begInnerY);
+            painter.arc(cx, cy, r1, beginA, endA, false);
+            if (config.arcEndCap == "round")
+                painter.arc((endInnerX + endOuterX) * 0.5, (endInnerY + endOuterY) * 0.5, r, endA - Math.PI, endA, true);
+            else if (config.arcEndCap == "-round")
+                painter.arc((endInnerX + endOuterX) * 0.5, (endInnerY + endOuterY) * 0.5, r, endA - Math.PI, endA, false);
+            else
+                painter.lineTo(endOuterX, endOuterY);
+            painter.arc(cx, cy, r2, endA, beginA, true);
+            if (config.arcStartCap == "round")
+                painter.arc((begInnerX + begOuterX) * 0.5, (begInnerY + begOuterY) * 0.5, r, beginA, beginA - Math.PI, true);
+            else if (config.arcStartCap == "-round")
+                painter.arc((begInnerX + begOuterX) * 0.5, (begInnerY + begOuterY) * 0.5, r, beginA, beginA - Math.PI, false);
+            else
+                painter.lineTo(begInnerX, begInnerY);
+        });
+        if (config.arcStartCap == "butt")
+            painter.closePath();
+        return painter;
+    };
+    var initCircle = function (painter, cx, cy, r) {
+        painter.beginPath();
+        painter.moveTo(cx + r, cy);
+        painter.arc(cx, cy, r, 0, Math.PI * 2);
+        return painter;
+    };
+    var initRect = function (painter, config, x, y, width, height) {
+        painter.beginPath();
+        var rectRadius = [];
+        if (Array.isArray(config.rectRadius) && config.rectRadius.length > 0) {
+            for (var index = 0; index < 4; index++) {
+                rectRadius.push.apply(rectRadius, config.rectRadius);
+            }
+        }
+        if (rectRadius.length >= 4) {
+            painter.arc(x + rectRadius[0], y + rectRadius[0], rectRadius[0], Math.PI, Math.PI * 1.5);
+            painter.arc(x + width - rectRadius[1], y + rectRadius[1], rectRadius[1], 1.5 * Math.PI, 0);
+            painter.arc(x + width - rectRadius[2], y + height - rectRadius[2], rectRadius[2], 0, Math.PI * 0.5);
+            painter.arc(x + rectRadius[3], y + height - rectRadius[3], rectRadius[3], 0.5 * Math.PI, Math.PI);
+            painter.closePath();
+        }
+        else {
+            painter.rect(x, y, width, height);
+        }
+        return painter;
     };
 
-    function texts (painter, contents, width, height, doback) {
-        var lineNumber = 0, content = "";
-        for (var i = 0; i < contents.length; i++) {
-            if (painter.measureText(content + contents[i]).width > width || /\n$/.test(content)) {
-                lineNumber += 1;
-                doback(content, (lineNumber - 0.5) * height);
-                content = contents[i];
-            }
-            else if (i == contents.length - 1) {
-                lineNumber += 1;
-                doback(content + contents[i], (lineNumber - 0.5) * height);
-            }
-            else {
-                content += contents[i];
-            }
-        }
-        return lineNumber * height;
+    function texts (painter, contents, width, height, doback) {
+        var lineNumber = 0, content = "";
+        for (var i = 0; i < contents.length; i++) {
+            if (painter.measureText(content + contents[i]).width > width || /\n$/.test(content)) {
+                lineNumber += 1;
+                doback(content, (lineNumber - 0.5) * height);
+                content = contents[i];
+            }
+            else if (i == contents.length - 1) {
+                lineNumber += 1;
+                doback(content + contents[i], (lineNumber - 0.5) * height);
+            }
+            else {
+                content += contents[i];
+            }
+        }
+        return lineNumber * height;
     }
 
-    function defaultFactory (type) {
-        var special = {
-            "fontSize": 16,
-            "fontFamily": "sans-serif",
-            "fontWeight": 400,
-            "fontStyle": "normal",
-            "arcStartCap": 'butt',
-            "arcEndCap": 'butt',
-            "rectRadius": []
-        };
-        var init = {
-            "fillStyle": 'black',
-            "strokeStyle": 'black',
-            "lineWidth": 1,
-            "lineCap": "butt",
-            "lineJoin": "miter",
-            "lineDash": [],
-            "textAlign": 'left',
-            "textBaseline": 'middle',
-            "shadowBlur": 0,
-            "shadowColor": "black"
-        };
-        if (type == 'special')
-            return special;
-        else if (type == 'init')
-            return init;
-        else
-            return __assign(__assign({}, special), init);
+    function defaultFactory (type) {
+        var special = {
+            "fontSize": 16,
+            "fontFamily": "sans-serif",
+            "fontWeight": 400,
+            "fontStyle": "normal",
+            "arcStartCap": 'butt',
+            "arcEndCap": 'butt',
+            "rectRadius": []
+        };
+        var init = {
+            "fillStyle": 'black',
+            "strokeStyle": 'black',
+            "lineWidth": 1,
+            "lineCap": "butt",
+            "lineJoin": "miter",
+            "lineDash": [],
+            "textAlign": 'left',
+            "textBaseline": 'middle',
+            "shadowBlur": 0,
+            "shadowColor": "black"
+        };
+        if (type == 'special')
+            return special;
+        else if (type == 'init')
+            return init;
+        else
+            return __assign(__assign({}, special), init);
     }
 
-    var Painter = (function () {
-        function Painter(canvas, opts, region, isPainter, scaleSize) {
-            if (opts === void 0) { opts = {}; }
-            if (isPainter === void 0) { isPainter = false; }
-            this.__region = null;
-            this.__onlyRegion = false;
-            this.__onlyView = false;
-            this.__specialConfig = defaultFactory("special");
-            this.__initConfig = defaultFactory("init");
-            this.painter = canvas.getContext("2d", opts);
-            this.__region = region;
-            this.__isPainter = isPainter;
-            this.painter.textBaseline = 'middle';
-            this.painter.textAlign = 'left';
-        }
-        Painter.prototype.useConfig = function (key, value) {
-            if (this.__region && !this.__onlyView) {
-                if (['fillStyle', 'strokeStyle', 'shadowBlur', 'shadowColor'].indexOf(key) < 0) {
-                    this.__region.useConfig(key, value);
-                }
-            }
-            if (this.__isPainter && this.__onlyRegion)
-                return this;
-            if (key == 'lineDash') {
-                if (this.painter.setLineDash)
-                    this.painter.setLineDash(value);
-            }
-            else if (key in this.__specialConfig) {
-                if (key == 'fontSize') {
-                    value = Math.round(value);
-                }
-                this.__specialConfig[key] = value;
-            }
-            else if (key in this.__initConfig) {
-                this.painter[key] = value;
-            }
-            else {
-                throw new Error('Illegal configuration item of painter : ' + key + " !");
-            }
-            return this;
-        };
-        Painter.prototype.fillText = function (text, x, y, deg) {
-            if (deg === void 0) { deg = 0; }
-            if (this.__region && !this.__onlyView)
-                this.__region.fillText(text, x, y, deg);
-            if (this.__isPainter && this.__onlyRegion)
-                return this;
-            this.painter.save();
-            initText(this.painter, this.__specialConfig, x, y, deg).fillText(text, 0, 0);
-            this.painter.restore();
-            return this;
-        };
-        Painter.prototype.strokeText = function (text, x, y, deg) {
-            if (deg === void 0) { deg = 0; }
-            if (this.__region && !this.__onlyView)
-                this.__region.strokeText(text, x, y, deg);
-            if (this.__isPainter && this.__onlyRegion)
-                return this;
-            this.painter.save();
-            initText(this.painter, this.__specialConfig, x, y, deg).strokeText(text, 0, 0);
-            this.painter.restore();
-            return this;
-        };
-        Painter.prototype.fullText = function (text, x, y, deg) {
-            if (deg === void 0) { deg = 0; }
-            if (this.__region && !this.__onlyView)
-                this.__region.fullText(text, x, y, deg);
-            if (this.__isPainter && this.__onlyRegion)
-                return this;
-            this.painter.save();
-            initText(this.painter, this.__specialConfig, x, y, deg);
-            this.painter.fillText(text, 0, 0);
-            this.painter.strokeText(text, 0, 0);
-            this.painter.restore();
-            return this;
-        };
-        Painter.prototype.fillTexts = function (contents, x, y, width, lineHeight, deg) {
-            var _this = this;
-            if (lineHeight === void 0) { lineHeight = 1.2; }
-            if (deg === void 0) { deg = 0; }
-            var h = 0;
-            if (this.__region && !this.__onlyView)
-                h = this.__region.fillTexts(contents, x, y, width, lineHeight);
-            if (this.__isPainter && this.__onlyRegion)
-                return h;
-            this.painter.save();
-            initText(this.painter, this.__specialConfig, x, y, deg);
-            var height = texts(this.painter, contents, width, this.__specialConfig.fontSize * lineHeight, function (content, top) {
-                _this.painter.fillText(content, 0, top);
-            });
-            this.painter.restore();
-            return height;
-        };
-        Painter.prototype.strokeTexts = function (contents, x, y, width, lineHeight, deg) {
-            var _this = this;
-            if (lineHeight === void 0) { lineHeight = 1.2; }
-            if (deg === void 0) { deg = 0; }
-            var h = 0;
-            if (this.__region && !this.__onlyView)
-                h = this.__region.fillTexts(contents, x, y, width, lineHeight);
-            if (this.__isPainter && this.__onlyRegion)
-                return h;
-            this.painter.save();
-            initText(this.painter, this.__specialConfig, x, y, deg);
-            var height = texts(this.painter, contents, width, this.__specialConfig.fontSize * lineHeight, function (content, top) {
-                _this.painter.strokeText(content, 0, top);
-            });
-            this.painter.restore();
-            return height;
-        };
-        Painter.prototype.fullTexts = function (contents, x, y, width, lineHeight, deg) {
-            var _this = this;
-            if (lineHeight === void 0) { lineHeight = 1.2; }
-            if (deg === void 0) { deg = 0; }
-            var h = 0;
-            if (this.__region && !this.__onlyView)
-                h = this.__region.fillTexts(contents, x, y, width, lineHeight);
-            if (this.__isPainter && this.__onlyRegion)
-                return h;
-            this.painter.save();
-            initText(this.painter, this.__specialConfig, x, y, deg);
-            var height = texts(this.painter, contents, width, this.__specialConfig.fontSize * lineHeight, function (content, top) {
-                _this.painter.fillText(content, 0, top);
-                _this.painter.strokeText(content, 0, top);
-            });
-            this.painter.restore();
-            return height;
-        };
-        Painter.prototype.beginPath = function () {
-            if (this.__region && !this.__onlyView)
-                this.__region.beginPath();
-            if (this.__isPainter && this.__onlyRegion)
-                return this;
-            this.painter.beginPath();
-            return this;
-        };
-        Painter.prototype.closePath = function () {
-            if (this.__region && !this.__onlyView)
-                this.__region.closePath();
-            if (this.__isPainter && this.__onlyRegion)
-                return this;
-            this.painter.closePath();
-            return this;
-        };
-        Painter.prototype.moveTo = function (x, y) {
-            if (this.__region && !this.__onlyView)
-                this.__region.moveTo(x, y);
-            if (this.__isPainter && this.__onlyRegion)
-                return this;
-            this.painter.moveTo(Math.round(x) + 0.5, Math.round(y) + 0.5);
-            return this;
-        };
-        Painter.prototype.lineTo = function (x, y) {
-            if (this.__region && !this.__onlyView)
-                this.__region.lineTo(x, y);
-            if (this.__isPainter && this.__onlyRegion)
-                return this;
-            this.painter.lineTo(Math.round(x) + 0.5, Math.round(y) + 0.5);
-            return this;
-        };
-        Painter.prototype.arc = function (x, y, r, beginDeg, deg) {
-            if (this.__region && !this.__onlyView)
-                this.__region.arc(x, y, r, beginDeg, deg);
-            if (this.__isPainter && this.__onlyRegion)
-                return this;
-            this.painter.arc(x, y, r, beginDeg, beginDeg + deg, deg < 0);
-            return this;
-        };
-        Painter.prototype.fill = function () {
-            if (this.__region && !this.__onlyView)
-                this.__region.fill();
-            if (this.__isPainter && this.__onlyRegion)
-                return this;
-            this.painter.fill();
-            return this;
-        };
-        Painter.prototype.stroke = function () {
-            if (this.__region && !this.__onlyView)
-                this.__region.stroke();
-            if (this.__isPainter && this.__onlyRegion)
-                return this;
-            this.painter.stroke();
-            return this;
-        };
-        Painter.prototype.full = function () {
-            if (this.__region && !this.__onlyView)
-                this.__region.full();
-            if (this.__isPainter && this.__onlyRegion)
-                return this;
-            this.painter.fill();
-            this.painter.stroke();
-            return this;
-        };
-        Painter.prototype.save = function () {
-            if (this.__region && !this.__onlyView)
-                this.__region.save();
-            if (this.__isPainter && this.__onlyRegion)
-                return this;
-            this.painter.save();
-            return this;
-        };
-        Painter.prototype.restore = function () {
-            if (this.__region && !this.__onlyView)
-                this.__region.restore();
-            if (this.__isPainter && this.__onlyRegion)
-                return this;
-            this.painter.restore();
-            return this;
-        };
-        Painter.prototype.clip = function () {
-            if (this.__region && !this.__onlyView)
-                this.__region.clip();
-            if (this.__isPainter && this.__onlyRegion)
-                return this;
-            this.painter.clip();
-            return this;
-        };
-        Painter.prototype.quadraticCurveTo = function (cpx, cpy, x, y) {
-            if (this.__region && !this.__onlyView)
-                this.__region.quadraticCurveTo(cpx, cpy, x, y);
-            if (this.__isPainter && this.__onlyRegion)
-                return this;
-            this.painter.quadraticCurveTo(cpx, cpy, x, y);
-            return this;
-        };
-        Painter.prototype.bezierCurveTo = function (cp1x, cp1y, cp2x, cp2y, x, y) {
-            if (this.__region && !this.__onlyView)
-                this.__region.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y);
-            if (this.__isPainter && this.__onlyRegion)
-                return this;
-            this.painter.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y);
-            return this;
-        };
-        Painter.prototype.clearRect = function (x, y, w, h) {
-            if (this.__region && !this.__onlyView)
-                this.__region.clearRect(x, y, w, h);
-            if (this.__isPainter && this.__onlyRegion)
-                return this;
-            this.painter.clearRect(x, y, w, h);
-            return this;
-        };
-        Painter.prototype.clearCircle = function (cx, cy, r) {
-            if (this.__region && !this.__onlyView)
-                this.__region.clearCircle(cx, cy, r);
-            if (this.__isPainter && this.__onlyRegion)
-                return this;
-            this.painter.beginPath();
-            this.painter.globalCompositeOperation = "destination-out";
-            this.painter.arc(cx, cy, r, 0, Math.PI * 2);
-            this.painter.fill();
-            this.painter.globalCompositeOperation = "source-over";
-            this.painter.closePath();
-            return this;
-        };
-        Painter.prototype.fillArc = function (cx, cy, r1, r2, beginDeg, deg) {
-            if (this.__region && !this.__onlyView)
-                this.__region.fillArc(cx, cy, r1, r2, beginDeg, deg);
-            if (this.__isPainter && this.__onlyRegion)
-                return this;
-            initArc(this.painter, this.__specialConfig, cx, cy, r1, r2, beginDeg, deg).fill();
-            return this;
-        };
-        Painter.prototype.strokeArc = function (cx, cy, r1, r2, beginDeg, deg) {
-            if (this.__region && !this.__onlyView)
-                this.__region.strokeArc(cx, cy, r1, r2, beginDeg, deg);
-            if (this.__isPainter && this.__onlyRegion)
-                return this;
-            initArc(this.painter, this.__specialConfig, cx, cy, r1, r2, beginDeg, deg).stroke();
-            return this;
-        };
-        Painter.prototype.fullArc = function (cx, cy, r1, r2, beginDeg, deg) {
-            if (this.__region && !this.__onlyView)
-                this.__region.fullArc(cx, cy, r1, r2, beginDeg, deg);
-            if (this.__isPainter && this.__onlyRegion)
-                return this;
-            initArc(this.painter, this.__specialConfig, cx, cy, r1, r2, beginDeg, deg);
-            this.painter.fill();
-            this.painter.stroke();
-            return this;
-        };
-        Painter.prototype.fillCircle = function (cx, cy, r) {
-            if (this.__region && !this.__onlyView)
-                this.__region.fillCircle(cx, cy, r);
-            if (this.__isPainter && this.__onlyRegion)
-                return this;
-            initCircle(this.painter, cx, cy, r).fill();
-            return this;
-        };
-        Painter.prototype.strokeCircle = function (cx, cy, r) {
-            if (this.__region && !this.__onlyView)
-                this.__region.strokeCircle(cx, cy, r);
-            if (this.__isPainter && this.__onlyRegion)
-                return this;
-            initCircle(this.painter, cx, cy, r).stroke();
-            return this;
-        };
-        Painter.prototype.fullCircle = function (cx, cy, r) {
-            if (this.__region && !this.__onlyView)
-                this.__region.fullCircle(cx, cy, r);
-            if (this.__isPainter && this.__onlyRegion)
-                return this;
-            initCircle(this.painter, cx, cy, r);
-            this.painter.fill();
-            this.painter.stroke();
-            return this;
-        };
-        Painter.prototype.fillRect = function (x, y, width, height) {
-            if (this.__region && !this.__onlyView)
-                this.__region.fillRect(x, y, width, height);
-            if (this.__isPainter && this.__onlyRegion)
-                return this;
-            initRect(this.painter, this.__specialConfig, x, y, width, height).fill();
-            return this;
-        };
-        Painter.prototype.strokeRect = function (x, y, width, height) {
-            if (this.__region && !this.__onlyView)
-                this.__region.strokeRect(x, y, width, height);
-            if (this.__isPainter && this.__onlyRegion)
-                return this;
-            initRect(this.painter, this.__specialConfig, x, y, width, height).stroke();
-            return this;
-        };
-        Painter.prototype.fullRect = function (x, y, width, height) {
-            if (this.__region && !this.__onlyView)
-                this.__region.fullRect(x, y, width, height);
-            if (this.__isPainter && this.__onlyRegion)
-                return this;
-            initRect(this.painter, this.__specialConfig, x, y, width, height);
-            this.painter.fill();
-            this.painter.stroke();
-            return this;
-        };
-        Painter.prototype.draw = function () {
-            return Promise.resolve();
-        };
-        Painter.prototype.drawImage = function (img, x, y, w, h, isImage) {
-            var _this = this;
-            if (isImage === void 0) { isImage = false; }
-            return new Promise(function (resolve) {
-                if (_this.__region && !_this.__onlyView) {
-                    _this.__region.fillRect(x, y, w, h);
-                }
-                if (_this.__isPainter && _this.__onlyRegion) {
-                    resolve({});
-                    return;
-                }
-                if (typeof img == 'string' && !isImage) {
-                    var imgInstance_1 = new Image();
-                    imgInstance_1.onload = function () {
-                        _this.painter.drawImage(imgInstance_1, x, y, w, h);
-                        resolve({});
-                    };
-                    imgInstance_1.src = img;
-                }
-                else {
-                    _this.painter.drawImage(img, x, y, w, h);
-                    resolve({});
-                }
-            });
-        };
-        Painter.prototype.install = function (methods) {
-            var _this = this;
-            var _loop_1 = function (key) {
-                if (key in this_1) {
-                    throw new Error("VISLite Canvas:Method already exists and cannot be overwritten.");
-                }
-                else {
-                    this_1[key] = function () {
-                        var args = [];
-                        for (var _i = 0; _i < arguments.length; _i++) {
-                            args[_i] = arguments[_i];
-                        }
-                        var value = methods[key].apply(_this, args);
-                        if (value != void 0)
-                            return value;
-                        return _this;
-                    };
-                }
-            };
-            var this_1 = this;
-            for (var key in methods) {
-                _loop_1(key);
-            }
-            return this;
-        };
-        return Painter;
+    var Painter = (function () {
+        function Painter(canvas, opts, region, isPainter, scaleSize) {
+            if (opts === void 0) { opts = {}; }
+            if (isPainter === void 0) { isPainter = false; }
+            this.__region = null;
+            this.__onlyRegion = false;
+            this.__onlyView = false;
+            this.__specialConfig = defaultFactory("special");
+            this.__initConfig = defaultFactory("init");
+            this.painter = canvas.getContext("2d", opts);
+            this.__region = region;
+            this.__isPainter = isPainter;
+            this.painter.textBaseline = 'middle';
+            this.painter.textAlign = 'left';
+        }
+        Painter.prototype.useConfig = function (key, value) {
+            if (this.__region && !this.__onlyView) {
+                if (['fillStyle', 'strokeStyle', 'shadowBlur', 'shadowColor'].indexOf(key) < 0) {
+                    this.__region.useConfig(key, value);
+                }
+            }
+            if (this.__isPainter && this.__onlyRegion)
+                return this;
+            if (key == 'lineDash') {
+                if (this.painter.setLineDash)
+                    this.painter.setLineDash(value);
+            }
+            else if (key in this.__specialConfig) {
+                if (key == 'fontSize') {
+                    value = Math.round(value);
+                }
+                this.__specialConfig[key] = value;
+            }
+            else if (key in this.__initConfig) {
+                this.painter[key] = value;
+            }
+            else {
+                throw new Error('Illegal configuration item of painter : ' + key + " !");
+            }
+            return this;
+        };
+        Painter.prototype.fillText = function (text, x, y, deg) {
+            if (deg === void 0) { deg = 0; }
+            if (this.__region && !this.__onlyView)
+                this.__region.fillText(text, x, y, deg);
+            if (this.__isPainter && this.__onlyRegion)
+                return this;
+            this.painter.save();
+            initText(this.painter, this.__specialConfig, x, y, deg).fillText(text, 0, 0);
+            this.painter.restore();
+            return this;
+        };
+        Painter.prototype.strokeText = function (text, x, y, deg) {
+            if (deg === void 0) { deg = 0; }
+            if (this.__region && !this.__onlyView)
+                this.__region.strokeText(text, x, y, deg);
+            if (this.__isPainter && this.__onlyRegion)
+                return this;
+            this.painter.save();
+            initText(this.painter, this.__specialConfig, x, y, deg).strokeText(text, 0, 0);
+            this.painter.restore();
+            return this;
+        };
+        Painter.prototype.fullText = function (text, x, y, deg) {
+            if (deg === void 0) { deg = 0; }
+            if (this.__region && !this.__onlyView)
+                this.__region.fullText(text, x, y, deg);
+            if (this.__isPainter && this.__onlyRegion)
+                return this;
+            this.painter.save();
+            initText(this.painter, this.__specialConfig, x, y, deg);
+            this.painter.fillText(text, 0, 0);
+            this.painter.strokeText(text, 0, 0);
+            this.painter.restore();
+            return this;
+        };
+        Painter.prototype.fillTexts = function (contents, x, y, width, lineHeight, deg) {
+            var _this = this;
+            if (lineHeight === void 0) { lineHeight = 1.2; }
+            if (deg === void 0) { deg = 0; }
+            var h = 0;
+            if (this.__region && !this.__onlyView)
+                h = this.__region.fillTexts(contents, x, y, width, lineHeight);
+            if (this.__isPainter && this.__onlyRegion)
+                return h;
+            this.painter.save();
+            initText(this.painter, this.__specialConfig, x, y, deg);
+            var height = texts(this.painter, contents, width, this.__specialConfig.fontSize * lineHeight, function (content, top) {
+                _this.painter.fillText(content, 0, top);
+            });
+            this.painter.restore();
+            return height;
+        };
+        Painter.prototype.strokeTexts = function (contents, x, y, width, lineHeight, deg) {
+            var _this = this;
+            if (lineHeight === void 0) { lineHeight = 1.2; }
+            if (deg === void 0) { deg = 0; }
+            var h = 0;
+            if (this.__region && !this.__onlyView)
+                h = this.__region.fillTexts(contents, x, y, width, lineHeight);
+            if (this.__isPainter && this.__onlyRegion)
+                return h;
+            this.painter.save();
+            initText(this.painter, this.__specialConfig, x, y, deg);
+            var height = texts(this.painter, contents, width, this.__specialConfig.fontSize * lineHeight, function (content, top) {
+                _this.painter.strokeText(content, 0, top);
+            });
+            this.painter.restore();
+            return height;
+        };
+        Painter.prototype.fullTexts = function (contents, x, y, width, lineHeight, deg) {
+            var _this = this;
+            if (lineHeight === void 0) { lineHeight = 1.2; }
+            if (deg === void 0) { deg = 0; }
+            var h = 0;
+            if (this.__region && !this.__onlyView)
+                h = this.__region.fillTexts(contents, x, y, width, lineHeight);
+            if (this.__isPainter && this.__onlyRegion)
+                return h;
+            this.painter.save();
+            initText(this.painter, this.__specialConfig, x, y, deg);
+            var height = texts(this.painter, contents, width, this.__specialConfig.fontSize * lineHeight, function (content, top) {
+                _this.painter.fillText(content, 0, top);
+                _this.painter.strokeText(content, 0, top);
+            });
+            this.painter.restore();
+            return height;
+        };
+        Painter.prototype.beginPath = function () {
+            if (this.__region && !this.__onlyView)
+                this.__region.beginPath();
+            if (this.__isPainter && this.__onlyRegion)
+                return this;
+            this.painter.beginPath();
+            return this;
+        };
+        Painter.prototype.closePath = function () {
+            if (this.__region && !this.__onlyView)
+                this.__region.closePath();
+            if (this.__isPainter && this.__onlyRegion)
+                return this;
+            this.painter.closePath();
+            return this;
+        };
+        Painter.prototype.moveTo = function (x, y) {
+            if (this.__region && !this.__onlyView)
+                this.__region.moveTo(x, y);
+            if (this.__isPainter && this.__onlyRegion)
+                return this;
+            this.painter.moveTo(Math.round(x) + 0.5, Math.round(y) + 0.5);
+            return this;
+        };
+        Painter.prototype.lineTo = function (x, y) {
+            if (this.__region && !this.__onlyView)
+                this.__region.lineTo(x, y);
+            if (this.__isPainter && this.__onlyRegion)
+                return this;
+            this.painter.lineTo(Math.round(x) + 0.5, Math.round(y) + 0.5);
+            return this;
+        };
+        Painter.prototype.arc = function (x, y, r, beginDeg, deg) {
+            if (this.__region && !this.__onlyView)
+                this.__region.arc(x, y, r, beginDeg, deg);
+            if (this.__isPainter && this.__onlyRegion)
+                return this;
+            this.painter.arc(x, y, r, beginDeg, beginDeg + deg, deg < 0);
+            return this;
+        };
+        Painter.prototype.fill = function () {
+            if (this.__region && !this.__onlyView)
+                this.__region.fill();
+            if (this.__isPainter && this.__onlyRegion)
+                return this;
+            this.painter.fill();
+            return this;
+        };
+        Painter.prototype.stroke = function () {
+            if (this.__region && !this.__onlyView)
+                this.__region.stroke();
+            if (this.__isPainter && this.__onlyRegion)
+                return this;
+            this.painter.stroke();
+            return this;
+        };
+        Painter.prototype.full = function () {
+            if (this.__region && !this.__onlyView)
+                this.__region.full();
+            if (this.__isPainter && this.__onlyRegion)
+                return this;
+            this.painter.fill();
+            this.painter.stroke();
+            return this;
+        };
+        Painter.prototype.save = function () {
+            if (this.__region && !this.__onlyView)
+                this.__region.save();
+            if (this.__isPainter && this.__onlyRegion)
+                return this;
+            this.painter.save();
+            return this;
+        };
+        Painter.prototype.restore = function () {
+            if (this.__region && !this.__onlyView)
+                this.__region.restore();
+            if (this.__isPainter && this.__onlyRegion)
+                return this;
+            this.painter.restore();
+            return this;
+        };
+        Painter.prototype.clip = function () {
+            if (this.__region && !this.__onlyView)
+                this.__region.clip();
+            if (this.__isPainter && this.__onlyRegion)
+                return this;
+            this.painter.clip();
+            return this;
+        };
+        Painter.prototype.quadraticCurveTo = function (cpx, cpy, x, y) {
+            if (this.__region && !this.__onlyView)
+                this.__region.quadraticCurveTo(cpx, cpy, x, y);
+            if (this.__isPainter && this.__onlyRegion)
+                return this;
+            this.painter.quadraticCurveTo(cpx, cpy, x, y);
+            return this;
+        };
+        Painter.prototype.bezierCurveTo = function (cp1x, cp1y, cp2x, cp2y, x, y) {
+            if (this.__region && !this.__onlyView)
+                this.__region.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y);
+            if (this.__isPainter && this.__onlyRegion)
+                return this;
+            this.painter.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y);
+            return this;
+        };
+        Painter.prototype.clearRect = function (x, y, w, h) {
+            if (this.__region && !this.__onlyView)
+                this.__region.clearRect(x, y, w, h);
+            if (this.__isPainter && this.__onlyRegion)
+                return this;
+            this.painter.clearRect(x, y, w, h);
+            return this;
+        };
+        Painter.prototype.clearCircle = function (cx, cy, r) {
+            if (this.__region && !this.__onlyView)
+                this.__region.clearCircle(cx, cy, r);
+            if (this.__isPainter && this.__onlyRegion)
+                return this;
+            this.painter.beginPath();
+            this.painter.globalCompositeOperation = "destination-out";
+            this.painter.arc(cx, cy, r, 0, Math.PI * 2);
+            this.painter.fill();
+            this.painter.globalCompositeOperation = "source-over";
+            this.painter.closePath();
+            return this;
+        };
+        Painter.prototype.fillArc = function (cx, cy, r1, r2, beginDeg, deg) {
+            if (this.__region && !this.__onlyView)
+                this.__region.fillArc(cx, cy, r1, r2, beginDeg, deg);
+            if (this.__isPainter && this.__onlyRegion)
+                return this;
+            initArc(this.painter, this.__specialConfig, cx, cy, r1, r2, beginDeg, deg).fill();
+            return this;
+        };
+        Painter.prototype.strokeArc = function (cx, cy, r1, r2, beginDeg, deg) {
+            if (this.__region && !this.__onlyView)
+                this.__region.strokeArc(cx, cy, r1, r2, beginDeg, deg);
+            if (this.__isPainter && this.__onlyRegion)
+                return this;
+            initArc(this.painter, this.__specialConfig, cx, cy, r1, r2, beginDeg, deg).stroke();
+            return this;
+        };
+        Painter.prototype.fullArc = function (cx, cy, r1, r2, beginDeg, deg) {
+            if (this.__region && !this.__onlyView)
+                this.__region.fullArc(cx, cy, r1, r2, beginDeg, deg);
+            if (this.__isPainter && this.__onlyRegion)
+                return this;
+            initArc(this.painter, this.__specialConfig, cx, cy, r1, r2, beginDeg, deg);
+            this.painter.fill();
+            this.painter.stroke();
+            return this;
+        };
+        Painter.prototype.fillCircle = function (cx, cy, r) {
+            if (this.__region && !this.__onlyView)
+                this.__region.fillCircle(cx, cy, r);
+            if (this.__isPainter && this.__onlyRegion)
+                return this;
+            initCircle(this.painter, cx, cy, r).fill();
+            return this;
+        };
+        Painter.prototype.strokeCircle = function (cx, cy, r) {
+            if (this.__region && !this.__onlyView)
+                this.__region.strokeCircle(cx, cy, r);
+            if (this.__isPainter && this.__onlyRegion)
+                return this;
+            initCircle(this.painter, cx, cy, r).stroke();
+            return this;
+        };
+        Painter.prototype.fullCircle = function (cx, cy, r) {
+            if (this.__region && !this.__onlyView)
+                this.__region.fullCircle(cx, cy, r);
+            if (this.__isPainter && this.__onlyRegion)
+                return this;
+            initCircle(this.painter, cx, cy, r);
+            this.painter.fill();
+            this.painter.stroke();
+            return this;
+        };
+        Painter.prototype.fillRect = function (x, y, width, height) {
+            if (this.__region && !this.__onlyView)
+                this.__region.fillRect(x, y, width, height);
+            if (this.__isPainter && this.__onlyRegion)
+                return this;
+            initRect(this.painter, this.__specialConfig, x, y, width, height).fill();
+            return this;
+        };
+        Painter.prototype.strokeRect = function (x, y, width, height) {
+            if (this.__region && !this.__onlyView)
+                this.__region.strokeRect(x, y, width, height);
+            if (this.__isPainter && this.__onlyRegion)
+                return this;
+            initRect(this.painter, this.__specialConfig, x, y, width, height).stroke();
+            return this;
+        };
+        Painter.prototype.fullRect = function (x, y, width, height) {
+            if (this.__region && !this.__onlyView)
+                this.__region.fullRect(x, y, width, height);
+            if (this.__isPainter && this.__onlyRegion)
+                return this;
+            initRect(this.painter, this.__specialConfig, x, y, width, height);
+            this.painter.fill();
+            this.painter.stroke();
+            return this;
+        };
+        Painter.prototype.draw = function () {
+            return Promise.resolve();
+        };
+        Painter.prototype.drawImage = function (img, x, y, w, h, isImage) {
+            var _this = this;
+            if (isImage === void 0) { isImage = false; }
+            return new Promise(function (resolve) {
+                if (_this.__region && !_this.__onlyView) {
+                    _this.__region.fillRect(x, y, w, h);
+                }
+                if (_this.__isPainter && _this.__onlyRegion) {
+                    resolve({});
+                    return;
+                }
+                if (typeof img == 'string' && !isImage) {
+                    var imgInstance_1 = new Image();
+                    imgInstance_1.onload = function () {
+                        _this.painter.drawImage(imgInstance_1, x, y, w, h);
+                        resolve({});
+                    };
+                    imgInstance_1.src = img;
+                }
+                else {
+                    _this.painter.drawImage(img, x, y, w, h);
+                    resolve({});
+                }
+            });
+        };
+        Painter.prototype.install = function (methods) {
+            var _this = this;
+            var _loop_1 = function (key) {
+                if (key in this_1) {
+                    throw new Error("VISLite Canvas:Method already exists and cannot be overwritten.");
+                }
+                else {
+                    this_1[key] = function () {
+                        var args = [];
+                        for (var _i = 0; _i < arguments.length; _i++) {
+                            args[_i] = arguments[_i];
+                        }
+                        var value = methods[key].apply(_this, args);
+                        if (value != void 0)
+                            return value;
+                        return _this;
+                    };
+                }
+            };
+            var this_1 = this;
+            for (var key in methods) {
+                _loop_1(key);
+            }
+            return this;
+        };
+        return Painter;
     }());
 
-    function assemble (begin, end, step, count) {
-        var val = [];
-        for (var index = 0; index < count; index++)
-            val[index] = begin;
-        return function () {
-            for (var i = 0; i < count; i++) {
-                if (val[i] + step < end) {
-                    val[i] = +(val[i] + step).toFixed(7);
-                    break;
-                }
-                else if (i < count - 1) {
-                    val[i] = begin;
-                }
-            }
-            return val;
-        };
+    function assemble (begin, end, step, count) {
+        var val = [];
+        for (var index = 0; index < count; index++)
+            val[index] = begin;
+        return function () {
+            for (var i = 0; i < count; i++) {
+                if (val[i] + step < end) {
+                    val[i] = +(val[i] + step).toFixed(7);
+                    break;
+                }
+                else if (i < count - 1) {
+                    val[i] = begin;
+                }
+            }
+            return val;
+        };
     }
 
-    var enhanceGradient = function (gradient, calcStop) {
-        var enhanceGradient = {
-            "value": function () {
-                return gradient;
-            },
-            "setColor": function (stop, color) {
-                gradient.addColorStop(calcStop ? calcStop(stop) : stop, color);
-                return enhanceGradient;
-            }
-        };
-        return enhanceGradient;
-    };
-    var linearGradient = function (painter, x0, y0, x1, y1) {
-        var gradient = painter.createLinearGradient(x0, y0, x1, y1);
-        return enhanceGradient(gradient);
-    };
-    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 enhanceGradient = function (gradient, calcStop) {
+        var enhanceGradient = {
+            "value": function () {
+                return gradient;
+            },
+            "setColor": function (stop, color) {
+                gradient.addColorStop(calcStop ? calcStop(stop) : stop, color);
+                return enhanceGradient;
+            }
+        };
+        return enhanceGradient;
+    };
+    var linearGradient = function (painter, x0, y0, x1, y1) {
+        var gradient = painter.createLinearGradient(x0, y0, x1, y1);
+        return enhanceGradient(gradient);
+    };
+    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;
+        } : void 0);
     };
 
-    var Canvas$1 = (function (_super) {
-        __extends(Canvas, _super);
-        function Canvas(ViewCanvas, RegionCanvas, opts, scaleSize) {
-            if (opts === void 0) { opts = {}; }
-            if (scaleSize === void 0) { scaleSize = 1; }
-            var _this = _super.call(this, ViewCanvas, opts, RegionCanvas ? new Painter(RegionCanvas, {
-                willReadFrequently: true,
-            }) : undefined, true, scaleSize) || this;
-            _this.name = "Canvas";
-            _this.__regionList = {};
-            _this.__regionAssemble = assemble(0, 255, 10, 3);
-            _this.__scaleSize = scaleSize;
-            _this.setRegion("");
-            return _this;
-        }
-        Canvas.prototype.config = function (configs) {
-            for (var key in configs) {
-                this.useConfig(key, configs[key]);
-            }
-            return this;
-        };
-        Canvas.prototype.reset = function () {
-            this.config(defaultFactory());
-            return this;
-        };
-        Canvas.prototype.onlyRegion = function (flag) {
-            this.__onlyRegion = flag;
-            return this;
-        };
-        Canvas.prototype.onlyView = function (flag) {
-            this.__onlyView = flag;
-            return this;
-        };
-        Canvas.prototype.setRegion = function (regionName) {
-            if (this.__region) {
-                if (regionName) {
-                    if (this.__regionList[regionName] == void 0) {
-                        var tempColor = this.__regionAssemble();
-                        this.__regionList[regionName] =
-                            "rgb(" + tempColor[0] + "," + tempColor[1] + "," + tempColor[2] + ")";
-                    }
-                    this.__region.useConfig("fillStyle", this.__regionList[regionName]) &&
-                        this.__region.useConfig("strokeStyle", this.__regionList[regionName]);
-                }
-                else {
-                    this.__region.useConfig("fillStyle", "#000000") &&
-                        this.__region.useConfig("strokeStyle", "#000000");
-                }
-            }
-            return this;
-        };
-        Canvas.prototype.getRegion = function (x, y) {
-            var _this = this;
-            return new Promise(function (resolve) {
-                var imgData = _this.__region ? _this.__region.painter.getImageData(x - 0.5, y - 0.5, 1, 1) : {
-                    data: [0, 0, 0, 0]
-                };
-                var currentRGBA = imgData.data;
-                var doit = function () {
-                    if (_this.__region) {
-                        for (var key in _this.__regionList) {
-                            if ("rgb(" +
-                                currentRGBA[0] +
-                                "," +
-                                currentRGBA[1] +
-                                "," +
-                                currentRGBA[2] +
-                                ")" ==
-                                _this.__regionList[key]) {
-                                resolve(key);
-                                break;
-                            }
-                        }
-                    }
-                    resolve("");
-                };
-                if (currentRGBA) {
-                    doit();
-                }
-                else {
-                    imgData.then(function (data) {
-                        currentRGBA = data;
-                        doit();
-                    });
-                }
-            });
-        };
-        Canvas.prototype.textWidth = function (text) {
-            this.painter.save();
-            initText(this.painter, this.__specialConfig, 0, 0, 0);
-            var width = this.painter.measureText(text + "").width;
-            this.painter.restore();
-            return width;
-        };
-        Canvas.prototype.getContext = function (isRegion) {
-            if (isRegion === void 0) { isRegion = false; }
-            return isRegion ? (this.__region ? this.__region.painter : null) : this.painter;
-        };
-        Canvas.prototype.getInfo = function () {
-            return {
-                width: this.painter.canvas.width / this.__scaleSize,
-                height: this.painter.canvas.height / this.__scaleSize
-            };
-        };
-        Canvas.prototype.createLinearGradient = function (x0, y0, x1, y1) {
-            return linearGradient(this.painter, x0, y0, x1, y1);
-        };
-        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;
-            var currentRGBA = this.painter.getImageData(x - 0.5, y - 0.5, 1, 1).data;
-            return ("rgba(" +
-                currentRGBA[0] +
-                "," +
-                currentRGBA[1] +
-                "," +
-                currentRGBA[2] +
-                "," +
-                currentRGBA[3] +
-                ")");
-        };
-        return Canvas;
+    var Canvas$1 = (function (_super) {
+        __extends(Canvas, _super);
+        function Canvas(ViewCanvas, RegionCanvas, opts, scaleSize) {
+            if (opts === void 0) { opts = {}; }
+            if (scaleSize === void 0) { scaleSize = 1; }
+            var _this = _super.call(this, ViewCanvas, opts, RegionCanvas ? new Painter(RegionCanvas, {
+                willReadFrequently: true,
+            }) : undefined, true, scaleSize) || this;
+            _this.name = "Canvas";
+            _this.__regionList = {};
+            _this.__regionAssemble = assemble(0, 255, 10, 3);
+            _this.__scaleSize = scaleSize;
+            _this.setRegion("");
+            return _this;
+        }
+        Canvas.prototype.config = function (configs) {
+            for (var key in configs) {
+                this.useConfig(key, configs[key]);
+            }
+            return this;
+        };
+        Canvas.prototype.reset = function () {
+            this.config(defaultFactory());
+            return this;
+        };
+        Canvas.prototype.onlyRegion = function (flag) {
+            this.__onlyRegion = flag;
+            return this;
+        };
+        Canvas.prototype.onlyView = function (flag) {
+            this.__onlyView = flag;
+            return this;
+        };
+        Canvas.prototype.setRegion = function (regionName) {
+            if (this.__region) {
+                if (regionName) {
+                    if (this.__regionList[regionName] == void 0) {
+                        var tempColor = this.__regionAssemble();
+                        this.__regionList[regionName] =
+                            "rgb(" + tempColor[0] + "," + tempColor[1] + "," + tempColor[2] + ")";
+                    }
+                    this.__region.useConfig("fillStyle", this.__regionList[regionName]) &&
+                        this.__region.useConfig("strokeStyle", this.__regionList[regionName]);
+                }
+                else {
+                    this.__region.useConfig("fillStyle", "#000000") &&
+                        this.__region.useConfig("strokeStyle", "#000000");
+                }
+            }
+            return this;
+        };
+        Canvas.prototype.getRegion = function (x, y) {
+            var _this = this;
+            return new Promise(function (resolve) {
+                var imgData = _this.__region ? _this.__region.painter.getImageData(x - 0.5, y - 0.5, 1, 1) : {
+                    data: [0, 0, 0, 0]
+                };
+                var currentRGBA = imgData.data;
+                var doit = function () {
+                    if (_this.__region) {
+                        for (var key in _this.__regionList) {
+                            if ("rgb(" +
+                                currentRGBA[0] +
+                                "," +
+                                currentRGBA[1] +
+                                "," +
+                                currentRGBA[2] +
+                                ")" ==
+                                _this.__regionList[key]) {
+                                resolve(key);
+                                break;
+                            }
+                        }
+                    }
+                    resolve("");
+                };
+                if (currentRGBA) {
+                    doit();
+                }
+                else {
+                    imgData.then(function (data) {
+                        currentRGBA = data;
+                        doit();
+                    });
+                }
+            });
+        };
+        Canvas.prototype.textWidth = function (text) {
+            this.painter.save();
+            initText(this.painter, this.__specialConfig, 0, 0, 0);
+            var width = this.painter.measureText(text + "").width;
+            this.painter.restore();
+            return width;
+        };
+        Canvas.prototype.getContext = function (isRegion) {
+            if (isRegion === void 0) { isRegion = false; }
+            return isRegion ? (this.__region ? this.__region.painter : null) : this.painter;
+        };
+        Canvas.prototype.getInfo = function () {
+            return {
+                width: this.painter.canvas.width / this.__scaleSize,
+                height: this.painter.canvas.height / this.__scaleSize
+            };
+        };
+        Canvas.prototype.createLinearGradient = function (x0, y0, x1, y1) {
+            return linearGradient(this.painter, x0, y0, x1, y1);
+        };
+        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;
+            var currentRGBA = this.painter.getImageData(x - 0.5, y - 0.5, 1, 1).data;
+            return ("rgba(" +
+                currentRGBA[0] +
+                "," +
+                currentRGBA[1] +
+                "," +
+                currentRGBA[2] +
+                "," +
+                currentRGBA[3] +
+                ")");
+        };
+        return Canvas;
     }(Painter));
 
-    var toString = Object.prototype.toString;
-    function getType(value) {
-        if (value == null) {
-            return value === undefined ? '[object Undefined]' : '[object Null]';
-        }
-        return toString.call(value);
-    }
-    function isPlainObject(value) {
-        if (value === null || typeof value !== 'object' || getType(value) != '[object Object]') {
-            return false;
-        }
-        if (Object.getPrototypeOf(value) === null) {
-            return true;
-        }
-        var proto = value;
-        while (Object.getPrototypeOf(proto) !== null) {
-            proto = Object.getPrototypeOf(proto);
-        }
-        return Object.getPrototypeOf(value) === proto;
+    var toString = Object.prototype.toString;
+    function getType(value) {
+        if (value == null) {
+            return value === undefined ? '[object Undefined]' : '[object Null]';
+        }
+        return toString.call(value);
+    }
+    function isPlainObject(value) {
+        if (value === null || typeof value !== 'object' || getType(value) != '[object Object]') {
+            return false;
+        }
+        if (Object.getPrototypeOf(value) === null) {
+            return true;
+        }
+        var proto = value;
+        while (Object.getPrototypeOf(proto) !== null) {
+            proto = Object.getPrototypeOf(proto);
+        }
+        return Object.getPrototypeOf(value) === proto;
     }
 
-    function initOption(setOption, defaultOption) {
-        for (var key in setOption) {
-            defaultOption[key] = setOption[key];
-        }
-        return defaultOption;
-    }
-    function mergeOption(oldOption, newOption) {
-        (function doit(oldOption, newOption) {
-            for (var key in newOption) {
-                var value = newOption[key];
-                if (isPlainObject(value)) {
-                    if (!oldOption[key])
-                        oldOption[key] = {};
-                    doit(oldOption[key], newOption[key]);
-                }
-                else {
-                    oldOption[key] = value;
-                }
-            }
-        })(oldOption, newOption);
+    function initOption(setOption, defaultOption) {
+        for (var key in setOption) {
+            defaultOption[key] = setOption[key];
+        }
+        return defaultOption;
+    }
+    function mergeOption(oldOption, newOption) {
+        (function doit(oldOption, newOption) {
+            for (var key in newOption) {
+                var value = newOption[key];
+                if (isPlainObject(value)) {
+                    if (!oldOption[key])
+                        oldOption[key] = {};
+                    doit(oldOption[key], newOption[key]);
+                }
+                else {
+                    oldOption[key] = value;
+                }
+            }
+        })(oldOption, newOption);
     }
 
-    var Canvas = (function (_super) {
-        __extends(Canvas, _super);
-        function Canvas(el, option, width, height) {
-            if (option === void 0) { option = {}; }
-            if (width === void 0) { width = 0; }
-            if (height === void 0) { height = 0; }
-            var _this = this;
-            if (!el) {
-                throw new Error("VISLite Canvas:The mount point requires an HTMLElement type but encountered null.");
-            }
-            option = initOption(option, {
-                region: true,
-                willReadFrequently: false
-            });
-            width = width || el.clientWidth;
-            height = height || el.clientHeight;
-            var ViewCanvas, RegionCanvas = null;
-            var _el = el;
-            if (_el._vislite_canvas_) {
-                ViewCanvas = _el._vislite_canvas_[0];
-                RegionCanvas = _el._vislite_canvas_[1];
-            }
-            else {
-                ViewCanvas = document.createElement('canvas');
-                el.appendChild(ViewCanvas);
-                if (option.region) {
-                    RegionCanvas = document.createElement('canvas');
-                }
-                _el._vislite_canvas_ = [ViewCanvas, RegionCanvas];
-                el.setAttribute('vislite', 'Canvas');
-            }
-            var canvasArray = [RegionCanvas, ViewCanvas];
-            for (var index = 0; index < canvasArray.length; index++) {
-                var canvas = canvasArray[index];
-                if (canvas) {
-                    canvas.style.width = width + "px";
-                    canvas.setAttribute('width', (index * width + width) + "");
-                    canvas.style.height = height + "px";
-                    canvas.setAttribute('height', (index * height + height) + "");
-                }
-            }
-            _this = _super.call(this, ViewCanvas, RegionCanvas, {
-                willReadFrequently: option.willReadFrequently,
-            }, 2) || this;
-            _this.__canvas = ViewCanvas;
-            _this.__el = el;
-            _this.painter.scale(2, 2);
-            return _this;
-        }
-        Canvas.prototype.toDataURL = function () {
-            var _this = this;
-            return new Promise(function (resolve) {
-                resolve(_this.__canvas.toDataURL());
-            });
-        };
-        Canvas.prototype.bind = function (eventName, callback) {
-            var _this = this;
-            this.__el.addEventListener(eventName, function (event) {
-                _this.getRegion(event.offsetX, event.offsetY).then(function (regionName) {
-                    callback(regionName, event.offsetX, event.offsetY);
-                });
-            });
-            return this;
-        };
-        return Canvas;
+    var Canvas = (function (_super) {
+        __extends(Canvas, _super);
+        function Canvas(el, option, width, height) {
+            if (option === void 0) { option = {}; }
+            if (width === void 0) { width = 0; }
+            if (height === void 0) { height = 0; }
+            var _this = this;
+            if (!el) {
+                throw new Error("VISLite Canvas:The mount point requires an HTMLElement type but encountered null.");
+            }
+            option = initOption(option, {
+                region: true,
+                willReadFrequently: false
+            });
+            width = width || el.clientWidth;
+            height = height || el.clientHeight;
+            var ViewCanvas, RegionCanvas = null;
+            var _el = el;
+            if (_el._vislite_canvas_) {
+                ViewCanvas = _el._vislite_canvas_[0];
+                RegionCanvas = _el._vislite_canvas_[1];
+            }
+            else {
+                ViewCanvas = document.createElement('canvas');
+                el.appendChild(ViewCanvas);
+                if (option.region) {
+                    RegionCanvas = document.createElement('canvas');
+                }
+                _el._vislite_canvas_ = [ViewCanvas, RegionCanvas];
+                el.setAttribute('vislite', 'Canvas');
+            }
+            var canvasArray = [RegionCanvas, ViewCanvas];
+            for (var index = 0; index < canvasArray.length; index++) {
+                var canvas = canvasArray[index];
+                if (canvas) {
+                    canvas.style.width = width + "px";
+                    canvas.setAttribute('width', (index * width + width) + "");
+                    canvas.style.height = height + "px";
+                    canvas.setAttribute('height', (index * height + height) + "");
+                }
+            }
+            _this = _super.call(this, ViewCanvas, RegionCanvas, {
+                willReadFrequently: option.willReadFrequently,
+            }, 2) || this;
+            _this.__canvas = ViewCanvas;
+            _this.__el = el;
+            _this.painter.scale(2, 2);
+            return _this;
+        }
+        Canvas.prototype.toDataURL = function () {
+            var _this = this;
+            return new Promise(function (resolve) {
+                resolve(_this.__canvas.toDataURL());
+            });
+        };
+        Canvas.prototype.bind = function (eventName, callback) {
+            var _this = this;
+            this.__el.addEventListener(eventName, function (event) {
+                _this.getRegion(event.offsetX, event.offsetY).then(function (regionName) {
+                    callback(regionName, event.offsetX, event.offsetY);
+                });
+            });
+            return this;
+        };
+        return Canvas;
     }(Canvas$1));
 
-    function getWebGLContext$1 (canvas, scale, opts, mode) {
-        if (opts === void 0) { opts = {}; }
-        if (mode === void 0) { mode = "scaleToFill"; }
-        var names = ["experimental-webgl", "webkit-3d", "moz-webgl"];
-        var painter = canvas.getContext("webgl", opts);
-        for (var i = 0; i < names.length; i++) {
-            try {
-                painter = canvas.getContext(names[i], opts);
-            }
-            catch (e) { }
-            if (painter)
-                break;
-        }
-        if (!painter)
-            throw new Error('Non canvas or browser does not support webgl.');
-        var width = painter.canvas.width, height = painter.canvas.height;
-        var scaleX = scale, scaleY = scale;
-        if (mode == "aspectFit") {
-            if (width > height) {
-                scaleX *= height / width;
-            }
-            else if (height > width) {
-                scaleY *= width / height;
-            }
-        }
-        else if (mode == "aspectFill") {
-            if (width > height) {
-                scaleY *= width / height;
-            }
-            else if (height > width) {
-                scaleX *= height / width;
-            }
-        }
-        var viewWidth = width * scaleX;
-        var viewHeight = height * scaleY;
-        painter.viewport((width - viewWidth) * 0.5, (height - viewHeight) * 0.5, viewWidth, viewHeight);
-        painter.depthFunc(painter.LEQUAL);
-        painter.enable(painter.DEPTH_TEST);
-        return painter;
+    function getWebGLContext$1 (canvas, scale, opts, mode) {
+        if (opts === void 0) { opts = {}; }
+        if (mode === void 0) { mode = "scaleToFill"; }
+        var names = ["experimental-webgl", "webkit-3d", "moz-webgl"];
+        var painter = canvas.getContext("webgl", opts);
+        for (var i = 0; i < names.length; i++) {
+            try {
+                painter = canvas.getContext(names[i], opts);
+            }
+            catch (e) { }
+            if (painter)
+                break;
+        }
+        if (!painter)
+            throw new Error('Non canvas or browser does not support webgl.');
+        var width = painter.canvas.width, height = painter.canvas.height;
+        var scaleX = scale, scaleY = scale;
+        if (mode == "aspectFit") {
+            if (width > height) {
+                scaleX *= height / width;
+            }
+            else if (height > width) {
+                scaleY *= width / height;
+            }
+        }
+        else if (mode == "aspectFill") {
+            if (width > height) {
+                scaleY *= width / height;
+            }
+            else if (height > width) {
+                scaleX *= height / width;
+            }
+        }
+        var viewWidth = width * scaleX;
+        var viewHeight = height * scaleY;
+        painter.viewport((width - viewWidth) * 0.5, (height - viewHeight) * 0.5, viewWidth, viewHeight);
+        painter.depthFunc(painter.LEQUAL);
+        painter.enable(painter.DEPTH_TEST);
+        return painter;
     }
 
-    var getWebGLContext = (function (el, scale, mode) {
-        if (scale === void 0) { scale = 1; }
-        if (!el) {
-            throw new Error("VISLite getWebGLContext:The mount point requires an HTMLElement type but encountered null.");
-        }
-        var width = el.clientWidth, height = el.clientHeight;
-        var ViewCanvas;
-        var _el = el;
-        if (_el._vislite_canvas_) {
-            ViewCanvas = _el._vislite_canvas_;
-        }
-        else {
-            ViewCanvas = document.createElement('canvas');
-            el.appendChild(ViewCanvas);
-            _el._vislite_canvas_ = ViewCanvas;
-            el.setAttribute('vislite', 'WebGL');
-        }
-        ViewCanvas.style.width = width + "px";
-        ViewCanvas.setAttribute('width', width + "");
-        ViewCanvas.style.height = height + "px";
-        ViewCanvas.setAttribute('height', height + "");
-        return getWebGLContext$1(ViewCanvas, scale, {}, mode);
+    var getWebGLContext = (function (el, scale, mode) {
+        if (scale === void 0) { scale = 1; }
+        if (!el) {
+            throw new Error("VISLite getWebGLContext:The mount point requires an HTMLElement type but encountered null.");
+        }
+        var width = el.clientWidth, height = el.clientHeight;
+        var ViewCanvas;
+        var _el = el;
+        if (_el._vislite_canvas_) {
+            ViewCanvas = _el._vislite_canvas_;
+        }
+        else {
+            ViewCanvas = document.createElement('canvas');
+            el.appendChild(ViewCanvas);
+            _el._vislite_canvas_ = ViewCanvas;
+            el.setAttribute('vislite', 'WebGL');
+        }
+        ViewCanvas.style.width = width + "px";
+        ViewCanvas.setAttribute('width', width + "");
+        ViewCanvas.style.height = height + "px";
+        ViewCanvas.setAttribute('height', height + "");
+        return getWebGLContext$1(ViewCanvas, scale, {}, mode);
     });
 
-    var loadShader = function (painter, type, source) {
-        var shader = painter.createShader(type);
-        if (shader == null)
-            throw new Error('Unable to create shader!');
-        painter.shaderSource(shader, source);
-        painter.compileShader(shader);
-        if (!painter.getShaderParameter(shader, painter.COMPILE_STATUS))
-            throw new Error('Failed to compile shader:' + painter.getShaderInfoLog(shader));
-        return shader;
-    };
-    var useShader = function (painter, vshaderSource, fshaderSource) {
-        var vertexShader = loadShader(painter, painter.VERTEX_SHADER, vshaderSource);
-        var fragmentShader = loadShader(painter, painter.FRAGMENT_SHADER, fshaderSource);
-        var glProgram = painter.createProgram();
-        painter.attachShader(glProgram, vertexShader);
-        painter.attachShader(glProgram, fragmentShader);
-        painter.linkProgram(glProgram);
-        if (!painter.getProgramParameter(glProgram, painter.LINK_STATUS))
-            throw new Error('Failed to link program: ' + painter.getProgramInfoLog(glProgram));
-        return glProgram;
-    };
-    var ShaderObject = (function () {
-        function ShaderObject(painter) {
-            this.__painter = painter;
-        }
-        ShaderObject.prototype.use = function () {
-            this.__painter.useProgram(this.program);
-            return this;
-        };
-        ShaderObject.prototype.compile = function (vshaderSource, fshaderSource) {
-            this.program = useShader(this.__painter, vshaderSource, fshaderSource);
-            return this;
-        };
-        return ShaderObject;
+    var loadShader = function (painter, type, source) {
+        var shader = painter.createShader(type);
+        if (shader == null)
+            throw new Error('Unable to create shader!');
+        painter.shaderSource(shader, source);
+        painter.compileShader(shader);
+        if (!painter.getShaderParameter(shader, painter.COMPILE_STATUS))
+            throw new Error('Failed to compile shader:' + painter.getShaderInfoLog(shader));
+        return shader;
+    };
+    var useShader = function (painter, vshaderSource, fshaderSource) {
+        var vertexShader = loadShader(painter, painter.VERTEX_SHADER, vshaderSource);
+        var fragmentShader = loadShader(painter, painter.FRAGMENT_SHADER, fshaderSource);
+        var glProgram = painter.createProgram();
+        painter.attachShader(glProgram, vertexShader);
+        painter.attachShader(glProgram, fragmentShader);
+        painter.linkProgram(glProgram);
+        if (!painter.getProgramParameter(glProgram, painter.LINK_STATUS))
+            throw new Error('Failed to link program: ' + painter.getProgramInfoLog(glProgram));
+        return glProgram;
+    };
+    var ShaderObject = (function () {
+        function ShaderObject(painter) {
+            this.__painter = painter;
+        }
+        ShaderObject.prototype.use = function () {
+            this.__painter.useProgram(this.program);
+            return this;
+        };
+        ShaderObject.prototype.compile = function (vshaderSource, fshaderSource) {
+            this.program = useShader(this.__painter, vshaderSource, fshaderSource);
+            return this;
+        };
+        return ShaderObject;
     }());
 
-    var initTexture = function (painter, type, unit) {
-        var texture = painter.createTexture();
-        painter.activeTexture(painter['TEXTURE' + unit]);
-        painter.bindTexture(type, texture);
-        return texture;
-    };
-    var linkImage = function (painter, type, level, format, textureType, image) {
-        painter.texImage2D(type, level, format, format, textureType, image);
-    };
-    var linkCube = function (painter, type, level, format, textureType, images, width, height, texture) {
-        var types = [
-            painter.TEXTURE_CUBE_MAP_POSITIVE_X,
-            painter.TEXTURE_CUBE_MAP_NEGATIVE_X,
-            painter.TEXTURE_CUBE_MAP_POSITIVE_Y,
-            painter.TEXTURE_CUBE_MAP_NEGATIVE_Y,
-            painter.TEXTURE_CUBE_MAP_POSITIVE_Z,
-            painter.TEXTURE_CUBE_MAP_NEGATIVE_Z
-        ];
-        var target;
-        for (var i = 0; i < types.length; i++) {
-            if (images[i]) {
-                target = types[i];
-                painter.texImage2D(target, level, format, width, height, 0, format, textureType, null);
-                painter.bindTexture(type, texture);
-                painter.texImage2D(target, level, format, format, textureType, images[i]);
-            }
-        }
-        painter.generateMipmap(type);
-    };
-    var TextureObject = (function () {
-        function TextureObject(painter, type, unit) {
-            if (unit === void 0) { unit = 0; }
-            this.__painter = painter;
-            this.__type = {
-                "2d": painter.TEXTURE_2D,
-                "cube": painter.TEXTURE_CUBE_MAP
-            }[type];
-            this.__texture = initTexture(painter, this.__type, unit);
-            painter.texParameteri(this.__type, painter.TEXTURE_MIN_FILTER, painter.NEAREST);
-            painter.texParameteri(this.__type, painter.TEXTURE_MAG_FILTER, painter.NEAREST);
-            painter.texParameteri(this.__type, painter.TEXTURE_WRAP_S, painter.CLAMP_TO_EDGE);
-            painter.texParameteri(this.__type, painter.TEXTURE_WRAP_T, painter.CLAMP_TO_EDGE);
-        }
-        TextureObject.prototype.useImage = function (image) {
-            linkImage(this.__painter, this.__type, 0, this.__painter.RGBA, this.__painter.UNSIGNED_BYTE, image);
-            return this;
-        };
-        TextureObject.prototype.useCube = function (images, width, height) {
-            linkCube(this.__painter, this.__type, 0, this.__painter.RGBA, this.__painter.UNSIGNED_BYTE, images, width, height, this.__texture);
-            return this;
-        };
-        return TextureObject;
+    var initTexture = function (painter, type, unit) {
+        var texture = painter.createTexture();
+        painter.activeTexture(painter['TEXTURE' + unit]);
+        painter.bindTexture(type, texture);
+        return texture;
+    };
+    var linkImage = function (painter, type, level, format, textureType, image) {
+        painter.texImage2D(type, level, format, format, textureType, image);
+    };
+    var linkCube = function (painter, type, level, format, textureType, images, width, height, texture) {
+        var types = [
+            painter.TEXTURE_CUBE_MAP_POSITIVE_X,
+            painter.TEXTURE_CUBE_MAP_NEGATIVE_X,
+            painter.TEXTURE_CUBE_MAP_POSITIVE_Y,
+            painter.TEXTURE_CUBE_MAP_NEGATIVE_Y,
+            painter.TEXTURE_CUBE_MAP_POSITIVE_Z,
+            painter.TEXTURE_CUBE_MAP_NEGATIVE_Z
+        ];
+        var target;
+        for (var i = 0; i < types.length; i++) {
+            if (images[i]) {
+                target = types[i];
+                painter.texImage2D(target, level, format, width, height, 0, format, textureType, null);
+                painter.bindTexture(type, texture);
+                painter.texImage2D(target, level, format, format, textureType, images[i]);
+            }
+        }
+        painter.generateMipmap(type);
+    };
+    var TextureObject = (function () {
+        function TextureObject(painter, type, unit) {
+            if (unit === void 0) { unit = 0; }
+            this.__painter = painter;
+            this.__type = {
+                "2d": painter.TEXTURE_2D,
+                "cube": painter.TEXTURE_CUBE_MAP
+            }[type];
+            this.__texture = initTexture(painter, this.__type, unit);
+            painter.texParameteri(this.__type, painter.TEXTURE_MIN_FILTER, painter.NEAREST);
+            painter.texParameteri(this.__type, painter.TEXTURE_MAG_FILTER, painter.NEAREST);
+            painter.texParameteri(this.__type, painter.TEXTURE_WRAP_S, painter.CLAMP_TO_EDGE);
+            painter.texParameteri(this.__type, painter.TEXTURE_WRAP_T, painter.CLAMP_TO_EDGE);
+        }
+        TextureObject.prototype.useImage = function (image) {
+            linkImage(this.__painter, this.__type, 0, this.__painter.RGBA, this.__painter.UNSIGNED_BYTE, image);
+            return this;
+        };
+        TextureObject.prototype.useCube = function (images, width, height) {
+            linkCube(this.__painter, this.__type, 0, this.__painter.RGBA, this.__painter.UNSIGNED_BYTE, images, width, height, this.__texture);
+            return this;
+        };
+        return TextureObject;
     }());
 
-    var newBuffer = function (painter) {
-        return painter.createBuffer();
-    };
-    var writeBuffer = function (painter, data, isElement, usage) {
-        var TYPE = isElement ? painter.ELEMENT_ARRAY_BUFFER : painter.ARRAY_BUFFER;
-        painter.bufferData(TYPE, data, usage);
-    };
-    var useBuffer = function (painter, location, size, type, stride, offset, normalized) {
-        painter.vertexAttribPointer(location, size, type, normalized, stride, offset);
-        painter.enableVertexAttribArray(location);
-    };
-    var BufferObject = (function () {
-        function BufferObject(painter, isElement) {
-            if (isElement === void 0) { isElement = false; }
-            this.__painter = painter;
-            this.__isElement = isElement;
-            this.__buffer = newBuffer(painter);
-            this.__type = isElement ? painter.ELEMENT_ARRAY_BUFFER : painter.ARRAY_BUFFER;
-        }
-        BufferObject.prototype.use = function () {
-            this.__painter.bindBuffer(this.__type, this.__buffer);
-            return this;
-        };
-        BufferObject.prototype.write = function (data) {
-            writeBuffer(this.__painter, data, this.__isElement, this.__painter.STATIC_DRAW);
-            this.__fsize = data.BYTES_PER_ELEMENT;
-            return this;
-        };
-        BufferObject.prototype.divide = function (location, size, stride, offset) {
-            if (offset === void 0) { offset = 0; }
-            useBuffer(this.__painter, location, size, this.__painter.FLOAT, stride * this.__fsize, offset * this.__fsize, false);
-            return this;
-        };
-        return BufferObject;
+    var newBuffer = function (painter) {
+        return painter.createBuffer();
+    };
+    var writeBuffer = function (painter, data, isElement, usage) {
+        var TYPE = isElement ? painter.ELEMENT_ARRAY_BUFFER : painter.ARRAY_BUFFER;
+        painter.bufferData(TYPE, data, usage);
+    };
+    var useBuffer = function (painter, location, size, type, stride, offset, normalized) {
+        painter.vertexAttribPointer(location, size, type, normalized, stride, offset);
+        painter.enableVertexAttribArray(location);
+    };
+    var BufferObject = (function () {
+        function BufferObject(painter, isElement) {
+            if (isElement === void 0) { isElement = false; }
+            this.__painter = painter;
+            this.__isElement = isElement;
+            this.__buffer = newBuffer(painter);
+            this.__type = isElement ? painter.ELEMENT_ARRAY_BUFFER : painter.ARRAY_BUFFER;
+        }
+        BufferObject.prototype.use = function () {
+            this.__painter.bindBuffer(this.__type, this.__buffer);
+            return this;
+        };
+        BufferObject.prototype.write = function (data) {
+            writeBuffer(this.__painter, data, this.__isElement, this.__painter.STATIC_DRAW);
+            this.__fsize = data.BYTES_PER_ELEMENT;
+            return this;
+        };
+        BufferObject.prototype.divide = function (location, size, stride, offset) {
+            if (offset === void 0) { offset = 0; }
+            useBuffer(this.__painter, location, size, this.__painter.FLOAT, stride * this.__fsize, offset * this.__fsize, false);
+            return this;
+        };
+        return BufferObject;
     }());
 
-    var rotateX = function (deg, x, y, z) {
-        var cos = Math.cos(deg), sin = Math.sin(deg);
-        return [x, y * cos - z * sin, y * sin + z * cos];
-    };
-    var rotateY = function (deg, x, y, z) {
-        var cos = Math.cos(deg), sin = Math.sin(deg);
-        return [z * sin + x * cos, y, z * cos - x * sin];
-    };
-    var rotateZ = function (deg, x, y, z) {
-        var cos = Math.cos(deg), sin = Math.sin(deg);
-        return [x * cos - y * sin, x * sin + y * cos, z];
-    };
-    var Eoap = (function () {
-        function Eoap(scale, center) {
-            if (scale === void 0) { scale = 7; }
-            if (center === void 0) { center = [107, 36]; }
-            this.name = 'Eoap';
-            this.__scale = scale;
-            this.__center = center;
-        }
-        Eoap.prototype.use = function (λ, φ) {
-            var p = rotateY((360 - φ) / 180 * Math.PI, 100 * this.__scale, 0, 0);
-            p = rotateZ(λ / 180 * Math.PI, p[0], p[1], p[2]);
-            p = rotateZ((90 - this.__center[0]) / 180 * Math.PI, p[0], p[1], p[2]);
-            p = rotateX((90 - this.__center[1]) / 180 * Math.PI, p[0], p[1], p[2]);
-            return [
-                -p[0],
-                p[1],
-                p[2]
-            ];
-        };
-        return Eoap;
+    var rotateX = function (deg, x, y, z) {
+        var cos = Math.cos(deg), sin = Math.sin(deg);
+        return [x, y * cos - z * sin, y * sin + z * cos];
+    };
+    var rotateY = function (deg, x, y, z) {
+        var cos = Math.cos(deg), sin = Math.sin(deg);
+        return [z * sin + x * cos, y, z * cos - x * sin];
+    };
+    var rotateZ = function (deg, x, y, z) {
+        var cos = Math.cos(deg), sin = Math.sin(deg);
+        return [x * cos - y * sin, x * sin + y * cos, z];
+    };
+    var Eoap = (function () {
+        function Eoap(scale, center) {
+            if (scale === void 0) { scale = 7; }
+            if (center === void 0) { center = [107, 36]; }
+            this.name = 'Eoap';
+            this.__scale = scale;
+            this.__center = center;
+        }
+        Eoap.prototype.use = function (λ, φ) {
+            var p = rotateY((360 - φ) / 180 * Math.PI, 100 * this.__scale, 0, 0);
+            p = rotateZ(λ / 180 * Math.PI, p[0], p[1], p[2]);
+            p = rotateZ((90 - this.__center[0]) / 180 * Math.PI, p[0], p[1], p[2]);
+            p = rotateX((90 - this.__center[1]) / 180 * Math.PI, p[0], p[1], p[2]);
+            return [
+                -p[0],
+                p[1],
+                p[2]
+            ];
+        };
+        return Eoap;
     }());
 
-    var Mercator = (function () {
-        function Mercator(scale, center) {
-            if (scale === void 0) { scale = 7; }
-            if (center === void 0) { center = [107, 36]; }
-            this.name = 'Mercator';
-            var perimeter = 100 * scale * Math.PI;
-            var help = perimeter / 180;
-            var cx = help * center[0];
-            var cy = -1 * help * center[1];
-            this.use = function (λ, φ) {
-                return [
-                    (help * λ - cx) * 0.8,
-                    -1 * help * φ - cy,
-                    0
-                ];
-            };
-        }
-        return Mercator;
+    var Mercator = (function () {
+        function Mercator(scale, center) {
+            if (scale === void 0) { scale = 7; }
+            if (center === void 0) { center = [107, 36]; }
+            this.name = 'Mercator';
+            var perimeter = 100 * scale * Math.PI;
+            var help = perimeter / 180;
+            var cx = help * center[0];
+            var cy = -1 * help * center[1];
+            this.use = function (λ, φ) {
+                return [
+                    (help * λ - cx) * 0.8,
+                    -1 * help * φ - cy,
+                    0
+                ];
+            };
+        }
+        return Mercator;
     }());
 
+    /*!
+    * throttle of OIPage v1.2.0
+    * git+https://github.com/oi-contrib/OIPage.git
+    */
+
     function throttle(callback, _option) {
 
         // 缺省值
@@ -2136,7 +2171,7 @@
             keep: false,
             opportunity: "end"
         };
-
+        
         // 校对
         if (_option) {
             for (var key in _option) {
@@ -2179,443 +2214,756 @@
         };
     }
 
-    function mllData(geoJson) {
-        var minLongitude = null, maxLongitude = null, minLatitude = null, maxLatitude = null;
-        var forPolygon = function (coordinates) {
-            for (var j = 0; j < coordinates.length; j++) {
-                for (var k = 0; k < coordinates[j].length; k++) {
-                    var longitude = coordinates[j][k][0], latitude = coordinates[j][k][1];
-                    if (minLongitude == void 0 || minLongitude > longitude)
-                        minLongitude = longitude;
-                    if (maxLongitude == void 0 || maxLongitude < longitude)
-                        maxLongitude = longitude;
-                    if (minLatitude == void 0 || minLatitude > latitude)
-                        minLatitude = latitude;
-                    if (maxLatitude == void 0 || maxLatitude < latitude)
-                        maxLatitude = latitude;
-                }
-            }
-        };
-        var features = geoJson.features;
-        for (var i = 0; i < features.length; i++) {
-            if (features[i].geometry.type == "Polygon") {
-                forPolygon(features[i].geometry.coordinates);
-            }
-            else if (features[i].geometry.type == "MultiPolygon") {
-                for (var j = 0; j < features[i].geometry.coordinates.length; j++) {
-                    forPolygon(features[i].geometry.coordinates[j]);
-                }
-            }
-        }
-        return [minLongitude, maxLongitude, minLatitude, maxLatitude];
+    function mllData(geoJson) {
+        var minLongitude = null, maxLongitude = null, minLatitude = null, maxLatitude = null;
+        var forPolygon = function (coordinates) {
+            for (var j = 0; j < coordinates.length; j++) {
+                for (var k = 0; k < coordinates[j].length; k++) {
+                    var longitude = coordinates[j][k][0], latitude = coordinates[j][k][1];
+                    if (minLongitude == void 0 || minLongitude > longitude)
+                        minLongitude = longitude;
+                    if (maxLongitude == void 0 || maxLongitude < longitude)
+                        maxLongitude = longitude;
+                    if (minLatitude == void 0 || minLatitude > latitude)
+                        minLatitude = latitude;
+                    if (maxLatitude == void 0 || maxLatitude < latitude)
+                        maxLatitude = latitude;
+                }
+            }
+        };
+        var features = geoJson.features;
+        for (var i = 0; i < features.length; i++) {
+            if (features[i].geometry.type == "Polygon") {
+                forPolygon(features[i].geometry.coordinates);
+            }
+            else if (features[i].geometry.type == "MultiPolygon") {
+                for (var j = 0; j < features[i].geometry.coordinates.length; j++) {
+                    forPolygon(features[i].geometry.coordinates[j]);
+                }
+            }
+        }
+        return [minLongitude, maxLongitude, minLatitude, maxLatitude];
     }
 
-    function getBoundary () {
-        var geos = [];
-        for (var _i = 0; _i < arguments.length; _i++) {
-            geos[_i] = arguments[_i];
-        }
-        var minLongitude = null, maxLongitude = null, minLatitude = null, maxLatitude = null;
-        for (var _a = 0, geos_1 = geos; _a < geos_1.length; _a++) {
-            var geoJson = geos_1[_a];
-            var _b = mllData(geoJson), _minLongitude = _b[0], _maxLongitude = _b[1], _minLatitude = _b[2], _maxLatitude = _b[3];
-            if (minLongitude == void 0 || _minLongitude < minLongitude)
-                minLongitude = _minLongitude;
-            if (maxLongitude == void 0 || _maxLongitude > maxLongitude)
-                maxLongitude = _maxLongitude;
-            if (minLatitude == void 0 || _minLatitude < minLatitude)
-                minLatitude = _minLatitude;
-            if (maxLatitude == void 0 || _maxLatitude > maxLatitude)
-                maxLatitude = _maxLatitude;
-        }
-        return [minLongitude, maxLongitude, minLatitude, maxLatitude];
+    function getBoundary () {
+        var geos = [];
+        for (var _i = 0; _i < arguments.length; _i++) {
+            geos[_i] = arguments[_i];
+        }
+        var minLongitude = null, maxLongitude = null, minLatitude = null, maxLatitude = null;
+        for (var _a = 0, geos_1 = geos; _a < geos_1.length; _a++) {
+            var geoJson = geos_1[_a];
+            var _b = mllData(geoJson), _minLongitude = _b[0], _maxLongitude = _b[1], _minLatitude = _b[2], _maxLatitude = _b[3];
+            if (minLongitude == void 0 || _minLongitude < minLongitude)
+                minLongitude = _minLongitude;
+            if (maxLongitude == void 0 || _maxLongitude > maxLongitude)
+                maxLongitude = _maxLongitude;
+            if (minLatitude == void 0 || _minLatitude < minLatitude)
+                minLatitude = _minLatitude;
+            if (maxLatitude == void 0 || _maxLatitude > maxLatitude)
+                maxLatitude = _maxLatitude;
+        }
+        return [minLongitude, maxLongitude, minLatitude, maxLatitude];
     }
 
-    var MapCoordinate = (function () {
-        function MapCoordinate(config) {
-            if (config === void 0) { config = {}; }
-            this.name = 'MapCoordinate';
-            this.__config = initOption(config, {
-                api: "Mercator",
-                width: 400,
-                height: 300,
-                left: 0,
-                top: 0
-            });
-        }
-        MapCoordinate.prototype.$$updateMap = function () {
-            var _a = this.__boundary, minLongitude = _a[0], maxLongitude = _a[1], minLatitude = _a[2], maxLatitude = _a[3];
-            if (this.__config.api == "Eoap") {
-                var xScale = this.__config.width * 0.836 / (maxLongitude - minLongitude);
-                var yScale = this.__config.height * 0.557 / (maxLatitude - minLatitude);
-                this.__map = new Eoap(xScale < yScale ? xScale : yScale, [
-                    (minLongitude + maxLongitude) * 0.5 * 0.9778,
-                    (minLatitude + maxLatitude) * 0.5 * 1.025
-                ]);
-            }
-            else if (this.__config.api == "Mercator") {
-                var xScale = this.__config.width * 0.72 / (maxLongitude - minLongitude);
-                var yScale = this.__config.height * 0.575 / (maxLatitude - minLatitude);
-                this.__map = new Mercator(xScale < yScale ? xScale : yScale, [
-                    (minLongitude + maxLongitude) * 0.5,
-                    (minLatitude + maxLatitude) * 0.5
-                ]);
-            }
-            else {
-                throw new Error("Unexpected API types:" + this.__config.api);
-            }
-        };
-        MapCoordinate.prototype.setConfig = function (config) {
-            mergeOption(this.__config, config);
-            this.$$updateMap();
-            return this;
-        };
-        MapCoordinate.prototype.setGeos = function () {
-            var geos = [];
-            for (var _i = 0; _i < arguments.length; _i++) {
-                geos[_i] = arguments[_i];
-            }
-            this.__boundary = getBoundary.apply(void 0, geos);
-            this.$$updateMap();
-            return this;
-        };
-        MapCoordinate.prototype.use = function (λ, φ) {
-            if (this.__map) {
-                var dxyz = this.__map.use(λ, φ);
-                return [
-                    this.__config.left + this.__config.width * 0.5 + dxyz[0],
-                    this.__config.top + this.__config.height * 0.5 + dxyz[1],
-                ];
-            }
-            else {
-                throw new Error("Geographic data not set");
-            }
-        };
-        return MapCoordinate;
+    var MapCoordinate = (function () {
+        function MapCoordinate(config) {
+            if (config === void 0) { config = {}; }
+            this.name = 'MapCoordinate';
+            this.__config = initOption(config, {
+                api: "Mercator",
+                width: 400,
+                height: 300,
+                left: 0,
+                top: 0
+            });
+        }
+        MapCoordinate.prototype.$$updateMap = function () {
+            var _a = this.__boundary, minLongitude = _a[0], maxLongitude = _a[1], minLatitude = _a[2], maxLatitude = _a[3];
+            if (this.__config.api == "Eoap") {
+                var xScale = this.__config.width * 0.836 / (maxLongitude - minLongitude);
+                var yScale = this.__config.height * 0.557 / (maxLatitude - minLatitude);
+                this.__map = new Eoap(xScale < yScale ? xScale : yScale, [
+                    (minLongitude + maxLongitude) * 0.5 * 0.9778,
+                    (minLatitude + maxLatitude) * 0.5 * 1.025
+                ]);
+            }
+            else if (this.__config.api == "Mercator") {
+                var xScale = this.__config.width * 0.72 / (maxLongitude - minLongitude);
+                var yScale = this.__config.height * 0.575 / (maxLatitude - minLatitude);
+                this.__map = new Mercator(xScale < yScale ? xScale : yScale, [
+                    (minLongitude + maxLongitude) * 0.5,
+                    (minLatitude + maxLatitude) * 0.5
+                ]);
+            }
+            else {
+                throw new Error("Unexpected API types:" + this.__config.api);
+            }
+        };
+        MapCoordinate.prototype.setConfig = function (config) {
+            mergeOption(this.__config, config);
+            this.$$updateMap();
+            return this;
+        };
+        MapCoordinate.prototype.setGeos = function () {
+            var geos = [];
+            for (var _i = 0; _i < arguments.length; _i++) {
+                geos[_i] = arguments[_i];
+            }
+            this.__boundary = getBoundary.apply(void 0, geos);
+            this.$$updateMap();
+            return this;
+        };
+        MapCoordinate.prototype.use = function (λ, φ) {
+            if (this.__map) {
+                var dxyz = this.__map.use(λ, φ);
+                return [
+                    this.__config.left + this.__config.width * 0.5 + dxyz[0],
+                    this.__config.top + this.__config.height * 0.5 + dxyz[1],
+                ];
+            }
+            else {
+                throw new Error("Geographic data not set");
+            }
+        };
+        return MapCoordinate;
     }());
 
-    var toInnerTree = (function (initTree, config) {
-        var tempTree = {};
-        var temp = config.root(initTree);
-        var id, rid;
-        id = rid = config.id(temp);
-        tempTree[id] = {
-            "data": temp,
-            "pid": null,
-            "id": id,
-            "isOpen": true,
-            "show": true,
-            "deg": 0,
-            "children": []
-        };
-        var num = 1;
-        (function createTree(pdata, pid) {
-            var children = config.children(pdata, initTree);
-            num += children ? children.length : 0;
-            for (var flag = 0; children && flag < children.length; flag++) {
-                id = config.id(children[flag]);
-                tempTree[pid].children.push(id);
-                tempTree[id] = {
-                    "data": children[flag],
-                    "pid": pid,
-                    "id": id,
-                    "isOpen": true,
-                    "show": true,
-                    "deg": 0,
-                    "children": []
-                };
-                createTree(children[flag], id);
-            }
-        })(temp, id);
-        return {
-            rid: rid,
-            value: tempTree,
-            num: num
-        };
+    var toInnerTree = (function (initTree, config) {
+        var tempTree = {};
+        var temp = config.root(initTree);
+        var id, rid;
+        id = rid = config.id(temp);
+        tempTree[id] = {
+            "data": temp,
+            "pid": null,
+            "id": id,
+            "isOpen": true,
+            "show": true,
+            "deg": 0,
+            "children": []
+        };
+        var num = 1;
+        (function createTree(pdata, pid) {
+            var children = config.children(pdata, initTree);
+            num += children ? children.length : 0;
+            for (var flag = 0; children && flag < children.length; flag++) {
+                id = config.id(children[flag]);
+                tempTree[pid].children.push(id);
+                tempTree[id] = {
+                    "data": children[flag],
+                    "pid": pid,
+                    "id": id,
+                    "isOpen": true,
+                    "show": true,
+                    "deg": 0,
+                    "children": []
+                };
+                createTree(children[flag], id);
+            }
+        })(temp, id);
+        return {
+            rid: rid,
+            value: tempTree,
+            num: num
+        };
     });
 
-    function toPlainTree (initTree, config, noOpens) {
-        var treeData = toInnerTree(initTree, config);
-        var alltreedata = treeData.value;
-        var rootid = treeData.rid;
-        if (treeData.num == 1) {
-            alltreedata[rootid].left = 0.5;
-            alltreedata[rootid].top = 0.5;
-            alltreedata[rootid].show = true;
-            return {
-                deep: 1,
-                node: alltreedata,
-                root: rootid,
-                size: 1
-            };
-        }
-        else {
-            var beforeDis_1 = [];
-            var size_1 = 0, maxDeep_1 = 0;
-            if (noOpens[rootid]) {
-                alltreedata[rootid].left = 0.5;
-                alltreedata[rootid].top = 0.5;
-                alltreedata[rootid].show = true;
-                size_1 = 1;
-            }
-            else {
-                (function positionCalc(pNode, deep) {
-                    if (deep > maxDeep_1)
-                        maxDeep_1 = deep;
-                    var flag = 0;
-                    if (!noOpens[pNode.id]) {
-                        for (flag = 0; flag < pNode.children.length; flag++)
-                            positionCalc(alltreedata[pNode.children[flag]], deep + 1);
-                    }
-                    alltreedata[pNode.id].left = deep + 0.5;
-                    if (flag == 0) {
-                        if (beforeDis_1[deep] == void 0)
-                            beforeDis_1[deep] = -0.5;
-                        if (beforeDis_1[deep - 1] == void 0)
-                            beforeDis_1[deep - 1] = -0.5;
-                        alltreedata[pNode.id].top = beforeDis_1[deep] + 1;
-                        var pTop = beforeDis_1[deep] + 1 + (alltreedata[pNode.pid].children.length - 1) * 0.5;
-                        if (pTop - 1 < beforeDis_1[deep - 1])
-                            alltreedata[pNode.id].top = beforeDis_1[deep - 1] + 1 - (alltreedata[pNode.pid].children.length - 1) * 0.5;
-                    }
-                    else {
-                        alltreedata[pNode.id].top = (alltreedata[pNode.children[0]].top + alltreedata[pNode.children[flag - 1]].top) * 0.5;
-                    }
-                    if (alltreedata[pNode.id].top <= beforeDis_1[deep]) {
-                        var needUp_1 = beforeDis_1[deep] + 1 - alltreedata[pNode.id].top(function doUp(_pid, _deep) {
-                            alltreedata[_pid].top += needUp_1;
-                            if (beforeDis_1[_deep] < alltreedata[_pid].top)
-                                beforeDis_1[_deep] = alltreedata[_pid].top;
-                            for (var _flag = 0; _flag < alltreedata[_pid].children.length; _flag++) {
-                                doUp(alltreedata[_pid].children[_flag], _deep + 1);
-                            }
-                        })(pNode.id, deep);
-                    }
-                    beforeDis_1[deep] = alltreedata[pNode.id].top;
-                    if (alltreedata[pNode.id].top + 0.5 > size_1)
-                        size_1 = alltreedata[pNode.id].top + 0.5;
-                })(alltreedata[rootid], 0);
-            }
-            for (var key in noOpens) {
-                if (noOpens[key]) {
-                    alltreedata[key].isOpen = false;
-                    (function updateHidden(pid, left, top) {
-                        for (var index = 0; index < alltreedata[pid].children.length; index++) {
-                            alltreedata[alltreedata[pid].children[index]].left = left;
-                            alltreedata[alltreedata[pid].children[index]].top = top;
-                            alltreedata[alltreedata[pid].children[index]].show = false;
-                            updateHidden(alltreedata[pid].children[index], left, top);
-                        }
-                    })(key, alltreedata[key].left, alltreedata[key].top);
-                }
-            }
-            return {
-                "node": alltreedata,
-                "root": rootid,
-                "size": size_1,
-                "deep": maxDeep_1 + 1
-            };
-        }
+    function toPlainTree (initTree, config, noOpens) {
+        var treeData = toInnerTree(initTree, config);
+        var alltreedata = treeData.value;
+        var rootid = treeData.rid;
+        if (treeData.num == 1) {
+            alltreedata[rootid].left = 0.5;
+            alltreedata[rootid].top = 0.5;
+            alltreedata[rootid].show = true;
+            return {
+                deep: 1,
+                node: alltreedata,
+                root: rootid,
+                size: 1
+            };
+        }
+        else {
+            var beforeDis_1 = [];
+            var size_1 = 0, maxDeep_1 = 0;
+            if (noOpens[rootid]) {
+                alltreedata[rootid].left = 0.5;
+                alltreedata[rootid].top = 0.5;
+                alltreedata[rootid].show = true;
+                size_1 = 1;
+            }
+            else {
+                (function positionCalc(pNode, deep) {
+                    if (deep > maxDeep_1)
+                        maxDeep_1 = deep;
+                    var flag = 0;
+                    if (!noOpens[pNode.id]) {
+                        for (flag = 0; flag < pNode.children.length; flag++)
+                            positionCalc(alltreedata[pNode.children[flag]], deep + 1);
+                    }
+                    alltreedata[pNode.id].left = deep + 0.5;
+                    if (flag == 0) {
+                        if (beforeDis_1[deep] == void 0)
+                            beforeDis_1[deep] = -0.5;
+                        if (beforeDis_1[deep - 1] == void 0)
+                            beforeDis_1[deep - 1] = -0.5;
+                        alltreedata[pNode.id].top = beforeDis_1[deep] + 1;
+                        var pTop = beforeDis_1[deep] + 1 + (alltreedata[pNode.pid].children.length - 1) * 0.5;
+                        if (pTop - 1 < beforeDis_1[deep - 1])
+                            alltreedata[pNode.id].top = beforeDis_1[deep - 1] + 1 - (alltreedata[pNode.pid].children.length - 1) * 0.5;
+                    }
+                    else {
+                        alltreedata[pNode.id].top = (alltreedata[pNode.children[0]].top + alltreedata[pNode.children[flag - 1]].top) * 0.5;
+                    }
+                    if (alltreedata[pNode.id].top <= beforeDis_1[deep]) {
+                        var needUp_1 = beforeDis_1[deep] + 1 - alltreedata[pNode.id].top(function doUp(_pid, _deep) {
+                            alltreedata[_pid].top += needUp_1;
+                            if (beforeDis_1[_deep] < alltreedata[_pid].top)
+                                beforeDis_1[_deep] = alltreedata[_pid].top;
+                            for (var _flag = 0; _flag < alltreedata[_pid].children.length; _flag++) {
+                                doUp(alltreedata[_pid].children[_flag], _deep + 1);
+                            }
+                        })(pNode.id, deep);
+                    }
+                    beforeDis_1[deep] = alltreedata[pNode.id].top;
+                    if (alltreedata[pNode.id].top + 0.5 > size_1)
+                        size_1 = alltreedata[pNode.id].top + 0.5;
+                })(alltreedata[rootid], 0);
+            }
+            for (var key in noOpens) {
+                if (noOpens[key]) {
+                    alltreedata[key].isOpen = false;
+                    (function updateHidden(pid, left, top) {
+                        for (var index = 0; index < alltreedata[pid].children.length; index++) {
+                            alltreedata[alltreedata[pid].children[index]].left = left;
+                            alltreedata[alltreedata[pid].children[index]].top = top;
+                            alltreedata[alltreedata[pid].children[index]].show = false;
+                            updateHidden(alltreedata[pid].children[index], left, top);
+                        }
+                    })(key, alltreedata[key].left, alltreedata[key].top);
+                }
+            }
+            return {
+                "node": alltreedata,
+                "root": rootid,
+                "size": size_1,
+                "deep": maxDeep_1 + 1
+            };
+        }
     }
 
-    var Tree = (function () {
-        function Tree(config) {
-            if (config === void 0) { config = {}; }
-            this.name = 'Tree';
-            this.__config = initOption(config, {
-                root: function (initTree) { return initTree; },
-                children: function (parentTree) { return parentTree.children; },
-                id: function (treedata) { return treedata.name; }
-            });
-        }
-        Tree.prototype.use = function (initTree, noOpens) {
-            if (noOpens === void 0) { noOpens = {}; }
-            return toPlainTree(initTree, this.__config, noOpens);
-        };
-        return Tree;
+    var Tree = (function () {
+        function Tree(config) {
+            if (config === void 0) { config = {}; }
+            this.name = 'Tree';
+            this.__config = initOption(config, {
+                root: function (initTree) { return initTree; },
+                children: function (parentTree) { return parentTree.children; },
+                id: function (treedata) { return treedata.name; }
+            });
+        }
+        Tree.prototype.use = function (initTree, noOpens) {
+            if (noOpens === void 0) { noOpens = {}; }
+            return toPlainTree(initTree, this.__config, noOpens);
+        };
+        return Tree;
     }());
 
-    var TreeLayout = (function (_super) {
-        __extends(TreeLayout, _super);
-        function TreeLayout() {
-            var _this = _super !== null && _super.apply(this, arguments) || this;
-            _this.name = 'TreeLayout';
-            _this.__option = {
-                offsetX: 0,
-                offsetY: 0,
-                duration: 500,
-                type: "plain",
-                direction: "LR",
-                x: 100,
-                y: 100,
-                width: 100,
-                height: 100,
-                radius: 100
-            };
-            _this.__noOpens = {};
-            return _this;
-        }
-        TreeLayout.prototype.setOption = function (option) {
-            initOption(option, this.__option);
-            return this;
-        };
-        TreeLayout.prototype.use = function (initTree, noOpens) {
-            if (noOpens === void 0) { noOpens = {}; }
-            var tree = _super.prototype.use.call(this, initTree, noOpens);
-            if (this.__option.offsetX != 0 || this.__option.offsetY != 0) {
-                for (var key in tree.node) {
-                    if (!tree.node[key].show) {
-                        var deep = 0, pid = key;
-                        do {
-                            pid = tree.node[pid].pid;
-                            deep++;
-                        } while (!tree.node[pid].show);
-                        tree.node[key].left += this.__option.offsetX * deep;
-                        tree.node[key].top += this.__option.offsetY * deep;
-                    }
-                }
-            }
-            if (this.__option.type == 'rect') {
-                if (this.__option.direction == 'LR' || this.__option.direction == "RL") {
-                    var perW = this.__option.height / tree.size;
-                    var perD = this.__option.width / (tree.deep - 1);
-                    var balanceW = this.__option.y - this.__option.height * 0.5;
-                    var flag = this.__option.direction == 'LR' ? 1 : -1;
-                    for (var key in tree.node) {
-                        if (tree.deep == 1) {
-                            tree.node[key].left = this.__option.x + this.__option.width * 0.5 * flag;
-                            tree.node[key].top = this.__option.y;
-                        }
-                        else {
-                            tree.node[key].left = this.__option.x + (tree.node[key].left - 0.5) * perD * flag;
-                            tree.node[key].top = tree.node[key].top * perW + balanceW;
-                        }
-                    }
-                }
-                else if (this.__option.direction == 'TB' || this.__option.direction == "BT") {
-                    var perW = this.__option.width / tree.size;
-                    var perD = this.__option.height / (tree.deep - 1);
-                    var balanceW = this.__option.x - this.__option.width * 0.5;
-                    var flag = this.__option.direction == 'TB' ? 1 : -1;
-                    for (var key in tree.node) {
-                        tree.node[key].deg = this.__option.direction == 'TB' ? Math.PI * 0.5 : Math.PI * -0.5;
-                        if (tree.deep == 1) {
-                            tree.node[key].left = this.__option.x;
-                            tree.node[key].top = this.__option.y + this.__option.height * 0.5 * flag;
-                        }
-                        else {
-                            var left = tree.node[key].left;
-                            tree.node[key].left = tree.node[key].top * perW + balanceW;
-                            tree.node[key].top = this.__option.y + (left - 0.5) * perD * flag;
-                        }
-                    }
-                }
-            }
-            else if (this.__option.type == 'circle') {
-                var cx = this.__option.x, cy = this.__option.y;
-                var deg = Math.PI * 2 / tree.size;
-                var per = this.__option.radius / (tree.deep - 1);
-                for (var key in tree.node) {
-                    if (tree.node[key].left == 0.5) {
-                        tree.node[key].left = cx;
-                        tree.node[key].top = cy;
-                    }
-                    else {
-                        var position = rotate$1(cx, cy, deg * tree.node[key].top, cx + (tree.node[key].left - 0.5) * per, cy);
-                        tree.node[key].deg = deg * tree.node[key].top;
-                        tree.node[key].left = position[0];
-                        tree.node[key].top = position[1];
-                    }
-                }
-            }
-            return tree;
-        };
-        TreeLayout.prototype.bind = function (initTree, renderBack, noOpens) {
-            if (noOpens === void 0) { noOpens = {}; }
-            this.__rback = renderBack;
-            this.__oralTree = initTree;
-            this.__noOpens = noOpens;
-            this.__preTree = this.use(this.__oralTree, this.__noOpens);
-            this.__rback(this.__preTree);
-            return this;
-        };
-        TreeLayout.prototype.unbind = function () {
-            this.__rback = function () { return null; };
-            this.__oralTree = null;
-            this.__preTree = null;
-            this.__noOpens = {};
-            return this;
-        };
-        TreeLayout.prototype.doUpdate = function () {
-            var _this = this;
-            var newTree = this.use(this.__oralTree, this.__noOpens);
-            var cacheTree = JSON.parse(JSON.stringify(newTree));
-            animation(function (deep) {
-                if (_this.__preTree) {
-                    for (var key in cacheTree.node) {
-                        if (newTree.node[key].show || _this.__preTree.node[key].show) {
-                            cacheTree.node[key].show = true;
-                            cacheTree.node[key].left = _this.__preTree.node[key].left + (newTree.node[key].left - _this.__preTree.node[key].left) * deep;
-                            cacheTree.node[key].top = _this.__preTree.node[key].top + (newTree.node[key].top - _this.__preTree.node[key].top) * deep;
-                        }
-                    }
-                }
-                _this.__rback(cacheTree);
-            }, this.__option.duration, function () {
-                _this.__preTree = newTree;
-                _this.__rback(_this.__preTree);
-            });
-            return this;
-        };
-        TreeLayout.prototype.closeNode = function (id) {
-            if (!this.__preTree)
-                return this;
-            this.__noOpens[id] = true;
-            this.doUpdate();
-            return this;
-        };
-        TreeLayout.prototype.openNode = function (id) {
-            if (!this.__preTree)
-                return this;
-            this.__noOpens[id] = false;
-            this.doUpdate();
-            return this;
-        };
-        TreeLayout.prototype.toggleNode = function (id) {
-            if (!this.__preTree)
-                return this;
-            this.__noOpens[id] = !this.__noOpens[id];
-            this.doUpdate();
-            return this;
-        };
-        return TreeLayout;
+    var TreeLayout = (function (_super) {
+        __extends(TreeLayout, _super);
+        function TreeLayout() {
+            var _this = _super !== null && _super.apply(this, arguments) || this;
+            _this.name = 'TreeLayout';
+            _this.__option = {
+                offsetX: 0,
+                offsetY: 0,
+                duration: 500,
+                type: "plain",
+                direction: "LR",
+                x: 100,
+                y: 100,
+                width: 100,
+                height: 100,
+                radius: 100
+            };
+            _this.__noOpens = {};
+            return _this;
+        }
+        TreeLayout.prototype.setOption = function (option) {
+            initOption(option, this.__option);
+            return this;
+        };
+        TreeLayout.prototype.use = function (initTree, noOpens) {
+            if (noOpens === void 0) { noOpens = {}; }
+            var tree = _super.prototype.use.call(this, initTree, noOpens);
+            if (this.__option.offsetX != 0 || this.__option.offsetY != 0) {
+                for (var key in tree.node) {
+                    if (!tree.node[key].show) {
+                        var deep = 0, pid = key;
+                        do {
+                            pid = tree.node[pid].pid;
+                            deep++;
+                        } while (!tree.node[pid].show);
+                        tree.node[key].left += this.__option.offsetX * deep;
+                        tree.node[key].top += this.__option.offsetY * deep;
+                    }
+                }
+            }
+            if (this.__option.type == 'rect') {
+                if (this.__option.direction == 'LR' || this.__option.direction == "RL") {
+                    var perW = this.__option.height / tree.size;
+                    var perD = this.__option.width / (tree.deep - 1);
+                    var balanceW = this.__option.y - this.__option.height * 0.5;
+                    var flag = this.__option.direction == 'LR' ? 1 : -1;
+                    for (var key in tree.node) {
+                        if (tree.deep == 1) {
+                            tree.node[key].left = this.__option.x + this.__option.width * 0.5 * flag;
+                            tree.node[key].top = this.__option.y;
+                        }
+                        else {
+                            tree.node[key].left = this.__option.x + (tree.node[key].left - 0.5) * perD * flag;
+                            tree.node[key].top = tree.node[key].top * perW + balanceW;
+                        }
+                    }
+                }
+                else if (this.__option.direction == 'TB' || this.__option.direction == "BT") {
+                    var perW = this.__option.width / tree.size;
+                    var perD = this.__option.height / (tree.deep - 1);
+                    var balanceW = this.__option.x - this.__option.width * 0.5;
+                    var flag = this.__option.direction == 'TB' ? 1 : -1;
+                    for (var key in tree.node) {
+                        tree.node[key].deg = this.__option.direction == 'TB' ? Math.PI * 0.5 : Math.PI * -0.5;
+                        if (tree.deep == 1) {
+                            tree.node[key].left = this.__option.x;
+                            tree.node[key].top = this.__option.y + this.__option.height * 0.5 * flag;
+                        }
+                        else {
+                            var left = tree.node[key].left;
+                            tree.node[key].left = tree.node[key].top * perW + balanceW;
+                            tree.node[key].top = this.__option.y + (left - 0.5) * perD * flag;
+                        }
+                    }
+                }
+            }
+            else if (this.__option.type == 'circle') {
+                var cx = this.__option.x, cy = this.__option.y;
+                var deg = Math.PI * 2 / tree.size;
+                var per = this.__option.radius / (tree.deep - 1);
+                for (var key in tree.node) {
+                    if (tree.node[key].left == 0.5) {
+                        tree.node[key].left = cx;
+                        tree.node[key].top = cy;
+                    }
+                    else {
+                        var position = rotate$1(cx, cy, deg * tree.node[key].top, cx + (tree.node[key].left - 0.5) * per, cy);
+                        tree.node[key].deg = deg * tree.node[key].top;
+                        tree.node[key].left = position[0];
+                        tree.node[key].top = position[1];
+                    }
+                }
+            }
+            return tree;
+        };
+        TreeLayout.prototype.bind = function (initTree, renderBack, noOpens) {
+            if (noOpens === void 0) { noOpens = {}; }
+            this.__rback = renderBack;
+            this.__oralTree = initTree;
+            this.__noOpens = noOpens;
+            this.__preTree = this.use(this.__oralTree, this.__noOpens);
+            this.__rback(this.__preTree);
+            return this;
+        };
+        TreeLayout.prototype.unbind = function () {
+            this.__rback = function () { return null; };
+            this.__oralTree = null;
+            this.__preTree = null;
+            this.__noOpens = {};
+            return this;
+        };
+        TreeLayout.prototype.doUpdate = function () {
+            var _this = this;
+            var newTree = this.use(this.__oralTree, this.__noOpens);
+            var cacheTree = JSON.parse(JSON.stringify(newTree));
+            animation(function (deep) {
+                if (_this.__preTree) {
+                    for (var key in cacheTree.node) {
+                        if (newTree.node[key].show || _this.__preTree.node[key].show) {
+                            cacheTree.node[key].show = true;
+                            cacheTree.node[key].left = _this.__preTree.node[key].left + (newTree.node[key].left - _this.__preTree.node[key].left) * deep;
+                            cacheTree.node[key].top = _this.__preTree.node[key].top + (newTree.node[key].top - _this.__preTree.node[key].top) * deep;
+                        }
+                    }
+                }
+                _this.__rback(cacheTree);
+            }, this.__option.duration, function () {
+                _this.__preTree = newTree;
+                _this.__rback(_this.__preTree);
+            });
+            return this;
+        };
+        TreeLayout.prototype.closeNode = function (id) {
+            if (!this.__preTree)
+                return this;
+            this.__noOpens[id] = true;
+            this.doUpdate();
+            return this;
+        };
+        TreeLayout.prototype.openNode = function (id) {
+            if (!this.__preTree)
+                return this;
+            this.__noOpens[id] = false;
+            this.doUpdate();
+            return this;
+        };
+        TreeLayout.prototype.toggleNode = function (id) {
+            if (!this.__preTree)
+                return this;
+            this.__noOpens[id] = !this.__noOpens[id];
+            this.doUpdate();
+            return this;
+        };
+        return TreeLayout;
     }(Tree));
 
-    var index = {
-        Cardinal: Cardinal,
-        Hermite: Hermite,
-        Matrix4: Matrix4,
-        rotate: rotate$1,
-        move: move,
-        scale: scale,
-        getLoopColors: getLoopColors,
-        animation: animation,
-        ruler: ruler,
-        SVG: SVG,
-        Canvas: Canvas,
-        RawCanvas: Canvas$1,
-        getWebGLContext: getWebGLContext,
-        Shader: ShaderObject,
-        Texture: TextureObject,
-        Buffer: BufferObject,
-        Eoap: Eoap,
-        Mercator: Mercator,
-        throttle: throttle,
-        assemble: assemble,
-        MapCoordinate: MapCoordinate,
-        TreeLayout: TreeLayout,
-        initOption: initOption,
-        mergeOption: mergeOption
+    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(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(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,
+        Matrix4: Matrix4,
+        rotate: rotate$1,
+        move: move,
+        scale: scale,
+        getLoopColors: getLoopColors,
+        animation: animation,
+        ruler: ruler,
+        SVG: SVG,
+        Canvas: Canvas,
+        RawCanvas: Canvas$1,
+        getWebGLContext: getWebGLContext,
+        Shader: ShaderObject,
+        Texture: TextureObject,
+        Buffer: BufferObject,
+        Eoap: Eoap,
+        Mercator: Mercator,
+        throttle: throttle,
+        assemble: assemble,
+        MapCoordinate: MapCoordinate,
+        TreeLayout: TreeLayout,
+        PieLayout: PieLayout,
+        BarLayout: BarLayout,
+        initOption: initOption,
+        mergeOption: mergeOption
     };
 
     return index;