vislite 0.5.0 → 0.5.2-alpha.0

package/lib/index.umd.js

@@ -1,2834 +0,0 @@
-/*!
-* VISLite JavaScript Library v0.5.0
-* 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 Sep 30 2023 19:14:04 GMT+0800 (中国标准时间)
-*/
-(function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
-    typeof define === 'function' && define.amd ? define(factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.VISLite = factory());
-})(this, (function () { 'use strict';
-
-    var Hermite = (function () {
-        function Hermite(u) {
-            if (u === void 0) { u = 0.5; }
-            this.name = 'Hermite';
-            this.__u = u;
-        }
-        Hermite.prototype.setP = function (x1, y1, x2, y2, s1, s2) {
-            if (x1 < x2) {
-                this.__a = x1;
-                this.__b = x2;
-                var p3 = this.__u * s1, p4 = this.__u * s2;
-                y1 /= (x2 - x1);
-                y2 /= (x2 - x1);
-                this.__MR = [
-                    2 * y1 - 2 * y2 + p3 + p4,
-                    3 * y2 - 3 * y1 - 2 * p3 - p4,
-                    p3,
-                    y1
-                ];
-            }
-            else
-                throw new Error('The point x-position should be increamented!');
-            return this;
-        };
-        Hermite.prototype.use = function (x) {
-            if (this.__MR) {
-                var sx = (x - this.__a) / (this.__b - this.__a), sx2 = sx * sx, sx3 = sx * sx2;
-                var sResult = sx3 * this.__MR[0] + sx2 * this.__MR[1] + sx * this.__MR[2] + this.__MR[3];
-                return sResult * (this.__b - this.__a);
-            }
-            else
-                throw new Error('You shoud first set the position!');
-        };
-        return Hermite;
-    }());
-
-    var Cardinal = (function () {
-        function Cardinal(t) {
-            if (t === void 0) { t = 0; }
-            this.name = 'Cardinal';
-            this.__t = t;
-        }
-        Cardinal.prototype.setP = function (points) {
-            this.__HS = {
-                "x": [],
-                "h": []
-            };
-            var flag, slope = (points[1][1] - points[0][1]) / (points[1][0] - points[0][0]), temp;
-            this.__HS.x[0] = points[0][0];
-            for (flag = 1; flag < points.length; flag++) {
-                if (points[flag][0] <= points[flag - 1][0])
-                    throw new Error('The point position should be increamented!');
-                this.__HS.x[flag] = points[flag][0];
-                if (flag < points.length - 1) {
-                    if ((points[flag + 1][1] > points[flag][1] && points[flag - 1][1] > points[flag][1]) ||
-                        (points[flag + 1][1] < points[flag][1] && points[flag - 1][1] < points[flag][1]) ||
-                        points[flag + 1][1] == points[flag][1] ||
-                        points[flag - 1][1] == points[flag][1]) {
-                        temp = 0;
-                    }
-                    else {
-                        temp = (points[flag + 1][1] - points[flag - 1][1]) / (points[flag + 1][0] - points[flag - 1][0]);
-                    }
-                }
-                else {
-                    temp = (points[flag][1] - points[flag - 1][1]) / (points[flag][0] - points[flag - 1][0]);
-                }
-                this.__HS.h[flag - 1] = new Hermite((1 - this.__t) * 0.5).setP(points[flag - 1][0], points[flag - 1][1], points[flag][0], points[flag][1], slope, temp);
-                slope = temp;
-            }
-            return this;
-        };
-        Cardinal.prototype.use = function (x) {
-            if (this.__HS) {
-                this.__i = -1;
-                while (this.__i + 1 < this.__HS.x.length && (x > this.__HS.x[this.__i + 1] || (this.__i == -1 && x >= this.__HS.x[this.__i + 1]))) {
-                    this.__i += 1;
-                }
-                if (this.__i < 0) {
-                    return this.__HS.h[0].use(this.__HS.x[0]);
-                }
-                else if (this.__i >= this.__HS.h.length) {
-                    return this.__HS.h[this.__HS.h.length - 1].use(this.__HS.x[this.__HS.x.length - 1]);
-                }
-                return this.__HS.h[this.__i].use(x);
-            }
-            else {
-                throw new Error('You shoud first set the position!');
-            }
-        };
-        return Cardinal;
-    }());
-
-    function _move (d, a, b, c) {
-        if (c === void 0) { c = 0; }
-        var sqrt = Math.sqrt(a * a + b * b + c * c);
-        return [
-            1, 0, 0, 0,
-            0, 1, 0, 0,
-            0, 0, 1, 0,
-            a * d / sqrt, b * d / sqrt, c * d / sqrt, 1
-        ];
-    }
-
-    function _rotate (deg) {
-        var sin = Math.sin(deg), cos = Math.cos(deg);
-        return [
-            cos, sin, 0, 0,
-            -sin, cos, 0, 0,
-            0, 0, 1, 0,
-            0, 0, 0, 1
-        ];
-    }
-
-    function _scale (xTimes, yTimes, zTimes, cx, cy, cz) {
-        if (cx === void 0) { cx = 0; }
-        if (cy === void 0) { cy = 0; }
-        if (cz === void 0) { cz = 0; }
-        return [
-            xTimes, 0, 0, 0,
-            0, yTimes, 0, 0,
-            0, 0, zTimes, 0,
-            cx - cx * xTimes, cy - cy * yTimes, cz - cz * zTimes, 1
-        ];
-    }
-
-    function _transform (a1, b1, c1, a2, b2, c2) {
-        if (typeof a1 === 'number' && typeof b1 === 'number') {
-            if (typeof c1 !== 'number') {
-                c1 = 0;
-                a2 = a1;
-                b2 = b1;
-                c2 = 1;
-            }
-            else if (typeof a2 !== 'number' || typeof b2 !== 'number' || typeof c2 !== 'number') {
-                a2 = a1;
-                b2 = b1;
-                c2 = c1;
-                a1 = 0;
-                b1 = 0;
-                c1 = 0;
-            }
-            if (a1 == a2 && b1 == b2 && c1 == c2)
-                throw new Error('It\'s not a legitimate ray!');
-            var sqrt1 = Math.sqrt((a2 - a1) * (a2 - a1) + (b2 - b1) * (b2 - b1)), cos1 = sqrt1 != 0 ? (b2 - b1) / sqrt1 : 1, sin1 = sqrt1 != 0 ? (a2 - a1) / sqrt1 : 0, b = (a2 - a1) * sin1 + (b2 - b1) * cos1, c = c2 - c1, sqrt2 = Math.sqrt(b * b + c * c), cos2 = sqrt2 != 0 ? c / sqrt2 : 1, sin2 = sqrt2 != 0 ? b / sqrt2 : 0;
-            return [
-                [
-                    cos1, cos2 * sin1, sin1 * sin2, 0,
-                    -sin1, cos1 * cos2, cos1 * sin2, 0,
-                    0, -sin2, cos2, 0,
-                    b1 * sin1 - a1 * cos1, c1 * sin2 - a1 * sin1 * cos2 - b1 * cos1 * cos2, -a1 * sin1 * sin2 - b1 * cos1 * sin2 - c1 * cos2, 1
-                ],
-                [
-                    cos1, -sin1, 0, 0,
-                    cos2 * sin1, cos2 * cos1, -sin2, 0,
-                    sin1 * sin2, cos1 * sin2, cos2, 0,
-                    a1, b1, c1, 1
-                ]
-            ];
-        }
-        else {
-            throw new Error('a1 and b1 is required!');
-        }
-    }
-
-    var _multiply = function (matrix4, param) {
-        var newParam = [];
-        for (var i = 0; i < 4; i++)
-            for (var j = 0; j < param.length / 4; j++)
-                newParam[j * 4 + i] =
-                    matrix4[i] * param[j * 4] +
-                        matrix4[i + 4] * param[j * 4 + 1] +
-                        matrix4[i + 8] * param[j * 4 + 2] +
-                        matrix4[i + 12] * param[j * 4 + 3];
-        return newParam;
-    };
-    var Matrix4 = (function () {
-        function Matrix4(initMatrix4) {
-            if (initMatrix4 === void 0) { initMatrix4 = [
-                1, 0, 0, 0,
-                0, 1, 0, 0,
-                0, 0, 1, 0,
-                0, 0, 0, 1
-            ]; }
-            this.name = 'Matrix4';
-            this.__matrix4 = initMatrix4;
-        }
-        Matrix4.prototype.move = function (dis, a, b, c) {
-            if (c === void 0) { c = 0; }
-            this.__matrix4 = _multiply(_move(dis, a, b, c), this.__matrix4);
-            return this;
-        };
-        Matrix4.prototype.rotate = function (deg, a1, b1, c1, a2, b2, c2) {
-            var matrix4s = _transform(a1, b1, c1, a2, b2, c2);
-            this.__matrix4 = _multiply(_multiply(_multiply(matrix4s[1], _rotate(deg)), matrix4s[0]), this.__matrix4);
-            return this;
-        };
-        Matrix4.prototype.scale = function (xTimes, yTimes, zTimes, cx, cy, cz) {
-            if (cx === void 0) { cx = 0; }
-            if (cy === void 0) { cy = 0; }
-            if (cz === void 0) { cz = 0; }
-            this.__matrix4 = _multiply(_scale(xTimes, yTimes, zTimes, cx, cy, cz), this.__matrix4);
-            return this;
-        };
-        Matrix4.prototype.multiply = function (newMatrix4, flag) {
-            if (flag === void 0) { flag = false; }
-            this.__matrix4 = flag ? _multiply(this.__matrix4, newMatrix4) : _multiply(newMatrix4, this.__matrix4);
-            return this;
-        };
-        Matrix4.prototype.use = function (x, y, z, w) {
-            if (z === void 0) { z = 0; }
-            if (w === void 0) { w = 1; }
-            return _multiply(this.__matrix4, [x, y, z, w]);
-        };
-        Matrix4.prototype.value = function () {
-            return this.__matrix4;
-        };
-        return Matrix4;
-    }());
-
-    function rotate$1 (cx, cy, deg, x, y) {
-        var cos = Math.cos(deg), sin = Math.sin(deg);
-        return [
-            (x - cx) * cos - (y - cy) * sin + cx,
-            (x - cx) * sin + (y - cy) * cos + cy
-        ];
-    }
-
-    function 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 toHex = function (value) {
-        var hex = value.toString(16);
-        return hex.length == 1 ? ("0" + hex) : hex;
-    };
-    function formatColor (color, format) {
-        var colorNode = document.getElementsByTagName('head')[0];
-        colorNode.style['color'] = color;
-        var allStyle = document.defaultView && document.defaultView.getComputedStyle ?
-            document.defaultView.getComputedStyle(colorNode, null) :
-            colorNode.currentStyle;
-        var oralFormat = allStyle.getPropertyValue('color').replace(/rgba?\(/, '').replace(")", "").split(',');
-        for (var index = 0; index < oralFormat.length; index++) {
-            oralFormat[index] = +oralFormat[index];
-        }
-        oralFormat.push(1);
-        switch (format) {
-            case "3d": {
-                return [
-                    oralFormat[0] / 255,
-                    oralFormat[1] / 255,
-                    oralFormat[2] / 255,
-                    oralFormat[3]
-                ];
-            }
-            case "rgba": {
-                return "rgba(".concat(oralFormat[0], ", ").concat(oralFormat[1], ", ").concat(oralFormat[2], ", ").concat(oralFormat[3], ")");
-            }
-            case "rgb": {
-                return "rgb(".concat(oralFormat[0], ", ").concat(oralFormat[1], ", ").concat(oralFormat[2], ")");
-            }
-            case "hexAlpha": {
-                return "#".concat(toHex(oralFormat[0])).concat(toHex(oralFormat[1])).concat(toHex(oralFormat[2])).concat(toHex(+(oralFormat[3] * 255).toFixed(0)));
-            }
-            case "hex": {
-                return "#".concat(toHex(oralFormat[0])).concat(toHex(oralFormat[1])).concat(toHex(oralFormat[2]));
-            }
-        }
-        throw new Error("Unsupported color format: " + format);
-    }
-
-    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 = void 0;
-                    return;
-                }
-            }
-        };
-    }
-
-    function ruler (maxValue, minValue, num, option) {
-        if (maxValue < minValue) {
-            var temp = minValue;
-            minValue = maxValue;
-            maxValue = temp;
-        }
-        else if (maxValue == minValue) {
-            return [maxValue];
-        }
-        var times100 = (function (_value) {
-            var _times100_base = (_value < 100 && _value > -100) ? 10 : 0.1;
-            var _times100 = -1, _tiemsValue = _value;
-            while (_times100_base == 10 ?
-                (_tiemsValue >= -100 && _tiemsValue <= 100)
-                :
-                    (_tiemsValue <= -100 || _tiemsValue >= 100)) {
-                _times100 += 1;
-                _tiemsValue *= _times100_base;
-            }
-            if (_times100_base == 10) {
-                return Math.pow(10, _times100);
-            }
-            else {
-                var temp = "0.";
-                for (var i = 1; i < _times100; i++) {
-                    temp += "0";
-                }
-                return +(temp + "1");
-            }
-        })(maxValue - minValue);
-        var distance100_oral = Math.ceil((maxValue - minValue) * times100 / num);
-        var getResult = function (changValue) {
-            var distance100 = {
-                3: 2,
-                4: 5,
-                6: 5,
-                7: 5,
-                8: 10,
-                9: 10,
-                11: 10,
-                12: 10,
-                13: 15,
-                14: 15,
-                16: 15,
-                17: 15,
-                18: 20,
-                19: 20,
-                21: 20,
-                22: 20,
-                23: 25,
-                24: 25,
-                26: 25,
-                27: 25
-            }[distance100_oral + changValue] || (distance100_oral + changValue);
-            var distance = distance100 / times100;
-            var begin = Math.floor(minValue / distance) * distance;
-            var rulerArray = [];
-            rulerArray.push(begin);
-            for (var index = 1; rulerArray[rulerArray.length - 1] < maxValue; index++) {
-                rulerArray.push(begin + distance * index);
-            }
-            return rulerArray;
-        };
-        var rulerArray = getResult(0);
-        var balanceMax = function () {
-            var rulerArray_temp = [];
-            var changeDist = rulerArray[rulerArray.length - 1] - option.max;
-            for (var index = 0; index < rulerArray.length; index++) {
-                if (index + 1 < rulerArray.length && rulerArray[index + 1] - changeDist < minValue) ;
-                else {
-                    rulerArray_temp.push(rulerArray[index] - changeDist);
-                }
-            }
-            return rulerArray_temp;
-        };
-        var balanceMin = function () {
-            var rulerArray_temp = [];
-            var changeDist = rulerArray[0] - option.min;
-            for (var index = 0; index < rulerArray.length; index++) {
-                rulerArray_temp[index] = rulerArray[index] - changeDist;
-                if (maxValue <= rulerArray_temp[index])
-                    break;
-            }
-            return rulerArray_temp;
-        };
-        if (option) {
-            if ('max' in option && 'min' in option && option.max >= maxValue && option.min <= minValue) {
-                var isAnswer = function () {
-                    if (rulerArray[0] >= option.min && rulerArray[rulerArray.length - 1] <= option.max)
-                        return true;
-                    var rulerArray_max = balanceMax();
-                    if (rulerArray_max[0] >= option.min && rulerArray_max[rulerArray_max.length - 1] <= option.max) {
-                        rulerArray = rulerArray_max;
-                        return true;
-                    }
-                    var rulerArray_min = balanceMin();
-                    if (rulerArray_min[0] >= option.min && rulerArray_min[rulerArray_max.length - 1] <= option.max) {
-                        rulerArray = rulerArray_min;
-                        return true;
-                    }
-                };
-                if (isAnswer())
-                    return rulerArray;
-                for (var changValue = 1; changValue < 100; changValue++) {
-                    rulerArray = getResult(changValue);
-                    if (isAnswer())
-                        return rulerArray;
-                    rulerArray = getResult(-changValue);
-                    if (isAnswer())
-                        return rulerArray;
-                }
-            }
-            if ('max' in option && option.max >= maxValue) {
-                if (option.max < rulerArray[rulerArray.length - 1]) {
-                    rulerArray = balanceMax();
-                }
-            }
-            else if ('min' in option && option.min <= minValue) {
-                if (option.min > rulerArray[0]) {
-                    rulerArray = balanceMin();
-                }
-            }
-        }
-        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, SuppressedError, Symbol */
-
-    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));
-    }
-
-    typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
-        var e = new Error(message);
-        return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
-    };
-
-    var XLINK_ATTRIBUTE = ["href", "title", "show", "type", "role", "actuate"];
-
-    function toNode(tagname) {
-        return document.createElementNS('http://www.w3.org/2000/svg', tagname);
-    }
-    var _setAttribute = function (el, key, value) {
-        if (XLINK_ATTRIBUTE.indexOf(key) > -1) {
-            el.setAttributeNS("http://www.w3.org/1999/xlink", 'xlink:' + key, value + "");
-        }
-        else {
-            el.setAttribute(key, value + "");
-        }
-    };
-    var setAttribute = _setAttribute;
-    function getAttribute(el, key) {
-        if (XLINK_ATTRIBUTE.indexOf(key) > -1)
-            key = 'xlink:' + key;
-        return el.getAttribute(key);
-    }
-    function full(el, config) {
-        _setAttribute(el, "stroke", config.strokeStyle);
-        _setAttribute(el, "fill", config.fillStyle);
-        _setAttribute(el, "stroke-dasharray", config.lineDash.join(','));
-    }
-    function fill(el, config) {
-        _setAttribute(el, "fill", config.fillStyle);
-    }
-    function stroke(el, config) {
-        _setAttribute(el, "stroke", config.strokeStyle);
-        _setAttribute(el, "fill", "none");
-        _setAttribute(el, "stroke-dasharray", config.lineDash.join(','));
-    }
-
-    function setStyle (el, styles) {
-        for (var key in styles) {
-            el.style[key] = styles[key];
-        }
-    }
-
-    var rotate = function (cx, cy, deg, x, y) {
-        var cos = Math.cos(deg), sin = Math.sin(deg);
-        return [
-            +((x - cx) * cos - (y - cy) * sin + cx).toFixed(7),
-            +((x - cx) * sin + (y - cy) * cos + cy).toFixed(7)
-        ];
-    };
-    function arc (beginA, rotateA, cx, cy, r1, r2, doback) {
-        if (rotateA < 0) {
-            beginA += rotateA;
-            rotateA *= -1;
-        }
-        var temp = [], 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", {
-            top: config["fontSize"] * 0.5,
-            middle: 0,
-            bottom: -config["fontSize"] * 0.5,
-        }[config.textBaseline]);
-        setStyle(el, {
-            "text-anchor": {
-                left: "start",
-                right: "end",
-                center: "middle",
-            }[config.textAlign],
-            "dominant-baseline": "central",
-            "font-size": config["fontSize"] + "px",
-            "font-family": config["fontFamily"],
-        });
-        setAttribute(el, "x", x);
-        setAttribute(el, "y", y);
-        if (typeof deg == "number") {
-            deg = deg % 360;
-            setAttribute(el, "transform", "rotate(" + deg + "," + x + "," + y + ")");
-        }
-    };
-    var initCircle$1 = function (el, cx, cy, r) {
-        if (el.nodeName.toLowerCase() !== "circle")
-            throw new Error("Need a <circle> !");
-        setAttribute(el, "cx", cx);
-        setAttribute(el, "cy", cy);
-        setAttribute(el, "r", r);
-    };
-    var initPath = function (el, path) {
-        if (el.nodeName.toLowerCase() !== "path")
-            throw new Error("Need a <path> !");
-        setAttribute(el, "d", path);
-    };
-    var initRect$1 = function (el, x, y, width, height) {
-        if (el.nodeName.toLowerCase() !== "rect")
-            throw new Error("Need a <rect> !");
-        if (height < 0) {
-            height *= -1;
-            y -= height;
-        }
-        if (width < 0) {
-            width *= -1;
-            x -= width;
-        }
-        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 / 180) * Math.PI;
-        deg = (deg / 180) * Math.PI;
-        beginDeg = beginDeg % (Math.PI * 2);
-        if (r1 > r2) {
-            var temp = r1;
-            r1 = r2;
-            r2 = temp;
-        }
-        if (deg >= Math.PI * 1.999999 || deg <= -Math.PI * 1.999999) {
-            deg = Math.PI * 1.999999;
-        }
-        else {
-            deg = deg % (Math.PI * 2);
-        }
-        arc(beginDeg, deg, cx, cy, r1, r2, function (beginA, endA, begInnerX, begInnerY, begOuterX, begOuterY, endInnerX, endInnerY, endOuterX, endOuterY, r) {
-            var f = endA - beginA > Math.PI ? 1 : 0, d = "M" + begInnerX + " " + begInnerY;
-            if (r < 0)
-                r = -r;
-            d +=
-                "A" + r1 + " " + r1 + " 0 " + f + " 1 " + endInnerX + " " + endInnerY;
-            if (config.arcEndCap == "round")
-                d += "A" + r + " " + r + " " + " 0 1 0 " + endOuterX + " " + endOuterY;
-            else if (config.arcEndCap == "-round")
-                d += "A" + r + " " + r + " " + " 0 1 1 " + endOuterX + " " + endOuterY;
-            else
-                d += "L" + endOuterX + " " + endOuterY;
-            d +=
-                "A" + r2 + " " + r2 + " 0 " + f + " 0 " + begOuterX + " " + begOuterY;
-            if (config.arcStartCap == "round")
-                d += "A" + r + " " + r + " " + " 0 1 0 " + begInnerX + " " + begInnerY;
-            else if (config.arcStartCap == "-round")
-                d += "A" + r + " " + r + " " + " 0 1 1 " + begInnerX + " " + begInnerY;
-            else
-                d += "L" + begInnerX + " " + begInnerY;
-            if (config.arcStartCap == "butt")
-                d += "Z";
-            setAttribute(el, "d", d);
-        });
-    };
-
-    var 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",
-                "fontSize": 16,
-                "fontFamily": "sans-serif",
-                "arcStartCap": "butt",
-                "arcEndCap": "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 / 180) * Math.PI, x + r, y);
-            var endPosition = rotate$1(x, y, ((beginDeg + deg) / 180) * Math.PI, x + r, y);
-            if (this.__path == "") {
-                this.__path += "M" + begPosition[0] + "," + begPosition[1];
-            }
-            else if (begPosition[0] != this.__currentPosition[0] ||
-                begPosition[1] != this.__currentPosition[1]) {
-                this.__path += "L" + begPosition[0] + "," + begPosition[1];
-            }
-            this.__path +=
-                "A" +
-                    r +
-                    "," +
-                    r +
-                    " 0 " +
-                    (deg > 180 || deg < -180 ? 1 : 0) +
-                    "," +
-                    (deg > 0 ? 1 : 0) +
-                    " " +
-                    endPosition[0] +
-                    "," +
-                    endPosition[1];
-            return this;
-        };
-        SVG.prototype.quadraticCurveTo = function (cpx, cpy, x, y) {
-            this.__path += "Q" + cpx + " " + cpy + "," + x + " " + y;
-            return this;
-        };
-        SVG.prototype.bezierCurveTo = function (cp1x, cp1y, cp2x, cp2y, x, y) {
-            this.__path +=
-                "C" + cp1x + " " + cp1y + "," + cp2x + " " + cp2y + "," + x + " " + y;
-            return this;
-        };
-        SVG.prototype.bind = function (eventType, callback) {
-            this.__useEl.addEventListener(eventType, function (event) {
-                callback.call(this, event, this);
-            }, false);
-            return this;
-        };
-        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 (painter, config, cx, cy, r1, r2, beginDeg, deg) {
-        if (r1 > r2) {
-            var temp = r1;
-            r1 = r2;
-            r2 = temp;
-        }
-        beginDeg = beginDeg % (Math.PI * 2);
-        if (deg >= Math.PI * 1.999999 || deg <= -Math.PI * 1.999999) {
-            deg = Math.PI * 2;
-        }
-        else {
-            deg = deg % (Math.PI * 2);
-        }
-        arc(beginDeg, deg, cx, cy, r1, r2, function (beginA, endA, begInnerX, begInnerY, begOuterX, begOuterY, endInnerX, endInnerY, endOuterX, endOuterY, r) {
-            if (r < 0)
-                r = -r;
-            painter.beginPath();
-            painter.moveTo(begInnerX, begInnerY);
-            painter.arc(cx, cy, r1, beginA, endA, false);
-            if (config.arcEndCap == "round")
-                painter.arc((endInnerX + endOuterX) * 0.5, (endInnerY + endOuterY) * 0.5, r, endA - Math.PI, endA, true);
-            else if (config.arcEndCap == "-round")
-                painter.arc((endInnerX + endOuterX) * 0.5, (endInnerY + endOuterY) * 0.5, r, endA - Math.PI, endA, false);
-            else
-                painter.lineTo(endOuterX, endOuterY);
-            painter.arc(cx, cy, r2, endA, beginA, true);
-            if (config.arcStartCap == "round")
-                painter.arc((begInnerX + begOuterX) * 0.5, (begInnerY + begOuterY) * 0.5, r, beginA, beginA - Math.PI, true);
-            else if (config.arcStartCap == "-round")
-                painter.arc((begInnerX + begOuterX) * 0.5, (begInnerY + begOuterY) * 0.5, r, beginA, beginA - Math.PI, false);
-            else
-                painter.lineTo(begInnerX, begInnerY);
-        });
-        if (config.arcStartCap == "butt")
-            painter.closePath();
-        return painter;
-    };
-    var initCircle = function (painter, cx, cy, r) {
-        painter.beginPath();
-        painter.moveTo(cx + r, cy);
-        painter.arc(cx, cy, r, 0, Math.PI * 2);
-        return painter;
-    };
-    var initRect = function (painter, x, y, width, height) {
-        painter.beginPath();
-        painter.rect(x, y, width, height);
-        return painter;
-    };
-
-    function texts (painter, contents, width, height, doback) {
-        var lineNumber = 0, content = "";
-        for (var i = 0; i < contents.length; i++) {
-            if (painter.measureText(content + contents[i]).width > width || /\n$/.test(content)) {
-                lineNumber += 1;
-                doback(content, (lineNumber - 0.5) * height);
-                content = contents[i];
-            }
-            else if (i == contents.length - 1) {
-                lineNumber += 1;
-                doback(content + contents[i], (lineNumber - 0.5) * height);
-            }
-            else {
-                content += contents[i];
-            }
-        }
-        return lineNumber * height;
-    }
-
-    var Painter = (function () {
-        function Painter(canvas, opts, region, isPainter) {
-            if (opts === void 0) { opts = {}; }
-            if (isPainter === void 0) { isPainter = false; }
-            this.__region = null;
-            this.__onlyRegion = false;
-            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',
-                "lineDash": [],
-                "shadowBlur": 0,
-                "shadowColor": "black"
-            };
-            this.painter = canvas.getContext("2d", opts);
-            this.__region = region;
-            this.__isPainter = isPainter;
-            this.painter.textBaseline = 'middle';
-            this.painter.textAlign = 'left';
-        }
-        Painter.prototype.useConfig = function (key, value) {
-            if (this.__region) {
-                if (['fillStyle', 'strokeStyle', 'shadowBlur', 'shadowColor'].indexOf(key) < 0) {
-                    this.__region.useConfig(key, value);
-                }
-            }
-            if (this.__isPainter && this.__onlyRegion)
-                return this;
-            if (key == 'lineDash') {
-                if (this.painter.setLineDash)
-                    this.painter.setLineDash(value);
-            }
-            else if (key in this.__specialConfig) {
-                if (key == 'fontSize') {
-                    value = Math.round(value);
-                }
-                this.__specialConfig[key] = value;
-            }
-            else if (key in this.__initConfig) {
-                this.painter[key] = value;
-            }
-            else {
-                throw new Error('Illegal configuration item of painter : ' + key + " !");
-            }
-            return this;
-        };
-        Painter.prototype.fillText = function (text, x, y, deg) {
-            if (deg === void 0) { deg = 0; }
-            if (this.__region)
-                this.__region.fillText(text, x, y, deg);
-            if (this.__isPainter && this.__onlyRegion)
-                return this;
-            this.painter.save();
-            initText(this.painter, this.__specialConfig, x, y, deg).fillText(text, 0, 0);
-            this.painter.restore();
-            return this;
-        };
-        Painter.prototype.strokeText = function (text, x, y, deg) {
-            if (deg === void 0) { deg = 0; }
-            if (this.__region)
-                this.__region.strokeText(text, x, y, deg);
-            if (this.__isPainter && this.__onlyRegion)
-                return this;
-            this.painter.save();
-            initText(this.painter, this.__specialConfig, x, y, deg).strokeText(text, 0, 0);
-            this.painter.restore();
-            return this;
-        };
-        Painter.prototype.fullText = function (text, x, y, deg) {
-            if (deg === void 0) { deg = 0; }
-            if (this.__region)
-                this.__region.fullText(text, x, y, deg);
-            if (this.__isPainter && this.__onlyRegion)
-                return this;
-            this.painter.save();
-            initText(this.painter, this.__specialConfig, x, y, deg);
-            this.painter.fillText(text, 0, 0);
-            this.painter.strokeText(text, 0, 0);
-            this.painter.restore();
-            return this;
-        };
-        Painter.prototype.fillTexts = function (contents, x, y, width, lineHeight, deg) {
-            var _this = this;
-            if (lineHeight === void 0) { lineHeight = 1.2; }
-            if (deg === void 0) { deg = 0; }
-            var h = 0;
-            if (this.__region)
-                h = this.__region.fillTexts(contents, x, y, width, lineHeight);
-            if (this.__isPainter && this.__onlyRegion)
-                return h;
-            this.painter.save();
-            initText(this.painter, this.__specialConfig, x, y, deg);
-            var height = texts(this.painter, contents, width, this.__specialConfig.fontSize * lineHeight, function (content, top) {
-                _this.painter.fillText(content, 0, top);
-            });
-            this.painter.restore();
-            return height;
-        };
-        Painter.prototype.strokeTexts = function (contents, x, y, width, lineHeight, deg) {
-            var _this = this;
-            if (lineHeight === void 0) { lineHeight = 1.2; }
-            if (deg === void 0) { deg = 0; }
-            var h = 0;
-            if (this.__region)
-                h = this.__region.fillTexts(contents, x, y, width, lineHeight);
-            if (this.__isPainter && this.__onlyRegion)
-                return h;
-            this.painter.save();
-            initText(this.painter, this.__specialConfig, x, y, deg);
-            var height = texts(this.painter, contents, width, this.__specialConfig.fontSize * lineHeight, function (content, top) {
-                _this.painter.strokeText(content, 0, top);
-            });
-            this.painter.restore();
-            return height;
-        };
-        Painter.prototype.fullTexts = function (contents, x, y, width, lineHeight, deg) {
-            var _this = this;
-            if (lineHeight === void 0) { lineHeight = 1.2; }
-            if (deg === void 0) { deg = 0; }
-            var h = 0;
-            if (this.__region)
-                h = this.__region.fillTexts(contents, x, y, width, lineHeight);
-            if (this.__isPainter && this.__onlyRegion)
-                return h;
-            this.painter.save();
-            initText(this.painter, this.__specialConfig, x, y, deg);
-            var height = texts(this.painter, contents, width, this.__specialConfig.fontSize * lineHeight, function (content, top) {
-                _this.painter.fillText(content, 0, top);
-                _this.painter.strokeText(content, 0, top);
-            });
-            this.painter.restore();
-            return height;
-        };
-        Painter.prototype.beginPath = function () {
-            if (this.__region)
-                this.__region.beginPath();
-            if (this.__isPainter && this.__onlyRegion)
-                return this;
-            this.painter.beginPath();
-            return this;
-        };
-        Painter.prototype.closePath = function () {
-            if (this.__region)
-                this.__region.closePath();
-            if (this.__isPainter && this.__onlyRegion)
-                return this;
-            this.painter.closePath();
-            return this;
-        };
-        Painter.prototype.moveTo = function (x, y) {
-            if (this.__region)
-                this.__region.moveTo(x, y);
-            if (this.__isPainter && this.__onlyRegion)
-                return this;
-            this.painter.moveTo(Math.round(x) + 0.5, Math.round(y) + 0.5);
-            return this;
-        };
-        Painter.prototype.lineTo = function (x, y) {
-            if (this.__region)
-                this.__region.lineTo(x, y);
-            if (this.__isPainter && this.__onlyRegion)
-                return this;
-            this.painter.lineTo(Math.round(x) + 0.5, Math.round(y) + 0.5);
-            return this;
-        };
-        Painter.prototype.arc = function (x, y, r, beginDeg, deg) {
-            if (this.__region)
-                this.__region.arc(x, y, r, beginDeg, deg);
-            if (this.__isPainter && this.__onlyRegion)
-                return this;
-            this.painter.arc(x, y, r, beginDeg, beginDeg + deg, deg < 0);
-            return this;
-        };
-        Painter.prototype.fill = function () {
-            if (this.__region)
-                this.__region.fill();
-            if (this.__isPainter && this.__onlyRegion)
-                return this;
-            this.painter.fill();
-            return this;
-        };
-        Painter.prototype.stroke = function () {
-            if (this.__region)
-                this.__region.stroke();
-            if (this.__isPainter && this.__onlyRegion)
-                return this;
-            this.painter.stroke();
-            return this;
-        };
-        Painter.prototype.full = function () {
-            if (this.__region)
-                this.__region.full();
-            if (this.__isPainter && this.__onlyRegion)
-                return this;
-            this.painter.fill();
-            this.painter.stroke();
-            return this;
-        };
-        Painter.prototype.save = function () {
-            if (this.__region)
-                this.__region.save();
-            if (this.__isPainter && this.__onlyRegion)
-                return this;
-            this.painter.save();
-            return this;
-        };
-        Painter.prototype.restore = function () {
-            if (this.__region)
-                this.__region.restore();
-            if (this.__isPainter && this.__onlyRegion)
-                return this;
-            this.painter.restore();
-            return this;
-        };
-        Painter.prototype.clip = function () {
-            if (this.__region)
-                this.__region.clip();
-            if (this.__isPainter && this.__onlyRegion)
-                return this;
-            this.painter.clip();
-            return this;
-        };
-        Painter.prototype.quadraticCurveTo = function (cpx, cpy, x, y) {
-            if (this.__region)
-                this.__region.quadraticCurveTo(cpx, cpy, x, y);
-            if (this.__isPainter && this.__onlyRegion)
-                return this;
-            this.painter.quadraticCurveTo(cpx, cpy, x, y);
-            return this;
-        };
-        Painter.prototype.bezierCurveTo = function (cp1x, cp1y, cp2x, cp2y, x, y) {
-            if (this.__region)
-                this.__region.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y);
-            if (this.__isPainter && this.__onlyRegion)
-                return this;
-            this.painter.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y);
-            return this;
-        };
-        Painter.prototype.clearRect = function (x, y, w, h) {
-            if (this.__region)
-                this.__region.clearRect(x, y, w, h);
-            if (this.__isPainter && this.__onlyRegion)
-                return this;
-            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);
-            if (this.__isPainter && this.__onlyRegion)
-                return this;
-            initArc(this.painter, this.__specialConfig, cx, cy, r1, r2, beginDeg, deg).fill();
-            return this;
-        };
-        Painter.prototype.strokeArc = function (cx, cy, r1, r2, beginDeg, deg) {
-            if (this.__region)
-                this.__region.strokeArc(cx, cy, r1, r2, beginDeg, deg);
-            if (this.__isPainter && this.__onlyRegion)
-                return this;
-            initArc(this.painter, this.__specialConfig, cx, cy, r1, r2, beginDeg, deg).stroke();
-            return this;
-        };
-        Painter.prototype.fullArc = function (cx, cy, r1, r2, beginDeg, deg) {
-            if (this.__region)
-                this.__region.fullArc(cx, cy, r1, r2, beginDeg, deg);
-            if (this.__isPainter && this.__onlyRegion)
-                return this;
-            initArc(this.painter, this.__specialConfig, cx, cy, r1, r2, beginDeg, deg);
-            this.painter.fill();
-            this.painter.stroke();
-            return this;
-        };
-        Painter.prototype.fillCircle = function (cx, cy, r) {
-            if (this.__region)
-                this.__region.fillCircle(cx, cy, r);
-            if (this.__isPainter && this.__onlyRegion)
-                return this;
-            initCircle(this.painter, cx, cy, r).fill();
-            return this;
-        };
-        Painter.prototype.strokeCircle = function (cx, cy, r) {
-            if (this.__region)
-                this.__region.strokeCircle(cx, cy, r);
-            if (this.__isPainter && this.__onlyRegion)
-                return this;
-            initCircle(this.painter, cx, cy, r).stroke();
-            return this;
-        };
-        Painter.prototype.fullCircle = function (cx, cy, r) {
-            if (this.__region)
-                this.__region.fullCircle(cx, cy, r);
-            if (this.__isPainter && this.__onlyRegion)
-                return this;
-            initCircle(this.painter, cx, cy, r);
-            this.painter.fill();
-            this.painter.stroke();
-            return this;
-        };
-        Painter.prototype.fillRect = function (x, y, width, height) {
-            if (this.__region)
-                this.__region.fillRect(x, y, width, height);
-            if (this.__isPainter && this.__onlyRegion)
-                return this;
-            initRect(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);
-            if (this.__isPainter && this.__onlyRegion)
-                return this;
-            initRect(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);
-            if (this.__isPainter && this.__onlyRegion)
-                return this;
-            initRect(this.painter, x, y, width, height);
-            this.painter.fill();
-            this.painter.stroke();
-            return this;
-        };
-        Painter.prototype.draw = function () { };
-        return Painter;
-    }());
-
-    function assemble (begin, end, step, count) {
-        var val = [];
-        for (var index = 0; index < count; index++)
-            val[index] = begin;
-        return function () {
-            for (var i = 0; i < count; i++) {
-                if (val[i] + step < end) {
-                    val[i] = +(val[i] + step).toFixed(7);
-                    break;
-                }
-                else if (i < count - 1) {
-                    val[i] = begin;
-                }
-            }
-            return val;
-        };
-    }
-
-    var linearGradient = function (painter, x0, y0, x1, y1) {
-        var gradient = painter.createLinearGradient(x0, y0, x1, y1);
-        var enhanceGradient = {
-            "value": function () {
-                return gradient;
-            },
-            "setColor": function (stop, color) {
-                gradient.addColorStop(stop, color);
-                return enhanceGradient;
-            }
-        };
-        return enhanceGradient;
-    };
-    var radialGradient = function (painter, cx, cy, r) {
-        var gradient = painter.createRadialGradient(cx, cy, 0, cx, cy, r);
-        var enhanceGradient = {
-            "value": function () {
-                return gradient;
-            },
-            "setColor": function (stop, color) {
-                gradient.addColorStop(stop, color);
-                return enhanceGradient;
-            }
-        };
-        return enhanceGradient;
-    };
-
-    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, {}, RegionCanvas ? new Painter(RegionCanvas, {
-                willReadFrequently: true,
-            }) : null, true) || this;
-            _this.name = "Canvas";
-            _this.__regionList = {};
-            _this.__regionAssemble = assemble(0, 255, 10, 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;
-        };
-        Canvas.prototype.onlyRegion = function (flag) {
-            this.__onlyRegion = flag;
-            return this;
-        };
-        Canvas.prototype.setRegion = function (regionName) {
-            if (this.__region) {
-                if (regionName) {
-                    if (this.__regionList[regionName] == void 0) {
-                        var tempColor = this.__regionAssemble();
-                        this.__regionList[regionName] =
-                            "rgb(" + tempColor[0] + "," + tempColor[1] + "," + tempColor[2] + ")";
-                    }
-                    this.__region.useConfig("fillStyle", this.__regionList[regionName]) &&
-                        this.__region.useConfig("strokeStyle", this.__regionList[regionName]);
-                }
-                else {
-                    this.__region.useConfig("fillStyle", "#000000") &&
-                        this.__region.useConfig("strokeStyle", "#000000");
-                }
-            }
-            return this;
-        };
-        Canvas.prototype.getRegion = function (x, y) {
-            var _this = this;
-            return new Promise(function (resolve, reject) {
-                var imgData = _this.__region ? _this.__region.painter.getImageData(x - 0.5, y - 0.5, 1, 1) : {
-                    data: [0, 0, 0, 0]
-                };
-                var currentRGBA = imgData.data;
-                var doit = function () {
-                    if (_this.__region) {
-                        for (var key in _this.__regionList) {
-                            if ("rgb(" +
-                                currentRGBA[0] +
-                                "," +
-                                currentRGBA[1] +
-                                "," +
-                                currentRGBA[2] +
-                                ")" ==
-                                _this.__regionList[key]) {
-                                resolve(key);
-                                break;
-                            }
-                        }
-                    }
-                    resolve("");
-                };
-                if (currentRGBA) {
-                    doit();
-                }
-                else {
-                    imgData.then(function (data) {
-                        currentRGBA = data;
-                        doit();
-                    });
-                }
-            });
-        };
-        Canvas.prototype.textWidth = function (text) {
-            this.painter.save();
-            initText(this.painter, this.__specialConfig, 0, 0, 0);
-            var width = this.painter.measureText(text + "").width;
-            this.painter.restore();
-            return width;
-        };
-        Canvas.prototype.getContext = function (isRegion) {
-            if (isRegion === void 0) { isRegion = false; }
-            return isRegion ? (this.__region ? this.__region.painter : null) : this.painter;
-        };
-        Canvas.prototype.createLinearGradient = function (x0, y0, x1, y1) {
-            return linearGradient(this.painter, x0, y0, x1, y1);
-        };
-        Canvas.prototype.createRadialGradient = function (cx, cy, r) {
-            return radialGradient(this.painter, cx, cy, r);
-        };
-        Canvas.prototype.getColor = function (x, y) {
-            var currentRGBA = this.painter.getImageData(x - 0.5, y - 0.5, 1, 1).data;
-            return ("rgba(" +
-                currentRGBA[0] +
-                "," +
-                currentRGBA[1] +
-                "," +
-                currentRGBA[2] +
-                "," +
-                currentRGBA[3] +
-                ")");
-        };
-        return Canvas;
-    }(Painter));
-
-    function mergeOption (option, defaultOption) {
-        for (var key in option) {
-            defaultOption[key] = option[key];
-        }
-        return defaultOption;
-    }
-
-    var Canvas = (function (_super) {
-        __extends(Canvas, _super);
-        function Canvas(el, option) {
-            if (option === void 0) { option = {}; }
-            var _this = this;
-            if (!el) {
-                throw new Error("VISLite Canvas:The mount point requires an HTMLElement type but encountered null.");
-            }
-            option = mergeOption(option, {
-                region: true
-            });
-            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);
-                if (option.region) {
-                    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];
-                if (canvas) {
-                    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$1 (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;
-        };
-        BufferObject.prototype.write = function (data) {
-            writeBuffer(this.__painter, data, this.__isElement, this.__painter.STATIC_DRAW);
-            this.__fsize = data.BYTES_PER_ELEMENT;
-            return this;
-        };
-        BufferObject.prototype.divide = function (location, size, stride, offset) {
-            if (offset === void 0) { offset = 0; }
-            useBuffer(this.__painter, location, size, this.__painter.FLOAT, stride * this.__fsize, offset * this.__fsize, false);
-            return this;
-        };
-        return BufferObject;
-    }());
-
-    var initTexture = function (painter, type, unit) {
-        var texture = painter.createTexture();
-        painter.activeTexture(painter['TEXTURE' + unit]);
-        painter.bindTexture(type, texture);
-        return texture;
-    };
-    var linkImage = function (painter, type, level, format, textureType, image) {
-        painter.texImage2D(type, level, format, format, textureType, image);
-    };
-    var linkCube = function (painter, type, level, format, textureType, images, width, height, texture) {
-        var types = [
-            painter.TEXTURE_CUBE_MAP_POSITIVE_X,
-            painter.TEXTURE_CUBE_MAP_NEGATIVE_X,
-            painter.TEXTURE_CUBE_MAP_POSITIVE_Y,
-            painter.TEXTURE_CUBE_MAP_NEGATIVE_Y,
-            painter.TEXTURE_CUBE_MAP_POSITIVE_Z,
-            painter.TEXTURE_CUBE_MAP_NEGATIVE_Z
-        ], target;
-        for (var i = 0; i < types.length; i++) {
-            if (images[i]) {
-                target = types[i];
-                painter.texImage2D(target, level, format, width, height, 0, format, textureType, null);
-                painter.bindTexture(type, texture);
-                painter.texImage2D(target, level, format, format, textureType, images[i]);
-            }
-        }
-        painter.generateMipmap(type);
-    };
-    var TextureObject = (function () {
-        function TextureObject(painter, type, unit) {
-            if (unit === void 0) { unit = 0; }
-            this.__painter = painter;
-            this.__type = {
-                "2d": painter.TEXTURE_2D,
-                "cube": painter.TEXTURE_CUBE_MAP
-            }[type];
-            this.__texture = initTexture(painter, this.__type, unit);
-            painter.texParameteri(this.__type, painter.TEXTURE_MIN_FILTER, painter.NEAREST);
-            painter.texParameteri(this.__type, painter.TEXTURE_MAG_FILTER, painter.NEAREST);
-            painter.texParameteri(this.__type, painter.TEXTURE_WRAP_S, painter.CLAMP_TO_EDGE);
-            painter.texParameteri(this.__type, painter.TEXTURE_WRAP_T, painter.CLAMP_TO_EDGE);
-        }
-        TextureObject.prototype.useImage = function (image) {
-            linkImage(this.__painter, this.__type, 0, this.__painter.RGBA, this.__painter.UNSIGNED_BYTE, image);
-            return this;
-        };
-        TextureObject.prototype.useCube = function (images, width, height) {
-            linkCube(this.__painter, this.__type, 0, this.__painter.RGBA, this.__painter.UNSIGNED_BYTE, images, width, height, this.__texture);
-            return this;
-        };
-        return TextureObject;
-    }());
-
-    var 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;
-        };
-        ShaderObject.prototype.compile = function (vshaderSource, fshaderSource) {
-            this.program = useShader(this.__painter, vshaderSource, fshaderSource);
-            return this;
-        };
-        return ShaderObject;
-    }());
-
-    var vsColor = "attribute vec4 a_position;\nuniform mat4 u_matrix;\n\nvoid main()\n{\n    vec4 temp = u_matrix * a_position;\n\n    // 把原生的WebGL使用的左手坐标系变成了右手坐标系\n    temp.z = -1.0 * temp.z;\n\n    // 表示眼睛距离vec4(0.0,0.0,1.0)的距离\n    float dist = 4.0;\n\n    // 使用投影直接计算\n    // 为保证纹理和相对位置正确\n    // x、y、z的改变满足线性变换\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}";
-
-    var vsColors = "attribute vec4 a_position;\nuniform mat4 u_matrix;\nattribute vec4 a_color;\nvarying vec4 v_color;\n\nvoid main()\n{\n    vec4 temp = u_matrix * a_position;\n    temp.z = -1.0 * temp.z;\n    float dist = 4.0;\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    v_color = a_color;\n}";
-
-    var vsImage = "attribute vec4 a_position;\nuniform mat4 u_matrix;\nattribute vec2 a_textcoord;\nvarying vec2 v_textcoord;\n\nvoid main()\n{\n    vec4 temp = u_matrix * a_position;\n    temp.z = -1.0 * temp.z;\n    float dist = 4.0;\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    v_textcoord = a_textcoord;\n}";
-
-    var vsCube = "attribute vec4 a_position;\nuniform mat4 u_matrix;\nattribute vec4 a_normal;\nvarying vec3 v_normal;\n\nvoid main()\n{\n    vec4 temp = u_matrix * a_position;\n    temp.z = -1.0 * temp.z;\n    float dist = 4.0;\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    v_normal = normalize(vec3(a_normal));\n}";
-
-    var fsColor = "precision mediump float;\n\nuniform vec4 u_color;\n\nvoid main()\n{\n    gl_FragColor = u_color;\n}";
-
-    var fsColors = "precision mediump float;\n\nvarying vec4 v_color;\n\nvoid main()\n{\n    gl_FragColor = v_color;\n}";
-
-    var fsImage = "precision mediump float;\n\nuniform sampler2D u_sampler;\nvarying vec2 v_textcoord;\n\nvoid main()\n{\n    gl_FragColor = texture2D(u_sampler, v_textcoord);\n}";
-
-    var fsCube = "precision mediump float;\n\nvarying vec3 v_normal;\nuniform samplerCube u_texture;\n\nvoid main()\n{\n    gl_FragColor = textureCube(u_texture, normalize(v_normal));\n}";
-
-    var shaders = {};
-    function getShader (type, painter, mesh) {
-        var _a, _b;
-        var uniqueName = type +
-            (mesh.material.color ? "1" : "0") +
-            (mesh.material.colors ? "1" : "0") +
-            (mesh.material.image ? "1" : "0") +
-            (mesh.material.cube ? "1" : "0");
-        if (shaders[uniqueName])
-            return shaders[uniqueName].use();
-        var vertexShader = (_a = {},
-            _a[type + "1000"] = vsColor,
-            _a[type + "0100"] = vsColors,
-            _a[type + "0010"] = vsImage,
-            _a[type + "0001"] = vsCube,
-            _a)[uniqueName].replace(/uniform +mat4 +u_matrix;/, "\n    uniform mat4 u_matrix_world;\n    uniform mat4 u_matrix_mesh;\n    uniform mat4 u_matrix_proporion;").replace(/u_matrix +\* +a_position/, "u_matrix_proporion * u_matrix_world * u_matrix_mesh * a_position");
-        var fragmentShader = (_b = {},
-            _b[type + "1000"] = fsColor,
-            _b[type + "0100"] = fsColors,
-            _b[type + "0010"] = fsImage,
-            _b[type + "0001"] = fsCube,
-            _b)[uniqueName];
-        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, mesh.geometry.attributes.position.itemSize, 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, mesh.geometry.attributes.normal.itemSize, 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);
-        }
-        if ("colors" in mesh.material) {
-            new BufferObject(painter).use()
-                .write(mesh.material.colors.array)
-                .divide(painter.getAttribLocation(shader.program, "a_color"), mesh.material.colors.itemSize, mesh.material.colors.itemSize, 0);
-        }
-        else if ("cube" in mesh.material) {
-            var size = mesh.material.cube.right.image.value.width;
-            painter.uniform1i(painter.getUniformLocation(shader.program, "u_texture"), 0);
-            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$1(ViewCanvas, scale);
-            if (RegionCanvas) {
-                this.__regionPainter = getWebGLContext$1(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 {
-                yProportion = proportion;
-            }
-            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);
-        };
-        WebGL.prototype.getMatrix = function () {
-            return this.__scene.matrix;
-        };
-        WebGL.prototype.getObject3D = function () {
-            return this.__scene.children;
-        };
-        WebGL.prototype.review = function (isUpdateRegion) {
-            if (isUpdateRegion === void 0) { isUpdateRegion = false; }
-            if (isUpdateRegion) {
-                if (this.__regionPainter) {
-                    this.__regionPainter.clearColor(1, 1, 1, 1);
-                    this.__regionPainter.clear(this.__regionPainter.COLOR_BUFFER_BIT);
-                }
-            }
-            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) {
-                    if (this.__regionPainter) {
-                        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);
-                    }
-                }
-                else {
-                    doDraw("region" + this.__unique, this.painter, object3D.mesh[index], meshWorld, globalWorld);
-                }
-            }
-        };
-        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 (mesh.geometry.attributes.position && Array.isArray(mesh.geometry.attributes.position.array)) {
-                    mesh.geometry.attributes.position.array = new Float32Array(mesh.geometry.attributes.position.array);
-                }
-                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);
-                }
-                if (mesh.material.colors && Array.isArray(mesh.material.colors.array)) {
-                    mesh.material.colors.array = new Float32Array(mesh.material.colors.array);
-                }
-            }
-            this.__scene.children.push(object3D);
-            this.draw(object3D);
-        };
-        WebGL.prototype.setRegion = function (regionName) {
-            this.__regionName = regionName + "";
-            if (regionName) {
-                if (this.__regionList[regionName] == void 0) {
-                    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;
-    }());
-
-    var WebGL = (function (_super) {
-        __extends(WebGL, _super);
-        function WebGL(el, option) {
-            if (option === void 0) { option = {}; }
-            if (!el) {
-                throw new Error("VISLite WebGL:The mount point requires an HTMLElement type but encountered null.");
-            }
-            option = mergeOption(option, {
-                region: true
-            });
-            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 {
-                if (option.region) {
-                    RegionCanvas = document.createElement('canvas');
-                    el.appendChild(RegionCanvas);
-                    RegionCanvas.style.position = 'absolute';
-                    RegionCanvas.style.zIndex = "-1";
-                    RegionCanvas.style.opacity = "0";
-                }
-                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];
-                if (canvas) {
-                    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 WebGL;
-    }(WebGL$1));
-
-    var getWebGLContext = (function (el, scale) {
-        if (scale === void 0) { scale = 1; }
-        if (!el) {
-            throw new Error("VISLite getWebGLContext:The mount point requires an HTMLElement type but encountered null.");
-        }
-        var width = el.clientWidth, height = el.clientHeight;
-        var ViewCanvas;
-        var _el = el;
-        if (_el._vislite_canvas_) {
-            ViewCanvas = _el._vislite_canvas_;
-        }
-        else {
-            ViewCanvas = document.createElement('canvas');
-            el.appendChild(ViewCanvas);
-            _el._vislite_canvas_ = ViewCanvas;
-            el.setAttribute('vislite', 'WebGL');
-        }
-        ViewCanvas.style.width = width + "px";
-        ViewCanvas.setAttribute('width', width + "");
-        ViewCanvas.style.height = height + "px";
-        ViewCanvas.setAttribute('height', height + "");
-        return getWebGLContext$1(ViewCanvas, scale);
-    });
-
-    var Shader = (function (_super) {
-        __extends(Shader, _super);
-        function Shader() {
-            return _super !== null && _super.apply(this, arguments) || this;
-        }
-        Shader.prototype.compile = function (arg1, arg2) {
-            if (arg2) {
-                _super.prototype.compile.call(this, arg1, arg2);
-            }
-            else {
-                _super.prototype.compile.call(this, {
-                    "color": vsColor,
-                    "colors": vsColors,
-                    "image": vsImage,
-                    "cube": vsCube
-                }[arg1], {
-                    "color": fsColor,
-                    "colors": fsColors,
-                    "image": fsImage,
-                    "cube": fsCube
-                }[arg1]);
-            }
-            return this;
-        };
-        return Shader;
-    }(ShaderObject));
-
-    var rotateX = function (deg, x, y, z) {
-        var cos = Math.cos(deg), sin = Math.sin(deg);
-        return [x, y * cos - z * sin, y * sin + z * cos];
-    };
-    var rotateY = function (deg, x, y, z) {
-        var cos = Math.cos(deg), sin = Math.sin(deg);
-        return [z * sin + x * cos, y, z * cos - x * sin];
-    };
-    var rotateZ = function (deg, x, y, z) {
-        var cos = Math.cos(deg), sin = Math.sin(deg);
-        return [x * cos - y * sin, x * sin + y * cos, z];
-    };
-    var Eoap = (function () {
-        function Eoap(scale, center) {
-            if (scale === void 0) { scale = 7; }
-            if (center === void 0) { center = [107, 36]; }
-            this.name = 'Eoap';
-            this.__scale = scale;
-            this.__center = center;
-        }
-        Eoap.prototype.use = function (λ, φ) {
-            var p = rotateY((360 - φ) / 180 * Math.PI, 100 * this.__scale, 0, 0);
-            p = rotateZ(λ / 180 * Math.PI, p[0], p[1], p[2]);
-            p = rotateZ((90 - this.__center[0]) / 180 * Math.PI, p[0], p[1], p[2]);
-            p = rotateX((90 - this.__center[1]) / 180 * Math.PI, p[0], p[1], p[2]);
-            return [
-                -p[0],
-                p[1],
-                p[2]
-            ];
-        };
-        return Eoap;
-    }());
-
-    var Mercator = (function () {
-        function Mercator(scale, center) {
-            if (scale === void 0) { scale = 7; }
-            if (center === void 0) { center = [107, 36]; }
-            this.name = 'Mercator';
-            var perimeter = 100 * scale * Math.PI;
-            var help = perimeter / 180;
-            var cx = help * center[0];
-            var cy = -1 * help * center[1];
-            this.use = function (λ, φ) {
-                return [
-                    (help * λ - cx) * 0.8,
-                    -1 * help * φ - cy,
-                    0
-                ];
-            };
-        }
-        return Mercator;
-    }());
-
-    var 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,
-                    event: event
-                });
-            }
-            else if (keyCode == 'down') {
-                callback({
-                    type: "lookDown",
-                    normal: [],
-                    value: 0.1,
-                    event: event
-                });
-            }
-            else if (keyCode == 'left') {
-                callback({
-                    type: "lookLeft",
-                    normal: [],
-                    value: 0.1,
-                    event: event
-                });
-            }
-            else if (keyCode == 'right') {
-                callback({
-                    type: "lookRight",
-                    normal: [],
-                    value: 0.1,
-                    event: event
-                });
-            }
-        });
-        var mouseP = null;
-        var doMove = function (event) {
-            if (mouseP == null) {
-                callback({
-                    type: "hover",
-                    normal: [],
-                    value: 0,
-                    event: event
-                });
-            }
-            else {
-                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,
-                    event: event
-                });
-                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, event) {
-            if (value == 0)
-                return;
-            var baseTimes = 0.899;
-            callback({
-                type: "scale",
-                value: value < 0 ? baseTimes : 2 - baseTimes,
-                normal: [],
-                event: event
-            });
-        };
-        el.addEventListener("mousewheel", function (event) {
-            doScale(event.wheelDelta, event);
-        });
-        if (window.addEventListener) {
-            window.addEventListener('DOMMouseScroll', function (event) {
-                doScale(-1 * event.detail, event);
-            }, false);
-        }
-    }
-
-    var observer;
-    var attrValueToCallback = {}, uniqueid = 0;
-    function resizeObserver (el, callback) {
-        try {
-            if (!observer) {
-                observer = new ResizeObserver(function (entries) {
-                    for (var _i = 0, entries_1 = entries; _i < entries_1.length; _i++) {
-                        var entry = entries_1[_i];
-                        attrValueToCallback[entry.target._resize_observer_]();
-                    }
-                });
-            }
-            uniqueid++;
-            el._resize_observer_ = uniqueid;
-            attrValueToCallback[uniqueid] = callback;
-            observer.observe(el);
-            return function () {
-                if (observer) {
-                    observer.unobserve(el);
-                    delete attrValueToCallback[el._resize_observer_];
-                }
-            };
-        }
-        catch (e) {
-            callback();
-            console.error('ResizeObserver undefined!');
-        }
-    }
-
-    function throttle (callback, option) {
-        if (option === void 0) { option = {}; }
-        option = mergeOption(option, {
-            time: 200,
-            keep: false,
-            opportunity: "end"
-        });
-        var hadInterval = false;
-        var hadClick = false;
-        var oneClick = false;
-        var arg;
-        return function () {
-            var _this = this;
-            arg = arguments;
-            if (!hadInterval) {
-                if (option.opportunity != 'end') {
-                    callback.apply(_this, arg);
-                }
-                hadInterval = true;
-                var interval_1 = setInterval(function () {
-                    if (hadClick) {
-                        if (!option.keep) {
-                            callback.apply(_this, arg);
-                        }
-                    }
-                    else {
-                        if (option.opportunity != 'begin') {
-                            if (oneClick || option.opportunity == 'end')
-                                callback.apply(_this, arg);
-                        }
-                        hadInterval = false;
-                        oneClick = false;
-                        clearInterval(interval_1);
-                    }
-                    hadClick = false;
-                }, option.time);
-            }
-            else {
-                hadClick = true;
-                oneClick = true;
-            }
-        };
-    }
-
-    var toInnerTree = (function (initTree, config) {
-        var tempTree = {};
-        var temp = config.root(initTree), id, rid;
-        id = rid = config.id(temp);
-        tempTree[id] = {
-            "data": temp,
-            "pid": null,
-            "id": id,
-            "isOpen": true,
-            "show": true,
-            "children": []
-        };
-        var num = 1;
-        (function createTree(pdata, pid) {
-            var children = config.children(pdata, initTree);
-            num += children ? children.length : 0;
-            for (var flag = 0; children && flag < children.length; flag++) {
-                id = config.id(children[flag]);
-                tempTree[pid].children.push(id);
-                tempTree[id] = {
-                    "data": children[flag],
-                    "pid": pid,
-                    "id": id,
-                    "isOpen": true,
-                    "show": true,
-                    "children": []
-                };
-                createTree(children[flag], id);
-            }
-        })(temp, id);
-        return {
-            rid: rid,
-            value: tempTree,
-            num: num
-        };
-    });
-
-    function toPlainTree (initTree, config, noOpens) {
-        var treeData = toInnerTree(initTree, config);
-        var alltreedata = treeData.value;
-        var rootid = treeData.rid;
-        if (treeData.num == 1) {
-            alltreedata[rootid].left = 0.5;
-            alltreedata[rootid].top = 0.5;
-            alltreedata[rootid].show = true;
-            return {
-                deep: 1,
-                node: alltreedata,
-                root: rootid,
-                size: 1
-            };
-        }
-        else {
-            var beforeDis_1 = [], size_1 = 0, maxDeep_1 = 0;
-            if (noOpens[rootid]) {
-                alltreedata[rootid].left = 0.5;
-                alltreedata[rootid].top = 0.5;
-                alltreedata[rootid].show = true;
-                size_1 = 1;
-            }
-            else {
-                (function positionCalc(pNode, deep) {
-                    if (deep > maxDeep_1)
-                        maxDeep_1 = deep;
-                    var flag = 0;
-                    if (!noOpens[pNode.id]) {
-                        for (flag = 0; flag < pNode.children.length; flag++)
-                            positionCalc(alltreedata[pNode.children[flag]], deep + 1);
-                    }
-                    alltreedata[pNode.id].left = deep + 0.5;
-                    if (flag == 0) {
-                        if (beforeDis_1[deep] == void 0)
-                            beforeDis_1[deep] = -0.5;
-                        if (beforeDis_1[deep - 1] == void 0)
-                            beforeDis_1[deep - 1] = -0.5;
-                        alltreedata[pNode.id].top = beforeDis_1[deep] + 1;
-                        var pTop = beforeDis_1[deep] + 1 + (alltreedata[pNode.pid].children.length - 1) * 0.5;
-                        if (pTop - 1 < beforeDis_1[deep - 1])
-                            alltreedata[pNode.id].top = beforeDis_1[deep - 1] + 1 - (alltreedata[pNode.pid].children.length - 1) * 0.5;
-                    }
-                    else {
-                        alltreedata[pNode.id].top = (alltreedata[pNode.children[0]].top + alltreedata[pNode.children[flag - 1]].top) * 0.5;
-                    }
-                    if (alltreedata[pNode.id].top <= beforeDis_1[deep]) {
-                        var needUp_1 = beforeDis_1[deep] + 1 - alltreedata[pNode.id].top(function doUp(_pid, _deep) {
-                            alltreedata[_pid].top += needUp_1;
-                            if (beforeDis_1[_deep] < alltreedata[_pid].top)
-                                beforeDis_1[_deep] = alltreedata[_pid].top;
-                            for (var _flag = 0; _flag < alltreedata[_pid].children.length; _flag++) {
-                                doUp(alltreedata[_pid].children[_flag], _deep + 1);
-                            }
-                        })(pNode.id, deep);
-                    }
-                    beforeDis_1[deep] = alltreedata[pNode.id].top;
-                    if (alltreedata[pNode.id].top + 0.5 > size_1)
-                        size_1 = alltreedata[pNode.id].top + 0.5;
-                })(alltreedata[rootid], 0);
-            }
-            for (var key in noOpens) {
-                if (noOpens[key]) {
-                    alltreedata[key].isOpen = false;
-                    (function updateHidden(pid, left, top) {
-                        for (var index = 0; index < alltreedata[pid].children.length; index++) {
-                            alltreedata[alltreedata[pid].children[index]].left = left;
-                            alltreedata[alltreedata[pid].children[index]].top = top;
-                            alltreedata[alltreedata[pid].children[index]].show = false;
-                            updateHidden(alltreedata[pid].children[index], left, top);
-                        }
-                    })(key, alltreedata[key].left, alltreedata[key].top);
-                }
-            }
-            return {
-                "node": alltreedata,
-                "root": rootid,
-                "size": size_1,
-                "deep": maxDeep_1 + 1
-            };
-        }
-    }
-
-    var Tree = (function () {
-        function Tree(config) {
-            if (config === void 0) { config = {}; }
-            this.name = 'Tree';
-            this.__config = mergeOption(config, {
-                root: function (initTree) { return initTree; },
-                children: function (parentTree) { return parentTree.children; },
-                id: function (treedata) { return treedata.name; }
-            });
-        }
-        Tree.prototype.use = function (initTree, noOpens) {
-            if (noOpens === void 0) { noOpens = {}; }
-            return toPlainTree(initTree, this.__config, noOpens);
-        };
-        return Tree;
-    }());
-
-    var TreeLayout = (function (_super) {
-        __extends(TreeLayout, _super);
-        function TreeLayout() {
-            var _this = _super !== null && _super.apply(this, arguments) || this;
-            _this.name = 'TreeLayout';
-            _this.__option = {
-                offsetX: 0,
-                offsetY: 0,
-                duration: 500,
-                type: "plain",
-                direction: "LR",
-                x: 100,
-                y: 100,
-                width: 100,
-                height: 100,
-                radius: 100
-            };
-            _this.__noOpens = {};
-            return _this;
-        }
-        TreeLayout.prototype.setOption = function (option) {
-            mergeOption(option, this.__option);
-            return this;
-        };
-        TreeLayout.prototype.use = function (initTree, noOpens) {
-            if (noOpens === void 0) { noOpens = {}; }
-            var tree = _super.prototype.use.call(this, initTree, noOpens);
-            if (this.__option.offsetX != 0 || this.__option.offsetY != 0) {
-                for (var key in tree.node) {
-                    if (!tree.node[key].show) {
-                        var deep = 0, pid = key;
-                        do {
-                            pid = tree.node[pid].pid;
-                            deep++;
-                        } while (!tree.node[pid].show);
-                        tree.node[key].left += this.__option.offsetX * deep;
-                        tree.node[key].top += this.__option.offsetY * deep;
-                    }
-                }
-            }
-            if (this.__option.type == 'rect') {
-                if (this.__option.direction == 'LR' || this.__option.direction == "RL") {
-                    var perW = this.__option.height / tree.size;
-                    var perD = this.__option.width / (tree.deep - 1);
-                    var balanceW = this.__option.y - this.__option.height * 0.5;
-                    var flag = this.__option.direction == 'LR' ? 1 : -1;
-                    for (var key in tree.node) {
-                        if (tree.deep == 1) {
-                            tree.node[key].left = this.__option.x + this.__option.width * 0.5 * flag;
-                            tree.node[key].top = this.__option.y;
-                        }
-                        else {
-                            tree.node[key].left = this.__option.x + (tree.node[key].left - 0.5) * perD * flag;
-                            tree.node[key].top = tree.node[key].top * perW + balanceW;
-                        }
-                    }
-                }
-                else if (this.__option.direction == 'TB' || this.__option.direction == "BT") {
-                    var perW = this.__option.width / tree.size;
-                    var perD = this.__option.height / (tree.deep - 1);
-                    var balanceW = this.__option.x - this.__option.width * 0.5;
-                    var flag = this.__option.direction == 'TB' ? 1 : -1;
-                    for (var key in tree.node) {
-                        if (tree.deep == 1) {
-                            tree.node[key].left = this.__option.x;
-                            tree.node[key].top = this.__option.y + this.__option.height * 0.5 * flag;
-                        }
-                        else {
-                            var left = tree.node[key].left;
-                            tree.node[key].left = tree.node[key].top * perW + balanceW;
-                            tree.node[key].top = this.__option.y + (left - 0.5) * perD * flag;
-                        }
-                    }
-                }
-            }
-            else if (this.__option.type == 'circle') {
-                var cx = this.__option.x, cy = this.__option.y;
-                var deg = Math.PI * 2 / tree.size;
-                var per = this.__option.radius / (tree.deep - 1);
-                for (var key in tree.node) {
-                    if (tree.node[key].left == 0.5) {
-                        tree.node[key].left = cx;
-                        tree.node[key].top = cy;
-                    }
-                    else {
-                        var position = rotate$1(cx, cy, deg * tree.node[key].top, cx + (tree.node[key].left - 0.5) * per, cy);
-                        tree.node[key].left = position[0];
-                        tree.node[key].top = position[1];
-                    }
-                }
-            }
-            return tree;
-        };
-        TreeLayout.prototype.bind = function (initTree, renderBack, noOpens) {
-            if (noOpens === void 0) { noOpens = {}; }
-            this.__rback = renderBack;
-            this.__oralTree = initTree;
-            this.__noOpens = noOpens;
-            this.__preTree = this.use(this.__oralTree, this.__noOpens);
-            this.__rback(this.__preTree);
-            return this;
-        };
-        TreeLayout.prototype.unbind = function () {
-            this.__rback = null;
-            this.__oralTree = null;
-            this.__preTree = null;
-            this.__noOpens = {};
-            return this;
-        };
-        TreeLayout.prototype.doUpdate = function () {
-            var _this = this;
-            var newTree = this.use(this.__oralTree, this.__noOpens);
-            var cacheTree = JSON.parse(JSON.stringify(newTree));
-            animation(function (deep) {
-                for (var key in cacheTree.node) {
-                    if (newTree.node[key].show || _this.__preTree.node[key].show) {
-                        cacheTree.node[key].show = true;
-                        cacheTree.node[key].left = _this.__preTree.node[key].left + (newTree.node[key].left - _this.__preTree.node[key].left) * deep;
-                        cacheTree.node[key].top = _this.__preTree.node[key].top + (newTree.node[key].top - _this.__preTree.node[key].top) * deep;
-                    }
-                }
-                _this.__rback(cacheTree);
-            }, this.__option.duration, function () {
-                _this.__preTree = newTree;
-                _this.__rback(_this.__preTree);
-            });
-        };
-        TreeLayout.prototype.closeNode = function (id) {
-            if (!this.__preTree)
-                return;
-            this.__noOpens[id] = true;
-            this.doUpdate();
-            return this;
-        };
-        TreeLayout.prototype.openNode = function (id) {
-            if (!this.__preTree)
-                return;
-            this.__noOpens[id] = false;
-            this.doUpdate();
-            return this;
-        };
-        TreeLayout.prototype.toggleNode = function (id) {
-            if (!this.__preTree)
-                return;
-            this.__noOpens[id] = !this.__noOpens[id];
-            this.doUpdate();
-            return this;
-        };
-        return TreeLayout;
-    }(Tree));
-
-    var splitNum = function (precision, radius) {
-        var num = Math.ceil(Math.PI * 2 /
-            Math.asin(precision / radius) * 2);
-        return (isNaN(num) || num < 12) ? 12 : num;
-    };
-
-    function prismHorizontal (normal, x, y, z, radius, num, d) {
-        var beginX, beginZ;
-        if (num == 4) {
-            var temp = radius / 1.414;
-            beginX = x + temp;
-            beginZ = z + temp;
-        }
-        else {
-            beginX = x + radius;
-            beginZ = z;
-        }
-        var point = [beginX, beginZ], points = [], deg = Math.PI * 2 / num;
-        for (var i = 0; i < num; i++) {
-            points.push(x, y, z);
-            if (normal)
-                points.push(0, d, 0);
-            points.push(point[0], y, point[1]);
-            if (normal)
-                points.push(0, d, 0);
-            point = rotate$1(x, z, deg * (i + 1), beginX, beginZ);
-            points.push(point[0], y, point[1]);
-            if (normal)
-                points.push(0, d, 0);
-        }
-        return points;
-    }
-
-    function prismVertical (normal, x, y, z, radius, height, num) {
-        var points = [];
-        var beginPosition;
-        if (num == 4) {
-            beginPosition = rotate$1(x, z, Math.PI * 0.25, x - radius, z);
-        }
-        else {
-            beginPosition = [x + radius, z];
-        }
-        var deg = Math.PI * 2 / num, degHalf = Math.PI * 2 / (num * 2);
-        var endPosition, normalPosition = [];
-        for (var i = 0; i < num; i++) {
-            endPosition = rotate$1.apply(void 0, __spreadArray([x, z, deg], beginPosition, false));
-            if (normal) {
-                var halfPosition = rotate$1.apply(void 0, __spreadArray([x, z, degHalf], beginPosition, false));
-                normalPosition = [halfPosition[0], 0, halfPosition[1]];
-            }
-            points.push.apply(points, __spreadArray([beginPosition[0], y, beginPosition[1]], normalPosition, false));
-            points.push.apply(points, __spreadArray([beginPosition[0], y + height, beginPosition[1]], normalPosition, false));
-            points.push.apply(points, __spreadArray([endPosition[0], y + height, endPosition[1]], normalPosition, false));
-            points.push.apply(points, __spreadArray([beginPosition[0], y, beginPosition[1]], normalPosition, false));
-            points.push.apply(points, __spreadArray([endPosition[0], y, endPosition[1]], normalPosition, false));
-            points.push.apply(points, __spreadArray([endPosition[0], y + height, endPosition[1]], normalPosition, false));
-            beginPosition = endPosition;
-        }
-        return points;
-    }
-
-    function sphereFragment (normal, cx, cy, cz, radius, num, index) {
-        var points = [cx, cy + radius, cz], deg = Math.PI * 2 / num, point;
-        if (normal)
-            points.push(0, radius, 0);
-        var copy2 = function () {
-            points.push.apply(points, points.slice(points.length - (normal ? 12 : 6)));
-        };
-        for (var i = 1; i < num * 0.5; i++) {
-            point = rotate$1(cx, cy, deg * i, cx, cy + radius);
-            if (i > 1)
-                copy2();
-            var point1 = rotate$1(cx, cz, deg * index, point[0], cz);
-            points.push(point1[0], point[1], point1[1]);
-            if (normal)
-                points.push(point1[0] - cx, point[1] - cy, point1[1] - cz);
-            if (i > 1)
-                copy2();
-            var point2 = rotate$1(cx, cz, deg * (index + 1), point[0], cz);
-            points.push(point2[0], point[1], point2[1]);
-            if (normal)
-                points.push(point2[0] - cx, point2[1] - cy, point2[1] - cz);
-        }
-        copy2();
-        points.push(cx, cy - radius, cz);
-        if (normal)
-            points.push(0, -radius, 0);
-        return points;
-    }
-
-    var Geometry = (function () {
-        function Geometry(option) {
-            if (option === void 0) { option = {}; }
-            this.name = 'Geometry';
-            this.__option = mergeOption(option, {
-                precision: 0.1,
-                normal: false,
-            });
-        }
-        Geometry.prototype.config = function (option) {
-            for (var key in option) {
-                this.__option[key] = option[key];
-            }
-            return this;
-        };
-        Geometry.prototype.cylinder = function (x, y, z, radius, height) {
-            var num = splitNum(this.__option.precision, radius);
-            return this.prism(x, y, z, radius, height, num);
-        };
-        Geometry.prototype.prism = function (x, y, z, radius, height, num) {
-            var _a, _b, _c;
-            var result = [{
-                    points: [],
-                    length: 0,
-                    method: "TRIANGLES"
-                }];
-            (_a = result[0].points).push.apply(_a, prismHorizontal(this.__option.normal, x, y, z, radius, num, height > 0 ? -1 : 1));
-            (_b = result[0].points).push.apply(_b, prismHorizontal(this.__option.normal, x, y + height, z, radius, num, height > 0 ? 1 : -1));
-            (_c = result[0].points).push.apply(_c, prismVertical(this.__option.normal, x, y, z, radius, height, num));
-            result[0].length = 12 * num;
-            return result;
-        };
-        Geometry.prototype.sphere = function (cx, cy, cz, radius) {
-            var _a;
-            var num = splitNum(this.__option.precision, radius);
-            var result = [{
-                    points: [],
-                    length: 0,
-                    method: "TRIANGLES"
-                }];
-            for (var i = 0; i < num; i++) {
-                (_a = result[0].points).push.apply(_a, sphereFragment(this.__option.normal, cx, cy, cz, radius, num, i));
-            }
-            result[0].length = result[0].points.length / (this.__option.normal ? 6 : 3);
-            return result;
-        };
-        return Geometry;
-    }());
-
-    var index = {
-        Cardinal: Cardinal,
-        Hermite: Hermite,
-        Matrix4: Matrix4,
-        rotate: rotate$1,
-        getLoopColors: getLoopColors,
-        formatColor: formatColor,
-        animation: animation,
-        ruler: ruler,
-        SVG: SVG,
-        Canvas: Canvas,
-        WebGL: WebGL,
-        getWebGLContext: getWebGLContext,
-        Shader: Shader,
-        Texture: TextureObject,
-        Buffer: BufferObject,
-        Eoap: Eoap,
-        Mercator: Mercator,
-        viewHandler: viewHandler,
-        resizeObserver: resizeObserver,
-        throttle: throttle,
-        TreeLayout: TreeLayout,
-        Geometry: Geometry
-    };
-
-    return index;
-
-}));