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

package/.editorconfig

@@ -0,0 +1,19 @@
+# http://editorconfig.org
+
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 4
+end_of_line = cr
+insert_final_newline = false
+trim_trailing_whitespace = true
+
+[*.md]
+insert_final_newline = false
+trim_trailing_whitespace = false
+
+[*.json]
+indent_size = 2
+insert_final_newline = true

package/CHANGELOG

@@ -3,8 +3,8 @@ v0.1.0:
     changes:
       - 初始化版本
         1、Canvas
-          （支持平台：H5、uni-app(包括：H5、微信小程序、支付宝小程序)、微信小程序）
-        2、SVG
+          （支持平台：H5、uni-app（包括：H5、微信小程序、支付宝小程序）、微信小程序）
+        2、SVG画笔
           （支持平台：H5）
         3、Eoap 等角斜方位投影
         4、rotate 旋转
@@ -31,7 +31,7 @@ v0.2.0:
         1、针对Canvas和SVG的画笔配置config的属性名，统一使用小驼峰
           （对旧语法进行了向下兼容）
       - 新增功能
-        1、WebGL
+        1、WebGL画笔
           （支持平台：H5）
         2、Mercator 墨卡托投影
         3、Canvas新增功能
@@ -54,15 +54,15 @@ v0.3.0:
             * render方法中itemSize设置无效问题
         4、修复Cardinal插值超过界限的值问题
       - 新增功能
-        1、丰富Canvas画笔方法
+        1、Canvas画笔
             * createLinearGradient 线性渐变色
             * createRadialGradient 环形渐变色
             * clip 裁剪
             * 绘制圆弧系列（fillArc、strokeArc、fullArc）的闭合方式添加```-round```选项
             * getColor 获取指定位置颜色
-        2、丰富SVG画笔方法
+        2、SVG画笔
             * 绘制圆弧系列（fillArc、strokeArc、fullArc）的闭合方式添加```-round```选项
-        3、丰富WebGL画笔丰富
+        3、WebGL画笔
             * 材料material新增多颜色值colors
         4、朴素的WebGL接口集合
             * getWebGLContext 画笔
@@ -79,14 +79,35 @@ v0.4.0:
     date:2023-07-22
     changes:
       - 新增功能
-        1、丰富Canvas画笔方法
-            * textWidth 计算文字宽 
+        1、Canvas画笔
+            * textWidth 计算文字宽
 v0.4.1:
     date:
     changes:
+      - 修复bug
+        1、uni-app平台的ui-canvas在微信小程序环境下有时会绘制失败并渲染过慢问题
+        2、Canvas画笔
+            * 多行文字（fillTexts、strokeTexts、fullTexts）在处理有换行文字时的未正确处理
       - 优化改造
         1、优化WebGL区域计算设计
-        2、uni-app平台的ui-canvas的方法draw对外暴露是否更丰富的参数
       - 新增功能
-        1、viewHandler新增对悬浮hover事件的捕获并统一添加event参数
-        2、刻度尺算法ruler新增可选上下界约束
+        1、Canvas画笔
+            * 添加region配置，可以控制是否支持区域管理
+            * onlyRegion 区域模式
+        2、WebGL画笔
+            * 添加region配置，可以控制是否支持区域管理
+        3、uni-app平台的ui-canvas
+            * 画笔的draw方法对外暴露更丰富的参数
+            * 添加region属性，可以控制是否支持区域管理
+        4、微信小程序平台的ui-canvas
+            * 添加region属性，可以控制是否支持区域管理
+        5、viewHandler新增对悬浮hover事件的捕获并统一添加event参数
+        6、刻度尺算法ruler新增可选上下界约束
+        7、颜色格式化 formatColor
+          （支持平台：H5）
+        8、节点缩放监听 resizeObserver
+          （支持平台：H5）
+        9、节流函数 throttle
+        10、布局
+            * 树布局 treeLayout
+        11、着色器compile方法丰富参数（添加color、colors、image、cube四种内置着色器程序）

package/README.md

