vislite 0.5.2-alpha.1 → 0.5.2

package/lib/SVG/index.umd.js

@@ -1,12 +1,12 @@
 /*!
-* VISLite JavaScript Library v0.5.2-alpha.1
+* VISLite JavaScript Library v0.5.2
 * git+https://github.com/oi-contrib/VISLite.git
 *
 * Copyright zxl20070701
 * Released under the MIT license
 * https://zxl20070701.github.io/notebook/home.html
 *
-* Publish Date:  Thu Oct 12 2023 15:44:35 GMT+0800 (China Standard Time)
+* Publish Date:  Sat Nov 04 2023 09:25:44 GMT+0800 (中国标准时间)
 */
 (function (global, factory) {
     typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
@@ -52,422 +52,487 @@
 
     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 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];
-        }
+    function setStyle (el, styles) {
+        for (var key in styles) {
+            el.style[key] = styles[key];
+        }
     }
 
-    var rotate$1 = function (cx, cy, deg, x, y) {
-        var cos = Math.cos(deg), sin = Math.sin(deg);
-        return [
-            +((x - cx) * cos - (y - cy) * sin + cx).toFixed(7),
-            +((x - cx) * sin + (y - cy) * cos + cy).toFixed(7)
-        ];
-    };
-    function arc (beginA, rotateA, cx, cy, r1, r2, doback) {
-        if (rotateA < 0) {
-            beginA += rotateA;
-            rotateA *= -1;
-        }
-        var temp = [], p;
-        p = rotate$1(0, 0, beginA, r1, 0);
-        temp[0] = p[0];
-        temp[1] = p[1];
-        p = rotate$1(0, 0, rotateA, p[0], p[1]);
-        temp[2] = p[0];
-        temp[3] = p[1];
-        p = rotate$1(0, 0, beginA, r2, 0);
-        temp[4] = p[0];
-        temp[5] = p[1];
-        p = rotate$1(0, 0, rotateA, p[0], p[1]);
-        temp[6] = p[0];
-        temp[7] = p[1];
-        doback(beginA, beginA + rotateA, temp[0] + cx, temp[1] + cy, temp[4] + cx, temp[5] + cy, temp[2] + cx, temp[3] + cy, temp[6] + cx, temp[7] + cy, (r2 - r1) * 0.5);
+    var rotate$1 = function (cx, cy, deg, x, y) {
+        var cos = Math.cos(deg), sin = Math.sin(deg);
+        return [
+            +((x - cx) * cos - (y - cy) * sin + cx).toFixed(7),
+            +((x - cx) * sin + (y - cy) * cos + cy).toFixed(7)
+        ];
+    };
+    function arc (beginA, rotateA, cx, cy, r1, r2, doback) {
+        if (rotateA < 0) {
+            beginA += rotateA;
+            rotateA *= -1;
+        }
+        var temp = [], p;
+        p = rotate$1(0, 0, beginA, r1, 0);
+        temp[0] = p[0];
+        temp[1] = p[1];
+        p = rotate$1(0, 0, rotateA, p[0], p[1]);
+        temp[2] = p[0];
+        temp[3] = p[1];
+        p = rotate$1(0, 0, beginA, r2, 0);
+        temp[4] = p[0];
+        temp[5] = p[1];
+        p = rotate$1(0, 0, rotateA, p[0], p[1]);
+        temp[6] = p[0];
+        temp[7] = p[1];
+        doback(beginA, beginA + rotateA, temp[0] + cx, temp[1] + cy, temp[4] + cx, temp[5] + cy, temp[2] + cx, temp[3] + cy, temp[6] + cx, temp[7] + cy, (r2 - r1) * 0.5);
     }
 
-    var initText = 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 = 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 = 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 = 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 initDefs = function (el) {
+        var defs = el.getElementsByTagName('defs');
+        if (defs.length <= 0) {
+            var newDefs = toNode("defs");
+            el.appendChild(newDefs);
+            return newDefs;
+        }
+        else {
+            return defs[0];
+        }
+    };
+    var initText = 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 = 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 = 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 = 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);
+        });
     };
 
