"use strict";
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 (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
        return extendStatics(d, b);
    };
    return function (d, b) {
        if (typeof b !== "function" && b !== null)
            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
        extendStatics(d, b);
        function __() { this.constructor = d; }
        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
    };
})();
var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
        if (ar || !(i in from)) {
            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
            ar[i] = from[i];
        }
    }
    return to.concat(ar || Array.prototype.slice.call(from));
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.SvgLineAnnotation = void 0;
var LabelPlacement_1 = require("../../../types/LabelPlacement");
var SurfaceType_1 = require("../../../types/SurfaceType");
var XyDirection_1 = require("../../../types/XyDirection");
var drawLabel_1 = require("../Helpers/drawLabel");
var AxisAlignment_1 = require("../../../types/AxisAlignment");
var DpiHelper_1 = require("../TextureManager/DpiHelper");
var AnnotationBase_1 = require("./AnnotationBase");
var constants_1 = require("./constants");
var EAnnotationType_1 = require("./types/EAnnotationType");
var SvgAnnotationBase_1 = require("./SvgAnnotationBase");
var Thickness_1 = require("../../../Core/Thickness");
var font_1 = require("../../../utils/font");
var annotationHelpers_1 = require("./annotationHelpers");
var pointUtil_1 = require("../../../utils/pointUtil");
/**
 * @summary The {@link SvgLineAnnotation} is the SVG-only alternative to the {@link LineAnnotation} which draws a straight line between
 * specific x1x2 y1y2 over the {@link SciChartSurface}
 * @description
 * To add a {@link SvgLineAnnotation} to a {@link SciChartSurface}, use the following code:
 * ```ts
 * const sciChartSurface: SciChartSurface;
 * const lineAnnotation = new SvgLineAnnotation({ x1: 1, x2: 2, y1: 3, y2: 4, stroke: "#FF0000"});
 * sciChartSurface.annotations.add(lineAnnotation);
 * ```
 * @remarks Used by default by {@link CursorModifier}, {@link RolloverModifier}, {@link VerticalSliceModifier} and moving the mouse will trigger an SVG-only layer render, which is cheaper than a full WebGL one
 */