@@ -1,6 +1,6 @@
 - 开源不易，去 <i>[Github给个Star](https://github.com/oi-contrib/VISLite) </i>吧！
 
-<img src='https://oi-contrib.github.io/VISLite/images/logo.png' height='300px'/>
+<img src='./docs/images/logo.png' height='300px'/>
 
 <p>
     <a href="https://zxl20070701.github.io/toolbox/#/npm-download?packages=vislite&interval=7">
@@ -27,6 +27,8 @@
 - 简单与复杂共存：一方面我们提供了可视化需要的基础功能，你可以按照自己的需要组合使用；另一方面，为了加速开发，我们针对常见的可视化业务场景进行了封装，可以帮助你快速完成，你可以根据实际情况进行选择。
 - 向下兼容：我们向你保证，始终向下兼容```（alpha和beta版本为测试版本，不包括）```，因此，无论何时，最新版本总是最好的选择。
 
+> 版本说明：alpha为开发阶段、beta为发布前测试、无后缀的为正式版本。
+
 ## 需求墙
 
 我们的目标是不断完善丰富可视化功能，非常希望获得你宝贵的建议和批评，无论任何想法，都可以给我们[留言](https://github.com/oi-contrib/VISLite/issues)告诉我们。
@@ -47,6 +49,19 @@
 
 给我们[留言](https://github.com/oi-contrib/VISLite/issues)告诉我们你希望快速扩展的功能，我们会优先你的建议考虑哦～
 
+## 参与贡献
+
+你可以选择下列一项或多项进行参与：
+
+- 代码维护：由于新功能或一些BUG的出现，对代码进行维护和升级。
+- 文档编辑：主要是接口文档和教程需要编辑，这很重要。
+- 用例开发和测试：在项目的test文件夹下有一些测试，而在docs文档中存在一些例子需要补充。
+- 参与讨论：主要是讨论未来如何发展，改造的方向等。
+
+如果有意向加入我们，你可以通过提 [issue](https://github.com/oi-contrib/VISLite/issues) 和我们取到联系，请简单说明一下情况，我们会尽快回复。
+
+你可以查看[VISLite 贡献指南](./.github/CONTRIBUTING.md)文件了解更多细节，查看[AUTHORS.txt](./AUTHORS.txt)了解所有的贡献者。
+
 ## 版权
 
 MIT License

package/lib/Buffer/index.umd.js

@@ -1,12 +1,12 @@
 /*!
-* VISLite JavaScript Library v0.4.1-alpha.1
+* 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:  Tue Aug 08 2023 19:08:50 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() :

package/lib/Buffer/index.umd.min.js

@@ -1,11 +1,11 @@
 /*!
-* VISLite JavaScript Library v0.4.1-alpha.1
+* 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:  Tue Aug 08 2023 19:08:50 GMT+0800 (中国标准时间)
+* Publish Date:  Wed Aug 23 2023 22:06:27 GMT+0800 (中国标准时间)
 */
 var t,e;t=this,e=function(){"use strict";return function(){function t(t,e){void 0===e&&(e=!1),this.__painter=t,this.__isElement=e,this.__buffer=function(t){return t.createBuffer()}(t),this.__type=e?t.ELEMENT_ARRAY_BUFFER:t.ARRAY_BUFFER}return t.prototype.use=function(){return this.__painter.bindBuffer(this.__type,this.__buffer),this},t.prototype.write=function(t){return function(t,e,i,n){var r=i?t.ELEMENT_ARRAY_BUFFER:t.ARRAY_BUFFER;t.bufferData(r,e,n)}(this.__painter,t,this.__isElement,this.__painter.STATIC_DRAW),this.__fsize=t.BYTES_PER_ELEMENT,this},t.prototype.divide=function(t,e,i,n){return void 0===n&&(n=0),function(t,e,i,n,r,_,f){t.vertexAttribPointer(e,i,n,f,r,_),t.enableVertexAttribArray(e)}(this.__painter,t,e,this.__painter.FLOAT,i*this.__fsize,n*this.__fsize,!1),this},t}()},"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t="undefined"!=typeof globalThis?globalThis:t||self).VISLite_Buffer=e();

package/lib/Canvas/index.umd.js

@@ -1,12 +1,12 @@
 /*!
-* VISLite JavaScript Library v0.4.1-alpha.1
+* 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:  Tue Aug 08 2023 19:08:50 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() :
@@ -144,7 +144,7 @@
     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) {
+            if (painter.measureText(content + contents[i]).width > width || /\n$/.test(content)) {
                 lineNumber += 1;
                 doback(content, (lineNumber - 0.5) * height);
                 content = contents[i];
@@ -161,9 +161,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",
@@ -184,6 +186,7 @@
             };
             this.painter = canvas.getContext("2d", opts);
             this.__region = region;
+            this.__isPainter = isPainter;
             this.painter.textBaseline = 'middle';
             this.painter.textAlign = 'left';
         }
@@ -193,6 +196,8 @@
                     this.__region.useConfig(key, value);
                 }
             }
+            if (this.__isPainter && this.__onlyRegion)
+                return this;
             if (key == 'lineDash') {
                 if (this.painter.setLineDash)
                     this.painter.setLineDash(value);
@@ -215,6 +220,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();
@@ -224,6 +231,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();
@@ -233,6 +242,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);
@@ -244,8 +255,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) {
@@ -258,8 +272,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) {
@@ -272,8 +289,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) {
@@ -286,48 +306,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;
@@ -335,54 +371,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();
@@ -391,18 +445,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();
@@ -411,23 +471,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;
     }());
 
@@ -487,9 +554,9 @@
     var Canvas$1 = (function (_super) {
         __extends(Canvas, _super);
         function Canvas(ViewCanvas, RegionCanvas) {
-            var _this = _super.call(this, ViewCanvas, {}, new Painter(RegionCanvas, {
+            var _this = _super.call(this, ViewCanvas, {}, RegionCanvas ? new Painter(RegionCanvas, {
                 willReadFrequently: true,
-            })) || this;
+            }) : null, true) || this;
             _this.name = "Canvas";
             _this.__regionList = {};
             _this.__regionAssemble = assemble(0, 255, 10, 3);
@@ -503,39 +570,49 @@
             }
             return this;
         };
+        Canvas.prototype.onlyRegion = function (flag) {
+            this.__onlyRegion = flag;
+            return this;
+        };
         Canvas.prototype.setRegion = function (regionName) {
-            if (regionName) {
-                if (this.__regionList[regionName] == undefined) {
-                    var tempColor = this.__regionAssemble();
-                    this.__regionList[regionName] =
-                        "rgb(" + tempColor[0] + "," + tempColor[1] + "," + tempColor[2] + ")";
+            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");
                 }
-                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.painter.getImageData(x - 0.5, y - 0.5, 1, 1);
+                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 () {
-                    for (var key in _this.__regionList) {
-                        if ("rgb(" +
-                            currentRGBA[0] +
-                            "," +
-                            currentRGBA[1] +
-                            "," +
-                            currentRGBA[2] +
-                            ")" ==
-                            _this.__regionList[key]) {
-                            resolve(key);
-                            break;
+                    if (_this.__region) {
+                        for (var key in _this.__regionList) {
+                            if ("rgb(" +
+                                currentRGBA[0] +
+                                "," +
+                                currentRGBA[1] +
+                                "," +
+                                currentRGBA[2] +
+                                ")" ==
+                                _this.__regionList[key]) {
+                                resolve(key);
+                                break;
+                            }
                         }
                     }
                     resolve("");
@@ -560,7 +637,7 @@
         };
         Canvas.prototype.getContext = function (isRegion) {
             if (isRegion === void 0) { isRegion = false; }
-            return isRegion ? this.__region.painter : this.painter;
+            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);
@@ -583,13 +660,24 @@
         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) {
+        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;
@@ -600,16 +688,20 @@
             else {
                 ViewCanvas = document.createElement('canvas');
                 el.appendChild(ViewCanvas);
-                RegionCanvas = document.createElement('canvas');
+                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];
-                canvas.style.width = width + "px";
-                canvas.setAttribute('width', width + "");
-                canvas.style.height = height + "px";
-                canvas.setAttribute('height', height + "");
+                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;