vislite 0.1.1 → 0.2.0-alpha.8

package/lib/index.umd.js

@@ -1,12 +1,16 @@
 /*!
-* VISLite JavaScript Library v0.1.1
+* VISLite JavaScript Library v0.2.0-alpha.8
 * git+https://github.com/oi-contrib/VISLite.git
 *
 * Copyright zxl20070701
 * Released under the MIT license
 * https://zxl20070701.github.io/notebook/home.html
 * 
-* Publish Date: Sat May 06 2023 20:11:58 GMT+0800 (中国标准时间)
+* 本版本系测试版本，请认真阅读下述说明再使用：
+*
+*【测试版本细则】
+* alpha：内测版本，仅供开发人员提供测试环境而发布，后续的修改可能极具破坏性，非有明确了解前请勿直接用于项目中
+* beta：外测版本，正式发布前的确认测试，或者新功能紧急发布，一般可以直接用于实际项目，因为即使后续发现了问题，直接使用正式版即可，不会有破坏性
 */
 (function (global, factory) {
     typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
@@ -14,446 +18,6 @@
     (global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.VISLite = factory());
 })(this, (function () { 'use strict';
 
-    /******************************************************************************
-    Copyright (c) Microsoft Corporation.
-
-    Permission to use, copy, modify, and/or distribute this software for any
-    purpose with or without fee is hereby granted.
-
-    THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
-    REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
-    AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
-    INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
-    LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
-    OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
-    PERFORMANCE OF THIS SOFTWARE.
-    ***************************************************************************** */
-    /* global Reflect, Promise */
-
-    var extendStatics = function(d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
-        return extendStatics(d, b);
-    };
-
-    function __extends(d, b) {
-        if (typeof b !== "function" && b !== null)
-            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    }
-
-    var rotate$1 = 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 = [], p;
-        p = rotate$1(0, 0, beginA, r1, 0);
-        temp[0] = p[0];
-        temp[1] = p[1];
-        p = rotate$1(0, 0, rotateA, p[0], p[1]);
-        temp[2] = p[0];
-        temp[3] = p[1];
-        p = rotate$1(0, 0, beginA, r2, 0);
-        temp[4] = p[0];
-        temp[5] = p[1];
-        p = rotate$1(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 initText$1 = function (painter, config, x, y, deg) {
-        painter.beginPath();
-        painter.translate(x, y);
-        painter.rotate(deg);
-        painter.font = config['font-style'] + " " + config["font-weight"] + " " + config['font-size'] + "px " + config['font-family'];
-        return painter;
-    };
-    var initArc$1 = 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["arc-end-cap"] != 'round')
-                painter.lineTo(endOuterX, endOuterY);
-            else
-                painter.arc((endInnerX + endOuterX) * 0.5, (endInnerY + endOuterY) * 0.5, r, endA - Math.PI, endA, true);
-            painter.arc(cx, cy, r2, endA, beginA, true);
-            if (config["arc-start-cap"] != 'round')
-                painter.lineTo(begInnerX, begInnerY);
-            else
-                painter.arc((begInnerX + begOuterX) * 0.5, (begInnerY + begOuterY) * 0.5, r, beginA, beginA - Math.PI, true);
-        });
-        if (config["arc-start-cap"] == 'butt')
-            painter.closePath();
-        return painter;
-    };
-    var initCircle$1 = 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$1 = function (painter, x, y, width, height) {
-        painter.beginPath();
-        painter.rect(x, y, width, height);
-        return painter;
-    };
-
-    var Painter = (function () {
-        function Painter(canvas, opts, region) {
-            if (opts === void 0) { opts = {}; }
-            this.__region = null;
-            this.__specialConfig = {
-                "font-size": 16,
-                "font-family": "sans-serif",
-                "font-weight": 400,
-                "font-style": "normal",
-                "arc-start-cap": 'butt',
-                "arc-end-cap": 'butt'
-            };
-            this.__initConfig = {
-                "fillStyle": 'black',
-                "strokeStyle": 'black',
-                "lineWidth": 1,
-                "textAlign": 'left',
-                "textBaseline": 'middle',
-                "lineDash": [],
-                "shadowBlur": 0,
-                "shadowColor": "black"
-            };
-            this.painter = canvas.getContext("2d", opts);
-            this.__region = region;
-            this.painter.textBaseline = 'middle';
-            this.painter.textAlign = 'left';
-        }
-        Painter.prototype.useConfig = function (key, value) {
-            if (this.__region) {
-                if (['fillStyle', 'strokeStyle', 'shadowBlur', 'shadowColor'].indexOf(key) < 0) {
-                    this.__region.useConfig(key, value);
-                }
-            }
-            if (key == 'lineDash') {
-                if (this.painter.setLineDash)
-                    this.painter.setLineDash(value);
-            }
-            else if (key in this.__specialConfig) {
-                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.__region.fillText(text, x, y, deg);
-            this.painter.save();
-            initText$1(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.__region.strokeText(text, x, y, deg);
-            this.painter.save();
-            initText$1(this.painter, this.__specialConfig, x, y, deg || 0).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.__region.fullText(text, x, y, deg);
-            this.painter.save();
-            initText$1(this.painter, this.__specialConfig, x, y, deg || 0);
-            this.painter.fillText(text, 0, 0);
-            this.painter.strokeText(text, 0, 0);
-            this.painter.restore();
-            return this;
-        };
-        Painter.prototype.beginPath = function () {
-            if (this.__region)
-                this.__region.beginPath();
-            this.painter.beginPath();
-            return this;
-        };
-        Painter.prototype.closePath = function () {
-            if (this.__region)
-                this.__region.closePath();
-            this.painter.closePath();
-            return this;
-        };
-        Painter.prototype.moveTo = function (x, y) {
-            if (this.__region)
-                this.__region.moveTo(x, y);
-            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.__region.lineTo(x, y);
-            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.__region.arc(x, y, r, beginDeg, deg);
-            this.painter.arc(x, y, r, beginDeg, beginDeg + deg, deg < 0);
-            return this;
-        };
-        Painter.prototype.fill = function () {
-            if (this.__region)
-                this.__region.fill();
-            this.painter.fill();
-            return this;
-        };
-        Painter.prototype.stroke = function () {
-            if (this.__region)
-                this.__region.stroke();
-            this.painter.stroke();
-            return this;
-        };
-        Painter.prototype.full = function () {
-            if (this.__region)
-                this.__region.full();
-            this.painter.fill();
-            this.painter.stroke();
-            return this;
-        };
-        Painter.prototype.save = function () {
-            if (this.__region)
-                this.__region.save();
-            this.painter.save();
-            return this;
-        };
-        Painter.prototype.restore = function () {
-            if (this.__region)
-                this.__region.restore();
-            this.painter.restore();
-            return this;
-        };
-        Painter.prototype.quadraticCurveTo = function (cpx, cpy, x, y) {
-            if (this.__region)
-                this.__region.quadraticCurveTo(cpx, cpy, x, y);
-            this.painter.quadraticCurveTo(cpx, cpy, x, y);
-            return this;
-        };
-        Painter.prototype.bezierCurveTo = function (cp1x, cp1y, cp2x, cp2y, x, y) {
-            if (this.__region)
-                this.__region.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y);
-            this.painter.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y);
-            return this;
-        };
-        Painter.prototype.clearRect = function (x, y, w, h) {
-            if (this.__region)
-                this.__region.clearRect(x, y, w, h);
-            this.painter.clearRect(x, y, w, h);
-            return this;
-        };
-        Painter.prototype.fillArc = function (cx, cy, r1, r2, beginDeg, deg) {
-            if (this.__region)
-                this.__region.fillArc(cx, cy, r1, r2, beginDeg, deg);
-            initArc$1(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.__region.strokeArc(cx, cy, r1, r2, beginDeg, deg);
-            initArc$1(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.__region.fullArc(cx, cy, r1, r2, beginDeg, deg);
-            initArc$1(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.__region.fillCircle(cx, cy, r);
-            initCircle$1(this.painter, cx, cy, r).fill();
-            return this;
-        };
-        Painter.prototype.strokeCircle = function (cx, cy, r) {
-            if (this.__region)
-                this.__region.strokeCircle(cx, cy, r);
-            initCircle$1(this.painter, cx, cy, r).stroke();
-            return this;
-        };
-        Painter.prototype.fullCircle = function (cx, cy, r) {
-            if (this.__region)
-                this.__region.fullCircle(cx, cy, r);
-            initCircle$1(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.__region.fillRect(x, y, width, height);
-            initRect$1(this.painter, x, y, width, height).fill();
-            return this;
-        };
-        Painter.prototype.strokeRect = function (x, y, width, height) {
-            if (this.__region)
-                this.__region.strokeRect(x, y, width, height);
-            initRect$1(this.painter, x, y, width, height).stroke();
-            return this;
-        };
-        Painter.prototype.fullRect = function (x, y, width, height) {
-            if (this.__region)
-                this.__region.fullRect(x, y, width, height);
-            initRect$1(this.painter, x, y, width, height);
-            this.painter.fill();
-            this.painter.stroke();
-            return this;
-        };
-        return Painter;
-    }());
-
-    var Canvas$1 = (function (_super) {
-        __extends(Canvas, _super);
-        function Canvas(ViewCanvas, RegionCanvas) {
-            var _this_1 = _super.call(this, ViewCanvas, {}, new Painter(RegionCanvas, {
-                willReadFrequently: true
-            })) || this;
-            _this_1.name = "Canvas";
-            _this_1.__regionList = {};
-            _this_1.__rgb = [0, 0, 0];
-            _this_1.__p = 'r';
-            _this_1.setRegion("");
-            return _this_1;
-        }
-        Canvas.prototype.config = function (configs) {
-            for (var key in configs) {
-                this.useConfig(key, configs[key]);
-            }
-            return this;
-        };
-        Canvas.prototype.setRegion = function (regionName) {
-            var _this = this;
-            if (regionName) {
-                if (this.__regionList[regionName] == undefined) {
-                    this.__regionList[regionName] = {
-                        'r': function () {
-                            _this.__rgb[0] += 1;
-                            _this.__p = 'g';
-                            return 'rgb(' + _this.__rgb[0] + ',' + _this.__rgb[1] + ',' + _this.__rgb[2] + ')';
-                        },
-                        'g': function () {
-                            _this.__rgb[1] += 1;
-                            _this.__p = 'b';
-                            return 'rgb(' + _this.__rgb[0] + ',' + _this.__rgb[1] + ',' + _this.__rgb[2] + ')';
-                        },
-                        'b': function () {
-                            _this.__rgb[2] += 1;
-                            _this.__p = 'r';
-                            return 'rgb(' + _this.__rgb[0] + ',' + _this.__rgb[1] + ',' + _this.__rgb[2] + ')';
-                        }
-                    }[this.__p]();
-                }
-                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_1 = this;
-            return new Promise(function (resolve, reject) {
-                var imgData = _this_1.__region.painter.getImageData(x - 0.5, y - 0.5, 1, 1);
-                var currentRGBA = imgData.data;
-                var doit = function () {
-                    for (var key in _this_1.__regionList) {
-                        if ("rgb(" + currentRGBA[0] + "," + currentRGBA[1] + "," + currentRGBA[2] + ")" == _this_1.__regionList[key]) {
-                            resolve(key);
-                            break;
-                        }
-                    }
-                    resolve("");
-                };
-                if (currentRGBA) {
-                    doit();
-                }
-                else {
-                    imgData.then(function (data) {
-                        currentRGBA = data;
-                        doit();
-                    });
-                }
-            });
-        };
-        return Canvas;
-    }(Painter));
-
-    var Canvas = (function (_super) {
-        __extends(Canvas, _super);
-        function Canvas(el) {
-            if (!el) {
-                throw new Error("VISLite Canvas:The mount point requires an HTMLElement type but encountered null.");
-            }
-            var width = el.clientWidth, height = el.clientHeight;
-            var ViewCanvas, RegionCanvas;
-            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);
-                RegionCanvas = document.createElement('canvas');
-                _el._vislite_canvas_ = [ViewCanvas, RegionCanvas];
-                el.setAttribute('vislite', 'inited');
-            }
-            for (var _i = 0, _a = [ViewCanvas, RegionCanvas]; _i < _a.length; _i++) {
-                var canvas = _a[_i];
-                canvas.style.width = width + "px";
-                canvas.setAttribute('width', width + "");
-                canvas.style.height = height + "px";
-                canvas.setAttribute('height', height + "");
-            }
-            return _super.call(this, ViewCanvas, RegionCanvas) || this;
-        }
-        return Canvas;
-    }(Canvas$1));
-
     var Hermite = (function () {
         function Hermite(u) {
             if (u === void 0) { u = 0.5; }
@@ -494,117 +58,47 @@
         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];
-                temp = flag < points.length - 1 ?
-                    (points[flag + 1][1] - points[flag - 1][1]) / (points[flag + 1][0] - points[flag - 1][0]) :
-                    (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 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 (longitude, latitude) {
-            var p = rotateY((360 - latitude) / 180 * Math.PI, 100 * this.__scale, 0, 0);
-            p = rotateZ(longitude / 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;
-    }());
-
-    function getLoopColors (num, alpha) {
-        if (alpha === void 0) { alpha = 1; }
-        var colorList = [
-            '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);
-                }
+            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];
+                temp = flag < points.length - 1 ?
+                    (points[flag + 1][1] - points[flag - 1][1]) / (points[flag + 1][0] - points[flag - 1][0]) :
+                    (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;
             }
-            else {
-                for (var j = 1; j < (num / colorList.length); j++) {
-                    colors = colors.concat(colorList);
+            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 (num % colorList.length == 1) {
-                    colors = colors.concat(colorList[4]);
+                if (this.__i < 0) {
+                    return this.__HS.h[0].use(this.__HS.x[0]);
                 }
-                else {
-                    for (var k = 0; k < num % colorList.length; k++) {
-                        colors = colors.concat(colorList[k]);
-                    }
+                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);
             }
-        }
-        return colors;
-    }
+            else {
+                throw new Error('You shoud first set the position!');
+            }
+        };
+        return Cardinal;
+    }());
 
     function _move (d, a, b, c) {
         if (c === void 0) { c = 0; }
@@ -733,7 +227,7 @@
         return Matrix4;
     }());
 
-    function rotate (cx, cy, deg, x, y) {
+    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,
@@ -741,6 +235,218 @@
         ];
     }
 
+    function getLoopColors (num, alpha) {
+        if (alpha === void 0) { alpha = 1; }
+        var colorList = [
+            '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;
+    }
+
+    var $timers = [];
+    var $interval = 13;
+    var $timerId;
+    function animation (doback, duration, callback) {
+        if (duration === void 0) { duration = 400; }
+        if (callback === void 0) { callback = function () { }; }
+        var clock = {
+            "timer": function (tick, duration, callback) {
+                if (!tick) {
+                    throw new Error('Tick is required!');
+                }
+                var id = new Date().valueOf() + "_" + (Math.random() * 1000).toFixed(0);
+                $timers.push({
+                    "id": id,
+                    "createTime": new Date(),
+                    "tick": tick,
+                    "duration": duration,
+                    "callback": callback
+                });
+                clock.start();
+                return id;
+            },
+            "start": function () {
+                if (!$timerId) {
+                    $timerId = setInterval(clock.tick, $interval);
+                }
+            },
+            "tick": function () {
+                var createTime, flag, tick, callback, timer, duration, passTime, timers = $timers;
+                $timers = [];
+                $timers.length = 0;
+                for (flag = 0; flag < timers.length; flag++) {
+                    timer = timers[flag];
+                    createTime = timer.createTime;
+                    tick = timer.tick;
+                    duration = timer.duration;
+                    callback = timer.callback;
+                    passTime = (+new Date().valueOf() - createTime.valueOf()) / duration;
+                    passTime = passTime > 1 ? 1 : passTime;
+                    tick(passTime);
+                    if (passTime < 1 && timer.id) {
+                        $timers.push(timer);
+                    }
+                    else {
+                        callback(passTime);
+                    }
+                }
+                if ($timers.length <= 0) {
+                    clock.stop();
+                }
+            },
+            "stop": function () {
+                if ($timerId) {
+                    clearInterval($timerId);
+                    $timerId = null;
+                }
+            }
+        };
+        var id = clock.timer(function (deep) {
+            doback(deep);
+        }, duration, callback);
+        return function () {
+            var i;
+            for (i in $timers) {
+                if ($timers[i].id == id) {
+                    $timers[i].id = undefined;
+                    return;
+                }
+            }
+        };
+    }
+
+    function ruler (maxValue, minValue, num) {
+        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 = Math.ceil((maxValue - minValue) * times100 / num);
+        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] || distance100;
+        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;
+    }
+
+    /******************************************************************************
+    Copyright (c) Microsoft Corporation.
+
+    Permission to use, copy, modify, and/or distribute this software for any
+    purpose with or without fee is hereby granted.
+
+    THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+    REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+    AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+    INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+    LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+    OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+    PERFORMANCE OF THIS SOFTWARE.
+    ***************************************************************************** */
+    /* global Reflect, Promise */
+
+    var extendStatics = function(d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+
+    function __extends(d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    }
+
+    function __spreadArray(to, from, pack) {
+        if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+            if (ar || !(i in from)) {
+                if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+                ar[i] = from[i];
+            }
+        }
+        return to.concat(ar || Array.prototype.slice.call(from));
+    }
+
     var XLINK_ATTRIBUTE = ["href", "title", "show", "type", "role", "actuate"];
 
     function toNode(tagname) {
@@ -780,7 +486,35 @@
         }
     }
 
