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

94.86% Statements 277/292
87.27% Branches 240/275
95.45% Functions 21/22
94.86% Lines 277/292
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   351× 351× 351× 351× 351× 351× 351×   351×     351× 351× 351× 351× 351×   19×     13×   350× 350×               350×     350× 340× 324× 314×       16×           323× 323× 323× 323× 323× 323× 323× 323× 323×   323× 323× 323×         323× 323×   16×   307× 307× 307× 306×   307× 228×     307× 302×     307×                     306× 230× 230× 230× 230× 230× 230× 230×     76× 76× 76×       460× 460×                               307× 307× 307× 307× 307× 307× 307× 307× 307× 307× 738× 738× 738× 592×   580× 580× 580× 580×   580×   577× 577×     577× 442×           440×         442× 442× 442× 442×   577× 577× 577×       573×   577× 577× 577× 577×     577× 10× 10× 10× 10× 10× 10× 10×   567×       12× 12×         584× 584× 584× 584× 584× 584×   584× 584× 306× 306× 306×     278× 278× 278×   584× 28×   556× 153×   403×     403× 21×     382× 382×     577× 577× 577× 577× 577× 577× 577×   577× 577×       577× 577× 299×   299× 299× 299× 299× 93×     299×   299×   299×   299× 75×       278× 278× 278×   278× 278× 13×   13×       265× 14× 14×     278×   278× 16×   278× 16×   278×     577×   375×       52× 52×   52× 52× 52× 52× 37×     321× 321× 321×               37×         37×   37× 37× 28× 28×             41519×          
define(["require", "exports", "@syncfusion/ej2-base", "../../common/utils/helper", "@syncfusion/ej2-svg-base"], function (require, exports, ej2_base_1, helper_1, ej2_svg_base_1) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    var Crosshair = (function () {
        function Crosshair(chart) {
            this.arrowLocation = new helper_1.ChartLocation(0, 0);
            this.rx = 2;
            this.ry = 2;
            this.chart = chart;
            this.elementID = this.chart.element.id;
            this.svgRenderer = new ej2_svg_base_1.SvgRenderer(this.chart.element.id);
            this.addEventListener();
        }
        Crosshair.prototype.addEventListener = function () {
            Iif (this.chart.isDestroyed) {
                return;
            }
            var cancelEvent = ej2_base_1.Browser.isPointer ? 'pointerleave' : 'mouseleave';
            this.chart.on(ej2_base_1.Browser.touchMoveEvent, this.mouseMoveHandler, this);
            this.chart.on(ej2_base_1.Browser.touchEndEvent, this.mouseUpHandler, this);
            this.chart.on(cancelEvent, this.mouseLeaveHandler, this);
            this.chart.on('tapHold', this.longPress, this);
        };
        Crosshair.prototype.mouseUpHandler = function () {
            if (this.chart.startMove) {
                this.removeCrosshair(2000);
            }
        };
        Crosshair.prototype.mouseLeaveHandler = function () {
            this.removeCrosshair(1000);
        };
        Crosshair.prototype.mouseMoveHandler = function (event) {
            var chart = this.chart;
            Iif (chart.stockChart && chart.stockChart.onPanning) {
                if (chart.mouseY < chart.chartAxisLayoutPanel.seriesClipRect.y) {
                    chart.mouseY = chart.chartAxisLayoutPanel.seriesClipRect.y;
                }
                else if (chart.mouseY > chart.chartAxisLayoutPanel.seriesClipRect.y + chart.chartAxisLayoutPanel.seriesClipRect.height) {
                    chart.mouseY = chart.chartAxisLayoutPanel.seriesClipRect.y + chart.chartAxisLayoutPanel.seriesClipRect.height;
                }
            }
            Iif (event.type === 'touchmove' && (ej2_base_1.Browser.isIos || ej2_base_1.Browser.isIos7) && chart.startMove && event.preventDefault) {
                event.preventDefault();
            }
            if (!chart.disableTrackTooltip) {
                if (helper_1.withInBounds(chart.mouseX, chart.mouseY, chart.chartAxisLayoutPanel.seriesClipRect)) {
                    if (chart.startMove || !chart.isTouch) {
                        this.crosshair();
                    }
                }
                else {
                    this.removeCrosshair(1000);
                }
            }
        };
        Crosshair.prototype.longPress = function () {
            var chart = this.chart;
            if (helper_1.withInBounds(chart.mouseX, chart.mouseY, chart.chartAxisLayoutPanel.seriesClipRect)) {
                this.crosshair();
            }
            return false;
        };
        Crosshair.prototype.crosshair = function () {
            var chart = this.chart;
            var horizontalCross = '';
            var verticalCross = '';
            var options;
            var axisTooltipGroup = document.getElementById(this.elementID + '_crosshair_axis');
            var crosshair = chart.crosshair;
            var tooltipdiv = document.getElementById(this.elementID + '_tooltip');
            var chartRect = chart.chartAxisLayoutPanel.seriesClipRect;
            var crossGroup = chart.enableCanvas ? document.getElementById(this.elementID + '_Secondary_Element') :
                document.getElementById(this.elementID + '_UserInteraction');
            var crosshairsvg;
            var cross = document.getElementById(this.elementID + '_Crosshair');
            if (chart.enableCanvas) {
                Eif (!cross) {
                    cross = ej2_base_1.createElement('div', {
                        id: this.elementID + '_Crosshair', styles: 'position: absolute; pointer-events: none'
                    });
                    crossGroup.appendChild(cross);
                }
            }
            this.stopAnimation();
            if (chart.isCrosshair && chart.tooltip.enable && chart.tooltipModule &&
                !helper_1.withInBounds(chart.tooltipModule.valueX, chart.tooltipModule.valueY, chartRect)) {
                return null;
            }
            this.valueX = chart.tooltip.enable && chart.tooltipModule && chart.tooltipModule.valueX ? chart.tooltipModule.valueX : chart.mouseX;
            this.valueY = chart.tooltip.enable && chart.tooltipModule && chart.tooltipModule.valueY ? chart.tooltipModule.valueY : chart.mouseY;
            if (!chart.enableCanvas) {
                crossGroup.setAttribute('opacity', '1');
            }
            if (crosshair.lineType === 'Both' || crosshair.lineType === 'Horizontal') {
                horizontalCross += 'M ' + chartRect.x + ' ' + this.valueY +
                    ' L ' + (chartRect.x + chartRect.width) + ' ' + this.valueY;
            }
            if (crosshair.lineType === 'Both' || crosshair.lineType === 'Vertical') {
                verticalCross += 'M ' + this.valueX + ' ' + chartRect.y +
                    ' L ' + this.valueX + ' ' + (chartRect.y + chartRect.height);
            }
            if (chart.enableCanvas) {
                Eif (!axisTooltipGroup) {
                    axisTooltipGroup = this.svgRenderer.createGroup({ 'id': this.elementID + '_crosshair_axis' });
                }
                var elementID = chart.tooltip.enable ? chart.element.id + '_tooltip_svg' : chart.element.id + '_svg';
                crosshairsvg = this.svgRenderer.createSvg({
                    id: elementID,
                    width: chart.availableSize.width,
                    height: chart.availableSize.height
                });
                Eif (chart.tooltip.enable) {
                    tooltipdiv = !tooltipdiv ? chart.tooltipModule.createElement() : tooltipdiv;
                    tooltipdiv.appendChild(crosshairsvg);
                    crossGroup.appendChild(tooltipdiv);
                }
                options = new ej2_svg_base_1.PathOption(this.elementID + '_HorizontalLine', 'none', crosshair.line.width, crosshair.horizontalLineColor || crosshair.line.color || chart.themeStyle.crosshairLine, crosshair.opacity, (chart.theme.indexOf('Bootstrap5') > -1 || chart.theme === 'Fluent2HighContrast') ? crosshair.dashArray || '2.5' : crosshair.dashArray, horizontalCross);
                this.drawCrosshairLine(options, cross, chartRect.x, this.valueY, chartRect.width, 0, horizontalCross);
                options = new ej2_svg_base_1.PathOption(this.elementID + '_VerticalLine', 'none', crosshair.line.width, crosshair.verticalLineColor || crosshair.line.color || chart.themeStyle.crosshairLine, crosshair.opacity, (chart.theme.indexOf('Bootstrap5') > -1 || chart.theme === 'Fluent2HighContrast') ? crosshair.dashArray || '2.5' : crosshair.dashArray, verticalCross);
                this.drawCrosshairLine(options, cross, this.valueX, chartRect.y, 0, chartRect.height, verticalCross);
                this.renderAxisTooltip(chart, chartRect, axisTooltipGroup);
                crosshairsvg.appendChild(axisTooltipGroup);
                Iif (!chart.tooltip.enable) {
                    cross.appendChild(crosshairsvg);
                }
            }
            else {
                if (crossGroup.childNodes.length === 0) {
                    axisTooltipGroup = chart.renderer.createGroup({ 'id': this.elementID + '_crosshair_axis' });
                    options = new ej2_svg_base_1.PathOption(this.elementID + '_HorizontalLine', 'none', crosshair.line.width, crosshair.horizontalLineColor || crosshair.line.color || chart.themeStyle.crosshairLine, crosshair.opacity, (chart.theme.indexOf('Bootstrap5') > -1 || chart.theme === 'Fluent2HighContrast') ? crosshair.dashArray || '2.5' : crosshair.dashArray, horizontalCross);
                    this.renderCrosshairLine(options, crossGroup);
                    options = new ej2_svg_base_1.PathOption(this.elementID + '_VerticalLine', 'none', crosshair.line.width, crosshair.verticalLineColor || crosshair.line.color || chart.themeStyle.crosshairLine, crosshair.opacity, (chart.theme.indexOf('Bootstrap5') > -1 || chart.theme === 'Fluent2HighContrast') ? crosshair.dashArray || '2.5' : crosshair.dashArray, verticalCross);
                    this.renderCrosshairLine(options, crossGroup);
                    crossGroup.appendChild(axisTooltipGroup);
                    this.renderAxisTooltip(chart, chartRect, crossGroup.lastChild);
                }
                else {
                    document.getElementById(this.elementID + '_HorizontalLine').setAttribute('d', horizontalCross);
                    document.getElementById(this.elementID + '_VerticalLine').setAttribute('d', verticalCross);
                    this.renderAxisTooltip(chart, chartRect, crossGroup.lastChild);
                }
            }
        };
        Crosshair.prototype.renderCrosshairLine = function (options, crossGroup) {
            var htmlObject = this.chart.renderer.drawPath(options);
            crossGroup.appendChild(htmlObject);
        };
        Crosshair.prototype.drawCrosshairLine = function (options, crossGroup, left, top, width, height, direction) {
            Eif (!document.getElementById(options.id) && direction) {
                var line = ej2_base_1.createElement('div', {
                    id: options.id
                });
                crossGroup.appendChild(line);
            }
            Eif (document.getElementById(options.id)) {
                var style = 'top:' + top.toString() + 'px;' +
                    'left:' + left.toString() + 'px;' +
                    'width:' + width + 'px;' +
                    'height:' + height + 'px;' +
                    'fill:' + options.stroke + ';' +
                    'border: 0.5px solid ' + options.stroke + ';' +
                    'opacity: ' + options.opacity + ' ; ' +
                    'position: absolute';
                var crosshairline = document.getElementById(options.id);
                var crosshairtooltip = document.getElementById(this.elementID + '_crosshair_axis');
                crosshairline.style.cssText = style;
                crossGroup.style.opacity = '1';
                Iif (crosshairtooltip) {
                    crosshairtooltip.style.opacity = '1';
                }
            }
        };
        Crosshair.prototype.renderAxisTooltip = function (chart, chartRect, axisGroup) {
            var axis;
            var text;
            var rect;
            var pathElement;
            var textElem;
            var options;
            var padding = 5;
            var direction;
            var axisRect;
            for (var k = 0, length_1 = chart.axisCollections.length; k < length_1; k++) {
                axis = chart.axisCollections[k];
                axisRect = !axis.placeNextToAxisLine ? axis.rect : axis.updatedRect;
                if (axis.crosshairTooltip.enable) {
                    if (axisRect && ((this.valueX <= (axisRect.x + axisRect.width) && axisRect.x <= this.valueX) ||
                        (this.valueY <= (axisRect.y + axisRect.height) && axisRect.y <= this.valueY))) {
                        pathElement = document.getElementById(this.elementID + '_axis_tooltip_' + k);
                        textElem = document.getElementById(this.elementID + '_axis_tooltip_text_' + k);
                        text = this.getAxisText(axis);
                        if (text && text.indexOf('<br') > -1) {
                            text = this.getAxisText(axis).split(/<br.*?>/g);
                        }
                        if (!text) {
                            continue;
                        }
                        rect = this.tooltipLocation(text, axis, chartRect, axisRect);
                        Iif (rect.y + rect.height / 2 > chart.availableSize.height || rect.y < 0) {
                            continue;
                        }
                        if (pathElement === null) {
                            if (chart.enableCanvas) {
                                pathElement = this.svgRenderer.drawPath({
                                    'id': this.elementID + '_axis_tooltip_' + k,
                                    'fill': axis.crosshairTooltip.fill || chart.themeStyle.crosshairFill
                                });
                            }
                            else {
                                pathElement = chart.renderer.drawPath({
                                    'id': this.elementID + '_axis_tooltip_' + k,
                                    'fill': axis.crosshairTooltip.fill || chart.themeStyle.crosshairFill
                                }, null);
                            }
                            axisGroup.appendChild(pathElement);
                            options = new ej2_svg_base_1.TextOption(this.elementID + '_axis_tooltip_text_' + k, 0, 0, (chart.stockChart && chart.enableRtl) ? 'end' : 'start', text);
                            var render = chart.enableCanvas ? this.svgRenderer : chart.renderer;
                            textElem = helper_1.textElement(render, options, axis.crosshairTooltip.textStyle, axis.crosshairTooltip.textStyle.color || chart.themeStyle.crosshairLabelFont.color, axisGroup, null, null, null, null, null, null, null, null, chart.enableCanvas, null, this.chart.themeStyle.crosshairLabelFont);
                        }
                        direction = helper_1.findCrosshairDirection(this.rx, this.ry, rect, this.arrowLocation, 9, this.isTop, this.isBottom, this.isLeft, this.valueX, this.valueY);
                        pathElement.setAttribute('d', direction);
                        if (typeof text !== 'string' && text.length > 1) {
                            for (var i = 0; i < text.length; i++) {
                                textElem.childNodes[i].textContent = text[i];
                            }
                        }
                        else {
                            textElem.textContent = text;
                        }
                        textElem.setAttribute('x', (rect.x + padding + (chart.enableRtl ? this.elementSize.width : 0)).toString());
                        textElem.setAttribute('y', (rect.y + padding + 3 * this.elementSize.height / 4).toString());
                        var shadowId = this.chart.element.id + '_shadow';
                        if (typeof text !== 'string' && text.length > 1) {
                            var height = 0;
                            textElem.setAttribute('y', (rect.y + padding + 3 * this.elementSize.height / (4 * text.length)).toString());
                            for (var i = 0; i < textElem.children.length; i++) {
                                height += this.elementSize.height / text.length;
                                textElem.children[i].setAttribute('x', (rect.x + padding + (chart.enableRtl ? this.elementSize.width : 0) + this.elementSize.width / 2).toString());
                                textElem.children[i].setAttribute('y', ((parseInt(textElem.getAttribute('y'), 10) + height).toString()));
                                textElem.children[i].setAttribute('style', 'text-anchor: middle');
                            }
                        }
                        if (this.chart.theme === 'Fluent' || this.chart.theme === 'FluentDark' || this.chart.theme === 'Fabric' || this.chart.theme === 'FabricDark' || this.chart.theme === 'Fluent2HighContrast') {
                            var defElement = this.chart.renderer.createDefs();
                            var bordercolor = this.chart.theme === 'Fluent' || this.chart.theme === 'Fabric' ? '#D2D0CE' : this.chart.theme === 'Fluent2HighContrast' ? '#FFFFFF' : null;
                            var borderwidth = this.chart.theme === 'Fluent' || this.chart.theme === 'Fabric' || this.chart.theme === 'Fluent2HighContrast' ? 1 : null;
                            defElement.setAttribute('id', this.chart.element.id + 'SVG_tooltip_definition');
                            axisGroup.appendChild(defElement);
                            pathElement.setAttribute('stroke', bordercolor);
                            pathElement.setAttribute('stroke-width', ' ' + borderwidth);
                        }
                        else if (this.chart.theme.indexOf('Fluent2') > -1) {
                            pathElement.setAttribute('box-shadow', '0px 1.6px 3.6px 0px #00000021, 0px 0.3px 0.9px 0px #0000001A');
                            pathElement.setAttribute('filter', ej2_base_1.Browser.isIE ? '' : 'url(#' + shadowId + ')');
                            var shadow = '<filter id="' + shadowId + '" height="130%"><feGaussianBlur in="SourceAlpha" stdDeviation="3"/>';
                            shadow += '<feOffset dx="-1" dy="3.6" result="offsetblur"/><feComponentTransfer><feFuncA type="linear" slope="0.2"/>';
                            shadow += '</feComponentTransfer><feMerge><feMergeNode/><feMergeNode in="SourceGraphic"/></feMerge></filter>';
                            var defElement = this.chart.renderer.createDefs();
                            defElement.setAttribute('id', this.chart.element.id + 'SVG_tooltip_definition');
                            pathElement.appendChild(defElement);
                            defElement.innerHTML = shadow;
                        }
                    }
                    else {
                        helper_1.removeElement(this.elementID + '_axis_tooltip_' + k);
                        helper_1.removeElement(this.elementID + '_axis_tooltip_text_' + k);
                    }
                }
            }
        };
        Crosshair.prototype.getAxisText = function (axis) {
            var value;
            this.isBottom = false;
            this.isTop = false;
            this.isLeft = false;
            this.isRight = false;
            var labelValue = (axis.valueType === 'Category' && axis.labelPlacement === 'BetweenTicks')
                ? 0.5 : 0;
            var isOpposed = axis.isAxisOpposedPosition;
            if (axis.orientation === 'Horizontal') {
                value = helper_1.getValueXByPoint(Math.abs(this.valueX - axis.rect.x), axis.rect.width, axis) + labelValue;
                this.isBottom = !isOpposed;
                this.isTop = isOpposed;
            }
            else {
                value = helper_1.getValueYByPoint(Math.abs(this.valueY - axis.rect.y), axis.rect.height, axis) + labelValue;
                this.isRight = isOpposed;
                this.isLeft = !isOpposed;
            }
            if (axis.valueType === 'DateTime') {
                return axis.format(new Date(value));
            }
            else if (axis.valueType === 'Category') {
                return axis.labels[Math.floor(value)];
            }
            else Iif (axis.valueType === 'DateTimeCategory') {
                return this.chart.dateTimeCategoryModule.getIndexedAxisLabel(axis.labels[Math.round(value)], axis.format);
            }
            else if (axis.valueType === 'Logarithmic') {
                return value = axis.format(Math.pow(axis.logBase, value));
            }
            else {
                var customLabelFormat = axis.labelFormat && axis.labelFormat.match('{value}') !== null;
                return customLabelFormat ? axis.labelFormat.replace('{value}', axis.format(value)) : axis.format(value);
            }
        };
        Crosshair.prototype.tooltipLocation = function (text, axis, bounds, axisRect) {
            var padding = 5;
            var arrowPadding = 9;
            var tooltipRect;
            var boundsX = bounds.x;
            var boundsY = bounds.y;
            var islabelInside = axis.labelPosition === 'Inside';
            var scrollBarHeight = axis.scrollbarSettings.enable || (axis.zoomingScrollBar && axis.zoomingScrollBar.svgObject)
                ? axis.scrollBarHeight : 0;
            this.elementSize = ej2_svg_base_1.measureText(text, axis.crosshairTooltip.textStyle, this.chart.themeStyle.crosshairLabelFont);
            if (typeof text !== 'string' && text.length > 1) {
                this.elementSize.width = 0;
                this.elementSize.height = 0;
                for (var i = 0; i < text.length; i++) {
                    var size = ej2_svg_base_1.measureText(text[i], axis.crosshairTooltip.textStyle, this.chart.themeStyle.crosshairLabelFont);
                    this.elementSize.height += size.height;
                    if (this.elementSize.width < size.width) {
                        this.elementSize.width = size.width;
                    }
                }
            }
            var isOpposed = axis.isAxisOpposedPosition;
            if (axis.orientation === 'Horizontal') {
                var yLocation = islabelInside ? axisRect.y - this.elementSize.height - (padding * 2 + arrowPadding) :
                    axisRect.y + scrollBarHeight;
                var height = islabelInside ? axisRect.y - this.elementSize.height - arrowPadding : axisRect.y + arrowPadding;
                this.arrowLocation = new helper_1.ChartLocation(this.valueX, yLocation);
                tooltipRect = new ej2_svg_base_1.Rect((this.valueX - (this.elementSize.width / 2) - padding), height + (!islabelInside ? scrollBarHeight : 0), this.elementSize.width + padding * 2, this.elementSize.height + padding * 2);
                if (isOpposed) {
                    tooltipRect.y = islabelInside ? axisRect.y : axisRect.y -
                        (this.elementSize.height + padding * 2 + arrowPadding) - scrollBarHeight;
                }
                if (tooltipRect.x < boundsX) {
                    tooltipRect.x = boundsX;
                }
                if (tooltipRect.x + tooltipRect.width > boundsX + bounds.width) {
                    tooltipRect.x -= ((tooltipRect.x + tooltipRect.width) - (boundsX + bounds.width));
                }
                if (this.arrowLocation.x + arrowPadding / 2 > tooltipRect.x + tooltipRect.width - this.rx) {
                    this.arrowLocation.x = tooltipRect.x + tooltipRect.width - this.rx - arrowPadding;
                }
                if (this.arrowLocation.x - arrowPadding < tooltipRect.x + this.rx) {
                    this.arrowLocation.x = tooltipRect.x + this.rx + arrowPadding;
                }
            }
            else {
                scrollBarHeight = scrollBarHeight * (isOpposed ? 1 : -1);
                this.arrowLocation = new helper_1.ChartLocation(axisRect.x, this.valueY);
                var width = islabelInside ? axisRect.x - scrollBarHeight :
                    axisRect.x - (this.elementSize.width) - (padding * 2 + arrowPadding);
                tooltipRect = new ej2_svg_base_1.Rect(width + scrollBarHeight, this.valueY - (this.elementSize.height / 2) - padding, this.elementSize.width + (padding * 2), this.elementSize.height + padding * 2);
                if (isOpposed) {
                    tooltipRect.x = islabelInside ? axisRect.x - this.elementSize.width - arrowPadding :
                        axisRect.x + arrowPadding + scrollBarHeight;
                    if ((tooltipRect.x + tooltipRect.width) > this.chart.availableSize.width) {
                        this.arrowLocation.x -= ((tooltipRect.x + tooltipRect.width) - this.chart.availableSize.width);
                        tooltipRect.x -= ((tooltipRect.x + tooltipRect.width) - this.chart.availableSize.width);
                    }
                }
                else {
                    if (tooltipRect.x < 0) {
                        this.arrowLocation.x -= tooltipRect.x;
                        tooltipRect.x = 0;
                    }
                }
                if (tooltipRect.y < boundsY) {
                    tooltipRect.y = boundsY;
                }
                if (tooltipRect.y + tooltipRect.height >= boundsY + bounds.height) {
                    tooltipRect.y -= ((tooltipRect.y + tooltipRect.height) - (boundsY + bounds.height));
                }
                if (this.arrowLocation.y + arrowPadding / 2 > tooltipRect.y + tooltipRect.height - this.ry) {
                    this.arrowLocation.y = tooltipRect.y + tooltipRect.height - this.ry - arrowPadding / 2;
                }
                if (this.arrowLocation.y - arrowPadding / 2 < tooltipRect.y + this.ry) {
                    this.arrowLocation.y = tooltipRect.y + this.ry + arrowPadding / 2;
                }
            }
            return tooltipRect;
        };
        Crosshair.prototype.stopAnimation = function () {
            helper_1.stopTimer(this.crosshairInterval);
        };
        Crosshair.prototype.progressAnimation = function () {
            helper_1.stopTimer(this.crosshairInterval);
        };
        Crosshair.prototype.removeCrosshair = function (duration) {
            var chart = this.chart;
            var crosshair = chart.enableCanvas ? document.getElementById(this.elementID + '_Crosshair') :
                document.getElementById(this.elementID + '_UserInteraction');
            var crosshairtooltip = chart.enableCanvas ? document.getElementById(this.elementID + '_crosshair_axis') : null;
            this.stopAnimation();
            Eif (crosshair && crosshair.getAttribute('opacity') !== '0') {
                this.crosshairInterval = +setTimeout(function () {
                    new ej2_base_1.Animation({}).animate(crosshair, {
                        duration: 200,
                        progress: function (args) {
                            crosshair.style.animation = '';
                            Eif (!chart.enableCanvas) {
                                crosshair.setAttribute('opacity', (1 - (args.timeStamp / args.duration)).toString());
                            }
                            else {
                                crosshair.style.opacity = (1 - (args.timeStamp / args.duration)).toString();
                                crosshairtooltip.style.opacity = (1 - (args.timeStamp / args.duration)).toString();
                            }
                        },
                        end: function () {
                            Iif (chart.enableCanvas) {
                                crosshair.style.opacity = '0';
                                crosshairtooltip.style.opacity = '0';
                            }
                            else {
                                crosshair.setAttribute('opacity', '0');
                            }
                            chart.startMove = false;
                            if (chart.tooltipModule) {
                                chart.tooltipModule.valueX = null;
                                chart.tooltipModule.valueY = null;
                            }
                        }
                    });
                }, duration);
            }
        };
        Crosshair.prototype.getModuleName = function () {
            return 'Crosshair';
        };
        Crosshair.prototype.destroy = function () {
        };
        return Crosshair;
    }());
    exports.Crosshair = Crosshair;
});