all files / maps/layers/ navigation-selected-line.js

100% Statements 108/108
96.55% Branches 56/58
100% Functions 7/7
100% Lines 108/108
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   29×   40× 40× 32× 32× 32× 32× 32× 32× 32× 32× 32× 32× 32× 32× 32× 32× 32× 32× 32× 32× 32× 32× 32× 32× 32× 32×     32× 34× 34× 34× 34× 34× 34× 34× 34× 34× 34× 31× 72× 72×     34×     34× 41× 41× 41× 41× 41× 27× 27×     41×     41× 13× 13× 13× 13× 13× 13× 13× 13×   13× 13× 13× 13× 13× 13× 13× 13× 13× 13× 13× 13× 13× 13× 13× 13×   41× 41×         41× 41× 41× 13×     41× 41× 41×   34×     40×   41× 41× 41× 41×   3430×   29×        
define(["require", "exports", "../index", "../utils/helper", "@syncfusion/ej2-base"], function (require, exports, index_1, helper_1, ej2_base_1) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    var NavigationLine = (function () {
        function NavigationLine(maps) {
            this.maps = maps;
        }
        NavigationLine.prototype.renderNavigation = function (layer, factor, layerIndex) {
            var group;
            if (!ej2_base_1.isNullOrUndefined(this.maps)) {
                var navigationEle = void 0;
                var navigation = layer.navigationLineSettings;
                var longitude = void 0;
                var point = [];
                var latitude = void 0;
                var visible = void 0;
                var angle = void 0;
                var width = void 0;
                var color = void 0;
                var dashArray = void 0;
                var pathOption = void 0;
                var direction = void 0;
                var showArrow = void 0;
                var arrowColor = void 0;
                var arrowSize = void 0;
                var arrowSettings = void 0;
                var arrowPosition = void 0;
                var startArrow = void 0;
                var endArrow = void 0;
                var offSet = void 0;
                var offSetValue = void 0;
                var navigationGroup = void 0;
                var d = void 0;
                group = (this.maps.renderer.createGroup({
                    id: this.maps.element.id + '_LayerIndex_' + layerIndex + '_line_Group'
                }));
                for (var i = 0; i < navigation.length; i++) {
                    latitude = navigation[i].latitude;
                    longitude = navigation[i].longitude;
                    visible = !ej2_base_1.isNullOrUndefined(navigation[i].visible) ? navigation[i].visible : false;
                    angle = !ej2_base_1.isNullOrUndefined(navigation[i].angle) ? navigation[i].angle : 0;
                    width = navigation[i].width || 1;
                    color = navigation[i].color;
                    dashArray = navigation[i].dashArray;
                    arrowSettings = navigation[i].arrowSettings;
                    showArrow = !ej2_base_1.isNullOrUndefined(arrowSettings) ? arrowSettings.showArrow : false;
                    if (!ej2_base_1.isNullOrUndefined(longitude) && !ej2_base_1.isNullOrUndefined(latitude) && longitude.length === latitude.length && visible) {
                        for (var i_1 = 0; i_1 < longitude.length; i_1++) {
                            var location_1 = (this.maps.isTileMap) ? index_1.convertTileLatLongToPoint(new helper_1.Point(longitude[i_1], latitude[i_1]), factor, this.maps.tileTranslatePoint, true) : helper_1.convertGeoToPoint(latitude[i_1], longitude[i_1], factor, layer, this.maps);
                            point.push(location_1);
                        }
                    }
                    navigationGroup = (this.maps.renderer.createGroup({
                        id: this.maps.element.id + '_LayerIndex_' + layerIndex + '_NavigationGroup' + i + ''
                    }));
                    for (var j = 0; j < point.length - 1; j++) {
                        angle = (-1 > angle) ? -1 : angle;
                        angle = (1 < angle) ? 1 : angle;
                        var arcId = this.maps.element.id + '_LayerIndex_' + layerIndex + '_NavigationIndex_' + i + '_Line' + j + '';
                        var radius = this.convertRadius(point[j], point[j + 1]);
                        if (angle <= 1 && angle > 0) {
                            direction = 0;
                            if (point[j]['x'] > point[j + 1]['x']) {
                                direction = 1;
                            }
                        }
                        if (angle >= -1 && angle < 0) {
                            direction = 1;
                            if (point[j]['x'] > point[j + 1]['x']) {
                                direction = 0;
                            }
                        }
                        if (showArrow) {
                            arrowColor = arrowSettings.color;
                            arrowSize = !ej2_base_1.isNullOrUndefined(arrowSettings.size) ? arrowSettings.size : 0;
                            offSetValue = !ej2_base_1.isNullOrUndefined(arrowSettings.offSet) ? arrowSettings.offSet : 0;
                            var divide = (Math.round(arrowSize / 2));
                            arrowPosition = arrowSettings.position;
                            startArrow = (arrowPosition === 'Start') ? 'url(#triangle' + i + ')' : null;
                            endArrow = (arrowPosition === 'End') ? 'url(#triangle' + i + ')' : null;
                            if (offSet !== 0 && angle === 0) {
                                offSet = (arrowPosition === 'Start') ? offSetValue : -(offSetValue);
                            }
                            offSet = (ej2_base_1.isNullOrUndefined(offSet)) ? 0 : offSet;
                            var triId = this.maps.element.id + '_triangle';
                            var defElement = this.maps.renderer.createDefs();
                            defElement.innerHTML += '<marker id="' + 'triangle' + i + '"></marker>';
                            var markerEle = defElement.querySelector('#' + 'triangle' + i);
                            markerEle.setAttribute('markerWidth', (arrowSize.toString()));
                            markerEle.setAttribute('markerHeight', (arrowSize.toString()));
                            markerEle.setAttribute('refX', (divide - offSet).toString());
                            markerEle.setAttribute('refY', divide.toString());
                            markerEle.setAttribute('orient', 'auto');
                            var d2 = 'M 0,0  L 0,' + arrowSize + ' L ' + divide + ', ' + divide + ' Z';
                            pathOption = new helper_1.PathOption(triId, arrowColor, width, color, 1, 1, dashArray, d2);
                            navigationEle = this.maps.renderer.drawPath(pathOption);
                            markerEle.appendChild(navigationEle);
                            defElement.appendChild(markerEle);
                            navigationGroup.appendChild(defElement);
                        }
                        angle = Math.abs(angle);
                        d = (angle === 0) ? 'M ' + point[j]['x'] + ',' + point[j]['y'] + 'L ' + point[j + 1]['x']
                            + ',' + point[j + 1]['y'] + ' ' :
                            'M ' + point[j]['x'] + ',' + point[j]['y'] + ' A ' + (radius / 2 + (1 - angle) * radius / (angle * 10)) +
                                ' ' + (radius / 2 + (1 - angle) * radius / (angle * 10)) + ' ' + 0 + ',' + 0 + ','
                                + direction + ' , ' + point[j + 1]['x'] + ',' + point[j + 1]['y'] + ' ';
                        pathOption = new helper_1.PathOption(arcId, 'none', width, color, 1, 1, dashArray, d);
                        navigationEle = this.maps.renderer.drawPath(pathOption);
                        if (!ej2_base_1.isNullOrUndefined(arrowPosition)) {
                            var position = (arrowPosition === 'Start') ? navigationEle.setAttribute('marker-start', startArrow)
                                : navigationEle.setAttribute('marker-end', endArrow);
                        }
                        helper_1.maintainSelection(this.maps.selectedNavigationElementId, this.maps.navigationSelectionClass, navigationEle, 'navigationlineselectionMapStyle');
                        navigationGroup.appendChild(navigationEle);
                        group.appendChild(navigationGroup);
                    }
                    point = [];
                }
            }
            return group;
        };
        NavigationLine.prototype.convertRadius = function (point1, point2) {
            var value1 = point2['x'] - point1['x'];
            var value2 = point2['y'] - point1['y'];
            var value = Math.sqrt((Math.pow(value1, 2) + Math.pow(value2, 2)));
            return value;
        };
        NavigationLine.prototype.getModuleName = function () {
            return 'NavigationLine';
        };
        NavigationLine.prototype.destroy = function () {
            this.maps = null;
        };
        return NavigationLine;
    }());
    exports.NavigationLine = NavigationLine;
});