all files / progressbar/types/ linear-progress.js

80.6% Statements 241/299
79.5% Branches 190/239
83.33% Functions 10/12
80.47% Lines 239/297
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 324 325 326 327 328 329 330 331 332 333 334 335 336 337 338 339 340 341 342 343 344 345 346 347 348 349 350 351 352 353 354 355 356 357 358 359 360 361 362 363 364 365 366 367 368 369 370 371 372 373 374 375 376 377 378 379 380 381 382 383 384 385 386 387 388 389 390 391 392 393 394 395 396 397 398 399 400 401 402 403 404 405 406 407 408 409 410 411 412 413 414 415 416 417 418 419 420 421 422 423 424 425 426 427 428 429 430 431 432 433 434 435 436 437 438 439 440 441 442 443 444 445 446 447 448 449 450 451 452 453 454 455 456 457 458 459 460   30× 30× 30×   117× 117× 117× 117× 117×   117× 117× 117×                   117× 117× 117× 117×   117× 27× 27×     117× 117×   120× 120× 120× 120× 120× 120× 120× 120× 120× 120× 120× 120× 120× 120×   120× 117×       120× 120× 120×       120×   120× 120×   120× 34×   120× 101×                 101×   93×     86× 83×       86× 22×   86×       101× 101×   101×   101× 30×     24×   30× 30× 30× 30× 30×   101×   101×     34× 34× 34× 34× 34× 34× 34× 34× 34× 34× 34× 34×                   34× 34×     30× 30× 16×   30×       34× 34×   34×   21× 21× 21× 21× 21× 21× 21× 21× 21× 21× 21× 21× 21× 21× 21× 21× 21× 21× 21× 21× 21×     21× 21× 21× 21× 21×     21× 21× 20× 20×   20× 12×   10×                                           20×       20×   20× 20× 20× 20× 15× 15× 15× 15× 15×   20× 20×                                                     175× 175× 175× 175×           171×   175×                                                                                                                                                                              
define(["require", "exports", "../utils/progress-animation", "../utils/helper", "@syncfusion/ej2-svg-base", "./segment-progress", "../model/constant"], function (require, exports, progress_animation_1, helper_1, ej2_svg_base_1, segment_progress_1, constant_1) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    var Linear = (function () {
        function Linear(progress) {
            this.segment = new segment_progress_1.Segment();
            this.animation = new progress_animation_1.ProgressAnimation();
            this.progress = progress;
        }
        Linear.prototype.renderLinearTrack = function () {
            var progress = this.progress;
            var linearTrackGroup = progress.renderer.createGroup({ 'id': progress.element.id + '_LinearTrackGroup' });
            var linearTrack;
            var option;
            this.isRange = (this.progress.rangeColors[0].color !== '' || this.progress.rangeColors[0].start !== null ||
                this.progress.rangeColors[0].end !== null);
            var thickness = (progress.trackThickness || progress.themeStyle.linearTrackThickness);
            var stroke = (progress.argsData.trackColor || progress.themeStyle.linearTrackColor);
            Iif (progress.cornerRadius === 'Round4px') {
                if (progress.segmentCount > 1) {
                    linearTrack = this.createRoundCornerSegment('_LinearTrack_', stroke, thickness, true, 0, progress);
                }
                else {
                    option = new ej2_svg_base_1.PathOption(progress.element.id + '_Lineartrack', stroke, 0, 'none', progress.themeStyle.trackOpacity, '0', this.cornerRadius(progress.progressRect.x, progress.progressRect.y, progress.progressRect.width, thickness, 4, ''));
                    linearTrack = progress.renderer.drawPath(option);
                }
            }
            else {
                option = new ej2_svg_base_1.PathOption(progress.element.id + '_Lineartrack', 'none', thickness, stroke, progress.themeStyle.trackOpacity, '0', progress.getPathLine(progress.progressRect.x, progress.progressRect.width, thickness));
                linearTrack = progress.renderer.drawPath(option);
                progress.trackWidth = linearTrack.getTotalLength();
                if (progress.cornerRadius === 'Round' && !this.isRange) {
                    linearTrack.setAttribute('stroke-linecap', 'round');
                }
                if (progress.segmentCount > 1 && !this.isRange && !progress.enableProgressSegments) {
                    progress.segmentSize = progress.calculateSegmentSize(progress.trackWidth, thickness);
                    linearTrack.setAttribute('stroke-dasharray', progress.segmentSize);
                }
            }
            linearTrackGroup.appendChild(linearTrack);
            progress.svgObject.appendChild(linearTrackGroup);
        };
        Linear.prototype.renderLinearProgress = function (refresh, previousWidth) {
            Eif (previousWidth === void 0) { previousWidth = 0; }
            var progress = this.progress;
            var option;
            var linearProgress;
            var linearProgressWidth;
            var clipPathLinear;
            var clipPathIndeterminate;
            var linearProgressGroup;
            var animationdelay;
            var segmentWidth;
            var strippedStroke;
            var ismaximum = (progress.value === progress.maximum);
            var progressWidth = progress.calculateProgressRange(progress.argsData.value);
            linearProgressWidth = progress.progressRect.width *
                ((progress.isIndeterminate && !progress.enableProgressSegments) ? 1 : progressWidth);
            if (!refresh) {
                linearProgressGroup = progress.renderer.createGroup({ 'id': progress.element.id + '_LinearProgressGroup' });
            }
            else {
                linearProgressGroup = ej2_svg_base_1.getElement(progress.element.id + '_LinearProgressGroup');
            }
            var thickness = (progress.progressThickness || progress.themeStyle.linearProgressThickness);
            var stroke = (!progress.isStriped) ? this.checkingLinearProgressColor() : 'url(#' + progress.element.id + '_LinearStriped)';
            Iif (progress.cornerRadius === 'Round4px') {
                option = new ej2_svg_base_1.PathOption(progress.element.id + '_Linearprogress', stroke, 0, 'none', progress.themeStyle.progressOpacity, '0', this.cornerRadius(progress.progressRect.x, progress.progressRect.y, linearProgressWidth, thickness, 4, (ismaximum || progress.isIndeterminate) ? '' : 'start'));
            }
            else {
                option = new ej2_svg_base_1.PathOption(progress.element.id + '_Linearprogress', 'none', thickness, stroke, progress.themeStyle.progressOpacity, '0', progress.getPathLine(progress.progressRect.x, linearProgressWidth, thickness));
            }
            progress.progressWidth = progress.renderer.drawPath(option).getTotalLength();
            progress.segmentSize = (!progress.enableProgressSegments) ? progress.segmentSize :
                progress.calculateSegmentSize(progress.progressWidth, thickness);
            if (progress.secondaryProgress !== null && !progress.isIndeterminate) {
                this.renderLinearBuffer(progress);
            }
            if (progress.argsData.value !== null) {
                Iif (progress.cornerRadius === 'Round4px') {
                    if (progress.segmentCount > 1) {
                        linearProgress = this.createRoundCornerSegment('_Linearprogress_', stroke, thickness, false, linearProgressWidth, progress, progress.themeStyle.progressOpacity);
                    }
                    else {
                        linearProgress = progress.renderer.drawPath(option);
                    }
                }
                else {
                    if (progress.segmentColor.length !== 0 && !progress.isIndeterminate && !this.isRange) {
                        segmentWidth = (!progress.enableProgressSegments) ? progress.trackWidth : progress.progressWidth;
                        linearProgress = this.segment.createLinearSegment(progress, '_LinearProgressSegment', linearProgressWidth, progress.themeStyle.progressOpacity, thickness, segmentWidth);
                    }
                    else if (this.isRange && !progress.isIndeterminate) {
                        linearProgress = this.segment.createLinearRange(linearProgressWidth, progress);
                    }
                    else {
                        if (!refresh) {
                            linearProgress = progress.renderer.drawPath(option);
                        }
                        else {
                            linearProgress = ej2_svg_base_1.getElement(progress.element.id + '_Linearprogress');
                            linearProgress.setAttribute('d', progress.getPathLine(progress.progressRect.x, linearProgressWidth, thickness));
                            linearProgress.setAttribute('stroke', stroke);
                        }
                        if (progress.segmentCount > 1) {
                            linearProgress.setAttribute('stroke-dasharray', progress.segmentSize);
                        }
                        if (progress.cornerRadius === 'Round' && progressWidth) {
                            linearProgress.setAttribute('stroke-linecap', 'round');
                        }
                    }
                }
                linearProgressGroup.appendChild(linearProgress);
                if (progress.isStriped && !progress.isIndeterminate) {
                    strippedStroke = this.checkingLinearProgressColor();
                    this.renderLinearStriped(strippedStroke, linearProgressGroup, progress);
                }
                if (progress.isActive && !progress.isIndeterminate && !progress.isStriped) {
                    this.renderActiveState(linearProgressGroup, progressWidth, linearProgressWidth, thickness, refresh);
                }
                if (progress.animation.enable && !progress.isIndeterminate && !progress.isActive && !progress.isStriped) {
                    if ((progress.secondaryProgress !== null)) {
                        animationdelay = progress.animation.delay + (this.bufferWidth - linearProgressWidth);
                    }
                    else {
                        animationdelay = progress.animation.delay;
                    }
                    this.delay = animationdelay;
                    clipPathLinear = progress.createClipPath(progress.clipPath, progressWidth, null, refresh, thickness, false, (progress.cornerRadius === 'Round4px' && ismaximum));
                    linearProgressGroup.appendChild(progress.clipPath);
                    linearProgress.setAttribute('style', 'clip-path:url(#' + progress.element.id + '_clippath)');
                    this.animation.doLinearAnimation(clipPathLinear, progress, animationdelay, refresh ? previousWidth : 0);
                }
                if (progress.isIndeterminate) {
                    clipPathIndeterminate = progress.createClipPath(progress.clipPath, (progress.enableProgressSegments) ? 1 : progressWidth, null, refresh, thickness, progress.enableProgressSegments);
                    linearProgressGroup.appendChild(progress.clipPath);
                    linearProgress.setAttribute('style', 'clip-path:url(#' + progress.element.id + '_clippath)');
                    this.animation.doLinearIndeterminate(((!progress.enableProgressSegments) ? clipPathIndeterminate : linearProgress), linearProgressWidth, thickness, progress, clipPathIndeterminate);
                }
                progress.svgObject.appendChild(linearProgressGroup);
            }
        };
        Linear.prototype.renderLinearBuffer = function (progress) {
            var linearBuffer;
            var clipPathBuffer;
            var linearBufferWidth;
            var option;
            var segmentWidth;
            var ismaximum = (progress.secondaryProgress === progress.maximum);
            var secondaryProgressWidth = progress.calculateProgressRange(progress.secondaryProgress);
            this.bufferWidth = linearBufferWidth = progress.progressRect.width * secondaryProgressWidth;
            var linearBufferGroup = progress.renderer.createGroup({ 'id': progress.element.id + '_LinearBufferGroup' });
            var thickness = (progress.progressThickness || progress.themeStyle.linearProgressThickness);
            var stroke = this.checkingLinearProgressColor();
            Iif (progress.cornerRadius === 'Round4px') {
                if (progress.segmentCount > 1) {
                    linearBuffer = this.createRoundCornerSegment('_Linearbuffer_', stroke, thickness, false, linearBufferWidth, progress, progress.themeStyle.bufferOpacity);
                }
                else {
                    option = new ej2_svg_base_1.PathOption(progress.element.id + '_Linearbuffer', stroke, 0, 'none', progress.themeStyle.bufferOpacity, '0', this.cornerRadius(progress.progressRect.x, progress.progressRect.y, linearBufferWidth, thickness, 4, (ismaximum) ? '' : 'start'));
                    linearBuffer = progress.renderer.drawPath(option);
                }
            }
            else {
                option = new ej2_svg_base_1.PathOption(progress.element.id + '_Linearbuffer', 'none', thickness, stroke, progress.themeStyle.bufferOpacity, '0', progress.getPathLine(progress.progressRect.x, linearBufferWidth, thickness));
                if (progress.segmentColor.length !== 0 && !progress.isIndeterminate && !this.isRange) {
                    segmentWidth = (!progress.enableProgressSegments) ? progress.trackWidth : progress.progressWidth;
                    linearBuffer = this.segment.createLinearSegment(progress, '_LinearBufferSegment', linearBufferWidth, progress.themeStyle.bufferOpacity, (progress.progressThickness || progress.themeStyle.linearProgressThickness), segmentWidth);
                }
                else {
                    linearBuffer = progress.renderer.drawPath(option);
                    if (progress.segmentCount > 1 && !this.isRange) {
                        linearBuffer.setAttribute('stroke-dasharray', progress.segmentSize);
                    }
                    if (progress.cornerRadius === 'Round' && !this.isRange) {
                        linearBuffer.setAttribute('stroke-linecap', 'round');
                    }
                }
            }
            linearBufferGroup.appendChild(linearBuffer);
            if (progress.animation.enable) {
                clipPathBuffer = progress.createClipPath(progress.bufferClipPath, secondaryProgressWidth, null, false, thickness, false, (progress.cornerRadius === 'Round4px' && ismaximum));
                linearBufferGroup.appendChild(progress.bufferClipPath);
                linearBuffer.setAttribute('style', 'clip-path:url(#' + progress.element.id + '_clippathBuffer)');
                this.animation.doLinearAnimation(clipPathBuffer, progress, progress.animation.delay, 0);
            }
            progress.svgObject.appendChild(linearBufferGroup);
        };
        Linear.prototype.renderLinearLabel = function (isProgressRefresh) {
            Eif (isProgressRefresh === void 0) { isProgressRefresh = false; }
            var linearlabel;
            var posX;
            var posY;
            var textSize;
            var percentage = 100;
            var option;
            var defaultPos;
            var far;
            var center;
            var pos;
            var clipPath;
            var thickness = (this.progress.progressThickness || this.progress.themeStyle.linearProgressThickness);
            var padding = 5;
            var progress = this.progress;
            var textAlignment = progress.labelStyle.textAlignment;
            var labelText = progress.labelStyle.text;
            var fontBackground = this.checkingLinearProgressColor();
            var progressWidth = progress.progressRect.width * progress.calculateProgressRange(progress.value);
            var linearLabelGroup = progress.renderer.createGroup({ 'id': progress.element.id + '_LinearLabelGroup' });
            Iif (document.getElementById(linearLabelGroup.id)) {
                document.getElementById(linearLabelGroup.id).remove();
            }
            var labelValue = ((progress.value - progress.minimum) / (progress.maximum - progress.minimum)) * percentage;
            var linearValue = (progress.value < progress.minimum || progress.value > progress.maximum) ? 0 : Math.round(labelValue);
            var rgbValue = helper_1.convertHexToColor(helper_1.colorNameToHex(fontBackground));
            var contrast = Math.round((rgbValue.r * 299 + rgbValue.g * 587 + rgbValue.b * 114) / 1000);
            var argsData = {
                cancel: false, text: labelText ? labelText : String(linearValue) + '%', color: progress.labelStyle.color
            };
            progress.trigger('textRender', argsData);
            if (!argsData.cancel) {
                textSize = ej2_svg_base_1.measureText(argsData.text, progress.labelStyle);
                defaultPos = (progress.enableRtl) ? (progress.progressRect.x + progress.progressRect.width - textSize.width / 2) :
                    (progress.progressRect.x + textSize.width / 2);
                if (progress.labelOnTrack) {
                    if (textAlignment === 'Near') {
                        posX = defaultPos + ((progress.enableRtl) ? -padding : padding);
                    }
                    else if (textAlignment === 'Center') {
                        center = (progress.enableRtl) ? (progress.progressRect.x + progress.progressRect.width - progressWidth / 2) :
                            (progress.progressRect.x + progressWidth / 2);
                        pos = (progress.enableRtl) ? (center <= defaultPos) : (center >= defaultPos);
                        if (pos) {
                            posX = center;
                        }
                        else {
                            posX = defaultPos;
                        }
                    }
                    else {
                        far = (progress.enableRtl) ?
                            ((progress.progressRect.x + progress.progressRect.width - progressWidth) + textSize.width / 2) :
                            (progress.progressRect.x + progressWidth - textSize.width / 2);
                        far += (progress.enableRtl) ? padding : -padding;
                        pos = (progress.enableRtl) ? (far <= defaultPos) : (far >= defaultPos);
                        if (pos) {
                            posX = far;
                        }
                        else {
                            posX = defaultPos;
                        }
                    }
                }
                else {
                    if (textAlignment === 'Near') {
                        posX = defaultPos + ((progress.enableRtl) ? -padding : padding);
                    }
                    else if (textAlignment === 'Center') {
                        posX = (progress.progressRect.x + progress.progressRect.width) / 2;
                    }
                    else {
                        posX = (progress.enableRtl) ?
                            (progress.progressRect.x + textSize.width / 2) :
                            (progress.progressRect.x + progress.progressRect.width - textSize.width / 2);
                        posX += (progress.enableRtl) ? padding : -padding;
                    }
                }
                Iif (this.progress.cornerRadius === 'Round4px') {
                    posY = progress.progressRect.y + (thickness / 2) + (textSize.height / 4);
                }
                else {
                    posY = progress.progressRect.y + (progress.progressRect.height / 2) + (textSize.height / 4);
                }
                option = new helper_1.TextOption(progress.element.id + '_linearLabel', progress.labelStyle.size || progress.themeStyle.linearFontSize, progress.labelStyle.fontStyle || progress.themeStyle.linearFontStyle, progress.labelStyle.fontFamily || progress.themeStyle.linearFontFamily, progress.labelStyle.fontWeight, 'middle', argsData.color || ((contrast >= 128) ? 'black' : 'white'), posX, posY);
                linearlabel = progress.renderer.createText(option, argsData.text);
                linearLabelGroup.appendChild(linearlabel);
                if (progress.animation.enable && !progress.isIndeterminate) {
                    clipPath = progress.renderer.createClipPath({ 'id': progress.element.id + '_clippathLabel' });
                    progress.createClipPath(clipPath, 1, null, false, (progress.progressThickness || progress.themeStyle.linearProgressThickness), true);
                    linearLabelGroup.appendChild(clipPath);
                    linearlabel.setAttribute('style', 'clip-path:url(#' + progress.element.id + '_clippathLabel)');
                    this.animation.doLabelAnimation(linearlabel, (progress.previousWidth ? progress.previousWidth : 0), progressWidth - (isProgressRefresh ? progress.previousWidth : 0), progress, this.delay, textSize.width);
                }
                progress.svgObject.appendChild(linearLabelGroup);
                progress.previousWidth = progressWidth;
            }
        };
        Linear.prototype.renderActiveState = function (progressGroup, progressWidth, linearProgressWidth, thickness, refresh) {
            var linearActive;
            var progress = this.progress;
            var option;
            var ismaximum = (progress.value === progress.maximum);
            Iif (progress.cornerRadius === 'Round4px') {
                if (progress.segmentCount > 1) {
                    linearActive = this.createRoundCornerSegment('_LinearActiveProgress_', '#ffffff', thickness, false, linearProgressWidth, progress, 0.5);
                }
                else {
                    option = new ej2_svg_base_1.PathOption(progress.element.id + '_LinearActiveProgress', '#ffffff', 0, 'none', 0.5, '0', this.cornerRadius(progress.progressRect.x, progress.progressRect.y, linearProgressWidth, thickness, 4, ismaximum ? '' : 'start'));
                    linearActive = progress.renderer.drawPath(option);
                }
            }
            else {
                if (!refresh) {
                    option = new ej2_svg_base_1.PathOption(progress.element.id + '_LinearActiveProgress', 'none', thickness, '#ffffff', 0.5, '', progress.getPathLine(progress.progressRect.x, linearProgressWidth, thickness));
                    linearActive = progress.renderer.drawPath(option);
                }
                else {
                    linearActive = ej2_svg_base_1.getElement(progress.element.id + '_LinearActiveProgress');
                    linearActive.setAttribute('d', progress.getPathLine(progress.progressRect.x, linearProgressWidth, thickness));
                }
                if (progress.segmentCount > 1 && !this.isRange) {
                    linearActive.setAttribute('stroke-dasharray', progress.segmentSize);
                }
                if (progress.cornerRadius === 'Round' && progressWidth && !this.isRange) {
                    linearActive.setAttribute('stroke-linecap', 'round');
                }
            }
            var activeClip = progress.createClipPath(progress.clipPath, progressWidth, null, refresh, thickness, false);
            linearActive.setAttribute('style', 'clip-path:url(#' + progress.element.id + '_clippath)');
            progressGroup.appendChild(linearActive);
            progressGroup.appendChild(progress.clipPath);
            this.animation.doLinearAnimation(activeClip, progress, 0, 0, linearActive);
        };
        Linear.prototype.renderLinearStriped = function (color, group, progress) {
            var defs = progress.renderer.createDefs();
            var linearGradient = document.createElementNS(constant_1.svgLink, constant_1.gradientType);
            var stripWidth = 14;
            var stop;
            var stopOption = [];
            var gradOption = {
                id: progress.element.id + '_LinearStriped', x1: (progress.progressRect.x).toString(),
                x2: (progress.progressRect.x + stripWidth).toString(),
                spreadMethod: 'repeat', gradientUnits: 'userSpaceOnUse', gradientTransform: 'rotate(-45)'
            };
            stopOption = [{ offset: '50%', 'stop-color': color, 'stop-opacity': '1' },
                { offset: '50%', 'stop-color': color, 'stop-opacity': '0.4' }];
            linearGradient = helper_1.setAttributes(gradOption, linearGradient);
            for (var i = 0; i < stopOption.length; i++) {
                stop = document.createElementNS(constant_1.svgLink, constant_1.stopElement);
                stop = helper_1.setAttributes(stopOption[i], stop);
                linearGradient.appendChild(stop);
            }
            defs.appendChild(linearGradient);
            group.appendChild(defs);
            if (progress.animation.enable) {
                this.animation.doStripedAnimation(linearGradient, progress, 0);
            }
        };
        Linear.prototype.checkingLinearProgressColor = function () {
            var linearColor;
            var progress = this.progress;
            var role = progress.role;
            switch (role) {
                case 'Success':
                    linearColor = progress.themeStyle.success;
                    break;
                case 'Info':
                    linearColor = progress.themeStyle.info;
                    break;
                case 'Warning':
                    linearColor = progress.themeStyle.warning;
                    break;
                case 'Danger':
                    linearColor = progress.themeStyle.danger;
                    break;
                default:
                    linearColor = (progress.argsData.progressColor || progress.themeStyle.linearProgressColor);
            }
            return linearColor;
        };
        Linear.prototype.cornerRadius = function (x, y, width, height, radius, pathtype) {
            var path = '';
            var endWidth = width;
            var endRadius = radius;
            switch (pathtype) {
                case 'start':
                    path = 'M' + x + ',' + y + ' '
                        + 'h' + (width) + ' '
                        + 'v' + (height) + ' '
                        + 'h' + (-width) + ' '
                        + 'a' + radius + ',' + radius + ' 0 0 1 ' + -radius + ',' + -radius + ' '
                        + 'v' + (2 * radius - height) + ' '
                        + 'a' + radius + ',' + radius + ' 0 0 1 ' + radius + ',' + -radius + ' '
                        + 'z';
                    break;
                case 'end':
                    path = 'M' + x + ',' + y + ' '
                        + 'h' + (endWidth - endRadius) + ' '
                        + 'a' + endRadius + ',' + endRadius + ' 0 0 1 ' + endRadius + ',' + endRadius + ' '
                        + 'v' + (height - 2 * endRadius) + ' '
                        + 'a' + endRadius + ',' + endRadius + ' 0 0 1 ' + -endRadius + ',' + endRadius + ' '
                        + 'h' + (radius - endWidth) + ' '
                        + 'v' + (-height) + ' '
                        + 'z';
                    break;
                case 'none':
                    path = 'M' + x + ',' + y + ' '
                        + 'h' + (width) + ' '
                        + 'v' + (height) + ' '
                        + 'h' + (-width) + ' '
                        + 'v' + (-height) + ' '
                        + 'z';
                    break;
                default:
                    path = 'M' + x + ',' + y + ' '
                        + 'h' + (width - radius) + ' '
                        + 'a' + radius + ',' + radius + ' 0 0 1 ' + radius + ',' + radius + ' '
                        + 'v' + (height - 2 * radius) + ' '
                        + 'a' + radius + ',' + radius + ' 0 0 1 ' + -radius + ',' + radius + ' '
                        + 'h' + (radius - width) + ' '
                        + 'a' + radius + ',' + radius + ' 0 0 1 ' + -radius + ',' + -radius + ' '
                        + 'v' + (2 * radius - height) + ' '
                        + 'a' + radius + ',' + radius + ' 0 0 1 ' + radius + ',' + -radius + ' '
                        + 'z';
            }
            return path;
        };
        Linear.prototype.createRoundCornerSegment = function (id, stroke, thickness, isTrack, progressWidth, progress, opacity) {
            var locX = progress.progressRect.x;
            var locY = progress.progressRect.y;
            var width = progress.progressRect.width;
            var option;
            var pathType;
            var avlWidth;
            var gapWidth = (progress.gapWidth || progress.themeStyle.linearGapWidth);
            var segWidth = (width - ((progress.segmentCount - 1) * gapWidth)) / progress.segmentCount;
            var segmentGroup = progress.renderer.createGroup({ 'id': progress.element.id + id + 'SegmentGroup' });
            var segmentPath;
            for (var i = 1; i <= progress.segmentCount; i++) {
                if (i === 1 || i === progress.segmentCount) {
                    pathType = (i === 1) ? 'start' : 'end';
                }
                else {
                    pathType = 'none';
                }
                if (isTrack) {
                    option = new ej2_svg_base_1.PathOption(progress.element.id + id + i, stroke, 0, 'none', progress.themeStyle.trackOpacity, '0', this.cornerRadius(locX, locY, segWidth, thickness, 4, pathType));
                    segmentPath = progress.renderer.drawPath(option);
                    segmentGroup.appendChild(segmentPath);
                    locX += (segWidth + gapWidth);
                }
                else {
                    avlWidth = (progressWidth < segWidth) ? progressWidth : segWidth;
                    option = new ej2_svg_base_1.PathOption(progress.element.id + id + i, stroke, 0, 'none', opacity, '0', this.cornerRadius(locX, locY, avlWidth, thickness, 4, pathType));
                    segmentPath = progress.renderer.drawPath(option);
                    segmentGroup.appendChild(segmentPath);
                    locX += (segWidth + gapWidth);
                    progressWidth -= (segWidth + gapWidth);
                    if (progressWidth <= 0) {
                        break;
                    }
                }
            }
            return segmentGroup;
        };
        return Linear;
    }());
    exports.Linear = Linear;
});