vislite 0.4.1-alpha.2 → 0.4.1-beta.0

package/lib/index.umd.js

@@ -1,12 +1,12 @@
 /*!
-* VISLite JavaScript Library v0.4.1-alpha.2
+* VISLite JavaScript Library v0.4.1-beta.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 Aug 12 2023 23:34:54 GMT+0800 (中国标准时间)
+* Publish Date:  Wed Aug 23 2023 22:06:27 GMT+0800 (中国标准时间)
 */
 (function (global, factory) {
     typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
@@ -278,6 +278,46 @@
         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;
@@ -343,7 +383,7 @@
             var i;
             for (i in $timers) {
                 if ($timers[i].id == id) {
-                    $timers[i].id = undefined;
+                    $timers[i].id = void 0;
                     return;
                 }
             }
@@ -1011,9 +1051,11 @@
     }
 
     var Painter = (function () {
-        function Painter(canvas, opts, region) {
+        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",
@@ -1034,6 +1076,7 @@
             };
             this.painter = canvas.getContext("2d", opts);
             this.__region = region;
+            this.__isPainter = isPainter;
             this.painter.textBaseline = 'middle';
             this.painter.textAlign = 'left';
         }
@@ -1043,6 +1086,8 @@
                     this.__region.useConfig(key, value);
                 }
             }
+            if (this.__isPainter && this.__onlyRegion)
+                return this;
             if (key == 'lineDash') {
                 if (this.painter.setLineDash)
                     this.painter.setLineDash(value);
@@ -1065,6 +1110,8 @@
             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();
@@ -1074,6 +1121,8 @@
             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();
@@ -1083,6 +1132,8 @@
             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);
@@ -1094,8 +1145,11 @@
             var _this = this;
             if (lineHeight === void 0) { lineHeight = 1.2; }
             if (deg === void 0) { deg = 0; }
+            var h = 0;
             if (this.__region)
-                this.__region.fillTexts(contents, x, y, width, lineHeight);
+                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) {
@@ -1108,8 +1162,11 @@
             var _this = this;
             if (lineHeight === void 0) { lineHeight = 1.2; }
             if (deg === void 0) { deg = 0; }
+            var h = 0;
             if (this.__region)
-                this.__region.fillTexts(contents, x, y, width, lineHeight);
+                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) {
@@ -1122,8 +1179,11 @@
             var _this = this;
             if (lineHeight === void 0) { lineHeight = 1.2; }
             if (deg === void 0) { deg = 0; }
+            var h = 0;
             if (this.__region)
-                this.__region.fillTexts(contents, x, y, width, lineHeight);
+                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) {
@@ -1136,48 +1196,64 @@
         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;
@@ -1185,54 +1261,72 @@
         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();
@@ -1241,18 +1335,24 @@
         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();
@@ -1261,23 +1361,30 @@
         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;
     }());
 
@@ -1339,7 +1446,7 @@
         function Canvas(ViewCanvas, RegionCanvas) {
             var _this = _super.call(this, ViewCanvas, {}, RegionCanvas ? new Painter(RegionCanvas, {
                 willReadFrequently: true,
-            }) : null) || this;
+            }) : null, true) || this;
             _this.name = "Canvas";
             _this.__regionList = {};
             _this.__regionAssemble = assemble(0, 255, 10, 3);
@@ -1353,10 +1460,14 @@
             }
             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] == undefined) {
+                    if (this.__regionList[regionName] == void 0) {
                         var tempColor = this.__regionAssemble();
                         this.__regionList[regionName] =
                             "rgb(" + tempColor[0] + "," + tempColor[1] + "," + tempColor[2] + ")";
@@ -1439,6 +1550,13 @@
         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) {
@@ -1447,8 +1565,9 @@
             if (!el) {
                 throw new Error("VISLite Canvas:The mount point requires an HTMLElement type but encountered null.");
             }
-            if (!('region' in option))
-                option.region = true;
+            option = mergeOption(option, {
+                region: true
+            });
             var width = el.clientWidth, height = el.clientHeight;
             var ViewCanvas, RegionCanvas;
             var _el = el;
@@ -1561,9 +1680,7 @@
 
     var initTexture = function (painter, type, unit) {
         var texture = painter.createTexture();
-        if (type == painter.TEXTURE_2D) {
-            painter.activeTexture(painter['TEXTURE' + unit]);
-        }
+        painter.activeTexture(painter['TEXTURE' + unit]);
         painter.bindTexture(type, texture);
         return texture;
     };
@@ -1659,18 +1776,44 @@
         return ShaderObject;
     }());
 
