all files / chart/user-interaction/ selection.js

88.34% Statements 932/1055
80.82% Branches 843/1043
97.33% Functions 73/75
88.52% Lines 925/1045
11 statements, 6 functions, 9 branches Ignored     
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 461 462 463 464 465 466 467 468 469 470 471 472 473 474 475 476 477 478 479 480 481 482 483 484 485 486 487 488 489 490 491 492 493 494 495 496 497 498 499 500 501 502 503 504 505 506 507 508 509 510 511 512 513 514 515 516 517 518 519 520 521 522 523 524 525 526 527 528 529 530 531 532 533 534 535 536 537 538 539 540 541 542 543 544 545 546 547 548 549 550 551 552 553 554 555 556 557 558 559 560 561 562 563 564 565 566 567 568 569 570 571 572 573 574 575 576 577 578 579 580 581 582 583 584 585 586 587 588 589 590 591 592 593 594 595 596 597 598 599 600 601 602 603 604 605 606 607 608 609 610 611 612 613 614 615 616 617 618 619 620 621 622 623 624 625 626 627 628 629 630 631 632 633 634 635 636 637 638 639 640 641 642 643 644 645 646 647 648 649 650 651 652 653 654 655 656 657 658 659 660 661 662 663 664 665 666 667 668 669 670 671 672 673 674 675 676 677 678 679 680 681 682 683 684 685 686 687 688 689 690 691 692 693 694 695 696 697 698 699 700 701 702 703 704 705 706 707 708 709 710 711 712 713 714 715 716 717 718 719 720 721 722 723 724 725 726 727 728 729 730 731 732 733 734 735 736 737 738 739 740 741 742 743 744 745 746 747 748 749 750 751 752 753 754 755 756 757 758 759 760 761 762 763 764 765 766 767 768 769 770 771 772 773 774 775 776 777 778 779 780 781 782 783 784 785 786 787 788 789 790 791 792 793 794 795 796 797 798 799 800 801 802 803 804 805 806 807 808 809 810 811 812 813 814 815 816 817 818 819 820 821 822 823 824 825 826 827 828 829 830 831 832 833 834 835 836 837 838 839 840 841 842 843 844 845 846 847 848 849 850 851 852 853 854 855 856 857 858 859 860 861 862 863 864 865 866 867 868 869 870 871 872 873 874 875 876 877 878 879 880 881 882 883 884 885 886 887 888 889 890 891 892 893 894 895 896 897 898 899 900 901 902 903 904 905 906 907 908 909 910 911 912 913 914 915 916 917 918 919 920 921 922 923 924 925 926 927 928 929 930 931 932 933 934 935 936 937 938 939 940 941 942 943 944 945 946 947 948 949 950 951 952 953 954 955 956 957 958 959 960 961 962 963 964 965 966 967 968 969 970 971 972 973 974 975 976 977 978 979 980 981 982 983 984 985 986 987 988 989 990 991 992 993 994 995 996 997 998 999 1000 1001 1002 1003 1004 1005 1006 1007 1008 1009 1010 1011 1012 1013 1014 1015 1016 1017 1018 1019 1020 1021 1022 1023 1024 1025 1026 1027 1028 1029 1030 1031 1032 1033 1034 1035 1036 1037 1038 1039 1040 1041 1042 1043 1044 1045 1046 1047 1048 1049 1050 1051 1052 1053 1054 1055 1056 1057 1058 1059 1060 1061 1062 1063 1064 1065 1066 1067 1068 1069 1070 1071 1072 1073 1074 1075 1076 1077 1078 1079 1080 1081 1082 1083 1084 1085 1086 1087 1088 1089 1090 1091 1092 1093 1094 1095 1096 1097 1098 1099 1100 1101 1102 1103 1104 1105 1106 1107 1108 1109 1110 1111 1112 1113 1114 1115 1116 1117 1118 1119 1120 1121 1122 1123 1124 1125 1126 1127 1128 1129 1130 1131 1132 1133 1134 1135 1136 1137 1138 1139 1140 1141 1142 1143 1144 1145 1146 1147 1148 1149 1150 1151 1152 1153 1154 1155 1156 1157 1158 1159 1160 1161 1162 1163 1164 1165 1166 1167 1168 1169 1170 1171 1172 1173 1174 1175 1176 1177 1178 1179 1180 1181 1182 1183 1184 1185 1186 1187 1188 1189 1190 1191 1192 1193 1194 1195 1196 1197 1198 1199 1200 1201 1202 1203 1204 1205 1206 1207 1208 1209 1210 1211 1212 1213 1214 1215 1216 1217 1218 1219 1220 1221 1222 1223 1224 1225 1226 1227 1228 1229 1230 1231 1232 1233 1234 1235 1236 1237 1238 1239 1240 1241 1242 1243 1244 1245 1246 1247 1248 1249 1250 1251 1252 1253 1254 1255 1256 1257 1258 1259 1260 1261 1262 1263 1264 1265 1266 1267 1268 1269 1270 1271 1272 1273 1274 1275 1276 1277 1278 1279 1280 1281 1282 1283 1284 1285 1286 1287 1288 1289 1290 1291 1292 1293 1294 1295 1296 1297 1298 1299 1300 1301 1302 1303 1304 1305 1306 1307 1308 1309 1310 1311 1312 1313 1314 1315 1316 1317 1318 1319 1320 1321 1322 1323 1324 1325 1326 1327 1328 1329 1330 1331 1332 1333 1334 1335 1336 1337 1338 1339 1340 1341 1342 1343 1344 1345 1346 1347 1348 1349 1350 1351 1352 1353 1354 1355 1356 1357 1358 1359 1360 1361 1362 1363 1364 1365 1366 1367 1368 1369 1370 1371 1372 1373 1374 1375 1376 1377 1378 1379 1380 1381 1382 1383 1384 1385 1386 1387 1388 1389 1390 1391 1392 1393 1394 1395 1396 1397 1398 1399 1400 1401 1402 1403 1404 1405 1406 1407 1408 1409 1410 1411 1412 1413 1414 1415 1416 1417 1418 1419 1420 1421 1422 1423 1424 1425 1426 1427 1428 1429 1430 1431 1432 1433 1434 1435 1436 1437 1438 1439 1440 1441 1442 1443 1444 1445 1446 1447 1448 1449 1450 1451 1452 1453 1454 1455 1456 1457 1458 1459 1460 1461 1462 1463 1464 1465 1466 1467 1468 1469 1470 1471 1472 1473 1474 1475 1476 1477 1478 1479 1480 1481 1482 1483 1484 1485 1486 1487 1488 1489 1490 1491 1492 1493 1494 1495 1496 1497 1498 1499 1500 1501 1502 1503 1504 1505 1506 1507 1508 1509 1510 1511 1512 1513 1514 1515 1516 1517 1518 1519 1520 1521 1522 1523 1524 1525 1526 1527 1528 1529 1530 1531 1532 1533 1534 1535 1536 1537 1538 1539 1540 1541 1542 1543 1544 1545 1546 1547 1548 1549 1550 1551 1552 1553 1554 1555 1556 1557 1558 1559 1560 1561 1562 1563 1564 1565 1566 1567 1568 1569 1570 1571 1572 1573 1574 1575 1576 1577 1578 1579 1580 1581 1582 1583 1584 1585 1586 1587 1588 1589 1590 1591 1592 1593 1594 1595 1596 1597 1598 1599 1600 1601 1602 1603 1604 1605 1606 1607 1608 1609 1610 1611 1612          427× 427× 427× 427× 427× 427× 427× 427× 427× 427× 427× 427× 427× 427× 427×   427×     427× 427× 427× 427× 427× 427×   52× 52×   46× 46×     360× 19×   341× 341× 341× 341× 341×   409× 409× 409× 409× 409× 409× 409× 409× 409× 409×   409× 409× 409× 409× 409× 274×     6342× 6341× 5982×   6341× 335×   6341×     292× 30× 30×     427× 427× 427× 427× 427×     32× 32× 32× 32× 83× 83× 83× 83× 79×   83× 83× 83× 83× 83× 83×   10×       32×   183× 183× 183× 344× 325×   325× 325× 325× 1227×       325×         240× 240×   236×     235×     219× 179× 179×   40× 40× 40× 40×   219× 29×     218×                                   218×   173× 173×           215×   213×     207× 34×       34×           207× 207× 196× 196×       196×     196×     227× 227×   14×   227×     227×   61× 61× 61× 61×   129× 129× 129× 129×   55× 43×   12× 12×     129×   129× 129×   129×   31× 31×       31×   31× 31×   31×     221× 221× 221× 221× 221× 221× 221× 31× 80× 80× 80× 78× 78× 78× 78× 78×   78× 78×   72×     78× 78×         78×                     190× 61× 19× 28× 28× 28×             42×   42× 31×           129× 129× 129× 22×     107×   129× 360× 360× 360× 360× 360× 360× 360×   360× 46×   314×     360×             221×           221×   455× 455×   91×     455× 455× 455× 374× 374× 251×   123× 50× 35×         455× 455× 455× 455×   455× 99×   455× 36×   419×       419× 419× 419×   455× 40×     415×       31×   91× 91× 34× 34×               308× 308× 308×   308× 734× 734× 734× 734× 14× 12× 12×           720× 720×   734× 729× 729× 567×         1331× 1331× 1331× 1331×   1331× 25×   1331× 1331× 1331× 1331× 1331× 10648× 10648× 10648× 203×   203×     10648×   6117×     4531× 4531× 4531× 4531× 1347×       10648×           1331× 577×   229× 229× 229× 20×       1331× 1221× 1221× 1219× 959× 959× 959× 959× 939×       1219× 1219× 1219× 363× 363× 363×         856× 856×       856× 268×     588× 588×           1219× 1219× 20× 60× 60× 40×   20×   60×         1219× 14×         419× 1110× 1110× 918× 918× 918× 29× 29× 29× 29× 29× 29×   29× 28× 28× 28×       918× 918× 112× 112× 891× 779×       918×                         4719×   889× 2909× 2909× 2898× 2898× 20× 20×       16×           473× 1045× 43× 43×     473× 419×     1097×     18× 18× 16× 11×         18× 18× 18×         18×   18× 18×   12×                 12× 12× 12× 12× 12× 12× 12×     28× 28× 12× 12× 12×     26× 26×               12× 12×     12×             3324×       68×     3256×     25× 13× 13× 31×   13× 13× 13× 13× 35× 35× 35× 17× 17×       13×       243× 243× 36×   207× 189×   243×   6273× 6273× 414× 414×   5859× 335× 335×   5524× 5459×   65× 15×   50× 37×   13× 13× 13×   6273×   43× 43× 43× 43× 43× 43× 43× 43× 43× 43× 43× 43×   43× 42× 42× 42×   43× 100× 100× 100× 100× 100× 100×       98× 98×   100× 760×   760× 760× 760× 126×   634×     760× 18× 60×       742×       742×     689×       760× 225× 225× 225×   760× 34×     100×     43× 43× 100× 100×   43× 43× 43× 43× 42×   43×         43×   85× 85×   126× 126× 129× 129× 48×     78×   44× 44× 44× 44× 44× 44× 27× 27× 27× 27× 27×   44×       44×     44× 44×                                         38×   38× 15×   38× 11×       11×       27× 27× 27×       27×   27× 26×       27×                 42× 42× 42× 42×       42× 42×   42×         42× 42× 42× 42×     91× 10× 10×                                                           10× 10× 10× 10×       22× 22×               22× 22×   22× 22× 22×   22× 11×             22× 22× 22× 13×         13× 45×                       22× 22×     22× 22×   54× 54× 54×     70× 70× 70× 167× 167× 167× 167× 167× 334× 334×         11× 11× 44× 44×                       68×   92× 92×   91× 91× 40×   51×     49×     91×                           91× 91× 91× 91×   31×   46× 46× 46×   46× 46× 46× 44× 44× 44×       46× 42× 42× 21×           46× 44× 11× 11× 11×   44×               272× 272× 272× 272× 272× 28×   244×     244×   273× 43× 43×   43×     38× 38×     37×         38×     244× 244× 221×   219× 33×     31× 31×     221× 11×   210×         23×                       19× 19× 19× 19× 16×                                             1363× 1363× 1363× 1363×                       1363×   1356× 667×     689×   1363×       1363× 1363×     37736× 37736× 37736×         37736× 37736×       1234×       1234×           779× 779×   775× 489×     286×   779× 138×   779×                                                         43725×   360×        
/* istanbul ignore next */ 
var __extends = (this && this.__extends) || (function () {
    var extendStatics = function (d, b) {
        extendStatics = Object.setPrototypeOf ||
            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
        return extendStatics(d, b);
    };
    return function (d, b) {
        extendStatics(d, b);
        function __() { this.constructor = d; }
        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
    };
})();
define(["require", "exports", "@syncfusion/ej2-base", "@syncfusion/ej2-base", "@syncfusion/ej2-base", "../../common/utils/helper", "@syncfusion/ej2-svg-base", "../../common/model/base", "../../common/model/constants", "../../common/user-interaction/selection"], function (require, exports, ej2_base_1, ej2_base_2, ej2_base_3, helper_1, ej2_svg_base_1, base_1, constants_1, selection_1) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    var Selection = (function (_super) {
        __extends(Selection, _super);
        function Selection(chart) {
            var _this = _super.call(this, chart) || this;
            _this.isdrawRect = true;
            _this.multiDataIndexes = [];
            _this.pathIndex = 0;
            _this.seriesIndex = 0;
            _this.count = -1;
            _this.dragRectArray = [];
            _this.filterArray = [];
            _this.totalSelectedPoints = [];
            _this.chart = chart;
            _this.renderer = chart.renderer;
            var mode = chart.selectionMode;
            _this.isMultiDrag = chart.isMultiSelect && (mode.indexOf('Drag') > -1);
            _this.addEventListener();
            return _this;
        }
        Selection.prototype.addEventListener = function () {
            Iif (this.chart.isDestroyed || (this.chart.stockChart && this.chart.stockChart.onPanning)) {
                return;
            }
            var cancelEvent = ej2_base_1.Browser.isPointer ? 'pointerleave' : 'mouseleave';
            this.chart.on(ej2_base_1.Browser.touchMoveEvent, this.mouseMove, this);
            this.chart.on(cancelEvent, this.mouseLeave, this);
            this.chart.on('click', this.mouseClick, this);
            this.chart.on(ej2_base_1.Browser.touchStartEvent, this.mousedown, this);
            this.chart.on(ej2_base_1.Browser.touchEndEvent, this.mouseLeave, this);
        };
        Selection.prototype.mousedown = function (e) {
            var chart = this.chart;
            if (chart.isPointMouseDown || chart.selectionMode === 'None' || chart.isChartDrag) {
                return;
            }
            Eif (chart.isDoubleTap || !chart.isTouch || this.rectPoints) {
                this.dragStart(chart, chart.chartAxisLayoutPanel.seriesClipRect, chart.mouseDownX, chart.mouseDownY, e);
            }
        };
        Selection.prototype.removeEventListener = function () {
            if (this.chart.isDestroyed) {
                return;
            }
            this.chart.off(ej2_base_1.Browser.touchMoveEvent, this.mouseMove);
            this.chart.off('pointerleave' || 'mouseleave', this.mouseLeave);
            this.chart.off('click', this.mouseClick);
            this.chart.off(ej2_base_1.Browser.touchStartEvent, this.mousedown);
            this.chart.off(ej2_base_1.Browser.touchEndEvent, this.mouseLeave);
        };
        Selection.prototype.initPrivateVariables = function (chart) {
            this.styleId = chart.element.id + '_ej2_chart_selection';
            this.unselected = chart.element.id + '_ej2_deselected';
            this.closeIconId = chart.element.id + '_ej2_drag_close';
            this.draggedRectGroup = chart.element.id + '_ej2_drag_group';
            this.multiRectGroup = chart.element.id + '_ej2_drag_multi_group';
            this.draggedRect = chart.element.id + '_ej2_drag_rect';
            this.lassoPath = chart.element.id + '_ej2_drag_path';
            this.selectedDataIndexes = [];
            this.rectPoints = null;
            this.isSeriesMode = chart.selectionMode === 'Series';
        };
        Selection.prototype.invokeSelection = function (chart) {
            this.initPrivateVariables(chart);
            this.series = ej2_base_3.extend({}, chart.visibleSeries, null, true);
            this.seriesStyles();
            this.currentMode = chart.selectionMode;
            if (!(chart.selectionMode.indexOf('Drag') > -1)) {
                this.selectDataIndex(chart, this.concatIndexes(chart.selectedDataIndexes, this.selectedDataIndexes));
            }
        };
        Selection.prototype.generateStyle = function (series) {
            if (series) {
                if (this.styleId.indexOf('selection') > 1 && this.chart.selectionMode !== 'None') {
                    this.unselected = series.unSelectedStyle || this.unselected;
                }
                if (this.styleId.indexOf('highlight') > 0 && (this.chart.highlightMode !== 'None' || this.chart.legendSettings.enableHighlight)) {
                    this.unselected = series.nonHighlightStyle || this.unselected;
                }
                return (series.selectionStyle || this.styleId + '_series_' + series.index);
            }
            return 'undefined';
        };
        Selection.prototype.selectDataIndex = function (chart, indexes) {
            for (var _i = 0, indexes_1 = indexes; _i < indexes_1.length; _i++) {
                var index = indexes_1[_i];
                this.performSelection(index, chart, this.getElementByIndex(chart, index, '', this.series[index.series].marker.visible)[0]);
            }
        };
        Selection.prototype.getElementByIndex = function (chart, index, suffix, marker) {
            if (suffix === void 0) { suffix = ''; }
            var elementId = chart.element.id + '_Series_' + index.series + '_Point' + '_' + index.point;
            var series = chart.series[index.series];
            elementId = (series.type !== 'Scatter' && series.type !== 'Bubble' && marker) ? (elementId + '_Symbol' + suffix) : elementId;
            return [helper_1.getElement(elementId), ((series.type === 'RangeArea' || series.type === 'SplineRangeArea' || series.type === 'RangeStepArea') && series.marker.visible) ?
                    helper_1.getElement(elementId + '1') : null];
        };
        Selection.prototype.getClusterElements = function (chart, index) {
            var clusters = [];
            var seriesStyle;
            var selectedElements;
            for (var _i = 0, _a = chart.visibleSeries; _i < _a.length; _i++) {
                var series = _a[_i];
                Eif (series.visible) {
                    index = new base_1.Index(series.index, index.point);
                    if (series.isRectSeries) {
                        clusters.push(this.getElementByIndex(chart, index)[0]);
                    }
                    clusters.push(this.getElementByIndex(chart, index, '', series.marker.visible)[0]);
                    seriesStyle = this.generateStyle(chart.visibleSeries[index.series]);
                    selectedElements = document.querySelectorAll('.' + seriesStyle);
                    this.findTrackballElements(selectedElements, seriesStyle);
                    var clusterIndex = series.marker.visible && series.isRectSeries ? 2 : 1;
                    if (!chart.isMultiSelect && selectedElements.length > 0 &&
                        selectedElements[0].id !== (clusters[clusters.length - clusterIndex] ? clusters[clusters.length - clusterIndex].id : '')) {
                        this.removeSelection(chart, index.series, selectedElements, seriesStyle, true);
                    }
                }
            }
            return clusters;
        };
        Selection.prototype.findTrackballElements = function (selectedElements, className) {
            var trackballElements;
            var elements;
            for (var i = 0; i < selectedElements.length; i++) {
                if (!ej2_base_3.isNullOrUndefined(selectedElements[i])) {
                    trackballElements = !ej2_base_3.isNullOrUndefined(selectedElements[i].parentNode) ?
                        [].slice.call(selectedElements[0].parentNode.querySelectorAll('.' + className)) : [];
                    Eif (trackballElements.length > 0) {
                        elements = [];
                        for (var i_1 = 0; i_1 < trackballElements.length; i_1++) {
                            Iif (trackballElements[i_1].id.indexOf('Trackball') > -1) {
                                elements.push(trackballElements[i_1]);
                            }
                        }
                        this.removeStyles(elements);
                    }
                }
            }
        };
        Selection.prototype.findElements = function (chart, series, index, suffix, marker) {
            Iif (suffix === void 0) { suffix = ''; }
            if (this.isSeriesMode) {
                return this.getSeriesElements(series);
            }
            else if (this.currentMode === 'Cluster') {
                return this.getClusterElements(chart, index);
            }
            else {
                return this.getElementByIndex(chart, index, suffix, marker);
            }
        };
        Selection.prototype.isAlreadySelected = function (targetElem, eventType) {
            if (eventType === 'click') {
                this.currentMode = this.chart.selectionMode;
                this.styleId = this.chart.element.id + '_ej2_chart_selection';
            }
            else Eif (eventType === 'mousemove' || eventType === 'pointermove') {
                this.currentMode = this.chart.highlightMode;
                this.highlightDataIndexes = [];
                this.styleId = this.chart.element.id + '_ej2_chart_highlight';
            }
            if (this.chart.highlightMode !== 'None' && this.chart.selectionMode === 'None') {
                if (eventType === 'click') {
                    return false;
                }
            }
            if (((this.chart.highlightMode !== 'None' || this.chart.legendSettings.enableHighlight) && this.previousSelectedEle && this.previousSelectedEle[0])) {
                var parentNodeId = targetElem.parentNode.id;
                var isElement = void 0;
                Eif (targetElem.parentNode) {
                    isElement = (parentNodeId.indexOf('SeriesGroup') > 0 || parentNodeId.indexOf('SymbolGroup') > 0) ? true : false;
                }
                for (var i = 0; i < this.previousSelectedEle.length; i++) {
                    if (this.previousSelectedEle[i] && this.previousSelectedEle[i].hasAttribute('class')) {
                        if (this.previousSelectedEle[i].getAttribute('class').indexOf('highlight') > -1 &&
                            (isElement || eventType === 'click')) {
                            this.previousSelectedEle[i].removeAttribute('class');
                            Iif (this.chart.highlightColor !== '' && !ej2_base_3.isNullOrUndefined(this.chart.highlightColor) && this.chart.highlightPattern === 'None') {
                                if (this.previousSelectedEle[i].id.indexOf('Group') > 0) {
                                    for (var j = 0; j < this.previousSelectedEle[i].children.length; j++) {
                                        this.previousSelectedEle[i].children[j].setAttribute('fill', this.control.visibleSeries[this.indexFinder(this.previousSelectedEle[i].id).series].interior);
                                    }
                                }
                                else {
                                    this.previousSelectedEle[i].setAttribute('fill', this.control.visibleSeries[this.indexFinder(this.previousSelectedEle[i].id).series].interior);
                                }
                            }
                            this.addOrRemoveIndex(this.highlightDataIndexes, this.indexFinder(this.previousSelectedEle[i].id));
                        }
                        else Iif (!isElement && this.previousSelectedEle[i].getAttribute('class').indexOf('highlight') > -1) {
                            this.performSelection(this.indexFinder(this.previousSelectedEle[i].id), this.chart, this.previousSelectedEle[i]);
                        }
                    }
                }
            }
            return true;
        };
        Selection.prototype.mouseClick = function (event) {
            this.calculateSelectedElements(event.target, event.type, true);
            Iif (this.chart.highlightModule && this.chart.highlightModule.highlightDataIndexes
                && this.chart.highlightModule.highlightDataIndexes.length > 0 && event.target.id.indexOf('_chart_legend_') === -1
                && event.target.id.indexOf('_Series_') === -1 && this.chart.isTouch && ej2_base_1.Browser.isDevice) {
                this.removeLegendHighlightStyles();
            }
        };
        Selection.prototype.calculateSelectedElements = function (targetElement, eventType, pointClick) {
            if (ej2_base_3.isNullOrUndefined(targetElement)) {
                return;
            }
            if ((this.chart.selectionMode === 'None' && this.chart.highlightMode === 'None') ||
                targetElement.id && targetElement.id.indexOf(this.chart.element.id + '_') === -1) {
                return;
            }
            if (eventType === 'mousemove' || eventType === 'pointermove') {
                Iif (targetElement.hasAttribute('class') && (targetElement.getAttribute('class').indexOf('highlight') > -1 ||
                    targetElement.getAttribute('class').indexOf('selection') > -1)) {
                    return;
                }
                Iif (!ej2_base_3.isNullOrUndefined(targetElement.parentNode) && targetElement.parentNode.hasAttribute('class') &&
                    (targetElement.parentNode.getAttribute('class').indexOf('highlight') > 0 ||
                        targetElement.parentNode.getAttribute('class').indexOf('selection') > 0)) {
                    return;
                }
            }
            this.isAlreadySelected(targetElement, eventType);
            if (targetElement.id && targetElement.id.indexOf('_Series_') > -1 && targetElement.id.indexOf('_Text_') === -1) {
                var element = void 0;
                Iif (targetElement.id.indexOf('_Trackball_1') > -1) {
                    element = helper_1.getElement(targetElement.id.split('_Trackball_')[0] + '_Symbol');
                    element = ej2_base_3.isNullOrUndefined(element) ? helper_1.getElement(targetElement.id.split('_Trackball_')[0]) : element;
                }
                else Iif (targetElement.id.indexOf('_Trackball_0') > -1) {
                    return null;
                }
                this.performSelection(this.indexFinder(targetElement.id), this.chart, element || targetElement, pointClick);
            }
        };
        Selection.prototype.performSelection = function (index, chart, element, pointClick) {
            this.isSeriesMode = this.currentMode === 'Series';
            if (chart.visibleSeries[index.series].type === 'BoxAndWhisker' && element &&
                element.id === chart.element.id + '_Series_' + index.series + '_Point_' + index.point + '_BoxPath') {
                element = element.parentNode;
            }
            if (chart.visibleSeries[index.series].type === 'Area' && (this.currentMode === 'Point' || this.currentMode === 'Cluster') && element &&
                (element.id === this.chart.element.id + '_Series_' + index.series)) {
                var className = this.generateStyle(chart.series[index.series]);
                var selectionEle = document.querySelectorAll('.' + className);
                this.findTrackballElements(selectionEle, className);
                this.blurEffect(chart.element.id, chart.visibleSeries, false, index.point);
            }
            switch (this.currentMode) {
                case 'Series':
                    this.selection(chart, index, this.getSeriesElements(chart.series[index.series]));
                    this.selectionComplete(chart, index, this.currentMode);
                    this.blurEffect(chart.element.id, chart.visibleSeries, false, index.point);
                    break;
                case 'Point':
                    Eif ((!isNaN(index.point) && element) || (!pointClick && isNaN(index.point))) {
                        var pointElements = [];
                        pointElements.push(element);
                        if (pointElements[0] !== null && chart.series[index.series].marker.visible &&
                            (chart.series[index.series].type.indexOf('Column') !== -1 || chart.series[index.series].type.indexOf('Bar') !== -1)) {
                            if (!(element.id.indexOf('_Symbol') !== -1) && helper_1.getElement(element.id + '_Symbol')) {
                                pointElements.push(helper_1.getElement(element.id + '_Symbol'));
                            }
                            else Eif (element.id.indexOf('_Symbol') !== -1 && helper_1.getElement(element.id.replace('_Symbol', ''))) {
                                pointElements.push(helper_1.getElement(element.id.replace('_Symbol', '')));
                            }
                        }
                        this.selection(chart, index, (!pointClick && isNaN(index.point)) ?
                            this.getSeriesElements(chart.series[index.series]) : pointElements);
                        this.selectionComplete(chart, index, this.currentMode);
                        this.blurEffect(chart.element.id, chart.visibleSeries, false, index.point);
                    }
                    break;
                case 'Cluster':
                    Eif (!isNaN(index.point) || (!pointClick && isNaN(index.point))) {
                        Iif (!pointClick && isNaN(index.point)) {
                            this.selection(chart, index, this.getSeriesElements(chart.series[index.series]));
                        }
                        else {
                            this.clusterSelection(chart, index);
                        }
                        this.selectionComplete(chart, index, this.currentMode);
                        this.blurEffect(chart.element.id, chart.visibleSeries, false, index.point);
                    }
                    break;
            }
        };
        Selection.prototype.selectionComplete = function (chart, index, selectionMode) {
            var points;
            var pointIndex;
            var seriesIndex;
            var selectedPointValues = [];
            var yValue;
            var selectedPointX;
            if (selectionMode === 'Cluster') {
                for (var _i = 0, _a = chart.visibleSeries; _i < _a.length; _i++) {
                    var series = _a[_i];
                    Eif (series.visible) {
                        for (var i = 0; i < this.selectedDataIndexes.length; i++) {
                            pointIndex = chart.isMultiSelect ? this.selectedDataIndexes[i].point : index.point;
                            seriesIndex = series.index;
                            points = series.points;
                            Eif (!isNaN(pointIndex) && (pointIndex < points.length)) {
                                yValue = (series.type !== 'RangeArea' || series.type.indexOf('SplineRangeArea') > -1 || series.type.indexOf('RangeStepArea') > -1) ? points[pointIndex].yValue :
                                    points[pointIndex].regions[0].y;
                                selectedPointX = points[pointIndex].xValue;
                                if (chart.primaryXAxis.valueType === 'Category') {
                                    selectedPointX = points[pointIndex].x.toLocaleString();
                                }
                                else Iif (chart.primaryXAxis.valueType === 'DateTime') {
                                    selectedPointX = new Date(points[pointIndex].xValue);
                                }
                                Eif (series.category !== 'Indicator') {
                                    selectedPointValues.push({
                                        x: selectedPointX, y: yValue, seriesIndex: seriesIndex,
                                        pointIndex: pointIndex
                                    });
                                }
                                Iif (series.type === 'RangeArea' || series.type === 'SplineRangeArea' || series.type === 'RangeStepArea') {
                                    selectedPointValues.push({
                                        x: selectedPointX, y: points[pointIndex].regions[0].y,
                                        seriesIndex: seriesIndex, pointIndex: pointIndex
                                    });
                                }
                            }
                        }
                    }
                }
            }
            else if (selectionMode === 'Series') {
                if (chart.isMultiSelect) {
                    for (var i = 0; i < this.selectedDataIndexes.length; i++) {
                        seriesIndex = this.selectedDataIndexes[i].series;
                        Eif (this.selectedDataIndexes.length > 0) {
                            selectedPointValues.push({
                                seriesIndex: seriesIndex
                            });
                        }
                    }
                }
                else {
                    seriesIndex = (this.selectedDataIndexes.length > 0) ? this.selectedDataIndexes[0].series :
                        (this.highlightDataIndexes && this.highlightDataIndexes.length > 0) ? this.highlightDataIndexes[0].series : 0;
                    if (this.selectedDataIndexes.length > 0 || (this.highlightDataIndexes && this.highlightDataIndexes.length > 0)) {
                        selectedPointValues.push({
                            seriesIndex: seriesIndex
                        });
                    }
                }
            }
            else Eif (selectionMode === 'Point') {
                var selectedData = [];
                if (this.styleId.indexOf('highlight') > -1) {
                    selectedData = this.highlightDataIndexes;
                }
                else {
                    selectedData = this.selectedDataIndexes;
                }
                for (var i = 0; i < selectedData.length; i++) {
                    pointIndex = selectedData[i].point;
                    seriesIndex = selectedData[i].series;
                    var series = chart.series[seriesIndex];
                    points = series.points;
                    Eif (!isNaN(pointIndex)) {
                        selectedPointX = points[pointIndex].xValue;
                        yValue = (series.type !== 'RangeArea' || series.type.indexOf('SplineRangeArea') > -1 || series.type.indexOf('RangeStepArea') > -1) ? points[pointIndex].yValue :
                            points[pointIndex].regions[0].y;
                        if (chart.primaryXAxis.valueType === 'Category') {
                            selectedPointX = points[pointIndex].x.toLocaleString();
                        }
                        else Iif (chart.primaryXAxis.valueType === 'DateTime') {
                            selectedPointX = new Date(points[pointIndex].xValue);
                        }
                        selectedPointValues.push({
                            x: selectedPointX, y: yValue, seriesIndex: seriesIndex,
                            pointIndex: pointIndex
                        });
                    }
                }
            }
            var args = {
                name: constants_1.selectionComplete,
                selectedDataValues: selectedPointValues,
                cancel: false,
                chart: chart
            };
            chart.trigger(constants_1.selectionComplete, args);
        };
        Selection.prototype.selection = function (chart, index, selectedElements) {
            Eif (!(this.currentMode === 'Lasso')) {
                if (!chart.isMultiSelect && (this.currentMode.indexOf('Drag') === -1 && this.styleId.indexOf('highlight') === -1 &&
                    chart.selectionMode !== 'None')) {
                    this.removeMultiSelectElements(chart, this.selectedDataIndexes, index, chart.series);
                }
            }
            var indexValue = (this.rangeColorMappingEnabled()) ? 0 : index.series;
            Eif (!ej2_base_3.isNullOrUndefined(selectedElements[0])) {
                if (chart.visibleSeries[indexValue].isRectSeries) {
                    Eif (selectedElements[0].id) {
                        if (document.getElementById(selectedElements[0].id + '_Symbol')) {
                            selectedElements.push(helper_1.getElement(selectedElements[0].id + '_Symbol'));
                        }
                        else if (selectedElements[0].id.indexOf('SeriesGroup') !== -1) {
                            if (document.getElementById(selectedElements[0].id.replace('SeriesGroup', 'SymbolGroup'))) {
                                selectedElements.push(helper_1.getElement(selectedElements[0].id.replace('SeriesGroup', 'SymbolGroup')));
                            }
                        }
                    }
                }
                var isAdd = void 0;
                var className = selectedElements[0] && (selectedElements[0].getAttribute('class') || '');
                className = className.replace('e-chart-focused', '').trim();
                var pClassName = selectedElements[0].parentNode &&
                    (selectedElements[0].parentNode.getAttribute('class') || '');
                if (className !== '' && this.currentMode !== 'Cluster') {
                    this.findTrackballElements(selectedElements, className);
                }
                if (selectedElements[0] && className.indexOf(this.getSelectionClass(selectedElements[0].id)) > -1) {
                    this.removeStyles(selectedElements);
                }
                else Iif (selectedElements[0].parentNode && pClassName.indexOf(this.getSelectionClass(selectedElements[0].id)) > -1) {
                    this.removeStyles([selectedElements[0].parentNode]);
                }
                else {
                    this.previousSelectedEle = (chart.highlightMode !== 'None' || chart.legendSettings.enableHighlight) ? selectedElements : [];
                    this.applyStyles(selectedElements);
                    isAdd = true;
                }
                if (this.styleId.indexOf('highlight') > 0 && (chart.highlightMode !== 'None' || chart.legendSettings.enableHighlight)) {
                    this.addOrRemoveIndex(this.highlightDataIndexes, index, isAdd);
                }
                else {
                    this.addOrRemoveIndex(this.selectedDataIndexes, index, isAdd);
                }
            }
        };
        Selection.prototype.clusterSelection = function (chart, index) {
            this.selection(chart, index, this.getClusterElements(chart, new base_1.Index(index.series, index.point)));
        };
        Selection.prototype.removeMultiSelectElements = function (chart, index, currentIndex, seriesCollection) {
            var series;
            for (var i = 0; i < index.length; i++) {
                series = seriesCollection[index[i].series];
                if ((this.isSeriesMode && !this.toEquals(index[i], currentIndex, this.isSeriesMode)) ||
                    (this.currentMode === 'Cluster' && !this.toEquals(index[i], currentIndex, false)) ||
                    (!this.isSeriesMode && this.toEquals(index[i], currentIndex, true) &&
                        !this.toEquals(index[i], currentIndex, false))) {
                    this.removeStyles(this.findElements(chart, series, index[i], '', false));
                    Eif (series.marker.visible) {
                        this.removeStyles(this.findElements(chart, series, index[i], '', true));
                    }
                    index.splice(i, 1);
                    i--;
                }
            }
        };
        Selection.prototype.blurEffect = function (chartId, visibleSeries, isLegend, index) {
            if (isLegend === void 0) { isLegend = false; }
            if (index === void 0) { index = 0; }
            var visibility = (this.checkVisibility(this.highlightDataIndexes, this.chart) ||
                this.checkVisibility(this.selectedDataIndexes, this.chart));
            for (var _i = 0, visibleSeries_1 = visibleSeries; _i < visibleSeries_1.length; _i++) {
                var series = visibleSeries_1[_i];
                var legendIndex = void 0;
                var legendStrokeColor = void 0;
                if (this.rangeColorMappingEnabled()) {
                    if (isLegend === false) {
                        legendIndex = Object.keys(series.rangeColorPoints).indexOf(series.points[index].interior);
                        legendStrokeColor = series.points[index].interior;
                    }
                    else {
                        legendIndex = index;
                        legendStrokeColor = document.getElementById(chartId + '_chart_legend_shape_' + index).getAttribute('fill');
                    }
                }
                else {
                    legendIndex = series.index;
                    legendStrokeColor = this.chart.visibleSeries[series.index].interior;
                }
                if (series.visible) {
                    this.checkSelectionElements(helper_1.getElement(chartId + 'SeriesGroup' + series.index), this.generateStyle(series), visibility, isLegend, legendIndex, legendStrokeColor);
                    if (!ej2_base_3.isNullOrUndefined(helper_1.getElement(chartId + 'SymbolGroup' + series.index))) {
                        this.checkSelectionElements(helper_1.getElement(chartId + 'SymbolGroup' + series.index), this.generateStyle(series), visibility, isLegend, legendIndex, legendStrokeColor);
                    }
                }
            }
        };
        Selection.prototype.checkSelectionElements = function (element, className, visibility, isLegend, series, legendStrokeColor) {
            Iif (isLegend === void 0) { isLegend = true; }
            Iif (series === void 0) { series = 0; }
            if (legendStrokeColor === void 0) { legendStrokeColor = '#D3D3D3'; }
            var children = (this.isSeriesMode ?
                element.childNodes || [element] : element.childNodes || element);
            if (this.chart.selectionMode !== 'None' && (this.chart.highlightMode !== 'None' || this.chart.legendSettings.enableHighlight)) {
                children = (element.childNodes || element);
            }
            var elementClassName;
            var parentClassName;
            var legendShape;
            var selectElement = element;
            for (var i = 0; i < children.length; i++) {
                elementClassName = children[i].getAttribute('class') || '';
                parentClassName = children[i].parentNode.getAttribute('class') || '';
                if (this.chart.selectionMode !== 'None' && (this.chart.highlightMode !== 'None' || this.chart.legendSettings.enableHighlight)) {
                    className = elementClassName.indexOf('selection') > 0 ||
                        elementClassName.indexOf('highlight') > 0 ? elementClassName : className;
                    className = (parentClassName.indexOf('selection') > 0 ||
                        parentClassName.indexOf('highlight') > 0) ? parentClassName : className;
                }
                if (elementClassName.indexOf(className) === -1 &&
                    parentClassName.indexOf(className) === -1 && visibility) {
                    this.addSvgClass(children[i], this.unselected);
                }
                else {
                    selectElement = children[i];
                    this.removeSvgClass(children[i], this.unselected);
                    this.removeSvgClass(children[i].parentNode, this.unselected);
                    if (children[i].id !== '' && elementClassName.indexOf(this.unselected) !== -1 && parentClassName.indexOf(className) === -1) {
                        this.highlightAnimation(children[i], this.chart.series.length === 1 ? 0 :
                            this.indexFinder(children[i].id).series, 700, 0.3);
                    }
                }
                Iif (children[i].id.indexOf('Trackball') > 0 && selectElement.classList[0] === className) {
                    this.removeSvgClass(children[i], this.unselected);
                    this.removeSvgClass(children[i].parentNode, this.unselected);
                    this.addSvgClass(children[i], className);
                }
            }
            if (element.id.indexOf('Symbol') > -1) {
                if ((element.querySelectorAll('.' + className)[0]) && element.querySelectorAll('.' + className)[0].getAttribute('class')
                    === className) {
                    var symbolEle = helper_1.getElement(this.control.element.id + '_Series_' + element.id[element.id.length - 1]);
                    var seriesClassName = symbolEle && symbolEle.hasAttribute('class') ? symbolEle.getAttribute('class') : '';
                    if (seriesClassName.indexOf(this.unselected) > -1) {
                        this.removeSvgClass(symbolEle, this.unselected);
                    }
                }
            }
            if (this.control.legendModule && this.control.legendSettings.visible) {
                legendShape = helper_1.getElement(this.control.element.id + '_chart_legend_shape_' + series);
                if (legendShape) {
                    if (legendShape.hasAttribute('class')) {
                        this.removeSvgClass(legendShape, legendShape.getAttribute('class'));
                        Eif (!ej2_base_3.isNullOrUndefined(this.chart.highlightColor && this.chart.highlightColor !== '') && !this.chart.legendSettings.enableHighlight) {
                            legendShape.setAttribute('stroke', legendStrokeColor);
                            if (this.chart.highlightPattern === 'None') {
                                legendShape.setAttribute('fill', legendStrokeColor);
                            }
                        }
                    }
                    elementClassName = selectElement.getAttribute('class') || '';
                    parentClassName = selectElement.parentNode.getAttribute('class') || '';
                    if (elementClassName.indexOf(className) === -1 && parentClassName.indexOf(className) === -1 && visibility) {
                        this.addSvgClass(legendShape, (this.chart.highlightMode === 'None' && this.chart.legendSettings.enableHighlight) ? className : this.unselected);
                        this.removeSvgClass(legendShape, className);
                        if (this.chart.highlightColor !== '' && !ej2_base_3.isNullOrUndefined(this.chart.highlightColor)) {
                            legendShape.setAttribute('stroke', this.control.visibleSeries[series].interior);
                            if (this.chart.highlightPattern === 'None') {
                                legendShape.setAttribute('fill', this.control.visibleSeries[series].interior);
                            }
                        }
                    }
                    else {
                        this.removeSvgClass(legendShape, this.unselected);
                        if (!ej2_base_3.isNullOrUndefined(this.chart.highlightColor) && this.chart.highlightColor !== '') {
                            legendShape.setAttribute('stroke', this.control.visibleSeries[series].interior);
                            Iif (this.chart.highlightPattern === 'None') {
                                legendShape.setAttribute('fill', this.control.visibleSeries[series].interior);
                            }
                        }
                        if ((elementClassName === '' && parentClassName === '') || elementClassName.trim() === 'EJ2-Trackball') {
                            this.removeSvgClass(legendShape, className);
                        }
                        else {
                            this.addSvgClass(legendShape, className);
                            if (className.indexOf('highlight') > 0 && this.chart.highlightColor !== '' && this.chart.highlightColor !== 'transparent' && !ej2_base_3.isNullOrUndefined(this.chart.highlightColor)) {
                                legendShape.setAttribute('stroke', this.chart.highlightColor);
                                Iif (this.styleId.indexOf('highlight') > 0 && this.chart.highlightPattern === 'None') {
                                    legendShape.setAttribute('fill', this.chart.highlightColor);
                                }
                            }
                        }
                    }
                    var legendItemsId = void 0;
                    if (this.rangeColorMappingEnabled()) {
                        for (var i = 0; i < this.chart.rangeColorSettings.length; i++) {
                            legendItemsId = document.getElementById(this.chart.element.id + '_chart_legend_shape_' + i);
                            if (legendShape !== legendItemsId) {
                                this.addSvgClass(legendItemsId, this.unselected);
                            }
                            else if (isLegend === true) {
                                this.addSvgClass(legendItemsId, className);
                            }
                            Iif (elementClassName.indexOf(className) === -1 && isLegend === false) {
                                this.removeSvgClass(legendItemsId, this.unselected);
                            }
                        }
                    }
                    if (isLegend && parentClassName.indexOf(className) > -1) {
                        this.addSvgClass(legendShape, className);
                    }
                }
            }
        };
        Selection.prototype.applyStyles = function (elements) {
            for (var _i = 0, elements_1 = elements; _i < elements_1.length; _i++) {
                var element = elements_1[_i];
                if (element) {
                    this.removeSvgClass(element.parentNode, this.unselected);
                    this.removeSvgClass(element, this.unselected);
                    if (this.chart.series[0].pointColorMapping === 'fill' || this.rangeColorMappingEnabled()) {
                        var className = this.getSelectionClass(element.id);
                        var index = className.indexOf('highlight') > -1 ? parseInt(className.split(this.chart.element.id + '_ej2_chart_highlight_series_')[1], 10) : parseInt(className.split(this.chart.element.id + '_ej2_chart_selection_series_')[1], 10);
                        var patternName = this.styleId.indexOf('highlight') > 0 ? this.chart.highlightPattern : this.chart.selectionPattern;
                        var pattern = void 0;
                        Eif (className.indexOf('highlight') > -1 || className.indexOf('selection') > -1) {
                            pattern = document.getElementById(this.chart.element.id + '_' + patternName + '_' + 'Selection' + '_' + index);
                        }
                        if (element.id.indexOf('legend') === -1 && element.id.indexOf('Group') === -1 && pattern != null) {
                            for (var i = 1; i < pattern.children.length; i++) {
                                pattern.children[i].setAttribute('fill', element.getAttribute('fill'));
                                pattern.children[i].setAttribute('stroke', element.getAttribute('fill'));
                            }
                        }
                    }
                    this.addSvgClass(element, this.getSelectionClass(element.id));
                    if (element.id.indexOf('Group') > 0) {
                        var seriesIndex = this.indexFinder(element.id);
                        for (var i = 0; i < element.children.length; i++) {
                            if (element.children[i].nodeName !== 'defs') {
                                this.stopElementAnimation(element.children[i], seriesIndex.series);
                            }
                        }
                    }
                    Iif (this.styleId.indexOf('highlight') > 0 && this.chart.highlightColor !== '' && !ej2_base_3.isNullOrUndefined(this.chart.highlightColor) && this.chart.highlightPattern === 'None' && this.chart.highlightColor !== 'transparent') {
                        if (element.id.indexOf('Group') > 0) {
                            for (var i = 0; i < element.children.length; i++) {
                                element.children[i].setAttribute('fill', this.chart.highlightColor);
                            }
                        }
                        else {
                            element.setAttribute('fill', this.chart.highlightColor);
                        }
                    }
                }
            }
        };
        Selection.prototype.getSelectionClass = function (id) {
            return this.generateStyle(this.control.visibleSeries[this.indexFinder(id).series]);
        };
        Selection.prototype.removeStyles = function (elements) {
            for (var _i = 0, elements_2 = elements; _i < elements_2.length; _i++) {
                var element = elements_2[_i];
                if (element) {
                    this.removeSvgClass(element, this.getSelectionClass(element.id));
                    if (this.chart.highlightPattern === 'None' && this.chart.highlightColor !== '' && !ej2_base_3.isNullOrUndefined(this.chart.highlightColor) && this.chart.highlightColor !== 'transparent') {
                        if (element.id.indexOf('Group') > 0) {
                            for (var i = 0; i < element.children.length; i++) {
                                element.children[i].setAttribute('fill', this.control.visibleSeries[this.indexFinder(element.id).series].interior);
                            }
                        }
                        else {
                            element.setAttribute('fill', this.control.visibleSeries[this.indexFinder(element.id).series].interior);
                        }
                    }
                }
            }
        };
        Selection.prototype.addOrRemoveIndex = function (indexes, index, isAdd) {
            for (var i = 0; i < indexes.length; i++) {
                if (this.toEquals(indexes[i], index, this.isSeriesMode)) {
                    indexes.splice(i, 1);
                    i--;
                }
            }
            if (isAdd) {
                indexes.push(index);
            }
        };
        Selection.prototype.toEquals = function (first, second, checkSeriesOnly) {
            return ((first.series === second.series || (this.currentMode === 'Cluster' && !checkSeriesOnly))
                && (checkSeriesOnly || (first.point === second.point)));
        };
        Selection.prototype.redrawSelection = function (chart, oldMode, chartRedraw) {
            this.isSeriesMode = oldMode === 'Series';
            if (!ej2_base_3.isNullOrUndefined(oldMode)) {
                if (oldMode.indexOf('Drag') !== -1 || oldMode === 'Lasso' || chartRedraw) {
                    chart.isRedrawSelection = false;
                }
                else {
                    chart.isRedrawSelection = true;
                }
            }
            var selectedDataIndexes = ej2_base_3.extend([], this.selectedDataIndexes, null, true);
            var highlightDataIndexes = ej2_base_3.extend([], this.highlightDataIndexes, null, true);
            Iif (this.styleId.indexOf('highlight') > 0 && highlightDataIndexes.length > 0) {
                this.removeSelectedElements(chart, this.highlightDataIndexes, chart.series);
                selectedDataIndexes = highlightDataIndexes;
            }
            else {
                this.removeSelectedElements(chart, this.selectedDataIndexes, chart.series);
            }
            this.blurEffect(chart.element.id, chart.visibleSeries, false);
            this.selectDataIndex(chart, selectedDataIndexes);
        };
        Selection.prototype.legendSelection = function (chart, series, targetElement, eventType) {
            if (eventType === 'mousemove') {
                if (targetElement.id.indexOf('text') > 1) {
                    targetElement = helper_1.getElement(targetElement.id.replace('text', 'shape'));
                }
                Iif (targetElement.id.indexOf('marker') > 1) {
                    targetElement = helper_1.getElement(targetElement.id.replace('_marker', ''));
                }
                Eif (targetElement.id.indexOf('g') > 1) {
                    targetElement = helper_1.getElement(targetElement.id.replace('_g_', '_shape_'));
                }
                Iif (targetElement.hasAttribute('class') && (targetElement.getAttribute('class').indexOf('highlight') > -1 ||
                    targetElement.getAttribute('class').indexOf('selection') > -1)) {
                    return;
                }
                this.currentMode = this.chart.highlightMode;
            }
            var isPreSelected = this.isAlreadySelected(targetElement, eventType);
            Eif (isPreSelected) {
                var seriesStyle = this.generateStyle(chart.visibleSeries[series]);
                var selectedElements = (document.querySelectorAll('.' + seriesStyle));
                this.isSeriesMode = this.currentMode === 'Series';
                var isBlurEffectNeeded = true;
                if (selectedElements.length > 0) {
                    this.removeSelection(chart, series, selectedElements, seriesStyle, isBlurEffectNeeded);
                }
                else {
                    for (var _i = 0, _a = chart.visibleSeries; _i < _a.length; _i++) {
                        var element = _a[_i];
                        if (element.index !== series && !chart.isMultiSelect) {
                            seriesStyle = this.generateStyle(chart.visibleSeries[element.index]);
                            selectedElements = document.querySelectorAll('.' + seriesStyle);
                            this.removeSelection(chart, series, selectedElements, seriesStyle, isBlurEffectNeeded);
                        }
                    }
                    var seriesElements = [];
                    if (this.rangeColorMappingEnabled()) {
                        for (var i = 0, a = chart.visibleSeries[0].seriesElement.children; i < a.length; i++) {
                            var point = a[i];
                            if (targetElement.getAttribute('fill') === point.getAttribute('fill')) {
                                seriesElements.push(point);
                            }
                        }
                        for (var _b = 0, seriesElements_1 = seriesElements; _b < seriesElements_1.length; _b++) {
                            var element = seriesElements_1[_b];
                            Iif (ej2_base_3.isNullOrUndefined(element)) {
                                return;
                            }
                            this.checkSelectionElements(element, seriesStyle, false, true, series);
                        }
                    }
                    else {
                        Eif (chart.visibleSeries[series].visible) {
                            seriesElements = this.getSeriesElements(chart.visibleSeries[series]);
                            for (var _c = 0, seriesElements_2 = seriesElements; _c < seriesElements_2.length; _c++) {
                                var seriesElement = seriesElements_2[_c];
                                Iif (ej2_base_3.isNullOrUndefined(seriesElement)) {
                                    return;
                                }
                                this.checkSelectionElements(seriesElement, seriesStyle, false, true, series);
                            }
                        }
                    }
                    this.isSeriesMode = true;
                    this.selection(chart, new base_1.Index(series, NaN), seriesElements);
                    this.isSeriesMode = chart.selectionMode === 'Series';
                    this.blurEffect(chart.element.id, chart.visibleSeries, true, series);
                }
            }
        };
        Selection.prototype.rangeColorMappingEnabled = function () {
            if ((this.chart.rangeColorSettings && this.chart.rangeColorSettings.length > 0 && this.chart.visibleSeries.length === 1 &&
                this.chart.rangeColorSettings[0].colors.length > 0 &&
                (this.chart.series[0].type === 'Column' || this.chart.series[0].type === 'Bar' ||
                    this.chart.series[0].type === 'Scatter' || this.chart.series[0].type === 'Bubble'))) {
                return true;
            }
            else {
                return false;
            }
        };
        Selection.prototype.removeSelection = function (chart, series, selectedElements, seriesStyle, isBlurEffectNeeded) {
            if (selectedElements.length > 0) {
                var elements = [];
                for (var i = 0; i < selectedElements.length; i++) {
                    elements.push(selectedElements[i]);
                }
                this.removeStyles(elements);
                this.isSeriesMode = true;
                this.addOrRemoveIndex(this.selectedDataIndexes, new base_1.Index(series, NaN));
                for (var _i = 0, _a = chart.visibleSeries; _i < _a.length; _i++) {
                    var value = _a[_i];
                    seriesStyle = this.generateStyle(value);
                    if (document.querySelectorAll('.' + seriesStyle).length > 0) {
                        for (var _b = 0, elements_3 = elements; _b < elements_3.length; _b++) {
                            var element = elements_3[_b];
                            this.checkSelectionElements(element, seriesStyle, true, true, series);
                        }
                        isBlurEffectNeeded = false;
                        break;
                    }
                }
                if (isBlurEffectNeeded) {
                    this.isSeriesMode = chart.selectionMode === 'Series';
                    this.blurEffect(chart.element.id, chart.visibleSeries);
                }
            }
        };
        Selection.prototype.getSeriesElements = function (series) {
            var seriesElements = [series.seriesElement];
            if (series.marker.visible && series.type !== 'Scatter' && series.type !== 'Bubble' && !series.isRectSeries) {
                seriesElements.push(series.symbolElement);
            }
            else if (series.marker.visible && series.isRectSeries) {
                seriesElements.push(series.symbolElement);
            }
            return seriesElements;
        };
        Selection.prototype.indexFinder = function (id) {
            var ids = ['NaN', 'NaN'];
            if (id.indexOf('SeriesGroup') > -1) {
                ids = id.split('SeriesGroup');
                ids[0] = ids[1];
            }
            else if (id.indexOf('SymbolGroup') > -1) {
                ids = id.split('SymbolGroup');
                ids[0] = ids[1];
            }
            else if (id.indexOf('_Point_') > -1) {
                ids = id.split('_Series_')[1].split('_Point_');
            }
            else if (id.indexOf('_border_') > -1) {
                ids[0] = id.split('_border_')[1];
            }
            else if (id.indexOf('_Series_') > -1) {
                ids[0] = id.split('_Series_')[1];
            }
            else Eif (id.indexOf('_chart_legend_shape_') > -1) {
                ids = id.split('_chart_legend_shape_');
                ids[0] = ids[1];
            }
            return new base_1.Index(parseInt(ids[0], 10), parseInt(ids[1], 10));
        };
        Selection.prototype.calculateDragSelectedElements = function (chart, dragRect, isClose) {
            this.removeSelectedElements(chart, this.selectedDataIndexes, chart.series);
            var isLasso = chart.selectionMode === 'Lasso';
            var rect = new ej2_svg_base_1.Rect(dragRect.x, dragRect.y, dragRect.width, dragRect.height);
            var axisOffset = new helper_1.ChartLocation(chart.chartAxisLayoutPanel.seriesClipRect.x, chart.chartAxisLayoutPanel.seriesClipRect.y);
            this.removeOffset(rect, axisOffset);
            var points;
            var index;
            var selectedPointValues = [];
            var selectedSeriesValues = [];
            this.isSeriesMode = false;
            var isDragResize = (chart.allowMultiSelection) && (this.rectGrabbing || this.resizing);
            this.rectPoints = this.dragRectArray[isDragResize ? this.targetIndex : this.count] =
                new ej2_svg_base_1.Rect(dragRect.x, dragRect.y, dragRect.width, dragRect.height);
            if (dragRect.width && dragRect.height && !isClose) {
                var rt = new ej2_svg_base_1.Rect(dragRect.x, dragRect.y, dragRect.width, dragRect.height);
                this.removeOffset(rt, axisOffset);
                this.filterArray[isDragResize ? this.targetIndex : this.count] = rt;
            }
            var _loop_1 = function (series) {
                Eif (series.visible) {
                    points = series.points;
                    selectedPointValues = [];
                    var xAxisOffset_1;
                    var yAxisOffset_1;
                    if ((chart.isTransposed || series.type.indexOf('Bar') !== -1) &&
                        !(chart.isTransposed && series.type.indexOf('Bar') !== -1)) {
                        xAxisOffset_1 = series.xAxis.rect.y - axisOffset.y;
                        yAxisOffset_1 = series.yAxis.rect.x - axisOffset.x;
                    }
                    else {
                        xAxisOffset_1 = series.xAxis.rect.x - axisOffset.x;
                        yAxisOffset_1 = series.yAxis.rect.y - axisOffset.y;
                    }
                    for (var j = 0; j < points.length; j++) {
                        var yValue = (series.type !== 'RangeArea' || series.type.indexOf('SplineRangeArea') > -1 || series.type.indexOf('RangeStepArea') > -1) ? points[j].yValue :
                            points[j].regions[0].y;
                        var isCurrentPoint = void 0;
                        var selectedPointX = points[j].xValue;
                        if (chart.primaryXAxis.valueType === 'Category') {
                            selectedPointX = points[j].x.toLocaleString();
                        }
                        else Iif (chart.primaryXAxis.valueType === 'DateTime') {
                            selectedPointX = new Date(points[j].xValue);
                        }
                        if (series.type === 'BoxAndWhisker') {
                            isCurrentPoint = points[j].regions.some(function (region) {
                                return helper_1.withInBounds(region.x + xAxisOffset_1, region.y + yAxisOffset_1, rect);
                            });
                        }
                        else {
                            Iif (chart.selectionMode === 'Lasso') {
                                isCurrentPoint = points[j].isSelect;
                            }
                            else {
                                isCurrentPoint = (chart.allowMultiSelection) ?
                                    this_1.isPointSelect(points[j], xAxisOffset_1, yAxisOffset_1, this_1.filterArray) :
                                    points[j].symbolLocations.some(function (location) {
                                        return location && helper_1.withInBounds(location.x + xAxisOffset_1, location.y + yAxisOffset_1, rect);
                                    });
                            }
                        }
                        if (isCurrentPoint && series.category !== 'Indicator') {
                            index = new base_1.Index(series.index, points[j].index);
                            this_1.selection(chart, index, this_1.findElements(chart, series, index, '', !series.isRectSeries ? series.marker.visible : false));
                            selectedPointValues.push({ x: selectedPointX, y: yValue });
                        }
                        if (isCurrentPoint && (series.type === 'RangeArea' || series.type === 'SplineRangeArea' || series.type === 'RangeStepArea')) {
                            selectedPointValues.push({ x: selectedPointX, y: points[j].regions[0].y });
                        }
                    }
                    selectedSeriesValues.push(selectedPointValues);
                }
            };
            var this_1 = this;
            for (var _i = 0, _a = chart.visibleSeries; _i < _a.length; _i++) {
                var series = _a[_i];
                _loop_1(series);
            }
            this.blurEffect(chart.element.id, chart.visibleSeries);
            var x = isLasso ? chart.mouseDownX : (dragRect.x + dragRect.width);
            var y = isLasso ? chart.mouseDownY : dragRect.y;
            if (!isClose) {
                this.createCloseButton(x, y);
            }
            var args = {
                name: constants_1.dragComplete,
                selectedDataValues: selectedSeriesValues,
                cancel: false
            };
            chart.trigger(constants_1.dragComplete, args);
        };
        Selection.prototype.removeOffset = function (rect, clip) {
            rect.x -= clip.x;
            rect.y -= clip.y;
        };
        Selection.prototype.isPointSelect = function (points, xAxisOffset, yAxisOffset, rectCollection) {
            var location = points.symbolLocations[0];
            for (var _i = 0, rectCollection_1 = rectCollection; _i < rectCollection_1.length; _i++) {
                var rect = rectCollection_1[_i];
                if (rect && location && helper_1.withInBounds(location.x + xAxisOffset, location.y + yAxisOffset, rect)) {
                    return true;
                }
            }
            return false;
        };
        Selection.prototype.drawDraggingRect = function (chart, dragRect) {
            var cartesianLayout = chart.chartAxisLayoutPanel.seriesClipRect;
            var border = chart.chartArea.border.width;
            var rectFill = chart.themeStyle.selectionRectFill;
            var rectStroke = chart.themeStyle.selectionRectStroke;
            var isLasso = chart.selectionMode === 'Lasso';
            if (this.isdrawRect) {
                cartesianLayout.x = cartesianLayout.x - border / 2;
                cartesianLayout.y = cartesianLayout.y - border / 2;
                cartesianLayout.width = cartesianLayout.width + border;
                cartesianLayout.height = cartesianLayout.height + border;
                this.isdrawRect = false;
            }
            switch (chart.selectionMode) {
                case 'DragX':
                    dragRect.y = cartesianLayout.y;
                    dragRect.height = cartesianLayout.height;
                    break;
                case 'DragY':
                    dragRect.x = cartesianLayout.x;
                    dragRect.width = cartesianLayout.width;
                    break;
            }
            Iif ((dragRect.width < 5 || dragRect.height < 5) && !isLasso) {
                return null;
            }
            var isDragMode = chart.selectionMode.indexOf('Drag') > -1 || chart.selectionMode === 'Lasso';
            if ((chart.allowMultiSelection) && isDragMode) {
                var element = void 0;
                var dragGroup = void 0;
                var multiGroup = helper_1.getElement(this.multiRectGroup);
                if (!multiGroup) {
                    multiGroup = chart.svgRenderer.createGroup({ id: this.multiRectGroup });
                    chart.svgObject.appendChild(multiGroup);
                }
                Iif (this.rectGrabbing || this.resizing) {
                    var rectElement = helper_1.getElement(this.draggedRect + this.targetIndex);
                    if (rectElement.nextSibling) {
                        ej2_base_2.remove(rectElement.nextSibling);
                    }
                    this.setAttributes(rectElement, dragRect);
                }
                else Eif (!helper_1.getElement(this.draggedRectGroup + this.count)) {
                    dragGroup = chart.svgRenderer.createGroup({ id: this.draggedRectGroup + this.count });
                    var svgElement = document.getElementById(chart.element.id + '_series_svg');
                    Iif (chart.enableCanvas) {
                        svgElement.appendChild(dragGroup);
                    }
                    else {
                        multiGroup.appendChild(dragGroup);
                    }
                }
                if (!(chart.selectionMode === 'Lasso')) {
                    element = chart.svgRenderer.drawRectangle(new helper_1.RectOption(this.draggedRect + this.count, rectFill, { color: rectStroke, width: 1 }, 1, dragRect, 0, 0, '', chart.theme.indexOf('Fluent2') < 1 ? '3' : ''));
                    element.style.cursor = 'move';
                }
                else {
                    element = chart.svgRenderer.drawPath(new ej2_svg_base_1.PathOption(this.lassoPath + this.count, rectFill, 3, rectStroke, 1, '', this.path));
                }
                Iif (!dragGroup && !this.rectGrabbing && !this.resizing) {
                    helper_1.getElement(this.draggedRectGroup + this.count).appendChild(element);
                }
                else Eif (!this.rectGrabbing && !this.resizing) {
                    dragGroup.appendChild(element);
                }
            }
            else {
                var element = isLasso ?
                    helper_1.getElement(this.lassoPath) : helper_1.getElement(this.draggedRect);
                if (this.closeIcon) {
                    helper_1.removeElement(this.closeIconId);
                }
                if (element) {
                    Iif (isLasso) {
                        element.setAttribute('d', this.path);
                    }
                    else {
                        this.setAttributes(element, dragRect);
                    }
                }
                else {
                    var dragGroup = chart.svgRenderer.createGroup({ id: this.draggedRectGroup });
                    var svgElement = document.getElementById(chart.element.id + '_series_svg');
                    Iif (chart.enableCanvas) {
                        svgElement.appendChild(dragGroup);
                    }
                    else {
                        chart.svgObject.appendChild(dragGroup);
                    }
                    if (!(chart.selectionMode === 'Lasso')) {
                        element = chart.svgRenderer.drawRectangle(new helper_1.RectOption(this.draggedRect, rectFill, { color: rectStroke, width: 1 }, 1, dragRect, 0, 0, '', chart.theme.indexOf('Fluent2') < 1 ? '3' : ''));
                    }
                    else {
                        element = chart.svgRenderer.drawPath(new ej2_svg_base_1.PathOption(this.lassoPath, rectFill, 3, rectStroke, 1, '', this.path));
                    }
                    dragGroup.appendChild(element);
                }
            }
        };
        Selection.prototype.getIndex = function (id) {
            var i;
            for (i = id.length - 1; i > 0; i--) {
                var x = Number(id[i]);
                if (!isNaN(x)) {
                    continue;
                }
                else {
                    break;
                }
            }
            var index = +id.substr(i + 1, id.length - 1);
            return index;
        };
        Selection.prototype.createCloseButton = function (x, y) {
            var isMultiDrag = this.chart.allowMultiSelection;
            var circleStroke = this.chart.themeStyle.selectionCircleStroke;
            var isDrag = this.rectGrabbing || this.resizing;
            var closeIcon = this.chart.svgRenderer.createGroup({
                id: this.closeIconId + (isMultiDrag ? (isDrag ? this.targetIndex : this.count) : ''),
                style: 'cursor:pointer; visibility: visible;'
            });
            closeIcon.appendChild(this.chart.svgRenderer.drawCircle(new helper_1.CircleOption(this.closeIconId + '_circle' + (isMultiDrag ? (isDrag ? this.targetIndex : this.count) : ''), '#FFFFFF', { color: circleStroke, width: 1 }, 1, x, y, 10)));
            var direction = 'M ' + (x - 4) + ' ' + (y - 4) + ' L ' + (x + 4) + ' ' + (y + 4) + ' M ' + (x - 4) + ' ' + (y + 4) +
                ' L ' + (x + 4) + ' ' + (y - 4);
            closeIcon.appendChild(this.chart.svgRenderer.drawPath({
                id: this.closeIconId + '_cross' +
                    (isMultiDrag ? (isDrag ? this.targetIndex : this.count) : ''), d: direction,
                stroke: circleStroke, 'stroke-width': 2, fill: circleStroke
            }));
            this.closeIcon = closeIcon;
            var pathElement = helper_1.getElement(this.draggedRectGroup + (isMultiDrag ? (isDrag ? this.targetIndex : this.count) : ''));
            Eif (pathElement) {
                pathElement.appendChild(closeIcon);
            }
        };
        Selection.prototype.removeDraggedElements = function (chart, targetElement, eventType) {
            if ((targetElement.id && targetElement.id.indexOf(this.closeIconId) > -1) && (eventType.indexOf('move') === -1)) {
                var isSelectedvalues = true;
                if ((chart.allowMultiSelection)) {
                    var index = this.getIndex(targetElement.id);
                    var multiRectGroupElement = helper_1.getElement(this.multiRectGroup);
                    ej2_base_2.remove(helper_1.getElement(this.draggedRectGroup + index));
                    this.dragRectArray[index] = null;
                    this.filterArray[index] = null;
                    this.totalSelectedPoints[index] = null;
                    Eif (multiRectGroupElement && multiRectGroupElement.childElementCount === 0) {
                        helper_1.removeElement(multiRectGroupElement);
                        this.dragRectArray = [];
                        this.filterArray = [];
                        this.totalSelectedPoints = [];
                    }
                    Iif (this.currentMode === 'Lasso') {
                        if (this.multiDataIndexes[index] != null) {
                            for (var i = 0; i < this.multiDataIndexes[index].length; i++) {
                                this.multiDataIndexes[index][i].isSelect = false;
                            }
                        }
                        this.multiDataIndexes[index] = null;
                        for (var j = 0; j < this.multiDataIndexes.length; j++) {
                            if (this.multiDataIndexes[j] != null) {
                                isSelectedvalues = false;
                                for (var k = 0; k < this.multiDataIndexes[j].length; k++) {
                                    this.multiDataIndexes[j][k].isSelect = true;
                                }
                            }
                        }
                        this.calculateDragSelectedElements(chart, this.dragRect, true);
                    }
                    else Iif (this.filterArray.length) {
                        for (var i = 0; i < this.filterArray.length; i++) {
                            if (this.filterArray[i]) {
                                isSelectedvalues = false;
                                this.calculateDragSelectedElements(chart, this.filterArray[i], true);
                            }
                        }
                    }
                    else {
                        this.calculateDragSelectedElements(chart, new ej2_svg_base_1.Rect(0, 0, 0, 0), true);
                    }
                }
                else {
                    ej2_base_2.remove(helper_1.getElement(this.draggedRectGroup));
                    this.removeSelectedElements(chart, this.selectedDataIndexes, chart.series);
                }
                this.blurEffect(chart.element.id, chart.visibleSeries);
                this.changeCursorStyle(false, chart.svgObject, 'auto');
                Eif (!(chart.allowMultiSelection) || isSelectedvalues) {
                    this.rectPoints = null;
                }
            }
        };
        Selection.prototype.resizingSelectionRect = function (chart, location, tapped, target) {
            var rect;
            Iif (((chart.allowMultiSelection) && (target.id.indexOf('_ej2_drag_rect') > -1)) ||
                this.dragRectArray[this.targetIndex]) {
                if (target.id.indexOf('_ej2_drag_rect') > -1) {
                    this.targetIndex = this.getIndex(target.id);
                }
                var r = this.dragRectArray[this.targetIndex];
                rect = new ej2_svg_base_1.Rect(r.x, r.y, r.width, r.height);
            }
            Eif (!(chart.allowMultiSelection)) {
                rect = new ej2_svg_base_1.Rect(this.rectPoints.x, this.rectPoints.y, this.rectPoints.width, this.rectPoints.height);
            }
            Eif (rect) {
                var resize = this.findResizeMode(chart.svgObject, rect, location);
                if (this.resizing) {
                    rect = helper_1.getDraggedRectLocation(rect.x, rect.y, (rect.x + rect.width), (rect.y + rect.height), chart.chartAxisLayoutPanel.seriesClipRect);
                    this.drawDraggingRect(chart, rect);
                    this.dragRect = rect;
                }
                if (tapped) {
                    this.resizing = resize;
                }
            }
            else {
                return;
            }
        };
        Selection.prototype.findResizeMode = function (chartSvgObject, rect, location) {
            var cursorStyle = 'se-resize';
            var resize = false;
            if (!this.resizing) {
                var resizeEdges = [new ej2_svg_base_1.Rect(rect.x, (rect.y), rect.width - 5, 5),
                    new ej2_svg_base_1.Rect((rect.x), rect.y, 5, rect.height),
                    new ej2_svg_base_1.Rect(rect.x, (rect.y + rect.height - 5), rect.width - 5, 5),
                    new ej2_svg_base_1.Rect((rect.x + rect.width - 5), rect.y + 5, 5, rect.height - 15),
                    new ej2_svg_base_1.Rect((rect.x + rect.width - 10), (rect.y + rect.height - 10), 10, 10)];
                for (var i = 0; i < resizeEdges.length; i++) {
                    if (helper_1.withInBounds(location.x, location.y, resizeEdges[i])) {
                        cursorStyle = (i === 4) ? cursorStyle : (i % 2 === 0) ? 'ns-resize' : 'ew-resize';
                        resize = true;
                        this.resizeMode = i;
                        break;
                    }
                }
            }
            else {
                var x = rect.x;
                var y = rect.y;
                var width = (location.x - x);
                var height = (location.y - y);
                switch (this.resizeMode) {
                    case 0:
                        height = Math.abs((rect.height + rect.y) - location.y);
                        rect.y = Math.min((rect.height + rect.y), location.y);
                        rect.height = height;
                        break;
                    case 1:
                        width = Math.abs((rect.width + rect.x) - location.x);
                        rect.x = Math.min((rect.width + rect.x), location.x);
                        rect.width = width;
                        break;
                    case 2:
                        rect.height = Math.abs(height);
                        rect.y = Math.min(location.y, y);
                        break;
                    case 3:
                        rect.width = Math.abs(width);
                        rect.x = Math.min(location.x, x);
                        break;
                    case 4:
                        rect.width = Math.abs(width);
                        rect.height = Math.abs(height);
                        rect.x = Math.min(location.x, x);
                        rect.y = Math.min(location.y, y);
                        break;
                }
            }
            Eif (this.currentMode !== 'Lasso') {
                this.changeCursorStyle(resize, helper_1.getElement((this.chart.allowMultiSelection) ? this.draggedRect +
                    this.targetIndex : this.draggedRect), cursorStyle);
            }
            this.changeCursorStyle(resize, chartSvgObject, cursorStyle);
            return resize;
        };
        Selection.prototype.changeCursorStyle = function (isResize, rectelement, cursorStyle) {
            cursorStyle = isResize ? cursorStyle : (this.control.svgObject === rectelement) ? 'auto' : 'move';
            Eif (rectelement) {
                rectelement.style.cursor = cursorStyle;
            }
        };
        Selection.prototype.removeSelectedElements = function (chart, index, seriesCollection) {
            index = chart.isRedrawSelection ? index : index.splice(0, index.length);
            var seriesElements;
            for (var _i = 0, seriesCollection_1 = seriesCollection; _i < seriesCollection_1.length; _i++) {
                var series = seriesCollection_1[_i];
                Eif (series.visible) {
                    seriesElements = this.getSeriesElements(series);
                    this.removeStyles(seriesElements);
                    for (var _a = 0, seriesElements_3 = seriesElements; _a < seriesElements_3.length; _a++) {
                        var seriesElement = seriesElements_3[_a];
                        this.removeStyles(this.getChildren(seriesElement));
                    }
                }
            }
        };
        Selection.prototype.setAttributes = function (ele, object) {
            var keys = Object.keys(object);
            for (var _i = 0, keys_1 = keys; _i < keys_1.length; _i++) {
                var key = keys_1[_i];
                ele.setAttribute(key, object[key]);
            }
        };
        Selection.prototype.draggedRectMoved = function (chart, grabbedPoint, doDrawing) {
            var rect;
            Iif ((this.resizing || this.rectGrabbing) && (chart.allowMultiSelection)) {
                var r = this.dragRectArray[this.targetIndex];
                rect = new ej2_svg_base_1.Rect(r.x, r.y, r.width, r.height);
            }
            else {
                rect = new ej2_svg_base_1.Rect(this.rectPoints.x, this.rectPoints.y, this.rectPoints.width, this.rectPoints.height);
            }
            rect.x -= (grabbedPoint.x - chart.mouseX);
            rect.y -= (grabbedPoint.y - chart.mouseY);
            rect = helper_1.getDraggedRectLocation(rect.x, rect.y, rect.x + rect.width, rect.height + rect.y, chart.chartAxisLayoutPanel.seriesClipRect);
            if (doDrawing) {
                this.drawDraggingRect(chart, rect);
            }
            else {
                this.calculateDragSelectedElements(chart, rect);
            }
        };
        Selection.prototype.mouseLeave = function (event) {
            this.completeSelection(event.target, event.type);
        };
        Selection.prototype.completeSelection = function (target, eventType) {
            var chart = this.chart;
            if (chart.selectionMode === 'None') {
                return;
            }
            this.currentMode = chart.selectionMode;
            if ((this.dragging || this.resizing) && this.dragRect.width > 5 && this.dragRect.height > 5) {
                this.calculateDragSelectedElements(chart, this.dragRect);
            }
            else if (!(chart.allowMultiSelection) && this.rectGrabbing &&
                this.rectPoints.width && this.rectPoints.height) {
                this.draggedRectMoved(chart, this.dragRect);
            }
            else Iif (this.rectGrabbing && this.dragRectArray[this.targetIndex].width && this.dragRectArray[this.targetIndex].height) {
                this.draggedRectMoved(chart, this.dragRect);
            }
            if (chart.selectionMode === 'Lasso' && this.dragging && this.path) {
                Iif (this.path.indexOf('L') !== -1) {
                    if (!(chart.allowMultiSelection)) {
                        helper_1.getElement(this.lassoPath).setAttribute('d', this.path + 'Z');
                        this.pointChecking(helper_1.getElement(this.lassoPath));
                    }
                    else if (helper_1.getElement(this.lassoPath + this.count)) {
                        helper_1.getElement(this.lassoPath + this.count).setAttribute('d', this.path + 'Z');
                        this.pointChecking(helper_1.getElement(this.lassoPath + this.count));
                    }
                    if (this.dragging || this.resizing) {
                        this.calculateDragSelectedElements(chart, this.dragRect);
                    }
                }
            }
            this.dragging = false;
            this.rectGrabbing = false;
            this.resizing = false;
            this.removeDraggedElements(chart, target, eventType);
        };
        Selection.prototype.getDragRect = function (chart, seriesClipRect) {
            return helper_1.getDraggedRectLocation(chart.mouseDownX, chart.mouseDownY, chart.mouseX, chart.mouseY, seriesClipRect);
        };
        Selection.prototype.dragStart = function (chart, seriesClipRect, mouseDownX, mouseDownY, event) {
            var mode = chart.selectionMode;
            this.currentMode = chart.selectionMode;
            this.dragging = (mode.indexOf('Drag') > -1 || mode === 'Lasso') && (chart.isDoubleTap || !chart.isTouch) &&
                chart.chartAreaType !== 'PolarRadar';
            var target = event.target;
            this.path = undefined;
            if (this.dragging) {
                this.count = helper_1.getElement(this.multiRectGroup) ? (this.count + 1) : 0;
                this.dragRect = new ej2_svg_base_1.Rect(chart.mouseDownX, chart.mouseDownY, 0, 0);
                if (chart.mouseDownX < seriesClipRect.x || chart.mouseDownX > (seriesClipRect.x + seriesClipRect.width) ||
                    chart.mouseDownY < seriesClipRect.y || chart.mouseDownY > (seriesClipRect.y + seriesClipRect.height)) {
                    this.dragging = false;
                }
            }
            if (mode === 'Lasso') {
                for (var _i = 0, _a = chart.visibleSeries; _i < _a.length; _i++) {
                    var series = _a[_i];
                    Eif (series.visible) {
                        for (var _b = 0, _c = series.points; _b < _c.length; _b++) {
                            var point = _c[_b];
                            if (!(chart.allowMultiSelection)) {
                                point.isSelect = false;
                            }
                        }
                    }
                }
            }
            if (!(mode === 'Lasso')) {
                if (this.rectPoints && !(chart.allowMultiSelection)) {
                    this.dragRect = new ej2_svg_base_1.Rect(chart.mouseDownX, chart.mouseDownY, 0, 0);
                    this.resizingSelectionRect(chart, new helper_1.ChartLocation(mouseDownX, mouseDownY), true);
                    this.rectGrabbing = helper_1.withInBounds(mouseDownX, mouseDownY, this.rectPoints);
                }
                if ((chart.allowMultiSelection)) {
                    var index = this.getIndex(target.id);
                    this.targetIndex = this.isDragRect(target.id) ? index : undefined;
                    Iif (this.dragRectArray.length && this.isDragRect(target.id)) {
                        this.resizingSelectionRect(chart, new helper_1.ChartLocation(mouseDownX, mouseDownY), true, target);
                        this.rectGrabbing = helper_1.withInBounds(mouseDownX, mouseDownY, this.dragRectArray[index]);
                    }
                }
            }
        };
        Selection.prototype.isDragRect = function (id) {
            return id.indexOf('_ej2_drag_rect') > -1;
        };
        Selection.prototype.mouseMove = function (event) {
            var chart = this.chart;
            var target = event.target;
            var eventType = event.type;
            this.highlightChart(target, eventType);
            if (chart.selectionMode === 'None') {
                return;
            }
            Iif (eventType === 'touchmove' && (ej2_base_1.Browser.isIos || ej2_base_1.Browser.isIos7) && this.dragging && event.preventDefault) {
                event.preventDefault();
            }
            this.selectionAndDrag(chart, target, eventType);
        };
        Selection.prototype.highlightChart = function (target, eventType) {
            if (this.chart.highlightMode !== 'None' || this.chart.legendSettings.enableHighlight) {
                Eif (!ej2_base_3.isNullOrUndefined(target)) {
                    if (target.id.indexOf('_legend_text') > 1) {
                        target = helper_1.getElement(target.id.replace('text', 'shape'));
                    }
                    if ((target).hasAttribute('class') && ((target).getAttribute('class').indexOf('highlight') > -1 ||
                        target.getAttribute('class').indexOf('selection') > -1)) {
                        return;
                    }
                    this.calculateSelectedElements(target, eventType);
                    if (this.chart.highlightModule.highlightDataIndexes && this.chart.highlightModule.highlightDataIndexes.length > 0 &&
                        target.id.indexOf('_chart_legend_') === -1 && target.id.indexOf('_Series_') === -1) {
                        this.removeLegendHighlightStyles();
                    }
                    else Iif (this.chart.highlightModule.highlightDataIndexes && this.chart.highlightModule.highlightDataIndexes.length > 0 &&
                        target.id.indexOf('_chart_legend_') === -1 && target.id.indexOf('_Series_') > -1 && this.chart.tooltip && this.chart.tooltip.enableHighlight) {
                        this.removeLegendHighlightStyles(true);
                    }
                }
                return;
            }
        };
        Selection.prototype.selectionAndDrag = function (chart, target, eventType) {
            var insideMoving = helper_1.withInBounds(chart.mouseX, chart.mouseY, chart.chartAxisLayoutPanel.seriesClipRect);
            if (insideMoving && !this.chart.enableCanvas) {
                if (this.rectGrabbing && !this.resizing) {
                    this.draggedRectMoved(chart, this.dragRect, true);
                }
                else if (this.dragging && !this.resizing) {
                    if (chart.selectionMode === 'Lasso') {
                        this.getPath(chart.mouseDownX, chart.mouseDownY, chart.mouseX, chart.mouseY);
                        this.drawDraggingRect(chart, this.dragRect);
                    }
                    else {
                        this.dragRect = this.getDragRect(chart, chart.chartAxisLayoutPanel.seriesClipRect);
                        this.drawDraggingRect(chart, this.dragRect);
                    }
                }
                if (this.rectPoints && !(chart.allowMultiSelection)) {
                    this.resizingSelectionRect(chart, new helper_1.ChartLocation(chart.mouseX, chart.mouseY), null, target);
                }
                else Iif (((chart.allowMultiSelection) && !this.dragging) || this.resizing) {
                    this.resizingSelectionRect(chart, new helper_1.ChartLocation(chart.mouseX, chart.mouseY), null, target);
                }
            }
            else {
                this.completeSelection(target, eventType);
            }
        };
        Selection.prototype.removeLegendHighlightStyles = function (tooltipHighlight) {
            this.chart.highlightModule.highlightDataIndexes = [];
            var elementCollection;
            for (var i = 0; i < this.chart.visibleSeries.length; i++) {
                elementCollection = document.getElementsByClassName(this.generateStyle(this.chart.visibleSeries[i]));
                Eif (this.selectedDataIndexes.length === 0) {
                    elementCollection = document.getElementsByClassName(this.generateStyle(this.chart.visibleSeries[i]));
                    while (elementCollection.length > 0) {
                        var element = elementCollection[0];
                        Eif (element) {
                            this.removeSvgClass(element, element.getAttribute('class'));
                            Iif (element.id.indexOf('Group') > 0 && !this.chart.visibleSeries[i].isRectSeries) {
                                var seriesIndex = this.indexFinder(element.id);
                                for (var j = 0; j < element.children.length; j++) {
                                    if (element.children[j].nodeName !== 'defs') {
                                        this.highlightAnimation(element.children[j], seriesIndex.series, tooltipHighlight ? 0 : 700, 0.3, !tooltipHighlight);
                                    }
                                }
                            }
                        }
                    }
                    elementCollection = document.getElementsByClassName(this.unselected);
                    while (elementCollection.length > 0) {
                        var element = elementCollection[0];
                        Eif (element) {
                            this.removeSvgClass(element, element.getAttribute('class'));
                            if (element.id !== '') {
                                this.highlightAnimation(element, this.chart.series.length === 1 ? 0 : this.indexFinder(element.id).series, tooltipHighlight ? 0 : 700, 0.3);
                            }
                        }
                    }
                }
                else {
                    elementCollection = document.getElementsByClassName(this.generateStyle(this.chart.visibleSeries[i]));
                    while (elementCollection.length > 0) {
                        var element = elementCollection[0];
                        if (element) {
                            this.removeSvgClass(element, element.getAttribute('class'));
                            this.addSvgClass(element, this.unselected);
                        }
                    }
                }
            }
        };
        Selection.prototype.getPath = function (startX, startY, endX, endY) {
            Eif (this.dragging) {
                Iif (this.path) {
                    this.path = this.path + ' L' + endX + ' ' + endY;
                }
                else {
                    this.path = 'M ' + startX + ' ' + startY;
                }
            }
        };
        Selection.prototype.highlightAnimation = function (element, index, duration, startOpacity, strokeWidth) {
            var endOpacity;
            var endWidth;
            var startWidth = parseFloat(this.chart.visibleSeries[index].width.toString()) + 1;
            Iif (strokeWidth) {
                if (element.id.indexOf('border') !== -1 && this.chart.visibleSeries[index].border.width) {
                    endWidth = parseFloat(this.chart.visibleSeries[index].border.width.toString());
                }
                else if (element.id.indexOf('Symbol') !== -1 && this.chart.visibleSeries[index].marker.border.width) {
                    endWidth = parseFloat(this.chart.visibleSeries[index].marker.border.width.toString());
                }
                else {
                    endWidth = parseFloat(this.chart.visibleSeries[index].width.toString());
                }
            }
            else {
                if (element.id.indexOf('border') !== -1) {
                    endOpacity = 1;
                }
                else if (element.id.indexOf('Symbol') !== -1) {
                    endOpacity = parseFloat(this.chart.visibleSeries[index].marker.opacity.toString());
                }
                else {
                    endOpacity = parseFloat(this.chart.visibleSeries[index].opacity.toString());
                }
                Iif (ej2_base_3.isNullOrUndefined(this.chart.selectionModule) && this.chart.selectionMode === 'None' && this.chart.highlightColor !== '') {
                    startOpacity = 1;
                }
            }
            Eif (endOpacity || (strokeWidth && endWidth && startWidth)) {
                new ej2_base_1.Animation({}).animate(element, {
                    duration: duration,
                    progress: function (args) {
                        element.style.animation = '';
                        var progress = args.timeStamp / args.duration;
                        Iif (strokeWidth) {
                            var currentWidth = startWidth + (endWidth - startWidth) * progress;
                            element.setAttribute('stroke-width', currentWidth.toString());
                        }
                        else {
                            var currentOpacity = startOpacity + (endOpacity - startOpacity) * progress;
                            element.setAttribute('opacity', currentOpacity.toString());
                        }
                    },
                    end: function () {
                        Iif (strokeWidth) {
                            element.setAttribute('stroke-width', endWidth.toString());
                        }
                        else {
                            element.setAttribute('opacity', endOpacity.toString());
                        }
                    }
                });
            }
        };
        Selection.prototype.stopElementAnimation = function (element, index) {
            var endOpacity;
            if (element.id.indexOf('border') !== -1) {
                endOpacity = 1;
            }
            else if (element.id.indexOf('Symbol') !== -1) {
                endOpacity = parseFloat(this.chart.visibleSeries[index].marker.opacity.toString());
            }
            else {
                endOpacity = parseFloat(this.chart.visibleSeries[index].opacity.toString());
            }
            if (element.getAttribute('e-animate')) {
                ej2_base_1.Animation.stop(element);
            }
            element.setAttribute('opacity', endOpacity.toString());
        };
        Selection.prototype.pointChecking = function (path) {
            var _this = this;
            var chart = this.chart;
            var element;
            var svgRect = helper_1.getElement(chart.svgId).getBoundingClientRect();
            var offsetX = chart.chartAxisLayoutPanel.seriesClipRect.x + Math.max(svgRect.left, 0);
            var offsetY = chart.chartAxisLayoutPanel.seriesClipRect.y + Math.max(svgRect.top, 0);
            this.multiDataIndexes[this.count] = [];
            for (var _i = 0, _a = chart.visibleSeries; _i < _a.length; _i++) {
                var series = _a[_i];
                series.points.filter(function (point) {
                    if (point.symbolLocations && point.symbolLocations.length) {
                        element = document.elementFromPoint(point.symbolLocations[0].x + offsetX, point.symbolLocations[0].y + offsetY);
                    }
                    if (element === path) {
                        point.isSelect = true;
                        if ((_this.chart.allowMultiSelection) && _this.currentMode === 'Lasso') {
                            _this.multiDataIndexes[_this.count][_this.seriesIndex] = point;
                            _this.seriesIndex++;
                        }
                    }
                    else if (!(chart.allowMultiSelection)) {
                        point.isSelect = false;
                    }
                });
            }
            this.seriesIndex = 0;
        };
        Selection.prototype.getModuleName = function () {
            return 'Selection';
        };
        Selection.prototype.destroy = function () {
            this.removeEventListener();
        };
        return Selection;
    }(selection_1.BaseSelection));
    exports.Selection = Selection;
});