-    function rotate (cx, cy, deg, x, y) {
-        var cos = Math.cos(deg), sin = Math.sin(deg);
-        return [
-            (x - cx) * cos - (y - cy) * sin + cx,
-            (x - cx) * sin + (y - cy) * cos + cy
-        ];
+    function rotate (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
+        ];
     }
 
-    var oldAttrName = {
-        "font-size": "fontSize",
-        "font-family": "fontFamily",
-        "arc-start-cap": "arcStartCap",
-        "arc-end-cap": "arcEndCap",
+    var linearGradient = function (el, x0, y0, x1, y1) {
+        var defs = initDefs(el);
+        var gradientId = "vislite-lg-" + new Date().valueOf() + "-" + Math.random();
+        var linearGradient = toNode("linearGradient");
+        defs.appendChild(linearGradient);
+        setAttribute(linearGradient, "id", gradientId);
+        setAttribute(linearGradient, "x1", x0 + "%");
+        setAttribute(linearGradient, "y1", y0 + "%");
+        setAttribute(linearGradient, "x2", x1 + "%");
+        setAttribute(linearGradient, "y2", y1 + "%");
+        var enhanceGradient = {
+            "value": function () {
+                return "url(#" + gradientId + ")";
+            },
+            "setColor": function (stop, color) {
+                var stopEl = toNode("stop");
+                linearGradient.appendChild(stopEl);
+                setAttribute(stopEl, "offset", (stop * 100) + "%");
+                setAttribute(stopEl, "style", "stop-color:" + color + ";");
+                return enhanceGradient;
+            }
+        };
+        return enhanceGradient;
+    };
+    var radialGradient = function (el, cx, cy, r) {
+        var defs = initDefs(el);
+        var gradientId = "vislite-rg-" + new Date().valueOf() + "-" + Math.random();
+        var radialGradient = toNode("radialGradient");
+        defs.appendChild(radialGradient);
+        setAttribute(radialGradient, "id", gradientId);
+        setAttribute(radialGradient, "cx", cx + "%");
+        setAttribute(radialGradient, "cy", cy + "%");
+        setAttribute(radialGradient, "r", r + "%");
+        var enhanceGradient = {
+            "value": function () {
+                return "url(#" + gradientId + ")";
+            },
+            "setColor": function (stop, color) {
+                var stopEl = toNode("stop");
+                radialGradient.appendChild(stopEl);
+                setAttribute(stopEl, "offset", (stop * 100) + "%");
+                setAttribute(stopEl, "style", "stop-color:" + color + ";");
+                return enhanceGradient;
+            }
+        };
+        return enhanceGradient;
     };
-    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[params] || params];
-            }
-            else {
-                for (var key in params) {
-                    var _key = oldAttrName[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(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(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(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(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(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(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(this.__useEl, cx, cy, r);
-            fill(this.__useEl, this.__config);
-            return this;
-        };
-        SVG.prototype.strokeCircle = function (cx, cy, r) {
-            initCircle(this.__useEl, cx, cy, r);
-            stroke(this.__useEl, this.__config);
-            return this;
-        };
-        SVG.prototype.fullCircle = function (cx, cy, r) {
-            initCircle(this.__useEl, cx, cy, r);
-            full(this.__useEl, this.__config);
-            return this;
-        };
-        SVG.prototype.fillRect = function (x, y, width, height) {
-            initRect(this.__useEl, x, y, width, height);
-            fill(this.__useEl, this.__config);
-            return this;
-        };
-        SVG.prototype.strokeRect = function (x, y, width, height) {
-            initRect(this.__useEl, x, y, width, height);
-            stroke(this.__useEl, this.__config);
-            return this;
-        };
-        SVG.prototype.fullRect = function (x, y, width, height) {
-            initRect(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(x, y, (beginDeg / 180) * Math.PI, x + r, y);
-            var endPosition = rotate(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 oldAttrName = {
+        "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[params] || params];
+            }
+            else {
+                for (var key in params) {
+                    var _key = oldAttrName[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(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(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(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(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(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(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(this.__useEl, cx, cy, r);
+            fill(this.__useEl, this.__config);
+            return this;
+        };
+        SVG.prototype.strokeCircle = function (cx, cy, r) {
+            initCircle(this.__useEl, cx, cy, r);
+            stroke(this.__useEl, this.__config);
+            return this;
+        };
+        SVG.prototype.fullCircle = function (cx, cy, r) {
+            initCircle(this.__useEl, cx, cy, r);
+            full(this.__useEl, this.__config);
+            return this;
+        };
+        SVG.prototype.fillRect = function (x, y, width, height) {
+            initRect(this.__useEl, x, y, width, height);
+            fill(this.__useEl, this.__config);
+            return this;
+        };
+        SVG.prototype.strokeRect = function (x, y, width, height) {
+            initRect(this.__useEl, x, y, width, height);
+            stroke(this.__useEl, this.__config);
+            return this;
+        };
+        SVG.prototype.fullRect = function (x, y, width, height) {
+            initRect(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(x, y, (beginDeg / 180) * Math.PI, x + r, y);
+            var endPosition = rotate(x, y, ((beginDeg + deg) / 180) * Math.PI, x + r, y);
+            if (this.__path == "") {
+                this.__path += "M" + begPosition[0] + "," + begPosition[1];
+            }
+            else if (begPosition[0] != this.__currentPosition[0] ||
+                begPosition[1] != this.__currentPosition[1]) {
+                this.__path += "L" + begPosition[0] + "," + begPosition[1];
+            }
+            this.__path +=
+                "A" +
+                    r +
+                    "," +
+                    r +
+                    " 0 " +
+                    (deg > 180 || deg < -180 ? 1 : 0) +
+                    "," +
+                    (deg > 0 ? 1 : 0) +
+                    " " +
+                    endPosition[0] +
+                    "," +
+                    endPosition[1];
+            return this;
+        };
+        SVG.prototype.quadraticCurveTo = function (cpx, cpy, x, y) {
+            this.__path += "Q" + cpx + " " + cpy + "," + x + " " + y;
+            return this;
+        };
+        SVG.prototype.bezierCurveTo = function (cp1x, cp1y, cp2x, cp2y, x, y) {
+            this.__path +=
+                "C" + cp1x + " " + cp1y + "," + cp2x + " " + cp2y + "," + x + " " + y;
+            return this;
+        };
+        SVG.prototype.bind = function (eventType, callback) {
+            this.__useEl.addEventListener(eventType, function (event) {
+                callback.call(this, event, this);
+            }, false);
+            return this;
+        };
+        SVG.prototype.createLinearGradient = function (x0, y0, x1, y1) {
+            return linearGradient(this.__svg, x0, y0, x1, y1);
+        };
+        SVG.prototype.createRadialGradient = function (cx, cy, r) {
+            return radialGradient(this.__svg, cx, cy, r);
+        };
+        return SVG;
     }());
 
-    var SVG = (function (_super) {
-        __extends(SVG, _super);
-        function SVG(el) {
-            if (!el) {
-                throw new Error("VISLite SVG:The mount point requires an HTMLElement type but encountered null.");
-            }
-            var width = el.clientWidth, height = el.clientHeight;
-            var ViewSVG = document.createElementNS("http://www.w3.org/2000/svg", 'svg');
-            el.appendChild(ViewSVG);
-            ViewSVG.setAttribute("width", width + "");
-            ViewSVG.setAttribute("height", height + "");
-            ViewSVG.setAttribute("viewBox", "0 0 " + width + " " + height);
-            return _super.call(this, ViewSVG) || this;
-        }
-        return SVG;
+    var SVG = (function (_super) {
+        __extends(SVG, _super);
+        function SVG(el) {
+            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));
 
     return SVG;