+    var vsColor = "attribute vec4 a_position;\r\nuniform mat4 u_matrix;\r\n\r\nvoid main()\r\n{\r\n    vec4 temp = u_matrix * a_position;\r\n\r\n    // 把原生的WebGL使用的左手坐标系变成了右手坐标系\r\n    temp.z = -1.0 * temp.z;\r\n\r\n    // 表示眼睛距离vec4(0.0,0.0,1.0)的距离\r\n    float dist = 4.0;\r\n\r\n    // 使用投影直接计算\r\n    // 为保证纹理和相对位置正确\r\n    // x、y、z的改变满足线性变换\r\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));\r\n}";
+
+    var vsColors = "attribute vec4 a_position;\r\nuniform mat4 u_matrix;\r\nattribute vec4 a_color;\r\nvarying vec4 v_color;\r\n\r\nvoid main()\r\n{\r\n    vec4 temp = u_matrix * a_position;\r\n    temp.z = -1.0 * temp.z;\r\n    float dist = 4.0;\r\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));\r\n\r\n    v_color = a_color;\r\n}";
+
+    var vsImage = "attribute vec4 a_position;\r\nuniform mat4 u_matrix;\r\nattribute vec2 a_textcoord;\r\nvarying vec2 v_textcoord;\r\n\r\nvoid main()\r\n{\r\n    vec4 temp = u_matrix * a_position;\r\n    temp.z = -1.0 * temp.z;\r\n    float dist = 4.0;\r\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));\r\n\r\n    v_textcoord = a_textcoord;\r\n}";
+
+    var vsCube = "attribute vec4 a_position;\r\nuniform mat4 u_matrix;\r\nattribute vec4 a_normal;\r\nvarying vec3 v_normal;\r\n\r\nvoid main()\r\n{\r\n    vec4 temp = u_matrix * a_position;\r\n    temp.z = -1.0 * temp.z;\r\n    float dist = 4.0;\r\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));\r\n\r\n    v_normal = normalize(vec3(a_normal));\r\n}";
+
+    var fsColor = "precision mediump float;\r\n\r\nuniform vec4 u_color;\r\n\r\nvoid main()\r\n{\r\n    gl_FragColor = u_color;\r\n}";
+
+    var fsColors = "precision mediump float;\r\n\r\nvarying vec4 v_color;\r\n\r\nvoid main()\r\n{\r\n    gl_FragColor = v_color;\r\n}";
+
+    var fsImage = "precision mediump float;\r\n\r\nuniform sampler2D u_sampler;\r\nvarying vec2 v_textcoord;\r\n\r\nvoid main()\r\n{\r\n    gl_FragColor = texture2D(u_sampler, v_textcoord);\r\n}";
+
+    var fsCube = "precision mediump float;\r\n\r\nvarying vec3 v_normal;\r\nuniform samplerCube u_texture;\r\n\r\nvoid main()\r\n{\r\n    gl_FragColor = textureCube(u_texture, normalize(v_normal));\r\n}";
+
     var shaders = {};
     function getShader (type, painter, mesh) {
+        var _a, _b;
         var uniqueName = type +
-            (mesh.geometry.attributes.normal ? "1" : "0") +
-            (mesh.material.image ? "1" : "0") +
             (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 = "\n    attribute vec4 a_position;\n\n     ".concat(mesh.geometry.attributes.normal ? 'attribute vec4 a_normal;varying vec3 v_normal;' : '', "\n\n    uniform mat4 u_matrix_world;\n    uniform mat4 u_matrix_mesh;\n    uniform mat4 u_matrix_proporion;\n\n    ").concat(mesh.material.image ? 'attribute vec2 a_textcoord;varying vec2 v_textcoord;' : '', "\n\n    ").concat(mesh.material.colors ? 'attribute vec4 a_color;varying vec4 v_color;' : '', "\n\n    void main(){\n        vec4 temp = a_position;\n\n        // \u5E94\u7528\u53D8\u6362\u77E9\u9635\uFF1A\u5C4F\u5E55\u6BD4\u8C03\u5E73\u77E9\u9635\u3001\u4E16\u754C\u77E9\u9635\u3001\u7269\u4F53\u77E9\u9635\n        temp = u_matrix_proporion * u_matrix_world * u_matrix_mesh * temp;\n\n        // \u628A\u539F\u751F\u7684WebGL\u4F7F\u7528\u7684\u5DE6\u624B\u5750\u6807\u7CFB\u53D8\u6210\u4E86\u53F3\u624B\u5750\u6807\u7CFB\n        temp.z = -1.0 * temp.z;\n\n        // \u8868\u793A\u773C\u775B\u8DDD\u79BBvec4(0.0,0.0,1.0)\u7684\u8DDD\u79BB\n        float dist = 4.0;\n\n        // \u4F7F\u7528\u6295\u5F71\u76F4\u63A5\u8BA1\u7B97\n        // \u4E3A\u4FDD\u8BC1\u7EB9\u7406\u548C\u76F8\u5BF9\u4F4D\u7F6E\u6B63\u786E\n        // x\u3001y\u3001z\u7684\u6539\u53D8\u6EE1\u8DB3\u7EBF\u6027\u53D8\u6362\n        gl_Position = vec4((dist + 1.0) * temp.x, (dist + 1.0) * temp.y, dist * (dist + temp.z) + 1.0 - dist * dist, temp.w * 2.0 * (dist + temp.z));\n\n        ").concat(mesh.geometry.attributes.normal ? 'v_normal = normalize(vec3(a_normal));' : '', "\n        ").concat(mesh.material.image ? 'v_textcoord = a_textcoord;' : '', "\n        ").concat(mesh.material.colors ? 'v_color=a_color;' : '', "\n     }\n ");
-        var fragmentShader = "\n    precision mediump float;\n\n    ".concat(mesh.geometry.attributes.normal ? 'varying vec3 v_normal;' : '', "\n    ").concat(mesh.material.color ? 'uniform vec4 u_color;' : '', "\n    ").concat(mesh.material.cube ? 'uniform samplerCube u_texture;' : '', "\n    ").concat(mesh.material.image ? 'uniform sampler2D u_sampler;varying vec2 v_textcoord;' : '', "\n    ").concat(mesh.material.colors ? 'varying vec4 v_color;' : '', "\n\n    void main(){\n        ").concat(mesh.material.color ? 'gl_FragColor = u_color;' : '', "\n        ").concat(mesh.material.cube ? 'gl_FragColor = textureCube(u_texture,normalize(v_normal));' : '', "\n        ").concat(mesh.material.image ? 'gl_FragColor = texture2D(u_sampler,v_textcoord);' : '', "\n        ").concat(mesh.material.colors ? 'gl_FragColor=v_color;' : '', "\n    }\n ");
+        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;
@@ -1699,6 +1842,7 @@
         }
         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,
@@ -1855,7 +1999,7 @@
         WebGL.prototype.setRegion = function (regionName) {
             this.__regionName = regionName + "";
             if (regionName) {
-                if (this.__regionList[regionName] == undefined) {
+                if (this.__regionList[regionName] == void 0) {
                     this.__regionList[regionName] = __spreadArray(__spreadArray([], this.__regionAssemble(), true), [1], false);
                 }
                 this.__regionColor = this.__regionList[regionName];
@@ -1892,8 +2036,9 @@
             if (!el) {
                 throw new Error("VISLite WebGL:The mount point requires an HTMLElement type but encountered null.");
             }
-            if (!('region' in option))
-                option.region = true;
+            option = mergeOption(option, {
+                region: true
+            });
             var width = el.clientWidth, height = el.clientHeight;
             var ViewCanvas, RegionCanvas;
             var _el = el;
@@ -1952,6 +2097,33 @@
         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];
@@ -2125,24 +2297,384 @@
         }
     }
 
+    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;
+        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) {
+            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) {
+            this.__rback = renderBack;
+            this.__oralTree = initTree;
+            this.__preTree = this.use(this.__oralTree);
+            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 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: ShaderObject,
+        Shader: Shader,
         Texture: TextureObject,
         Buffer: BufferObject,
         Eoap: Eoap,
         Mercator: Mercator,
-        viewHandler: viewHandler
+        viewHandler: viewHandler,
+        resizeObserver: resizeObserver,
+        throttle: throttle,
+        TreeLayout: TreeLayout
     };
 
     return index;