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

96.18% Statements 252/262
86.26% Branches 182/211
97.3% Functions 36/37
96.14% Lines 249/259
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          109× 109× 109× 109× 109×   109×     109× 109×   70×   66× 66×   78× 78× 78× 78×   78× 78× 78× 78× 78×   546×     110× 110×   93× 16× 16× 16×   77× 77× 77×   93× 15×       93×                   93×       86×     86×       86× 13×           86×       86× 86× 75×       98×     98×   98× 98× 98× 98×   98×     98× 98× 98× 178× 178× 178×           98×         98×   105×   28×   105× 105× 27× 27×     23×   27× 27× 27× 20×         78× 78× 78×   78× 78× 78× 31× 31×     78× 17×     61×               11× 11×   74× 74×                   86× 86× 19× 19× 19× 19×       28× 28× 14× 14×       113×   113× 113× 113× 113×       113× 113× 113× 113× 113× 967× 967× 967× 967×   967×     967× 640×     327×   967×   640×     327× 327×   967×   794× 794× 744× 479×     265×           78× 78× 78× 78× 78× 78×   64× 64× 64×   78× 78× 78×     78× 78×       433×   118× 118× 118× 118× 118× 118×   68× 68×   118×     118× 118×       105× 152× 33× 33×     105× 78×     166×   18× 18× 18× 14× 14×   14×   12× 12×           3272×   70×        
/* 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", "../../common/utils/helper", "../../common/model/base", "../../common/user-interaction/selection", "../../common/model/constants"], function (require, exports, ej2_base_1, helper_1, base_1, selection_1, constants_1) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    var AccumulationSelection = (function (_super) {
        __extends(AccumulationSelection, _super);
        function AccumulationSelection(accumulation) {
            var _this = _super.call(this, accumulation) || this;
            _this.accumulation = accumulation;
            _this.renderer = accumulation.renderer;
            _this.addEventListener();
            return _this;
        }
        AccumulationSelection.prototype.addEventListener = function () {
            Iif (this.accumulation.isDestroyed) {
                return;
            }
            this.accumulation.on(ej2_base_1.Browser.touchMoveEvent, this.mouseMove, this);
            this.accumulation.on('click', this.mouseClick, this);
        };
        AccumulationSelection.prototype.removeEventListener = function () {
            if (this.accumulation.isDestroyed) {
                return;
            }
            this.accumulation.off(ej2_base_1.Browser.touchMoveEvent, this.mouseMove);
            this.accumulation.off('click', this.mouseClick);
        };
        AccumulationSelection.prototype.initPrivateVariables = function (accumulation) {
            this.styleId = accumulation.element.id + '_ej2_chart_selection';
            this.unselected = accumulation.element.id + '_ej2_deselected';
            this.selectedDataIndexes = [];
            this.rectPoints = null;
        };
        AccumulationSelection.prototype.invokeSelection = function (accumulation) {
            this.initPrivateVariables(accumulation);
            this.series = ej2_base_1.extend({}, accumulation.visibleSeries, null, true);
            this.seriesStyles();
            this.currentMode = accumulation.selectionMode;
            this.selectDataIndex(this.concatIndexes(accumulation.selectedDataIndexes, this.selectedDataIndexes), accumulation);
        };
        AccumulationSelection.prototype.generateStyle = function (series, point) {
            return (series.selectionStyle || this.styleId + '_series_' + series.index + '_point_' + point);
        };
        AccumulationSelection.prototype.findElements = function (accumulation, series, index) {
            return [this.getElementByIndex(index)];
        };
        AccumulationSelection.prototype.getElementByIndex = function (index) {
            var elementId = this.control.element.id + '_Series_' + index.series + '_Point_' + index.point;
            return document.getElementById(elementId);
        };
        AccumulationSelection.prototype.isAlreadySelected = function (targetElement, eventType) {
            if (eventType === 'mousemove') {
                this.currentMode = this.accumulation.highlightMode;
                this.highlightDataIndexes = [];
                this.styleId = this.accumulation.element.id + '_ej2_chart_highlight';
            }
            else Eif (eventType === 'click') {
                this.currentMode = this.accumulation.selectionMode;
                this.styleId = this.accumulation.element.id + '_ej2_chart_selection';
            }
            if (this.accumulation.highlightMode !== 'None' && this.accumulation.selectionMode === 'None') {
                Iif (eventType === 'click') {
                    return false;
                }
            }
            if ((this.accumulation.highlightMode !== 'None' && this.previousSelectedElement && this.previousSelectedElement[0])) {
                var parentNodeId = targetElement.parentNode.id;
                var isValidElement = void 0;
                Eif (targetElement.parentNode) {
                    isValidElement = (parentNodeId.indexOf('SeriesGroup') > 0 ||
                        parentNodeId.indexOf('SymbolGroup') > 0) ? true : false;
                }
                for (var i = 0; i < this.previousSelectedElement.length; i++) {
                    Eif (this.previousSelectedElement[i].hasAttribute('class')) {
                        Iif (this.previousSelectedElement[i].getAttribute('class').indexOf('highlight') > -1 && (isValidElement || eventType === 'click')) {
                            this.previousSelectedElement[i].removeAttribute('class');
                            this.addOrRemoveIndex(this.highlightDataIndexes, helper_1.indexFinder(this.previousSelectedElement[i].id));
                        }
                        else Eif (!isValidElement && this.previousSelectedElement[i].getAttribute('class').indexOf('highlight') > -1) {
                            this.performSelection(helper_1.indexFinder(this.previousSelectedElement[i].id), this.accumulation, this.previousSelectedElement[i]);
                        }
                    }
                }
            }
            return true;
        };
        AccumulationSelection.prototype.mouseClick = function (accumulation, event) {
            this.calculateSelectedElements(accumulation, event.target, event.type);
        };
        AccumulationSelection.prototype.calculateSelectedElements = function (accumulation, targetEle, eventType) {
            Iif (ej2_base_1.isNullOrUndefined(targetEle)) {
                return;
            }
            Iif ((accumulation.highlightMode === 'None' && accumulation.selectionMode === 'None') ||
                targetEle.id.indexOf(accumulation.element.id + '_') === -1) {
                return;
            }
            if (eventType === 'mousemove') {
                Iif (!ej2_base_1.isNullOrUndefined(targetEle.parentNode) && targetEle.parentNode.hasAttribute('class') &&
                    (targetEle.parentNode.getAttribute('class').indexOf('highlight') > 0 ||
                        targetEle.parentNode.getAttribute('class').indexOf('selection') > 0)) {
                    return;
                }
            }
            Iif (targetEle.getAttribute('id').indexOf('_connector_') > -1) {
                return;
            }
            else {
                this.isAlreadySelected(targetEle, eventType);
                if (targetEle.id.indexOf('_Series_') > -1 || targetEle.id.indexOf('_datalabel_') > -1) {
                    this.performSelection(helper_1.indexFinder(targetEle.id), accumulation, targetEle);
                }
            }
        };
        AccumulationSelection.prototype.performSelection = function (index, accumulation, element) {
            element = element.id.indexOf('datalabel') > -1 ?
                accumulation.getSeriesElement().childNodes[index.series].childNodes[index.point]
                : element;
            switch (this.currentMode) {
                case 'Point':
                    Eif (!isNaN(index.point)) {
                        this.selection(accumulation, index, [element]);
                        this.selectionComplete(accumulation, accumulation.series[0]);
                        this.blurEffect(accumulation.element.id, accumulation.visibleSeries);
                    }
                    break;
            }
        };
        AccumulationSelection.prototype.selectionComplete = function (accumulation, series) {
            var pointIndex;
            var selectedPointValues = [];
            for (var i = 0; i < this.selectedDataIndexes.length; i++) {
                pointIndex = this.selectedDataIndexes[i].point;
                Eif (!isNaN(pointIndex)) {
                    selectedPointValues.push({
                        x: series.dataSource[pointIndex][series.xName], y: series.points[pointIndex].y,
                        seriesIndex: this.selectedDataIndexes[i].series, pointIndex: pointIndex
                    });
                }
            }
            var args = {
                name: constants_1.selectionComplete,
                selectedDataValues: selectedPointValues,
                cancel: false
            };
            accumulation.trigger(constants_1.selectionComplete, args);
        };
        AccumulationSelection.prototype.selection = function (accumulation, index, selectedElements) {
            if (!accumulation.isMultiSelect && this.styleId.indexOf('highlight') === -1 &&
                accumulation.selectionMode !== 'None') {
                this.removeMultiSelectEelments(accumulation, this.selectedDataIndexes, index, accumulation.series);
            }
            var className = selectedElements[0] && (selectedElements[0].getAttribute('class') || '');
            if (selectedElements[0] && className.indexOf(this.getSelectionClass(selectedElements[0].id, index.point)) > -1) {
                this.removeStyles(selectedElements, index);
                if (this.styleId.indexOf('highlight') > 0 && accumulation.highlightMode !== 'None') {
                    this.addOrRemoveIndex(this.highlightDataIndexes, index);
                }
                else {
                    this.addOrRemoveIndex(this.selectedDataIndexes, index);
                }
                Eif (accumulation.enableBorderOnMouseMove) {
                    var borderElement = document.getElementById(selectedElements[0].id.split('_')[0] + 'PointHover_Border');
                    if (!ej2_base_1.isNullOrUndefined(borderElement)) {
                        this.removeSvgClass(borderElement, borderElement.getAttribute('class'));
                    }
                }
            }
            else {
                this.previousSelectedElement = accumulation.highlightMode !== 'None' ? selectedElements : [];
                Eif (className.indexOf('selection') < 0) {
                    this.applyStyles(selectedElements, index);
                }
                Eif (accumulation.enableBorderOnMouseMove) {
                    var borderElement = document.getElementById(selectedElements[0].id.split('_')[0] + 'PointHover_Border');
                    if (!ej2_base_1.isNullOrUndefined(borderElement)) {
                        this.removeSvgClass(borderElement, borderElement.getAttribute('class'));
                        this.addSvgClass(borderElement, selectedElements[0].getAttribute('class'));
                    }
                }
                if (this.styleId.indexOf('highlight') > 0 && accumulation.highlightMode !== 'None') {
                    this.addOrRemoveIndex(this.highlightDataIndexes, index, true);
                }
                else {
                    this.addOrRemoveIndex(this.selectedDataIndexes, index, true);
                }
            }
        };
        AccumulationSelection.prototype.redrawSelection = function (accumulation) {
            var selectedDataIndexes = ej2_base_1.extend([], this.selectedDataIndexes, null, true);
            var highlightDataIndexes = ej2_base_1.extend([], this.highlightDataIndexes, null, true);
            if (this.styleId.indexOf('highlight') > 0 && highlightDataIndexes.length > 0) {
                this.removeSelectedElements(accumulation, this.highlightDataIndexes);
                selectedDataIndexes = highlightDataIndexes;
            }
            else {
                this.removeSelectedElements(accumulation, this.selectedDataIndexes);
            }
            this.blurEffect(accumulation.element.id, accumulation.visibleSeries);
            this.selectDataIndex(selectedDataIndexes, accumulation);
        };
        AccumulationSelection.prototype.removeSelectedElements = function (accumulation, indexes) {
            for (var _i = 0, indexes_1 = indexes; _i < indexes_1.length; _i++) {
                var index = indexes_1[_i];
                this.removeStyles([this.getElementByIndex(index)], index);
            }
            var points = accumulation.visibleSeries[0].points;
            for (var i = 0; i < points.length; i++) {
                var index = new base_1.Index(0, points[i].index);
                this.removeStyles([this.getElementByIndex(index)], index);
            }
        };
        AccumulationSelection.prototype.legendSelection = function (accumulation, series, pointIndex, targetEle, eventType) {
            if (eventType === 'mousemove') {
                if (targetEle.id.indexOf('text') > 1) {
                    targetEle = helper_1.getElement(targetEle.id.replace('text', 'shape'));
                }
                if (targetEle.hasAttribute('class') && (targetEle.getAttribute('class').indexOf('highlight') > -1 ||
                    targetEle.getAttribute('class').indexOf('selection') > -1)) {
                    return;
                }
                this.currentMode = this.accumulation.highlightMode;
            }
            var isPreSelected = this.isAlreadySelected(targetEle, eventType);
            Eif (isPreSelected) {
                var seriesElements = accumulation.getSeriesElement().
                    childNodes[series].childNodes[pointIndex];
                this.selection(accumulation, new base_1.Index(series, pointIndex), [seriesElements]);
                this.blurEffect(accumulation.element.id, accumulation.visibleSeries);
            }
        };
        AccumulationSelection.prototype.selectDataIndex = function (indexes, accumulation) {
            var element;
            for (var _i = 0, indexes_2 = indexes; _i < indexes_2.length; _i++) {
                var index = indexes_2[_i];
                element = this.getElementByIndex(index);
                Eif (element) {
                    this.performSelection(index, accumulation, element);
                }
            }
        };
        AccumulationSelection.prototype.removeMultiSelectEelments = function (accumulation, index, currentIndex, seriesCollection) {
            var series;
            for (var i = 0; i < index.length; i++) {
                series = seriesCollection[index[i].series];
                if (!this.checkEquals(index[i], currentIndex)) {
                    this.removeStyles(this.findElements(accumulation, series, index[i]), index[i]);
                    index.splice(i, 1);
                    i--;
                }
            }
        };
        AccumulationSelection.prototype.blurEffect = function (pieId, visibleSeries) {
            var visibility = (this.checkVisibility(this.highlightDataIndexes) ||
                this.checkVisibility(this.selectedDataIndexes));
            for (var _i = 0, visibleSeries_1 = visibleSeries; _i < visibleSeries_1.length; _i++) {
                var series = visibleSeries_1[_i];
                Eif (series.visible) {
                    this.checkSelectionElements(document.getElementById(pieId + '_SeriesCollection'), this.generateStyle(series), visibility);
                }
            }
        };
        AccumulationSelection.prototype.checkSelectionElements = function (element, className, visibility) {
            var children = element.childNodes[0].childNodes;
            var legendShape;
            var elementClass;
            var parentClass;
            for (var i = 0; i < children.length; i++) {
                elementClass = children[i].getAttribute('class') || '';
                parentClass = children[i].parentNode.getAttribute('class') || '';
                Eif (this.accumulation.selectionMode !== 'None' || this.accumulation.highlightMode !== 'None') {
                    className = elementClass.indexOf('selection') > 0 ||
                        elementClass.indexOf('highlight') > 0 ? elementClass : className;
                    className = (parentClass.indexOf('selection') > 0 ||
                        parentClass.indexOf('highlight') > 0) ? parentClass : className;
                }
                if (elementClass.indexOf(className) === -1 && parentClass.indexOf(className) === -1 && visibility) {
                    this.addSvgClass(children[i], this.unselected);
                }
                else {
                    this.removeSvgClass(children[i], this.unselected);
                }
                if (elementClass.indexOf(className) === -1 &&
                    parentClass.indexOf(className) === -1 && visibility) {
                    this.addSvgClass(children[i], this.unselected);
                }
                else {
                    this.removeSvgClass(children[i], this.unselected);
                    this.removeSvgClass(children[i].parentNode, this.unselected);
                }
                if (this.control.accumulationLegendModule &&
                    this.control.legendSettings.visible) {
                    legendShape = document.getElementById(this.control.element.id + '_chart_legend_shape_' + i);
                    if (legendShape) {
                        if (elementClass.indexOf(className) === -1 && parentClass.indexOf(className) === -1 && visibility) {
                            this.addSvgClass(legendShape, this.unselected);
                        }
                        else {
                            this.removeSvgClass(legendShape, this.unselected);
                        }
                    }
                }
            }
        };
        AccumulationSelection.prototype.applyStyles = function (elements, index) {
            var accumulationTooltip = this.control.accumulationTooltipModule;
            for (var _i = 0, elements_1 = elements; _i < elements_1.length; _i++) {
                var element = elements_1[_i];
                var legendShape = void 0;
                Eif (element) {
                    if (this.control.accumulationLegendModule &&
                        this.control.legendSettings.visible) {
                        legendShape = document.getElementById(this.control.element.id + '_chart_legend_shape_' + index.point);
                        this.removeSvgClass(legendShape, legendShape.getAttribute('class'));
                        this.addSvgClass(legendShape, this.getSelectionClass(legendShape.id, index.point));
                    }
                    this.removeSvgClass(element.parentNode, this.unselected);
                    this.removeSvgClass(element, this.unselected);
                    var opacity = accumulationTooltip && (accumulationTooltip.previousPoints.length > 0 &&
                        accumulationTooltip.previousPoints[0].point.index !== index.point) ?
                        accumulationTooltip.svgTooltip.opacity : this.series[index.series].opacity;
                    element.setAttribute('opacity', opacity.toString());
                    this.addSvgClass(element, this.getSelectionClass(element.id, index.point));
                }
            }
        };
        AccumulationSelection.prototype.getSelectionClass = function (id, point) {
            return this.generateStyle(this.control.series[helper_1.indexFinder(id).series], point);
        };
        AccumulationSelection.prototype.removeStyles = function (elements, index) {
            var accumulationTooltip = this.control.accumulationTooltipModule;
            var legendShape;
            for (var _i = 0, elements_2 = elements; _i < elements_2.length; _i++) {
                var element = elements_2[_i];
                Eif (element) {
                    if (this.control.accumulationLegendModule &&
                        this.control.legendSettings.visible) {
                        legendShape = document.getElementById(this.control.element.id + '_chart_legend_shape_' + index.point);
                        this.removeSvgClass(legendShape, this.getSelectionClass(legendShape.id, index.point));
                    }
                    var opacity = accumulationTooltip && accumulationTooltip.previousPoints.length > 0
                        && (accumulationTooltip.previousPoints[0].point.index === index.point) ?
                        accumulationTooltip.svgTooltip.opacity : this.series[index.series].opacity;
                    element.setAttribute('opacity', opacity.toString());
                    this.removeSvgClass(element, this.getSelectionClass(element.id, index.point));
                }
            }
        };
        AccumulationSelection.prototype.addOrRemoveIndex = function (indexes, index, add) {
            for (var i = 0; i < indexes.length; i++) {
                if (this.checkEquals(indexes[i], index)) {
                    indexes.splice(i, 1);
                    i--;
                }
            }
            if (add) {
                indexes.push(index);
            }
        };
        AccumulationSelection.prototype.checkEquals = function (first, second) {
            return ((first.point === second.point) && (first.series === second.series));
        };
        AccumulationSelection.prototype.mouseMove = function (event) {
            var accumulation = this.accumulation;
            var targetElement = event.target;
            if (accumulation.highlightMode !== 'None') {
                Eif (!ej2_base_1.isNullOrUndefined(targetElement)) {
                    if (event.target.id.indexOf('text') > 1) {
                        targetElement = helper_1.getElement(event.target.id.replace('text', 'shape'));
                    }
                    if ((targetElement).hasAttribute('class') && (targetElement).getAttribute('class').indexOf('highlight') > -1) {
                        return;
                    }
                    this.calculateSelectedElements(accumulation, event.target, event.type);
                    return;
                }
            }
            Iif (accumulation.selectionMode === 'None') {
                return;
            }
        };
        AccumulationSelection.prototype.getModuleName = function () {
            return 'AccumulationSelection';
        };
        AccumulationSelection.prototype.destroy = function () {
            this.removeEventListener();
        };
        return AccumulationSelection;
    }(selection_1.BaseSelection));
    exports.AccumulationSelection = AccumulationSelection;
});