-    var initText = function (el, config, x, y, deg) {
+    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 = [], 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 initText$1 = function (el, config, x, y, deg) {
         if (el.nodeName.toLowerCase() !== 'text')
             throw new Error('Need a <text> !');
         setAttribute(el, "dy", {
@@ -805,7 +539,7 @@
             setAttribute(el, "transform", "rotate(" + deg + "," + x + "," + y + ")");
         }
     };
-    var initCircle = function (el, cx, cy, r) {
+    var initCircle$1 = function (el, cx, cy, r) {
         if (el.nodeName.toLowerCase() !== 'circle')
             throw new Error('Need a <circle> !');
         setAttribute(el, 'cx', cx);
@@ -817,7 +551,7 @@
             throw new Error('Need a <path> !');
         setAttribute(el, 'd', path);
     };
-    var initRect = function (el, x, y, width, height) {
+    var initRect$1 = function (el, x, y, width, height) {
         if (el.nodeName.toLowerCase() !== 'rect')
             throw new Error('Need a <rect> !');
         if (height < 0) {
@@ -828,420 +562,1338 @@
             width *= -1;
             x -= width;
         }
-        setAttribute(el, 'x', x);
-        setAttribute(el, 'y', y);
-        setAttribute(el, 'width', width);
-        setAttribute(el, 'height', height);
+        setAttribute(el, 'x', x);
+        setAttribute(el, 'y', y);
+        setAttribute(el, 'width', width);
+        setAttribute(el, 'height', height);
+    };
+    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 % (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, d = "M" + begInnerX + " " + begInnerY;
+            if (r < 0)
+                r = -r;
+            d +=
+                "A" + r1 + " " + r1 + " 0 " + f + " 1 " + endInnerX + " " + endInnerY;
+            if (config["arc-end-cap"] == 'round')
+                d += "A" + r + " " + r + " " + " 0 1 0 " + endOuterX + " " + endOuterY;
+            else if (config["arc-end-cap"] == '-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["arc-start-cap"] == 'round')
+                d += "A" + r + " " + r + " " + " 0 1 0 " + begInnerX + " " + begInnerY;
+            else if (config["arc-start-cap"] == '-round')
+                d += "A" + r + " " + r + " " + " 0 1 1 " + begInnerX + " " + begInnerY;
+            else
+                d += "L" + begInnerX + " " + begInnerY;
+            if (config["arc-start-cap"] == 'butt')
+                d += "Z";
+            setAttribute(el, 'd', d);
+        });
+    };
+
+    var oldAttrName$1 = {
+        "font-size": "fontSize",
+        "font-family": "fontFamily",
+        "arc-start-cap": "arcStartCap",
+        "arc-end-cap": "arcEndCap"
+    };
+    var SVG$1 = (function () {
+        function SVG(svg) {
+            this.name = "SVG";
+            this.__config = {
+                "fillStyle": "#000",
+                "strokeStyle": "#000",
+                "lineWidth": 1,
+                "textAlign": "left",
+                "textBaseline": "middle",
+                "font-size": 16,
+                "font-family": "sans-serif",
+                "arc-start-cap": "butt",
+                "arc-end-cap": "butt",
+                "lineDash": []
+            };
+            this.__path = "";
+            this.__currentPosition = [];
+            this.__svg = svg;
+        }
+        SVG.prototype.config = function (params) {
+            if (typeof params !== 'object') {
+                return this.__config[oldAttrName$1[params] || params];
+            }
+            else {
+                for (var key in params) {
+                    var _key = oldAttrName$1[key] || key;
+                    this.__config[_key] = params[key];
+                }
+            }
+            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, x, y, width, height);
+            fill(this.__useEl, this.__config);
+            return this;
+        };
+        SVG.prototype.strokeRect = function (x, y, width, height) {
+            initRect$1(this.__useEl, x, y, width, height);
+            stroke(this.__useEl, this.__config);
+            return this;
+        };
+        SVG.prototype.fullRect = function (x, y, width, height) {
+            initRect$1(this.__useEl, 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, x + r, y);
+            var endPosition = rotate$1(x, y, beginDeg + deg, x + r, y);
+            beginDeg = beginDeg / Math.PI * 180;
+            deg = deg / Math.PI * 180;
+            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;
+        };
+        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;
+    }(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 (el, config, cx, cy, r1, r2, beginDeg, deg) {
-        if (el.nodeName.toLowerCase() !== 'path')
-            throw new Error('Need a <path> !');
-        beginDeg = beginDeg % (Math.PI * 2);
+    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 * 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) {
-            var f = (endA - beginA) > Math.PI ? 1 : 0, d = "M" + begInnerX + " " + begInnerY;
             if (r < 0)
                 r = -r;
-            d +=
-                "A" + r1 + " " + r1 + " 0 " + f + " 1 " + endInnerX + " " + endInnerY;
-            if (config["arc-end-cap"] == 'round')
-                d += "A" + r + " " + r + " " + " 0 1 0 " + endOuterX + " " + endOuterY;
-            else if (config["arc-end-cap"] == '-round')
-                d += "A" + r + " " + r + " " + " 0 1 1 " + endOuterX + " " + endOuterY;
+            painter.beginPath();
+            painter.moveTo(begInnerX, begInnerY);
+            painter.arc(cx, cy, r1, beginA, endA, false);
+            if (config.arcEndCap != 'round')
+                painter.lineTo(endOuterX, endOuterY);
             else
-                d += "L" + endOuterX + " " + endOuterY;
-            d += "A" + r2 + " " + r2 + " 0 " + f + " 0 " + begOuterX + " " + begOuterY;
-            if (config["arc-start-cap"] == 'round')
-                d += "A" + r + " " + r + " " + " 0 1 0 " + begInnerX + " " + begInnerY;
-            else if (config["arc-start-cap"] == '-round')
-                d += "A" + r + " " + r + " " + " 0 1 1 " + begInnerX + " " + begInnerY;
+                painter.arc((endInnerX + endOuterX) * 0.5, (endInnerY + endOuterY) * 0.5, r, endA - Math.PI, endA, true);
+            painter.arc(cx, cy, r2, endA, beginA, true);
+            if (config.arcStartCap != 'round')
+                painter.lineTo(begInnerX, begInnerY);
             else
-                d += "L" + begInnerX + " " + begInnerY;
-            if (config["arc-start-cap"] == 'butt')
-                d += "Z";
-            setAttribute(el, 'd', d);
+                painter.arc((begInnerX + begOuterX) * 0.5, (begInnerY + begOuterY) * 0.5, r, beginA, beginA - Math.PI, true);
         });
+        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, x, y, width, height) {
+        painter.beginPath();
+        painter.rect(x, y, width, height);
+        return painter;
     };
 
-    var SVG$1 = (function () {
-        function SVG(svg) {
-            this.name = "SVG";
-            this.__config = {
-                "fillStyle": "#000",
-                "strokeStyle": "#000",
+    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) {
+                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;
+    }
+
+    var Painter = (function () {
+        function Painter(canvas, opts, region) {
+            if (opts === void 0) { opts = {}; }
+            this.__region = null;
+            this.__specialConfig = {
+                "fontSize": 16,
+                "fontFamily": "sans-serif",
+                "fontWeight": 400,
+                "fontStyle": "normal",
+                "arcStartCap": 'butt',
+                "arcEndCap": 'butt'
+            };
+            this.__initConfig = {
+                "fillStyle": 'black',
+                "strokeStyle": 'black',
                 "lineWidth": 1,
-                "textAlign": "left",
-                "textBaseline": "middle",
-                "font-size": 16,
-                "font-family": "sans-serif",
-                "arc-start-cap": "butt",
-                "arc-end-cap": "butt",
-                "lineDash": []
+                "textAlign": 'left',
+                "textBaseline": 'middle',
+                "lineDash": [],
+                "shadowBlur": 0,
+                "shadowColor": "black"
             };
-            this.__path = "";
-            this.__currentPosition = [];
-            this.__svg = svg;
+            this.painter = canvas.getContext("2d", opts);
+            this.__region = region;
+            this.painter.textBaseline = 'middle';
+            this.painter.textAlign = 'left';
         }
-        SVG.prototype.config = function (params) {
-            if (typeof params !== 'object') {
-                return this.__config[params];
+        Painter.prototype.useConfig = function (key, value) {
+            if (this.__region) {
+                if (['fillStyle', 'strokeStyle', 'shadowBlur', 'shadowColor'].indexOf(key) < 0) {
+                    this.__region.useConfig(key, value);
+                }
+            }
+            if (key == 'lineDash') {
+                if (this.painter.setLineDash)
+                    this.painter.setLineDash(value);
+            }
+            else if (key in this.__specialConfig) {
+                this.__specialConfig[key] = value;
+            }
+            else if (key in this.__initConfig) {
+                this.painter[key] = value;
             }
             else {
-                for (var key in params) {
-                    this.__config[key] = params[key];
-                }
+                throw new Error('Illegal configuration item of painter : ' + key + " !");
             }
             return this;
         };
-        SVG.prototype.useEl = function (el) {
-            this.__useEl = el;
+        Painter.prototype.fillText = function (text, x, y, deg) {
+            if (deg === void 0) { deg = 0; }
+            if (this.__region)
+                this.__region.fillText(text, x, y, deg);
+            this.painter.save();
+            initText(this.painter, this.__specialConfig, x, y, deg).fillText(text, 0, 0);
+            this.painter.restore();
             return this;
         };
-        SVG.prototype.getEl = function () {
-            return this.__useEl;
+        Painter.prototype.strokeText = function (text, x, y, deg) {
+            if (deg === void 0) { deg = 0; }
+            if (this.__region)
+                this.__region.strokeText(text, x, y, deg);
+            this.painter.save();
+            initText(this.painter, this.__specialConfig, x, y, deg).strokeText(text, 0, 0);
+            this.painter.restore();
+            return this;
         };
-        SVG.prototype.appendEl = function (el, context) {
-            context = context || this.__svg;
-            if (typeof el == 'string')
-                el = toNode(el);
-            context.appendChild(el);
-            this.__useEl = el;
+        Painter.prototype.fullText = function (text, x, y, deg) {
+            if (deg === void 0) { deg = 0; }
+            if (this.__region)
+                this.__region.fullText(text, x, y, deg);
+            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;
         };
-        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);
+        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; }
+            if (this.__region)
+                this.__region.fillTexts(contents, x, y, width, lineHeight);
+            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;
         };
-        SVG.prototype.remove = function () {
-            if (!this.__useEl) {
-                throw new Error("Currently, no node can be deleted.");
-            }
-            else {
-                this.__useEl.parentNode.removeChild(this.__useEl);
-            }
+        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; }
+            if (this.__region)
+                this.__region.fillTexts(contents, x, y, width, lineHeight);
+            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; }
+            if (this.__region)
+                this.__region.fillTexts(contents, x, y, width, lineHeight);
+            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.__region.beginPath();
+            this.painter.beginPath();
+            return this;
+        };
+        Painter.prototype.closePath = function () {
+            if (this.__region)
+                this.__region.closePath();
+            this.painter.closePath();
+            return this;
+        };
+        Painter.prototype.moveTo = function (x, y) {
+            if (this.__region)
+                this.__region.moveTo(x, y);
+            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.__region.lineTo(x, y);
+            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.__region.arc(x, y, r, beginDeg, deg);
+            this.painter.arc(x, y, r, beginDeg, beginDeg + deg, deg < 0);
+            return this;
+        };
+        Painter.prototype.fill = function () {
+            if (this.__region)
+                this.__region.fill();
+            this.painter.fill();
+            return this;
+        };
+        Painter.prototype.stroke = function () {
+            if (this.__region)
+                this.__region.stroke();
+            this.painter.stroke();
+            return this;
+        };
+        Painter.prototype.full = function () {
+            if (this.__region)
+                this.__region.full();
+            this.painter.fill();
+            this.painter.stroke();
+            return this;
+        };
+        Painter.prototype.save = function () {
+            if (this.__region)
+                this.__region.save();
+            this.painter.save();
+            return this;
+        };
+        Painter.prototype.restore = function () {
+            if (this.__region)
+                this.__region.restore();
+            this.painter.restore();
             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;
-            }
+        Painter.prototype.quadraticCurveTo = function (cpx, cpy, x, y) {
+            if (this.__region)
+                this.__region.quadraticCurveTo(cpx, cpy, x, y);
+            this.painter.quadraticCurveTo(cpx, cpy, x, y);
+            return this;
         };
-        SVG.prototype.fillText = function (text, x, y, deg) {
-            if (deg === void 0) { deg = 0; }
-            initText(this.__useEl, this.__config, x, y, deg);
-            this.__useEl.textContent = text;
-            fill(this.__useEl, this.__config);
+        Painter.prototype.bezierCurveTo = function (cp1x, cp1y, cp2x, cp2y, x, y) {
+            if (this.__region)
+                this.__region.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y);
+            this.painter.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y);
             return this;
         };
-        SVG.prototype.strokeText = function (text, x, y, deg) {
-            if (deg === void 0) { deg = 0; }
-            initText(this.__useEl, this.__config, x, y, deg);
-            this.__useEl.textContent = text;
-            stroke(this.__useEl, this.__config);
+        Painter.prototype.clearRect = function (x, y, w, h) {
+            if (this.__region)
+                this.__region.clearRect(x, y, w, h);
+            this.painter.clearRect(x, y, w, h);
             return this;
         };
-        SVG.prototype.fullText = function (text, x, y, deg) {
-            if (deg === void 0) { deg = 0; }
-            initText(this.__useEl, this.__config, x, y, deg);
-            this.__useEl.textContent = text;
-            full(this.__useEl, this.__config);
+        Painter.prototype.fillArc = function (cx, cy, r1, r2, beginDeg, deg) {
+            if (this.__region)
+                this.__region.fillArc(cx, cy, r1, r2, beginDeg, deg);
+            initArc(this.painter, this.__specialConfig, cx, cy, r1, r2, beginDeg, deg).fill();
             return this;
         };
-        SVG.prototype.fillArc = function (cx, cy, r1, r2, beginDeg, deg) {
-            initArc(this.__useEl, this.__config, cx, cy, r1, r2, beginDeg, deg);
-            fill(this.__useEl, this.__config);
+        Painter.prototype.strokeArc = function (cx, cy, r1, r2, beginDeg, deg) {
+            if (this.__region)
+                this.__region.strokeArc(cx, cy, r1, r2, beginDeg, deg);
+            initArc(this.painter, this.__specialConfig, cx, cy, r1, r2, beginDeg, deg).stroke();
             return this;
         };
-        SVG.prototype.strokeArc = function (cx, cy, r1, r2, beginDeg, deg) {
-            initArc(this.__useEl, this.__config, cx, cy, r1, r2, beginDeg, deg);
-            stroke(this.__useEl, this.__config);
+        Painter.prototype.fullArc = function (cx, cy, r1, r2, beginDeg, deg) {
+            if (this.__region)
+                this.__region.fullArc(cx, cy, r1, r2, beginDeg, deg);
+            initArc(this.painter, this.__specialConfig, cx, cy, r1, r2, beginDeg, deg);
+            this.painter.fill();
+            this.painter.stroke();
             return this;
         };
-        SVG.prototype.fullArc = function (cx, cy, r1, r2, beginDeg, deg) {
-            initArc(this.__useEl, this.__config, cx, cy, r1, r2, beginDeg, deg);
-            full(this.__useEl, this.__config);
+        Painter.prototype.fillCircle = function (cx, cy, r) {
+            if (this.__region)
+                this.__region.fillCircle(cx, cy, r);
+            initCircle(this.painter, cx, cy, r).fill();
             return this;
         };
-        SVG.prototype.fillCircle = function (cx, cy, r) {
-            initCircle(this.__useEl, cx, cy, r);
-            fill(this.__useEl, this.__config);
+        Painter.prototype.strokeCircle = function (cx, cy, r) {
+            if (this.__region)
+                this.__region.strokeCircle(cx, cy, r);
+            initCircle(this.painter, cx, cy, r).stroke();
             return this;
         };
-        SVG.prototype.strokeCircle = function (cx, cy, r) {
-            initCircle(this.__useEl, cx, cy, r);
-            stroke(this.__useEl, this.__config);
+        Painter.prototype.fullCircle = function (cx, cy, r) {
+            if (this.__region)
+                this.__region.fullCircle(cx, cy, r);
+            initCircle(this.painter, cx, cy, r);
+            this.painter.fill();
+            this.painter.stroke();
             return this;
         };
-        SVG.prototype.fullCircle = function (cx, cy, r) {
-            initCircle(this.__useEl, cx, cy, r);
-            full(this.__useEl, this.__config);
+        Painter.prototype.fillRect = function (x, y, width, height) {
+            if (this.__region)
+                this.__region.fillRect(x, y, width, height);
+            initRect(this.painter, x, y, width, height).fill();
             return this;
         };
-        SVG.prototype.fillRect = function (x, y, width, height) {
-            initRect(this.__useEl, x, y, width, height);
-            fill(this.__useEl, this.__config);
+        Painter.prototype.strokeRect = function (x, y, width, height) {
+            if (this.__region)
+                this.__region.strokeRect(x, y, width, height);
+            initRect(this.painter, x, y, width, height).stroke();
             return this;
         };
-        SVG.prototype.strokeRect = function (x, y, width, height) {
-            initRect(this.__useEl, x, y, width, height);
-            stroke(this.__useEl, this.__config);
+        Painter.prototype.fullRect = function (x, y, width, height) {
+            if (this.__region)
+                this.__region.fullRect(x, y, width, height);
+            initRect(this.painter, x, y, width, height);
+            this.painter.fill();
+            this.painter.stroke();
             return this;
         };
-        SVG.prototype.fullRect = function (x, y, width, height) {
-            initRect(this.__useEl, x, y, width, height);
-            full(this.__useEl, this.__config);
+        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] < end) {
+                    val[i] = +(val[i] + step).toFixed(7);
+                    break;
+                }
+                else if (i < count - 1) {
+                    val[i] = begin;
+                }
+            }
+            return val;
+        };
+    }
+
+    var oldAttrName = {
+        "font-size": "fontSize",
+        "font-family": "fontFamily",
+        "font-weight": "fontWeight",
+        "font-style": "fontStyle",
+        "arc-start-cap": "arcStartCap",
+        "arc-end-cap": "arcEndCap"
+    };
+    var Canvas$1 = (function (_super) {
+        __extends(Canvas, _super);
+        function Canvas(ViewCanvas, RegionCanvas) {
+            var _this = _super.call(this, ViewCanvas, {}, new Painter(RegionCanvas, {
+                willReadFrequently: true
+            })) || this;
+            _this.name = "Canvas";
+            _this.__regionList = {};
+            _this.__regionAssemble = assemble(0, 255, 1, 3);
+            _this.setRegion("");
+            return _this;
+        }
+        Canvas.prototype.config = function (configs) {
+            for (var key in configs) {
+                var _key = oldAttrName[key] || key;
+                this.useConfig(_key, configs[key]);
+            }
             return this;
         };
-        SVG.prototype.beginPath = function () {
-            this.__currentPosition = [];
-            this.__path = "";
+        Canvas.prototype.setRegion = function (regionName) {
+            if (regionName) {
+                if (this.__regionList[regionName] == undefined) {
+                    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;
         };
-        SVG.prototype.closePath = function () {
-            this.__path += "Z";
+        Canvas.prototype.getRegion = function (x, y) {
+            var _this = this;
+            return new Promise(function (resolve, reject) {
+                var imgData = _this.__region.painter.getImageData(x - 0.5, y - 0.5, 1, 1);
+                var currentRGBA = imgData.data;
+                var doit = function () {
+                    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.getContext = function (isRegion) {
+            if (isRegion === void 0) { isRegion = false; }
+            return isRegion ? this.__region.painter : this.painter;
+        };
+        return Canvas;
+    }(Painter));
+
+    var Canvas = (function (_super) {
+        __extends(Canvas, _super);
+        function Canvas(el) {
+            var _this = this;
+            if (!el) {
+                throw new Error("VISLite Canvas:The mount point requires an HTMLElement type but encountered null.");
+            }
+            var width = el.clientWidth, height = el.clientHeight;
+            var ViewCanvas, RegionCanvas;
+            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);
+                RegionCanvas = document.createElement('canvas');
+                _el._vislite_canvas_ = [ViewCanvas, RegionCanvas];
+                el.setAttribute('vislite', 'Canvas');
+            }
+            for (var _i = 0, _a = [ViewCanvas, RegionCanvas]; _i < _a.length; _i++) {
+                var canvas = _a[_i];
+                canvas.style.width = width + "px";
+                canvas.setAttribute('width', width + "");
+                canvas.style.height = height + "px";
+                canvas.setAttribute('height', height + "");
+            }
+            _this = _super.call(this, ViewCanvas, RegionCanvas) || this;
+            _this.__canvas = ViewCanvas;
+            return _this;
+        }
+        Canvas.prototype.toDataURL = function () {
+            var _this = this;
+            return new Promise(function (resolve) {
+                resolve(_this.__canvas.toDataURL());
+            });
+        };
+        return Canvas;
+    }(Canvas$1));
+
+    function getWebGLContext (canvas, scale, opts) {
+        if (opts === void 0) { opts = {}; }
+        var names = ["webgl", "experimental-webgl", "webkit-3d", "moz-webgl"], painter = null;
+        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 viewWidth = width * scale;
+        var viewHeight = height * scale;
+        painter.viewport((width - viewWidth) * 0.5, (height - viewHeight) * 0.5, viewWidth, viewHeight);
+        painter.depthFunc(painter.LEQUAL);
+        painter.enable(painter.DEPTH_TEST);
+        return painter;
+    }
+
+    function getColorFactory (painter) {
+        var width = painter.drawingBufferWidth, height = painter.drawingBufferHeight;
+        var pixels = new Uint8Array(4 * width * height);
+        painter.readPixels(0, 0, width, height, painter.RGBA, painter.UNSIGNED_BYTE, pixels);
+        return function (x, y) {
+            y = height - y;
+            var pixelR = pixels[4 * (y * width + x)];
+            var pixelG = pixels[4 * (y * width + x) + 1];
+            var pixelB = pixels[4 * (y * width + x) + 2];
+            var pixelA = pixels[4 * (y * width + x) + 3];
+            return "rgba(" + pixelR + "," + pixelG + "," + pixelB + "," + pixelA + ")";
+        };
+    }
+
+    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;
         };
-        SVG.prototype.moveTo = function (x, y) {
-            this.__currentPosition = [x, y];
-            this.__path += "M" + x + " " + y;
+        BufferObject.prototype.write = function (data) {
+            writeBuffer(this.__painter, data, this.__isElement, this.__painter.STATIC_DRAW);
+            this.__fsize = data.BYTES_PER_ELEMENT;
             return this;
         };
-        SVG.prototype.lineTo = function (x, y) {
-            this.__currentPosition = [x, y];
-            this.__path += (this.__path == "" ? "M" : "L") + x + " " + y;
+        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;
         };
-        SVG.prototype.fill = function () {
-            initPath(this.__useEl, this.__path);
-            fill(this.__useEl, this.__config);
+        return BufferObject;
+    }());
+
+    var initTexture = function (painter, type, unit) {
+        var texture = painter.createTexture();
+        if (type == painter.TEXTURE_2D) {
+            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
+        ], 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;
         };
-        SVG.prototype.stroke = function () {
-            initPath(this.__useEl, this.__path);
-            stroke(this.__useEl, this.__config);
+        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;
         };
-        SVG.prototype.full = function () {
-            initPath(this.__useEl, this.__path);
-            full(this.__useEl, this.__config);
+        return TextureObject;
+    }());
+
+    var textures = {};
+    function getTexture (type, painter, kind) {
+        var uniqueName = type + "-" + kind;
+        if (!textures[uniqueName]) {
+            textures[uniqueName] = new TextureObject(painter, kind);
+        }
+        return textures[uniqueName];
+    }
+
+    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;
         };
-        SVG.prototype.arc = function (x, y, r, beginDeg, deg) {
-            var begPosition = rotate(x, y, beginDeg, x + r, y);
-            var endPosition = rotate(x, y, beginDeg + deg, x + r, y);
-            beginDeg = beginDeg / Math.PI * 180;
-            deg = deg / Math.PI * 180;
-            if (this.__path == '') {
-                this.__path += "M" + begPosition[0] + "," + begPosition[1];
+        ShaderObject.prototype.compile = function (vshaderSource, fshaderSource) {
+            this.program = useShader(this.__painter, vshaderSource, fshaderSource);
+            return this;
+        };
+        return ShaderObject;
+    }());
+
+    var shaders = {};
+    function getShader (type, painter, mesh) {
+        var uniqueName = type +
+            (mesh.geometry.attributes.normal ? "1" : "0") +
+            (mesh.material.image ? "1" : "0") +
+            (mesh.material.color ? "1" : "0") +
+            (mesh.material.cube ? "1" : "0");
+        if (shaders[uniqueName])
+            return shaders[uniqueName].use();
+        var vertexShader = "\n     attribute vec4 a_position;\n\n     ".concat(mesh.geometry.attributes.normal ? 'attribute vec4 a_normal;varying vec3 v_normal;' : '', "\n\n    uniform mat4 u_matrix_world;\n    uniform mat4 u_matrix_mesh;\n    uniform mat4 u_matrix_proporion;\n\n    ").concat(mesh.material.image ? 'attribute vec2 a_textcoord;varying vec2 v_textcoord;' : '', "\n\n    void main(){\n        vec4 temp = a_position;\n\n        // \u5E94\u7528\u53D8\u6362\u77E9\u9635\uFF1A\u5C4F\u5E55\u6BD4\u8C03\u5E73\u77E9\u9635\u3001\u4E16\u754C\u77E9\u9635\u3001\u7269\u4F53\u77E9\u9635\n        temp = u_matrix_proporion * u_matrix_world * u_matrix_mesh * temp;\n\n        // \u628A\u539F\u751F\u7684WebGL\u4F7F\u7528\u7684\u5DE6\u624B\u5750\u6807\u7CFB\u53D8\u6210\u4E86\u53F3\u624B\u5750\u6807\u7CFB\n        temp.z = -1.0 * temp.z;\n\n        // \u8868\u793A\u773C\u775B\u8DDD\u79BBvec4(0.0,0.0,1.0)\u7684\u8DDD\u79BB\n        float dist = 4.0;\n\n        // \u4F7F\u7528\u6295\u5F71\u76F4\u63A5\u8BA1\u7B97\n        // \u4E3A\u4FDD\u8BC1\u7EB9\u7406\u548C\u76F8\u5BF9\u4F4D\u7F6E\u6B63\u786E\n        // x\u3001y\u3001z\u7684\u6539\u53D8\u6EE1\u8DB3\u7EBF\u6027\u53D8\u6362\n        gl_Position = vec4((dist + 1.0) * temp.x, (dist + 1.0) * temp.y, dist * (dist + temp.z) + 1.0 - dist * dist, temp.w * 2.0 * (dist + temp.z));\n\n        ").concat(mesh.geometry.attributes.normal ? 'v_normal = normalize(vec3(a_normal));' : '', "\n        ").concat(mesh.material.image ? 'v_textcoord = a_textcoord;' : '', "\n     }\n ");
+        var fragmentShader = "\n    precision mediump float;\n\n    ".concat(mesh.geometry.attributes.normal ? 'varying vec3 v_normal;' : '', "\n    ").concat(mesh.material.color ? 'uniform vec4 u_color;' : '', "\n    ").concat(mesh.material.cube ? 'uniform samplerCube u_texture;' : '', "\n    ").concat(mesh.material.image ? 'uniform sampler2D u_sampler;varying vec2 v_textcoord;' : '', "\n\n    void main(){\n        ").concat(mesh.material.color ? 'gl_FragColor = u_color;' : '', "\n        ").concat(mesh.material.cube ? 'gl_FragColor = textureCube(u_texture,normalize(v_normal));' : '', "\n        ").concat(mesh.material.image ? 'gl_FragColor = texture2D(u_sampler,v_textcoord);' : '', "\n    }\n ");
+        var shader = new ShaderObject(painter).compile(vertexShader, fragmentShader).use();
+        shaders[uniqueName] = shader;
+        return shader;
+    }
+
+    function doDraw (type, painter, mesh, meshWorld, globalWorld) {
+        var shader = getShader(type, painter, mesh);
+        new BufferObject(painter).use()
+            .write(mesh.geometry.attributes.position.array)
+            .divide(painter.getAttribLocation(shader.program, "a_position"), mesh.geometry.attributes.position.itemSize, 3, 0);
+        painter.uniformMatrix4fv(painter.getUniformLocation(shader.program, "u_matrix_world"), false, globalWorld.matrix);
+        painter.uniformMatrix4fv(painter.getUniformLocation(shader.program, "u_matrix_proporion"), false, globalWorld.proporion);
+        painter.uniformMatrix4fv(painter.getUniformLocation(shader.program, "u_matrix_mesh"), false, meshWorld.matrix);
+        if (mesh.geometry.attributes.normal) {
+            new BufferObject(painter).use()
+                .write(mesh.geometry.attributes.normal.array)
+                .divide(painter.getAttribLocation(shader.program, "a_normal"), mesh.geometry.attributes.normal.itemSize, 3, 0);
+        }
+        if ("color" in mesh.material) {
+            painter.uniform4f(painter.getUniformLocation(shader.program, "u_color"), mesh.material.color.r, mesh.material.color.g, mesh.material.color.b, mesh.material.color.alpha);
+        }
+        else if ("cube" in mesh.material) {
+            var size = mesh.material.cube.right.image.value.width;
+            getTexture(type, painter, 'cube').useCube([
+                mesh.material.cube.right.image.value,
+                mesh.material.cube.left.image.value,
+                mesh.material.cube.top.image.value,
+                mesh.material.cube.bottom.image.value,
+                mesh.material.cube.far.image.value,
+                mesh.material.cube.near.image.value
+            ], size, size);
+        }
+        else if ("image" in mesh.material) {
+            painter.uniform1i(painter.getUniformLocation(shader.program, "u_sampler"), 0);
+            new BufferObject(painter).use()
+                .write(mesh.geometry.attributes.uv.array)
+                .divide(painter.getAttribLocation(shader.program, "a_textcoord"), mesh.geometry.attributes.uv.itemSize, 2, 0);
+            getTexture(type, painter, '2d').useImage(mesh.material.image.value);
+        }
+        if (mesh.geometry.index) {
+            new BufferObject(painter, true).use()
+                .write(mesh.geometry.index.array);
+            painter.drawElements(painter[mesh.geometry.type], mesh.geometry.index.count, painter.UNSIGNED_BYTE, 0);
+        }
+        else {
+            painter.drawArrays(painter[mesh.geometry.type], 0, mesh.geometry.attributes.position.count);
+        }
+    }
+
+    var needUpdate = false;
+    var scale = 10;
+    var WebGL$1 = (function () {
+        function WebGL(ViewCanvas, RegionCanvas) {
+            this.name = "WebGL";
+            this.__getColor = function (x, y) { return "rgba(0,0,0,1)"; };
+            this.__regionList = {};
+            this.__regionAssemble = assemble(0, 1, 0.2, 3);
+            this.__regionName = "";
+            this.__regionColor = [0, 0, 0, 1];
+            this.__scene = {
+                children: [],
+                matrix: new Matrix4([
+                    1, 0, 0, 0,
+                    0, 1, 0, 0,
+                    0, 0, 1, 0,
+                    0, 0, 0, scale
+                ])
+            };
+            this.__unique = new Date().valueOf();
+            this.painter = getWebGLContext(ViewCanvas, scale);
+            this.__regionPainter = getWebGLContext(RegionCanvas, scale, {});
+            var proportion = this.painter.canvas.width / this.painter.canvas.height;
+            var xProportion = 1;
+            var yProportion = 1;
+            if (proportion > 1) {
+                xProportion = 1 / proportion;
             }
-            else if (begPosition[0] != this.__currentPosition[0] || begPosition[1] != this.__currentPosition[1]) {
-                this.__path += "L" + begPosition[0] + "," + begPosition[1];
+            else {
+                yProportion = proportion;
             }
-            this.__path += "A" + r + "," + r + " 0 " + ((deg > 180 || deg < -180) ? 1 : 0) + "," + (deg > 0 ? 1 : 0) + " " + endPosition[0] + "," + endPosition[1];
-            return this;
+            var zProportion = Math.min(xProportion, yProportion);
+            this.__proporion = [
+                xProportion, 0, 0, 0,
+                0, yProportion, 0, 0,
+                0, 0, zProportion, 0,
+                0, 0, 0, 1
+            ];
+        }
+        WebGL.prototype.matrix = function (initMatrix4) {
+            return new Matrix4(initMatrix4);
         };
-        SVG.prototype.quadraticCurveTo = function (cpx, cpy, x, y) {
-            this.__path += "Q" + cpx + " " + cpy + "," + x + " " + y;
-            return this;
+        WebGL.prototype.getMatrix = function () {
+            return this.__scene.matrix;
         };
-        SVG.prototype.bezierCurveTo = function (cp1x, cp1y, cp2x, cp2y, x, y) {
-            this.__path += "C" + cp1x + " " + cp1y + "," + cp2x + " " + cp2y + "," + x + " " + y;
-            return this;
+        WebGL.prototype.getObject3D = function () {
+            return this.__scene.children;
         };
-        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.");
+        WebGL.prototype.review = function (isUpdateRegion) {
+            if (isUpdateRegion === void 0) { isUpdateRegion = false; }
+            if (isUpdateRegion) {
+                this.__regionPainter.clearColor(1, 1, 1, 1);
+                this.__regionPainter.clear(this.__regionPainter.COLOR_BUFFER_BIT);
             }
-            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;
-    }(SVG$1));
-
-    var $timers = [];
-    var $interval = 13;
-    var $timerId;
-    function animation (doback, duration, callback) {
-        if (duration === void 0) { duration = 400; }
-        if (callback === void 0) { callback = function () { }; }
-        var clock = {
-            "timer": function (tick, duration, callback) {
-                if (!tick) {
-                    throw new Error('Tick is required!');
+            else {
+                this.painter.clearColor(1, 1, 1, 1);
+                this.painter.clear(this.painter.COLOR_BUFFER_BIT);
+            }
+            for (var index = 0; index < this.__scene.children.length; index++) {
+                this.draw(this.__scene.children[index], isUpdateRegion);
+            }
+            return this;
+        };
+        WebGL.prototype.draw = function (object3D, isUpdateRegion) {
+            if (isUpdateRegion === void 0) { isUpdateRegion = false; }
+            if (!isUpdateRegion)
+                needUpdate = true;
+            var meshWorld = {
+                matrix: object3D.matrix.value()
+            };
+            var globalWorld = {
+                matrix: this.__scene.matrix.value(),
+                proporion: this.__proporion
+            };
+            this.setRegion(object3D.region);
+            for (var index = 0; index < object3D.mesh.length; index++) {
+                if (isUpdateRegion) {
+                    doDraw("painter" + this.__unique, this.__regionPainter, {
+                        geometry: object3D.mesh[index].geometry,
+                        material: {
+                            color: {
+                                r: this.__regionColor[0],
+                                g: this.__regionColor[1],
+                                b: this.__regionColor[2],
+                                alpha: this.__regionColor[3]
+                            }
+                        }
+                    }, meshWorld, globalWorld);
+                    this.__getColor = getColorFactory(this.__regionPainter);
                 }
-                var id = new Date().valueOf() + "_" + (Math.random() * 1000).toFixed(0);
-                $timers.push({
-                    "id": id,
-                    "createTime": new Date(),
-                    "tick": tick,
-                    "duration": duration,
-                    "callback": callback
-                });
-                clock.start();
-                return id;
-            },
-            "start": function () {
-                if (!$timerId) {
-                    $timerId = setInterval(clock.tick, $interval);
+                else {
+                    doDraw("region" + this.__unique, this.painter, object3D.mesh[index], meshWorld, globalWorld);
                 }
-            },
-            "tick": function () {
-                var createTime, flag, tick, callback, timer, duration, passTime, timers = $timers;
-                $timers = [];
-                $timers.length = 0;
-                for (flag = 0; flag < timers.length; flag++) {
-                    timer = timers[flag];
-                    createTime = timer.createTime;
-                    tick = timer.tick;
-                    duration = timer.duration;
-                    callback = timer.callback;
-                    passTime = (+new Date().valueOf() - createTime.valueOf()) / duration;
-                    passTime = passTime > 1 ? 1 : passTime;
-                    tick(passTime);
-                    if (passTime < 1 && timer.id) {
-                        $timers.push(timer);
-                    }
-                    else {
-                        callback(passTime);
-                    }
+            }
+        };
+        WebGL.prototype.render = function (object3D) {
+            if (!('matrix' in object3D))
+                object3D.matrix = new Matrix4();
+            if (!('region' in object3D))
+                object3D.region = "";
+            for (var index = 0; index < object3D.mesh.length; index++) {
+                var mesh = object3D.mesh[index];
+                if (mesh.geometry.attributes.normal && Array.isArray(mesh.geometry.attributes.normal.array)) {
+                    mesh.geometry.attributes.normal.array = new Float32Array(mesh.geometry.attributes.normal.array);
                 }
-                if ($timers.length <= 0) {
-                    clock.stop();
+                if (mesh.geometry.attributes.position && Array.isArray(mesh.geometry.attributes.position.array)) {
+                    mesh.geometry.attributes.position.array = new Float32Array(mesh.geometry.attributes.position.array);
                 }
-            },
-            "stop": function () {
-                if ($timerId) {
-                    clearInterval($timerId);
-                    $timerId = null;
+                if (mesh.geometry.attributes.uv && Array.isArray(mesh.geometry.attributes.uv.array)) {
+                    mesh.geometry.attributes.uv.array = new Float32Array(mesh.geometry.attributes.uv.array);
+                }
+                if (mesh.geometry.index && Array.isArray(mesh.geometry.index.array)) {
+                    mesh.geometry.index.array = new Uint8Array(mesh.geometry.index.array);
                 }
             }
+            this.__scene.children.push(object3D);
+            this.draw(object3D);
         };
-        var id = clock.timer(function (deep) {
-            doback(deep);
-        }, duration, callback);
-        return function () {
-            var i;
-            for (i in $timers) {
-                if ($timers[i].id == id) {
-                    $timers[i].id = undefined;
-                    return;
+        WebGL.prototype.setRegion = function (regionName) {
+            this.__regionName = regionName + "";
+            if (regionName) {
+                if (this.__regionList[regionName] == undefined) {
+                    this.__regionList[regionName] = __spreadArray(__spreadArray([], this.__regionAssemble(), true), [1], false);
                 }
+                this.__regionColor = this.__regionList[regionName];
             }
+            else {
+                this.__regionColor = [0, 0, 0, 1];
+            }
+            return this;
         };
-    }
+        WebGL.prototype.getRegion = function (x, y) {
+            var _this = this;
+            if (needUpdate)
+                this.review(true);
+            needUpdate = false;
+            return new Promise(function (resolve, reject) {
+                var rgba = _this.__getColor(x, y);
+                for (var key in _this.__regionList) {
+                    var currentRGBA = _this.__regionList[key];
+                    if ("rgba(" + currentRGBA[0] * 255 + "," + currentRGBA[1] * 255 + "," + currentRGBA[2] * 255 + "," + currentRGBA[3] * 255 + ")" == rgba) {
+                        resolve(key);
+                        break;
+                    }
+                }
+                resolve("");
+            });
+        };
+        return WebGL;
+    }());
 
-    function ruler (maxValue, minValue, num) {
-        if (maxValue < minValue) {
-            var temp = minValue;
-            minValue = maxValue;
-            maxValue = temp;
+    var WebGL = (function (_super) {
+        __extends(WebGL, _super);
+        function WebGL(el) {
+            if (!el) {
+                throw new Error("VISLite WebGL:The mount point requires an HTMLElement type but encountered null.");
+            }
+            var width = el.clientWidth, height = el.clientHeight;
+            var ViewCanvas, RegionCanvas;
+            var _el = el;
+            if (_el._vislite_canvas_) {
+                ViewCanvas = _el._vislite_canvas_[0];
+                RegionCanvas = _el._vislite_canvas_[1];
+            }
+            else {
+                RegionCanvas = document.createElement('canvas');
+                el.appendChild(RegionCanvas);
+                RegionCanvas.style.position = 'absolute';
+                RegionCanvas.style.zIndex = "-1";
+                ViewCanvas = document.createElement('canvas');
+                el.appendChild(ViewCanvas);
+                _el._vislite_canvas_ = [ViewCanvas, RegionCanvas];
+                el.setAttribute('vislite', 'WebGL');
+            }
+            for (var _i = 0, _a = [ViewCanvas, RegionCanvas]; _i < _a.length; _i++) {
+                var canvas = _a[_i];
+                canvas.style.width = width + "px";
+                canvas.setAttribute('width', width + "");
+                canvas.style.height = height + "px";
+                canvas.setAttribute('height', height + "");
+            }
+            return _super.call(this, ViewCanvas, RegionCanvas) || this;
         }
-        else if (maxValue == minValue) {
-            return [maxValue];
+        return WebGL;
+    }(WebGL$1));
+
+    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;
         }
-        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;
+        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
+                ];
+            };
+        }
+        return Mercator;
+    }());
+
+    var mousePosition = function (el, event) {
+        var bounding = el.getBoundingClientRect();
+        return {
+            "x": event.clientX - bounding.left,
+            "y": event.clientY - bounding.top
+        };
+    };
+    var getKeyString = function (event) {
+        return {
+            37: "left",
+            38: "up",
+            39: "right",
+            40: "down",
+        }[event.keyCode || event.which];
+    };
+    function viewHandler (callback) {
+        var el = document.getElementsByTagName('body')[0];
+        el.addEventListener("keydown", function (event) {
+            var keyCode = getKeyString(event);
+            if (keyCode == 'up') {
+                callback({
+                    type: "lookUp",
+                    normal: [],
+                    value: 0.1
+                });
             }
-            if (_times100_base == 10) {
-                return Math.pow(10, _times100);
+            else if (keyCode == 'down') {
+                callback({
+                    type: "lookDown",
+                    normal: [],
+                    value: 0.1
+                });
             }
-            else {
-                var temp = "0.";
-                for (var i = 1; i < _times100; i++) {
-                    temp += "0";
-                }
-                return +(temp + "1");
+            else if (keyCode == 'left') {
+                callback({
+                    type: "lookLeft",
+                    normal: [],
+                    value: 0.1
+                });
             }
-        })(maxValue - minValue);
-        var distance100 = Math.ceil((maxValue - minValue) * times100 / num);
-        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] || distance100;
-        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);
+            else if (keyCode == 'right') {
+                callback({
+                    type: "lookRight",
+                    normal: [],
+                    value: 0.1
+                });
+            }
+        });
+        var mouseP = null;
+        var doMove = function (event) {
+            if (mouseP == null)
+                return;
+            var tempMouseP = mousePosition(el, event);
+            var normal = [tempMouseP.x - mouseP.x, tempMouseP.y - mouseP.y];
+            var rotateNormal = [
+                normal[1],
+                normal[0],
+                0
+            ];
+            if (rotateNormal[0] == 0 && rotateNormal[1] == 0)
+                return;
+            callback({
+                type: "rotate",
+                normal: rotateNormal,
+                value: (Math.abs(tempMouseP.x - mouseP.x) + Math.abs(tempMouseP.y - mouseP.y)) * 0.01
+            });
+            mouseP = tempMouseP;
+        };
+        el.addEventListener("mousedown", function (event) {
+            mouseP = mousePosition(el, event);
+        });
+        el.addEventListener("mouseup", function (event) {
+            mouseP = null;
+        });
+        el.addEventListener("mousemove", function (event) {
+            doMove(event);
+        });
+        el.addEventListener("touchend", function (event) {
+            mouseP = null;
+        });
+        el.addEventListener("touchstart", function (event) {
+            mouseP = mousePosition(el, event);
+        });
+        el.addEventListener("touchmove", function (event) {
+            doMove(event.touches[0]);
+        });
+        var doScale = function (value) {
+            if (value == 0)
+                return;
+            var baseTimes = 0.899;
+            callback({
+                type: "scale",
+                value: value < 0 ? baseTimes : 2 - baseTimes,
+                normal: []
+            });
+        };
+        el.addEventListener("mousewheel", function (event) {
+            doScale(event.wheelDelta);
+        });
+        if (window.addEventListener) {
+            window.addEventListener('DOMMouseScroll', function (event) {
+                doScale(-1 * event.detail);
+            }, false);
         }
-        return rulerArray;
     }
 
     var index = {
-        Canvas: Canvas,
         Cardinal: Cardinal,
-        Eoap: Eoap,
-        getLoopColors: getLoopColors,
         Hermite: Hermite,
         Matrix4: Matrix4,
-        rotate: rotate,
-        SVG: SVG,
+        rotate: rotate$1,
+        getLoopColors: getLoopColors,
         animation: animation,
-        ruler: ruler
+        ruler: ruler,
+        SVG: SVG,
+        Canvas: Canvas,
+        WebGL: WebGL,
+        Eoap: Eoap,
+        Mercator: Mercator,
+        viewHandler: viewHandler
     };
 
     return index;