var SvgLineAnnotation = /** @class */ (function (_super) {
    __extends(SvgLineAnnotation, _super);
    function SvgLineAnnotation(options) {
        var _this = this;
        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
        _this = _super.call(this, options) || this;
        /** @inheritDoc */
        _this.type = EAnnotationType_1.EAnnotationType.SvgLineAnnotation;
        /** @inheritDoc */
        _this.surfaceTypes = [
            SurfaceType_1.ESurfaceType.SciChartSurfaceType,
            SurfaceType_1.ESurfaceType.SciChartPolarSurfaceType
        ];
        _this.strokeProperty = "#FFFFFF";
        _this.strokeThicknessProperty = 1;
        _this.strokeDashArrayProperty = [];
        _this.showLabelProperty = false;
        _this.axisLabelStrokeProperty = "#ffffff";
        _this.axisLabelFillProperty = "#b36200";
        _this.labelPlacementProperty = LabelPlacement_1.ELabelPlacement.Top;
        _this.labelValueProperty = "";
        _this.labelPaddingProperty = new Thickness_1.Thickness(2, 4, 2, 4);
        _this.labelCornerRadiusProperty = 2;
        _this.labelCache = new Map();
        _this.axisFontSizeProperty = 13;
        _this.axisFontFamilyProperty = "Arial";
        _this.stroke = (_a = options === null || options === void 0 ? void 0 : options.stroke) !== null && _a !== void 0 ? _a : _this.strokeProperty;
        _this.strokeThickness = (_b = options === null || options === void 0 ? void 0 : options.strokeThickness) !== null && _b !== void 0 ? _b : _this.strokeThicknessProperty;
        _this.strokeDashArray = (_c = options === null || options === void 0 ? void 0 : options.strokeDashArray) !== null && _c !== void 0 ? _c : _this.strokeDashArrayProperty;
        _this.showLabelProperty = (_d = options === null || options === void 0 ? void 0 : options.showLabel) !== null && _d !== void 0 ? _d : _this.showLabelProperty;
        _this.axisLabelStrokeProperty = (_e = options === null || options === void 0 ? void 0 : options.axisLabelStroke) !== null && _e !== void 0 ? _e : _this.axisLabelStrokeProperty;
        _this.axisLabelFillProperty = (_f = options === null || options === void 0 ? void 0 : options.axisLabelFill) !== null && _f !== void 0 ? _f : _this.axisLabelFillProperty;
        _this.axisFontSizeProperty = (_g = options === null || options === void 0 ? void 0 : options.axisFontSize) !== null && _g !== void 0 ? _g : _this.axisFontSizeProperty;
        _this.axisFontFamilyProperty = (_h = options === null || options === void 0 ? void 0 : options.axisFontFamily) !== null && _h !== void 0 ? _h : _this.axisFontFamilyProperty;
        _this.labelPlacementProperty = (_j = options === null || options === void 0 ? void 0 : options.labelPlacement) !== null && _j !== void 0 ? _j : _this.labelPlacementProperty;
        _this.labelValueProperty = (_k = options === null || options === void 0 ? void 0 : options.labelValue) !== null && _k !== void 0 ? _k : _this.labelValueProperty;
        _this.labelPaddingProperty = (_l = options === null || options === void 0 ? void 0 : options.labelPadding) !== null && _l !== void 0 ? _l : _this.labelPaddingProperty;
        _this.labelCornerRadiusProperty = (_m = options === null || options === void 0 ? void 0 : options.labelCornerRadius) !== null && _m !== void 0 ? _m : _this.labelCornerRadiusProperty;
        _this.resizeDirections = XyDirection_1.EXyDirection.XyDirection;
        return _this;
    }
    Object.defineProperty(SvgLineAnnotation.prototype, "stroke", {
        /** @inheritDoc */
        get: function () {
            return this.strokeProperty;
        },
        /** @inheritDoc */
        set: function (htmlColorCode) {
            this.strokeProperty = htmlColorCode;
            this.notifyPropertyChanged(constants_1.PROPERTY.STROKE);
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(SvgLineAnnotation.prototype, "strokeThickness", {
        /** @inheritDoc */
        get: function () {
            return this.strokeThicknessProperty;
        },
        /** @inheritDoc */
        set: function (value) {
            this.strokeThicknessProperty = value;
            this.notifyPropertyChanged(constants_1.PROPERTY.STROKE_THICKNESS);
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(SvgLineAnnotation.prototype, "strokeDashArray", {
        /** @inheritDoc */
        get: function () {
            return this.strokeDashArrayProperty;
        },
        /** @inheritDoc */
        set: function (value) {
            this.strokeDashArrayProperty = value;
            this.notifyPropertyChanged(constants_1.PROPERTY.STROKE_DASH_ARRAY);
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(SvgLineAnnotation.prototype, "showLabel", {
        /** @inheritDoc */
        get: function () {
            return this.showLabelProperty;
        },
        /** @inheritDoc */
        set: function (value) {
            this.showLabelProperty = value;
            this.notifyPropertyChanged(constants_1.PROPERTY.SHOW_LABEL);
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(SvgLineAnnotation.prototype, "axisLabelStroke", {
        /** @inheritDoc */
        get: function () {
            return this.axisLabelStrokeProperty;
        },
        /** @inheritDoc */
        set: function (value) {
            this.axisLabelStrokeProperty = value;
            this.notifyPropertyChanged(constants_1.PROPERTY.AXIS_LABELS_STROKE);
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(SvgLineAnnotation.prototype, "axisLabelFill", {
        /** @inheritDoc */
        get: function () {
            return this.axisLabelFillProperty;
        },
        /** @inheritDoc */
        set: function (value) {
            this.axisLabelFillProperty = value;
            this.notifyPropertyChanged(constants_1.PROPERTY.AXIS_LABELS_FILL);
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(SvgLineAnnotation.prototype, "axisFontSize", {
        /** @inheritDoc */
        get: function () {
            return this.axisFontSizeProperty;
        },
        /** @inheritDoc */
        set: function (value) {
            this.axisFontSizeProperty = value;
            this.notifyPropertyChanged(constants_1.PROPERTY.AXIS_FONT_SIZE);
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(SvgLineAnnotation.prototype, "axisFontFamily", {
        /** @inheritDoc */
        get: function () {
            return this.axisFontFamilyProperty;
        },
        /** @inheritDoc */
        set: function (value) {
            this.axisFontFamilyProperty = value;
            this.notifyPropertyChanged(constants_1.PROPERTY.AXIS_FONT_FAMILY);
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(SvgLineAnnotation.prototype, "labelPlacement", {
        /** @inheritDoc */
        get: function () {
            return this.labelPlacementProperty;
        },
        /** @inheritDoc */
        set: function (value) {
            this.labelPlacementProperty = value;
            this.notifyPropertyChanged(constants_1.PROPERTY.LABEL_PLACEMENT);
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(SvgLineAnnotation.prototype, "labelValue", {
        /** @inheritDoc */
        get: function () {
            return this.labelValueProperty;
        },
        /** @inheritDoc */
        set: function (value) {
            this.labelValueProperty = value;
            this.notifyPropertyChanged(constants_1.PROPERTY.LABEL_VALUE);
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(SvgLineAnnotation.prototype, "labelPadding", {
        /** @inheritdoc */
        get: function () {
            return this.labelPaddingProperty;
        },
        set: function (value) {
            this.labelPaddingProperty = value;
            this.notifyPropertyChanged(constants_1.PROPERTY.LABEL_PADDING);
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(SvgLineAnnotation.prototype, "labelCornerRadius", {
        /** @inheritdoc */
        get: function () {
            return this.labelCornerRadiusProperty;
        },
        set: function (value) {
            this.labelCornerRadiusProperty = value;
            this.notifyPropertyChanged(constants_1.PROPERTY.LABEL_CORNER_RADIUS);
        },
        enumerable: false,
        configurable: true
    });
    /** @inheritDoc */
    SvgLineAnnotation.prototype.create = function (xCalc, yCalc, xCoordSvgTrans, yCoordSvgTrans) {
        this.clear();
        var _a = annotationHelpers_1.annotationHelpers.createSvgLineAndLabel(this.showLabel), svgElement = _a.svgElement, svgLine = _a.svgLine, svgLabelsContainer = _a.svgLabelsContainer;
        this.lineEl = svgLine;
        this.updateLineStyle();
        if (svgLabelsContainer) {
            this.labelsContainer = svgLabelsContainer;
        }
        this.setSvg(svgElement);
        if (this.svgRoot && this.svg) {
            if (this.nextSibling) {
                this.svgRoot.insertBefore(this.svg, this.nextSibling);
            }
            else {
                this.svgRoot.appendChild(this.svg);
            }
        }
        this.update(xCalc, yCalc, xCoordSvgTrans, yCoordSvgTrans);
    };
    /** @inheritDoc */
    SvgLineAnnotation.prototype.update = function (xCalc, yCalc, xCoordSvgTrans, yCoordSvgTrans) {
        var _this = this;
        if (!this.svg || !this.lineEl) {
            this.create(xCalc, yCalc, xCoordSvgTrans, yCoordSvgTrans);
            return;
        }
        this.xCoordSvgTransProperty = xCoordSvgTrans;
        this.yCoordSvgTransProperty = yCoordSvgTrans;
        var _a = this.convertPolarToCartesian(this.getX1Coordinate(xCalc, yCalc), this.getY1Coordinate(xCalc, yCalc), true), borderX1 = _a.x, borderY1 = _a.y;
        var _b = this.convertPolarToCartesian(this.getX2Coordinate(xCalc, yCalc), this.getY2Coordinate(xCalc, yCalc), true), borderX2 = _b.x, borderY2 = _b.y;
        var x1 = Math.floor(borderX1);
        var y1 = Math.floor(borderY1);
        var x2 = Math.floor(borderX2);
        var y2 = Math.floor(borderY2);
        var originalXAxes = this.parentSurface.xAxes.asArray().filter(function (a) { return a.isVisible; });
        var originalYAxes = this.parentSurface.yAxes.asArray().filter(function (a) { return a.isVisible; });
        // a "virtual" X axis -> means a non-vertical X-Axis OR a vertical Y-Axis
        var virtualXAxes = __spreadArray(__spreadArray([], originalXAxes.filter(function (a) { return !a.isVerticalChart; }), true), originalYAxes.filter(function (a) { return a.isVerticalChart; }), true);
        var virtualYAxes = __spreadArray(__spreadArray([], originalYAxes.filter(function (a) { return !a.isVerticalChart; }), true), originalXAxes.filter(function (a) { return a.isVerticalChart; }), true);
        if (this.showLabel && this.labelsContainer && !this.parentSurface.isPolar) {
            this.labelCache.forEach(function (l) { return (l.inUse = false); });
            var coord_1;
            var axesToLabel = [];
            if (x1 === x2 && y1 === 0) { // Vertical Line
                coord_1 = borderX1;
                axesToLabel = virtualXAxes;
            }
            else if (y1 === y2 && x1 === 0) { // Horizontal Line
                coord_1 = borderY1;
                axesToLabel = virtualYAxes;
            }
            axesToLabel.forEach(function (axis) {
                var scaledCoord = coord_1 * DpiHelper_1.DpiHelper.PIXEL_RATIO;
                if (axis.drawLabels &&
                    (!axis.isStackedAxis
                        || (axis.offset < scaledCoord && axis.offset + axis.getAxisSize() > scaledCoord))) {
                    _this.drawSvgAxisLabel(axis, scaledCoord);
                }
            });
            // Delete unused labels
            this.labelCache.forEach(function (l) {
                if (!l.inUse) {
                    l.group.remove();
                    _this.labelCache.delete(l.axisId);
                }
            });
            this.labelsContainer.style.display = "block";
        }
        else if (this.labelsContainer) {
            this.labelsContainer.style.display = "none";
        }
        if (x1 === x2 && y1 === 0) { // Horizontal line
            y2 -= yCoordSvgTrans;
            if (this.showLabel && virtualXAxes.length > 0) {
                var primaryTopAxis = virtualXAxes.find(function (axis) { return axis.axisAlignment === AxisAlignment_1.EAxisAlignment.Top; });
                var topOffset = primaryTopAxis
                    ? primaryTopAxis.axisRenderer.getAxisReservedSpace(true)
                    : 0;
                var primaryBottomAxis = virtualXAxes.find(function (axis) { return axis.axisAlignment === AxisAlignment_1.EAxisAlignment.Bottom; });
                var bottomOffset = primaryBottomAxis
                    ? primaryBottomAxis.axisRenderer.getAxisReservedSpace(true)
                    : 0;
                y1 -= topOffset;
                y2 += bottomOffset;
            }
        }
        if (y1 === y2 && x1 === 0) { // Vertical line
            x2 -= xCoordSvgTrans;
            if (this.showLabel && virtualYAxes.length > 0) {
                var primaryLeftAxis = virtualYAxes.find(function (axis) { return axis.axisAlignment === AxisAlignment_1.EAxisAlignment.Left; });
                var leftOffset = primaryLeftAxis
                    ? primaryLeftAxis.axisRenderer.getAxisReservedSpace(true)
                    : 0;
                var primaryRightAxis = virtualYAxes.find(function (axis) { return axis.axisAlignment === AxisAlignment_1.EAxisAlignment.Right; });
                var rightOffset = primaryRightAxis
                    ? primaryRightAxis.axisRenderer.getAxisReservedSpace(true)
                    : 0;
                x1 -= leftOffset;
                x2 += rightOffset;
            }
        }
        x1 += xCoordSvgTrans;
        y1 += yCoordSvgTrans;
        x2 += xCoordSvgTrans;
        y2 += yCoordSvgTrans;
        this.lineEl.setAttribute("x1", x1.toString());
        this.lineEl.setAttribute("y1", y1.toString());
        this.lineEl.setAttribute("x2", x2.toString());
        this.lineEl.setAttribute("y2", y2.toString());
        this.svg.style.visibility = this.isHidden ? "hidden" : "visible";
        this.svg.style.opacity = this.opacity.toString();
        this.setAnnotationBorders(x1, y1, x2, y2);
        this.updateAdornerInner();
    };
    /**
     * Mimics `AxisRenderer.drawModifiersAxisLabel` but for SVG
     */
    SvgLineAnnotation.prototype.drawSvgAxisLabel = function (axis, coord) {
        var _a, _b, _c, _d;
        if (!this.labelsContainer)
            return;
        var labelText = this.labelValue || (0, drawLabel_1.getLabelValue)(axis, coord);
        if (!labelText)
            return;
        var cached = this.labelCache.get(axis.id);
        if (!cached) {
            var svgNs = "http://www.w3.org/2000/svg";
            var group = document.createElementNS(svgNs, "g");
            var rect = document.createElementNS(svgNs, "rect");
            var text = document.createElementNS(svgNs, "text");
            group.appendChild(rect);
            group.appendChild(text);
            this.labelsContainer.appendChild(group);
            cached = { group: group, rect: rect, text: text, axisId: axis.id, inUse: true };
            this.labelCache.set(axis.id, cached);
        }
        cached.inUse = true;
        cached.group.style.display = "block";
        var fill = this.axisLabelFill;
        var stroke = this.axisLabelStroke;
        var fontFamily = (0, font_1.getFontFamily)((_b = (_a = axis.labelStyle) === null || _a === void 0 ? void 0 : _a.fontFamily) !== null && _b !== void 0 ? _b : this.axisFontFamily, false);
        var fontSize = (_d = (_c = axis.labelStyle) === null || _c === void 0 ? void 0 : _c.fontSize) !== null && _d !== void 0 ? _d : this.axisFontSize;
        cached.text.setAttribute("font-family", fontFamily);
        cached.text.setAttribute("font-size", fontSize.toString());
        cached.text.setAttribute("fill", stroke);
        cached.text.setAttribute("text-anchor", "middle");
        cached.text.setAttribute("dominant-baseline", "central");
        cached.text.textContent = labelText;
        cached.rect.setAttribute("fill", fill);
        // cached.rect.setAttribute("opacity", "0.4"); // for testing only
        cached.rect.setAttribute("stroke", "none");
        cached.rect.setAttribute("rx", this.labelCornerRadiusProperty.toString());
        var bbox = cached.text.getBBox();
        var dpi = DpiHelper_1.DpiHelper.PIXEL_RATIO;
        var scaledPad = new Thickness_1.Thickness(this.labelPaddingProperty.top / dpi, this.labelPaddingProperty.right / dpi, this.labelPaddingProperty.bottom / dpi, this.labelPaddingProperty.left / dpi);
        var textureWidth = bbox.width + scaledPad.left + scaledPad.right;
        var textureHeight = bbox.height + scaledPad.top + scaledPad.bottom;
        var viewRect = axis.viewRect;
        var offset = axis.offset;
        var xPosition = 0;
        var yPosition = 0;
        var getPosition = function (viewRectOffset, c, textureSize) {
            var scaledTextureSize = textureSize * dpi;
            return viewRectOffset + c - scaledTextureSize / 2;
        };
        var scaledViewRectY = viewRect.y / dpi;
        var scaledViewRectHeight = viewRect.height / dpi;
        var scaledViewRectX = viewRect.x / dpi;
        var scaledViewRectWidth = viewRect.width / dpi;
        var reserved = axis.axisRenderer.getAxisReservedSpace(true);
        switch (axis.axisAlignment) {
            case AxisAlignment_1.EAxisAlignment.Top:
                xPosition = getPosition(viewRect.x - offset, coord, textureWidth) / dpi;
                if (axis.isInnerAxis) {
                    yPosition = scaledViewRectY;
                }
                else {
                    yPosition = scaledViewRectY + scaledViewRectHeight - textureHeight;
                }
                yPosition -= reserved;
                break;
            case AxisAlignment_1.EAxisAlignment.Bottom:
                xPosition = getPosition(viewRect.x - offset, coord, textureWidth) / dpi;
                if (axis.isInnerAxis) {
                    yPosition = scaledViewRectY + scaledViewRectHeight - textureHeight;
                }
                else {
                    yPosition = scaledViewRectY;
                }
                yPosition += reserved;
                break;
            case AxisAlignment_1.EAxisAlignment.Left:
                yPosition = getPosition(viewRect.y - offset, coord, textureHeight) / dpi;
                if (axis.isInnerAxis) {
                    xPosition = scaledViewRectX;
                }
                else {
                    xPosition = scaledViewRectX + scaledViewRectWidth - textureWidth;
                }
                xPosition -= reserved;
                break;
            case AxisAlignment_1.EAxisAlignment.Right:
                yPosition = getPosition(viewRect.y - offset, coord, textureHeight) / dpi;
                if (axis.isInnerAxis) {
                    xPosition = scaledViewRectX + scaledViewRectWidth - textureWidth;
                }
                else {
                    xPosition = scaledViewRectX;
                }
                xPosition += reserved;
                break;
        }
        var svgX = Math.round(xPosition);
        var svgY = Math.round(yPosition);
        cached.rect.setAttribute("x", svgX.toString());
        cached.rect.setAttribute("y", svgY.toString());
        cached.rect.setAttribute("width", textureWidth.toString());
        cached.rect.setAttribute("height", textureHeight.toString());
        var textX = svgX + textureWidth / 2;
        var textY = svgY + textureHeight / 2;
        cached.text.setAttribute("x", textX.toString());
        cached.text.setAttribute("y", textY.toString());
    };
    SvgLineAnnotation.prototype.getAnnotationBorders = function () {
        var xCalc = this.xAxis.getCurrentCoordinateCalculator();
        var yCalc = this.yAxis.getCurrentCoordinateCalculator();
        var _a = this.convertPolarToCartesian(this.getX1Coordinate(xCalc, yCalc), this.getY1Coordinate(xCalc, yCalc), true), borderX1 = _a.x, borderY1 = _a.y;
        var _b = this.convertPolarToCartesian(this.getX2Coordinate(xCalc, yCalc), this.getY2Coordinate(xCalc, yCalc), true), borderX2 = _b.x, borderY2 = _b.y;
        return {
            x1: borderX1 + this.xCoordSvgTransProperty,
            x2: borderX2 + this.xCoordSvgTransProperty,
            y1: borderY1 + this.yCoordSvgTransProperty,
            y2: borderY2 + this.yCoordSvgTransProperty,
        };
    };
    SvgLineAnnotation.prototype.getAdornerAnnotationBorders = function (ordered, applyDelta) {
        var _a = this.getAnnotationBorders(), x1 = _a.x1, x2 = _a.x2, y1 = _a.y1, y2 = _a.y2;
        if (applyDelta) {
            var deltaX = this.strokeThickness / 2;
            var deltaY = this.strokeThickness / 2;
            x1 -= deltaX;
            x2 += deltaX;
            y1 -= deltaY;
            y2 += deltaY;
        }
        return { x1: x1, x2: x2, y1: y1, y2: y2 };
    };
    /**
     * Generate SVG string for adorner (selection handles and line)
     */
    SvgLineAnnotation.prototype.svgStringAdornerTemplate = function (x1, y1, x2, y2) {
        var colorLine = this.selectionBoxStroke;
        return "<svg xmlns=\"http://www.w3.org/2000/svg\">\n    <line x1=\"".concat(x1, "\" y1=\"").concat(y1, "\" x2=\"").concat(x2, "\" y2=\"").concat(y2, "\" stroke=\"").concat(colorLine, "\" stroke-width=\"6\" />\n    ").concat(this.canDragPoint(AnnotationBase_1.EDraggingGripPoint.x1y1) ? this.getAnnotationGripSvg(x1, y1) : "", "\n    ").concat(this.canDragPoint(AnnotationBase_1.EDraggingGripPoint.x2y2) ? this.getAnnotationGripSvg(x2, y2) : "", "\n    </svg>");
    };
    /**
     * Handle drag start - detect which point or body is being dragged
     */
    SvgLineAnnotation.prototype.onDragStarted = function (args) {
        _super.prototype.onDragStarted.call(this, args);
        var _a = this.getAnnotationBorders(), x1 = _a.x1, x2 = _a.x2, y1 = _a.y1, y2 = _a.y2;
        var mouseX = args.mousePoint.x / DpiHelper_1.DpiHelper.PIXEL_RATIO;
        var mouseY = args.mousePoint.y / DpiHelper_1.DpiHelper.PIXEL_RATIO;
        if (this.canDragPoint(AnnotationBase_1.EDraggingGripPoint.x1y1)) {
            var dist = (0, pointUtil_1.calcDistance)(x1, y1, mouseX, mouseY);
            if (dist < this.annotationsGripsRadius * DpiHelper_1.DpiHelper.PIXEL_RATIO) {
                this.adornerDraggingPoint = AnnotationBase_1.EDraggingGripPoint.x1y1;
                return true;
            }
        }
        if (this.canDragPoint(AnnotationBase_1.EDraggingGripPoint.x2y2)) {
            var dist = (0, pointUtil_1.calcDistance)(x2, y2, mouseX, mouseY);
            if (dist < this.annotationsGripsRadius * DpiHelper_1.DpiHelper.PIXEL_RATIO) {
                this.adornerDraggingPoint = AnnotationBase_1.EDraggingGripPoint.x2y2;
                return true;
            }
        }
        if (this.canDragPoint(AnnotationBase_1.EDraggingGripPoint.Body)) {
            if (this.clickToSelect(args)) {
                this.adornerDraggingPoint = AnnotationBase_1.EDraggingGripPoint.Body;
                return true;
            }
        }
        return false;
    };
    /**
     * Calculate drag distance and update annotation coordinates
     */
    SvgLineAnnotation.prototype.calcDragDistance = function (xyValues) {
        if (!this.prevValue) {
            this.prevValue = xyValues;
            return;
        }
        if (this.adornerDraggingPoint === AnnotationBase_1.EDraggingGripPoint.Body) {
            this.x1 = this.x1 + this.applyPixelRatioToDragDist(xyValues.x - this.prevValue.x);
            this.x2 = this.x2 + this.applyPixelRatioToDragDist(xyValues.x - this.prevValue.x);
            this.y1 = this.y1 + (xyValues.y - this.prevValue.y);
            this.y2 = this.y2 + (xyValues.y - this.prevValue.y);
        }
        else if (this.adornerDraggingPoint === AnnotationBase_1.EDraggingGripPoint.x1y1) {
            if (this.resizeDirections === XyDirection_1.EXyDirection.XDirection) {
                this.x1 += this.applyPixelRatioToDragDist(xyValues.x - this.prevValue.x);
            }
            else if (this.resizeDirections === XyDirection_1.EXyDirection.YDirection) {
                this.y1 += xyValues.y - this.prevValue.y;
            }
            else {
                this.x1 += this.applyPixelRatioToDragDist(xyValues.x - this.prevValue.x);
                this.y1 += xyValues.y - this.prevValue.y;
            }
        }
        else if (this.adornerDraggingPoint === AnnotationBase_1.EDraggingGripPoint.x2y2) {
            if (this.resizeDirections === XyDirection_1.EXyDirection.XDirection) {
                this.x2 += this.applyPixelRatioToDragDist(xyValues.x - this.prevValue.x);
            }
            else if (this.resizeDirections === XyDirection_1.EXyDirection.YDirection) {
                this.y2 += xyValues.y - this.prevValue.y;
            }
            else {
                this.x2 += this.applyPixelRatioToDragDist(xyValues.x - this.prevValue.x);
                this.y2 += xyValues.y - this.prevValue.y;
            }
        }
        this.prevValue = xyValues;
    };
    /**
     * Check if click is on the annotation (for selection)
     */
    SvgLineAnnotation.prototype.checkIsClickedOnAnnotationInternal = function (x, y) {
        var _a = this.getAnnotationBorders(), x1 = _a.x1, x2 = _a.x2, y1 = _a.y1, y2 = _a.y2;
        var notScaledX = x / DpiHelper_1.DpiHelper.PIXEL_RATIO + this.xCoordSvgTransProperty;
        var notScaledY = y / DpiHelper_1.DpiHelper.PIXEL_RATIO + this.yCoordSvgTransProperty;
        var distanceFromLine = (0, pointUtil_1.calcDistanceFromLineSegment)(notScaledX, notScaledY, x1, y1, x2, y2);
        return distanceFromLine <= SvgLineAnnotation.DISTANCE_TO_LINE;
    };
    /** @inheritDoc */
    SvgLineAnnotation.prototype.notifyPropertyChanged = function (propertyName) {
        _super.prototype.notifyPropertyChanged.call(this, propertyName);
        var lineStyleProps = [
            constants_1.PROPERTY.STROKE,
            constants_1.PROPERTY.STROKE_THICKNESS,
            constants_1.PROPERTY.STROKE_DASH_ARRAY,
            constants_1.PROPERTY.OPACITY
        ];
        var labelStyleProps = [constants_1.PROPERTY.AXIS_LABELS_FILL, constants_1.PROPERTY.AXIS_LABELS_STROKE, constants_1.PROPERTY.SHOW_LABEL];
        if (lineStyleProps.includes(propertyName)) {
            this.updateLineStyle();
        }
        if (labelStyleProps.includes(propertyName)) {
            if (this.labelsContainer) {
                this.labelsContainer.innerHTML = "";
            }
            this.labelCache.clear();
        }
    };
    SvgLineAnnotation.prototype.updateLineStyle = function () {
        if (!this.lineEl)
            return;
        this.lineEl.setAttribute("stroke", this.stroke);
        this.lineEl.setAttribute("stroke-width", this.strokeThickness.toString());
        this.lineEl.setAttribute("stroke-opacity", this.opacity.toString());
        this.lineEl.setAttribute("shape-rendering", "crispEdges");
        if (this.strokeDashArray && this.strokeDashArray.length > 0) {
            this.lineEl.setAttribute("stroke-dasharray", this.strokeDashArray.join(" "));
        }
        else {
            this.lineEl.removeAttribute("stroke-dasharray");
        }
    };
    /** @inheritDoc */
    SvgLineAnnotation.prototype.toJSON = function () {
        var json = _super.prototype.toJSON.call(this);
        var options = {
            axisFontFamily: this.axisFontFamily,
            axisFontSize: this.axisFontSize,
            axisLabelFill: this.axisLabelFill,
            axisLabelStroke: this.axisLabelStroke,
            labelPlacement: this.labelPlacement,
            labelValue: this.labelValue,
            showLabel: this.showLabel,
            stroke: this.stroke,
            strokeDashArray: this.strokeDashArray,
            strokeThickness: this.strokeThickness,
            labelPadding: this.labelPadding,
            labelCornerRadius: this.labelCornerRadius,
        };
        Object.assign(json.options, options);
        return json;
    };
    SvgLineAnnotation.DISTANCE_TO_LINE = 10;
    return SvgLineAnnotation;
}(SvgAnnotationBase_1.SvgAnnotationBase));
exports.SvgLineAnnotation = SvgLineAnnotation;
