@node-projects/web-component-designer 0.0.216 → 0.0.217

package/dist/elements/helper/PathDataPolyfill.js

@@ -1,955 +1,955 @@
-// https://github.com/jarek-foksa/path-data-polyfill
-// @info
-//   Polyfill for SVG getPathData() and setPathData() methods. Based on:
-//   - SVGPathSeg polyfill by Philip Rogers (MIT License)
-//     https://github.com/progers/pathseg
-//   - SVGPathNormalizer by Tadahisa Motooka (MIT License)
-//     https://github.com/motooka/SVGPathNormalizer/tree/master/src
-//   - arcToCubicCurves() by Dmitry Baranovskiy (MIT License)
-//     https://github.com/DmitryBaranovskiy/raphael/blob/v2.1.1/raphael.core.js#L1837
-// @author
-//   Jarosław Foksa
-// @license
-//   MIT License
-if (!SVGPathElement.prototype.getPathData || !SVGPathElement.prototype.setPathData) {
-    (function () {
-        var commandsMap = {
-            "Z": "Z", "M": "M", "L": "L", "C": "C", "Q": "Q", "A": "A", "H": "H", "V": "V", "S": "S", "T": "T",
-            "z": "Z", "m": "m", "l": "l", "c": "c", "q": "q", "a": "a", "h": "h", "v": "v", "s": "s", "t": "t"
-        };
-        var Source = function (string) {
-            //@ts-ignore
-            this._string = string;
-            //@ts-ignore
-            this._currentIndex = 0;
-            //@ts-ignore
-            this._endIndex = this._string.length;
-            //@ts-ignore
-            this._prevCommand = null;
-            //@ts-ignore
-            this._skipOptionalSpaces();
-        };
-        Source.prototype = {
-            parseSegment: function () {
-                var char = this._string[this._currentIndex];
-                var command = commandsMap[char] ? commandsMap[char] : null;
-                if (command === null) {
-                    // Possibly an implicit command. Not allowed if this is the first command.
-                    if (this._prevCommand === null) {
-                        return null;
-                    }
-                    // Check for remaining coordinates in the current command.
-                    if ((char === "+" || char === "-" || char === "." || (char >= "0" && char <= "9")) && this._prevCommand !== "Z") {
-                        if (this._prevCommand === "M") {
-                            command = "L";
-                        }
-                        else if (this._prevCommand === "m") {
-                            command = "l";
-                        }
-                        else {
-                            command = this._prevCommand;
-                        }
-                    }
-                    else {
-                        command = null;
-                    }
-                    if (command === null) {
-                        return null;
-                    }
-                }
-                else {
-                    this._currentIndex += 1;
-                }
-                this._prevCommand = command;
-                var values = null;
-                var cmd = command.toUpperCase();
-                if (cmd === "H" || cmd === "V") {
-                    values = [this._parseNumber()];
-                }
-                else if (cmd === "M" || cmd === "L" || cmd === "T") {
-                    values = [this._parseNumber(), this._parseNumber()];
-                }
-                else if (cmd === "S" || cmd === "Q") {
-                    values = [this._parseNumber(), this._parseNumber(), this._parseNumber(), this._parseNumber()];
-                }
-                else if (cmd === "C") {
-                    values = [
-                        this._parseNumber(),
-                        this._parseNumber(),
-                        this._parseNumber(),
-                        this._parseNumber(),
-                        this._parseNumber(),
-                        this._parseNumber()
-                    ];
-                }
-                else if (cmd === "A") {
-                    values = [
-                        this._parseNumber(),
-                        this._parseNumber(),
-                        this._parseNumber(),
-                        this._parseArcFlag(),
-                        this._parseArcFlag(),
-                        this._parseNumber(),
-                        this._parseNumber()
-                    ];
-                }
-                else if (cmd === "Z") {
-                    this._skipOptionalSpaces();
-                    values = [];
-                }
-                if (values === null || values.indexOf(null) >= 0) {
-                    // Unknown command or known command with invalid values
-                    return null;
-                }
-                else {
-                    return { type: command, values: values };
-                }
-            },
-            hasMoreData: function () {
-                return this._currentIndex < this._endIndex;
-            },
-            peekSegmentType: function () {
-                var char = this._string[this._currentIndex];
-                return commandsMap[char] ? commandsMap[char] : null;
-            },
-            initialCommandIsMoveTo: function () {
-                // If the path is empty it is still valid, so return true.
-                if (!this.hasMoreData()) {
-                    return true;
-                }
-                var command = this.peekSegmentType();
-                // Path must start with moveTo.
-                return command === "M" || command === "m";
-            },
-            _isCurrentSpace: function () {
-                var char = this._string[this._currentIndex];
-                return char <= " " && (char === " " || char === "\n" || char === "\t" || char === "\r" || char === "\f");
-            },
-            _skipOptionalSpaces: function () {
-                while (this._currentIndex < this._endIndex && this._isCurrentSpace()) {
-                    this._currentIndex += 1;
-                }
-                return this._currentIndex < this._endIndex;
-            },
-            _skipOptionalSpacesOrDelimiter: function () {
-                if (this._currentIndex < this._endIndex &&
-                    !this._isCurrentSpace() &&
-                    this._string[this._currentIndex] !== ",") {
-                    return false;
-                }
-                if (this._skipOptionalSpaces()) {
-                    if (this._currentIndex < this._endIndex && this._string[this._currentIndex] === ",") {
-                        this._currentIndex += 1;
-                        this._skipOptionalSpaces();
-                    }
-                }
-                return this._currentIndex < this._endIndex;
-            },
-            // Parse a number from an SVG path. This very closely follows genericParseNumber(...) from
-            // Source/core/svg/SVGParserUtilities.cpp.
-            // Spec: http://www.w3.org/TR/SVG11/single-page.html#paths-PathDataBNF
-            _parseNumber: function () {
-                var exponent = 0;
-                var integer = 0;
-                var frac = 1;
-                var decimal = 0;
-                var sign = 1;
-                var expsign = 1;
-                var startIndex = this._currentIndex;
-                this._skipOptionalSpaces();
-                // Read the sign.
-                if (this._currentIndex < this._endIndex && this._string[this._currentIndex] === "+") {
-                    this._currentIndex += 1;
-                }
-                else if (this._currentIndex < this._endIndex && this._string[this._currentIndex] === "-") {
-                    this._currentIndex += 1;
-                    sign = -1;
-                }
-                if (this._currentIndex === this._endIndex ||
-                    ((this._string[this._currentIndex] < "0" || this._string[this._currentIndex] > "9") &&
-                        this._string[this._currentIndex] !== ".")) {
-                    // The first character of a number must be one of [0-9+-.].
-                    return null;
-                }
-                // Read the integer part, build right-to-left.
-                var startIntPartIndex = this._currentIndex;
-                while (this._currentIndex < this._endIndex &&
-                    this._string[this._currentIndex] >= "0" &&
-                    this._string[this._currentIndex] <= "9") {
-                    this._currentIndex += 1; // Advance to first non-digit.
-                }
-                if (this._currentIndex !== startIntPartIndex) {
-                    var scanIntPartIndex = this._currentIndex - 1;
-                    var multiplier = 1;
-                    while (scanIntPartIndex >= startIntPartIndex) {
-                        integer += multiplier * (this._string[scanIntPartIndex] - "0");
-                        scanIntPartIndex -= 1;
-                        multiplier *= 10;
-                    }
-                }
-                // Read the decimals.
-                if (this._currentIndex < this._endIndex && this._string[this._currentIndex] === ".") {
-                    this._currentIndex += 1;
-                    // There must be a least one digit following the .
-                    if (this._currentIndex >= this._endIndex ||
-                        this._string[this._currentIndex] < "0" ||
-                        this._string[this._currentIndex] > "9") {
-                        return null;
-                    }
-                    while (this._currentIndex < this._endIndex &&
-                        this._string[this._currentIndex] >= "0" &&
-                        this._string[this._currentIndex] <= "9") {
-                        frac *= 10;
-                        decimal += (this._string.charAt(this._currentIndex) - "0") / frac;
-                        this._currentIndex += 1;
-                    }
-                }
-                // Read the exponent part.
-                if (this._currentIndex !== startIndex &&
-                    this._currentIndex + 1 < this._endIndex &&
-                    (this._string[this._currentIndex] === "e" || this._string[this._currentIndex] === "E") &&
-                    (this._string[this._currentIndex + 1] !== "x" && this._string[this._currentIndex + 1] !== "m")) {
-                    this._currentIndex += 1;
-                    // Read the sign of the exponent.
-                    if (this._string[this._currentIndex] === "+") {
-                        this._currentIndex += 1;
-                    }
-                    else if (this._string[this._currentIndex] === "-") {
-                        this._currentIndex += 1;
-                        expsign = -1;
-                    }
-                    // There must be an exponent.
-                    if (this._currentIndex >= this._endIndex ||
-                        this._string[this._currentIndex] < "0" ||
-                        this._string[this._currentIndex] > "9") {
-                        return null;
-                    }
-                    while (this._currentIndex < this._endIndex &&
-                        this._string[this._currentIndex] >= "0" &&
-                        this._string[this._currentIndex] <= "9") {
-                        exponent *= 10;
-                        exponent += (this._string[this._currentIndex] - "0");
-                        this._currentIndex += 1;
-                    }
-                }
-                var number = integer + decimal;
-                number *= sign;
-                if (exponent) {
-                    number *= Math.pow(10, expsign * exponent);
-                }
-                if (startIndex === this._currentIndex) {
-                    return null;
-                }
-                this._skipOptionalSpacesOrDelimiter();
-                return number;
-            },
-            _parseArcFlag: function () {
-                if (this._currentIndex >= this._endIndex) {
-                    return null;
-                }
-                var flag = null;
-                var flagChar = this._string[this._currentIndex];
-                this._currentIndex += 1;
-                if (flagChar === "0") {
-                    flag = 0;
-                }
-                else if (flagChar === "1") {
-                    flag = 1;
-                }
-                else {
-                    return null;
-                }
-                this._skipOptionalSpacesOrDelimiter();
-                return flag;
-            }
-        };
-        var parsePathDataString = function (string) {
-            if (!string || string.length === 0)
-                return [];
-            var source = new Source(string);
-            var pathData = [];
-            if (source.initialCommandIsMoveTo()) {
-                while (source.hasMoreData()) {
-                    var pathSeg = source.parseSegment();
-                    if (pathSeg === null) {
-                        break;
-                    }
-                    else {
-                        pathData.push(pathSeg);
-                    }
-                }
-            }
-            return pathData;
-        };
-        // @info
-        //   Get an array of corresponding cubic bezier curve parameters for given arc curve paramters.
-        var arcToCubicCurves = function (x1, y1, x2, y2, r1, r2, angle, largeArcFlag, sweepFlag, _recursive) {
-            var degToRad = function (degrees) {
-                return (Math.PI * degrees) / 180;
-            };
-            var rotate = function (x, y, angleRad) {
-                var X = x * Math.cos(angleRad) - y * Math.sin(angleRad);
-                var Y = x * Math.sin(angleRad) + y * Math.cos(angleRad);
-                return { x: X, y: Y };
-            };
-            var angleRad = degToRad(angle);
-            var params = [];
-            var f1, f2, cx, cy;
-            if (_recursive) {
-                f1 = _recursive[0];
-                f2 = _recursive[1];
-                cx = _recursive[2];
-                cy = _recursive[3];
-            }
-            else {
-                var p1 = rotate(x1, y1, -angleRad);
-                x1 = p1.x;
-                y1 = p1.y;
-                var p2 = rotate(x2, y2, -angleRad);
-                x2 = p2.x;
-                y2 = p2.y;
-                var x = (x1 - x2) / 2;
-                var y = (y1 - y2) / 2;
-                var h = (x * x) / (r1 * r1) + (y * y) / (r2 * r2);
-                if (h > 1) {
-                    h = Math.sqrt(h);
-                    r1 = h * r1;
-                    r2 = h * r2;
-                }
-                var sign;
-                if (largeArcFlag === sweepFlag) {
-                    sign = -1;
-                }
-                else {
-                    sign = 1;
-                }
-                var r1Pow = r1 * r1;
-                var r2Pow = r2 * r2;
-                var left = r1Pow * r2Pow - r1Pow * y * y - r2Pow * x * x;
-                var right = r1Pow * y * y + r2Pow * x * x;
-                var k = sign * Math.sqrt(Math.abs(left / right));
-                cx = k * r1 * y / r2 + (x1 + x2) / 2;
-                cy = k * -r2 * x / r1 + (y1 + y2) / 2;
-                f1 = Math.asin(parseFloat(((y1 - cy) / r2).toFixed(9)));
-                f2 = Math.asin(parseFloat(((y2 - cy) / r2).toFixed(9)));
-                if (x1 < cx) {
-                    f1 = Math.PI - f1;
-                }
-                if (x2 < cx) {
-                    f2 = Math.PI - f2;
-                }
-                if (f1 < 0) {
-                    f1 = Math.PI * 2 + f1;
-                }
-                if (f2 < 0) {
-                    f2 = Math.PI * 2 + f2;
-                }
-                if (sweepFlag && f1 > f2) {
-                    f1 = f1 - Math.PI * 2;
-                }
-                if (!sweepFlag && f2 > f1) {
-                    f2 = f2 - Math.PI * 2;
-                }
-            }
-            var df = f2 - f1;
-            if (Math.abs(df) > (Math.PI * 120 / 180)) {
-                var f2old = f2;
-                var x2old = x2;
-                var y2old = y2;
-                if (sweepFlag && f2 > f1) {
-                    f2 = f1 + (Math.PI * 120 / 180) * (1);
-                }
-                else {
-                    f2 = f1 + (Math.PI * 120 / 180) * (-1);
-                }
-                x2 = cx + r1 * Math.cos(f2);
-                y2 = cy + r2 * Math.sin(f2);
-                params = arcToCubicCurves(x2, y2, x2old, y2old, r1, r2, angle, 0, sweepFlag, [f2, f2old, cx, cy]);
-            }
-            df = f2 - f1;
-            var c1 = Math.cos(f1);
-            var s1 = Math.sin(f1);
-            var c2 = Math.cos(f2);
-            var s2 = Math.sin(f2);
-            var t = Math.tan(df / 4);
-            var hx = 4 / 3 * r1 * t;
-            var hy = 4 / 3 * r2 * t;
-            var m1 = [x1, y1];
-            var m2 = [x1 + hx * s1, y1 - hy * c1];
-            var m3 = [x2 + hx * s2, y2 - hy * c2];
-            var m4 = [x2, y2];
-            m2[0] = 2 * m1[0] - m2[0];
-            m2[1] = 2 * m1[1] - m2[1];
-            if (_recursive) {
-                return [m2, m3, m4].concat(params);
-            }
-            else {
-                params = [m2, m3, m4].concat(params);
-                var curves = [];
-                for (var i = 0; i < params.length; i += 3) {
-                    let r1 = rotate(params[i][0], params[i][1], angleRad);
-                    let r2 = rotate(params[i + 1][0], params[i + 1][1], angleRad);
-                    let r3 = rotate(params[i + 2][0], params[i + 2][1], angleRad);
-                    curves.push([r1.x, r1.y, r2.x, r2.y, r3.x, r3.y]);
-                }
-                return curves;
-            }
-        };
-        /*var clonePathData = function (pathData) {
-          return pathData.map(function (seg) {
-            return { type: seg.type, values: Array.prototype.slice.call(seg.values) }
-          });
-        };*/
-        // @info
-        //   Takes any path data, returns path data that consists only from absolute commands.
-        var absolutizePathData = function (pathData) {
-            var absolutizedPathData = [];
-            var currentX = null;
-            var currentY = null;
-            var subpathX = null;
-            var subpathY = null;
-            pathData.forEach(function (seg) {
-                var type = seg.type;
-                if (type === "M") {
-                    var x = seg.values[0];
-                    var y = seg.values[1];
-                    absolutizedPathData.push({ type: "M", values: [x, y] });
-                    subpathX = x;
-                    subpathY = y;
-                    currentX = x;
-                    currentY = y;
-                }
-                else if (type === "m") {
-                    var x = currentX + seg.values[0];
-                    var y = currentY + seg.values[1];
-                    absolutizedPathData.push({ type: "M", values: [x, y] });
-                    subpathX = x;
-                    subpathY = y;
-                    currentX = x;
-                    currentY = y;
-                }
-                else if (type === "L") {
-                    var x = seg.values[0];
-                    var y = seg.values[1];
-                    absolutizedPathData.push({ type: "L", values: [x, y] });
-                    currentX = x;
-                    currentY = y;
-                }
-                else if (type === "l") {
-                    var x = currentX + seg.values[0];
-                    var y = currentY + seg.values[1];
-                    absolutizedPathData.push({ type: "L", values: [x, y] });
-                    currentX = x;
-                    currentY = y;
-                }
-                else if (type === "C") {
-                    var x1 = seg.values[0];
-                    var y1 = seg.values[1];
-                    var x2 = seg.values[2];
-                    var y2 = seg.values[3];
-                    var x = seg.values[4];
-                    var y = seg.values[5];
-                    absolutizedPathData.push({ type: "C", values: [x1, y1, x2, y2, x, y] });
-                    currentX = x;
-                    currentY = y;
-                }
-                else if (type === "c") {
-                    var x1 = currentX + seg.values[0];
-                    var y1 = currentY + seg.values[1];
-                    var x2 = currentX + seg.values[2];
-                    var y2 = currentY + seg.values[3];
-                    var x = currentX + seg.values[4];
-                    var y = currentY + seg.values[5];
-                    absolutizedPathData.push({ type: "C", values: [x1, y1, x2, y2, x, y] });
-                    currentX = x;
-                    currentY = y;
-                }
-                else if (type === "Q") {
-                    var x1 = seg.values[0];
-                    var y1 = seg.values[1];
-                    var x = seg.values[2];
-                    var y = seg.values[3];
-                    absolutizedPathData.push({ type: "Q", values: [x1, y1, x, y] });
-                    currentX = x;
-                    currentY = y;
-                }
-                else if (type === "q") {
-                    var x1 = currentX + seg.values[0];
-                    var y1 = currentY + seg.values[1];
-                    var x = currentX + seg.values[2];
-                    var y = currentY + seg.values[3];
-                    absolutizedPathData.push({ type: "Q", values: [x1, y1, x, y] });
-                    currentX = x;
-                    currentY = y;
-                }
-                else if (type === "A") {
-                    var x = seg.values[5];
-                    var y = seg.values[6];
-                    absolutizedPathData.push({
-                        type: "A",
-                        values: [seg.values[0], seg.values[1], seg.values[2], seg.values[3], seg.values[4], x, y]
-                    });
-                    currentX = x;
-                    currentY = y;
-                }
-                else if (type === "a") {
-                    var x = currentX + seg.values[5];
-                    var y = currentY + seg.values[6];
-                    absolutizedPathData.push({
-                        type: "A",
-                        values: [seg.values[0], seg.values[1], seg.values[2], seg.values[3], seg.values[4], x, y]
-                    });
-                    currentX = x;
-                    currentY = y;
-                }
-                else if (type === "H") {
-                    var x = seg.values[0];
-                    absolutizedPathData.push({ type: "H", values: [x] });
-                    currentX = x;
-                }
-                else if (type === "h") {
-                    var x = currentX + seg.values[0];
-                    absolutizedPathData.push({ type: "H", values: [x] });
-                    currentX = x;
-                }
-                else if (type === "V") {
-                    var y = seg.values[0];
-                    absolutizedPathData.push({ type: "V", values: [y] });
-                    currentY = y;
-                }
-                else if (type === "v") {
-                    var y = currentY + seg.values[0];
-                    absolutizedPathData.push({ type: "V", values: [y] });
-                    currentY = y;
-                }
-                else if (type === "S") {
-                    var x2 = seg.values[0];
-                    var y2 = seg.values[1];
-                    var x = seg.values[2];
-                    var y = seg.values[3];
-                    absolutizedPathData.push({ type: "S", values: [x2, y2, x, y] });
-                    currentX = x;
-                    currentY = y;
-                }
-                else if (type === "s") {
-                    var x2 = currentX + seg.values[0];
-                    var y2 = currentY + seg.values[1];
-                    var x = currentX + seg.values[2];
-                    var y = currentY + seg.values[3];
-                    absolutizedPathData.push({ type: "S", values: [x2, y2, x, y] });
-                    currentX = x;
-                    currentY = y;
-                }
-                else if (type === "T") {
-                    var x = seg.values[0];
-                    var y = seg.values[1];
-                    absolutizedPathData.push({ type: "T", values: [x, y] });
-                    currentX = x;
-                    currentY = y;
-                }
-                else if (type === "t") {
-                    var x = currentX + seg.values[0];
-                    var y = currentY + seg.values[1];
-                    absolutizedPathData.push({ type: "T", values: [x, y] });
-                    currentX = x;
-                    currentY = y;
-                }
-                else if (type === "Z" || type === "z") {
-                    absolutizedPathData.push({ type: "Z", values: [] });
-                    currentX = subpathX;
-                    currentY = subpathY;
-                }
-            });
-            return absolutizedPathData;
-        };
-        // @info
-        //   Takes path data that consists only from absolute commands, returns path data that consists only from
-        //   "M", "L", "C" and "Z" commands.
-        var reducePathData = function (pathData) {
-            var reducedPathData = [];
-            var lastType = null;
-            var lastControlX = null;
-            var lastControlY = null;
-            var currentX = null;
-            var currentY = null;
-            var subpathX = null;
-            var subpathY = null;
-            pathData.forEach(function (seg) {
-                if (seg.type === "M") {
-                    var x = seg.values[0];
-                    var y = seg.values[1];
-                    reducedPathData.push({ type: "M", values: [x, y] });
-                    subpathX = x;
-                    subpathY = y;
-                    currentX = x;
-                    currentY = y;
-                }
-                else if (seg.type === "C") {
-                    var x1 = seg.values[0];
-                    var y1 = seg.values[1];
-                    var x2 = seg.values[2];
-                    var y2 = seg.values[3];
-                    var x = seg.values[4];
-                    var y = seg.values[5];
-                    reducedPathData.push({ type: "C", values: [x1, y1, x2, y2, x, y] });
-                    lastControlX = x2;
-                    lastControlY = y2;
-                    currentX = x;
-                    currentY = y;
-                }
-                else if (seg.type === "L") {
-                    var x = seg.values[0];
-                    var y = seg.values[1];
-                    reducedPathData.push({ type: "L", values: [x, y] });
-                    currentX = x;
-                    currentY = y;
-                }
-                else if (seg.type === "H") {
-                    var x = seg.values[0];
-                    reducedPathData.push({ type: "L", values: [x, currentY] });
-                    currentX = x;
-                }
-                else if (seg.type === "V") {
-                    var y = seg.values[0];
-                    reducedPathData.push({ type: "L", values: [currentX, y] });
-                    currentY = y;
-                }
-                else if (seg.type === "S") {
-                    var x2 = seg.values[0];
-                    var y2 = seg.values[1];
-                    var x = seg.values[2];
-                    var y = seg.values[3];
-                    var cx1, cy1;
-                    if (lastType === "C" || lastType === "S") {
-                        cx1 = currentX + (currentX - lastControlX);
-                        cy1 = currentY + (currentY - lastControlY);
-                    }
-                    else {
-                        cx1 = currentX;
-                        cy1 = currentY;
-                    }
-                    reducedPathData.push({ type: "C", values: [cx1, cy1, x2, y2, x, y] });
-                    lastControlX = x2;
-                    lastControlY = y2;
-                    currentX = x;
-                    currentY = y;
-                }
-                else if (seg.type === "T") {
-                    var x = seg.values[0];
-                    var y = seg.values[1];
-                    var x1, y1;
-                    if (lastType === "Q" || lastType === "T") {
-                        x1 = currentX + (currentX - lastControlX);
-                        y1 = currentY + (currentY - lastControlY);
-                    }
-                    else {
-                        x1 = currentX;
-                        y1 = currentY;
-                    }
-                    var cx1 = currentX + 2 * (x1 - currentX) / 3;
-                    var cy1 = currentY + 2 * (y1 - currentY) / 3;
-                    var cx2 = x + 2 * (x1 - x) / 3;
-                    var cy2 = y + 2 * (y1 - y) / 3;
-                    reducedPathData.push({ type: "C", values: [cx1, cy1, cx2, cy2, x, y] });
-                    lastControlX = x1;
-                    lastControlY = y1;
-                    currentX = x;
-                    currentY = y;
-                }
-                else if (seg.type === "Q") {
-                    var x1 = seg.values[0];
-                    var y1 = seg.values[1];
-                    var x = seg.values[2];
-                    var y = seg.values[3];
-                    var cx1 = currentX + 2 * (x1 - currentX) / 3;
-                    var cy1 = currentY + 2 * (y1 - currentY) / 3;
-                    var cx2 = x + 2 * (x1 - x) / 3;
-                    var cy2 = y + 2 * (y1 - y) / 3;
-                    reducedPathData.push({ type: "C", values: [cx1, cy1, cx2, cy2, x, y] });
-                    lastControlX = x1;
-                    lastControlY = y1;
-                    currentX = x;
-                    currentY = y;
-                }
-                else if (seg.type === "A") {
-                    let r1 = Math.abs(seg.values[0]);
-                    let r2 = Math.abs(seg.values[1]);
-                    var angle = seg.values[2];
-                    var largeArcFlag = seg.values[3];
-                    var sweepFlag = seg.values[4];
-                    var x = seg.values[5];
-                    var y = seg.values[6];
-                    if (r1 === 0 || r2 === 0) {
-                        reducedPathData.push({ type: "C", values: [currentX, currentY, x, y, x, y] });
-                        currentX = x;
-                        currentY = y;
-                    }
-                    else {
-                        if (currentX !== x || currentY !== y) {
-                            var curves = arcToCubicCurves(currentX, currentY, x, y, r1, r2, angle, largeArcFlag, sweepFlag);
-                            curves.forEach(function (curve) {
-                                reducedPathData.push({ type: "C", values: curve });
-                            });
-                            currentX = x;
-                            currentY = y;
-                        }
-                    }
-                }
-                else if (seg.type === "Z") {
-                    reducedPathData.push(seg);
-                    currentX = subpathX;
-                    currentY = subpathY;
-                }
-                lastType = seg.type;
-            });
-            return reducedPathData;
-        };
-        SVGPathElement.prototype.getPathData = function (options) {
-            if (options && options.normalize) {
-                /*if (this[$cachedNormalizedPathData]) {
-                  return clonePathData(this[$cachedNormalizedPathData]);
-                }
-                else */ {
-                    let pathData;
-                    /*if (this[$cachedPathData]) {
-                      pathData = clonePathData(this[$cachedPathData]);
-                    }
-                    else */ {
-                        pathData = parsePathDataString(this.getAttribute("d") || "");
-                        //this[$cachedPathData] = clonePathData(pathData);
-                    }
-                    let normalizedPathData = reducePathData(absolutizePathData(pathData));
-                    //this[$cachedNormalizedPathData] = clonePathData(normalizedPathData);
-                    return normalizedPathData;
-                }
-            }
-            else {
-                /*if (this[$cachedPathData]) {
-                  return clonePathData(this[$cachedPathData]);
-                }
-                else*/ {
-                    let pathData = parsePathDataString(this.getAttribute("d") || "");
-                    //this[$cachedPathData] = clonePathData(pathData);
-                    return pathData;
-                }
-            }
-        };
-        SVGPathElement.prototype.setPathData = function (pathData) {
-            if (pathData.length === 0) {
-                this.removeAttribute("d");
-            }
-            else {
-                let d = "";
-                for (let i = 0, l = pathData.length; i < l; i += 1) {
-                    let seg = pathData[i];
-                    if (i > 0) {
-                        d += " ";
-                    }
-                    d += seg.type;
-                    if (seg.values && seg.values.length > 0) {
-                        d += " " + seg.values.join(" ");
-                    }
-                }
-                this.setAttribute("d", d);
-            }
-        };
-        SVGRectElement.prototype.getPathData = function (options) {
-            var x = this.x.baseVal.value;
-            var y = this.y.baseVal.value;
-            var width = this.width.baseVal.value;
-            var height = this.height.baseVal.value;
-            var rx = this.hasAttribute("rx") ? this.rx.baseVal.value : this.ry.baseVal.value;
-            var ry = this.hasAttribute("ry") ? this.ry.baseVal.value : this.rx.baseVal.value;
-            if (rx > width / 2) {
-                rx = width / 2;
-            }
-            if (ry > height / 2) {
-                ry = height / 2;
-            }
-            var pathData = [
-                { type: "M", values: [x + rx, y] },
-                { type: "H", values: [x + width - rx] },
-                { type: "A", values: [rx, ry, 0, 0, 1, x + width, y + ry] },
-                { type: "V", values: [y + height - ry] },
-                { type: "A", values: [rx, ry, 0, 0, 1, x + width - rx, y + height] },
-                { type: "H", values: [x + rx] },
-                { type: "A", values: [rx, ry, 0, 0, 1, x, y + height - ry] },
-                { type: "V", values: [y + ry] },
-                { type: "A", values: [rx, ry, 0, 0, 1, x + rx, y] },
-                { type: "Z", values: [] }
-            ];
-            // Get rid of redundant "A" segs when either rx or ry is 0
-            pathData = pathData.filter(function (s) {
-                return s.type === "A" && (s.values[0] === 0 || s.values[1] === 0) ? false : true;
-            });
-            if (options && options.normalize === true) {
-                pathData = reducePathData(pathData);
-            }
-            return pathData;
-        };
-        SVGCircleElement.prototype.getPathData = function (options) {
-            var cx = this.cx.baseVal.value;
-            var cy = this.cy.baseVal.value;
-            var r = this.r.baseVal.value;
-            var pathData = [
-                { type: "M", values: [cx + r, cy] },
-                { type: "A", values: [r, r, 0, 0, 1, cx, cy + r] },
-                { type: "A", values: [r, r, 0, 0, 1, cx - r, cy] },
-                { type: "A", values: [r, r, 0, 0, 1, cx, cy - r] },
-                { type: "A", values: [r, r, 0, 0, 1, cx + r, cy] },
-                { type: "Z", values: [] }
-            ];
-            if (options && options.normalize === true) {
-                pathData = reducePathData(pathData);
-            }
-            return pathData;
-        };
-        SVGEllipseElement.prototype.getPathData = function (options) {
-            var cx = this.cx.baseVal.value;
-            var cy = this.cy.baseVal.value;
-            var rx = this.rx.baseVal.value;
-            var ry = this.ry.baseVal.value;
-            var pathData = [
-                { type: "M", values: [cx + rx, cy] },
-                { type: "A", values: [rx, ry, 0, 0, 1, cx, cy + ry] },
-                { type: "A", values: [rx, ry, 0, 0, 1, cx - rx, cy] },
-                { type: "A", values: [rx, ry, 0, 0, 1, cx, cy - ry] },
-                { type: "A", values: [rx, ry, 0, 0, 1, cx + rx, cy] },
-                { type: "Z", values: [] }
-            ];
-            if (options && options.normalize === true) {
-                pathData = reducePathData(pathData);
-            }
-            return pathData;
-        };
-        SVGLineElement.prototype.getPathData = function () {
-            return [
-                { type: "M", values: [this.x1.baseVal.value, this.y1.baseVal.value] },
-                { type: "L", values: [this.x2.baseVal.value, this.y2.baseVal.value] }
-            ];
-        };
-        SVGPolylineElement.prototype.getPathData = function () {
-            var pathData = [];
-            for (var i = 0; i < this.points.numberOfItems; i += 1) {
-                var point = this.points.getItem(i);
-                pathData.push({
-                    type: (i === 0 ? "M" : "L"),
-                    values: [point.x, point.y]
-                });
-            }
-            return pathData;
-        };
-        SVGPolygonElement.prototype.getPathData = function () {
-            var pathData = [];
-            for (var i = 0; i < this.points.numberOfItems; i += 1) {
-                var point = this.points.getItem(i);
-                pathData.push({
-                    type: (i === 0 ? "M" : "L"),
-                    values: [point.x, point.y]
-                });
-            }
-            pathData.push({
-                type: "Z",
-                values: []
-            });
-            return pathData;
-        };
-    })();
-}
-export function straightenLine(p1, p2) {
-    let newP;
-    let alpha = calculateAlpha(p1, p2);
-    let normLength;
-    if ((alpha >= 337.5 && alpha < 360 || alpha >= 0 && alpha < 22.5)) { // 0
-        newP = { x: p2.x, y: p1.y };
-    }
-    else if ((alpha >= 22.5 && alpha < 67.5)) { // 45
-        normLength = calculateNormLegth(p1, p2);
-        newP = { x: p1.x + normLength, y: p1.y - normLength };
-    }
-    else if ((alpha >= 67.5 && alpha < 112.5)) { // 90
-        newP = { x: p1.x, y: p2.y };
-    }
-    else if ((alpha >= 112.5 && alpha < 157.5)) { // 135
-        normLength = calculateNormLegth(p1, p2);
-        newP = { x: p1.x - normLength, y: p1.y - normLength };
-    }
-    else if ((alpha >= 157.5 && alpha < 202.5)) { // 180
-        newP = { x: p2.x, y: p1.y };
-    }
-    else if ((alpha >= 202.5 && alpha < 247.5)) { // 225
-        normLength = calculateNormLegth(p1, p2);
-        newP = { x: p1.x - normLength, y: p1.y + normLength };
-    }
-    else if ((alpha >= 247.5 && alpha < 292.5)) { // 270
-        newP = { x: p1.x, y: p2.y };
-    }
-    else if ((alpha >= 292.5 && alpha < 337.5)) { // 315
-        normLength = calculateNormLegth(p1, p2);
-        newP = { x: p1.x + normLength, y: p1.y + normLength };
-    }
-    return newP;
-}
-export function calculateNormLegth(p1, p2) {
-    let normLenght;
-    let currentLength = Math.sqrt(Math.pow(p2.x - p1.x, 2) + Math.pow(p2.y - p1.y, 2));
-    let alpha = calculateAlpha(p1, p2);
-    let beta = alpha - ((Math.floor(alpha / 90) * 90) + 45);
-    normLenght = currentLength * Math.cos(beta * (Math.PI / 180)) / Math.sqrt(2);
-    return normLenght;
-}
-export function calculateAlpha(p1, p2) {
-    let alpha = -1 * Math.atan2(p2.y - p1.y, p2.x - p1.x) * 180 / Math.PI;
-    if (alpha < 0)
-        alpha += 360;
-    return alpha;
-}
-export function moveSVGPath(path, xFactor, yFactor) {
-    let newPathData = "";
-    let pd = path.getPathData({ normalize: true });
-    {
-        for (let p of pd) {
-            switch (p.type) {
-                case ('M'):
-                case ('m'):
-                case ('L'):
-                case ('l'):
-                case ('T'):
-                case ('t'):
-                    newPathData += p.type + " " + (p.values[0] - xFactor) + " " + (p.values[1] - yFactor) + " ";
-                    break;
-                case ('Z'):
-                case ('z'):
-                    newPathData += p.type + " ";
-                    break;
-                case ('C'):
-                case ('c'):
-                    newPathData += p.type + " " + (p.values[0] - xFactor) + " " + (p.values[1] - yFactor) + " " + (p.values[2] - xFactor) + " " + (p.values[3] - yFactor) + " " + (p.values[4] - xFactor) + " " + (p.values[5] - yFactor) + " ";
-                    break;
-                case ('S'):
-                case ('s'):
-                case ('Q'):
-                case ('q'):
-                    newPathData += p.type + " " + (p.values[0] - xFactor) + " " + (p.values[1] - yFactor) + " " + (p.values[2] - xFactor) + " " + (p.values[3] - yFactor) + " ";
-                    break;
-                case ('A'):
-                case ('a'):
-                    newPathData += p.type + " " + (p.values[0] - xFactor) + " " + (p.values[1] - yFactor) + " " + p.values[2] + " " + p.values[3] + " " + p.values[4] + " " + (p.values[5] - xFactor) + " " + (p.values[6] - yFactor) + " ";
-                    break;
-            }
-        }
-    }
-    return newPathData;
-}
-export function createPathD(path) {
-    let pathD = "";
-    for (let p of path) {
-        pathD += p.type + " ";
-        for (var i = 0; i < p.values.length; i++) {
-            if (p.values[i] != null && !isNaN(p.values[i])) {
-                pathD += p.values[i] + " ";
-            }
-        }
-    }
-    return pathD;
-}
+// https://github.com/jarek-foksa/path-data-polyfill
+// @info
+//   Polyfill for SVG getPathData() and setPathData() methods. Based on:
+//   - SVGPathSeg polyfill by Philip Rogers (MIT License)
+//     https://github.com/progers/pathseg
+//   - SVGPathNormalizer by Tadahisa Motooka (MIT License)
+//     https://github.com/motooka/SVGPathNormalizer/tree/master/src
+//   - arcToCubicCurves() by Dmitry Baranovskiy (MIT License)
+//     https://github.com/DmitryBaranovskiy/raphael/blob/v2.1.1/raphael.core.js#L1837
+// @author
+//   Jarosław Foksa
+// @license
+//   MIT License
+if (!SVGPathElement.prototype.getPathData || !SVGPathElement.prototype.setPathData) {
+    (function () {
+        var commandsMap = {
+            "Z": "Z", "M": "M", "L": "L", "C": "C", "Q": "Q", "A": "A", "H": "H", "V": "V", "S": "S", "T": "T",
+            "z": "Z", "m": "m", "l": "l", "c": "c", "q": "q", "a": "a", "h": "h", "v": "v", "s": "s", "t": "t"
+        };
+        var Source = function (string) {
+            //@ts-ignore
+            this._string = string;
+            //@ts-ignore
+            this._currentIndex = 0;
+            //@ts-ignore
+            this._endIndex = this._string.length;
+            //@ts-ignore
+            this._prevCommand = null;
+            //@ts-ignore
+            this._skipOptionalSpaces();
+        };
+        Source.prototype = {
+            parseSegment: function () {
+                var char = this._string[this._currentIndex];
+                var command = commandsMap[char] ? commandsMap[char] : null;
+                if (command === null) {
+                    // Possibly an implicit command. Not allowed if this is the first command.
+                    if (this._prevCommand === null) {
+                        return null;
+                    }
+                    // Check for remaining coordinates in the current command.
+                    if ((char === "+" || char === "-" || char === "." || (char >= "0" && char <= "9")) && this._prevCommand !== "Z") {
+                        if (this._prevCommand === "M") {
+                            command = "L";
+                        }
+                        else if (this._prevCommand === "m") {
+                            command = "l";
+                        }
+                        else {
+                            command = this._prevCommand;
+                        }
+                    }
+                    else {
+                        command = null;
+                    }
+                    if (command === null) {
+                        return null;
+                    }
+                }
+                else {
+                    this._currentIndex += 1;
+                }
+                this._prevCommand = command;
+                var values = null;
+                var cmd = command.toUpperCase();
+                if (cmd === "H" || cmd === "V") {
+                    values = [this._parseNumber()];
+                }
+                else if (cmd === "M" || cmd === "L" || cmd === "T") {
+                    values = [this._parseNumber(), this._parseNumber()];
+                }
+                else if (cmd === "S" || cmd === "Q") {
+                    values = [this._parseNumber(), this._parseNumber(), this._parseNumber(), this._parseNumber()];
+                }
+                else if (cmd === "C") {
+                    values = [
+                        this._parseNumber(),
+                        this._parseNumber(),
+                        this._parseNumber(),
+                        this._parseNumber(),
+                        this._parseNumber(),
+                        this._parseNumber()
+                    ];
+                }
+                else if (cmd === "A") {
+                    values = [
+                        this._parseNumber(),
+                        this._parseNumber(),
+                        this._parseNumber(),
+                        this._parseArcFlag(),
+                        this._parseArcFlag(),
+                        this._parseNumber(),
+                        this._parseNumber()
+                    ];
+                }
+                else if (cmd === "Z") {
+                    this._skipOptionalSpaces();
+                    values = [];
+                }
+                if (values === null || values.indexOf(null) >= 0) {
+                    // Unknown command or known command with invalid values
+                    return null;
+                }
+                else {
+                    return { type: command, values: values };
+                }
+            },
+            hasMoreData: function () {
+                return this._currentIndex < this._endIndex;
+            },
+            peekSegmentType: function () {
+                var char = this._string[this._currentIndex];
+                return commandsMap[char] ? commandsMap[char] : null;
+            },
+            initialCommandIsMoveTo: function () {
+                // If the path is empty it is still valid, so return true.
+                if (!this.hasMoreData()) {
+                    return true;
+                }
+                var command = this.peekSegmentType();
+                // Path must start with moveTo.
+                return command === "M" || command === "m";
+            },
+            _isCurrentSpace: function () {
+                var char = this._string[this._currentIndex];
+                return char <= " " && (char === " " || char === "\n" || char === "\t" || char === "\r" || char === "\f");
+            },
+            _skipOptionalSpaces: function () {
+                while (this._currentIndex < this._endIndex && this._isCurrentSpace()) {
+                    this._currentIndex += 1;
+                }
+                return this._currentIndex < this._endIndex;
+            },
+            _skipOptionalSpacesOrDelimiter: function () {
+                if (this._currentIndex < this._endIndex &&
+                    !this._isCurrentSpace() &&
+                    this._string[this._currentIndex] !== ",") {
+                    return false;
+                }
+                if (this._skipOptionalSpaces()) {
+                    if (this._currentIndex < this._endIndex && this._string[this._currentIndex] === ",") {
+                        this._currentIndex += 1;
+                        this._skipOptionalSpaces();
+                    }
+                }
+                return this._currentIndex < this._endIndex;
+            },
+            // Parse a number from an SVG path. This very closely follows genericParseNumber(...) from
+            // Source/core/svg/SVGParserUtilities.cpp.
+            // Spec: http://www.w3.org/TR/SVG11/single-page.html#paths-PathDataBNF
+            _parseNumber: function () {
+                var exponent = 0;
+                var integer = 0;
+                var frac = 1;
+                var decimal = 0;
+                var sign = 1;
+                var expsign = 1;
+                var startIndex = this._currentIndex;
+                this._skipOptionalSpaces();
+                // Read the sign.
+                if (this._currentIndex < this._endIndex && this._string[this._currentIndex] === "+") {
+                    this._currentIndex += 1;
+                }
+                else if (this._currentIndex < this._endIndex && this._string[this._currentIndex] === "-") {
+                    this._currentIndex += 1;
+                    sign = -1;
+                }
+                if (this._currentIndex === this._endIndex ||
+                    ((this._string[this._currentIndex] < "0" || this._string[this._currentIndex] > "9") &&
+                        this._string[this._currentIndex] !== ".")) {
+                    // The first character of a number must be one of [0-9+-.].
+                    return null;
+                }
+                // Read the integer part, build right-to-left.
+                var startIntPartIndex = this._currentIndex;
+                while (this._currentIndex < this._endIndex &&
+                    this._string[this._currentIndex] >= "0" &&
+                    this._string[this._currentIndex] <= "9") {
+                    this._currentIndex += 1; // Advance to first non-digit.
+                }
+                if (this._currentIndex !== startIntPartIndex) {
+                    var scanIntPartIndex = this._currentIndex - 1;
+                    var multiplier = 1;
+                    while (scanIntPartIndex >= startIntPartIndex) {
+                        integer += multiplier * (this._string[scanIntPartIndex] - "0");
+                        scanIntPartIndex -= 1;
+                        multiplier *= 10;
+                    }
+                }
+                // Read the decimals.
+                if (this._currentIndex < this._endIndex && this._string[this._currentIndex] === ".") {
+                    this._currentIndex += 1;
+                    // There must be a least one digit following the .
+                    if (this._currentIndex >= this._endIndex ||
+                        this._string[this._currentIndex] < "0" ||
+                        this._string[this._currentIndex] > "9") {
+                        return null;
+                    }
+                    while (this._currentIndex < this._endIndex &&
+                        this._string[this._currentIndex] >= "0" &&
+                        this._string[this._currentIndex] <= "9") {
+                        frac *= 10;
+                        decimal += (this._string.charAt(this._currentIndex) - "0") / frac;
+                        this._currentIndex += 1;
+                    }
+                }
+                // Read the exponent part.
+                if (this._currentIndex !== startIndex &&
+                    this._currentIndex + 1 < this._endIndex &&
+                    (this._string[this._currentIndex] === "e" || this._string[this._currentIndex] === "E") &&
+                    (this._string[this._currentIndex + 1] !== "x" && this._string[this._currentIndex + 1] !== "m")) {
+                    this._currentIndex += 1;
+                    // Read the sign of the exponent.
+                    if (this._string[this._currentIndex] === "+") {
+                        this._currentIndex += 1;
+                    }
+                    else if (this._string[this._currentIndex] === "-") {
+                        this._currentIndex += 1;
+                        expsign = -1;
+                    }
+                    // There must be an exponent.
+                    if (this._currentIndex >= this._endIndex ||
+                        this._string[this._currentIndex] < "0" ||
+                        this._string[this._currentIndex] > "9") {
+                        return null;
+                    }
+                    while (this._currentIndex < this._endIndex &&
+                        this._string[this._currentIndex] >= "0" &&
+                        this._string[this._currentIndex] <= "9") {
+                        exponent *= 10;
+                        exponent += (this._string[this._currentIndex] - "0");
+                        this._currentIndex += 1;
+                    }
+                }
+                var number = integer + decimal;
+                number *= sign;
+                if (exponent) {
+                    number *= Math.pow(10, expsign * exponent);
+                }
+                if (startIndex === this._currentIndex) {
+                    return null;
+                }
+                this._skipOptionalSpacesOrDelimiter();
+                return number;
+            },
+            _parseArcFlag: function () {
+                if (this._currentIndex >= this._endIndex) {
+                    return null;
+                }
+                var flag = null;
+                var flagChar = this._string[this._currentIndex];
+                this._currentIndex += 1;
+                if (flagChar === "0") {
+                    flag = 0;
+                }
+                else if (flagChar === "1") {
+                    flag = 1;
+                }
+                else {
+                    return null;
+                }
+                this._skipOptionalSpacesOrDelimiter();
+                return flag;
+            }
+        };
+        var parsePathDataString = function (string) {
+            if (!string || string.length === 0)
+                return [];
+            var source = new Source(string);
+            var pathData = [];
+            if (source.initialCommandIsMoveTo()) {
+                while (source.hasMoreData()) {
+                    var pathSeg = source.parseSegment();
+                    if (pathSeg === null) {
+                        break;
+                    }
+                    else {
+                        pathData.push(pathSeg);
+                    }
+                }
+            }
+            return pathData;
+        };
+        // @info
+        //   Get an array of corresponding cubic bezier curve parameters for given arc curve paramters.
+        var arcToCubicCurves = function (x1, y1, x2, y2, r1, r2, angle, largeArcFlag, sweepFlag, _recursive) {
+            var degToRad = function (degrees) {
+                return (Math.PI * degrees) / 180;
+            };
+            var rotate = function (x, y, angleRad) {
+                var X = x * Math.cos(angleRad) - y * Math.sin(angleRad);
+                var Y = x * Math.sin(angleRad) + y * Math.cos(angleRad);
+                return { x: X, y: Y };
+            };
+            var angleRad = degToRad(angle);
+            var params = [];
+            var f1, f2, cx, cy;
+            if (_recursive) {
+                f1 = _recursive[0];
+                f2 = _recursive[1];
+                cx = _recursive[2];
+                cy = _recursive[3];
+            }
+            else {
+                var p1 = rotate(x1, y1, -angleRad);
+                x1 = p1.x;
+                y1 = p1.y;
+                var p2 = rotate(x2, y2, -angleRad);
+                x2 = p2.x;
+                y2 = p2.y;
+                var x = (x1 - x2) / 2;
+                var y = (y1 - y2) / 2;
+                var h = (x * x) / (r1 * r1) + (y * y) / (r2 * r2);
+                if (h > 1) {
+                    h = Math.sqrt(h);
+                    r1 = h * r1;
+                    r2 = h * r2;
+                }
+                var sign;
+                if (largeArcFlag === sweepFlag) {
+                    sign = -1;
+                }
+                else {
+                    sign = 1;
+                }
+                var r1Pow = r1 * r1;
+                var r2Pow = r2 * r2;
+                var left = r1Pow * r2Pow - r1Pow * y * y - r2Pow * x * x;
+                var right = r1Pow * y * y + r2Pow * x * x;
+                var k = sign * Math.sqrt(Math.abs(left / right));
+                cx = k * r1 * y / r2 + (x1 + x2) / 2;
+                cy = k * -r2 * x / r1 + (y1 + y2) / 2;
+                f1 = Math.asin(parseFloat(((y1 - cy) / r2).toFixed(9)));
+                f2 = Math.asin(parseFloat(((y2 - cy) / r2).toFixed(9)));
+                if (x1 < cx) {
+                    f1 = Math.PI - f1;
+                }
+                if (x2 < cx) {
+                    f2 = Math.PI - f2;
+                }
+                if (f1 < 0) {
+                    f1 = Math.PI * 2 + f1;
+                }
+                if (f2 < 0) {
+                    f2 = Math.PI * 2 + f2;
+                }
+                if (sweepFlag && f1 > f2) {
+                    f1 = f1 - Math.PI * 2;
+                }
+                if (!sweepFlag && f2 > f1) {
+                    f2 = f2 - Math.PI * 2;
+                }
+            }
+            var df = f2 - f1;
+            if (Math.abs(df) > (Math.PI * 120 / 180)) {
+                var f2old = f2;
+                var x2old = x2;
+                var y2old = y2;
+                if (sweepFlag && f2 > f1) {
+                    f2 = f1 + (Math.PI * 120 / 180) * (1);
+                }
+                else {
+                    f2 = f1 + (Math.PI * 120 / 180) * (-1);
+                }
+                x2 = cx + r1 * Math.cos(f2);
+                y2 = cy + r2 * Math.sin(f2);
+                params = arcToCubicCurves(x2, y2, x2old, y2old, r1, r2, angle, 0, sweepFlag, [f2, f2old, cx, cy]);
+            }
+            df = f2 - f1;
+            var c1 = Math.cos(f1);
+            var s1 = Math.sin(f1);
+            var c2 = Math.cos(f2);
+            var s2 = Math.sin(f2);
+            var t = Math.tan(df / 4);
+            var hx = 4 / 3 * r1 * t;
+            var hy = 4 / 3 * r2 * t;
+            var m1 = [x1, y1];
+            var m2 = [x1 + hx * s1, y1 - hy * c1];
+            var m3 = [x2 + hx * s2, y2 - hy * c2];
+            var m4 = [x2, y2];
+            m2[0] = 2 * m1[0] - m2[0];
+            m2[1] = 2 * m1[1] - m2[1];
+            if (_recursive) {
+                return [m2, m3, m4].concat(params);
+            }
+            else {
+                params = [m2, m3, m4].concat(params);
+                var curves = [];
+                for (var i = 0; i < params.length; i += 3) {
+                    let r1 = rotate(params[i][0], params[i][1], angleRad);
+                    let r2 = rotate(params[i + 1][0], params[i + 1][1], angleRad);
+                    let r3 = rotate(params[i + 2][0], params[i + 2][1], angleRad);
+                    curves.push([r1.x, r1.y, r2.x, r2.y, r3.x, r3.y]);
+                }
+                return curves;
+            }
+        };
+        /*var clonePathData = function (pathData) {
+          return pathData.map(function (seg) {
+            return { type: seg.type, values: Array.prototype.slice.call(seg.values) }
+          });
+        };*/
+        // @info
+        //   Takes any path data, returns path data that consists only from absolute commands.
+        var absolutizePathData = function (pathData) {
+            var absolutizedPathData = [];
+            var currentX = null;
+            var currentY = null;
+            var subpathX = null;
+            var subpathY = null;
+            pathData.forEach(function (seg) {
+                var type = seg.type;
+                if (type === "M") {
+                    var x = seg.values[0];
+                    var y = seg.values[1];
+                    absolutizedPathData.push({ type: "M", values: [x, y] });
+                    subpathX = x;
+                    subpathY = y;
+                    currentX = x;
+                    currentY = y;
+                }
+                else if (type === "m") {
+                    var x = currentX + seg.values[0];
+                    var y = currentY + seg.values[1];
+                    absolutizedPathData.push({ type: "M", values: [x, y] });
+                    subpathX = x;
+                    subpathY = y;
+                    currentX = x;
+                    currentY = y;
+                }
+                else if (type === "L") {
+                    var x = seg.values[0];
+                    var y = seg.values[1];
+                    absolutizedPathData.push({ type: "L", values: [x, y] });
+                    currentX = x;
+                    currentY = y;
+                }
+                else if (type === "l") {
+                    var x = currentX + seg.values[0];
+                    var y = currentY + seg.values[1];
+                    absolutizedPathData.push({ type: "L", values: [x, y] });
+                    currentX = x;
+                    currentY = y;
+                }
+                else if (type === "C") {
+                    var x1 = seg.values[0];
+                    var y1 = seg.values[1];
+                    var x2 = seg.values[2];
+                    var y2 = seg.values[3];
+                    var x = seg.values[4];
+                    var y = seg.values[5];
+                    absolutizedPathData.push({ type: "C", values: [x1, y1, x2, y2, x, y] });
+                    currentX = x;
+                    currentY = y;
+                }
+                else if (type === "c") {
+                    var x1 = currentX + seg.values[0];
+                    var y1 = currentY + seg.values[1];
+                    var x2 = currentX + seg.values[2];
+                    var y2 = currentY + seg.values[3];
+                    var x = currentX + seg.values[4];
+                    var y = currentY + seg.values[5];
+                    absolutizedPathData.push({ type: "C", values: [x1, y1, x2, y2, x, y] });
+                    currentX = x;
+                    currentY = y;
+                }
+                else if (type === "Q") {
+                    var x1 = seg.values[0];
+                    var y1 = seg.values[1];
+                    var x = seg.values[2];
+                    var y = seg.values[3];
+                    absolutizedPathData.push({ type: "Q", values: [x1, y1, x, y] });
+                    currentX = x;
+                    currentY = y;
+                }
+                else if (type === "q") {
+                    var x1 = currentX + seg.values[0];
+                    var y1 = currentY + seg.values[1];
+                    var x = currentX + seg.values[2];
+                    var y = currentY + seg.values[3];
+                    absolutizedPathData.push({ type: "Q", values: [x1, y1, x, y] });
+                    currentX = x;
+                    currentY = y;
+                }
+                else if (type === "A") {
+                    var x = seg.values[5];
+                    var y = seg.values[6];
+                    absolutizedPathData.push({
+                        type: "A",
+                        values: [seg.values[0], seg.values[1], seg.values[2], seg.values[3], seg.values[4], x, y]
+                    });
+                    currentX = x;
+                    currentY = y;
+                }
+                else if (type === "a") {
+                    var x = currentX + seg.values[5];
+                    var y = currentY + seg.values[6];
+                    absolutizedPathData.push({
+                        type: "A",
+                        values: [seg.values[0], seg.values[1], seg.values[2], seg.values[3], seg.values[4], x, y]
+                    });
+                    currentX = x;
+                    currentY = y;
+                }
+                else if (type === "H") {
+                    var x = seg.values[0];
+                    absolutizedPathData.push({ type: "H", values: [x] });
+                    currentX = x;
+                }
+                else if (type === "h") {
+                    var x = currentX + seg.values[0];
+                    absolutizedPathData.push({ type: "H", values: [x] });
+                    currentX = x;
+                }
+                else if (type === "V") {
+                    var y = seg.values[0];
+                    absolutizedPathData.push({ type: "V", values: [y] });
+                    currentY = y;
+                }
+                else if (type === "v") {
+                    var y = currentY + seg.values[0];
+                    absolutizedPathData.push({ type: "V", values: [y] });
+                    currentY = y;
+                }
+                else if (type === "S") {
+                    var x2 = seg.values[0];
+                    var y2 = seg.values[1];
+                    var x = seg.values[2];
+                    var y = seg.values[3];
+                    absolutizedPathData.push({ type: "S", values: [x2, y2, x, y] });
+                    currentX = x;
+                    currentY = y;
+                }
+                else if (type === "s") {
+                    var x2 = currentX + seg.values[0];
+                    var y2 = currentY + seg.values[1];
+                    var x = currentX + seg.values[2];
+                    var y = currentY + seg.values[3];
+                    absolutizedPathData.push({ type: "S", values: [x2, y2, x, y] });
+                    currentX = x;
+                    currentY = y;
+                }
+                else if (type === "T") {
+                    var x = seg.values[0];
+                    var y = seg.values[1];
+                    absolutizedPathData.push({ type: "T", values: [x, y] });
+                    currentX = x;
+                    currentY = y;
+                }
+                else if (type === "t") {
+                    var x = currentX + seg.values[0];
+                    var y = currentY + seg.values[1];
+                    absolutizedPathData.push({ type: "T", values: [x, y] });
+                    currentX = x;
+                    currentY = y;
+                }
+                else if (type === "Z" || type === "z") {
+                    absolutizedPathData.push({ type: "Z", values: [] });
+                    currentX = subpathX;
+                    currentY = subpathY;
+                }
+            });
+            return absolutizedPathData;
+        };
+        // @info
+        //   Takes path data that consists only from absolute commands, returns path data that consists only from
+        //   "M", "L", "C" and "Z" commands.
+        var reducePathData = function (pathData) {
+            var reducedPathData = [];
+            var lastType = null;
+            var lastControlX = null;
+            var lastControlY = null;
+            var currentX = null;
+            var currentY = null;
+            var subpathX = null;
+            var subpathY = null;
+            pathData.forEach(function (seg) {
+                if (seg.type === "M") {
+                    var x = seg.values[0];
+                    var y = seg.values[1];
+                    reducedPathData.push({ type: "M", values: [x, y] });
+                    subpathX = x;
+                    subpathY = y;
+                    currentX = x;
+                    currentY = y;
+                }
+                else if (seg.type === "C") {
+                    var x1 = seg.values[0];
+                    var y1 = seg.values[1];
+                    var x2 = seg.values[2];
+                    var y2 = seg.values[3];
+                    var x = seg.values[4];
+                    var y = seg.values[5];
+                    reducedPathData.push({ type: "C", values: [x1, y1, x2, y2, x, y] });
+                    lastControlX = x2;
+                    lastControlY = y2;
+                    currentX = x;
+                    currentY = y;
+                }
+                else if (seg.type === "L") {
+                    var x = seg.values[0];
+                    var y = seg.values[1];
+                    reducedPathData.push({ type: "L", values: [x, y] });
+                    currentX = x;
+                    currentY = y;
+                }
+                else if (seg.type === "H") {
+                    var x = seg.values[0];
+                    reducedPathData.push({ type: "L", values: [x, currentY] });
+                    currentX = x;
+                }
+                else if (seg.type === "V") {
+                    var y = seg.values[0];
+                    reducedPathData.push({ type: "L", values: [currentX, y] });
+                    currentY = y;
+                }
+                else if (seg.type === "S") {
+                    var x2 = seg.values[0];
+                    var y2 = seg.values[1];
+                    var x = seg.values[2];
+                    var y = seg.values[3];
+                    var cx1, cy1;
+                    if (lastType === "C" || lastType === "S") {
+                        cx1 = currentX + (currentX - lastControlX);
+                        cy1 = currentY + (currentY - lastControlY);
+                    }
+                    else {
+                        cx1 = currentX;
+                        cy1 = currentY;
+                    }
+                    reducedPathData.push({ type: "C", values: [cx1, cy1, x2, y2, x, y] });
+                    lastControlX = x2;
+                    lastControlY = y2;
+                    currentX = x;
+                    currentY = y;
+                }
+                else if (seg.type === "T") {
+                    var x = seg.values[0];
+                    var y = seg.values[1];
+                    var x1, y1;
+                    if (lastType === "Q" || lastType === "T") {
+                        x1 = currentX + (currentX - lastControlX);
+                        y1 = currentY + (currentY - lastControlY);
+                    }
+                    else {
+                        x1 = currentX;
+                        y1 = currentY;
+                    }
+                    var cx1 = currentX + 2 * (x1 - currentX) / 3;
+                    var cy1 = currentY + 2 * (y1 - currentY) / 3;
+                    var cx2 = x + 2 * (x1 - x) / 3;
+                    var cy2 = y + 2 * (y1 - y) / 3;
+                    reducedPathData.push({ type: "C", values: [cx1, cy1, cx2, cy2, x, y] });
+                    lastControlX = x1;
+                    lastControlY = y1;
+                    currentX = x;
+                    currentY = y;
+                }
+                else if (seg.type === "Q") {
+                    var x1 = seg.values[0];
+                    var y1 = seg.values[1];
+                    var x = seg.values[2];
+                    var y = seg.values[3];
+                    var cx1 = currentX + 2 * (x1 - currentX) / 3;
+                    var cy1 = currentY + 2 * (y1 - currentY) / 3;
+                    var cx2 = x + 2 * (x1 - x) / 3;
+                    var cy2 = y + 2 * (y1 - y) / 3;
+                    reducedPathData.push({ type: "C", values: [cx1, cy1, cx2, cy2, x, y] });
+                    lastControlX = x1;
+                    lastControlY = y1;
+                    currentX = x;
+                    currentY = y;
+                }
+                else if (seg.type === "A") {
+                    let r1 = Math.abs(seg.values[0]);
+                    let r2 = Math.abs(seg.values[1]);
+                    var angle = seg.values[2];
+                    var largeArcFlag = seg.values[3];
+                    var sweepFlag = seg.values[4];
+                    var x = seg.values[5];
+                    var y = seg.values[6];
+                    if (r1 === 0 || r2 === 0) {
+                        reducedPathData.push({ type: "C", values: [currentX, currentY, x, y, x, y] });
+                        currentX = x;
+                        currentY = y;
+                    }
+                    else {
+                        if (currentX !== x || currentY !== y) {
+                            var curves = arcToCubicCurves(currentX, currentY, x, y, r1, r2, angle, largeArcFlag, sweepFlag);
+                            curves.forEach(function (curve) {
+                                reducedPathData.push({ type: "C", values: curve });
+                            });
+                            currentX = x;
+                            currentY = y;
+                        }
+                    }
+                }
+                else if (seg.type === "Z") {
+                    reducedPathData.push(seg);
+                    currentX = subpathX;
+                    currentY = subpathY;
+                }
+                lastType = seg.type;
+            });
+            return reducedPathData;
+        };
+        SVGPathElement.prototype.getPathData = function (options) {
+            if (options && options.normalize) {
+                /*if (this[$cachedNormalizedPathData]) {
+                  return clonePathData(this[$cachedNormalizedPathData]);
+                }
+                else */ {
+                    let pathData;
+                    /*if (this[$cachedPathData]) {
+                      pathData = clonePathData(this[$cachedPathData]);
+                    }
+                    else */ {
+                        pathData = parsePathDataString(this.getAttribute("d") || "");
+                        //this[$cachedPathData] = clonePathData(pathData);
+                    }
+                    let normalizedPathData = reducePathData(absolutizePathData(pathData));
+                    //this[$cachedNormalizedPathData] = clonePathData(normalizedPathData);
+                    return normalizedPathData;
+                }
+            }
+            else {
+                /*if (this[$cachedPathData]) {
+                  return clonePathData(this[$cachedPathData]);
+                }
+                else*/ {
+                    let pathData = parsePathDataString(this.getAttribute("d") || "");
+                    //this[$cachedPathData] = clonePathData(pathData);
+                    return pathData;
+                }
+            }
+        };
+        SVGPathElement.prototype.setPathData = function (pathData) {
+            if (pathData.length === 0) {
+                this.removeAttribute("d");
+            }
+            else {
+                let d = "";
+                for (let i = 0, l = pathData.length; i < l; i += 1) {
+                    let seg = pathData[i];
+                    if (i > 0) {
+                        d += " ";
+                    }
+                    d += seg.type;
+                    if (seg.values && seg.values.length > 0) {
+                        d += " " + seg.values.join(" ");
+                    }
+                }
+                this.setAttribute("d", d);
+            }
+        };
+        SVGRectElement.prototype.getPathData = function (options) {
+            var x = this.x.baseVal.value;
+            var y = this.y.baseVal.value;
+            var width = this.width.baseVal.value;
+            var height = this.height.baseVal.value;
+            var rx = this.hasAttribute("rx") ? this.rx.baseVal.value : this.ry.baseVal.value;
+            var ry = this.hasAttribute("ry") ? this.ry.baseVal.value : this.rx.baseVal.value;
+            if (rx > width / 2) {
+                rx = width / 2;
+            }
+            if (ry > height / 2) {
+                ry = height / 2;
+            }
+            var pathData = [
+                { type: "M", values: [x + rx, y] },
+                { type: "H", values: [x + width - rx] },
+                { type: "A", values: [rx, ry, 0, 0, 1, x + width, y + ry] },
+                { type: "V", values: [y + height - ry] },
+                { type: "A", values: [rx, ry, 0, 0, 1, x + width - rx, y + height] },
+                { type: "H", values: [x + rx] },
+                { type: "A", values: [rx, ry, 0, 0, 1, x, y + height - ry] },
+                { type: "V", values: [y + ry] },
+                { type: "A", values: [rx, ry, 0, 0, 1, x + rx, y] },
+                { type: "Z", values: [] }
+            ];
+            // Get rid of redundant "A" segs when either rx or ry is 0
+            pathData = pathData.filter(function (s) {
+                return s.type === "A" && (s.values[0] === 0 || s.values[1] === 0) ? false : true;
+            });
+            if (options && options.normalize === true) {
+                pathData = reducePathData(pathData);
+            }
+            return pathData;
+        };
+        SVGCircleElement.prototype.getPathData = function (options) {
+            var cx = this.cx.baseVal.value;
+            var cy = this.cy.baseVal.value;
+            var r = this.r.baseVal.value;
+            var pathData = [
+                { type: "M", values: [cx + r, cy] },
+                { type: "A", values: [r, r, 0, 0, 1, cx, cy + r] },
+                { type: "A", values: [r, r, 0, 0, 1, cx - r, cy] },
+                { type: "A", values: [r, r, 0, 0, 1, cx, cy - r] },
+                { type: "A", values: [r, r, 0, 0, 1, cx + r, cy] },
+                { type: "Z", values: [] }
+            ];
+            if (options && options.normalize === true) {
+                pathData = reducePathData(pathData);
+            }
+            return pathData;
+        };
+        SVGEllipseElement.prototype.getPathData = function (options) {
+            var cx = this.cx.baseVal.value;
+            var cy = this.cy.baseVal.value;
+            var rx = this.rx.baseVal.value;
+            var ry = this.ry.baseVal.value;
+            var pathData = [
+                { type: "M", values: [cx + rx, cy] },
+                { type: "A", values: [rx, ry, 0, 0, 1, cx, cy + ry] },
+                { type: "A", values: [rx, ry, 0, 0, 1, cx - rx, cy] },
+                { type: "A", values: [rx, ry, 0, 0, 1, cx, cy - ry] },
+                { type: "A", values: [rx, ry, 0, 0, 1, cx + rx, cy] },
+                { type: "Z", values: [] }
+            ];
+            if (options && options.normalize === true) {
+                pathData = reducePathData(pathData);
+            }
+            return pathData;
+        };
+        SVGLineElement.prototype.getPathData = function () {
+            return [
+                { type: "M", values: [this.x1.baseVal.value, this.y1.baseVal.value] },
+                { type: "L", values: [this.x2.baseVal.value, this.y2.baseVal.value] }
+            ];
+        };
+        SVGPolylineElement.prototype.getPathData = function () {
+            var pathData = [];
+            for (var i = 0; i < this.points.numberOfItems; i += 1) {
+                var point = this.points.getItem(i);
+                pathData.push({
+                    type: (i === 0 ? "M" : "L"),
+                    values: [point.x, point.y]
+                });
+            }
+            return pathData;
+        };
+        SVGPolygonElement.prototype.getPathData = function () {
+            var pathData = [];
+            for (var i = 0; i < this.points.numberOfItems; i += 1) {
+                var point = this.points.getItem(i);
+                pathData.push({
+                    type: (i === 0 ? "M" : "L"),
+                    values: [point.x, point.y]
+                });
+            }
+            pathData.push({
+                type: "Z",
+                values: []
+            });
+            return pathData;
+        };
+    })();
+}
+export function straightenLine(p1, p2) {
+    let newP;
+    let alpha = calculateAlpha(p1, p2);
+    let normLength;
+    if ((alpha >= 337.5 && alpha < 360 || alpha >= 0 && alpha < 22.5)) { // 0
+        newP = { x: p2.x, y: p1.y };
+    }
+    else if ((alpha >= 22.5 && alpha < 67.5)) { // 45
+        normLength = calculateNormLegth(p1, p2);
+        newP = { x: p1.x + normLength, y: p1.y - normLength };
+    }
+    else if ((alpha >= 67.5 && alpha < 112.5)) { // 90
+        newP = { x: p1.x, y: p2.y };
+    }
+    else if ((alpha >= 112.5 && alpha < 157.5)) { // 135
+        normLength = calculateNormLegth(p1, p2);
+        newP = { x: p1.x - normLength, y: p1.y - normLength };
+    }
+    else if ((alpha >= 157.5 && alpha < 202.5)) { // 180
+        newP = { x: p2.x, y: p1.y };
+    }
+    else if ((alpha >= 202.5 && alpha < 247.5)) { // 225
+        normLength = calculateNormLegth(p1, p2);
+        newP = { x: p1.x - normLength, y: p1.y + normLength };
+    }
+    else if ((alpha >= 247.5 && alpha < 292.5)) { // 270
+        newP = { x: p1.x, y: p2.y };
+    }
+    else if ((alpha >= 292.5 && alpha < 337.5)) { // 315
+        normLength = calculateNormLegth(p1, p2);
+        newP = { x: p1.x + normLength, y: p1.y + normLength };
+    }
+    return newP;
+}
+export function calculateNormLegth(p1, p2) {
+    let normLenght;
+    let currentLength = Math.sqrt(Math.pow(p2.x - p1.x, 2) + Math.pow(p2.y - p1.y, 2));
+    let alpha = calculateAlpha(p1, p2);
+    let beta = alpha - ((Math.floor(alpha / 90) * 90) + 45);
+    normLenght = currentLength * Math.cos(beta * (Math.PI / 180)) / Math.sqrt(2);
+    return normLenght;
+}
+export function calculateAlpha(p1, p2) {
+    let alpha = -1 * Math.atan2(p2.y - p1.y, p2.x - p1.x) * 180 / Math.PI;
+    if (alpha < 0)
+        alpha += 360;
+    return alpha;
+}
+export function moveSVGPath(path, xFactor, yFactor) {
+    let newPathData = "";
+    let pd = path.getPathData({ normalize: true });
+    {
+        for (let p of pd) {
+            switch (p.type) {
+                case ('M'):
+                case ('m'):
+                case ('L'):
+                case ('l'):
+                case ('T'):
+                case ('t'):
+                    newPathData += p.type + " " + (p.values[0] - xFactor) + " " + (p.values[1] - yFactor) + " ";
+                    break;
+                case ('Z'):
+                case ('z'):
+                    newPathData += p.type + " ";
+                    break;
+                case ('C'):
+                case ('c'):
+                    newPathData += p.type + " " + (p.values[0] - xFactor) + " " + (p.values[1] - yFactor) + " " + (p.values[2] - xFactor) + " " + (p.values[3] - yFactor) + " " + (p.values[4] - xFactor) + " " + (p.values[5] - yFactor) + " ";
+                    break;
+                case ('S'):
+                case ('s'):
+                case ('Q'):
+                case ('q'):
+                    newPathData += p.type + " " + (p.values[0] - xFactor) + " " + (p.values[1] - yFactor) + " " + (p.values[2] - xFactor) + " " + (p.values[3] - yFactor) + " ";
+                    break;
+                case ('A'):
+                case ('a'):
+                    newPathData += p.type + " " + (p.values[0] - xFactor) + " " + (p.values[1] - yFactor) + " " + p.values[2] + " " + p.values[3] + " " + p.values[4] + " " + (p.values[5] - xFactor) + " " + (p.values[6] - yFactor) + " ";
+                    break;
+            }
+        }
+    }
+    return newPathData;
+}
+export function createPathD(path) {
+    let pathD = "";
+    for (let p of path) {
+        pathD += p.type + " ";
+        for (var i = 0; i < p.values.length; i++) {
+            if (p.values[i] != null && !isNaN(p.values[i])) {
+                pathD += p.values[i] + " ";
+            }
+        }
+    }
+    return pathD;
+}