scichart
Version:
Fast WebGL JavaScript Charting Library and Framework
642 lines (641 loc) • 32.2 kB
JavaScript
"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 IAnnotation_1 = require("./IAnnotation");
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 = IAnnotation_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;